[FEAT] generize the form model

front2/src/components/form/FormGroup.tsx

@@ -1,12 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-import { Button, Flex, IconButton, Text, Tooltip } from '@chakra-ui/react';
-import {
-  MdErrorOutline,
-  MdHelpOutline,
-  MdLabelImportant,
-  MdRefresh,
-} from 'react-icons/md';
+import { Flex, Text } from '@chakra-ui/react';
+import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
 
 export type FormGroupProps = {
   error?: ReactNode;

front2/src/components/form/FormInput.tsx

@@ -0,0 +1,37 @@
+import { RefObject } from 'react';
+
+import { Input } from '@chakra-ui/react';
+
+import { FormGroup } from '@/components/form/FormGroup';
+import { UseFormidableReturn } from '@/components/form/Formidable';
+
+export type FormInputProps = {
+  form: UseFormidableReturn;
+  variableName: string;
+  ref?: RefObject<any>;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+};
+
+export const FormInput = ({
+  form,
+  variableName,
+  ref,
+  placeholder,
+  ...rest
+}: FormInputProps) => {
+  return (
+    <FormGroup
+      isModify={form.isModify[variableName]}
+      onRestore={() => form.restoreValue({ [variableName]: true })}
+      {...rest}
+    >
+      <Input
+        ref={ref}
+        value={form.values[variableName]}
+        onChange={(e) => form.setValues({ [variableName]: e.target.value })}
+      />
+    </FormGroup>
+  );
+};

front2/src/components/form/FormNumber.tsx

@@ -0,0 +1,62 @@
+import { RefObject } from 'react';
+
+import {
+  Input,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputProps,
+  NumberInputStepper,
+} from '@chakra-ui/react';
+
+import { FormGroup } from '@/components/form/FormGroup';
+import { UseFormidableReturn } from '@/components/form/Formidable';
+
+export type FormNumberProps = Pick<
+  NumberInputProps,
+  'step' | 'defaultValue' | 'min' | 'max'
+> & {
+  form: UseFormidableReturn;
+  variableName: string;
+  ref?: RefObject<any>;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+};
+
+export const FormNumber = ({
+  form,
+  variableName,
+  ref,
+  placeholder,
+  step,
+  min,
+  max,
+  defaultValue,
+  ...rest
+}: FormNumberProps) => {
+  return (
+    <FormGroup
+      isModify={form.isModify[variableName]}
+      onRestore={() => form.restoreValue({ [variableName]: true })}
+      {...rest}
+    >
+      <NumberInput
+        ref={ref}
+        value={form.values[variableName]}
+        onChange={(_, value) => form.setValues({ [variableName]: value })}
+        step={step}
+        defaultValue={defaultValue}
+        min={min}
+        max={max}
+      >
+        <NumberInputField />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
+    </FormGroup>
+  );
+};

front2/src/components/form/FormSelect.tsx

@@ -0,0 +1,42 @@
+import { RefObject } from 'react';
+
+import { FormGroup } from '@/components/form/FormGroup';
+import { UseFormidableReturn } from '@/components/form/Formidable';
+import { SelectSingle } from '@/components/select/SelectSingle';
+
+export type FormSelectProps = {
+  form: UseFormidableReturn;
+  variableName: string;
+  ref?: RefObject<any>;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  options?: object[];
+  keyInputValue?: string;
+};
+
+export const FormSelect = ({
+  form,
+  variableName,
+  ref,
+  placeholder,
+  options,
+  keyInputValue = 'name',
+  ...rest
+}: FormSelectProps) => {
+  return (
+    <FormGroup
+      isModify={form.isModify[variableName]}
+      onRestore={() => form.restoreValue({ [variableName]: true })}
+      {...rest}
+    >
+      <SelectSingle
+        ref={ref}
+        value={form.values[variableName]}
+        options={options}
+        onChange={(value) => form.setValues({ [variableName]: value })}
+        keyValue={keyInputValue}
+      />
+    </FormGroup>
+  );
+};

front2/src/components/form/FormSelectMultiple.tsx

@@ -0,0 +1,42 @@
+import { RefObject } from 'react';
+
+import { FormGroup } from '@/components/form/FormGroup';
+import { UseFormidableReturn } from '@/components/form/Formidable';
+import { SelectMultiple } from '@/components/select/SelectMultiple';
+
+export type FormSelectMultipleProps = {
+  form: UseFormidableReturn;
+  variableName: string;
+  ref?: RefObject<any>;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  options?: object[];
+  keyInputValue?: string;
+};
+
+export const FormSelectMultiple = ({
+  form,
+  variableName,
+  ref,
+  placeholder,
+  options,
+  keyInputValue = 'name',
+  ...rest
+}: FormSelectMultipleProps) => {
+  return (
+    <FormGroup
+      isModify={form.isModify[variableName]}
+      onRestore={() => form.restoreValue({ [variableName]: true })}
+      {...rest}
+    >
+      <SelectMultiple
+        //ref={ref}
+        values={form.values[variableName]}
+        options={options}
+        onChange={(value) => form.setValues({ [variableName]: value })}
+        keyValue={keyInputValue}
+      />
+    </FormGroup>
+  );
+};

front2/src/components/form/FormTextarea.tsx

@@ -0,0 +1,37 @@
+import { RefObject } from 'react';
+
+import { Textarea } from '@chakra-ui/react';
+
+import { FormGroup } from '@/components/form/FormGroup';
+import { UseFormidableReturn } from '@/components/form/Formidable';
+
+export type FormTextareaProps = {
+  form: UseFormidableReturn;
+  variableName: string;
+  ref?: RefObject<any>;
+  label?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+};
+
+export const FormTextarea = ({
+  form,
+  variableName,
+  ref,
+  placeholder,
+  ...rest
+}: FormTextareaProps) => {
+  return (
+    <FormGroup
+      isModify={form.isModify[variableName]}
+      onRestore={() => form.restoreValue({ [variableName]: true })}
+      {...rest}
+    >
+      <Textarea
+        ref={ref}
+        value={form.values[variableName]}
+        onChange={(e) => form.setValues({ [variableName]: e.target.value })}
+      />
+    </FormGroup>
+  );
+};

front2/src/components/form/Formidable.tsx

@@ -159,3 +159,5 @@ export const useFormidable = <TYPE extends object = object>({
     restoreValue,
   };
 };
+
+export type UseFormidableReturn = ReturnType<typeof useFormidable>;

front2/src/components/popup/ConfirmPopUp.tsx

@@ -9,7 +9,6 @@ import {
   AlertDialogOverlay,
   Button,
   UseDisclosureReturn,
-  useDisclosure,
 } from '@chakra-ui/react';
 
 export type ConfirmPopUpProps = {

front2/src/components/popup/TrackEditPopUp.tsx

@@ -30,6 +30,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import { Track, TrackResource } from '@/back-api';
 import { FormGroup } from '@/components/form/FormGroup';
+import { FormInput } from '@/components/form/FormInput';
+import { FormNumber } from '@/components/form/FormNumber';
+import { FormSelect } from '@/components/form/FormSelect';
+import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
+import { FormTextarea } from '@/components/form/FormTextarea';
 import { useFormidable } from '@/components/form/Formidable';
 import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
 import { SelectMultiple } from '@/components/select/SelectMultiple';
@@ -142,87 +147,45 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
           )}
           {!admin && (
             <>
-              <FormGroup
+              <FormInput
+                form={form}
+                variableName="name"
                 isRequired
-                isModify={form.isModify.name}
-                onRestore={() => form.restoreValue({ name: true })}
                 label="Title"
-              >
-                <Input
-                  ref={initialRef}
-                  value={form.values.name}
-                  onChange={(e) => form.setValues({ name: e.target.value })}
-                />
-              </FormGroup>
-
-              <FormGroup
-                isModify={form.isModify.description}
-                onRestore={() => form.restoreValue({ description: true })}
+                ref={initialRef}
+              />
+              <FormTextarea
+                form={form}
+                variableName="description"
                 label="Description"
-              >
-                <Textarea
-                  value={form.values.description}
-                  onChange={(e) =>
-                    form.setValues({ description: e.target.value })
-                  }
-                />
-              </FormGroup>
-              <FormGroup
-                isModify={form.isModify.genderId}
-                onRestore={() => form.restoreValue({ genderId: true })}
+              />
+              <FormSelect
+                form={form}
+                variableName="genderId"
+                options={dataGenders}
                 label="Gender"
-              >
-                <SelectSingle
-                  value={form.values.genderId}
-                  options={dataGenders}
-                  onChange={(value) => form.setValues({ genderId: value })}
-                  keyValue="name"
-                />
-              </FormGroup>
-              <FormGroup
-                isModify={form.isModify.artists}
-                onRestore={() => form.restoreValue({ artists: true })}
+              />
+              <FormSelectMultiple
+                form={form}
+                variableName="artists"
+                options={dataArtist}
                 label="Artist(s)"
-              >
-                <SelectMultiple
-                  values={form.values.artists}
-                  options={dataArtist}
-                  onChange={(value) => form.setValues({ artists: value })}
-                  keyValue="name"
-                />
-              </FormGroup>
-              <FormGroup
-                isModify={form.isModify.albumId}
-                onRestore={() => form.restoreValue({ albumId: true })}
+              />
+              <FormSelect
+                form={form}
+                variableName="albumId"
+                options={dataAlbums}
                 label="Album"
-              >
-                <SelectSingle
-                  value={form.values.albumId}
-                  options={dataAlbums}
-                  onChange={(value) => form.setValues({ albumId: value })}
-                  keyValue="name"
-                />
-              </FormGroup>
-              <FormGroup
-                isModify={form.isModify.track}
-                onRestore={() => form.restoreValue({ track: true })}
+              />
+              <FormNumber
+                form={form}
+                variableName="track"
                 label="Track n°"
-              >
-                <NumberInput
-                  value={form.values.track}
-                  onChange={(_, value) => form.setValues({ track: value })}
-                  step={1}
-                  defaultValue={0}
-                  min={0}
-                  max={1000}
-                >
-                  <NumberInputField />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-              </FormGroup>
+                step={1}
+                defaultValue={0}
+                min={0}
+                max={1000}
+              />
             </>
           )}
         </ModalBody>

