From d0dd877719766babe6d106bc99fc2de70b2682d2 Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Fri, 18 Dec 2020 22:25:08 +0100 Subject: [PATCH 01/10] Add styling of edit/add worker component inside drawer --- .../e2e/management-tab/edit-worker.spec.js | 0 package-lock.json | 8 ++ package.json | 1 + .../styles/styles/custom/_dropdown.scss | 4 + src/common-models/worker-info.model.ts | 16 +++ .../drawer/drawer.component.tsx | 12 +- .../dropdown-buttons.component.tsx | 7 +- .../namestable/worker-edit.component.tsx | 134 ++++++++++++++++++ .../namestable/worker-edit.helper.tsx | 20 +++ .../namestable/worker-info.component.tsx | 2 +- .../workers-tab/worker-drawer.component.tsx | 3 +- 11 files changed, 202 insertions(+), 5 deletions(-) create mode 100644 cypress/integration/e2e/management-tab/edit-worker.spec.js create mode 100644 src/components/namestable/worker-edit.component.tsx create mode 100644 src/components/namestable/worker-edit.helper.tsx diff --git a/cypress/integration/e2e/management-tab/edit-worker.spec.js b/cypress/integration/e2e/management-tab/edit-worker.spec.js new file mode 100644 index 000000000..e69de29bb diff --git a/package-lock.json b/package-lock.json index 564ac6807..98e66e534 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15412,6 +15412,14 @@ } } }, + "react-text-mask": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.4.3.tgz", + "integrity": "sha1-mR77QpnjDC5sLEbRP2FxaUY+DS0=", + "requires": { + "prop-types": "^15.5.6" + } + }, "react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", diff --git a/package.json b/package.json index 543e4a26e..38e8409ba 100644 --- a/package.json +++ b/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", diff --git a/src/assets/styles/styles/custom/_dropdown.scss b/src/assets/styles/styles/custom/_dropdown.scss index 03a34bb6c..32af11236 100644 --- a/src/assets/styles/styles/custom/_dropdown.scss +++ b/src/assets/styles/styles/custom/_dropdown.scss @@ -33,6 +33,10 @@ } } +.dropdown-buttons-z-index { + z-index: 1300; +} + .display-main-button { position: relative; top: -43px; diff --git a/src/common-models/worker-info.model.ts b/src/common-models/worker-info.model.ts index e618ffe10..74af36a60 100644 --- a/src/common-models/worker-info.model.ts +++ b/src/common-models/worker-info.model.ts @@ -17,6 +17,22 @@ export class WorkerTypeHelper { } } +export enum ContractType { + UOP = "UOP", + CONTRACTOR = "CONTRACTOR", +} + +export class ContractTypeHelper { + static translate(type: ContractType): string { + switch (type) { + case ContractType.UOP: + return "umowa o pracę"; + case ContractType.CONTRACTOR: + return "umowa zlecenie"; + } + } +} + export interface WorkersInfoModel { time: { [key: string]: number }; type: { [workerName: string]: WorkerType }; diff --git a/src/components/common-components/drawer/drawer.component.tsx b/src/components/common-components/drawer/drawer.component.tsx index 028e79937..9314874f1 100644 --- a/src/components/common-components/drawer/drawer.component.tsx +++ b/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,7 +61,11 @@ export default function Drawer(options: DrawerOptions): JSX.Element {

{title}

- setOpen(false)}> + setOpen(false)} + > @@ -65,7 +73,7 @@ export default function Drawer(options: DrawerOptions): JSX.Element { - {children} + {children} ); } diff --git a/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx b/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx index 0e7b399c8..5d15a60da 100644 --- a/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx +++ b/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx @@ -40,7 +40,12 @@ export function DropdownButtons({ {mainLabel} - +
(); + const [uopTime, setUopTime] = useState(" / "); + const [contractorTime, setContractorTime] = useState(0); + + const positionOptions = Object.keys(WorkerType).map((workerTypeName) => { + const workerType = WorkerType[workerTypeName]; + return { + label: translateAndCapitalizeWorkerType(workerType), + action: () => setWorkerType(workerType), + }; + }); + + const contractOptions = Object.keys(ContractType).map((contractTypeName) => { + const contractType = ContractType[contractTypeName]; + return { + label: translateAndCapitalizeContractType(contractType), + action: () => setContractType(contractType), + }; + }); + + return ( + + + + + Imię i nazwisko + setName(e.target.value)} + color="primary" + /> + + + Stanowisko + + + + Wymiar pracy + + + {contractType === ContractType.UOP && ( + + Wpisz wymiar etatu + setContractorTime(parseInt(e.target.value))} + color="primary" + /> + + )} + {contractType === ContractType.CONTRACTOR && ( + + Ilość godzin + setUopTime(e.target.value)} + data-cy="hours-number" + inputComponent={TextMaskCustom as any} + /> + + )} + + + + + + + ); +} + +interface TextMaskCustomProps { + inputRef: (ref: HTMLInputElement | null) => void; +} + +function TextMaskCustom(props: TextMaskCustomProps) { + const { inputRef, ...other } = props; + + return ( + { + inputRef(ref ? ref.inputElement : null); + }} + mask={[/[1-9]/, "/", /[1-9]/]} + showMask + /> + ); +} diff --git a/src/components/namestable/worker-edit.helper.tsx b/src/components/namestable/worker-edit.helper.tsx new file mode 100644 index 000000000..eada08233 --- /dev/null +++ b/src/components/namestable/worker-edit.helper.tsx @@ -0,0 +1,20 @@ +import { + WorkerTypeHelper, + WorkerType, + ContractType, + ContractTypeHelper, +} from "../../common-models/worker-info.model"; + +export function translateAndCapitalizeWorkerType(workerType: WorkerType): string { + const translation = WorkerTypeHelper.translate(workerType); + return capitalize(translation); +} + +export function translateAndCapitalizeContractType(contractType: ContractType): string { + const translation = ContractTypeHelper.translate(contractType); + return capitalize(translation); +} + +export function capitalize(text: string): string { + return text.charAt(0).toUpperCase() + text.slice(1); +} diff --git a/src/components/namestable/worker-info.component.tsx b/src/components/namestable/worker-info.component.tsx index e7ff689bd..1f17ff036 100644 --- a/src/components/namestable/worker-info.component.tsx +++ b/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 ( diff --git a/src/components/workers-page/workers-tab/worker-drawer.component.tsx b/src/components/workers-page/workers-tab/worker-drawer.component.tsx index 4a1e86620..bbbf399b8 100644 --- a/src/components/workers-page/workers-tab/worker-drawer.component.tsx +++ b/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, @@ -31,7 +32,7 @@ export default function WorkerDrawerComponent(options: WorkerDrawerOptions): JSX const isInfo = mode === WorkerDrawerMode.INFO; return ( - {worker &&

{worker.name}

} + {worker && } {isInfo && WorkerInfoComponent(worker ?? { name: "", time: 0 })} From a3861430c5ae1a76dffafbfa18f2a06f8795e457 Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Sat, 19 Dec 2020 12:22:32 +0100 Subject: [PATCH 02/10] Add first test --- .../e2e/management-tab/edit-worker.spec.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/cypress/integration/e2e/management-tab/edit-worker.spec.js b/cypress/integration/e2e/management-tab/edit-worker.spec.js index e69de29bb..a4c4871c4 100644 --- a/cypress/integration/e2e/management-tab/edit-worker.spec.js +++ b/cypress/integration/e2e/management-tab/edit-worker.spec.js @@ -0,0 +1,21 @@ +/// + +context("Tab 'zarządzanie'", () => { + beforeEach(() => { + cy.visit(Cypress.env("baseUrl")); + cy.contains("Zarządzanie").click(); + cy.contains("opiekunka 1").parent().contains("Edytuj").click(); + }); + + describe("Edit worker", () => { + it("Should be able to close edit drawer", () => { + cy.contains("Edycja pracownika").should("be.visible"); + cy.get('[data-cy="exit-drawer"]').click(); + cy.contains("Edycja pracownika").should("be.not.visible"); + }); + + it.only("Should be able to edit the name", () => { + cy.contains("Nazwa"); + }); + }); +}); From d335c989463de9ee847f0f62a215e5f099fb2ccd Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Sat, 19 Dec 2020 15:55:09 +0100 Subject: [PATCH 03/10] Changes names of contractTypes to match english equivalents --- src/common-models/worker-info.model.ts | 8 ++++---- src/components/namestable/worker-edit.component.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/common-models/worker-info.model.ts b/src/common-models/worker-info.model.ts index 74af36a60..287cddae5 100644 --- a/src/common-models/worker-info.model.ts +++ b/src/common-models/worker-info.model.ts @@ -18,16 +18,16 @@ export class WorkerTypeHelper { } export enum ContractType { - UOP = "UOP", - CONTRACTOR = "CONTRACTOR", + EMPLOYMENT_CONTRACT = "EMPLOYMENT_CONTRACT", + CIVIL_CONTRACT = "CIVIL_CONTRACT", } export class ContractTypeHelper { static translate(type: ContractType): string { switch (type) { - case ContractType.UOP: + case ContractType.EMPLOYMENT_CONTRACT: return "umowa o pracę"; - case ContractType.CONTRACTOR: + case ContractType.CIVIL_CONTRACT: return "umowa zlecenie"; } } diff --git a/src/components/namestable/worker-edit.component.tsx b/src/components/namestable/worker-edit.component.tsx index 5bc60c0b9..289c55c23 100644 --- a/src/components/namestable/worker-edit.component.tsx +++ b/src/components/namestable/worker-edit.component.tsx @@ -80,7 +80,7 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { variant="outlined" /> - {contractType === ContractType.UOP && ( + {contractType === ContractType.EMPLOYMENT_CONTRACT && ( Wpisz wymiar etatu Date: Sat, 19 Dec 2020 17:03:21 +0100 Subject: [PATCH 04/10] Resolve review comments. Add tests --- .../e2e/management-tab/edit-worker.spec.js | 33 +++++++++- .../styles/styles/custom/_dropdown.scss | 2 +- .../dropdown-buttons.component.tsx | 2 +- .../namestable/worker-edit.component.tsx | 64 +++++++++++++------ 4 files changed, 79 insertions(+), 22 deletions(-) diff --git a/cypress/integration/e2e/management-tab/edit-worker.spec.js b/cypress/integration/e2e/management-tab/edit-worker.spec.js index a4c4871c4..e4be46563 100644 --- a/cypress/integration/e2e/management-tab/edit-worker.spec.js +++ b/cypress/integration/e2e/management-tab/edit-worker.spec.js @@ -14,8 +14,37 @@ context("Tab 'zarządzanie'", () => { cy.contains("Edycja pracownika").should("be.not.visible"); }); - it.only("Should be able to edit the name", () => { - cy.contains("Nazwa"); + it("Should be able to edit the name", () => { + cy.contains("opiekunka 1").get("input").clear().type("Ala Makota"); + cy.get('[value="Ala Makota"]').should("be.visible"); + }); + + it("Should be able to edit the position", () => { + cy.get(".btn-outlined").contains("Opiekunka").click(); + cy.get(".btn-primary").contains("Pielęgniarka").click(); + cy.get(".btn-outlined").contains("Pielęgniarka"); + }); + + context("Editing the time", () => { + beforeEach(() => { + cy.get(".btn-outlined").contains("Typ umowy").click(); + }); + + it("Should properly render conditional sections", () => { + cy.get(".btn-primary").contains("Umowa o pracę").click(); + cy.get(".btn-outlined").contains("Umowa o pracę"); + cy.contains("Wpisz wymiar etatu"); + cy.get(".btn-primary").contains("Umowa zlecenie").click(); + cy.get(".btn-outlined").contains("Umowa zlecenie"); + cy.contains("Ilość godzin"); + }); + + it("Should properly handle number of hours when employment contract", () => { + cy.get(".btn-primary").contains("Umowa o pracę").click(); + cy.get('[data-cy="civilTime"] input').clear({ force: true }).type("123"); + cy.get(".btn-outlined").contains("Opiekunka").click(); // unclick + cy.get('[value="123"]').should("be.visible"); + }); }); }); }); diff --git a/src/assets/styles/styles/custom/_dropdown.scss b/src/assets/styles/styles/custom/_dropdown.scss index 32af11236..08089719e 100644 --- a/src/assets/styles/styles/custom/_dropdown.scss +++ b/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%; diff --git a/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx b/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx index 5d15a60da..44dc76df1 100644 --- a/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx +++ b/src/components/common-components/dropdown-buttons/dropdown-buttons.component.tsx @@ -41,7 +41,7 @@ export function DropdownButtons({ (); - const [uopTime, setUopTime] = useState(" / "); - const [contractorTime, setContractorTime] = useState(0); + const [workerInfo, setWorkerInfo] = useState({ + name: info.name, + workerType: info.type, + contractType: undefined, + employmentTime: " / ", + civilTime: "0", + }); + + function handleUpdate(event) { + const { target } = event; + updateWorkerInfo(target.name, target.value); + } + + function updateWorkerInfo(key, value) { + setWorkerInfo({ ...workerInfo, [key]: value }); + } const positionOptions = Object.keys(WorkerType).map((workerTypeName) => { const workerType = WorkerType[workerTypeName]; return { label: translateAndCapitalizeWorkerType(workerType), - action: () => setWorkerType(workerType), + action: () => updateWorkerInfo("workerType", workerType), }; }); @@ -42,7 +61,7 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { const contractType = ContractType[contractTypeName]; return { label: translateAndCapitalizeContractType(contractType), - action: () => setContractType(contractType), + action: () => updateWorkerInfo("contractType", contractType), }; }); @@ -54,9 +73,10 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { Imię i nazwisko setName(e.target.value)} + value={workerInfo.name} + onChange={handleUpdate} color="primary" /> @@ -65,7 +85,11 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { @@ -75,31 +99,35 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { data-cy="contract" buttons={contractOptions} mainLabel={ - contractType ? translateAndCapitalizeContractType(contractType) : "Typ umowy" + workerInfo.contractType + ? translateAndCapitalizeContractType(workerInfo.contractType) + : "Typ umowy" } variant="outlined" /> - {contractType === ContractType.EMPLOYMENT_CONTRACT && ( + {workerInfo.contractType === ContractType.EMPLOYMENT_CONTRACT && ( Wpisz wymiar etatu setContractorTime(parseInt(e.target.value))} + onChange={handleUpdate} color="primary" /> )} - {contractType === ContractType.CONTRACTOR && ( + {workerInfo.contractType === ContractType.CIVIL_CONTRACT && ( Ilość godzin setUopTime(e.target.value)} + name="employmentTime" + value={workerInfo.employmentTime} + onChange={handleUpdate} data-cy="hours-number" inputComponent={TextMaskCustom as any} /> From 073cd589e73be266833f310ffa8a028144be70b8 Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Sat, 19 Dec 2020 17:08:17 +0100 Subject: [PATCH 05/10] Import capitalize from string helper --- src/components/namestable/worker-edit.helper.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/namestable/worker-edit.helper.tsx b/src/components/namestable/worker-edit.helper.tsx index eada08233..c8c9ad62a 100644 --- a/src/components/namestable/worker-edit.helper.tsx +++ b/src/components/namestable/worker-edit.helper.tsx @@ -4,17 +4,14 @@ import { ContractType, ContractTypeHelper, } from "../../common-models/worker-info.model"; +import { StringHelper } from "../../helpers/string.helper"; export function translateAndCapitalizeWorkerType(workerType: WorkerType): string { const translation = WorkerTypeHelper.translate(workerType); - return capitalize(translation); + return StringHelper.capitalize(translation); } export function translateAndCapitalizeContractType(contractType: ContractType): string { const translation = ContractTypeHelper.translate(contractType); - return capitalize(translation); -} - -export function capitalize(text: string): string { - return text.charAt(0).toUpperCase() + text.slice(1); + return StringHelper.capitalize(translation); } From 5aa70cb7134e0783f46293e31fe2593e014575c6 Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Sat, 19 Dec 2020 21:51:28 +0100 Subject: [PATCH 06/10] Start tests with loading the file with initial state --- cypress/integration/e2e/management-tab/edit-worker.spec.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress/integration/e2e/management-tab/edit-worker.spec.js b/cypress/integration/e2e/management-tab/edit-worker.spec.js index e4be46563..55fd47839 100644 --- a/cypress/integration/e2e/management-tab/edit-worker.spec.js +++ b/cypress/integration/e2e/management-tab/edit-worker.spec.js @@ -3,6 +3,8 @@ context("Tab 'zarządzanie'", () => { beforeEach(() => { cy.visit(Cypress.env("baseUrl")); + cy.contains("Plik").click(); + cy.get('[data-cy="file-input"]').attachFile("example.xlsx"); cy.contains("Zarządzanie").click(); cy.contains("opiekunka 1").parent().contains("Edytuj").click(); }); From b1f488be374ea2ffe133229f45365edc286dc642 Mon Sep 17 00:00:00 2001 From: Dimonium-239 Date: Tue, 22 Dec 2020 10:15:17 +0100 Subject: [PATCH 07/10] TASK-167 eliminate edit menu from worker-info drawer --- .../workers-page/workers-tab/worker-drawer.component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/workers-page/workers-tab/worker-drawer.component.tsx b/src/components/workers-page/workers-tab/worker-drawer.component.tsx index bbbf399b8..61f879fa7 100644 --- a/src/components/workers-page/workers-tab/worker-drawer.component.tsx +++ b/src/components/workers-page/workers-tab/worker-drawer.component.tsx @@ -30,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 ( - {worker && } + {isEdit && worker && } {isInfo && WorkerInfoComponent(worker ?? { name: "", time: 0 })} From 5ecd4878e121c85246b60de1abe2e93c3215d55d Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Sat, 2 Jan 2021 12:03:48 +0100 Subject: [PATCH 08/10] TASK-167 Delete tests --- .../e2e/management-tab/edit-worker.spec.js | 52 ------------------- 1 file changed, 52 deletions(-) delete mode 100644 cypress/integration/e2e/management-tab/edit-worker.spec.js diff --git a/cypress/integration/e2e/management-tab/edit-worker.spec.js b/cypress/integration/e2e/management-tab/edit-worker.spec.js deleted file mode 100644 index 55fd47839..000000000 --- a/cypress/integration/e2e/management-tab/edit-worker.spec.js +++ /dev/null @@ -1,52 +0,0 @@ -/// - -context("Tab 'zarządzanie'", () => { - beforeEach(() => { - cy.visit(Cypress.env("baseUrl")); - cy.contains("Plik").click(); - cy.get('[data-cy="file-input"]').attachFile("example.xlsx"); - cy.contains("Zarządzanie").click(); - cy.contains("opiekunka 1").parent().contains("Edytuj").click(); - }); - - describe("Edit worker", () => { - it("Should be able to close edit drawer", () => { - cy.contains("Edycja pracownika").should("be.visible"); - cy.get('[data-cy="exit-drawer"]').click(); - cy.contains("Edycja pracownika").should("be.not.visible"); - }); - - it("Should be able to edit the name", () => { - cy.contains("opiekunka 1").get("input").clear().type("Ala Makota"); - cy.get('[value="Ala Makota"]').should("be.visible"); - }); - - it("Should be able to edit the position", () => { - cy.get(".btn-outlined").contains("Opiekunka").click(); - cy.get(".btn-primary").contains("Pielęgniarka").click(); - cy.get(".btn-outlined").contains("Pielęgniarka"); - }); - - context("Editing the time", () => { - beforeEach(() => { - cy.get(".btn-outlined").contains("Typ umowy").click(); - }); - - it("Should properly render conditional sections", () => { - cy.get(".btn-primary").contains("Umowa o pracę").click(); - cy.get(".btn-outlined").contains("Umowa o pracę"); - cy.contains("Wpisz wymiar etatu"); - cy.get(".btn-primary").contains("Umowa zlecenie").click(); - cy.get(".btn-outlined").contains("Umowa zlecenie"); - cy.contains("Ilość godzin"); - }); - - it("Should properly handle number of hours when employment contract", () => { - cy.get(".btn-primary").contains("Umowa o pracę").click(); - cy.get('[data-cy="civilTime"] input').clear({ force: true }).type("123"); - cy.get(".btn-outlined").contains("Opiekunka").click(); // unclick - cy.get('[value="123"]').should("be.visible"); - }); - }); - }); -}); From 4bb37a3ad71c39d6a1cb30ad0c0285d45701488b Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Tue, 5 Jan 2021 20:28:33 +0100 Subject: [PATCH 09/10] Add changes after review --- .../styles/custom/_variables.module.scss | 2 + .../styles/styles/custom/_variables.scss | 1 + .../text-mask-custom.component.tsx | 21 +++++++++ .../namestable/worker-edit.component.tsx | 43 ++++++------------- 4 files changed, 38 insertions(+), 29 deletions(-) create mode 100644 src/components/common-components/text-mask-custom/text-mask-custom.component.tsx diff --git a/src/assets/styles/styles/custom/_variables.module.scss b/src/assets/styles/styles/custom/_variables.module.scss index c2ba0796f..977ed6e16 100644 --- a/src/assets/styles/styles/custom/_variables.module.scss +++ b/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; } diff --git a/src/assets/styles/styles/custom/_variables.scss b/src/assets/styles/styles/custom/_variables.scss index e5a6c2db6..569442427 100644 --- a/src/assets/styles/styles/custom/_variables.scss +++ b/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; diff --git a/src/components/common-components/text-mask-custom/text-mask-custom.component.tsx b/src/components/common-components/text-mask-custom/text-mask-custom.component.tsx new file mode 100644 index 000000000..43ba5b843 --- /dev/null +++ b/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 ( + { + inputRef(ref ? ref.inputElement : null); + }} + mask={[/[1-9]/, "/", /[1-9]/]} + showMask + /> + ); +} diff --git a/src/components/namestable/worker-edit.component.tsx b/src/components/namestable/worker-edit.component.tsx index d1f8bdfd7..31a1834b1 100644 --- a/src/components/namestable/worker-edit.component.tsx +++ b/src/components/namestable/worker-edit.component.tsx @@ -7,17 +7,18 @@ import { translateAndCapitalizeContractType, translateAndCapitalizeWorkerType, } from "./worker-edit.helper"; -import MaskedInput from "react-text-mask"; 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"; const useStyles = makeStyles({ container: { height: "100%", }, label: { - fontSize: 16, + fontSize: ScssVars.fontSizeBase, fontWeight: 700, - lineHeight: 1.75, + lineHeight: ScssVars.lineHeightXl, }, }); @@ -40,12 +41,12 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { civilTime: "0", }); - function handleUpdate(event) { - const { target } = event; - updateWorkerInfo(target.name, target.value); + function handleUpdate(event): void { + const { name, value } = event.target; + updateWorkerInfo(name, value); } - function updateWorkerInfo(key, value) { + function updateWorkerInfo(key, value): void { setWorkerInfo({ ...workerInfo, [key]: value }); } @@ -53,7 +54,7 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { const workerType = WorkerType[workerTypeName]; return { label: translateAndCapitalizeWorkerType(workerType), - action: () => updateWorkerInfo("workerType", workerType), + action: (): void => updateWorkerInfo("workerType", workerType), }; }); @@ -61,7 +62,7 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { const contractType = ContractType[contractTypeName]; return { label: translateAndCapitalizeContractType(contractType), - action: () => updateWorkerInfo("contractType", contractType), + action: (): void => updateWorkerInfo("contractType", contractType), }; }); @@ -129,7 +130,10 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { value={workerInfo.employmentTime} onChange={handleUpdate} data-cy="hours-number" - inputComponent={TextMaskCustom as any} + inputComponent={ + // eslint-disable-next-line + TextMaskCustom as any + } /> )} @@ -141,22 +145,3 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { ); } - -interface TextMaskCustomProps { - inputRef: (ref: HTMLInputElement | null) => void; -} - -function TextMaskCustom(props: TextMaskCustomProps) { - const { inputRef, ...other } = props; - - return ( - { - inputRef(ref ? ref.inputElement : null); - }} - mask={[/[1-9]/, "/", /[1-9]/]} - showMask - /> - ); -} From 1712e6751153a9a5b401c0203974d83e18f4aff7 Mon Sep 17 00:00:00 2001 From: Maciej Bielech Date: Tue, 5 Jan 2021 20:35:56 +0100 Subject: [PATCH 10/10] Add last change from review --- .../namestable/worker-edit.component.tsx | 26 +++++++++++++++---- .../namestable/worker-edit.helper.tsx | 17 ------------ 2 files changed, 21 insertions(+), 22 deletions(-) delete mode 100644 src/components/namestable/worker-edit.helper.tsx diff --git a/src/components/namestable/worker-edit.component.tsx b/src/components/namestable/worker-edit.component.tsx index 31a1834b1..5bd75fe5d 100644 --- a/src/components/namestable/worker-edit.component.tsx +++ b/src/components/namestable/worker-edit.component.tsx @@ -1,15 +1,18 @@ -import { ContractType, WorkerInfoModel, WorkerType } from "../../common-models/worker-info.model"; +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 { - translateAndCapitalizeContractType, - translateAndCapitalizeWorkerType, -} from "./worker-edit.helper"; 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: { @@ -145,3 +148,16 @@ export function WorkerEditComponent(info: WorkerInfoModel): JSX.Element { ); } + +function translateAndCapitalizeWorkerType(workerType: WorkerType): string { + return translateAndCapitalize(workerType, WorkerTypeHelper); +} + +function translateAndCapitalizeContractType(contractType: ContractType): string { + return translateAndCapitalize(contractType, ContractTypeHelper); +} + +function translateAndCapitalize(what: T, using: { translate: (what: T) => string }): string { + const translation = using.translate(what); + return StringHelper.capitalize(translation); +} diff --git a/src/components/namestable/worker-edit.helper.tsx b/src/components/namestable/worker-edit.helper.tsx deleted file mode 100644 index c8c9ad62a..000000000 --- a/src/components/namestable/worker-edit.helper.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { - WorkerTypeHelper, - WorkerType, - ContractType, - ContractTypeHelper, -} from "../../common-models/worker-info.model"; -import { StringHelper } from "../../helpers/string.helper"; - -export function translateAndCapitalizeWorkerType(workerType: WorkerType): string { - const translation = WorkerTypeHelper.translate(workerType); - return StringHelper.capitalize(translation); -} - -export function translateAndCapitalizeContractType(contractType: ContractType): string { - const translation = ContractTypeHelper.translate(contractType); - return StringHelper.capitalize(translation); -}