chore(meshconfig): implement delete entry

libremesh · Oct 10, 2024 · 21e06c4 · 21e06c4
1 parent 8fc09bb
commit 21e06c4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 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
@@ -27,7 +27,11 @@ export const ConfigSection = ({
             optionsComponent={<SectionEditOrDelete name={title} />}
         >
             {Object.entries(dropdown).map(([key, value]) => (
-                <OptionContainer key={key} section={title} keyString={key} />
+                <OptionContainer
+                    key={key}
+                    sectionName={title}
+                    keyString={key}
+                />
             ))}
         </Collapsible>
     );

diff --git a/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx b/plugins/lime-plugin-mesh-wide-config/src/components/OptionForm.tsx
@@ -42,12 +42,12 @@ const InputField = <TFieldValues extends FieldValues>({
 
 export const OptionContainer = ({
     keyString,
-    section,
+    sectionName,
 }: {
-    section: string;
+    sectionName: string;
     keyString: string;
 }) => {
-    const { control, watch, setValue } = useFormContext();
+    const { control, watch, setValue, getFieldState } = useFormContext();
     const [isEditing, setIsEditing] = useState(false);
 
     const { toggleModal: toggleDeleteModal, actionModal: deletePropModal } =
@@ -56,8 +56,10 @@ export const OptionContainer = ({
         useEditPropModal();
     const { showToast } = useToast();
 
-    const name = `${section}[${keyString}]`;
+    const name = `${sectionName}[${keyString}]`;
     const value = watch(name);
+    const section = watch(sectionName);
+
     const [inputState, setInputState] = useState(value);
 
     let _value = value;
@@ -83,19 +85,20 @@ export const OptionContainer = ({
                             onEdit={() => setIsEditing(true)}
                             onDelete={(e) => {
                                 e.stopPropagation();
-                                // todo(kon): a ver como eliminar
-                                // deletePropModal(keyString, () => {
-                                //     console.log("delete stuff");
-                                //     toggleDeleteModal();
-                                //     showToast({
-                                //         text: (
-                                //             <Trans>Deleted {keyString}</Trans>
-                                //         ),
-                                //         onAction: () => {
-                                //             console.log("Undo action");
-                                //         },
-                                //     });
-                                // });
+                                deletePropModal(keyString, () => {
+                                    const newValues = { ...section };
+                                    delete newValues[keyString];
+                                    setValue(sectionName, newValues);
+                                    toggleDeleteModal();
+                                    showToast({
+                                        text: (
+                                            <Trans>Deleted {keyString}</Trans>
+                                        ),
+                                        onAction: () => {
+                                            setValue(sectionName, section);
+                                        },
+                                    });
+                                });
                             }}
                         />
                     </div>
@@ -124,6 +127,14 @@ export const OptionContainer = ({
                                                 onClick={() => {
                                                     setValue(name, inputState);
                                                     setIsEditing(false);
+                                                    showToast({
+                                                        text: (
+                                                            <Trans>
+                                                                Edited{" "}
+                                                                {keyString}
+                                                            </Trans>
+                                                        ),
+                                                    });
                                                 }}
                                                 outline={true}
                                             >
@@ -134,14 +145,6 @@ export const OptionContainer = ({
                                                 onClick={() => {
                                                     setInputState(value);
                                                     setIsEditing(false);
-                                                    showToast({
-                                                        text: (
-                                                            <Trans>
-                                                                Edited{" "}
-                                                                {keyString}
-                                                            </Trans>
-                                                        ),
-                                                    });
                                                 }}
                                                 outline={true}
                                             >

diff --git a/plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx b/plugins/lime-plugin-mesh-wide-config/src/containers/EditConfiguration.tsx
@@ -66,6 +66,7 @@ const DrawForm = () => {
     const { watch } = useFormContext<IMeshWideConfig>();
     const formData = watch();
 
+    console.log("formData", formData);
     return (
         <>
             {Object.entries(formData).map(([title, dropdown], index) => (