add group api added

2024-01-04 22:45:32 +01:00
parent 98ddc5aaae
commit f6e55718bb
10 changed files with 909 additions and 8 deletions
@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+
+import InputCom from '../../components/Helpers/Inputs/InputCom/index'
+import DeleteGroup from './DeleteGroup'
+import AddGroup from './AddGroup'
+
+export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) {
+
+    const [deletePopout, setDeletePopout] = useState({
+        status: false,
+        data: {}
+    })
+
+    const [addGroupPopout, setAddGroupPopout] = useState(false)
+
+    const handleAddGroup = () => {
+        setAddGroupPopout(true)
+    }
+
+    const handleDeleteGroup = (item) => {
+        setDeletePopout({
+            status: true,
+            data: {...item}
+        })
+    }
+
+
+  return (
+    <>
+        <div className='p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl'>
+            {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
+            <div className='flex justify-end items-center'>
+                <button onClick={handleAddGroup} className='py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold'>Add Group</button>
+            </div>
+
+            {groupList && groupList.length < 1 ?
+            <h1 className='my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100'>No Group Found!</h1>
+            :
+            <div className='my-4 max-h-[400px] overflow-y-auto'>
+                <div className='flex flex-col'>
+                    {groupList.map(item=> (
+                        <div key={item.group_uid} className='p-2 flex gap-2 items-center justify-between w-full'>
+                            <div className='flex gap-2 items-center'>
+                                <input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' />
+                                <p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p>
+                            </div>
+                            <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-3'>X</button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            }
+        </div>
+        
+        {deletePopout.status &&
+            <DeleteGroup 
+                action={()=>setDeletePopout({status:false, data:{}})}
+                situation={deletePopout.status}
+                details={deletePopout.data}
+            />
+        }
+
+        {addGroupPopout &&
+            <AddGroup 
+                action={()=>setAddGroupPopout(false)}
+                situation={addGroupPopout}
+                setUpdateList={setUpdateList}
+            />
+        }
+    </>
+  )
+}