TASK-94 Management page sketch

src/app.tsx

@@ -1,7 +1,7 @@
 import { Route, Switch } from "react-router-dom";
 import React from "react";
 import SchedulePage from "./components/schedule-page/schedule-page.component";
-import WorkersPage from "./components/workers-page/workers-page.component";
+import ManagementPage from "./components/workers-page/management-page.component";
 import { CustomGlobalHotKeys } from "./components/common-components/tools/globalhotkeys.component";
 import Header from "./components/common-components/header/header";
 
@@ -12,7 +12,7 @@ function App(): JSX.Element {
       <Header />
       <Switch>
         <Route path="/" component={SchedulePage} exact />
-        <Route path="/workers" component={WorkersPage} />
+        <Route path="/management" component={ManagementPage} />
       </Switch>
     </React.Fragment>
   );

src/assets/styles/styles-all.scss

@@ -26,3 +26,4 @@
 @import "styles/custom/header";
 @import "styles/custom/month-switch";
 @import "styles/custom/autocomplete";
+@import "styles/custom/management_page";

src/assets/styles/styles/custom/_management_page.scss

@@ -0,0 +1,11 @@
+.management-page {
+  overflow: auto;
+  width: 100%;
+  padding: 20px;
+  h1 {
+    margin: 0 10px 10px 10px;
+  }
+  * {
+    color: $secondary-text-color;
+  }
+}

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

@@ -15,7 +15,9 @@ $header-text-color: #ffffff !default;
 // Color system
 
 $primary: #1d3557 !default;
+$secondary: #000000 !default;
 $primary-text-color: $primary !default;
+$secondary-text-color: $secondary !default;
 $primary-background: #e5e5e5 !default;
 $white: #ffffff !default;
 $gray-100: #f6f9fc !default;
@@ -102,7 +104,6 @@ $default-color-opacity: rgba(182, 182, 182, 0.6) !default;
 $orange-color: #f96332 !default;
 
 $default: #344675 !default;
-$secondary: #f4f5f7 !default;
 $success: #00f2c3 !default;
 $info: #1d8cf8 !default;
 $warning: #ff8d72 !default;

src/components/workers-page/constraints-tab/constraints-tab.component.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ConstraintTab(): JSX.Element {
+  return <h2>Ograniczenia</h2>;
+}

src/components/workers-page/management-page.component.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Divider, Tab } from "@material-ui/core";
+import TabContext from "@material-ui/lab/TabContext";
+import TabList from "@material-ui/lab/TabList";
+import TabPanel from "@material-ui/lab/TabPanel";
+import ShiftTab from "./shifts-tab/shifts-tab.component";
+import ConstraintTab from "./constraints-tab/constraints-tab.component";
+import WorkersTab from "./workers-tab/workers-tab.component";
+import { ImportButtonsComponent } from "../schedule-page/import-buttons/import-buttons.component";
+
+interface TabData {
+  label: string;
+  component: JSX.Element;
+}
+
+export default function ManagementPage(): JSX.Element {
+  const tabs: TabData[] = [
+    { label: "Pracownicy", component: <WorkersTab /> },
+    { label: "Zmiany", component: <ShiftTab /> },
+    { label: "Ograniczenia", component: <ConstraintTab /> },
+  ];
+
+  const [tab, setTab] = React.useState(tabs[0].label);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newTab: string): void => {
+    setTab(newTab);
+  };
+
+  return (
+    <div className="management-page">
+      {/* TODO: Remove ImportButtonsComponent after development*/}
+      <ImportButtonsComponent />
+      <h1>Panel zarządzania</h1>
+      <Divider />
+      <TabContext value={tab}>
+        <TabList onChange={handleChange} textColor={"primary"} indicatorColor={"primary"}>
+          {tabs.map((tab) => (
+            <Tab label={tab.label} value={tab.label} />
+          ))}
+        </TabList>
+        <Divider />
+        {tabs.map((tab) => (
+          <TabPanel value={tab.label}>{tab.component}</TabPanel>
+        ))}
+      </TabContext>
+    </div>
+  );
+}

src/components/workers-page/shifts-tab/shifts-tab.component.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ShiftTab(): JSX.Element {
+  return <h2>Zmiany</h2>;
+}

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import { WorkerType, WorkerTypeHelper } from "../../../common-models/worker-info.model";
+import { Button } from "@material-ui/core";
+import { useSelector } from "react-redux";
+import { ApplicationStateModel } from "../../../state/models/application-state.model";
+
+interface WorkerData {
+  name: string;
+  type: WorkerType;
+  time: number;
+}
+
+export default function WorkersTab(): JSX.Element {
+  const { type, time } = useSelector(
+    (state: ApplicationStateModel) => state.scheduleData.present.employee_info
+  );
+  const [workerData, setWorkerData] = useState([] as WorkerData[]);
+
+  useEffect(() => {
+    const newWorkerData = Object.keys(type).map(
+      (key): WorkerData => {
+        return { name: key, type: type[key], time: time[key] };
+      }
+    );
+    setWorkerData(newWorkerData);
+  }, [type, time, setWorkerData]);
+
+  return (
+    <>
+      <Button>Stanowisko</Button>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Imię i nazwisko</TableCell>
+              <TableCell align="left">Stanowisko</TableCell>
+              <TableCell align="left">Wymiar pracy</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {workerData.map((worker) => (
+              <TableRow key={worker.name}>
+                <TableCell component="th" scope="row">
+                  {worker.name}
+                </TableCell>
+                <TableCell align="left">{WorkerTypeHelper.translate(worker.type)}</TableCell>
+                <TableCell align="left">{worker.time}</TableCell>
+                <TableCell align="right">
+                  <Button>Edytuj</Button>
+                </TableCell>
+                <TableCell align="right">
+                  <Button>Usuń</Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
+}