Skip to content

Commit

Permalink
page save improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@indpurvesh
indpurvesh committed Oct 4, 2024
1 parent f255dea commit 823e6da
Show file tree
Hide file tree
Showing 6 changed files with 380 additions and 446 deletions.
2 changes: 1 addition & 1 deletion react-admin/.env.example
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
VITE_AVORED_FRONTEND_BASE_URL=http://localhost:3000
VITE_AVORED_BACKEND_BASE_URL=http://localhost:8080
VITE_AVORED_BACKEND_BASE_URL=http://localhost:8081
329 changes: 17 additions & 312 deletions react-admin/src/pages/page/PageCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
Cog8ToothIcon,
MinusIcon,
PlusIcon,
TrashIcon,
} from "@heroicons/react/24/solid";
Expand All @@ -16,19 +15,16 @@ import ErrorMessage from "../../components/ErrorMessage";
import "easymde/dist/easymde.min.css";
import slug from "slug";
import {
AvoRedPageFieldData,
AvoRedPageFieldSelectFieldDataOptions,
CreatableFieldType,
CreatablePageType,
SaveFieldType,
SavePageType,
} from "../../types/page/CreatablePageType";
import {
AvoRedPageDataType,
AvoRedPageFieldType,
} from "../../types/page/IPageModel";
import AvoredModal from "../../components/AvoredModal";
import _ from "lodash";
import AvoRedButton from "../../components/AvoRedButton";
import SimpleMdeReact from "react-simplemde-editor";
import { PageFieldModal } from "./PageFieldModal";

function PageCreate() {
const [t] = useTranslation("global");
Expand All @@ -43,7 +39,7 @@ function PageCreate() {
setValue,
getValues,
trigger,
} = useForm<CreatablePageType>({
} = useForm<SavePageType>({
resolver: joiResolver(usePageCreateSchema(), { allowUnknown: true }),
});

Expand All @@ -70,6 +66,8 @@ function PageCreate() {
});
await trigger("page_fields");
setCurrentIndex(max_index);

// @todo fix this one
setIsOpen(true);
};

Expand All @@ -79,7 +77,7 @@ function PageCreate() {
setCurrentIndex(0);
};

