WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Jobs Manager Side task done

Browse Source
This commit was merged in pull request #551.
This commit is contained in:
Chukwumdiebube Ojinta
2024-01-24 01:11:49 +01:00
parent ec88f304ab
commit 0e4b1af1ce
9 changed files with 577 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JobGroups/JobGroups.jsx
+105 -65
View File
@@ -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>
)
);
}