Merge branch 'develop' into TASK-94-Management-page-sketch

public/electron.js

@@ -11,6 +11,7 @@ const env = dotenv.config().parsed;
 function createWindow() {
     mainWindow = new BrowserWindow({show: false});
     mainWindow.maximize();
+    mainWindow.removeMenu();
     mainWindow.show();
     mainWindow.loadURL(isDev ? `http://localhost:${env.PORT}` : `file://${path.join(__dirname, "../build/index.html")}`);
     mainWindow.on("closed", () => (mainWindow = null));

src/app.tsx

@@ -3,11 +3,13 @@ import React from "react";
 import SchedulePage from "./components/schedule-page/schedule-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";
 
 function App(): JSX.Element {
   return (
     <React.Fragment>
       <CustomGlobalHotKeys />
+      <Header />
       <Switch>
         <Route path="/" component={SchedulePage} exact />
         <Route path="/management" component={ManagementPage} />

src/assets/styles/styles-all.scss

@@ -23,5 +23,7 @@
 @import "styles/custom/tables";
 @import "styles/custom/toolbar";
 @import "styles/custom/add-worker-modal";
+@import "styles/custom/header";
 @import "styles/custom/month-switch";
 @import "styles/custom/management_page";
+@import "styles/custom/autocomplete";

src/assets/styles/styles/custom/_autocomplete.scss

@@ -0,0 +1,21 @@
+.listbox {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  background-color: $white;
+  list-style: none;
+  overflow: auto;
+  max-height: 200;
+  & li {
+    &:active {
+      background-color: "#2977f5";
+      color: "white";
+    }
+    &[data-focus="true"] {
+      background-color: "#4a8df6";
+      color: "white";
+      cursor: "pointer";
+    }
+  }
+}

src/assets/styles/styles/custom/_header.scss

@@ -0,0 +1,18 @@
+#header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 52px;
+  background-color: $primary-header-color;
+  padding: 0 20px 0 20px;
+  align-items: center;
+  justify-content: left;
+
+  #AssignmentIndIcon {
+    color: $header-text-color;
+  }
+
+  .filler {
+    flex-grow: 1;
+  }
+}

src/assets/styles/styles/custom/_month-switch.scss

@@ -4,7 +4,7 @@
   font-size: 16px;
   letter-spacing: 1px;
   * {
-    color: $primary-text-color;
+    color: $header-text-color;
   }
   span {
     margin: 5px;

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

@@ -8,6 +8,10 @@ $enable-transitions: true !default;
 $enable-grid-classes: true !default;
 $enable-print-styles: true !default;
 
+// Header
+$primary-header-color: #1d3557 !default;
+$header-text-color: #ffffff !default;
+
 // Color system
 
 $primary: #1d3557 !default;

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

@@ -0,0 +1,63 @@
+import { useAutocomplete } from "@material-ui/lab";
+import React, { useEffect, useState } from "react";
+
+interface AutocompleteOptions<T> {
+  options: T[];
+  getOptionLabel: (option: T) => string;
+  onValueChange: (newValue: T) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+export function AutocompleteComponent<T>({
+  className = "",
+  options,
+  getOptionLabel,
+  onValueChange,
+  onKeyDown,
+}: AutocompleteOptions<T>): JSX.Element {
+  const [value, setValue] = useState<T>();
+  useEffect(() => {
+    if (value) {
+      onValueChange(value);
+    }
+  }, [value, onValueChange]);
+
+  const {
+    getRootProps,
+    getInputProps,
+    getListboxProps,
+    getOptionProps,
+    groupedOptions,
+  } = useAutocomplete({
+    options,
+    getOptionLabel,
+  });
+
+  return (
+    <div>
+      <div {...getRootProps()}>
+        <input
+          className={className}
+          autoFocus={true}
+          value={value && getOptionLabel(value)}
+          {...getInputProps()}
+          onKeyDown={onKeyDown}
+        />
+      </div>
+      {groupedOptions.length > 0 ? (
+        <ul {...getListboxProps()} className="listbox">
+          {groupedOptions.map((option, index) => (
+            <li
+              {...getOptionProps({ option, index })}
+              onClick={(): void => {
+                setValue(option);
+              }}
+            >
+              {getOptionLabel(option)}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { MonthSwitchComponent } from "../month-switch/month-switch.component";
+import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
+
+export default function Header(): JSX.Element {
+  return (
+    <>
+      <div id={"header"}>
+        <AssignmentIndIcon id={"AssignmentIndIcon"} />
+        <MonthSwitchComponent />
+        <div className={"filler"} />
+      </div>
+    </>
+  );
+}

src/components/common-components/month-switch/month-switch.component.tsx

@@ -9,7 +9,7 @@ import { StringHelper } from "../../../helpers/string.helper";
 interface MonthSwitchOpions {
   key?: string;
 }
-export function MonthSwitchComponent(options: MonthSwitchOpions) {
+export function MonthSwitchComponent(options: MonthSwitchOpions): JSX.Element {
   const arrowSize = "small";
   /* eslint-disable @typescript-eslint/camelcase */
   const { month_number, year } = useSelector(

src/components/schedule-page/table/schedule/schedule-parts/base-cell/base-cell-input.component.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { CellManagementKeys } from "./base-cell.component";
+
+export interface BaseCellInputOptions {
+  className: string;
+  onValueChange: (value: string) => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+export function BaseCellInputComponent({
+  className,
+  onValueChange,
+  onKeyDown,
+}: BaseCellInputOptions): JSX.Element {
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {
+    if (e.key === CellManagementKeys.Enter) {
+      onValueChange(e.currentTarget.value);
+      return;
+    }
+    onKeyDown(e);
+  }
+
+  return <input autoFocus={true} className={className} onKeyDown={handleKeyDown} />;
+}

src/components/schedule-page/table/schedule/schedule-parts/base-cell/base-cell.component.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { ColorHelper } from "../../../../../../helpers/colors/color.helper";
+import { CellColorSet } from "../../../../../../helpers/colors/cell-color-set.model";
+import { BaseCellInputComponent, BaseCellInputOptions } from "./base-cell-input.component";
+
+export enum CellManagementKeys {
+  Enter = "Enter",
+  Escape = "Escape",
+}
+
+export interface BaseCellOptions {
+  index: number;
+  value: string;
+  style?: CellColorSet;
+  isBlocked: boolean;
+  isPointerOn: boolean;
+  isSelected: boolean;
+  onClick?: () => void;
+  onContextMenu?: () => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onValueChange?: (value: string) => void;
+  onBlur?: () => void;
+  input?: React.FC<BaseCellInputOptions>;
+}
+
+export function BaseCellComponent({
+  index,
+  value,
+  style = ColorHelper.DEFAULT_COLOR_SET,
+  isBlocked,
+  isSelected,
+  isPointerOn,
+  onKeyDown,
+  onValueChange,
+  onContextMenu,
+  onClick,
+  onBlur,
+  input: InputComponent = BaseCellInputComponent,
+}: BaseCellOptions): JSX.Element {
+  function handleContextMenu(e: React.MouseEvent): void {
+    e.preventDefault();
+    onContextMenu && onContextMenu();
+  }
+  function _onKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {
+    if (e.key === CellManagementKeys.Enter) {
+      onValueChange && onValueChange(e.currentTarget.value);
+      return;
+    }
+    onKeyDown && onKeyDown(e);
+  }
+  function _onValueChange(newValue: string): void {
+    onValueChange && onValueChange(newValue);
+  }
+
+  //  #region view
+  return (
+    <td
+      className="cell"
+      onClick={(): void => {
+        !isBlocked && onClick && onClick();
+      }}
+      onContextMenu={handleContextMenu}
+      style={{
+        color: style.textColor.toString(),
+        backgroundColor:
+          isSelected || isPointerOn
+            ? ColorHelper.getHighlightColor().toString()
+            : style.backgroundColor.toString(),
+      }}
+      onBlur={(e): void => {
+        onBlur && onBlur();
+      }}
+    >
+      {isPointerOn && !isBlocked && (
+        <InputComponent
+          className="cell-input"
+          onValueChange={(value): void => _onValueChange(value)}
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => _onKeyDown(e)}
+        />
+      )}
+      {(!isPointerOn || (isPointerOn && isBlocked)) && <span>{value}</span>}
+    </td>
+  );
+  //#endregion
+}