400 lines
16 KiB
TypeScript
400 lines
16 KiB
TypeScript
// * Packages
|
|
import { useForm, usePage } from "@inertiajs/react";
|
|
import {
|
|
LinkIcon,
|
|
BookTextIcon,
|
|
CogIcon,
|
|
EyeIcon,
|
|
ShieldAlertIcon,
|
|
} from "lucide-react";
|
|
import { route } from "ziggy-js";
|
|
// * Components shadcn
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
// * Other
|
|
import SimpleString from "@/back/Components/Inputs/SimpleString";
|
|
import SimpleSwitch from "@/back/Components/Inputs/SimpleSwitch";
|
|
import SimpleWysiwyg from "@/back/Components/Inputs/Wysiwyg/SimpleWysiwyg";
|
|
import EnumSelect from "@/back/Components/Inputs/EnumSelect";
|
|
import DynamicInputs from "@/back/Components/DynamicPages/DynamicInputs";
|
|
import FieldsetWrapper from "@/back/Components/FieldsetWrapper";
|
|
import ConfigDetails from "@/back/Components/PageConfigs/ConfigDetails";
|
|
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import GoToFrontView from "@/back/Components/GoToFrontView";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import InputError from "@/back/Components/InputError";
|
|
import str from "@/hooks/use-string";
|
|
import { AppEnv, AuthProp, LaravelEnum } from "@/back/types/global";
|
|
import {
|
|
ConfigField,
|
|
DynamicPageModel,
|
|
PageConfigModel,
|
|
} from "@/back/types/dynamic-pages";
|
|
import SubmitButton from "@/back/Components/SubmitButton";
|
|
import useCrudSubmit from "@/hooks/use-crud-submit";
|
|
import Slugifycator from "@/back/Components/Inputs/Slugifycator";
|
|
import { ModelSelect } from "@/back/Components/Inputs/ModelSelect";
|
|
|
|
export default function Form({
|
|
model,
|
|
modelName,
|
|
modelRoute,
|
|
action,
|
|
method,
|
|
}: {
|
|
model?: DynamicPageModel;
|
|
modelName: string;
|
|
modelRoute: string;
|
|
action: string;
|
|
method: number;
|
|
}) {
|
|
|
|
/** Global */
|
|
const { locale, url } = usePage().props.appEnv as AppEnv;
|
|
const dynamicPageUrl = usePage().props.dynamicPageUrl as string;
|
|
const userModel = (usePage().props.auth as AuthProp).user;
|
|
const enumUserRole = usePage().props.enumUserRole as LaravelEnum;
|
|
const enumDynamicPageStatus = usePage().props
|
|
.enumDynamicPageStatus as LaravelEnum;
|
|
|
|
const isConceptor = userModel.role === enumUserRole.conceptor.value;
|
|
|
|
const pageConfigModels = usePage().props
|
|
.pageConfigModels as Array<PageConfigModel>;
|
|
// Models filtered based on the presence of the locale.
|
|
const filteredPageConfigModels = pageConfigModels.filter(
|
|
(pageConfigModel) =>
|
|
pageConfigModel.label?.[locale] !== undefined &&
|
|
pageConfigModel.config?.[locale] !== undefined,
|
|
);
|
|
|
|
// Set empty config by default.
|
|
const defaultConfigId = 0;
|
|
const configOptions = [
|
|
{
|
|
id: defaultConfigId,
|
|
label: {},
|
|
config: {},
|
|
policies: {
|
|
view: true,
|
|
update: true,
|
|
duplicate: true,
|
|
delete: true,
|
|
},
|
|
view: null,
|
|
created_at: new Date(),
|
|
updated_at: new Date(),
|
|
deleted_at: new Date(),
|
|
} as PageConfigModel,
|
|
...filteredPageConfigModels,
|
|
];
|
|
configOptions[defaultConfigId].label[locale] = useTrans(
|
|
"back.config_none_selected",
|
|
);
|
|
|
|
// Set translations.
|
|
const contentAssociateToModel = str(
|
|
useTrans("back.form_associate_to", {
|
|
params: { attribute: useTrans("validation.attributes.content") },
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value();
|
|
const modalTitle = useTrans("back.config_modal_title");
|
|
const modalDescription = useTrans("back.config_modal_descripion");
|
|
const modalClose = useTrans("back.close");
|
|
const anchorAccessConfig = useTrans("back.access_model", {
|
|
params: {
|
|
model: useTrans("models.classes.page-config", { choice: 1 }),
|
|
},
|
|
});
|
|
const transValidationRootLabel = useTrans("validation.custom.root");
|
|
const transValidationParentPageLabel = useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans("validation.custom.parent_page"),
|
|
},
|
|
choice: 2,
|
|
});
|
|
const transAssociateToStatus = useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans("validation.custom.status"),
|
|
},
|
|
choice: 1,
|
|
});
|
|
const transFormTitleIsLocked = useTrans("back.form_title_isLocked");
|
|
const transFormSubtitleIsLocked = useTrans("back.form_subtitle_isLocked");
|
|
|
|
const getConfig = (id: number) =>
|
|
configOptions.find((objet) => objet.id === id)?.config[
|
|
locale
|
|
] as ConfigField[];
|
|
|
|
/** Form section */
|
|
const { post, setData, data, reset } = useForm({
|
|
title: model?.title ? model?.title[locale] : "",
|
|
slug: model?.slug ? model?.slug[locale] : "",
|
|
content: model?.content ? model?.content[locale] : "",
|
|
page_id: model?.page_id ?? null,
|
|
config_id: model?.config_id ?? configOptions[defaultConfigId].id,
|
|
status: model?.status ?? enumDynamicPageStatus.draft.value,
|
|
isLocked: model?.isLocked ?? false,
|
|
isRoot: model?.isRoot ?? false,
|
|
});
|
|
const defaultIsRootValue =
|
|
!data.isRoot && data.page_id ? [data.page_id] : [];
|
|
const submit = useCrudSubmit({
|
|
method,
|
|
modelRoute,
|
|
modelName,
|
|
action,
|
|
model,
|
|
post,
|
|
data,
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={submit}>
|
|
<InputError all />
|
|
<FieldsetWrapper
|
|
title={useTrans("back.form_title_global")}
|
|
icon={<BookTextIcon className="mr-1" />}
|
|
description={useTrans("back.form_subtitle_global")}
|
|
className="sm:grid-cols-2 gap-4"
|
|
>
|
|
<SimpleString
|
|
name="title"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.attributes.title",
|
|
),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
value={data.title}
|
|
setData={setData}
|
|
/>
|
|
{(!data?.isLocked || isConceptor) && (
|
|
<EnumSelect
|
|
name="status"
|
|
options={enumDynamicPageStatus}
|
|
label={str(transAssociateToStatus).ucFirst().value()}
|
|
placeholder={`ex: ${enumDynamicPageStatus.draft.label}`}
|
|
selected={data.status}
|
|
setData={setData}
|
|
/>
|
|
)}
|
|
</FieldsetWrapper>
|
|
<FieldsetWrapper
|
|
title={useTrans("back.form_title_page_accessibility")}
|
|
icon={<LinkIcon className="mr-1" />}
|
|
description={useTrans("back.form_subtitle_page_accessibility")}
|
|
className="sm:grid-cols-2 gap-4"
|
|
>
|
|
{isConceptor && (
|
|
<div className="col-span-2">
|
|
<SimpleSwitch
|
|
label={str(transValidationRootLabel)
|
|
.ucFirst()
|
|
.value()}
|
|
name="isRoot"
|
|
checked={data.isRoot}
|
|
setData={(name, value) => {
|
|
setData("page_id", null);
|
|
setData("slug", "");
|
|
// @ts-expect-error TS2345: 'name' type is dynamic, TypeScript cannot infer the correct key
|
|
setData(name, value);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
{!data?.isRoot && (
|
|
<>
|
|
<ModelSelect
|
|
name="page_id"
|
|
targetModel="dynamic_pages"
|
|
multiple={false}
|
|
field="title"
|
|
closeOnSelect
|
|
label={str(transValidationParentPageLabel)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: "
|
|
defaultValues={defaultIsRootValue}
|
|
exclude={model?.id}
|
|
required={false}
|
|
setData={setData}
|
|
disabled={data.isRoot}
|
|
/>
|
|
<Slugifycator
|
|
value={!data.isRoot ? data.slug : ""}
|
|
targetValue={data.title}
|
|
setData={setData}
|
|
disabled={data.isRoot}
|
|
/>
|
|
</>
|
|
)}
|
|
<div className="col-span-1 md:col-span-2">
|
|
<GoToFrontView
|
|
modelName={useTrans(`models.classes.${modelName}`, {
|
|
choice: 1,
|
|
})}
|
|
pathField={data.isRoot ? "" : (dynamicPageUrl ?? "").replace(url, "").replace(/^\/+/, "")}
|
|
isAvailable={
|
|
model?.status ===
|
|
enumDynamicPageStatus.published.value
|
|
}
|
|
/>
|
|
</div>
|
|
</FieldsetWrapper>
|
|
<FieldsetWrapper
|
|
title={useTrans("back.form_title_page")}
|
|
icon={<CogIcon className="mr-1" />}
|
|
description={useTrans("back.form_subtitle_page")}
|
|
className="gap-4"
|
|
>
|
|
<div className="grid sm:grid-cols-2 gap-4 border-b border-input pb-4">
|
|
<div className="flex justify-start items-end gap-1.5">
|
|
<ModelSelect
|
|
name="config_id"
|
|
targetModel="page_configs"
|
|
multiple={false}
|
|
closeOnSelect
|
|
field="label"
|
|
responsive
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.custom.config",
|
|
),
|
|
},
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
required={false}
|
|
placeholder="ex: John Doe"
|
|
defaultValues={
|
|
data.config_id ? [data.config_id] : []
|
|
}
|
|
setData={setData}
|
|
/>
|
|
{isConceptor &&
|
|
Number(data.config_id) !== defaultConfigId && (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="secondary"
|
|
type="button"
|
|
size="icon"
|
|
>
|
|
<EyeIcon />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-4xl w-full max-h-[100vh]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{modalTitle}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{modalDescription}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="max-h-[25rem] overflow-y-auto">
|
|
<ConfigDetails
|
|
config={getConfig(
|
|
Number(data.config_id),
|
|
)}
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<BtnOptionnalLinkWithTooltip
|
|
link={route(
|
|
"back.page-configs.show",
|
|
data.config_id,
|
|
)}
|
|
content={<CogIcon />}
|
|
tooltipContent={
|
|
anchorAccessConfig
|
|
}
|
|
variant="secondary"
|
|
/>
|
|
<DialogClose asChild>
|
|
<Button variant="secondary">
|
|
{modalClose}
|
|
</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{Number(data.config_id) === defaultConfigId ? (
|
|
<SimpleWysiwyg
|
|
name="content"
|
|
model="DynamicPage"
|
|
label={contentAssociateToModel}
|
|
value={String(
|
|
typeof data.content === "string"
|
|
? data.content
|
|
: "",
|
|
)}
|
|
setData={setData}
|
|
/>
|
|
) : (
|
|
<DynamicInputs
|
|
name="content"
|
|
config={getConfig(Number(data.config_id))}
|
|
content={
|
|
typeof data.content === "object"
|
|
? data.content
|
|
: null
|
|
}
|
|
setData={setData}
|
|
// @ts-expect-error Types diff between custom reset and useForm reset.
|
|
reset={reset}
|
|
/>
|
|
)}
|
|
</FieldsetWrapper>
|
|
{isConceptor && (
|
|
<FieldsetWrapper
|
|
className="gap-4"
|
|
title={transFormTitleIsLocked}
|
|
icon={<ShieldAlertIcon className="mr-1" />}
|
|
description={transFormSubtitleIsLocked}
|
|
inline
|
|
>
|
|
<SimpleSwitch
|
|
name="isLocked"
|
|
checked={data.isLocked}
|
|
setData={setData}
|
|
/>
|
|
</FieldsetWrapper>
|
|
)}
|
|
<div className="text-center">
|
|
<SubmitButton
|
|
modelTrans={useTrans(`models.classes.${modelName}`, {
|
|
choice: 1,
|
|
})}
|
|
/>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|