victorAnumudu
73 lines
2.9 KiB
React
73 lines
2.9 KiB
React
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 text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5 flex justify-center items-center'>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}
|
|
/>
|
|
}
|
|
</>
|
|
)
|
|
}
|