From c66dd3ec85a245eb75e4722adb32678ad1a1dab7 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Fri, 28 Mar 2025 11:16:11 +0700
Subject: [PATCH] fix form update manage wallet - remove validation - add .join
 to merge value group from response

---
 src/pages/master/wallet/blocks/EditDialog.tsx | 34 +++++++------------
 .../wallet/hooks/ManageWalletContext.tsx      |  7 ++--
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx
index b4554c7..b2b8695 100644
--- a/src/pages/master/wallet/blocks/EditDialog.tsx
+++ b/src/pages/master/wallet/blocks/EditDialog.tsx
@@ -52,13 +52,13 @@ const EditDialog = () => {
     name: string;
     description: string;
     status: string;
-    group: string;
+    group: string[];
     currency_id: string;
   } = {
     name: '',
     description: '',
     status: '',
-    group: '',
+    group: [],
     currency_id: ''
   };
   const [formField, setFormField] = useState(initialState);
@@ -94,17 +94,6 @@ const EditDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (
-      formField.name.trim() === '' ||
-      formField.description.trim() === '' ||
-      formField.status.trim() === '' ||
-      formField.currency_id === '' ||
-      formField.group.length === 0
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
-      return;
-    }
-
     console.log(formField);
     doUpdateWallet(e);
     setAlert({ show: false, message: '' });
@@ -115,7 +104,7 @@ const EditDialog = () => {
       id
     });
 
-    // console.log(response);
+    console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,
@@ -124,7 +113,7 @@ const EditDialog = () => {
         status: response?.data.status,
         currency_id: response?.data.currency_id,
         group: Array.isArray(response?.data.group)
-          ? response?.data.group.map((target: any) => target.name)
+          ? response?.data.group.map((target: GroupProps) => target.id)
           : []
       }));
     }
@@ -162,6 +151,11 @@ const EditDialog = () => {
     }
   };
 
+  const selectedGroupNames = groups
+    .filter((g) => formField.group.includes(g.id))
+    .map((g) => g.name)
+    .join(', ');
+
   useEffect(() => {
     getCurrencyLists([{ id: 'name', desc: false }]);
     getGroupLists([{ id: 'name', desc: false }]);
@@ -234,9 +228,7 @@ const EditDialog = () => {
 
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Status
-                    </label>
+                    <label className="form-label flex items-center gap-1 max-w-56">Status</label>
                     <Select
                       value={formField.status}
                       onValueChange={(value) => setFormField({ ...formField, status: value })}
@@ -254,9 +246,7 @@ const EditDialog = () => {
 
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                    <label className="form-label flex items-center gap-1 max-w-56">
-                      Currency
-                    </label>
+                    <label className="form-label flex items-center gap-1 max-w-56">Currency</label>
                     <Select
                       value={formField.currency_id}
                       onValueChange={(value) => setFormField({ ...formField, currency_id: value })}
@@ -278,7 +268,7 @@ const EditDialog = () => {
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">Groups</label>
-                    <Input type="text" value={formField.group} readOnly />
+                    <Input type="text" value={selectedGroupNames} readOnly />
                   </div>
                 </div>
 
diff --git a/src/pages/master/wallet/hooks/ManageWalletContext.tsx b/src/pages/master/wallet/hooks/ManageWalletContext.tsx
index 97c5c6e..d92f73d 100644
--- a/src/pages/master/wallet/hooks/ManageWalletContext.tsx
+++ b/src/pages/master/wallet/hooks/ManageWalletContext.tsx
@@ -112,7 +112,8 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           );
         },
         meta: {
-          headerClassName: 'w-[100px]'
+          headerClassName: 'w-[100px] text-center',
+          cellClassName: 'text-center'
         }
       },
       {
@@ -140,7 +141,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
           );
         },
         meta: {
-          headerClassName: 'w-[100px]',
+          headerClassName: 'w-[100px] text-center',
           cellClassName: 'text-center'
         }
       }
@@ -185,7 +186,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       <Toaster expand visibleToasts={9} duration={3000} />
       <DataGridProvider
         columns={columns}
-        pagination={{ size: 5 }}
+        pagination={{ size: 25 }}
         toolbar={<ListToolbar />}
         layout={{ card: true }}
         sorting={[{ id: 'id', desc: false }]}