chore(meshconfig): implement add new configuration section

libremesh · Oct 25, 2024 · 662becd · 662becd
1 parent c451161
commit 662becd
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 43 deletions.
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection.tsx
@@ -117,8 +117,14 @@ export const AddNewElementBtn = ({ sectionName }: { sectionName?: string }) => {
         if (!sectionName) {
             setValue(data.name, {});
         } else {
-            const kaka = { ...section, [data.name]: "" };
-            setValue(sectionName, kaka);
+            let value: string | string[] = data.value;
+            if (data.isList) {
+                value = data.values;
+            }
+            setValue(sectionName, {
+                ...section,
+                [data.name]: value,
+            });
         }
         onClose();
         showToast({
@@ -128,9 +134,7 @@ export const AddNewElementBtn = ({ sectionName }: { sectionName?: string }) => {
 
     return (
         <>
-            <Button color={"info"} onClick={onOpen}>
-                <Trans>Add new section</Trans>
-            </Button>
+            <AddElementButton onClick={onOpen} />
             <AddNewSectionModal
                 sectionName={sectionName}
                 isOpen={open}
@@ -140,3 +144,11 @@ export const AddNewElementBtn = ({ sectionName }: { sectionName?: string }) => {
         </>
     );
 };
+
+export const AddElementButton = (props: ButtonProps) => {
+    return (
+        <Button color={"info"} {...props}>
+            <Trans>Add new section</Trans>
+        </Button>
+    );
+};
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
@@ -8,6 +8,7 @@ import Divider from "components/divider";
 import { useToast } from "components/toast/toastProvider";
 
 import { EditOrDelete } from "plugins/lime-plugin-mesh-wide-config/src/components/Components";
+import { AddElementButton } from "plugins/lime-plugin-mesh-wide-config/src/components/ConfigSection";
 import { DeletePropModal } from "plugins/lime-plugin-mesh-wide-config/src/components/modals";
 
 type OptionContainerProps = {
@@ -91,21 +92,21 @@ export const OptionContainer = ({
     );
 };
 
-const EditableField = ({
+export const EditableField = ({
     isList,
     name,
     keyString,
     setIsEditing,
 }: {
     isList: boolean;
     name: string;
-    setIsEditing: StateUpdater<boolean>;
-} & Omit<OptionContainerProps, "sectionName">) => {
+    keyString?: string;
+    setIsEditing?: StateUpdater<boolean>;
+}) => {
     const { control, setValue, watch, getValues } = useFormContext();
-    const { showToast } = useToast();
+    // const { showToast } = useToast();
     const value = watch(name);
     const [initialState] = useState(value);
-    // const currentValues = getValues(listName);
 
     const removeListItem = (index) => {
         const updatedValues = value.filter((_, i) => i !== index);
@@ -144,7 +145,7 @@ const EditableField = ({
                             )}
                         />
                     ))}
-                    {/*<AddElementButton onClick={addListItem} />*/}
+                    <AddElementButton onClick={addListItem} />
                 </div>
             ) : (
                 <>
@@ -163,32 +164,28 @@ const EditableField = ({
                     />
                 </>
             )}
-            <div className={"flex flex-row gap-4"}>
-                <Button
-                    onClick={() => {
-                        setIsEditing(false);
-                        showToast({
-                            text: <Trans>Edited {keyString}</Trans>,
-                            onAction: () => {
-                                setValue(name, initialState);
-                            },
-                        });
-                    }}
-                    outline={true}
-                >
-                    <Trans>Done</Trans>
-                </Button>
-                <Button
-                    color={"danger"}
-                    onClick={() => {
-                        setValue(name, initialState);
-                        setIsEditing(false);
-                    }}
-                    outline={true}
-                >
-                    <Trans>Cancel</Trans>
-                </Button>
-            </div>
+            {setIsEditing && (
+                <div className={"flex flex-row gap-4"}>
+                    <Button
+                        onClick={() => {
+                            setIsEditing(false);
+                        }}
+                        outline={true}
+                    >
+                        <Trans>Done</Trans>
+                    </Button>
+                    <Button
+                        color={"danger"}
+                        onClick={() => {
+                            setValue(name, initialState);
+                            setIsEditing(false);
+                        }}
+                        outline={true}
+                    >
+                        <Trans>Cancel</Trans>
+                    </Button>
+                </div>
+            )}
         </>
     );
 };
diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/modals.tsx
@@ -1,8 +1,12 @@
 import { Trans } from "@lingui/macro";
-import { useForm } from "react-hook-form";
+import { Label } from "@tanstack/react-query-devtools/build/lib/Explorer";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { Modal, ModalProps } from "components/Modal/Modal";
 import InputField from "components/inputs/InputField";
+import switchStyle from "components/switch";
+
+import { EditableField } from "plugins/lime-plugin-mesh-wide-config/src/components/OptionForm";
 
 export const DeletePropModal = ({
     prop,
@@ -39,6 +43,9 @@ export const EditPropModal = ({
 
 export interface AddNewSectionFormProps {
     name: string;
+    value?: string;
+    values?: string[];
+    isList?: boolean;
 }
 
 export const AddNewSectionModal = ({
@@ -49,33 +56,63 @@ export const AddNewSectionModal = ({
     onSuccess: (data: AddNewSectionFormProps) => void;
     sectionName?: string;
 } & Pick<ModalProps, "isOpen" | "onClose">) => {
+    const fmethods = useForm<AddNewSectionFormProps>({
+        defaultValues: { name: "", value: "", values: [""], isList: false },
+    });
+
     const {
         register,
         handleSubmit,
+        setValue,
         formState: { errors },
-    } = useForm<AddNewSectionFormProps>({
-        defaultValues: { name: "" },
-    });
+        watch,
+    } = fmethods;
 
     let title = <Trans>Add new section</Trans>;
     if (sectionName) {
         title = <Trans>Add new section for {sectionName}</Trans>;
     }
 
+    const isList = watch("isList");
+
     return (
         <Modal
             title={title}
             successBtnText={<Trans>Add</Trans>}
             {...rest}
             onSuccess={handleSubmit(onSuccess)}
         >
-            <div>
+            <FormProvider {...fmethods}>
                 <InputField
                     id={"name"}
                     label={<Trans>Name</Trans>}
                     register={register}
+                    options={{
+                        required: "Name is required",
+                        minLength: { value: 1, message: "Minimum length is 1" },
+                    }}
+                    error={errors.name?.message}
                 />
-            </div>
+                {sectionName && (
+                    <>
+                        <div className={switchStyle.toggles}>
+                            <input
+                                type="checkbox"
+                                id="enabled"
+                                {...register("isList")}
+                            />
+                            <label htmlFor="enabled">
+                                <Trans>Is a list</Trans>
+                            </label>
+                        </div>
+                        <Label>Value</Label>
+                        <EditableField
+                            name={isList ? "values" : "value"}
+                            isList={isList}
+                        />
+                    </>
+                )}
+            </FormProvider>
         </Modal>
     );
 };
diff --git a/src/components/inputs/InputField.tsx b/src/components/inputs/InputField.tsx
@@ -8,11 +8,13 @@ const InputField = <TFieldValues extends FieldValues>({
     label,
     register,
     options,
+    error,
 }: {
     id: Path<TFieldValues>;
     label: string | ComponentChild;
     register?: UseFormRegister<TFieldValues>;
     options?: RegisterOptions;
+    error?: string | ComponentChild;
 }) => {
     return (
         <div>
@@ -24,6 +26,7 @@ const InputField = <TFieldValues extends FieldValues>({
                 {...register(id, { ...options })}
                 className="w-100"
             />
+            {error && <p class="text-red-500 text-md mt-1">{error}</p>}
         </div>
     );
 };