313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
// * Packages
|
|
import { useForm, usePage } from "@inertiajs/react";
|
|
import { BookTextIcon, EyeIcon, MapPinIcon, RouteIcon } from "lucide-react";
|
|
// * Other
|
|
import SimpleString from "@/back/Components/Inputs/SimpleString";
|
|
import SimpleNumber from "@/back/Components/Inputs/SimpleNumber";
|
|
import FieldsetWrapper from "@/back/Components/FieldsetWrapper";
|
|
import SimpleSwitch from "@/back/Components/Inputs/SimpleSwitch";
|
|
import CompleteInputFile from "@/back/Components/Inputs/CompleteInputFile";
|
|
import SimpleWysiwyg from "@/back/Components/Inputs/Wysiwyg/SimpleWysiwyg";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import str from "@/hooks/use-string";
|
|
import InputError from "@/back/Components/InputError";
|
|
import { DynamicFieldTypes } from "@/back/types/dynamic-pages";
|
|
import { CompanyModel } from "@/back/types/others";
|
|
import SubmitButton from "@/back/Components/SubmitButton";
|
|
import useCrudSubmit from "@/hooks/use-crud-submit";
|
|
import { ModelSelect } from "@/back/Components/Inputs/ModelSelect";
|
|
|
|
export default function Form({
|
|
model,
|
|
modelName,
|
|
modelRoute,
|
|
action,
|
|
method,
|
|
}: {
|
|
model?: CompanyModel;
|
|
modelName: string;
|
|
modelRoute: string;
|
|
action: string;
|
|
method: number;
|
|
}) {
|
|
const enumDynamicFieldTypes = usePage().props
|
|
.enumDynamicFieldTypes as DynamicFieldTypes;
|
|
|
|
/** Form section */
|
|
const { post, setData, data, reset } = useForm({
|
|
name: model?.name,
|
|
logo: model?.logo ?? "",
|
|
responsable: model?.responsable ?? "",
|
|
url: model?.url ?? null,
|
|
informations: model?.informations,
|
|
employees: model?.employees ?? 0,
|
|
latitude: model?.latitude,
|
|
longitude: model?.longitude,
|
|
activity_id: model?.activity_id,
|
|
sector_id: model?.sector_id,
|
|
published: model?.published,
|
|
});
|
|
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="name"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.attributes.name",
|
|
),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: John Doe"
|
|
value={data.name}
|
|
setData={setData}
|
|
className="justify-start"
|
|
/>
|
|
<CompleteInputFile
|
|
fileName="logo"
|
|
modelRoute="companies"
|
|
name="logo"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans("validation.custom.logo"),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
setData={setData}
|
|
// @ts-expect-error Types diff between custom reset and useForm reset.
|
|
reset={reset}
|
|
value={data.logo}
|
|
required={false}
|
|
maxFileSize="5120"
|
|
allowedFormats="jpg,jpeg,png,webp"
|
|
validationRules={{
|
|
width: "500",
|
|
height: "500",
|
|
}}
|
|
inputType={enumDynamicFieldTypes.image.value}
|
|
/>
|
|
<SimpleString
|
|
name="responsable"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.custom.responsable",
|
|
),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: John Doe"
|
|
required={false}
|
|
value={data.responsable}
|
|
setData={setData}
|
|
/>
|
|
<SimpleString
|
|
name="url"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans("validation.custom.url"),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
type="url"
|
|
placeholder="ex: https://..."
|
|
required={false}
|
|
value={data.url ?? ""}
|
|
setData={setData}
|
|
/>
|
|
<SimpleWysiwyg
|
|
name="informations"
|
|
model="Companies"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.custom.informations",
|
|
),
|
|
},
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
value={data.informations}
|
|
setData={setData}
|
|
/>
|
|
<SimpleNumber
|
|
name="employees"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.custom.employees",
|
|
),
|
|
},
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: 258"
|
|
limits={{ min: 0, max: 100000 }}
|
|
required={false}
|
|
value={data.employees}
|
|
setData={setData}
|
|
/>
|
|
</FieldsetWrapper>
|
|
<FieldsetWrapper
|
|
title={useTrans("back.form_title_associations")}
|
|
icon={<RouteIcon className="mr-1" />}
|
|
description={useTrans("back.form_subtitle_associations")}
|
|
className="sm:grid-cols-2 gap-4"
|
|
>
|
|
<ModelSelect
|
|
name="activity_id"
|
|
multiple={false}
|
|
closeOnSelect
|
|
targetModel="company_activities"
|
|
field="name"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"models.classes.company-activity",
|
|
{ choice: 1 },
|
|
),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: John Doe"
|
|
defaultValues={data.activity_id ? [data.activity_id] : []}
|
|
setData={setData}
|
|
/>
|
|
<ModelSelect
|
|
name="sector_id"
|
|
multiple={false}
|
|
targetModel="company_sectors"
|
|
closeOnSelect
|
|
field="name"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"models.classes.company-sector",
|
|
{ choice: 1 },
|
|
),
|
|
},
|
|
choice: 1,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: John Doe"
|
|
defaultValues={data.sector_id ? [data.sector_id] : []}
|
|
setData={setData}
|
|
/>
|
|
</FieldsetWrapper>
|
|
<FieldsetWrapper
|
|
title={useTrans("back.form_title_implantation")}
|
|
icon={<MapPinIcon className="mr-1" />}
|
|
description={useTrans("back.form_subtitle_implantation")}
|
|
className="sm:grid-cols-2 gap-4"
|
|
>
|
|
<SimpleNumber
|
|
name="latitude"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.custom.latitude",
|
|
),
|
|
},
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
placeholder="ex: 47.827475"
|
|
step={0.00000000000000000001}
|
|
limits={{ min: -90, max: 90 }}
|
|
value={data.latitude}
|
|
setData={setData}
|
|
/>
|
|
<SimpleNumber
|
|
name="longitude"
|
|
label={str(
|
|
useTrans("back.form_associate_to", {
|
|
params: {
|
|
attribute: useTrans(
|
|
"validation.custom.longitude",
|
|
),
|
|
},
|
|
choice: 2,
|
|
}),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
limits={{ min: -180, max: 180 }}
|
|
placeholder="ex: -0.309621"
|
|
step={0.00000000000000000001}
|
|
value={data.longitude}
|
|
setData={setData}
|
|
/>
|
|
</FieldsetWrapper>
|
|
<FieldsetWrapper
|
|
className="gap-4"
|
|
title={useTrans("back.form_title_visibility")}
|
|
icon={<EyeIcon className="mr-1" />}
|
|
description={useTrans("back.form_subtitle_visibility")}
|
|
inline
|
|
>
|
|
<SimpleSwitch
|
|
name="published"
|
|
checked={data.published}
|
|
setData={setData}
|
|
/>
|
|
</FieldsetWrapper>
|
|
<div className="text-center">
|
|
<SubmitButton
|
|
modelTrans={useTrans(`models.classes.${modelName}`, {
|
|
choice: 1,
|
|
})}
|
|
/>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|