Task 17 modal do eksportu

cypress/integration/e2e/table/load-schedule.spec.ts

@@ -31,6 +31,7 @@ context("Load schedule", () => {
     cy.loadScheduleToMonth();
     cy.get("[data-cy=file-dropdown]").click();
     cy.get("[data-cy=export-schedule-button]").click();
+    cy.get("[data-cy=confirm-export-button]").click();
 
     cy.get("a[download]")
       .then(

src/assets/styles/styles-all.scss

@@ -45,3 +45,4 @@
 @import "styles/custom/shift-edit-drawer";
 @import "styles/custom/selector";
 @import "styles/custom/cell-details";
+@import "styles/custom/export-modal";

src/assets/styles/styles/custom/_dropdown.scss

@@ -78,3 +78,10 @@
 #contract-time-dropdown-onTopButton {
   width: 112px;
 }
+
+#extension,
+#extension-onTopButton {
+  width: 100px;
+  z-index: 200;
+  position: relative;
+}

src/assets/styles/styles/custom/_export-modal.scss

@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public 
+ * License, v. 2.0. If a copy of the MPL was not distributed with this 
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+@import "variables";
+.label {
+  color: $primary-header-color;
+  font-size: $font-size-lg;
+  font-family: $font-family-primary;
+  font-weight: $font-weight-extra-bold;
+  line-height: $modal-title-line-height;
+}

src/components/common-components/modal/export-modal/export.modal.component.tsx

@@ -0,0 +1,140 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import {
+  Checkbox,
+  CheckboxProps,
+  FormControlLabel,
+  FormGroup,
+  withStyles,
+} from "@material-ui/core";
+import { blue } from "@material-ui/core/colors";
+import React from "react";
+import { Button } from "../..";
+import { ScheduleDataModel } from "../../../../common-models/schedule-data.model";
+import { ScheduleExportLogic } from "../../../../logic/schedule-exporter/schedule-export.logic";
+import { ButtonData, DropdownButtons } from "../../dropdown-buttons/dropdown-buttons.component";
+import DefaultModal from "../modal.component";
+
+export interface ExportModalComponent {
+  setOpen: (open: boolean) => void;
+  open: boolean;
+  model: ScheduleDataModel;
+}
+const BlueCheckBox = withStyles({
+  root: {
+    color: blue[400],
+    "&$checked": {
+      color: blue[600],
+    },
+  },
+  checked: {},
+})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
+
+export default function ExportModal(options: ExportModalComponent): JSX.Element {
+  const { setOpen, open, model } = options;
+  const [exportMode, setexportMode] = React.useState("XLSX");
+  const handleClose = (): void => {
+    setOpen(false);
+  };
+  const date = new Date();
+  const DEFAULT_FILENAME = `${date.getDate()}_${date.getMonth() + 1}_${date.getFullYear()}.xlsx`;
+
+  const [exportOptions, setExportOptions] = React.useState({
+    extraWorkers: { value: true, label: "dzienni pracownicy" },
+    overtime: { value: true, label: "nadgodzinny" },
+  });
+
+  const exportExtensions = {
+    xlsx: (): void => {
+      new ScheduleExportLogic(
+        model,
+        exportOptions.overtime.value,
+        exportOptions.extraWorkers.value
+      ).formatAndSave(DEFAULT_FILENAME);
+    },
+  };
+  const handleExport = (): void => {
+    exportExtensions[exportMode.toLowerCase()]();
+    setOpen(false);
+  };
+
+  const btnData: ButtonData[] = [];
+  for (const key of Object.keys(exportExtensions)) {
+    const button: ButtonData = {
+      label: key.toUpperCase(),
+      action: () => setexportMode(key.toUpperCase()),
+    };
+    btnData.push(button);
+  }
+
+  const title = "Pobierz plan";
+
+  const footer = (
+    <div>
+      <Button onClick={handleExport} size="small" variant="primary" data-cy="confirm-export-button">
+        Potwierdż
+      </Button>
+      <Button onClick={handleClose} size="small" variant="secondary">
+        Anuluj
+      </Button>
+    </div>
+  );
+  const handleChange = (event): void => {
+    setExportOptions({
+      ...exportOptions,
+      [event.target.name]: {
+        value: event.target.checked,
+        label: exportOptions[event.target.name].label,
+      },
+    });
+  };
+
+  const body = (
+    <div>
+      <div style={{ display: "flex", msFlexDirection: "row" }}>
+        <p className="label">Format pliku: </p>
+        <div style={{ top: "50%", marginTop: "-15px" }}>
+          <DropdownButtons
+            buttons={btnData}
+            mainLabel={exportMode}
+            buttonVariant="secondary"
+            variant="extension"
+          />
+        </div>
+      </div>
+      <div>
+        <p className="label">Opcje pliku: </p>
+        <FormGroup row>
+          {Object.keys(exportOptions).map((key) => (
+            <FormControlLabel
+              style={{ color: "black" }}
+              control={
+                <BlueCheckBox
+                  checked={exportOptions[key].value}
+                  onChange={handleChange}
+                  name={key}
+                />
+              }
+              label={exportOptions[key].label}
+            />
+          ))}
+        </FormGroup>
+      </div>
+    </div>
+  );
+
+  return (
+    <div>
+      <DefaultModal
+        height={500}
+        open={open}
+        setOpen={setOpen}
+        title={title}
+        body={body}
+        footer={footer}
+      />
+    </div>
+  );
+}

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

@@ -11,71 +11,79 @@ import { Box, Divider, Grid, IconButton } from "@material-ui/core";
 import { MdClose } from "react-icons/md";
 import ScssVars from "../../../assets/styles/styles/custom/_variables.module.scss";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    modal: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      position: "relative",
-    },
-    paper: {
-      backgroundColor: "#FFFFFF",
-      border: "0",
-      boxShadow: "-3px 4px 20px 4px rgba(0, 0, 0, 0.15)",
-      padding: theme.spacing(2, 1, 3),
-      maxWidth: "600px",
-      maxHeight: "350px",
-      minWidth: "424px",
-      minHeight: "198px",
-    },
-    titleMargin: {
-      paddingTop: 15,
-      paddingLeft: 25,
-      paddingBottom: 15,
-    },
+const useStyles = (
+  height: number,
+  width: number
+): Record<
+  "modal" | "paper" | "titleMargin" | "modalBody" | "footer" | "exitButton" | "title",
+  string
+> =>
+  makeStyles((theme: Theme) =>
+    createStyles({
+      modal: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+      },
+      paper: {
+        backgroundColor: "#FFFFFF",
+        border: "0",
+        boxShadow: "-3px 4px 20px 4px rgba(0, 0, 0, 0.15)",
+        padding: theme.spacing(2, 1, 3),
+        maxWidth: `${height}px`,
+        maxHeight: `${width}px`,
+        minWidth: "424px",
+        minHeight: "198px",
+      },
+      titleMargin: {
+        paddingTop: 15,
+        paddingLeft: 25,
+        paddingBottom: 15,
+      },
 
-    modalBody: {
-      paddingTop: 25,
-      position: "relative",
-      overflow: "auto",
-      overflowX: "hidden",
-      maxHeight: "147px",
-      alignItems: "center",
-    },
+      modalBody: {
+        paddingTop: 25,
+        position: "relative",
+        overflow: "auto",
+        overflowX: "hidden",
+        alignItems: "center",
+      },
 
-    footer: {
-      paddingTop: 15,
-      position: "relative",
-    },
+      footer: {
+        paddingTop: 15,
+        position: "relative",
+      },
 
-    exitButton: {
-      color: ScssVars.primary,
-      marginRight: "20px",
-      marginBottom: "10px",
-    },
-    title: {
-      fontFamily: ScssVars.fontFamilyPrimary,
-      fontWeight: 700,
-      fontSize: 18,
-      lineHeight: 1.1,
-      color: ScssVars.primary,
-      display: "flex",
-      alignItems: "center",
-    },
-  })
-);
+      exitButton: {
+        color: ScssVars.primary,
+        marginRight: "20px",
+        marginBottom: "10px",
+      },
+      title: {
+        fontFamily: ScssVars.fontFamilyPrimary,
+        fontWeight: 700,
+        fontSize: 18,
+        lineHeight: 1.1,
+        color: ScssVars.primary,
+        display: "flex",
+        alignItems: "center",
+      },
+    })
+  )();
 
 export interface ModalOptions {
   setOpen: (open: boolean) => void;
   open: boolean;
   title: string;
   body: JSX.Element;
   footer: JSX.Element;
+  height?: number;
+  width?: number;
 }
 
 export default function DefaultModal(options: ModalOptions): JSX.Element {
-  const classes = useStyles();
+  const classes = useStyles(options.height ?? 350, options.width ?? 600);
   const { setOpen, open, title, body, footer } = options;
 
   const handleClose = (): void => {

src/components/schedule-page/import-buttons/import-buttons.component.tsx

@@ -5,7 +5,6 @@
 import React, { ChangeEvent, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { ScheduleError } from "../../../common-models/schedule-error.model";
-import { ScheduleExportLogic } from "../../../logic/schedule-exporter/schedule-export.logic";
 import { ActionModel } from "../../../state/models/action.model";
 import { ApplicationStateModel } from "../../../state/models/application-state.model";
 import { ScheduleDataActionCreator } from "../../../state/reducers/month-state/schedule-data/schedule-data.action-creator";
@@ -16,9 +15,9 @@ import {
 } from "../../common-components/dropdown-buttons/dropdown-buttons.component";
 import { useScheduleConverter } from "./hooks/use-schedule-converter";
 import ParseErrorModal from "../../common-components/modal/error-modal/errors.modal.component";
+import ExportModal from "../../common-components/modal/export-modal/export.modal.component";
 
 export function ImportButtonsComponent(): JSX.Element {
-  const DEFAULT_FILENAME = "grafik.xlsx";
   const { monthModel, setSrcFile, scheduleErrors } = useScheduleConverter();
   const fileUpload = useRef<HTMLInputElement>(null);
 
@@ -62,11 +61,12 @@ export function ImportButtonsComponent(): JSX.Element {
 
   function handleExport(): void {
     if (stateScheduleModel) {
-      new ScheduleExportLogic(stateScheduleModel).formatAndSave(DEFAULT_FILENAME);
+      setExportModalOpen(true);
     }
   }
 
   const [open, setOpen] = React.useState(false);
+  const [exportModalOpen, setExportModalOpen] = React.useState(false);
 
   return (
     <div>
@@ -88,6 +88,13 @@ export function ImportButtonsComponent(): JSX.Element {
       />
 
       {scheduleErrors.length !== 0 && <ParseErrorModal open={open} setOpen={setOpen} />}
+      {
+        <ExportModal
+          open={exportModalOpen}
+          setOpen={setExportModalOpen}
+          model={stateScheduleModel}
+        />
+      }
     </div>
   );
 }

src/logic/providers/schedule-provider.model.ts

@@ -32,7 +32,7 @@ export class Schedule {
     return {
       schedule_info: {
         month_number: sections.Metadata !== undefined ? sections.Metadata.monthNumber : 0,
-        year: sections.Metadata !== undefined ? sections.Metadata?.year : 0
+        year: sections.Metadata !== undefined ? sections.Metadata?.year : 0,
       },
       shifts: {
         ...sections.BabysitterInfo.workerShifts,