Add styling of edit/add worker component inside drawer

package.json

@@ -49,6 +49,7 @@
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
+    "react-text-mask": "^5.4.3",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.1.0",

src/assets/styles/styles/custom/_dropdown.scss

@@ -12,7 +12,7 @@
   right: -10px;
   padding-bottom: 10px;
   padding-top: 25px;
-  max-width: 119px;
+  width: calc(100% - 20px);
 
   button {
     width: 100%;
@@ -33,6 +33,10 @@
   }
 }
 
+.dropdown-buttons-z-index {
+  z-index: 1300;
+}
+
 .display-main-button {
   position: relative;
   top: -43px;

src/assets/styles/styles/custom/_variables.module.scss

@@ -29,4 +29,6 @@
   fontWeightExtraBold: $font-weight-extra-bold;
 
   headingLetterSpacing: $heading-letter-spacing;
+
+  lineHeightXl: $line-height-xl;
 }

src/assets/styles/styles/custom/_variables.scss

@@ -89,6 +89,7 @@ $green: #2dce89 !default;
 $teal: #11cdef !default;
 $cyan: #2bffc6 !default;
 
+$line-height-xl: 1.75rem !default;
 $line-height-lg: 1.625rem !default;
 $line-height-sm: 1.5 !default;
 $line-height: 1.35em !default;

src/common-models/worker-info.model.ts

@@ -17,6 +17,22 @@ export class WorkerTypeHelper {
   }
 }
 
