543 lines
26 KiB
TypeScript
543 lines
26 KiB
TypeScript
// * Packages
|
|
import { Dispatch, SetStateAction, useState } from "react";
|
|
import {
|
|
DndContext,
|
|
closestCenter,
|
|
useSensor,
|
|
useSensors,
|
|
PointerSensor,
|
|
DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
SortableContext,
|
|
verticalListSortingStrategy,
|
|
arrayMove,
|
|
useSortable,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import { TrashIcon, GripVerticalIcon, CheckIcon, CopyIcon } from "lucide-react";
|
|
import { usePage } from "@inertiajs/react";
|
|
// * Components shadcn
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
// * Other
|
|
import EnumSelect from "@/back/Components/Inputs/EnumSelect";
|
|
import SimpleString from "@/back/Components/Inputs/SimpleString";
|
|
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
|
|
import AddNewFieldBtn from "@/back/Components/PageConfigs/AddNewFieldBtn";
|
|
import {
|
|
ConfigField,
|
|
ConfigInternalField,
|
|
DynamicFieldTypes,
|
|
} from "@/back/types/dynamic-pages";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import str from "@/hooks/use-string";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/* eslint-disable no-unused-vars */
|
|
type FieldGroupProps = {
|
|
currentId: number;
|
|
currentIndex: number;
|
|
currentFieldKey: string;
|
|
parentFieldKey: string;
|
|
currentField: ConfigInternalField;
|
|
currentRequired: boolean;
|
|
currentDisabled: boolean;
|
|
getTransInput: (
|
|
field: "type" | "key" | "label" | "validation" | "children",
|
|
id: number,
|
|
) => string;
|
|
updateField: (id: number, updatedField: Partial<ConfigField>) => void;
|
|
removeField: (id: number) => void;
|
|
transDelete: string;
|
|
transDragAndDrop?: string;
|
|
sensitiveField: string[];
|
|
removeSensitiveField: (key: string) => void;
|
|
localErrors: Record<string, string>;
|
|
setLocalErrors: Dispatch<SetStateAction<Record<string, string>>>;
|
|
parentAccordionState: string;
|
|
setParentAccordionState: (key: string) => void;
|
|
limitMaxChildren: number;
|
|
};
|
|
/* eslint-enable no-unused-vars */
|
|
|
|
export default function FieldGroup({
|
|
currentId,
|
|
currentIndex,
|
|
currentFieldKey,
|
|
parentFieldKey,
|
|
currentField,
|
|
currentRequired,
|
|
currentDisabled,
|
|
getTransInput,
|
|
updateField,
|
|
removeField,
|
|
transDelete,
|
|
transDragAndDrop,
|
|
sensitiveField,
|
|
removeSensitiveField,
|
|
localErrors,
|
|
setLocalErrors,
|
|
parentAccordionState,
|
|
setParentAccordionState,
|
|
limitMaxChildren,
|
|
}: FieldGroupProps) {
|
|
// Drag & drop module for user interactions (mouse, touch, keyboard or other).
|
|
const sensors = useSensors(useSensor(PointerSensor));
|
|
|
|
// Provides the necessary props and helpers to make this item draggable and reorderable.
|
|
// Includes event listeners, accessibility attributes, DOM ref, drag transform/transition values,
|
|
// and a flag indicating whether the item is dragging.
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({ id: String(currentId) });
|
|
|
|
// Style applied to the sortable item:
|
|
// - handles drag movement (transform),
|
|
// - animations (transition),
|
|
// - and visual feedback (opacity, zIndex) while dragging.
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
zIndex: isDragging ? 50 : 0,
|
|
};
|
|
|
|
// Get all enum values, labels and names.
|
|
const enumDynamicFieldTypes = usePage().props
|
|
.enumDynamicFieldTypes as DynamicFieldTypes;
|
|
|
|
// Set the current state of the accordion.
|
|
const [openIndex, setOpenIndex] = useState<string>("");
|
|
|
|
// Get the current enum value.
|
|
const currentEnum = Object.values(enumDynamicFieldTypes).find(
|
|
(def) => def.value === currentField.type,
|
|
);
|
|
// Set a prefix related to the current enum.
|
|
const enumCurrentBase = `${currentEnum?.name}_`;
|
|
|
|
// Set the editable part of the current key.
|
|
const [editableKey, setEditableKey] = useState<string>(() => {
|
|
return currentField.key.startsWith(enumCurrentBase)
|
|
? currentField.key.replace(enumCurrentBase, "")
|
|
: currentField.key;
|
|
});
|
|
|
|
//* Translations
|
|
const transKeyAlreadyPresent = useTrans("validation.key_already_present");
|
|
|
|
// Set the complete key (prefix + editable) that will be sent to the backend.
|
|
const completeKey = `${enumCurrentBase}${editableKey}`;
|
|
|
|
// Set the state of copying key.
|
|
const [copied, setCopied] = useState(false);
|
|
// Copy the complete key in the clipboard.
|
|
const handleClick = () => {
|
|
navigator.clipboard.writeText(completeKey);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
/**
|
|
* Reorder the elements list.
|
|
* @param event DragEndEvent
|
|
* @return void
|
|
*/
|
|
const handleOnDragEnd = (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (!over || active.id === over.id) return;
|
|
|
|
const oldIndex =
|
|
currentField.children?.findIndex(
|
|
(c) => String(c.id) === String(active.id),
|
|
) ?? -1;
|
|
const newIndex =
|
|
currentField.children?.findIndex(
|
|
(c) => String(c.id) === String(over.id),
|
|
) ?? -1;
|
|
|
|
if (oldIndex < 0 || newIndex < 0) return;
|
|
const reordered = arrayMove(
|
|
currentField.children!,
|
|
oldIndex,
|
|
newIndex,
|
|
).map((child, index) => ({
|
|
...child,
|
|
order: index + 1,
|
|
}));
|
|
updateField(currentId, { children: reordered });
|
|
};
|
|
|
|
/**
|
|
* Add a new field to the list.
|
|
* @return void
|
|
*/
|
|
const handleAddNewChild = () => {
|
|
const existing = currentField.children ?? [];
|
|
const maxOrder =
|
|
Math.max(0, ...existing.map((field) => field.order ?? 0)) + 1;
|
|
const maxIndex =
|
|
Math.max(0, ...existing.map((field) => field.id ?? 0)) + 1;
|
|
|
|
const newChild: ConfigInternalField = {
|
|
id: maxIndex,
|
|
key: `${enumDynamicFieldTypes.string.name}_`,
|
|
label: "",
|
|
type: enumDynamicFieldTypes.string.value,
|
|
validation: enumDynamicFieldTypes.string.validation,
|
|
order: maxOrder,
|
|
children: [],
|
|
};
|
|
const newChildren = [...(currentField.children ?? []), newChild];
|
|
updateField(currentId, { children: newChildren });
|
|
};
|
|
|
|
/**
|
|
* Remove a specific element from the list.
|
|
* @param childId number
|
|
* @return void
|
|
*/
|
|
const handleDeleteChild = (childId: number) => {
|
|
const children = currentField.children ?? [];
|
|
const targetChild = children.filter((child) => child.id === childId)[0];
|
|
removeSensitiveField(`${parentFieldKey}.${targetChild.key}`);
|
|
const childrenUpdated = children.filter((c) => c.id !== childId);
|
|
updateField(currentId, { children: childrenUpdated });
|
|
};
|
|
|
|
/**
|
|
* Update the input type.
|
|
* @param value string
|
|
* @return void
|
|
*/
|
|
const updatingType = (value: string) => {
|
|
const selectedType = Object.values(enumDynamicFieldTypes).find(
|
|
(def) => def.value === Number(value),
|
|
);
|
|
if (selectedType) {
|
|
const resetCommon = {
|
|
type: selectedType.value,
|
|
validation: selectedType.validation,
|
|
key: `${selectedType.name}_${editableKey}`,
|
|
children: undefined,
|
|
};
|
|
updateField(currentId, resetCommon);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="relative mb-3">
|
|
<AccordionItem value={`item-${currentId}`}>
|
|
<Card
|
|
className={cn({
|
|
"border-destructive/50 dark:border-destructive":
|
|
parentAccordionState !== `item-${currentId}` &&
|
|
Object.keys(localErrors).some((key) =>
|
|
key.startsWith(
|
|
`${currentFieldKey}.${currentIndex}`,
|
|
),
|
|
),
|
|
})}
|
|
>
|
|
<CardContent className="flex flex-col p-3">
|
|
{/* HEADER */}
|
|
<div className="flex flex-col lg:flex-row-reverse gap-1.5">
|
|
<div className="flex flex-row gap-1.5 w-full h-full">
|
|
<div className="flex-grow flex items-stretch">
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={
|
|
<GripVerticalIcon className="w-4 h-4 m-auto" />
|
|
}
|
|
tooltipContent={transDragAndDrop}
|
|
className="cursor-grab touch-none h-full w-full"
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
disabled={parentAccordionState !== ""}
|
|
/* eslint-disable react/jsx-props-no-spreading */
|
|
{...attributes}
|
|
{...listeners}
|
|
/* eslint-enable react/jsx-props-no-spreading */
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-1.5">
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={
|
|
<>
|
|
<CopyIcon
|
|
className={`size-4 ${copied ? "hidden" : "block"}`}
|
|
/>
|
|
<CheckIcon
|
|
className={`size-4 ${copied ? "block" : "hidden"}`}
|
|
/>
|
|
</>
|
|
}
|
|
tooltipContent={
|
|
<div className="text-center">
|
|
<p>
|
|
{str(
|
|
useTrans(
|
|
"back.config_complete_label",
|
|
),
|
|
)
|
|
.ucFirst()
|
|
.value()}
|
|
</p>
|
|
<p className="font-semibold mt-1">
|
|
{completeKey}
|
|
</p>
|
|
</div>
|
|
}
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handleClick}
|
|
/>
|
|
<BtnOptionnalLinkWithTooltip
|
|
content={
|
|
<TrashIcon className="w-4 h-4" />
|
|
}
|
|
tooltipContent={transDelete}
|
|
type="button"
|
|
variant="destructive"
|
|
size="icon"
|
|
onClick={() => {
|
|
if (
|
|
parentAccordionState ===
|
|
`item-${currentId}`
|
|
) {
|
|
setParentAccordionState("");
|
|
}
|
|
removeField(currentId);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full lg:w-2/3 xl:w-1/2">
|
|
<AccordionTrigger className="inline-flex items-center justify-between gap-2 whitespace-nowrap rounded-md text-sm font-medium bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 w-full">
|
|
{currentField.label.length
|
|
? currentField.label
|
|
: `Champs n°${currentIndex + 1}`}
|
|
</AccordionTrigger>
|
|
</div>
|
|
</div>
|
|
{/* CONTENT */}
|
|
<AccordionContent className="p-0 px-1">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 pt-4">
|
|
<SimpleString
|
|
name={`${currentFieldKey}.${currentIndex}.label`}
|
|
label={getTransInput(
|
|
"label",
|
|
currentIndex + 1,
|
|
)}
|
|
placeholder="ex: Nom"
|
|
value={currentField.label}
|
|
setData={(_, value) =>
|
|
updateField(currentId, { label: value })
|
|
}
|
|
parentErrors={localErrors}
|
|
/>
|
|
{!sensitiveField.includes(
|
|
`${parentFieldKey}.${completeKey}`,
|
|
) && (
|
|
<>
|
|
<SimpleString
|
|
name={`${currentFieldKey}.${currentIndex}.key`}
|
|
label={getTransInput(
|
|
"key",
|
|
currentIndex + 1,
|
|
)}
|
|
placeholder="ex: field_1"
|
|
value={editableKey}
|
|
setData={(_unused, value) => {
|
|
const newCompleteKey = `${enumCurrentBase}${value}`;
|
|
if (
|
|
sensitiveField.includes(
|
|
`${parentFieldKey}.${newCompleteKey}`,
|
|
)
|
|
) {
|
|
setLocalErrors((prev) => ({
|
|
...prev,
|
|
[`${currentFieldKey}.${currentIndex}.key`]:
|
|
transKeyAlreadyPresent,
|
|
}));
|
|
} else {
|
|
setLocalErrors((prev) => {
|
|
const {
|
|
[`${currentFieldKey}.${currentIndex}.key`]:
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
removedKey,
|
|
...rest
|
|
} = prev;
|
|
return rest;
|
|
});
|
|
setEditableKey(value);
|
|
updateField(currentId, {
|
|
key: newCompleteKey,
|
|
});
|
|
}
|
|
}}
|
|
pattern="^[a-z0-9]+(?:[\-_][a-z0-9]+)*$"
|
|
parentErrors={localErrors}
|
|
/>
|
|
<EnumSelect
|
|
name={`${currentFieldKey}.${currentIndex}.type`}
|
|
label={getTransInput(
|
|
"type",
|
|
currentIndex + 1,
|
|
)}
|
|
placeholder="Type du champ"
|
|
selected={String(currentField.type)}
|
|
options={enumDynamicFieldTypes}
|
|
setData={(_, value) => {
|
|
updatingType(value);
|
|
}}
|
|
required={currentRequired}
|
|
disabled={currentDisabled}
|
|
parentErrors={localErrors}
|
|
/>
|
|
</>
|
|
)}
|
|
<SimpleString
|
|
name={`${currentFieldKey}.${currentIndex}.validation`}
|
|
label={getTransInput(
|
|
"validation",
|
|
currentIndex + 1,
|
|
)}
|
|
placeholder="ex: required|string"
|
|
value={currentField.validation}
|
|
setData={(_, value) =>
|
|
updateField(currentId, {
|
|
validation: value,
|
|
})
|
|
}
|
|
required={currentRequired}
|
|
disabled={currentDisabled}
|
|
parentErrors={localErrors}
|
|
/>
|
|
</div>
|
|
{/* CHILDREN */}
|
|
{currentEnum?.isarray && (
|
|
<Accordion
|
|
type="single"
|
|
className="w-full mt-4"
|
|
value={openIndex}
|
|
onValueChange={setOpenIndex}
|
|
collapsible
|
|
>
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={handleOnDragEnd}
|
|
>
|
|
<SortableContext
|
|
items={(
|
|
currentField.children ?? []
|
|
).map((c) => String(c.id))}
|
|
strategy={
|
|
verticalListSortingStrategy
|
|
}
|
|
>
|
|
{(currentField.children ?? []).map(
|
|
(
|
|
child: ConfigInternalField,
|
|
i: number,
|
|
) => (
|
|
<FieldGroup
|
|
key={child.id}
|
|
currentId={child.id}
|
|
currentIndex={i}
|
|
currentFieldKey={`${currentFieldKey}.${currentIndex}.children`}
|
|
parentFieldKey={`${parentFieldKey}.${currentField.key}`}
|
|
currentField={child}
|
|
currentRequired
|
|
currentDisabled={false}
|
|
getTransInput={
|
|
getTransInput
|
|
}
|
|
updateField={(
|
|
childId: number,
|
|
updatedChild: Partial<ConfigField>,
|
|
) => {
|
|
const newChildren =
|
|
(
|
|
currentField.children ??
|
|
[]
|
|
).map((c) =>
|
|
c.id ===
|
|
childId
|
|
? {
|
|
...c,
|
|
...updatedChild,
|
|
}
|
|
: c,
|
|
);
|
|
updateField(
|
|
currentId,
|
|
{
|
|
children:
|
|
newChildren,
|
|
},
|
|
);
|
|
}}
|
|
removeField={
|
|
handleDeleteChild
|
|
}
|
|
transDelete={
|
|
transDelete
|
|
}
|
|
transDragAndDrop={
|
|
transDragAndDrop
|
|
}
|
|
sensitiveField={
|
|
sensitiveField
|
|
}
|
|
removeSensitiveField={
|
|
removeSensitiveField
|
|
}
|
|
localErrors={
|
|
localErrors
|
|
}
|
|
setLocalErrors={
|
|
setLocalErrors
|
|
}
|
|
parentAccordionState={
|
|
openIndex
|
|
}
|
|
setParentAccordionState={
|
|
setOpenIndex
|
|
}
|
|
limitMaxChildren={
|
|
limitMaxChildren
|
|
}
|
|
/>
|
|
),
|
|
)}
|
|
</SortableContext>
|
|
</DndContext>
|
|
<AddNewFieldBtn
|
|
array={currentField.children}
|
|
limitMax={limitMaxChildren}
|
|
variant="secondary"
|
|
onClick={handleAddNewChild}
|
|
/>
|
|
</Accordion>
|
|
)}
|
|
</AccordionContent>
|
|
</CardContent>
|
|
</Card>
|
|
</AccordionItem>
|
|
</div>
|
|
);
|
|
}
|