diff --git a/client/src/App.tsx b/client/src/App.tsx index ab75323..cb611fd 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -15,7 +15,6 @@ import {getStaffSkillsByStaffId} from "./actions/staffSkills"; import {getApplicationsByStaffId} from "./actions/applications"; import Profile from './components/pages/Profile'; import Restricted from "./components/pages/Restricted"; -import HR from "./components/pages/HR"; import RoleApplicants from './components/pages/RoleApplicants'; import StaffDetail from './components/pages/StaffDetail'; import RoleListingManager from './components/pages/RoleListingManager'; @@ -61,8 +60,7 @@ const App = ({getStaffSkillsByStaffId, getApplicationsByStaffId, auth: {user, is }/> }/> }/> - }/> - }/> + }/> }/> }/> }/> @@ -75,8 +73,7 @@ const App = ({getStaffSkillsByStaffId, getApplicationsByStaffId, auth: {user, is }/> }/> }/> - }/> - }/> + }/> }/> }/> }/> diff --git a/client/src/components/layout/Favourites.tsx b/client/src/components/layout/Favourites.tsx deleted file mode 100644 index 14ea08e..0000000 --- a/client/src/components/layout/Favourites.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import {Container} from "react-bootstrap"; -import RoleList from "./RoleList"; - -function Favourties() { - return ( - - favourites - - - ) -} - -export default Favourties; \ No newline at end of file diff --git a/client/src/components/layout/HrRoleListings.test.tsx b/client/src/components/layout/HrRoleListings.test.tsx deleted file mode 100644 index 6afa286..0000000 --- a/client/src/components/layout/HrRoleListings.test.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import {render, screen, waitFor} from '@testing-library/react'; -import {store} from '../../mockStore'; -import {Provider} from 'react-redux'; -import {mockMatchMedia} from "../../setupTests"; -import {BrowserRouter} from 'react-router-dom' -import HrRoleListings from './HrRoleListings'; -import userEvent from '@testing-library/user-event'; - -describe('Hr Role Listings component tests', () => { - beforeAll(() => { - mockMatchMedia(); - }); - beforeEach(() => { - render( - - - - - ) - }); - - it ("able to click All radio button", () => { - userEvent.click(screen.getByText('All')) - expect(screen.getByLabelText('All')).toBeChecked() - }); - - it ("able to click Scheduled radio button", () => { - userEvent.click(screen.getByText('Scheduled')) - expect(screen.getByLabelText('Scheduled')).toBeChecked() - }); - - it ("able to click Closed radio button", () => { - userEvent.click(screen.getAllByText('Closed')[0]) - expect(screen.getByLabelText('Closed')).toBeChecked() - }); - - it ("able to click Open radio button", () => { - userEvent.click(screen.getAllByText('Open')[0]) - expect(screen.getByLabelText('Open')).toBeChecked() - }); - - it('should load 3 seconds before displaying data', async () => { - expect(screen.getByTestId("skeleton-list")).toBeInTheDocument(); - - waitFor(() => { - expect( screen.queryByTestId("skeleton-list")).not.toBeInTheDocument(); - expect( screen.getByText('HR Manager')).toBeInTheDocument(); - expect( screen.getByText('IT Technician')).toBeInTheDocument(); - }); - }); - - it ("able to click edit icon and redirect to update page", async () => { - waitFor(() => { - const editIconElement = screen.getAllByTestId('edit-icon-click')[0]; - expect(editIconElement).toBeInTheDocument(); - - userEvent.click(editIconElement) - expect( window.location.pathname).toBe('/listingManage/update/1'); - }); - }); - - it ("able to click edit icon and redirect to listing page", async () => { - waitFor(() => { - const listItemElement = screen.getAllByTestId('one-listing')[0]; - - userEvent.click(listItemElement) - expect(window.location.pathname).toBe('/listingManage/1'); - }); - }); - - it ("should have 5 role listings in total", async () => { - waitFor(() => { - const listItemElement = screen.getAllByTestId('one-listing'); - - expect(listItemElement.length).toBe(5); - }); - }); - - it ("should have 0 scheduled role listings in total", async () => { - waitFor(() => { - userEvent.click(screen.getByText('Scheduled')) - const listItemElement = screen.queryAllByTestId('one-listing'); - - expect(listItemElement.length).toBe(0); - }); - }); - - it ("should have 3 open role listings", async () => { - waitFor(() => { - userEvent.click(screen.getAllByText('Open')[0]) - const listItemElement = screen.getAllByTestId('one-listing'); - - expect(listItemElement.length).toBe(3); - }); - }); - - it ("should have 2 closed role listings", async () => { - waitFor(() => { - userEvent.click(screen.getAllByText('Closed')[0]) - const listItemElement = screen.getAllByTestId('one-listing'); - - expect(listItemElement.length).toBe(2); - console.log(window.location.pathname) - }); - }); - - it ("should display listing statuses", async () => { - waitFor(() => { - const listItemElement = screen.getAllByTestId('status'); - - expect(listItemElement.length).toBe(5); - }); - }); - - it ("HR Manager should display open status", async () => { - waitFor(() => { - const statusElement = screen.getAllByTestId('status')[0]; - const hrManagerElement = screen.getByText("HR Manager"); - const engineeringManagerElement = screen.getAllByText("Engineering Manager")[0]; - - expect(statusElement).toBeInTheDocument(); - expect(statusElement).toHaveTextContent('Open'); - expect(hrManagerElement).toBeInTheDocument(); - expect(engineeringManagerElement).toBeInTheDocument(); - expect(hrManagerElement.compareDocumentPosition(statusElement)).toBe(4); - expect(statusElement.compareDocumentPosition(engineeringManagerElement)).toBe(4); - }); - }); - - it ("HR Manager should display creator as John Doe on 01/08/2023", async () => { - waitFor(() => { - const creatorElement = screen.getAllByText('Creator:')[0]; - const creatorDetailsElement = screen.getByText('John Doe | 01/08/2023'); - const updatorElement = screen.getAllByText('Last Updator:')[0]; - const hrManagerElement = screen.getByText("HR Manager"); - const engineeringManagerElement = screen.getAllByText("Engineering Manager")[0]; - - expect(creatorElement).toBeInTheDocument(); - expect(creatorDetailsElement).toBeInTheDocument(); - expect(updatorElement).toBeInTheDocument(); - expect(hrManagerElement).toBeInTheDocument(); - expect(engineeringManagerElement).toBeInTheDocument(); - - expect(hrManagerElement.compareDocumentPosition(creatorElement)).toBe(4); - expect(creatorElement.compareDocumentPosition(updatorElement)).toBe(4); - expect(creatorElement.compareDocumentPosition(engineeringManagerElement)).toBe(4); - }); - }); - - it ("HR Manager should display updator as John Doe on 13//10/2023", async () => { - waitFor(() => { - const updatorElement = screen.getAllByText('Last Updator:')[0]; - const updatorDetailsElement = screen.queryAllByText('John Doe | 13/10/2023')[0]; - const hrManagerElement = screen.getByText("HR Manager"); - const engineeringManagerElement = screen.getAllByText("Engineering Manager")[0]; - - expect(updatorDetailsElement).toBeInTheDocument(); - expect(updatorElement).toBeInTheDocument(); - expect(hrManagerElement).toBeInTheDocument(); - expect(engineeringManagerElement).toBeInTheDocument(); - expect(updatorDetailsElement).not.toBe([]) - - expect(hrManagerElement.compareDocumentPosition(updatorElement)).toBe(4); - expect(updatorDetailsElement.compareDocumentPosition(updatorElement)).toBe(2); - expect(updatorDetailsElement.compareDocumentPosition(engineeringManagerElement)).toBe(4); - }); - }); - - it ("Engineer Manager should display closed status", async () => { - waitFor(() => { - // screen.debug(undefined, Infinity); - const statusElement = screen.getAllByTestId('status')[3]; - const itTechnicianElement = screen.getByText("IT Technician"); - const financeStaffElement = screen.getByText("Finance Staff"); - - expect(statusElement).toBeInTheDocument(); - expect(statusElement).toHaveTextContent('Closed'); - expect(itTechnicianElement).toBeInTheDocument(); - expect(financeStaffElement).toBeInTheDocument(); - expect(itTechnicianElement.compareDocumentPosition(statusElement)).toBe(4); - expect(statusElement.compareDocumentPosition(financeStaffElement)).toBe(4); - }); - }); - - it ("Engineer Manager should display creator as John Doe on 01/08/2023", async () => { - waitFor(() => { - const creatorElement = screen.getAllByText('Creator:')[3]; - const creatorDetailsElement = screen.getByText('John Doe | 14/08/2023'); - const itTechnicianElement = screen.getByText("IT Technician"); - const financeStaffElement = screen.getByText("Finance Staff"); - - expect(creatorElement).toBeInTheDocument(); - expect(creatorDetailsElement).toBeInTheDocument(); - expect(itTechnicianElement).toBeInTheDocument(); - expect(financeStaffElement).toBeInTheDocument(); - - expect(itTechnicianElement.compareDocumentPosition(creatorElement)).toBe(4); - expect(creatorElement.compareDocumentPosition(financeStaffElement)).toBe(4); - }); - }); - - it ("Engineer Manager should not display an Updator", async () => { - waitFor(() => { - const engineeringManagerListElement = screen.getAllByTestId('one-listing')[3]; - - expect(engineeringManagerListElement).toBeInTheDocument(); - expect(engineeringManagerListElement).not.toHaveTextContent('Last Updator:'); - }); - }); - - it ("should display location as Thailand for HR Manager", async () => { - waitFor(() => { - const locationElement = screen.getAllByText('Thailand')[0]; - const hrManagerElement = screen.getByText("HR Manager"); - const engineeringManagerElement = screen.getAllByText("Engineering Manager")[0]; - - expect(locationElement).toBeInTheDocument(); - expect(hrManagerElement).toBeInTheDocument(); - expect(engineeringManagerElement).toBeInTheDocument(); - - expect(hrManagerElement.compareDocumentPosition(locationElement)).toBe(4); - expect(locationElement.compareDocumentPosition(engineeringManagerElement)).toBe(4); - }); - }); - - it ("should display Human Resources as department for HR Manager", async () => { - waitFor(() => { - const departmentElement = screen.getAllByText('Human Resources')[0]; - const hrManagerElement = screen.getByText("HR Manager"); - const engineeringManagerElement = screen.getAllByText("Engineering Manager")[0]; - - expect(departmentElement).toBeInTheDocument(); - expect(hrManagerElement).toBeInTheDocument(); - expect(engineeringManagerElement).toBeInTheDocument(); - - expect(hrManagerElement.compareDocumentPosition(departmentElement)).toBe(4); - expect(departmentElement.compareDocumentPosition(engineeringManagerElement)).toBe(4); - }); - }); -}) \ No newline at end of file diff --git a/client/src/components/layout/HrRoleListings.tsx b/client/src/components/layout/HrRoleListings.tsx deleted file mode 100644 index 4e29d86..0000000 --- a/client/src/components/layout/HrRoleListings.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import {getRoleListings} from "../../actions/roleListings"; -import {connect} from "react-redux"; -import PropTypes from "prop-types"; -import React, {useEffect, useState} from "react"; -import {Empty, List, Radio, RadioChangeEvent, Skeleton, Space, Tag, Tooltip} from 'antd'; -import { - CalendarOutlined, - EnvironmentOutlined, - FormOutlined, - LoadingOutlined, - BankOutlined, -} from '@ant-design/icons'; -import {getStaffListings} from "../../actions/staffListings"; -import {useNavigate} from "react-router-dom"; -import {Link} from "react-router-dom"; - -const HrRoleListings = ({ - getRoleListings, - roleListing: {roleListings}, - auth: {user}, getStaffListings, - staffListing - }: any) => { - useEffect(() => { - if (user) { - getRoleListings(user); - getStaffListings(); - } - }, [getRoleListings, getStaffListings]); - - const [dataloaded, setDataLoaded] = useState(false); - - setTimeout(() => { - setDataLoaded(true); - }, roleListings.length !== 0 ? 500: 3000); - - const [listingState, setListingState] = useState("all"); - const navigate = useNavigate(); - - const selectChange = (e: RadioChangeEvent) => { - setListingState(e.target.value); - } - - const getHRName = (id: number) => { - let staff = staffListing.staffListings.find((staffListing: any) => staffListing.staff_id === id); - return staff.fname + " " + staff.lname; - } - - const today = new Date(); - - const filteredListings = roleListings ? roleListings.filter((item: any) => { - return ( - item.rl_status === listingState || - listingState === "all" || - (listingState === "scheduled" && new Date(item.rl_open) > today) || - (listingState === "inactive" && item.role_status === "inactive") - ); - }) : true; - - return ( - - - All - Scheduled - Open - Closed - Inactive - - { - dataloaded && roleListings.length !== 0 ? ( - 10 ? { - onChange: (page) => { - }, - pageSize: 10, - } : false} - dataSource={filteredListings} - renderItem={(item: any) => ( - - - navigate("/listingManage/update/" + item.rl_id)} data-testid="edit-icon-click"> - - - - : - <> - } - style={{cursor: "pointer"}} - > - - - {item.role_name} - - {item.rl_status} - { item.role_status !== "active" ? - Inactive : - <> - } - - - } - description={ - -
{item.department}
- -
{item.location}
-
- {new Date(item.rl_open).toLocaleDateString("en-SG")} - {new Date(item.rl_close).toLocaleDateString("en-SG")} -
- - } - /> - - - - Creator: - {staffListing.loading ? : - {getHRName(item.rl_creator)} | {new Date(item.rl_ts_create).toLocaleDateString('en-sg')} } - - {item.rl_updater_id === undefined ? <> : - - Last Updator: - {staffListing.loading ? : - {getHRName(item.rl_updater_id)} | {new Date(item.update_time).toLocaleDateString('en-sg')} } - - } - -

-
{item.rl_desc}
- - - )} - - /> - ) : dataloaded && roleListings.length === 0 ? ( -
- -
- ) : ( - i)} - renderItem={(item: any) => ( - - - - )} - data-testid="skeleton-list" - /> - ) - } - - ); -} - -HrRoleListings.propTypes = { - getRoleListings: PropTypes.func.isRequired, - roleListing: PropTypes.object.isRequired, - auth: PropTypes.object.isRequired, - getStaffListings: PropTypes.func.isRequired, - staffListing: PropTypes.object.isRequired, -}; - -const mapStateToProps = (state: any) => ({ - roleListing: state.roleListing, - auth: state.auth, - staffListing: state.staffListing, -}); - -export default connect(mapStateToProps, {getRoleListings, getStaffListings})(HrRoleListings); \ No newline at end of file diff --git a/client/src/components/layout/MyApplications.test.tsx b/client/src/components/layout/MyApplications.test.tsx deleted file mode 100644 index 854dd7e..0000000 --- a/client/src/components/layout/MyApplications.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import {render, screen, waitFor} from '@testing-library/react'; -import {store} from '../../mockStore'; -import {Provider} from 'react-redux'; -import {mockMatchMedia} from "../../setupTests"; -import {BrowserRouter} from 'react-router-dom' -import MyApplications from './MyApplications'; - - -jest.useFakeTimers(); - -describe('My Applications component tests', () => { - beforeAll(() => { - mockMatchMedia(); - }); - - beforeEach(() => { - render() - }); - - it('should initially display a loading state', () => { - const listElem = screen.queryAllByRole('list'); - expect(listElem).toHaveLength(6); - }); - - it('should load data after 3 seconds', async () => { - jest.advanceTimersByTime(3000); - await waitFor(() => { - expect(screen.getByText("No data")).toBeInTheDocument(); - }); - }); - - it('should remove loading state after loading data', async () => { - jest.advanceTimersByTime(3000); - await waitFor(() => { - const listElements = screen.queryAllByRole('list'); - expect(listElements.length).toBe(0); - }); - }); - -}); \ No newline at end of file diff --git a/client/src/components/layout/MyApplications.tsx b/client/src/components/layout/MyApplications.tsx deleted file mode 100644 index 6b6bce6..0000000 --- a/client/src/components/layout/MyApplications.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import {Container} from "react-bootstrap"; -import type {PaginationProps, TableProps} from 'antd'; -import {Skeleton, Space, Table, Tag, Modal, Tooltip} from 'antd'; -import type {ColumnsType, FilterValue, SorterResult} from 'antd/es/table/interface'; -import {getApplicationsByStaffId, updateApplication} from "../../actions/applications"; -import React, {useEffect, useState} from "react"; -import {connect, useDispatch} from 'react-redux'; -import PropTypes from 'prop-types'; -import {GetApplicationsByStaffIdPayloadType} from "../../types"; -import {Link} from "react-router-dom"; -import type {CustomIconComponentProps} from '@ant-design/icons/lib/components/Icon'; -import Icon, {FileTextOutlined, ExclamationCircleFilled} from '@ant-design/icons'; - -const WithdrawSvg = () => ( - - - -) - -const WithdrawIcon = (props: Partial) => ( - -); - - -const MyApplications = ({getApplicationsByStaffId, application: {applications, loading}, auth: {user}}: any) => { - const [filteredInfo, setFilteredInfo] = useState>({}); - const [sortedInfo, setSortedInfo] = useState>({}); - const handleChange: TableProps['onChange'] = (pagination, filters, sorter) => { - setFilteredInfo(filters); - setSortedInfo(sorter as SorterResult); - }; - useEffect(() => { - if (user) { - getApplicationsByStaffId(user); - } - }, [getApplicationsByStaffId]); - - // Withdraw Modal --------- - const { confirm } = Modal; - const dispatch = useDispatch(); - - const [dataloaded, setDataLoaded] = useState(false); - - setTimeout(() => { - setDataLoaded(true); - }, applications.length !== 0 ? 500: 3000); - - const showPromiseConfirm = (id:any) => { - confirm({ - title: 'Warning', - icon: , - content:
Are you sure you want to withdraw this application?
rl_id: {id}
, - okText: "Confirm Withdraw", - okButtonProps: {danger: true}, - onOk() { - let payload = { - "rl_id": id, - "staff_id": user, - "role_app_status": "withdrawn", - // "app_text": textBody, - } - dispatch(updateApplication(payload) as any) - .catch(() => console.log('Oops errors!')); - // dispatch(getApplicationsByStaffId(user) as any) - }, - onCancel() {}, - width: '30rem' - }); - }; - // ------------------------ - - const columns: ColumnsType = [ - { - title: 'Role Name', - dataIndex: 'role_name', - render: (role_name: any) => - - {role_name} - - , - sorter: (a, b) => a.role_name.length - b.role_name.length, - sortOrder: sortedInfo.columnKey === 'roleName' ? sortedInfo.order : null, - // ellipsis: true, - width: '44rem', - }, - { - title: 'Date Applied', - dataIndex: 'app_ts', - render: (date: any) => - - {new Date(date).toLocaleDateString()} - - , - sorter: (a, b) => new Date(a.app_ts).getTime() - new Date(b.app_ts).getTime(), - sortOrder: sortedInfo.columnKey === 'dateApplied' ? sortedInfo.order : null, - // ellipsis: true, - width: '44rem', - responsive: ['md'], - }, - { - title: 'Status', - filters: [ - {text: 'Applied', value: 'applied'}, - {text: 'Withdrawn', value: 'withdrawn'}, - ], - dataIndex: 'role_app_status', - render: (record: any) => - - - {record === "applied" ? 'Applied' : "Withdrawn"} - - - , - width: '6rem', - responsive: ['sm'], - }, - { - title: 'Actions', - // dataIndex: 'rl_id', - render: (record: any) => - - - { - record.role_app_status === "applied" ? - - showPromiseConfirm(record.rl_id)}> - - - - : null - } - - - - - - - - , - width: '6rem', - } - ]; - - const showTotal: PaginationProps['showTotal'] = (total) => `Total: ${total}`; - - return ( - - -

My Applications

- { - return { - key: i, - role_name: "", - app_ts: "", - role_app_status: "", - rl_id: "" - } - }) : applications - } - onChange={handleChange} - pagination={ - applications.length < 10 ? false : - { - total: applications.length, - defaultCurrent: 1, - pageSize: 10, - responsive: true, - showTotal: showTotal, - size: "small" - } - } - /> - - ); -} -MyApplications.propTypes = { - getApplicationsByStaffId: PropTypes.func.isRequired, - application: PropTypes.object.isRequired, - auth: PropTypes.object.isRequired -} - -const mapStateToProps = (state: any) => ({ - application: state.application, - auth: state.auth -}); - -export default connect(mapStateToProps, {getApplicationsByStaffId})(MyApplications); diff --git a/client/src/components/layout/ProfileSkills.tsx b/client/src/components/layout/ProfileSkills.tsx deleted file mode 100644 index 160b721..0000000 --- a/client/src/components/layout/ProfileSkills.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import {Card, Empty, Radio, RadioChangeEvent, Space, Spin, Tag} from "antd"; -import React, {useEffect, useState} from "react"; -import {getStaffSkillsByStaffId} from "../../actions/staffSkills"; -import PropTypes from 'prop-types'; -import {connect} from 'react-redux'; -import {CheckCircleOutlined, ClockCircleOutlined} from "@ant-design/icons"; - -const ProfileSkills = ({getStaffSkillsByStaffId, staffSkill: {staffSkill, loading}, auth: {user}}: any) => { - useEffect(() => { - if (user) { - getStaffSkillsByStaffId(user); - } - }, [getStaffSkillsByStaffId, user]); - - const [skillState, setSkillState] = useState("all"); - - const selectChange = (e: RadioChangeEvent) => { - setSkillState(e.target.value); - } - - const color = (status: String) => { - if (status === "active") { - return "green"; - } else if (status === "in-progress") { - return "gold"; - } else { - return "default"; - } - } - - const tagIcon = (status: String) => { - if (status === "active") { - return ; - } else if (status === "in-progress") { - return ; - } else { - return <>; - } - } - - const filteredSkills = staffSkill ? staffSkill.filter( - (skill: any) => skill.skill_status === "active" - ).filter( - (skill: any) => skill.ss_status === skillState || skillState === "all" - ) : true; - - return ( - - -

My Skills

- - All - Active - In Progress - Unverified - -
- {loading ? -
- -
- : filteredSkills.length !== 0 ? - - {filteredSkills.map((skill: any) => ( - - {skill.skill_name} - - ))} - - : -
- -
- } - - - ); -}; - -ProfileSkills.propTypes = { - getStaffSkillsByStaffId: PropTypes.func.isRequired, - staffSkill: PropTypes.object.isRequired, - auth: PropTypes.object.isRequired -} - -const mapStateToProps = (state: any) => ({ - staffSkill: state.staffSkill, - auth: state.auth -}); - -export default connect(mapStateToProps, {getStaffSkillsByStaffId})(ProfileSkills); \ No newline at end of file diff --git a/client/src/components/layout/RoleDescription.test.tsx b/client/src/components/layout/RoleDescription.test.tsx deleted file mode 100644 index fc79bdb..0000000 --- a/client/src/components/layout/RoleDescription.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import {render, screen, waitFor} from '@testing-library/react'; -import {store} from '../../mockStore'; -import {Provider} from 'react-redux'; -import {mockMatchMedia} from "../../setupTests"; -import {BrowserRouter, MemoryRouter} from 'react-router-dom' -import RoleDescription from './RoleDescription'; - - -jest.useFakeTimers(); - -describe('Role Description component tests', () => { - beforeAll(() => { - mockMatchMedia(); - }); - - beforeEach(() => { - render() - }); - - it('should initially display a loading state', () => { - const skeletonElements = screen.getByTestId('loading-icon'); - expect(skeletonElements).toBeInTheDocument(); - }); - - it('should load data after 2 seconds', async () => { - jest.advanceTimersByTime(2000); - await waitFor(() => { - // Ensure that the data is displayed after 2 seconds - expect(screen.getByText('Role Description')).toBeInTheDocument(); - }); - }); - - it('should remove loading state after loading data', async () => { - jest.advanceTimersByTime(2000); - await waitFor(() => { - // Ensure that the loading state is removed after data is loaded - const skeletonElements = screen.queryByTestId('loading-icon'); - expect(skeletonElements).toBeNull(); - }); - }); - -}); \ No newline at end of file diff --git a/client/src/components/layout/RoleDescription.tsx b/client/src/components/layout/RoleDescription.tsx deleted file mode 100644 index 92f1a91..0000000 --- a/client/src/components/layout/RoleDescription.tsx +++ /dev/null @@ -1,410 +0,0 @@ -import {Button, Col, Divider, Progress, Row, Space, Tag, Typography, Modal, Input, Skeleton,} from "antd"; -import {Container} from "react-bootstrap"; -import {AimOutlined, CheckCircleOutlined, ClockCircleOutlined, SolutionOutlined, LoadingOutlined} from "@ant-design/icons"; -import {rowGutterStyle} from "../../App"; -import React, {useEffect, useState} from "react"; -import {getRoleSkillsByRoleId} from "../../actions/roleSkills"; -import {getRoleListing} from "../../actions/roleListings"; -import {connect, useDispatch} from "react-redux"; -import PropTypes from "prop-types"; -import { getApplicationByStaffIdAndRLId, getApplicationsByStaffId, postApplication, updateApplication } from "../../actions/applications"; -import { getStaffSkillsByStaffId } from "../../actions/staffSkills"; -import PageNoExist from "./PageNoExist"; -import { useParams} from "react-router-dom"; - -const {Title} = Typography; - -const color = (status: String) => { - if (status === "active") { - return "green"; - } else if (status === "in-progress") { - return "gold"; - } else { - return "default"; - } -} - -const tagIcon = (status: String) => { - if (status === "active") { - return ; - } else if (status === "in-progress") { - return ; - } else { - return <>; - } -} - -export const RoleDescription = ({ - getRoleListing, - roleListing: {roleListing, loading, error}, - roleSkill: {roleSkills}, - getRoleSkillsByRoleId, - getStaffSkillsByStaffId, - staffSkill: {staffSkill}, - auth: {user, isHR}, - getApplicationByStaffIdAndRLId, - application: {applications, application,} - }: any) => { - - const {rl_id} = useParams(); - useEffect(() => { - getRoleListing(rl_id); - getRoleSkillsByRoleId(rl_id); - getApplicationByStaffIdAndRLId(Number(rl_id)) - if (user) { - getStaffSkillsByStaffId(user); - } - }, [getRoleListing]); - - useEffect(() => { - // console.log(rl_id) - getApplicationByStaffIdAndRLId(Number(rl_id)); - }, [applications]); - - useEffect(() => { - checkIfApplied(); - }, [application]); - - const dispatch = useDispatch(); - - const [dataloaded, setDataLoaded] = useState(false); - - setTimeout(() => { - setDataLoaded(true); - }, 2000); - - // onclick function that uses postapplication action when button is clicked which sends rl_id, staff_id, status from both the role listing and the staff as payload - // let isWithdrawn = false; - const [isApplyModalOpen, setIsApplyModalOpen] = useState(false); - const [buttonDisabled, setButtonDisabled] = useState(false); - const [isWithdrawModalOpen, setisWithdrawModalOpen] = useState(false); - const [confirmLoading, setConfirmLoading] = useState(false); - const [textBody, setTextBody] = useState(""); - const [isApplied, setIsApplied] = useState(!(application == null || application.length === 0 )); - - - const checkIfApplied = () => { - // console.log("isApplied: " + isApplied) - if (application == null || application.length === 0) { - setIsApplied(false); - } else { - // console.log("status is withdrawn: ") - // console.log(application[0].role_app_status === "withdrawn") - if (application[0].role_app_status === "withdrawn") { - // isWithdrawn = true - // console.log("button disabled: " + buttonDisabled) - setIsApplied(true); - setButtonDisabled(true) - // console.log("button disabled (after): " + buttonDisabled) - } else { - setIsApplied(true); - setButtonDisabled(false) - - } - } - } - - // console.log("outside check"+buttonDisabled) - - const showModal = () => { - setIsApplyModalOpen(true); - }; - - - const handleOk = () => { - // console.log("clicked") - // console.log(application) - - if (application == null || application.length === 0) { - let payload = { - "rl_id": roleListing.rl_id, - "staff_id": user, - "role_app_status": "applied", - "app_text": textBody, - } - // console.log(payload) - dispatch(postApplication(payload) as any) - dispatch(getApplicationsByStaffId(user) as any) - - setConfirmLoading(true); - setTimeout(() => { - setIsApplyModalOpen(false); - setConfirmLoading(false); - }, 2000); - } - }; - - - const handleCancel = () => { - setIsApplyModalOpen(false); - }; - - const handleWithdrawOk = () => { - - if (application[0].role_app_status === "applied") { - let payload = { - "rl_id": roleListing.rl_id, - "staff_id": user, - "role_app_status": "withdrawn", - // "app_text": textBody, - } - dispatch(updateApplication(payload) as any) - dispatch(getApplicationsByStaffId(user) as any) - - - setConfirmLoading(true); - setTimeout(() => { - setisWithdrawModalOpen(false); - setConfirmLoading(false); - }, 2000); - - setButtonDisabled(true); - - } - }; - - - const handleWithdrawCancel = () => { - setisWithdrawModalOpen(false); - }; - - const handleWithdraw = () => { - setisWithdrawModalOpen(true); - - - // setIsApplied(false); - } - - /* -Show apply when: -- Staff has not applied for the role - - getApplicationByStaffIdAndRLId returns empty array / null -- Staff has withdrawn their application - - getApplicationByStaffIdAndRLId returns an array with a status of "withdrawn" - -Show withdraw when: -- Staff has applied for the role - - getApplicationByStaffIdAndRLId returns an array with a status of "applied" -*/ - useEffect(() => { - getApplicationsByStaffId(user); - }, [handleOk, handleWithdrawOk]); - - const { TextArea } = Input; - - const onCharChange = (e: React.ChangeEvent) => { - setTextBody(e.target.value); - }; - - // const [missingSkills, setMissingSkills] = useState([] as any); - - // const missingSkills = () => { - // let missingSkills = []; - // for (let i = 0; i < roleSkills.length; i++) { - // for (let j = 0; j < staffSkill.length; j++) { - // if (roleSkills[i].skill_id === staffSkill[j].skill_id) { - // break; - // } else if (j === staffSkill.length - 1) { - // missingSkills.push(roleSkills[i]); - // } - // } - // } - // console.log(missingSkills); - // return missingSkills; - // }; - - const missingSkills = roleSkills.filter((roleSkill: any) => { - for (let i = 0; i < staffSkill.length; i++) { - if (roleSkill.skill_id === staffSkill[i].skill_id) { - return false; - } - } - return true; - }); - - return error.action === "getRoleListing" ? ( - - ) : ( - - - - - - {roleListing ? -
-

{roleListing.role_name}

-

Department: {roleListing.department}

-
: <> - } - - - - - {/* {isApplied ? ( - - ) : ( - - )} */} - - { !dataloaded ? - - : - isApplied ? ( - buttonDisabled ? ( - - ) : ( - - ) - ) : ( - - ) - } - - - -

Why are you suitable for this role?

-