front2/src/components/select/SelectMultiple.tsx

@@ -1,11 +1,9 @@
-import { useMemo, useRef, useState } from 'react';
+import { RefObject, useMemo, useRef, useState } from 'react';
 
 import {
   Button,
   Flex,
   Input,
-  InputGroup,
-  InputRightElement,
   Spinner,
   Tag,
   TagCloseButton,
@@ -13,12 +11,7 @@ import {
   Wrap,
   WrapItem,
 } from '@chakra-ui/react';
-import {
-  MdClose,
-  MdKeyboardArrowDown,
-  MdKeyboardArrowUp,
-  MdSearch,
-} from 'react-icons/md';
+import { MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
 
 import { SelectList, SelectListModel } from '@/components/select/SelectList';
 import { isNullOrUndefined } from '@/utils/validator';
@@ -29,12 +22,14 @@ export type SelectMultipleProps = {
   onChange?: (value: (number | string)[] | undefined) => void;
   keyKey?: string;
   keyValue?: string;
+  ref?: RefObject<any>;
 };
 
 export const SelectMultiple = ({
   options,
   onChange,
   values,
+  ref,
   keyKey = 'id',
   keyValue = keyKey,
 }: SelectMultipleProps) => {
@@ -51,7 +46,7 @@ export const SelectMultiple = ({
     undefined
   );
 
-  const ref = useRef<HTMLInputElement | null>(null);
+  const refFocus = ref ?? useRef<HTMLInputElement | null>(null);
   const selectedOptions = useMemo(() => {
     if (isNullOrUndefined(values) || !transformedOption) {
       return [];
@@ -86,7 +81,7 @@ export const SelectMultiple = ({
   };
   const onOpenClose = () => {
     if (!showList) {
-      ref?.current?.focus();
+      refFocus?.current?.focus();
       return;
     }
   };
@@ -114,7 +109,7 @@ export const SelectMultiple = ({
 
       <Flex>
         <Input
-          ref={ref}
+          ref={refFocus}
           width="full"
           onChange={(e) => onChangeInput(e.target.value)}
           //onSubmit={onSubmit}

front2/src/components/select/SelectSingle.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { RefObject, useMemo, useRef, useState } from 'react';
 
 import { Button, Flex, Input, Spinner } from '@chakra-ui/react';
 import {
@@ -16,12 +16,14 @@ export type SelectSingleProps = {
   onChange?: (value: number | string | undefined) => void;
   keyKey?: string;
   keyValue?: string;
+  ref?: RefObject<any>;
 };
 
 export const SelectSingle = ({
   options,
   onChange,
   value,
+  ref,
   keyKey = 'id',
   keyValue = keyKey,
 }: SelectSingleProps) => {
@@ -37,7 +39,7 @@ export const SelectSingle = ({
   const [currentSearch, setCurrentSearch] = useState<string | undefined>(
     undefined
   );
-  const ref = useRef<HTMLInputElement | null>(null);
+  const refFocus = ref ?? useRef<HTMLInputElement | null>(null);
   const selectedOptions = useMemo(() => {
     if (isNullOrUndefined(value)) {
       return undefined;
@@ -69,7 +71,7 @@ export const SelectSingle = ({
       }
     }
     if (!showList || selectedOptions) {
-      ref?.current?.focus();
+      refFocus?.current?.focus();
     }
   };
 
@@ -77,7 +79,7 @@ export const SelectSingle = ({
     <Flex direction="column" width="full" gap="0px">
       <Flex>
         <Input
-          ref={ref}
+          ref={refFocus}
           width="full"
           onChange={(e) => onChangeInput(e.target.value)}
           //onSubmit={onSubmit}