Task 135

cypress.json

@@ -1,5 +1,7 @@
 {
-  "env":{
+  "env": {
     "baseUrl": "http://localhost:3000"
-  }
+  },
+  "viewportWidth": 1920,
+  "viewportHeight": 1080
 }

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");

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();

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";
+
+interface TabData {
+  label: string;
+  component: JSX.Element;
+}
 
 function App(): JSX.Element {
   const scheduleDispatcher = useDispatch();
+  const [editMode, setEditMode] = useState<boolean>(false);
+
+  const tabs: TabData[] = [
+    { label: "Plan", component: <SchedulePage editModeHandler={setEditMode} /> },
+    { label: "Zarządzanie", component: <ManagementPage /> },
+  ];
+
   useEffect(() => {
     if (process.env.REACT_APP_DEV_MODE === "true") {
       scheduleDispatcher({
@@ -25,10 +37,9 @@ function App(): JSX.Element {
       <div>
         <CustomGlobalHotKeys />
         <HeaderComponent />
-        <Switch>
-          <Route path="/" component={ViewOnlyComponent} exact />
-          <Route path="/schedule-editing" component={ScheduleEditingComponent} />
-        </Switch>
+        <div id={"page_without_header"}>
+          <RouteButtonsComponent tabs={tabs} disabled={editMode} />
+        </div>
       </div>
     </React.Fragment>
   );

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";

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;
+  }
 }

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;

src/assets/styles/styles/custom/_route-buttons.module.scss

@@ -2,17 +2,20 @@
 
 $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 {
   width: 100%;
 }
 
 .tabs-row {
+  padding: 0 30px 0 30px;
   display: flex;
   flex-direction: row;
   width: 100%;

src/assets/styles/styles/custom/_toolbar.scss → 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;
   }
 }

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

@@ -7,6 +7,7 @@ export function HeaderComponent(): JSX.Element {
     <>
       <div id={"header"}>
         <AssignmentIndIcon id={"AssignmentIndIcon"} />
+        <div className={"filler"} />
         <MonthSwitchComponent />
         <div className={"filler"} />
       </div>

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) => <Tab disableRipple {...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) => <Tab disableRipple {...props} />);
+
   return (
     <div className={"tabs-and-buttons"}>
       <TabContext value={tab}>
         <div className={"tabs-row"}>
           <div className={"tabs-and-buttons"}>
-            <TabList classes={{ indicator: classes.indicatorStyle }} onChange={handleChange}>
+            <TabList
+              classes={{ indicator: classes.indicatorStyle }}
+              onChange={!props.disabled ? handleChange : void 0}
+            >
               {tabs.map((tab) => (
                 <StyledTab
                   className={classes.tabStyle}
@@ -78,12 +85,6 @@ export default function RouteButtonsComponent({ tabs }: { tabs: Tabs[] }): JSX.E
             </TabList>
             <Divider />
           </div>
-          <div className="filler" />
-          {tabs.map((tab) => (
-            <TabPanel value={tab.label} key={tab.label}>
-              {tab.rightSideButtons}
-            </TabPanel>
-          ))}
         </div>
 
         {tabs.map((tab) => (

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 (
+      <>
+        <ScheduleViewOnlyMode openEdit={(): void => props.editModeHandler(true)} />
+      </>
+    );
+  }
+
+  function Edit(): JSX.Element {
+    return (
+      <>
+        <ScheduleEditMode closeEdit={(): void => props.editModeHandler(false)} />
+      </>
+    );
+  }
+
+  return (
+    <div className="schedule-container">
+      <Switch>
+        <Route path="/" component={ViewOnly} exact />
+        <Route path="/schedule-editing" component={Edit} />
+      </Switch>
+    </div>
+  );
+}