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

Location:
sources/client/src/components/admin/EmployeeCreate
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    re8b1076 rbc20307  
    44
    55import {
    6   EmployeeEditWrapper,
    7   Title,
    8   RowWrapper,
    9   LabelAndInputWrapper,
    10   Label,
    11   StandardInputField,
    12   Dropdown,
    13   DropdownOption,
    14   SwitchRowWrapper,
    15   SwitchTitle,
    16   SwitchLabelAndInputWrapper,
    17   AccountSwitch,
    18   BackButton,
    19   SaveChangesButton,
    20   VisibilityIcon,
    21   VisibilityOffIcon,
     6    EmployeeEditWrapper,
     7    Title,
     8    RowWrapper,
     9    LabelAndInputWrapper,
     10    Label,
     11    StandardInputField,
     12    Dropdown,
     13    DropdownOption,
     14    SwitchRowWrapper,
     15    SwitchTitle,
     16    SwitchLabelAndInputWrapper,
     17    AccountSwitch,
     18    BackButton,
     19    SaveChangesButton,
     20    VisibilityIcon,
     21    VisibilityOffIcon,
    2222} from './styles';
    2323
    2424import IconButton from '@mui/material/IconButton';
     25import Checkbox from '@mui/material/Checkbox';
     26import ListItemText from '@mui/material/ListItemText';
     27import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
    2528
    2629import { employeeStatus } from '../../../config/enums';
     30import useGetData from '../../../hooks/useGetData';
     31import useCreateEmployee from '../../../hooks/useCreateEmployee';
    2732
    2833import { defaultUser } from '../../../config/defaultUser';
    2934
     35const MenuProps = {
     36    PaperProps: {
     37        style: {
     38            maxHeight: 220,
     39        },
     40    },
     41};
     42
    3043const EmployeeCreate = () => {
    31   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
    32   let history = useHistory();
    33 
    34   const { data: employeeEditableData, onFormChange: setEmployeeEditableData } =
    35     useForm({ ...defaultUser, confirmPassword: defaultUser.password });
    36   const [accStatus, setAccStatus] = useState(defaultUser.accountActive);
    37 
    38   const zoneOptions = [
    39     {
    40       text: 'Nitu edna zona',
    41       value: 'none',
    42     },
    43     {
    44       text: 'Zona 1',
    45       value: 'zone1',
    46     },
    47     {
    48       text: 'Zona 2',
    49       value: 'zone2',
    50     },
    51     {
    52       text: 'Zona 3',
    53       value: 'zone3',
    54     },
    55     {
    56       text: 'Zona 4',
    57       value: 'zone4',
    58     },
    59     {
    60       text: 'Zona 5',
    61       value: 'zone5',
    62     },
    63   ];
    64 
    65   const statusOptions = Object.keys(employeeStatus).map((key) => {
    66     return {
    67       text: employeeStatus[key],
    68       value: key,
     44    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
     45    let history = useHistory();
     46    const { data: zoneOptions, isLoading: isLoadingZonesData } = useGetData({
     47        url: `/parkingZone/parkingZoneNames`,
     48    });
     49    const { createEmployee } = useCreateEmployee();
     50    const {
     51        data: employeeEditableData,
     52        onFormChange: setEmployeeEditableData,
     53    } = useForm({ ...defaultUser });
     54    const [accStatus, setAccStatus] = useState(defaultUser.locked);
     55    const {
     56        data: { confirmPassword },
     57        onFormChange: setConfirmPassword,
     58    } = useForm({
     59        confirmPassword: defaultUser.password,
     60    });
     61    const [zones, setZones] = useState(defaultUser.parkingZones); // TODO RENAME ZONE TO ZONES
     62    console.log(zones);
     63    const statusOptions = Object.keys(employeeStatus).map((key) => {
     64        return {
     65            text: employeeStatus[key],
     66            value: key,
     67        };
     68    });
     69
     70    const onCreateEmployee = () => {
     71        if (zones.length === 1 && zones[0] === 'NONE') {
     72            zones.shift();
     73        }
     74        console.log(`Confirm password: ${confirmPassword}`);
     75        const changedEmployee = {
     76            ...employeeEditableData,
     77            locked: accStatus,
     78            parkingZones: zones,
     79            confirmPass: confirmPassword,
     80        };
     81        createEmployee({ employee: changedEmployee });
    6982    };
    70   });
    71 
    72   const onCreateEmployee = () => {
    73     const changedEmployee = {
    74       ...employeeEditableData,
    75       accountActive: accStatus,
     83    const handleZonesChange = (event) => {
     84        const {
     85            target: { value },
     86        } = event;
     87        if (value.length > 1 && value[0] === 'NONE') {
     88            value.shift();
     89        }
     90        setZones(
     91            typeof value === 'string'
     92                ? value.split(', ')
     93                : value.length === 0
     94                ? ['NONE']
     95                : value
     96        );
    7697    };
    77     console.log('Created employee: ', changedEmployee);
    78   };
    79 
    80   return (
    81     <EmployeeEditWrapper>
    82       <Title variant='h5'>Создади вработен</Title>
    83       <RowWrapper>
    84         <LabelAndInputWrapper>
    85           <Label>Име</Label>
    86           <StandardInputField
    87             value={employeeEditableData.firstName}
    88             name='firstName'
    89             onChange={setEmployeeEditableData}
    90           />
    91         </LabelAndInputWrapper>
    92         <LabelAndInputWrapper>
    93           <Label>Презиме</Label>
    94           <StandardInputField
    95             value={employeeEditableData.lastName}
    96             name='lastName'
    97             onChange={setEmployeeEditableData}
    98           />
    99         </LabelAndInputWrapper>
    100       </RowWrapper>
    101       <RowWrapper>
    102         <LabelAndInputWrapper>
    103           <Label>Емаил</Label>
    104           <StandardInputField
    105             value={employeeEditableData.email}
    106             name='email'
    107             type='email'
    108             onChange={setEmployeeEditableData}
    109           />
    110         </LabelAndInputWrapper>
    111         <LabelAndInputWrapper>
    112           <Label>Телефон</Label>
    113           <StandardInputField
    114             value={employeeEditableData.phoneNumber}
    115             name='phoneNumber'
    116             onChange={setEmployeeEditableData}
    117           />
    118         </LabelAndInputWrapper>
    119       </RowWrapper>
    120       <RowWrapper>
    121         <LabelAndInputWrapper>
    122           <Label>Лозинка</Label>
    123           <StandardInputField
    124             value={employeeEditableData.password}
    125             name='password'
    126             type={isPasswordVisible ? 'text' : 'password'}
    127             $autoComplete={true}
    128             onChange={setEmployeeEditableData}
    129           />
    130         </LabelAndInputWrapper>
    131         <IconButton
    132           sx={{ marginTop: '23px' }}
    133           onClick={() => setIsPasswordVisible(!isPasswordVisible)}
    134         >
    135           {isPasswordVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
    136         </IconButton>
    137         <LabelAndInputWrapper>
    138           <Label>Потврди лозинка</Label>
    139           <StandardInputField
    140             value={employeeEditableData.confirmPassword}
    141             name='confirmPassword'
    142             type={isPasswordVisible ? 'text' : 'password'}
    143             onChange={setEmployeeEditableData}
    144           />
    145         </LabelAndInputWrapper>
    146       </RowWrapper>
    147       <RowWrapper>
    148         <LabelAndInputWrapper>
    149           <Label>Одговорен за</Label>
    150           <Dropdown
    151             value={employeeEditableData.zone}
    152             name='zone'
    153             onChange={setEmployeeEditableData}
    154           >
    155             {zoneOptions.map((option) => (
    156               <DropdownOption value={option.value} key={option.value}>
    157                 {option.text}
    158               </DropdownOption>
    159             ))}
    160           </Dropdown>
    161         </LabelAndInputWrapper>
    162         <LabelAndInputWrapper>
    163           <Label>Статус</Label>
    164           <Dropdown
    165             value={employeeEditableData.status}
    166             name='status'
    167             onChange={setEmployeeEditableData}
    168           >
    169             {statusOptions.map((option) => (
    170               <DropdownOption value={option.value} key={option.value}>
    171                 {option.text}
    172               </DropdownOption>
    173             ))}
    174           </Dropdown>
    175         </LabelAndInputWrapper>
    176       </RowWrapper>
    177       <SwitchRowWrapper>
    178         <SwitchTitle>Акаунт</SwitchTitle>
    179         <SwitchLabelAndInputWrapper>
    180           <Label>Активен:</Label>
    181           <AccountSwitch
    182             checked={accStatus}
    183             value={accStatus}
    184             name='accountActive'
    185             onClick={() => setAccStatus(!accStatus)}
    186           />
    187         </SwitchLabelAndInputWrapper>
    188       </SwitchRowWrapper>
    189       <RowWrapper>
    190         <BackButton onClick={() => history.push('/employees')}>
    191           Врати се назад
    192         </BackButton>
    193         <SaveChangesButton onClick={onCreateEmployee}>
    194           Создади вработен
    195         </SaveChangesButton>
    196       </RowWrapper>
    197     </EmployeeEditWrapper>
    198   );
     98    return (
     99        <EmployeeEditWrapper>
     100            <Title variant='h5'>Создади вработен</Title>
     101            <RowWrapper>
     102                <LabelAndInputWrapper>
     103                    <Label>Име</Label>
     104                    <StandardInputField
     105                        value={employeeEditableData.firstName}
     106                        name='firstName'
     107                        onChange={setEmployeeEditableData}
     108                    />
     109                </LabelAndInputWrapper>
     110                <LabelAndInputWrapper>
     111                    <Label>Презиме</Label>
     112                    <StandardInputField
     113                        value={employeeEditableData.lastName}
     114                        name='lastName'
     115                        onChange={setEmployeeEditableData}
     116                    />
     117                </LabelAndInputWrapper>
     118            </RowWrapper>
     119            <RowWrapper>
     120                <LabelAndInputWrapper>
     121                    <Label>Емаил</Label>
     122                    <StandardInputField
     123                        value={employeeEditableData.email}
     124                        name='email'
     125                        type='email'
     126                        onChange={setEmployeeEditableData}
     127                    />
     128                </LabelAndInputWrapper>
     129                <LabelAndInputWrapper>
     130                    <Label>Телефон</Label>
     131                    <StandardInputField
     132                        value={employeeEditableData.mobile}
     133                        name='mobile'
     134                        onChange={setEmployeeEditableData}
     135                    />
     136                </LabelAndInputWrapper>
     137            </RowWrapper>
     138            <RowWrapper>
     139                <LabelAndInputWrapper>
     140                    <Label>Лозинка</Label>
     141                    <StandardInputField
     142                        value={employeeEditableData.password}
     143                        name='password'
     144                        type={isPasswordVisible ? 'text' : 'password'}
     145                        $autoComplete={true}
     146                        onChange={setEmployeeEditableData}
     147                    />
     148                </LabelAndInputWrapper>
     149                <IconButton
     150                    sx={{ marginTop: '23px' }}
     151                    onClick={() => setIsPasswordVisible(!isPasswordVisible)}
     152                >
     153                    {isPasswordVisible ? (
     154                        <VisibilityIcon />
     155                    ) : (
     156                        <VisibilityOffIcon />
     157                    )}
     158                </IconButton>
     159                <LabelAndInputWrapper>
     160                    <Label>Потврди лозинка</Label>
     161                    <StandardInputField
     162                        value={confirmPassword}
     163                        name='confirmPassword'
     164                        type={isPasswordVisible ? 'text' : 'password'}
     165                        onChange={setConfirmPassword}
     166                    />
     167                </LabelAndInputWrapper>
     168            </RowWrapper>
     169            <RowWrapper>
     170                {isLoadingZonesData ? (
     171                    <AbsoluteLoader
     172                        containerStyle={{
     173                            position: 'absolute',
     174                            left: '310px',
     175                            bottom: '5px',
     176                            width: '40px',
     177                            height: '40px',
     178                        }}
     179                    />
     180                ) : null}
     181                <LabelAndInputWrapper>
     182                    <Label>Одговорен за</Label>
     183                    <Dropdown
     184                        multiple
     185                        value={zones}
     186                        onChange={handleZonesChange}
     187                        renderValue={(selected) => {
     188                            return selected.join(', ');
     189                        }}
     190                        MenuProps={MenuProps}
     191                    >
     192                        {!isLoadingZonesData &&
     193                            zoneOptions.map((zone) => (
     194                                <DropdownOption value={zone} key={zone}>
     195                                    <Checkbox
     196                                        checked={zones.indexOf(zone) > -1}
     197                                    />
     198                                    <ListItemText primary={zone} />
     199                                </DropdownOption>
     200                            ))}
     201                    </Dropdown>
     202                </LabelAndInputWrapper>
     203                <LabelAndInputWrapper>
     204                    <Label>Статус</Label>
     205                    <Dropdown
     206                        value={employeeEditableData.status}
     207                        name='status'
     208                        onChange={setEmployeeEditableData}
     209                        MenuProps={MenuProps}
     210                    >
     211                        {statusOptions.map((option) => (
     212                            <DropdownOption
     213                                value={option.value}
     214                                key={option.value}
     215                            >
     216                                {option.text}
     217                            </DropdownOption>
     218                        ))}
     219                    </Dropdown>
     220                </LabelAndInputWrapper>
     221            </RowWrapper>
     222            <SwitchRowWrapper>
     223                <SwitchTitle>Акаунт</SwitchTitle>
     224                <SwitchLabelAndInputWrapper>
     225                    <Label>Активен:</Label>
     226                    <AccountSwitch
     227                        checked={!accStatus}
     228                        value={accStatus}
     229                        name='locked'
     230                        onClick={() => setAccStatus(!accStatus)}
     231                    />
     232                </SwitchLabelAndInputWrapper>
     233            </SwitchRowWrapper>
     234            <RowWrapper>
     235                <BackButton onClick={() => history.push('/employees')}>
     236                    Врати се назад
     237                </BackButton>
     238                <SaveChangesButton onClick={onCreateEmployee}>
     239                    Создади вработен
     240                </SaveChangesButton>
     241            </RowWrapper>
     242        </EmployeeEditWrapper>
     243    );
    199244};
    200245

  • sources/client/src/components/admin/EmployeeCreate/styles.js

    re8b1076 rbc20307  
    1 import styled from "styled-components";
    2 import { Button, InputLabel, MenuItem, Select, Switch, TextField, Typography } from "@mui/material";
     1import styled from 'styled-components';
     2import {
     3  Button,
     4  InputLabel,
     5  MenuItem,
     6  Select,
     7  Switch,
     8  TextField,
     9  Typography,
     10} from '@mui/material';
    311import VIcon from '@mui/icons-material/Visibility';
    412import VOffIcon from '@mui/icons-material/VisibilityOff';
    513
    614export const EmployeeEditWrapper = styled.div`
    7     display: flex;
    8     flex-direction: column;
    9     max-width: 800px;
    10     border: 1px solid whiteSmoke;
    11     border-radius: 10px;
    12     padding: 10px 20px;
    13     margin-top: 20px;
    14     margin-left: 30px;
    15     background-color: white;
    16     box-shadow: 15px 15px 10px ${props => props.theme.palette.background.shadow};
     15  display: flex;
     16  flex-direction: column;
     17  max-width: 800px;
     18  border: 1px solid whiteSmoke;
     19  border-radius: 10px;
     20  padding: 10px 20px;
     21  margin-top: 20px;
     22  margin-left: 30px;
     23  background-color: white;
     24  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
    1725`;
    1826
    19 export const Title = styled(Typography).attrs({
    20 
    21 })`
    22     border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    23     padding-bottom: 10px;
    24     margin-bottom: 15px;
     27export const Title = styled(Typography).attrs({})`
     28  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
     29  padding-bottom: 10px;
     30  margin-bottom: 15px;
    2531`;
    2632
    2733export const RowWrapper = styled.div`
    28     display: flex;
    29     flex-direction: row;
    30     justify-content: space-between;
    31     margin-bottom: 25px;
     34  display: flex;
     35  flex-direction: row;
     36  justify-content: space-between;
     37  margin-bottom: 25px;
     38  position: relative;
    3239`;
    3340
    34 export const LabelAndInputWrapper = styled.div`
     41export const LabelAndInputWrapper = styled.div``;
    3542
    36 `;
     43export const Label = styled(InputLabel).attrs({})``;
    3744
    38 export const Label = styled(InputLabel).attrs({
    39 
    40 })``;
    41 
    42 export const StandardInputField = styled(TextField).attrs({
    43 
    44 })`
    45     width: 300px;
     45export const StandardInputField = styled(TextField).attrs({})`
     46  width: 300px;
    4647`;
    4748
    4849export const VisibilityIcon = styled(VIcon).attrs({
    49     sx: {
    50         fontSize: '2rem'
    51     }
     50  sx: {
     51    fontSize: '2rem',
     52  },
    5253})``;
    5354
    5455export const VisibilityOffIcon = styled(VOffIcon).attrs({
    55     sx: {
    56         fontSize: '2rem'
    57     }
     56  sx: {
     57    fontSize: '2rem',
     58  },
    5859})``;
    5960
    60 export const Dropdown = styled(Select).attrs({
    61 
    62 })`
    63     width: 300px;
     61export const Dropdown = styled(Select).attrs({})`
     62  width: 300px;
    6463`;
    6564
    66 export const DropdownOption = styled(MenuItem).attrs({
    67 
    68 })``;
     65export const DropdownOption = styled(MenuItem).attrs({})`
     66  > span {
     67    color: ${(props) => props.theme.palette.primary.main};
     68    svg {
     69      color: ${(props) => props.theme.palette.primary.main};
     70    }
     71  }
     72  > div > span {
     73    font-size: 1.3rem;
     74  }
     75`;
    6976
    7077export const SwitchRowWrapper = styled.div`
    71     text-align: center;
    72     margin-top: 10px;
    73     margin-bottom: 50px;
     78  text-align: center;
     79  margin-top: 10px;
     80  margin-bottom: 50px;
    7481`;
    7582
    7683export const SwitchTitle = styled.p`
    77     font-size: 18px;
    78     font-weight: 600;
    79     margin: 0;
    80     margin-bottom: 5px;
     84  font-size: 18px;
     85  font-weight: 600;
     86  margin: 0;
     87  margin-bottom: 5px;
    8188`;
    8289
    8390export const SwitchLabelAndInputWrapper = styled.div`
    84     display: flex;
    85     flex-direction: row;
    86     align-items: center;
    87     justify-content: center;
    88 
     91  display: flex;
     92  flex-direction: row;
     93  align-items: center;
     94  justify-content: center;
    8995`;
    9096
    91 export const AccountSwitch = styled(Switch).attrs(props => ({
    92 }))`
    93     .MuiSwitch-switchBase {
    94         color: red;
    95     }
    96     .MuiSwitch-track {
    97         background-color: red;
    98     }
    99     .MuiSwitch-switchBase.Mui-checked {
    100         color: ${props => props.theme.palette.primary.main};
    101     }
    102     .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
    103         background-color: ${props => props.theme.palette.primary.main};
    104     }
     97export const AccountSwitch = styled(Switch).attrs((props) => ({}))`
     98  .MuiSwitch-switchBase {
     99    color: red;
     100  }
     101  .MuiSwitch-track {
     102    background-color: red;
     103  }
     104  .MuiSwitch-switchBase.Mui-checked {
     105    color: ${(props) => props.theme.palette.primary.main};
     106  }
     107  .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
     108    background-color: ${(props) => props.theme.palette.primary.main};
     109  }
    105110`;
    106111
    107112export const BackButton = styled(Button).attrs({
    108     variant: 'outlined'
     113  variant: 'outlined',
    109114})`
    110     margin-right: 15px;
    111     :hover {
    112         border: 2px solid;
    113         font-weight: 600;
    114     }
     115  margin-right: 15px;
     116  :hover {
     117    border: 2px solid;
     118    font-weight: 600;
     119  }
    115120`;
    116121
    117 export const SaveChangesButton = styled(Button).attrs(props => ({
    118     variant: 'contained',
    119     sx: {
    120         backgroundColor: `${props.theme.palette.primary.main}`
    121     }
     122export const SaveChangesButton = styled(Button).attrs((props) => ({
     123  variant: 'contained',
     124  sx: {
     125    backgroundColor: `${props.theme.palette.primary.main}`,
     126  },
    122127}))`
    123     padding: 10px 16px;
    124     :hover {
    125         background-color: ${props => props.theme.palette.primary.dark}
    126     }
     128  padding: 10px 16px;
     129  :hover {
     130    background-color: ${(props) => props.theme.palette.primary.dark};
     131  }
    127132`;
Note: See TracChangeset for help on using the changeset viewer.