[bc20307] | 1 | import { useState } from 'react';
|
---|
| 2 | import {
|
---|
| 3 | Wrapper,
|
---|
| 4 | TitleAndDividerWrapper,
|
---|
| 5 | Title,
|
---|
| 6 | DividerUnderTitle,
|
---|
| 7 | TableWrapper,
|
---|
| 8 | Elipsis,
|
---|
| 9 | AddIcon,
|
---|
| 10 | DeleteIcon,
|
---|
| 11 | ModalContainer,
|
---|
| 12 | CloseIcon,
|
---|
| 13 | ModalCard,
|
---|
| 14 | ModalCardKeyAndValueWrapper,
|
---|
| 15 | ModalCardKey,
|
---|
| 16 | ModalCardValue,
|
---|
| 17 | AddIconCard,
|
---|
| 18 | ModalCardsContainer,
|
---|
| 19 | ModalKeyAndValueDivider,
|
---|
| 20 | ModalNoMoreEmplyees,
|
---|
| 21 | } from './styles';
|
---|
| 22 | import Modal from '@mui/material/Modal';
|
---|
| 23 | import Backdrop from '@mui/material/Backdrop';
|
---|
| 24 | import { IconButton, Slide } from '@mui/material';
|
---|
| 25 | import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
|
---|
| 26 |
|
---|
| 27 | const AddEmployeeCard = ({ workerId, email, firstName, lastName, handleChange }) => (
|
---|
| 28 | <ModalCard>
|
---|
| 29 | <IconButton
|
---|
| 30 | style={{
|
---|
| 31 | position: 'absolute',
|
---|
| 32 | right: -60,
|
---|
| 33 | }}
|
---|
| 34 | onClick={() =>
|
---|
| 35 | handleChange({
|
---|
| 36 | type: 'add',
|
---|
| 37 | person: { workerId, email, firstName, lastName },
|
---|
| 38 | })
|
---|
| 39 | }
|
---|
| 40 | >
|
---|
| 41 | <AddIconCard />
|
---|
| 42 | </IconButton>
|
---|
| 43 | <ModalCardKeyAndValueWrapper style={{ width: '250px' }}>
|
---|
| 44 | <ModalCardKey>Емаил:</ModalCardKey>
|
---|
| 45 | <ModalCardValue>{email}</ModalCardValue>
|
---|
| 46 | </ModalCardKeyAndValueWrapper>
|
---|
| 47 | <ModalKeyAndValueDivider />
|
---|
| 48 | <ModalCardKeyAndValueWrapper style={{ width: '130px' }}>
|
---|
| 49 | <ModalCardKey>Име:</ModalCardKey>
|
---|
| 50 | <ModalCardValue>{firstName}</ModalCardValue>
|
---|
| 51 | </ModalCardKeyAndValueWrapper>
|
---|
| 52 | <ModalKeyAndValueDivider />
|
---|
| 53 | <ModalCardKeyAndValueWrapper style={{ width: '130px' }}>
|
---|
| 54 | <ModalCardKey>Презиме:</ModalCardKey>
|
---|
| 55 | <ModalCardValue>{lastName}</ModalCardValue>
|
---|
| 56 | </ModalCardKeyAndValueWrapper>
|
---|
| 57 | </ModalCard>
|
---|
| 58 | );
|
---|
| 59 |
|
---|
| 60 | const ResponsiblePersonsSectorEdit = ({
|
---|
| 61 | responsiblePersons,
|
---|
| 62 | employeesDataModal,
|
---|
| 63 | handleChange,
|
---|
| 64 | isLoadingResponsiblePersonsData,
|
---|
| 65 | }) => {
|
---|
| 66 | const [isModalOpen, setModalOpen] = useState(false);
|
---|
| 67 | return (
|
---|
| 68 | <>
|
---|
| 69 | <Modal
|
---|
| 70 | open={isModalOpen}
|
---|
| 71 | closeAfterTransition
|
---|
| 72 | BackdropComponent={Backdrop}
|
---|
| 73 | BackdropProps={{
|
---|
| 74 | timeout: 500,
|
---|
| 75 | onClick: () => setModalOpen(false),
|
---|
| 76 | }}
|
---|
| 77 | style={{
|
---|
| 78 | display: 'flex',
|
---|
| 79 | alignItems: 'center',
|
---|
| 80 | justifyContent: 'center',
|
---|
| 81 | }}
|
---|
| 82 | >
|
---|
| 83 | <Slide in={isModalOpen}>
|
---|
| 84 | <ModalContainer>
|
---|
| 85 | <IconButton
|
---|
| 86 | style={{
|
---|
| 87 | marginLeft: 640,
|
---|
| 88 | }}
|
---|
| 89 | onClick={() => setModalOpen(false)}
|
---|
| 90 | >
|
---|
| 91 | <CloseIcon />
|
---|
| 92 | </IconButton>
|
---|
| 93 | <ModalCardsContainer>
|
---|
| 94 | {isLoadingResponsiblePersonsData ? (
|
---|
| 95 | <AbsoluteLoader
|
---|
| 96 | containerStyle={{
|
---|
| 97 | width: '200px',
|
---|
| 98 | height: '200px',
|
---|
| 99 | margin: 'auto',
|
---|
| 100 | marginTop: '30px',
|
---|
| 101 | }}
|
---|
| 102 | />
|
---|
| 103 | ) : (
|
---|
| 104 | <>
|
---|
| 105 | {employeesDataModal.length === 0 ? (
|
---|
| 106 | <ModalNoMoreEmplyees>
|
---|
| 107 | Нема Повеќе Вработени
|
---|
| 108 | </ModalNoMoreEmplyees>
|
---|
| 109 | ) : (
|
---|
| 110 | employeesDataModal.map((emp) => (
|
---|
| 111 | <AddEmployeeCard
|
---|
| 112 | {...emp}
|
---|
| 113 | key={emp.workerId}
|
---|
| 114 | handleChange={handleChange}
|
---|
| 115 | />
|
---|
| 116 | ))
|
---|
| 117 | )}
|
---|
| 118 | </>
|
---|
| 119 | )}
|
---|
| 120 | </ModalCardsContainer>
|
---|
| 121 | </ModalContainer>
|
---|
| 122 | </Slide>
|
---|
| 123 | </Modal>
|
---|
| 124 | <Wrapper>
|
---|
| 125 | <TitleAndDividerWrapper>
|
---|
| 126 | <Title>Одговорни Лица</Title>
|
---|
| 127 | <DividerUnderTitle />
|
---|
| 128 | </TitleAndDividerWrapper>
|
---|
| 129 | <TableWrapper>
|
---|
| 130 | <IconButton
|
---|
| 131 | style={{
|
---|
| 132 | position: 'absolute',
|
---|
| 133 | right: 5,
|
---|
| 134 | }}
|
---|
| 135 | onClick={() => setModalOpen(true)}
|
---|
| 136 | >
|
---|
| 137 | <AddIcon />
|
---|
| 138 | </IconButton>
|
---|
| 139 | <table>
|
---|
| 140 | <thead>
|
---|
| 141 | <tr>
|
---|
| 142 | <th></th>
|
---|
| 143 | <th>Име</th>
|
---|
| 144 | <th>Презиме</th>
|
---|
| 145 | <th>Повеќе</th>
|
---|
| 146 | </tr>
|
---|
| 147 | </thead>
|
---|
| 148 | <tbody>
|
---|
| 149 | {responsiblePersons.map((person, index) => {
|
---|
| 150 | return (
|
---|
| 151 | <tr key={index}>
|
---|
| 152 | <td>
|
---|
| 153 | <IconButton
|
---|
| 154 | onClick={() =>
|
---|
| 155 | handleChange({
|
---|
| 156 | type: 'delete',
|
---|
| 157 | person,
|
---|
| 158 | })
|
---|
| 159 | }
|
---|
| 160 | >
|
---|
| 161 | <DeleteIcon />
|
---|
| 162 | </IconButton>
|
---|
| 163 | </td>
|
---|
| 164 | <td>{person.firstName}</td>
|
---|
| 165 | <td>{person.lastName}</td>
|
---|
| 166 | <td>
|
---|
| 167 | <Elipsis
|
---|
| 168 | target='_blank'
|
---|
| 169 | to={`/employees/${person.id}`}
|
---|
| 170 | >
|
---|
| 171 | ...
|
---|
| 172 | </Elipsis>
|
---|
| 173 | </td>
|
---|
| 174 | </tr>
|
---|
| 175 | );
|
---|
| 176 | })}
|
---|
| 177 | </tbody>
|
---|
| 178 | </table>
|
---|
| 179 | </TableWrapper>
|
---|
| 180 | </Wrapper>
|
---|
| 181 | </>
|
---|
| 182 | );
|
---|
| 183 | };
|
---|
| 184 |
|
---|
| 185 | export default ResponsiblePersonsSectorEdit;
|
---|