Jobs Manager Side task done
This commit was merged in pull request #551.
This commit is contained in:
@@ -73,7 +73,7 @@ export default function DeleteGroup({action, situation, details}) {
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
|
||||
Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span>
|
||||
Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2.5">
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function DeleteMember({action, situation, details}) {
|
||||
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Delete Member
|
||||
Remove Member
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
@@ -73,7 +73,7 @@ export default function DeleteMember({action, situation, details}) {
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
|
||||
Are you sure, you want to delete <br /> <span>'{details?.firstname} {details.lastname}'</span>
|
||||
Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2.5">
|
||||
@@ -92,7 +92,7 @@ export default function DeleteMember({action, situation, details}) {
|
||||
type="button"
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
Confirm Delete
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,72 +1,104 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState } from "react";
|
||||
|
||||
import InputCom from '../../components/Helpers/Inputs/InputCom/index'
|
||||
import DeleteGroup from './DeleteGroup'
|
||||
import AddGroup from './AddGroup'
|
||||
import AddGroup from "./AddGroup";
|
||||
import DeleteGroup from "./DeleteGroup";
|
||||
import { localImgLoad } from "../../lib";
|
||||
|
||||
export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) {
|
||||
export default function GroupList({
|
||||
groupList,
|
||||
selectedGroup,
|
||||
changeSelectedGroup,
|
||||
setUpdateList,
|
||||
}) {
|
||||
const [deletePopout, setDeletePopout] = useState({
|
||||
status: false,
|
||||
data: {},
|
||||
});
|
||||
|
||||
const [deletePopout, setDeletePopout] = useState({
|
||||
status: false,
|
||||
data: {}
|
||||
})
|
||||
const [addGroupPopout, setAddGroupPopout] = useState(false);
|
||||
|
||||
const [addGroupPopout, setAddGroupPopout] = useState(false)
|
||||
|
||||
const handleAddGroup = () => {
|
||||
setAddGroupPopout(true)
|
||||
}
|
||||
|
||||
const handleDeleteGroup = (item) => {
|
||||
setDeletePopout({
|
||||
status: true,
|
||||
data: {...item}
|
||||
})
|
||||
}
|
||||
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 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>
|
||||
|
||||
{deletePopout.status &&
|
||||
<DeleteGroup
|
||||
action={()=>setDeletePopout({status:false, data:{}})}
|
||||
situation={deletePopout.status}
|
||||
details={deletePopout.data}
|
||||
/>
|
||||
}
|
||||
|
||||
{addGroupPopout &&
|
||||
<AddGroup
|
||||
action={()=>setAddGroupPopout(false)}
|
||||
situation={addGroupPopout}
|
||||
setUpdateList={setUpdateList}
|
||||
/>
|
||||
}
|
||||
{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="flex relative items-center justify-center border-0 w-6 h-6"
|
||||
>
|
||||
<img
|
||||
src={localImgLoad("images/icons/remove_grp.svg")}
|
||||
alt="remove-icon"
|
||||
/>
|
||||
</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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,98 +1,118 @@
|
||||
import React, { useState } from 'react'
|
||||
import { handlePagingFunc } from '../Pagination/HandlePagination';
|
||||
import PaginatedList from '../Pagination/PaginatedList';
|
||||
import DeleteMember from './DeleteMember';
|
||||
import React, { useState } from "react";
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
import PaginatedList from "../Pagination/PaginatedList";
|
||||
import DeleteMember from "./DeleteMember";
|
||||
import { localImgLoad } from "../../lib";
|
||||
|
||||
export default function GroupMemberTable({selectedList}) {
|
||||
|
||||
// Handle Pagination
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
export default function GroupMemberTable({ selectedList }) {
|
||||
// Handle Pagination
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =
|
||||
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
|
||||
const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
const currentSelectedList = selectedList?.slice(
|
||||
indexOfFirstItem,
|
||||
indexOfLastItem
|
||||
);
|
||||
|
||||
const [deletePopout, setDeletePopout] = useState({
|
||||
status: false,
|
||||
data: {}
|
||||
})
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
const handleDeleteMember = (item) => {
|
||||
setDeletePopout({
|
||||
status: true,
|
||||
data: {...item}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
<>
|
||||
{selectedList && selectedList?.length > 0 ? (
|
||||
currentSelectedList.map((value, index) => (
|
||||
<tr key={value.uid} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
|
||||
{/* <td className="p-1">{value?.firstname}</td>
|
||||
const [deletePopout, setDeletePopout] = useState({
|
||||
status: false,
|
||||
data: {},
|
||||
});
|
||||
|
||||
const handleDeleteMember = (item) => {
|
||||
setDeletePopout({
|
||||
status: true,
|
||||
data: { ...item },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}
|
||||
>
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
<>
|
||||
{selectedList && selectedList?.length > 0 ? (
|
||||
currentSelectedList.map((value, index) => (
|
||||
<tr
|
||||
key={value.uid}
|
||||
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
|
||||
>
|
||||
{/* <td className="p-1">{value?.firstname}</td>
|
||||
<td className="p-1">{value?.lastname}</td>
|
||||
<td className="p-1">{value?.email}</td>
|
||||
<td className="p-1 text-right">
|
||||
<button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
|
||||
</td> */}
|
||||
<td className='py-2'>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{value.firstname && value.firstname} {value.lastname && value.lastname}
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
{value.email && value.email}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className='py-2 text-right'>
|
||||
<button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<td className="p-2">No Members Found</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
selectedList?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={selectedList}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
|
||||
{/* DELETE MEMBER POPOUT */}
|
||||
{deletePopout.status &&
|
||||
<DeleteMember
|
||||
action={()=>setDeletePopout({status:false, data:{}})}
|
||||
situation={deletePopout.status}
|
||||
details={deletePopout.data}
|
||||
/>
|
||||
}
|
||||
{/* END OF DELETE MEMBER POPOUT */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<td className="py-2">
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
|
||||
{value.firstname && value.firstname}{" "}
|
||||
{value.lastname && value.lastname}
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
{value.email && value.email}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-2 text-right">
|
||||
<button
|
||||
onClick={() => {
|
||||
handleDeleteMember(value);
|
||||
}}
|
||||
className="flex relative items-center justify-center border-0 w-8 h-8"
|
||||
>
|
||||
<img
|
||||
src={localImgLoad("images/icons/remove_grp.svg")}
|
||||
alt="remove-icon"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
<td className="p-2">No Members Found</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
selectedList?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={selectedList}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
|
||||
{/* DELETE MEMBER POPOUT */}
|
||||
{deletePopout.status && (
|
||||
<DeleteMember
|
||||
action={() => setDeletePopout({ status: false, data: {} })}
|
||||
situation={deletePopout.status}
|
||||
details={deletePopout.data}
|
||||
/>
|
||||
)}
|
||||
{/* END OF DELETE MEMBER POPOUT */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,79 +1,119 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Layout from '../Partials/Layout'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Layout from "../Partials/Layout";
|
||||
|
||||
import GroupList from './GroupList'
|
||||
import MemberList from './MemberList'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
import GroupList from "./GroupList";
|
||||
import MemberList from "./MemberList";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
export default function JobGroups() {
|
||||
const userApi = new usersService();
|
||||
|
||||
const userApi = new usersService();
|
||||
const [updateList, setUpdateList] = useState(false);
|
||||
|
||||
const [updateList, setUpdateList] = useState(false)
|
||||
const [groupList, setGroupList] = useState({
|
||||
loading: true,
|
||||
groups: [],
|
||||
members: [],
|
||||
});
|
||||
|
||||
|
||||
const [groupList, setGroupList] = useState({
|
||||
loading:true,
|
||||
groups: [],
|
||||
members: []
|
||||
})
|
||||
const [selectedGroup, setSelectedGroup] = useState({
|
||||
id: "",
|
||||
name: "",
|
||||
data: [],
|
||||
});
|
||||
|
||||
const [selectedGroup, setSelectedGroup] = useState({id:'', name:'', data: []})
|
||||
const changeSelectedGroup = (e) => {
|
||||
let groupID = e.target.value;
|
||||
const activeMembers = groupList?.members?.filter(
|
||||
(item) => item.group_id == groupID
|
||||
);
|
||||
const activeGroup = groupList?.groups?.filter(
|
||||
(item) => item.group_id == groupID
|
||||
);
|
||||
setSelectedGroup({
|
||||
id: groupID,
|
||||
name: activeGroup[0]?.group_name,
|
||||
data: activeMembers,
|
||||
});
|
||||
};
|
||||
|
||||
const changeSelectedGroup = (e) => {
|
||||
let groupID = e.target.value
|
||||
const activeMembers = groupList?.members?.filter(item => item.group_id == groupID)
|
||||
const activeGroup = groupList?.groups?.filter(item => item.group_id == groupID)
|
||||
setSelectedGroup({id: groupID, name:activeGroup[0]?.group_name, data:activeMembers})
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
setGroupList({loading: true, groups: [], members: []})
|
||||
userApi.jobGroupList({}).then(res => {
|
||||
const {status, data} = res
|
||||
if(status != 200 || data?.internal_return < 0){
|
||||
setGroupList({loading: false, groups: [], members: []})
|
||||
return
|
||||
}
|
||||
if(data.result_list.length < 0){
|
||||
setGroupList({loading: false, groups: [], members: []})
|
||||
return
|
||||
}
|
||||
setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
|
||||
if(selectedGroup.id == ''){
|
||||
let activeGroupId = data.result_list[0].group_id
|
||||
let activeGroup = data.result_list[0].group_name
|
||||
let activeMembers = data.result_list_member?.filter(item => item.group_id == activeGroupId)
|
||||
setSelectedGroup({id: activeGroupId, name:activeGroup, data:activeMembers})
|
||||
}else{
|
||||
let activeMembers = data.result_list_member?.filter(item => item.group_id == selectedGroup?.id)
|
||||
setSelectedGroup({id: selectedGroup?.id, name:selectedGroup?.name, data:activeMembers})
|
||||
}
|
||||
}).catch(error => {
|
||||
setGroupList({loading: false, groups: [], members: []})
|
||||
console.log(error)
|
||||
})
|
||||
},[updateList])
|
||||
useEffect(() => {
|
||||
setGroupList({ loading: true, groups: [], members: [] });
|
||||
userApi
|
||||
.jobGroupList({})
|
||||
.then((res) => {
|
||||
const { status, data } = res;
|
||||
if (status != 200 || data?.internal_return < 0) {
|
||||
setGroupList({ loading: false, groups: [], members: [] });
|
||||
return;
|
||||
}
|
||||
if (data.result_list.length < 0) {
|
||||
setGroupList({ loading: false, groups: [], members: [] });
|
||||
return;
|
||||
}
|
||||
setGroupList({
|
||||
loading: false,
|
||||
groups: data.result_list,
|
||||
members: data.result_list_member,
|
||||
});
|
||||
if (selectedGroup.id == "") {
|
||||
let activeGroupId = data.result_list[0].group_id;
|
||||
let activeGroup = data.result_list[0].group_name;
|
||||
let activeMembers = data.result_list_member?.filter(
|
||||
(item) => item.group_id == activeGroupId
|
||||
);
|
||||
setSelectedGroup({
|
||||
id: activeGroupId,
|
||||
name: activeGroup,
|
||||
data: activeMembers,
|
||||
});
|
||||
} else {
|
||||
let activeMembers = data.result_list_member?.filter(
|
||||
(item) => item.group_id == selectedGroup?.id
|
||||
);
|
||||
setSelectedGroup({
|
||||
id: selectedGroup?.id,
|
||||
name: selectedGroup?.name,
|
||||
data: activeMembers,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
setGroupList({ loading: false, groups: [], members: [] });
|
||||
console.log(error);
|
||||
});
|
||||
}, [updateList]);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div>
|
||||
<h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1>
|
||||
</div>
|
||||
<div className='p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white'>
|
||||
{groupList.loading ?
|
||||
<div className='w-full h-[400px] flex justify-center items-center'>
|
||||
<LoadingSpinner size='16' />
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<GroupList groupList={groupList?.groups} selectedGroup={selectedGroup} changeSelectedGroup={changeSelectedGroup} setUpdateList={setUpdateList} />
|
||||
<MemberList groupList={groupList?.groups} selectedGroup={selectedGroup} setUpdateList={setUpdateList} />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100">
|
||||
Jobs Groups
|
||||
</h1>
|
||||
</div>
|
||||
<div className="p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white">
|
||||
{groupList.loading ? (
|
||||
<div className="w-full h-[400px] flex justify-center items-center">
|
||||
<LoadingSpinner size="16" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<GroupList
|
||||
groupList={groupList?.groups}
|
||||
selectedGroup={selectedGroup}
|
||||
changeSelectedGroup={changeSelectedGroup}
|
||||
setUpdateList={setUpdateList}
|
||||
/>
|
||||
<MemberList
|
||||
groupList={groupList?.groups}
|
||||
selectedGroup={selectedGroup}
|
||||
setUpdateList={setUpdateList}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@ import GroupMemberTable from "./GroupMemberTable";
|
||||
|
||||
import EmailValidator from "../../lib/EmailValidator";
|
||||
|
||||
import usersService from "../../services/UsersService";
|
||||
import { apiConst } from "../../lib/apiConst";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
export default function MemberList({
|
||||
groupList,
|
||||
|
||||
Reference in New Issue
Block a user