From a80c5f1076f2428a8f07e4da6686f87475008bd6 Mon Sep 17 00:00:00 2001 From: Bohdan Forostianyi Date: Sat, 5 Dec 2020 18:01:23 +0100 Subject: [PATCH 1/4] ds --- src/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.tsx b/src/app.tsx index c48adb547..92f11ff54 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -9,7 +9,7 @@ import { ScheduleDataActionType } from "./state/reducers/schedule-data.reducer"; import { ActionModel } from "./state/models/action.model"; import { ScheduleDataModel } from "./common-models/schedule-data.model"; -function App(): JSX.Element { +function App() { const scheduleDispatcher = useDispatch(); useEffect(() => { if (process.env.REACT_APP_DEV_MODE === "true") { From 9298672b93a5a33ca0b985a12071374e8d2b8ccf Mon Sep 17 00:00:00 2001 From: vvlovsky Date: Sat, 12 Dec 2020 01:50:45 +0200 Subject: [PATCH 2/4] Removes scroll on bottom --- cypress.json | 6 +- src/app.tsx | 29 +++-- src/assets/styles/styles-all.scss | 2 +- src/assets/styles/styles/custom/_body.scss | 6 + src/assets/styles/styles/custom/_header.scss | 3 +- .../styles/custom/_route-buttons.module.scss | 3 + .../{_toolbar.scss => _schedule_page.scss} | 20 ++-- .../header/header.component.tsx | 1 + .../route-buttons/route-buttons.component.tsx | 81 +++++++------- src/components/schedule-page.component.tsx | 35 ++++++ .../schedule-edit-mode.component.tsx | 103 ++++++++++++++++++ .../schedule-editing.component.tsx | 10 -- .../schedule-page/schedule-page.component.tsx | 12 -- .../schedule-view-only-mode.component.tsx | 33 ++++++ .../toolbar/edit-toolbar.component.tsx | 73 ------------- .../validation-drawer.component.tsx | 5 +- src/components/view-only.component.tsx | 41 ------- 17 files changed, 261 insertions(+), 202 deletions(-) rename src/assets/styles/styles/custom/{_toolbar.scss => _schedule_page.scss} (82%) create mode 100644 src/components/schedule-page.component.tsx create mode 100644 src/components/schedule-page/schedule-edit-mode.component.tsx delete mode 100644 src/components/schedule-page/schedule-editing.component.tsx delete mode 100644 src/components/schedule-page/schedule-page.component.tsx create mode 100644 src/components/schedule-page/schedule-view-only-mode.component.tsx delete mode 100644 src/components/schedule-page/toolbar/edit-toolbar.component.tsx delete mode 100644 src/components/view-only.component.tsx diff --git a/cypress.json b/cypress.json index ebf21a4c8..a34dfc761 100644 --- a/cypress.json +++ b/cypress.json @@ -1,5 +1,7 @@ { - "env":{ + "env": { "baseUrl": "http://localhost:3000" - } + }, + "viewportWidth": 1920, + "viewportHeight": 1080 } diff --git a/src/app.tsx b/src/app.tsx index 92f11ff54..66fe3c996 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,16 +1,28 @@ -import React, { useEffect } from "react"; -import { Route, Switch } from "react-router-dom"; +import React, { useEffect, useState } from "react"; import { CustomGlobalHotKeys, HeaderComponent } from "./components/common-components"; -import { ViewOnlyComponent } from "./components/view-only.component"; -import { ScheduleEditingComponent } from "./components/schedule-page/schedule-editing.component"; +import { SchedulePage } from "./components/schedule-page.component"; import { useDispatch } from "react-redux"; import schedule from "./assets/devMode/schedule.js"; import { ScheduleDataActionType } from "./state/reducers/schedule-data.reducer"; import { ActionModel } from "./state/models/action.model"; import { ScheduleDataModel } from "./common-models/schedule-data.model"; +import ManagementPage from "./components/workers-page/management-page.component"; +import RouteButtonsComponent from "./components/common-components/route-buttons/route-buttons.component"; -function App() { +interface TabData { + label: string; + component: JSX.Element; +} + +function App(): JSX.Element { const scheduleDispatcher = useDispatch(); + const [editMode, setEditMode] = useState(false); + + const tabs: TabData[] = [ + { label: "Plan", component: }, + { label: "Zarządzanie", component: }, + ]; + useEffect(() => { if (process.env.REACT_APP_DEV_MODE === "true") { scheduleDispatcher({ @@ -25,10 +37,9 @@ function App() {
- - - - +
+ +
); diff --git a/src/assets/styles/styles-all.scss b/src/assets/styles/styles-all.scss index 53db96e97..3d15f25e0 100644 --- a/src/assets/styles/styles-all.scss +++ b/src/assets/styles/styles-all.scss @@ -27,7 +27,7 @@ @import "styles/custom/month-switch"; @import "styles/custom/nametable"; @import "styles/custom/tables"; -@import "styles/custom/toolbar"; +@import "styles/custom/schedule_page"; @import "styles/custom/button"; @import "styles/custom/route-buttons.module"; @import "styles/custom/body"; diff --git a/src/assets/styles/styles/custom/_body.scss b/src/assets/styles/styles/custom/_body.scss index d9d643982..37d5a1243 100644 --- a/src/assets/styles/styles/custom/_body.scss +++ b/src/assets/styles/styles/custom/_body.scss @@ -1,3 +1,9 @@ body { color: $primary-background; + overflow-y: hidden; + + #page_without_header { + height: 90vh; + overflow-y: scroll; + } } diff --git a/src/assets/styles/styles/custom/_header.scss b/src/assets/styles/styles/custom/_header.scss index 195f21509..ecd949d8b 100644 --- a/src/assets/styles/styles/custom/_header.scss +++ b/src/assets/styles/styles/custom/_header.scss @@ -6,7 +6,8 @@ background-color: $primary-header-color; padding: 0 20px 0 20px; align-items: center; - justify-content: left; + justify-content: space-around; + position: relative; #AssignmentIndIcon { color: $header-text-color; diff --git a/src/assets/styles/styles/custom/_route-buttons.module.scss b/src/assets/styles/styles/custom/_route-buttons.module.scss index 0f7cc9fe3..1d2032b15 100644 --- a/src/assets/styles/styles/custom/_route-buttons.module.scss +++ b/src/assets/styles/styles/custom/_route-buttons.module.scss @@ -2,10 +2,12 @@ $indicator-color: #1d3557; $route-text-color: #000000; +$disabled-text-color: #d1d6dc; :export { indicatorColor: $indicator-color; routeTextColor: $route-text-color; + disabledTextColor: $disabled-text-color; } .tabs-and-buttons { @@ -13,6 +15,7 @@ $route-text-color: #000000; } .tabs-row { + padding: 0 30px 0 30px; display: flex; flex-direction: row; width: 100%; diff --git a/src/assets/styles/styles/custom/_toolbar.scss b/src/assets/styles/styles/custom/_schedule_page.scss similarity index 82% rename from src/assets/styles/styles/custom/_toolbar.scss rename to src/assets/styles/styles/custom/_schedule_page.scss index 75d9e6bdb..747bd3182 100644 --- a/src/assets/styles/styles/custom/_toolbar.scss +++ b/src/assets/styles/styles/custom/_schedule_page.scss @@ -1,9 +1,15 @@ @import "variables"; -.toolbar-container { + +.schedule-container { display: flex; - flex-direction: row; + flex-direction: column; width: 100%; + align-items: center; + + .schedule { + margin: auto; + } .buttons { display: flex; @@ -17,7 +23,6 @@ } #edit-panel-text-container { - margin: 5px; display: flex; flex-direction: column; @@ -43,20 +48,17 @@ .editing-row { display: flex; - justify-content: flex-end; + justify-content: flex-start; flex-direction: row; width: 100%; margin: 0; - padding: 24px; } #edit-page { width: 100%; display: flex; flex-direction: column; - } - - #schedule-editing { - margin: 24px; + align-items: center; + justify-content: space-around; } } diff --git a/src/components/common-components/header/header.component.tsx b/src/components/common-components/header/header.component.tsx index 869f293f5..e84fd0c9d 100644 --- a/src/components/common-components/header/header.component.tsx +++ b/src/components/common-components/header/header.component.tsx @@ -7,6 +7,7 @@ export function HeaderComponent(): JSX.Element { <>
+
diff --git a/src/components/common-components/route-buttons/route-buttons.component.tsx b/src/components/common-components/route-buttons/route-buttons.component.tsx index d51637a19..465f5f18b 100644 --- a/src/components/common-components/route-buttons/route-buttons.component.tsx +++ b/src/components/common-components/route-buttons/route-buttons.component.tsx @@ -9,64 +9,71 @@ import ScssVars from "../../../assets/styles/styles/custom/_route-buttons.module interface Tabs { label: string; component: JSX.Element; - rightSideButtons?: JSX.Element; +} + +interface RouteButtonsOptions { + tabs: Tabs[]; + disabled?: boolean; } const useStyles = makeStyles(() => ({ indicatorStyle: { backgroundColor: ScssVars.indicatorColor, height: 3, - opacity: 1, outline: "none", }, - tabStyle: { - opacity: 1, + minWidth: 0, outline: "none", - paddingTop: 5, + margin: "0 20px 0 0", + padding: 5, }, })); -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const StyledTab: any = withStyles((theme) => ({ - root: { - textTransform: "none", - color: ScssVars.routeTextColor, - outline: "none", - fontWeight: theme.typography.fontWeightMedium, - fontSize: "16", - opacity: 1, - fontFamily: ["Roboto"].join(","), - "&:hover": { - color: ScssVars.indicatorColor, - opacity: 1, - outline: "none", - }, - "&$selected": { - color: ScssVars.routeTextColor, - outline: "none", - fontWeight: theme.typography.fontWeightBold, - }, - }, - - selected: { - outline: "none", - }, -}))((props) => ); - -export default function RouteButtonsComponent({ tabs }: { tabs: Tabs[] }): JSX.Element { +export default function RouteButtonsComponent(props: RouteButtonsOptions): JSX.Element { + const tabs = props.tabs; const [tab, setTab] = React.useState(tabs[0].label); const classes = useStyles(); const handleChange = (event: React.ChangeEvent<{}>, newValue: string): void => { setTab(newValue); }; + // eslint-disable-next-line + const StyledTab: any = withStyles((theme) => ({ + root: { + textTransform: "none", + color: props.disabled ? ScssVars.disabledTextColor : ScssVars.routeTextColor, + outline: "none", + fontWeight: theme.typography.fontWeightMedium, + fontSize: "20", + fontFamily: ["Roboto"].join(","), + + "&:hover": { + color: props.disabled ? ScssVars.disabledTextColor : ScssVars.indicatorColor, + opacity: 1, + outline: "none", + }, + "&$selected": { + color: ScssVars.routeTextColor, + outline: "none", + fontWeight: theme.typography.fontWeightBold, + }, + }, + + selected: { + outline: "none", + }, + }))((props) => ); + return (
- + {tabs.map((tab) => (
-
- {tabs.map((tab) => ( - - {tab.rightSideButtons} - - ))}
{tabs.map((tab) => ( diff --git a/src/components/schedule-page.component.tsx b/src/components/schedule-page.component.tsx new file mode 100644 index 000000000..dde921a76 --- /dev/null +++ b/src/components/schedule-page.component.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { Route, Switch } from "react-router-dom"; +import ScheduleViewOnlyMode from "./schedule-page/schedule-view-only-mode.component"; +import { ScheduleEditMode } from "./schedule-page/schedule-edit-mode.component"; + +interface SchedulePageOptions { + editModeHandler: (editMode: boolean) => void; +} + +export function SchedulePage(props: SchedulePageOptions): JSX.Element { + function ViewOnly(): JSX.Element { + return ( + <> + props.editModeHandler(true)} /> + + ); + } + + function Edit(): JSX.Element { + return ( + <> + props.editModeHandler(false)} /> + + ); + } + + return ( +
+ + + + +
+ ); +} diff --git a/src/components/schedule-page/schedule-edit-mode.component.tsx b/src/components/schedule-page/schedule-edit-mode.component.tsx new file mode 100644 index 000000000..b172eab27 --- /dev/null +++ b/src/components/schedule-page/schedule-edit-mode.component.tsx @@ -0,0 +1,103 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { Button } from "../common-components"; +import ValidationDrawerComponent from "./validation-drawer/validation-drawer.component"; +import backend from "../../api/backend"; +import { ScheduleErrorActionType } from "../../state/reducers/schedule-errors.reducer"; +import { ActionModel } from "../../state/models/action.model"; +import { ScheduleError } from "../../common-models/schedule-error.model"; +import { useDispatch, useSelector } from "react-redux"; +import { ApplicationStateModel } from "../../state/models/application-state.model"; +import { ScheduleComponent } from "./table/schedule/schedule.component"; +import UndoIcon from "@material-ui/icons/Undo"; +import RedoIcon from "@material-ui/icons/Redo"; +import { ActionCreators as UndoActionCreators } from "redux-undo"; + +interface ScheduleEditModeOptions { + closeEdit: () => void; +} + +export function ScheduleEditMode(props: ScheduleEditModeOptions): JSX.Element { + const schedule = useSelector((state: ApplicationStateModel) => state.scheduleData?.present); + const dispatcher = useDispatch(); + + async function updateScheduleErrors(): Promise { + if (schedule) { + let response; + + try { + response = await backend.getErrors(schedule); + } catch { + response = []; + } + + dispatcher({ + type: ScheduleErrorActionType.UPDATE, + payload: response, + } as ActionModel); + } + } + + function unDo(): void { + if (schedule) { + dispatcher(UndoActionCreators.undo()); + } + } + + function reDo(): void { + if (schedule) { + dispatcher(UndoActionCreators.redo()); + } + } + + return ( +
+
+
+ + + + +
+

Tryb edycji aktywny

+
+ + + + + +
+ + + + + + +
+
+
+ +
+
+ ); +} diff --git a/src/components/schedule-page/schedule-editing.component.tsx b/src/components/schedule-page/schedule-editing.component.tsx deleted file mode 100644 index b08282805..000000000 --- a/src/components/schedule-page/schedule-editing.component.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import { EditToolbarComponent } from "./toolbar/edit-toolbar.component"; - -export function ScheduleEditingComponent(): JSX.Element { - return ( -
- -
- ); -} diff --git a/src/components/schedule-page/schedule-page.component.tsx b/src/components/schedule-page/schedule-page.component.tsx deleted file mode 100644 index 71a43a0e1..000000000 --- a/src/components/schedule-page/schedule-page.component.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { TableComponent } from "./table/table.component"; - -export default function SchedulePage(): JSX.Element { - return ( - -
- -
- - ); -} diff --git a/src/components/schedule-page/schedule-view-only-mode.component.tsx b/src/components/schedule-page/schedule-view-only-mode.component.tsx new file mode 100644 index 000000000..df629b87b --- /dev/null +++ b/src/components/schedule-page/schedule-view-only-mode.component.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { ImportButtonsComponent } from "./import-buttons/import-buttons.component"; +import { Button } from "../common-components"; +import { ScheduleComponent } from "./table/schedule/schedule.component"; +import { Link } from "react-router-dom"; + +interface PropsType { + openEdit: () => void; +} + +export default function ScheduleViewOnlyMode(props: PropsType): JSX.Element { + return ( + <> +
+
+ + + + +
+
+ +
+ + ); +} diff --git a/src/components/schedule-page/toolbar/edit-toolbar.component.tsx b/src/components/schedule-page/toolbar/edit-toolbar.component.tsx deleted file mode 100644 index e2aa01b7b..000000000 --- a/src/components/schedule-page/toolbar/edit-toolbar.component.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import { Button } from "../../common-components"; -import ValidationDrawerComponent from "../validation-drawer/validation-drawer.component"; -import backend from "../../../api/backend"; -import { ScheduleErrorActionType } from "../../../state/reducers/schedule-errors.reducer"; -import { ActionModel } from "../../../state/models/action.model"; -import { ScheduleError } from "../../../common-models/schedule-error.model"; -import { useDispatch, useSelector } from "react-redux"; -import { ApplicationStateModel } from "../../../state/models/application-state.model"; -import { ScheduleComponent } from "../table/schedule/schedule.component"; -import UndoIcon from "@material-ui/icons/Undo"; -import RedoIcon from "@material-ui/icons/Redo"; - -export function EditToolbarComponent(): JSX.Element { - const schedule = useSelector((state: ApplicationStateModel) => state.scheduleData?.present); - const dispatcher = useDispatch(); - - async function updateScheduleErrors(): Promise { - if (schedule) { - const response = await backend.getErrors(schedule); - dispatcher({ - type: ScheduleErrorActionType.UPDATE, - payload: response, - } as ActionModel); - } - } - - return ( -
-
-
-
- -
-

Tryb edycji aktywny

-
- - - - - - - - - - - - - -
-
-
- -
-
- ); -} diff --git a/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx b/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx index c84b173fc..fba15031c 100644 --- a/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx +++ b/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx @@ -7,7 +7,6 @@ import { ScheduleErrorLevel, ScheduleErrorMessageModel, } from "../../../common-models/schedule-error-message.model"; -import { Button } from "../../common-components"; import { SpanErrors } from "./span-errors.component"; export default function ValidationDrawerComponent(): JSX.Element { @@ -24,6 +23,7 @@ export default function ValidationDrawerComponent(): JSX.Element { } else { setErrors(noErrorsFound); } + setOpen(true); }, [errorsReceived]); function toggleDrawer(open: boolean): void { @@ -32,9 +32,6 @@ export default function ValidationDrawerComponent(): JSX.Element { return (
- toggleDrawer(false)} anchor={"right"}> diff --git a/src/components/view-only.component.tsx b/src/components/view-only.component.tsx deleted file mode 100644 index a787c9290..000000000 --- a/src/components/view-only.component.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import { Button } from "./common-components"; -import { ImportButtonsComponent } from "./schedule-page/import-buttons/import-buttons.component"; -import RouteButtonsComponent from "./common-components/route-buttons/route-buttons.component"; -import ManagementPage from "./workers-page/management-page.component"; -import { ScheduleComponent } from "./schedule-page/table/schedule/schedule.component"; - -interface TabData { - label: string; - component: JSX.Element; - rightSideButtons: JSX.Element; -} - -export function ViewOnlyComponent(): JSX.Element { - function Buttons(): JSX.Element { - return ( - <> -
- - - - -
- - ); - } - - const tabs: TabData[] = [ - { label: "Plan", component: , rightSideButtons: }, - { label: "Zarządzanie", component: , rightSideButtons:
}, - ]; - - return ( -
- -
- ); -} From 86d63b53a6ac8248667a902115278d4b2ab7c133 Mon Sep 17 00:00:00 2001 From: Bohdan Forostianyi Date: Sat, 12 Dec 2020 14:27:26 +0100 Subject: [PATCH 3/4] Fixes drawer that opened on entering editing tab --- .../e2e/table/schedule-errors.spec.js | 1 - .../validation-drawer.component.tsx | 18 +++++++++--------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/cypress/integration/e2e/table/schedule-errors.spec.js b/cypress/integration/e2e/table/schedule-errors.spec.js index 50cca6d91..cfe404b69 100644 --- a/cypress/integration/e2e/table/schedule-errors.spec.js +++ b/cypress/integration/e2e/table/schedule-errors.spec.js @@ -18,7 +18,6 @@ context("Schedule errors", () => { it("Should show errors returned by server", () => { cy.contains("Sprawdź Plan").click(); - cy.contains("Pokaż błędy").click(); cy.contains("Za mało pracowników w trakcie dnia w dniu 1, potrzeba 8, jest 5"); cy.contains("Za mało pracowników w trakcie dnia w dniu 2, potrzeba 8, jest 0"); cy.contains("Za mało pracowników w nocy w dniu 2, potrzeba 5, jest 0"); diff --git a/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx b/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx index fba15031c..a5bd4e929 100644 --- a/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx +++ b/src/components/schedule-page/validation-drawer/validation-drawer.component.tsx @@ -10,21 +10,21 @@ import { import { SpanErrors } from "./span-errors.component"; export default function ValidationDrawerComponent(): JSX.Element { - const [errors, setErrors] = useState(); + const [mappedErrors, setMappedErrors] = useState(); const [open, setOpen] = useState(false); - const errorsReceived = useSelector((state: ApplicationStateModel) => state.scheduleErrors); + const { scheduleErrors } = useSelector((state: ApplicationStateModel) => state); useEffect(() => { const noErrorsFound = [ { kind: "", message: "Nie znaleziono błędów", level: ScheduleErrorLevel.INFO }, ]; - if (errorsReceived?.length) { - setErrors(errorsReceived); + if (scheduleErrors?.length) { + setMappedErrors(scheduleErrors); + setOpen(true); } else { - setErrors(noErrorsFound); + setMappedErrors(noErrorsFound); } - setOpen(true); - }, [errorsReceived]); + }, [scheduleErrors]); function toggleDrawer(open: boolean): void { setOpen(open); @@ -33,9 +33,9 @@ export default function ValidationDrawerComponent(): JSX.Element { return (
toggleDrawer(false)} anchor={"right"}> - + - {errors?.map( + {mappedErrors?.map( (error, index): JSX.Element => ( From 9e6593a2eccf0a7a626437fe6576643007b7e9cc Mon Sep 17 00:00:00 2001 From: Bohdan Forostianyi Date: Sat, 12 Dec 2020 14:57:23 +0100 Subject: [PATCH 4/4] Adds minimum size to electron window --- public/electron.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/electron.js b/public/electron.js index bab8e09e4..0e4eca67d 100644 --- a/public/electron.js +++ b/public/electron.js @@ -9,7 +9,7 @@ let mainWindow; const env = dotenv.config().parsed; function createWindow() { - mainWindow = new BrowserWindow({show: false}); + mainWindow = new BrowserWindow({show: false, minHeight: 500, minWidth: 1500}); mainWindow.maximize(); mainWindow.removeMenu(); mainWindow.show();