Ignore:
Timestamp:
02/14/22 01:41:41 (2 years ago)
Author:
Tasevski2 <39170279+Tasevski2@…>
Branches:
master
Children:
747e0ab
Parents:
e8b1076
Message:

Push before video

File:
1 edited

Legend:

Unmodified
Added
Removed

  • sources/client/src/components/admin/EmployeesTable/index.js

    re8b1076 rbc20307  
     1import { useEffect } from 'react';
    12import { useHistory } from 'react-router';
    23
    34import {
    4   TableContainer,
    5   TableHeaderWrapper,
    6   TableTitle,
    7   Table,
    8   TableHead,
    9   TableRow,
    10   TableBody,
    11   TableCell,
    12   ButtonTableCell,
    13   ToggleAccoutStatusButton,
    14   CreateEmployeeButton,
    15   AddIcon,
    16   SearchField,
    17   IdentityIcon,
     5    TableContainer,
     6    TableHeaderWrapper,
     7    TableTitle,
     8    Table,
     9    TableHead,
     10    TableRow,
     11    TableBody,
     12    TableCell,
     13    ButtonTableCell,
     14    ToggleAccoutStatusButton,
     15    CreateEmployeeButton,
     16    AddIcon,
     17    SearchField,
     18    IdentityIcon,
    1819} from './styles';
    1920
    2021import InputAdornment from '@mui/material/InputAdornment';
     22import DropdownViewer from '../../DropdownViewer';
    2123
    2224import { employeeStatus, accountStatus } from '../../../config/enums';
     25import useGetData from '../../../hooks/useGetData';
     26import useToggleAccountStatus from '../../../hooks/useToggleAccountStatus';
     27import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
    2328
    24 import { employees } from './mockData';
     29// import { employees } from './mockData';
    2530import { useState } from 'react';
    2631
    2732const EmployeesTable = () => {
    28   let history = useHistory();
    29   const [filteredEmployees, setFilteredEmployees] = useState(employees);
    30   const [search, setSearch] = useState('');
     33    let history = useHistory();
     34    const { toggleAccountStatus, isLoading: isLoadingAccountStatus } =
     35        useToggleAccountStatus();
     36    const { data: employees, isLoading: isLoadingEmployees } = useGetData({
     37        url: `/vraboten`,
     38    });
     39    const [filteredEmployees, setFilteredEmployees] = useState([]);
     40    const [search, setSearch] = useState('');
     41    const onRowClick = (workerId) => {
     42        history.push(`/employees/${workerId}`);
     43    };
     44    const changeAccoutStatusOnEmployee = ({ workerId }) => {
     45        const emp = filteredEmployees.find((e) => e.workerId === workerId);
     46        emp.accountNonLocked = !emp.accountNonLocked;
     47    };
     48    const onAccountStatusClick = (event, workerId) => {
     49        event.stopPropagation();
     50        toggleAccountStatus({ workerId, changeAccoutStatusOnEmployee });
     51    };
    3152
    32   const onRowClick = (id) => {
    33     history.push(`/employees/${id}`);
    34   };
     53    const onChangeSearch = (e) => {
     54        let newSearchValue = e.target.value;
     55        setSearch(newSearchValue);
     56        const filteredData = employees.filter((employee) =>
     57            employee.firstName
     58                .concat(` ${employee.lastName}`)
     59                .toLowerCase()
     60                .includes(newSearchValue.trim().toLowerCase())
     61        );
    3562
    36   const onAccountStatusClick = (event, id) => {
    37     event.stopPropagation();
    38     console.log(`Disable or activate user acc with id: ${id}`);
    39   };
     63        setFilteredEmployees(filteredData);
     64    };
    4065
    41   const onChangeSearch = (e) => {
    42     let newSearchValue = e.target.value;
    43     setSearch(newSearchValue);
    44     const filteredData = employees.filter((employee) =>
    45       employee.firstName
    46         .concat(` ${employee.lastName}`)
    47         .toLowerCase()
    48         .includes(newSearchValue.trim().toLowerCase())
     66    useEffect(() => {
     67        setFilteredEmployees(employees);
     68    }, [employees]);
     69
     70    return (
     71        !isLoadingEmployees && (
     72            <TableContainer>
     73                <TableHeaderWrapper>
     74                    {isLoadingAccountStatus ? (
     75                        <AbsoluteLoader
     76                            containerStyle={{
     77                                position: 'absolute',
     78                                left: '65%',
     79                                width: '42px',
     80                                height: '42px',
     81                            }}
     82                        />
     83                    ) : null}
     84                    <TableTitle variant='h5'>Вработени</TableTitle>
     85                    <SearchField
     86                        value={search}
     87                        onChange={(e) => onChangeSearch(e)}
     88                        placeholder='Пребарај...'
     89                        InputProps={{
     90                            startAdornment: (
     91                                <InputAdornment position='start'>
     92                                    <IdentityIcon />
     93                                </InputAdornment>
     94                            ),
     95                        }}
     96                    />
     97                    <CreateEmployeeButton
     98                        onClick={() => history.push('/employees/create')}
     99                    >
     100                        <AddIcon />
     101                        Додади вработен
     102                    </CreateEmployeeButton>
     103                </TableHeaderWrapper>
     104                <Table aria-label='simple table'>
     105                    <TableHead>
     106                        <TableRow>
     107                            <TableCell align='left'>Емаил</TableCell>
     108                            <TableCell align='center'>Име и Презиме</TableCell>
     109                            <TableCell align='center'>Зона</TableCell>
     110                            <TableCell align='center'>Телефон</TableCell>
     111                            <TableCell align='center'>Статус</TableCell>
     112                            <TableCell align='center'>Акаунт</TableCell>
     113                        </TableRow>
     114                    </TableHead>
     115                    <TableBody>
     116                        {filteredEmployees.map((employeeData) => (
     117                            <TableRow
     118                                key={employeeData.workerId}
     119                                onClick={() =>
     120                                    onRowClick(employeeData.workerId)
     121                                }
     122                            >
     123                                <TableCell align='left'>
     124                                    {employeeData.email}
     125                                </TableCell>
     126                                <TableCell align='center'>
     127                                    {employeeData.firstName}{' '}
     128                                    {employeeData.lastName}
     129                                </TableCell>
     130                                <TableCell
     131                                    align='center'
     132                                    style={{ padding: 0, width: '200px' }}
     133                                >
     134                                    <DropdownViewer
     135                                        data={employeeData.parkingZones.map(
     136                                            (z) => z.pzName
     137                                        )} // TODO DELETE - after backend fix
     138                                        width='200px'
     139                                    />
     140                                </TableCell>
     141                                <TableCell align='center'>
     142                                    {employeeData.mobile}
     143                                </TableCell>
     144                                <TableCell align='center'>
     145                                    {employeeStatus[employeeData.status]}
     146                                </TableCell>
     147                                <ButtonTableCell align='center'>
     148                                    <ToggleAccoutStatusButton
     149                                        onClick={(event) =>
     150                                            onAccountStatusClick(
     151                                                event,
     152                                                employeeData.workerId
     153                                            )
     154                                        }
     155                                        $enabled={employeeData.accountNonLocked}
     156                                    >
     157                                        {/* $ added because https://styled-components.com/docs/api#transient-props*/}
     158                                        {employeeData.accountNonLocked
     159                                            ? accountStatus.enabled
     160                                            : accountStatus.disabled}
     161                                    </ToggleAccoutStatusButton>
     162                                </ButtonTableCell>
     163                            </TableRow>
     164                        ))}
     165                    </TableBody>
     166                </Table>
     167            </TableContainer>
     168        )
    49169    );
    50 
    51     setFilteredEmployees(filteredData);
    52   };
    53 
    54   return (
    55     <TableContainer>
    56       <TableHeaderWrapper>
    57         <TableTitle variant='h5'>Вработени</TableTitle>
    58         <SearchField
    59           value={search}
    60           onChange={(e) => onChangeSearch(e)}
    61           placeholder='Пребарај...'
    62           InputProps={{
    63             startAdornment: (
    64               <InputAdornment position='start'>
    65                 <IdentityIcon />
    66               </InputAdornment>
    67             ),
    68           }}
    69         />
    70         <CreateEmployeeButton onClick={() => history.push('/employees/create')}>
    71           <AddIcon />
    72           Додади вработен
    73         </CreateEmployeeButton>
    74       </TableHeaderWrapper>
    75       <Table aria-label='simple table'>
    76         <TableHead>
    77           <TableRow>
    78             <TableCell align='left'>Емаил</TableCell>
    79             <TableCell align='center'>Име и Презиме</TableCell>
    80             <TableCell align='center'>Зона</TableCell>
    81             <TableCell align='center'>Телефон</TableCell>
    82             <TableCell align='center'>Статус</TableCell>
    83             <TableCell align='center'>Акаунт</TableCell>
    84           </TableRow>
    85         </TableHead>
    86         <TableBody>
    87           {filteredEmployees.map((employeeData) => (
    88             <TableRow
    89               key={employeeData.id}
    90               onClick={() => onRowClick(employeeData.id)}
    91             >
    92               <TableCell align='left'>{employeeData.email}</TableCell>
    93               <TableCell align='center'>
    94                 {employeeData.firstName} {employeeData.lastName}
    95               </TableCell>
    96               <TableCell align='center'>{employeeData.zone}</TableCell>
    97               <TableCell align='center'>{employeeData.phoneNumber}</TableCell>
    98               <TableCell align='center'>
    99                 {employeeStatus[employeeData.status]}
    100               </TableCell>
    101               <ButtonTableCell align='center'>
    102                 <ToggleAccoutStatusButton
    103                   onClick={(event) =>
    104                     onAccountStatusClick(event, employeeData.id)
    105                   }
    106                   $enabled={employeeData.accountActive}
    107                 >
    108                   {/* $ added because https://styled-components.com/docs/api#transient-props*/}
    109                   {employeeData.accountActive
    110                     ? accountStatus.enabled
    111                     : accountStatus.disabled}
    112                 </ToggleAccoutStatusButton>
    113               </ButtonTableCell>
    114             </TableRow>
    115           ))}
    116         </TableBody>
    117       </Table>
    118     </TableContainer>
    119   );
    120170};
    121171
Note: See TracChangeset for help on using the changeset viewer.