+export enum ContractType {
+  EMPLOYMENT_CONTRACT = "EMPLOYMENT_CONTRACT",
+  CIVIL_CONTRACT = "CIVIL_CONTRACT",
+}
+
+export class ContractTypeHelper {
+  static translate(type: ContractType): string {
+    switch (type) {
+      case ContractType.EMPLOYMENT_CONTRACT:
+        return "umowa o pracę";
+      case ContractType.CIVIL_CONTRACT:
+        return "umowa zlecenie";
+    }
+  }
+}
+
 export interface WorkersInfoModel {
   time: { [key: string]: number };
   type: { [workerName: string]: WorkerType };

src/components/common-components/drawer/drawer.component.tsx

@@ -10,6 +10,7 @@ import { MdClose } from "react-icons/md";
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import ScssVars from "../../../assets/styles/styles/custom/_variables.module.scss";
+import classNames from "classnames";
 
 const useStyles = makeStyles({
   drawer: {
@@ -21,6 +22,9 @@ const useStyles = makeStyles({
     paddingRight: 24,
     paddingBottom: 15,
   },
+  fullHeight: {
+    height: "100%",
+  },
   exitButton: {
     margin: "-7px -8px",
     marginTop: -15,
@@ -57,15 +61,19 @@ export default function Drawer(options: DrawerOptions): JSX.Element {
           <h1 className={classes.title}>{title}</h1>
         </Grid>
         <Grid item>
-          <IconButton className={classes.exitButton} onClick={(): void => setOpen(false)}>
+          <IconButton
+            className={classes.exitButton}
+            data-cy="exit-drawer"
+            onClick={(): void => setOpen(false)}
+          >
             <MdClose />
           </IconButton>
         </Grid>
       </Grid>
 
       <Divider />
 
-      <Box className={classes.drawerContentMargin}>{children}</Box>
+      <Box className={classNames(classes.drawerContentMargin, classes.fullHeight)}>{children}</Box>
     </MaterialDrawer>
   );
 }

src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx

@@ -40,7 +40,12 @@ export function DropdownButtons({
         {mainLabel}
         <ArrowDropDownIcon />
       </Button>
-      <Popper open={open} placement="bottom" anchorEl={anchorRef.current}>
+      <Popper
+        className="dropdown-buttons-z-index"
+        open={open}
+        placement="bottom"
+        anchorEl={anchorRef.current}
+      >
         <div
           className={`${
             variant === "outlined" ? "display-main-button-outlined" : "display-main-button"

src/components/common-components/text-mask-custom/text-mask-custom.component.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import MaskedInput from "react-text-mask";
+
+export interface TextMaskCustomProps {
+  inputRef: (ref: HTMLInputElement | null) => void;
+}
+
+export function TextMaskCustom(props: TextMaskCustomProps): JSX.Element {
+  const { inputRef, ...other } = props;
+
+  return (
+    <MaskedInput
+      {...other}
+      ref={(ref: { inputElement: HTMLInputElement }): void => {
+        inputRef(ref ? ref.inputElement : null);
+      }}
+      mask={[/[1-9]/, "/", /[1-9]/]}
+      showMask
+    />
+  );
+}

src/components/namestable/worker-edit.component.tsx

@@ -0,0 +1,163 @@
+import {
+  ContractType,
+  ContractTypeHelper,
+  WorkerInfoModel,
+  WorkerType,
+  WorkerTypeHelper,
+} from "../../common-models/worker-info.model";
+import React, { useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Grid, Input, TextField, Typography } from "@material-ui/core";
+import { DropdownButtons } from "../common-components/dropdown-buttons/dropdown-buttons.component";
+import { Button } from "../common-components";
+import ScssVars from "../../assets/styles/styles/custom/_variables.module.scss";
+import { TextMaskCustom } from "../common-components/text-mask-custom/text-mask-custom.component";
+import { StringHelper } from "../../helpers/string.helper";
+
+const useStyles = makeStyles({
+  container: {
+    height: "100%",
+  },
+  label: {
+    fontSize: ScssVars.fontSizeBase,
+    fontWeight: 700,
+    lineHeight: ScssVars.lineHeightXl,
+  },
+});
+
+export interface WorkerInfoExtendedInterface {
+  name: string;
+  workerType: WorkerType | undefined;
+  contractType: ContractType | undefined;
+  employmentTime: string;
+  civilTime: string;
+}
+
+export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element {
+  const classes = useStyles();
+
+  const [workerInfo, setWorkerInfo] = useState<WorkerInfoExtendedInterface>({
+    name: info.name,
+    workerType: info.type,
+    contractType: undefined,
+    employmentTime: " / ",
+    civilTime: "0",
+  });
+
+  function handleUpdate(event): void {
+    const { name, value } = event.target;
+    updateWorkerInfo(name, value);
+  }
+
+  function updateWorkerInfo(key, value): void {
+    setWorkerInfo({ ...workerInfo, [key]: value });
+  }
+
+  const positionOptions = Object.keys(WorkerType).map((workerTypeName) => {
+    const workerType = WorkerType[workerTypeName];
+    return {
+      label: translateAndCapitalizeWorkerType(workerType),
+      action: (): void => updateWorkerInfo("workerType", workerType),
+    };
+  });
+
+  const contractOptions = Object.keys(ContractType).map((contractTypeName) => {
+    const contractType = ContractType[contractTypeName];
+    return {
+      label: translateAndCapitalizeContractType(contractType),
+      action: (): void => updateWorkerInfo("contractType", contractType),
+    };
+  });
+
+  return (
+    <Grid container className={classes.container} direction="column" justify="space-between">
+      <Grid item>
+        <Grid container direction="column" spacing={5}>
+          <Grid item xs={9}>
+            <Typography className={classes.label}>Imię i nazwisko</Typography>
+            <TextField
+              fullWidth
+              name="name"
+              data-cy="name"
+              value={workerInfo.name}
+              onChange={handleUpdate}
+              color="primary"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <Typography className={classes.label}>Stanowisko</Typography>
+            <DropdownButtons
+              data-cy="position"
+              buttons={positionOptions}
+              mainLabel={
+                workerInfo.workerType
+                  ? translateAndCapitalizeWorkerType(workerInfo.workerType)
+                  : "Stanowisko"
+              }
+              variant="outlined"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <Typography className={classes.label}>Wymiar pracy</Typography>
+            <DropdownButtons
+              data-cy="contract"
+              buttons={contractOptions}
+              mainLabel={
+                workerInfo.contractType
+                  ? translateAndCapitalizeContractType(workerInfo.contractType)
+                  : "Typ umowy"
+              }
+              variant="outlined"
+            />
+          </Grid>
+          {workerInfo.contractType === ContractType.EMPLOYMENT_CONTRACT && (
+            <Grid item xs={6}>
+              <Typography className={classes.label}>Wpisz wymiar etatu</Typography>
+              <TextField
+                fullWidth
+                name="civilTime"
+                data-cy="civilTime"
+                value={workerInfo.civilTime}
+                type="number"
+                onChange={handleUpdate}
+                color="primary"
+              />
+            </Grid>
+          )}
+          {workerInfo.contractType === ContractType.CIVIL_CONTRACT && (
+            <Grid item xs={6}>
+              <Typography className={classes.label}>Ilość godzin</Typography>
+              <Input
+                fullWidth
+                name="employmentTime"
+                value={workerInfo.employmentTime}
+                onChange={handleUpdate}
+                data-cy="hours-number"
+                inputComponent={
+                  // eslint-disable-next-line
+                  TextMaskCustom as any
+                }
+              />
+            </Grid>
+          )}
+        </Grid>
+      </Grid>
+      <Grid item>
+        <Button>Zapisz pracownika</Button>
+      </Grid>
+    </Grid>
+  );
+}
+
+function translateAndCapitalizeWorkerType(workerType: WorkerType): string {
+  return translateAndCapitalize(workerType, WorkerTypeHelper);
+}
+
+function translateAndCapitalizeContractType(contractType: ContractType): string {
+  return translateAndCapitalize(contractType, ContractTypeHelper);
+}
+
+function translateAndCapitalize<T>(what: T, using: { translate: (what: T) => string }): string {
+  const translation = using.translate(what);
+  return StringHelper.capitalize(translation);
+}

src/components/namestable/worker-info.component.tsx

@@ -1,4 +1,3 @@
-import classNames from "classnames/bind";
 import React from "react";
 import {
   WorkerInfoModel,
@@ -8,6 +7,7 @@ import {
 import { StringHelper } from "../../helpers/string.helper";
 import WorkersCalendar from "../workers-page/workers-calendar/workers-calendar.component";
 import { Divider } from "@material-ui/core";
+import classNames from "classnames/bind";
 
 export function WorkerInfoComponent(info: WorkerInfoModel): JSX.Element {
   return (

src/components/workers-page/workers-tab/worker-drawer.component.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Drawer, { DrawerOptions } from "../../common-components/drawer/drawer.component";
 import { WorkerInfoModel } from "../../../common-models/worker-info.model";
 import { WorkerInfoComponent } from "../../namestable/worker-info.component";
+import { WorkerEditComponent } from "../../namestable/worker-edit.component";
 
 export enum WorkerDrawerMode {
   EDIT,
@@ -29,9 +30,10 @@ export default function WorkerDrawerComponent(options: WorkerDrawerOptions): JSX
   const { mode, worker, setOpen, ...otherOptions } = options;
   const title = getTitle(mode);
   const isInfo = mode === WorkerDrawerMode.INFO;
+  const isEdit = mode === WorkerDrawerMode.EDIT;
   return (
     <Drawer setOpen={setOpen} title={title} {...otherOptions}>
-      {worker && <h1>{worker.name}</h1>}
+      {isEdit && worker && <WorkerEditComponent {...worker} />}
 
       {isInfo && WorkerInfoComponent(worker ?? { name: "", time: 0 })}
     </Drawer>