const submitHandler = async (data: CreatablePageType) => {
const submitHandler = async (data: SavePageType) => {
// console.log(data)
mutate(data);
};
Expand All @@ -88,204 +86,12 @@ function PageCreate() {
setValue("identifier", slug(e.currentTarget.value || ""));
};

const onPageFieldChange = async (
index: number,
field_type: AvoRedPageFieldType,
data_type: AvoRedPageDataType,
) => {
setValue(`page_fields.${index}.field_type`, field_type);
setValue(`page_fields.${index}.data_type`, data_type);

if (field_type === AvoRedPageFieldType.SELECT) {
setValue(`page_fields.${index}.field_data.select_field_options`, []);
}

switch (field_type) {
case AvoRedPageFieldType.SELECT:
const empty_option: AvoRedPageFieldSelectFieldDataOptions = {
label: "",
value: "",
};

const options: AvoRedPageFieldData = {
select_field_options: [],
};
if (typeof options.select_field_options == "undefined") {
options.select_field_options = [];
}
options.select_field_options.push(empty_option);
setValue(`page_fields.${index}.field_data`, options);

break;
default:
break;
}

await trigger(`page_fields.${index}`);
};

const optionAddOnClick = async (
e: React.MouseEvent<HTMLButtonElement>,
field_index: number,
) => {
e.preventDefault();
const page_field: CreatableFieldType = getValues(
`page_fields.${field_index}`,
);
const empty_option: AvoRedPageFieldSelectFieldDataOptions = {
label: "",
value: "",
};

page_field.field_data?.select_field_options.push(empty_option);

await trigger("page_fields");
};

const optionRemoveOnClick = async (
e: React.MouseEvent<HTMLButtonElement>,
field_index: number,
option_index: number,
) => {
e.preventDefault();
const page_field: CreatableFieldType = getValues(
`page_fields.${field_index}`,
);
page_field.field_data?.select_field_options.splice(option_index, 1);

await trigger(`page_fields.${field_index}`);
};

const optionLabelOnChange = async (
e: any,
field_index: number,
option_index: number,
) => {
setValue(
`page_fields.${field_index}.field_data.select_field_options.${option_index}.label`,
e.target.value,
);
await trigger("page_fields");
};

const optionValueOnChange = async (
e: any,
field_index: number,
option_index: number,
) => {
setValue(
`page_fields.${field_index}.field_data.select_field_options.${option_index}.value`,
e.target.value,
);
await trigger("page_fields");
};

const textEditorOnChange = (value: string, field_index: number) => {
setValue(`page_fields.${field_index}.field_content`, value);
};
const renderFieldData = (current_index: number) => {
const page_field: CreatableFieldType = getValues(
`page_fields.${current_index}`,
);

switch (page_field.field_type) {
case AvoRedPageFieldType.SELECT:
return (
<>
{page_field.field_data?.select_field_options.map(
(option, option_index) => {
return (
<div key={option_index} className="block mt-3 w-full">
<div className="flex w-full items-center">
<div className="w-1/2">
<div className="block">
<input
value={option.label}
onChange={(e) =>
optionLabelOnChange(
e,
current_index,
option_index,
)
}
placeholder={t("label")}
className="appearance-none rounded-md ring-1 ring-gray-400
relative border-0 block w-full px-3 py-2 placeholder-gray-500 text-gray-900
active::ring-primary-500
focus:ring-primary-500 focus:outline-none focus:z-10
disabled:bg-gray-200 disabled:opacity-70
sm:text-sm "
/>
</div>
</div>
<div className="w-1/2 ml-3">
<div className="flex items-center w-full">
<div>
<input
value={option.value}
onChange={(e) =>
optionValueOnChange(
e,
current_index,
option_index,
)
}
placeholder={t("value")}
className="appearance-none rounded-md ring-1 ring-gray-400
relative border-0 block w-full px-3 py-2 placeholder-gray-500 text-gray-900
active::ring-primary-500
focus:ring-primary-500 focus:outline-none focus:z-10
disabled:bg-gray-200 disabled:opacity-70
sm:text-sm "
/>
</div>
<div>
{getValues(
`page_fields.${current_index}.field_data.select_field_options`,
).length ===
option_index + 1 ? (
<>
<button
onClick={(e) =>
optionAddOnClick(e, currentIndex)
}
className="ml-2"
>
<PlusIcon className="w-5 h-5" />
</button>
</>
) : (
<>
<button
onClick={(e) =>
optionRemoveOnClick(
e,
currentIndex,
option_index,
)
}
className="ml-2"
>
<MinusIcon className="w-5 h-5" />
</button>
</>
)}
</div>
</div>
</div>
</div>
</div>
);
},
)}
</>
);
default:
return <></>;
}
};

const renderField = (field: CreatableFieldType, index: number) => {
const renderField = (field: SaveFieldType, index: number) => {
switch (field.field_type) {
case AvoRedPageFieldType.TEXTAREA:
return (
Expand Down Expand Up @@ -374,116 +180,15 @@ function PageCreate() {

<form onSubmit={handleSubmit(submitHandler)}>
{_.size(fields) > 0 ? (
<AvoredModal
closeModal={() => setIsOpen(false)}
modal_header={`Page Field`}
modal_body={
<div className="block">
<div className="flex w-full">
<div className="flex-1 pr-3">
<div className="mb-3">
<InputField
placeholder={t("page_field_name")}
label={t("page_field_name")}
register={register(
`page_fields.${currentIndex}.name`,
)}
/>
</div>
<div className="mb-3">
<InputField
placeholder={t("page_field_identifier")}
label={t("page_field_identifier")}
register={register(
`page_fields.${currentIndex}.identifier`,
)}
/>
</div>

<div className="w-full">
{renderFieldData(currentIndex)}
</div>
</div>
<div className="ml-auto">
<div className="w-64 border-l p-3 mr-auto">
<div
onClick={() =>
onPageFieldChange(
currentIndex,
AvoRedPageFieldType.TEXT,
AvoRedPageDataType.TEXT,
)
}
className={`${getValues(`page_fields.${currentIndex}.field_type`) === AvoRedPageFieldType.TEXT ? "bg-primary-200" : "bg-gray-300"}
ring-1 ring-gray-300 hover:cursor-pointer hover:ring-primary-300 p-3 rounded`}
>
{t("text_field")}
</div>
<div
onClick={() =>
onPageFieldChange(
currentIndex,
AvoRedPageFieldType.TEXTAREA,
AvoRedPageDataType.TEXT,
)
}
className={`${getValues(`page_fields.${currentIndex}.field_type`) === AvoRedPageFieldType.TEXTAREA ? "bg-primary-200" : "bg-gray-300"}
ring-1 mt-2 ring-gray-300 hover:cursor-pointer hover:ring-primary-300 p-3 rounded`}
>
{t("textarea_field")}
</div>
<div
onClick={() =>
onPageFieldChange(
currentIndex,
AvoRedPageFieldType.SELECT,
AvoRedPageDataType.TEXT,
)
}
className={`${getValues(`page_fields.${currentIndex}.field_type`) === AvoRedPageFieldType.SELECT ? "bg-primary-200" : "bg-gray-300"}
ring-1 mt-2 ring-gray-300 hover:cursor-pointer hover:ring-primary-300 p-3 rounded`}
>
{t("select_field")}
</div>

<div
onClick={() =>
onPageFieldChange(
currentIndex,
AvoRedPageFieldType.TextEditor,
AvoRedPageDataType.TEXT,
)
}
className={`${getValues(`page_fields.${currentIndex}.field_type`) === AvoRedPageFieldType.TextEditor ? "bg-primary-200" : "bg-gray-300"}
ring-1 mt-2 ring-gray-300 hover:cursor-pointer hover:ring-primary-300 p-3 rounded`}
>
{t("text_editor_field")}
</div>
</div>
</div>
</div>
<hr className="mt-3" />
<div className="mt-3">
<div className="flex">
<div>
<AvoRedButton
onClick={() => setIsOpen(false)}
className="bg-primary-500"
label={t("create_page_field")}
/>
</div>
<div className="ml-3">
<AvoRedButton
onClick={() => setIsOpen(false)}
label={t("cancel")}
/>
</div>
</div>
</div>
</div>
}
isOpen={isOpen}
></AvoredModal>
<PageFieldModal
register={register}
currentIndex={currentIndex}
getValues={getValues}
setValue={setValue}
trigger={trigger}
setIsOpen={setIsOpen}
isOpen={isOpen} />

) : (
<></>
)}
Expand Down
Loading

0 comments on commit 823e6da

Please sign in to comment.