[FEAT] review some namings

front2/src/components/form/Formidable.tsx

@@ -62,9 +62,7 @@ export const useFormidable = <TYPE extends object = object>({
 }) => {
   const [values, setValues] = useState<TYPE>({ ...initialValues } as TYPE);
   const [initialData, setInitialData] = useState<TYPE>(initialValues);
-  const [valueChange, setValueChange] = useState<{ [key: string]: boolean }>(
+  const [isModify, setIsModify] = useState<{ [key: string]: boolean }>({});
-    {}
-  );
   const [isFormModified, setIsFormModified] = useState<boolean>(false);
   useEffect(() => {
     setInitialData((previous) => {
@@ -77,7 +75,7 @@ export const useFormidable = <TYPE extends object = object>({
       //console.log(`FORMIDABLE:     ==> update new values`);
       setValues({ ...initialValues });
       const ret = getDifferences(initialValues, initialValues);
-      setValueChange(ret);
+      setIsModify(ret);
       setIsFormModified(hasAnyTrue(ret));
       return initialValues;
     });
@@ -85,7 +83,7 @@ export const useFormidable = <TYPE extends object = object>({
     initialValues,
     setInitialData,
     setValues,
-    setValueChange,
+    setIsModify,
     setIsFormModified,
   ]);
   const setValuesExternal = useCallback(
@@ -94,7 +92,7 @@ export const useFormidable = <TYPE extends object = object>({
       setValues((previous) => {
         const newValues = { ...previous, ...data };
         const ret = getDifferences(initialData, newValues);
-        setValueChange(ret);
+        setIsModify(ret);
         setIsFormModified(hasAnyTrue(ret));
         return newValues;
       });
@@ -124,21 +122,21 @@ export const useFormidable = <TYPE extends object = object>({
         //console.log(`initialData data ${JSON.stringify(initialData, null, 2)}`);
         //console.log(`New data ${JSON.stringify(newValue, null, 2)}`);
         const ret = getDifferences(initialData, newValue);
-        setValueChange(ret);
+        setIsModify(ret);
         setIsFormModified(hasAnyTrue(ret));
         return newValue;
       });
     },
-    [setValues, initialData, setIsFormModified, setValueChange]
+    [setValues, initialData, setIsFormModified, setIsModify]
   );
   const getDeltaData = useCallback(
     ({ omit = [], only }: { omit?: string[]; only?: string[] }) => {
       const out = {};
-      Object.keys(valueChange).forEach((key) => {
+      Object.keys(isModify).forEach((key) => {
         if (omit.includes(key) || (only && !only.includes(key))) {
           return;
         }
-        if (!valueChange[key]) {
+        if (!isModify[key]) {
           return;
         }
         const tmpValue = values[key];
@@ -150,11 +148,11 @@ export const useFormidable = <TYPE extends object = object>({
       });
       return out;
     },
-    [valueChange, values]
+    [isModify, values]
   );
   return {
     values,
-    valueChange,
+    isModify,
     isFormModified,
     setValues: setValuesExternal,
     getDeltaData,

front2/src/components/popup/TrackEditPopUp.tsx

@@ -31,9 +31,9 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Track, TrackResource } from '@/back-api';
 import { FormGroup } from '@/components/form/FormGroup';
 import { useFormidable } from '@/components/form/Formidable';
-import { SelectMultiple } from '@/components/form/SelectMultiple';
-import { SelectSingle } from '@/components/form/SelectSingle';
 import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
+import { SelectMultiple } from '@/components/select/SelectMultiple';
+import { SelectSingle } from '@/components/select/SelectSingle';
 import { useOrderedAlbums } from '@/service/Album';
 import { useOrderedArtists } from '@/service/Artist';
 import { useOrderedGenders } from '@/service/Gender';
@@ -144,7 +144,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
             <>
               <FormGroup
                 isRequired
-                isModify={form.valueChange.name}
+                isModify={form.isModify.name}
                 onRestore={() => form.restoreValue({ name: true })}
                 label="Title"
               >
@@ -156,7 +156,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
               </FormGroup>
 
               <FormGroup
-                isModify={form.valueChange.description}
+                isModify={form.isModify.description}
                 onRestore={() => form.restoreValue({ description: true })}
                 label="Description"
               >
@@ -168,7 +168,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
                 />
               </FormGroup>
               <FormGroup
-                isModify={form.valueChange.genderId}
+                isModify={form.isModify.genderId}
                 onRestore={() => form.restoreValue({ genderId: true })}
                 label="Gender"
               >
@@ -180,7 +180,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
                 />
               </FormGroup>
               <FormGroup
-                isModify={form.valueChange.artists}
+                isModify={form.isModify.artists}
                 onRestore={() => form.restoreValue({ artists: true })}
                 label="Artist(s)"
               >
@@ -192,7 +192,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
                 />
               </FormGroup>
               <FormGroup
-                isModify={form.valueChange.albumId}
+                isModify={form.isModify.albumId}
                 onRestore={() => form.restoreValue({ albumId: true })}
                 label="Album"
               >
@@ -204,7 +204,7 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
                 />
               </FormGroup>
               <FormGroup
-                isModify={form.valueChange.track}
+                isModify={form.isModify.track}
                 onRestore={() => form.restoreValue({ track: true })}
                 label="Track n°"
               >

front2/src/components/select/SelectList.tsx

@@ -4,21 +4,21 @@ import { Box, Button, Flex, Text } from '@chakra-ui/react';
 
 import { isNullOrUndefined } from '@/utils/validator';
 
-export type SelectMultipleValueDisplayType = {
+export type SelectListModel = {
   id: any;
   name: any;
-  isSelected: boolean;
+  isSelected?: boolean;
 };
 
 const optionToOptionDisplay = (
-  data: SelectMultipleValueDisplayType[] | undefined,
+  data: SelectListModel[] | undefined,
-  selectedOptions: SelectMultipleValueDisplayType[],
+  selectedOptions: SelectListModel[],
   search?: string
-): SelectMultipleValueDisplayType[] => {
+): SelectListModel[] => {
   if (isNullOrUndefined(data)) {
     return [];
   }
-  const out: SelectMultipleValueDisplayType[] = [];
+  const out: SelectListModel[] = [];
   data.forEach((element) => {
     if (search) {
       if (!element.name.toLowerCase().includes(search.toLowerCase())) {
@@ -34,18 +34,18 @@ const optionToOptionDisplay = (
   return out;
 };
 
-export type FormSelectListProps = {
+export type SelectListProps = {
-  options?: SelectMultipleValueDisplayType[];
+  options?: SelectListModel[];
-  selected: SelectMultipleValueDisplayType[];
+  selected: SelectListModel[];
-  onSelectValue: (data: SelectMultipleValueDisplayType) => void;
+  onSelectValue: (data: SelectListModel) => void;
   search?: string;
 };
-export const FormSelectList = ({
+export const SelectList = ({
   options,
   selected,
   onSelectValue,
   search,
-}: FormSelectListProps) => {
+}: SelectListProps) => {
   const displayedValue = optionToOptionDisplay(options, selected, search);
   const scrollToRef = useRef<HTMLButtonElement | null>(null);
   useEffect(() => {

front2/src/components/select/SelectMultiple.tsx

@@ -1,6 +1,7 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import {
+  Button,
   Flex,
   Input,
   InputGroup,
@@ -12,12 +13,14 @@ import {
   Wrap,
   WrapItem,
 } from '@chakra-ui/react';
-import { MdSearch } from 'react-icons/md';
-
 import {
-  FormSelectList,
+  MdClose,
-  SelectMultipleValueDisplayType,
+  MdKeyboardArrowDown,
-} from '@/components/form/FormSelectList';
+  MdKeyboardArrowUp,
+  MdSearch,
+} from 'react-icons/md';
+
+import { SelectList, SelectListModel } from '@/components/select/SelectList';
 import { isNullOrUndefined } from '@/utils/validator';
 
 export type SelectMultipleProps = {
@@ -41,14 +44,14 @@ export const SelectMultiple = ({
       return {
         id: element[keyKey],
         name: element[keyValue],
-        isSelected: false,
+      } as SelectListModel;
-      } as SelectMultipleValueDisplayType;
     });
   }, [options, keyKey, keyValue]);
   const [currentSearch, setCurrentSearch] = useState<string | undefined>(
     undefined
   );
 
+  const ref = useRef<HTMLInputElement | null>(null);
   const selectedOptions = useMemo(() => {
     if (isNullOrUndefined(values) || !transformedOption) {
       return [];
@@ -58,7 +61,7 @@ export const SelectMultiple = ({
     });
   }, [values, transformedOption]);
 
-  const selectValue = (data: SelectMultipleValueDisplayType) => {
+  const selectValue = (data: SelectListModel) => {
     const newValues = values?.includes(data.id)
       ? values.filter((elem) => data.id !== elem)
       : [...(values ?? []), data.id];
@@ -74,13 +77,19 @@ export const SelectMultiple = ({
   if (!options) {
     return <Spinner />;
   }
-  function onChangeInput(value: string): void {
+  const onChangeInput = (value: string): void => {
     if (value === '') {
       setCurrentSearch(undefined);
     } else {
       setCurrentSearch(value);
     }
-  }
+  };
+  const onOpenClose = () => {
+    if (!showList) {
+      ref?.current?.focus();
+      return;
+    }
+  };
 
   return (
     <Flex direction="column" width="full" gap="0px">
@@ -102,19 +111,33 @@ export const SelectMultiple = ({
           ))}
         </Wrap>
       )}
-      <InputGroup minWidth="50%" marginLeft="auto">
+
-        <InputRightElement pointerEvents="none">
+      <Flex>
-          <MdSearch color="gray.300" />
-        </InputRightElement>
         <Input
+          ref={ref}
+          width="full"
           onChange={(e) => onChangeInput(e.target.value)}
           //onSubmit={onSubmit}
           onFocus={() => setShowList(true)}
           onBlur={() => setTimeout(() => setShowList(false), 200)}
+          value={showList ? (currentSearch ?? '') : ''}
+          borderRadius="5px 0 0 5px"
         />
-      </InputGroup>
+        <Button
+          onClick={onOpenClose}
+          variant="outline"
+          borderRadius="0 5px 5px 0"
+          borderWidth="1px 1px 1px 0"
+        >
+          {showList ? (
+            <MdKeyboardArrowUp color="gray.300" />
+          ) : (
+            <MdKeyboardArrowDown color="gray.300" />
+          )}
+        </Button>
+      </Flex>
       {showList && (
-        <FormSelectList
+        <SelectList
           options={transformedOption}
           selected={selectedOptions}
           search={currentSearch}

front2/src/components/select/SelectSingle.tsx

@@ -1,29 +1,13 @@
 import { useMemo, useRef, useState } from 'react';
 
-import {
+import { Button, Flex, Input, Spinner } from '@chakra-ui/react';
-  Badge,
-  Box,
-  Button,
-  Flex,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Spinner,
-  Tag,
-  TagCloseButton,
-  TagLabel,
-} from '@chakra-ui/react';
 import {
   MdClose,
   MdKeyboardArrowDown,
   MdKeyboardArrowUp,
-  MdSearch,
 } from 'react-icons/md';
 
-import {
+import { SelectList, SelectListModel } from '@/components/select/SelectList';
-  FormSelectList,
-  SelectMultipleValueDisplayType,
-} from '@/components/form/FormSelectList';
 import { isNullOrUndefined } from '@/utils/validator';
 
 export type SelectSingleProps = {
@@ -47,8 +31,7 @@ export const SelectSingle = ({
       return {
         id: element[keyKey],
         name: element[keyValue],
-        isSelected: false,
+      } as SelectListModel;
-      } as SelectMultipleValueDisplayType;
     });
   }, [options, keyKey, keyValue]);
   const [currentSearch, setCurrentSearch] = useState<string | undefined>(
@@ -62,7 +45,7 @@ export const SelectSingle = ({
     return transformedOption?.find((data) => data.id === value);
   }, [value, transformedOption]);
 
-  const selectValue = (data?: SelectMultipleValueDisplayType) => {
+  const selectValue = (data?: SelectListModel) => {
     const tmpData = data?.id == selectedOptions?.id ? undefined : data;
     setShowList(false);
     if (onChange) {
@@ -80,13 +63,13 @@ export const SelectSingle = ({
     }
   }
   const onRemoveItem = () => {
-    if (showList || !selectedOptions) {
+    if (selectedOptions) {
-      ref?.current?.focus();
+      if (onChange) {
-      return;
+        onChange(undefined);
+      }
     }
-    console.log('Remove item ...');
+    if (!showList || selectedOptions) {
-    if (onChange) {
+      ref?.current?.focus();
-      onChange(undefined);
     }
   };
 
@@ -113,7 +96,6 @@ export const SelectSingle = ({
           variant="outline"
           borderRadius="0 5px 5px 0"
           borderWidth="1px 1px 1px 0"
-          isDisabled={showList}
         >
           {selectedOptions ? (
             <MdClose color="gray.300" />
@@ -125,7 +107,7 @@ export const SelectSingle = ({
         </Button>
       </Flex>
       {showList && (
-        <FormSelectList
+        <SelectList
           options={transformedOption}
           selected={selectedOptions ? [selectedOptions] : []}
           search={currentSearch}