feat: adds state on checkboxes

libs/shared/lib/components/userManagementContent/UserManagementContent.tsx

@@ -9,6 +9,12 @@ interface UserManagementContentProps {
   onCancel: () => void;
 }
 
+interface ListItem {
+  label: string;
+  checked: boolean;
+  children?: ListItem[];
+}
+
 export const UserManagementContent: React.FC<UserManagementContentProps> = ({ sessionId, onConfirm, onCancel }) => {
   const { setOpen } = useDialogContext();
   const [activeTab, setActiveTab] = useState<'users' | 'content' | null>('users');
@@ -80,50 +86,67 @@ export const UserManagementContent: React.FC<UserManagementContentProps> = ({ se
   // dummy content
   const [isChecked, setIsChecked] = useState<boolean>(false);
 
-  const listData = [
+  const [listData, setListData] = useState<ListItem[]>([
     {
       label: 'Database',
+      checked: false,
       children: [
         {
           label: 'View',
-          type: 'boolean',
+          checked: false,
         },
-        { label: 'Switch DB' },
+        { label: 'Switch DB', checked: false },
       ],
     },
     {
       label: 'Schema',
+      checked: false,
       children: [
         {
           label: 'View',
-          type: 'boolean',
-          tooltip: 'Toggle to enable or disable the feature',
+          checked: false,
         },
-        { label: 'Change layout' },
+        { label: 'Change layout', checked: false },
       ],
     },
     {
       label: 'Query',
+      checked: false,
       children: [
         {
           label: 'View',
-          type: 'boolean',
-          tooltip: 'Toggle to enable or disable the feature',
+          checked: false,
         },
-        { label: 'Delete' },
-        { label: 'Run ML' },
+        { label: 'Delete', checked: false },
+        { label: 'Run ML', checked: false },
       ],
     },
     {
       label: 'Alerting',
+      checked: false,
       children: [
         {
           label: 'View',
-          type: 'boolean',
+          checked: false,
         },
       ],
     },
-  ];
+  ]);
+
+  const handleCheckboxChange = (index: number, childIndex?: number) => {
+    console.log('idx', index, childIndex);
+    setListData((prevListData) => {
+      const updatedListData = [...prevListData];
+      if (childIndex !== undefined) {
+        // Update child checkbox
+        updatedListData[index].children![childIndex].checked = !updatedListData[index].children![childIndex].checked;
+      } else {
+        // Update parent checkbox
+        updatedListData[index].checked = !updatedListData[index].checked;
+      }
+      return updatedListData;
+    });
+  };
 
   return (
     <div className="flex flex-col w-[50rem] h-[40rem]">
@@ -259,7 +282,12 @@ export const UserManagementContent: React.FC<UserManagementContentProps> = ({ se
                           {item.children.map((child, childIndex) => (
                             <li key={childIndex}>
                               <div>
-                                <Input type="boolean" label={child.label} value={isChecked} onChange={setIsChecked} />
+                                <Input
+                                  type="boolean"
+                                  label={child.label}
+                                  value={child.checked}
+                                  onChange={() => handleCheckboxChange(index, childIndex)}
+                                />
                               </div>
                             </li>
                           ))}