feat(export): add select all in export modal (#1192)

SocialGouv · Feb 17, 2021 · 2806550 · 2806550
1 parent 26c711e
commit 2806550
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 30 deletions.
diff --git a/src/components/modals/export-modal/export-category-options.tsx b/src/components/modals/export-modal/export-category-options.tsx
@@ -14,16 +14,18 @@ type ExportCategoryOptionsProps = {
   enabledExports: ExportTypesMap<boolean>;
   exportPaths: ExportTypesMap<string>;
   isValidPaths: ExportTypesMap<boolean>;
+  activeExports: ExportTypesMap<boolean>;
   setActiveExportValue: (exportType: ExportType, value: boolean) => void;
   setExportsPathsValue: (exportType: ExportType, value: string) => void;
 };
 
 const ExportCategoryOptions: FC<ExportCategoryOptionsProps> = ({
   exportCategory,
   enabledExports,
-  setActiveExportValue,
-  isValidPaths,
   exportPaths,
+  isValidPaths,
+  activeExports,
+  setActiveExportValue,
   setExportsPathsValue,
 }) => {
   const { t } = useTranslation();
@@ -46,6 +48,7 @@ const ExportCategoryOptions: FC<ExportCategoryOptionsProps> = ({
             setActiveExportValue={setActiveExportValue}
             exportPaths={exportPaths}
             setExportsPathsValue={setExportsPathsValue}
+            activeExports={activeExports}
           />
         ))}
     </Box>

diff --git a/src/components/modals/export-modal/export-checkbox.tsx b/src/components/modals/export-modal/export-checkbox.tsx
@@ -7,13 +7,15 @@ type ExportOptionProps = {
   label: string;
   isActive: boolean;
   disabledExplanation: string;
+  checked: boolean;
 };
 
 const ExportCheckbox: FC<ExportOptionProps> = ({
   setActiveExportValue,
   label,
   isActive,
   disabledExplanation,
+  checked,
 }) => {
   const onChange = useCallback(
     (event) => {
@@ -25,7 +27,7 @@ const ExportCheckbox: FC<ExportOptionProps> = ({
   return (
     <FormControlLabel
       disabled={!isActive}
-      control={<Checkbox onChange={onChange} />}
+      control={<Checkbox onChange={onChange} checked={checked} />}
       label={`${label}${
         !isActive && disabledExplanation ? ` (${disabledExplanation})` : ""
       }`}

diff --git a/src/components/modals/export-modal/export-controls.tsx b/src/components/modals/export-modal/export-controls.tsx
@@ -0,0 +1,79 @@
+import React, { FC } from "react";
+import Box from "@material-ui/core/Box";
+import { Button } from "@material-ui/core";
+import { FaFolderOpen } from "react-icons/fa";
+import { ExportType } from "./export-config";
+import { useTranslation } from "react-i18next";
+import { ExportTypesMap } from "./export-options";
+import { remote } from "electron";
+import path from "path";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+
+type ExportControlsProps = {
+  setActiveExportValue: (exportType: ExportType, value: boolean) => void;
+  setExportsPathsValue: (exportType: ExportType, value: string) => void;
+  activeExports: ExportTypesMap<boolean>;
+  exportPaths: ExportTypesMap<string>;
+  enabledExports: ExportTypesMap<boolean>;
+};
+
+const ExportControls: FC<ExportControlsProps> = ({
+  setActiveExportValue,
+  setExportsPathsValue,
+  activeExports,
+  exportPaths,
+  enabledExports,
+}) => {
+  const { t } = useTranslation();
+
+  const areAllBoxesChecked = Object.values(ExportType).every(
+    (exportType) => activeExports[exportType]
+  );
+
+  const setAllBoxes = (checked: boolean) => {
+    Object.values(ExportType)
+      .filter((exportType) => enabledExports[exportType])
+      .forEach((exportType) => {
+        setActiveExportValue(exportType, checked);
+      });
+  };
+
+  const toggleAllBoxes = () => {
+    setAllBoxes(!areAllBoxesChecked);
+  };
+
+  const browseForAll = async () => {
+    const filePath = await remote.dialog.showOpenDialog({
+      properties: ["openDirectory"],
+    });
+
+    Object.values(ExportType).forEach((exportType) => {
+      if (filePath.filePaths.length > 0) {
+        const folderPath = filePath.filePaths[0];
+        const filename = path.basename(exportPaths[exportType]);
+        setExportsPathsValue(exportType, `${folderPath}/${filename}`);
+      }
+    });
+  };
+
+  return (
+    <Box paddingBottom={1} display="flex" justifyContent="space-between">
+      <FormControlLabel
+        control={
+          <Checkbox checked={areAllBoxesChecked} onChange={toggleAllBoxes} />
+        }
+        label={
+          areAllBoxesChecked
+            ? t("exportModal.unselectAll")
+            : t("exportModal.selectAll")
+        }
+      />
+      <Button size="small" onClick={browseForAll} endIcon={<FaFolderOpen />}>
+        {t("exportModal.browseAll")}
+      </Button>
+    </Box>
+  );
+};
+
+export default ExportControls;
diff --git a/src/components/modals/export-modal/export-input.tsx b/src/components/modals/export-modal/export-input.tsx
@@ -1,4 +1,4 @@
-import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
 import Tooltip from "@material-ui/core/Tooltip";
 import Box from "@material-ui/core/Box";
 import React, { FC, useCallback } from "react";
@@ -56,11 +56,16 @@ const ExportInput: FC<ExportInputProps> = ({
         title={browseTitle}
         isvisible={(!isFilePickerDisabled).toString()}
       >
-        <div>
-          <Button onClick={onClick} disabled={isFilePickerDisabled}>
+        <Box paddingLeft={1}>
+          <IconButton
+            size="small"
+            color="secondary"
+            onClick={onClick}
+            disabled={isFilePickerDisabled}
+          >
             <FaFolderOpen />
-          </Button>
-        </div>
+          </IconButton>
+        </Box>
       </HideableTooltip>
     </Box>
   );

diff --git a/src/components/modals/export-modal/export-modal-content.tsx b/src/components/modals/export-modal/export-modal-content.tsx
@@ -96,10 +96,13 @@ const ExportModalContent: FC<ExportModalContentProps> = ({
   }, [exportPaths, setValidPaths]);
 
   const setActiveExportValue = (exportType: ExportType, value: boolean) =>
-    setActiveExports({ ...activeExports, [exportType]: value });
+    setActiveExports((activeExports) => ({
+      ...activeExports,
+      [exportType]: value,
+    }));
 
   const setExportsPathsValue = (exportType: ExportType, value: string) =>
-    setExportsPaths({ ...exportPaths, [exportType]: value });
+    setExportsPaths((exportPaths) => ({ ...exportPaths, [exportType]: value }));
 
   return (
     <>
@@ -110,6 +113,7 @@ const ExportModalContent: FC<ExportModalContentProps> = ({
           isValidPaths={validPaths}
           setActiveExportValue={setActiveExportValue}
           setExportsPathsValue={setExportsPathsValue}
+          activeExports={activeExports}
         />
       </DialogContent>
       <DialogActions>

diff --git a/src/components/modals/export-modal/export-options.tsx b/src/components/modals/export-modal/export-options.tsx
@@ -1,6 +1,8 @@
 import ExportCategoryOptions from "components/modals/export-modal/export-category-options";
 import React, { FC } from "react";
 import { ExportCategory, ExportType } from "./export-config";
+import Box from "@material-ui/core/Box";
+import ExportControls from "./export-controls";
 
 export type ExportTypesMap<ValueType> = {
   [exportType in ExportType]: ValueType;
@@ -10,6 +12,7 @@ type ExportOptionsProps = {
   enabledExports: ExportTypesMap<boolean>;
   exportPaths: ExportTypesMap<string>;
   isValidPaths: ExportTypesMap<boolean>;
+  activeExports: ExportTypesMap<boolean>;
   setActiveExportValue: (exportType: ExportType, value: boolean) => void;
   setExportsPathsValue: (exportType: ExportType, value: string) => void;
 };
@@ -18,22 +21,33 @@ const ExportOptions: FC<ExportOptionsProps> = ({
   enabledExports,
   exportPaths,
   isValidPaths,
+  activeExports,
   setActiveExportValue,
   setExportsPathsValue,
-}) => (
-  <>
-    {Object.values(ExportCategory).map((exportCategory) => (
-      <ExportCategoryOptions
-        exportCategory={exportCategory}
-        key={exportCategory}
-        enabledExports={enabledExports}
-        exportPaths={exportPaths}
-        isValidPaths={isValidPaths}
+}) => {
+  return (
+    <Box>
+      <ExportControls
         setActiveExportValue={setActiveExportValue}
         setExportsPathsValue={setExportsPathsValue}
+        activeExports={activeExports}
+        exportPaths={exportPaths}
+        enabledExports={enabledExports}
       />
-    ))}
-  </>
-);
+      {Object.values(ExportCategory).map((exportCategory) => (
+        <ExportCategoryOptions
+          exportCategory={exportCategory}
+          key={exportCategory}
+          enabledExports={enabledExports}
+          exportPaths={exportPaths}
+          isValidPaths={isValidPaths}
+          activeExports={activeExports}
+          setActiveExportValue={setActiveExportValue}
+          setExportsPathsValue={setExportsPathsValue}
+        />
+      ))}
+    </Box>
+  );
+};
 
 export default ExportOptions;
diff --git a/src/components/modals/export-modal/export-type-option.tsx b/src/components/modals/export-modal/export-type-option.tsx
@@ -1,9 +1,13 @@
 import ExportCheckbox from "components/modals/export-modal/export-checkbox";
-import { exportConfig } from "components/modals/export-modal/export-config";
+import {
+  exportConfig,
+  ExportType,
+} from "components/modals/export-modal/export-config";
 import ExportInput from "components/modals/export-modal/export-input";
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { ExportTypesMap } from "./export-options";
 
 const ExportContainer = styled.div`
   display: flex;
@@ -12,12 +16,13 @@ const ExportContainer = styled.div`
 `;
 
 type ExportTypeOptionProps = {
-  exportType;
-  enabledExports;
+  exportType: ExportType;
+  enabledExports: ExportTypesMap<boolean>;
   isPathValid: boolean;
-  setActiveExportValue;
-  exportPaths;
-  setExportsPathsValue;
+  exportPaths: ExportTypesMap<string>;
+  setActiveExportValue: (exportType: ExportType, value: boolean) => void;
+  setExportsPathsValue: (exportType: ExportType, value: string) => void;
+  activeExports: ExportTypesMap<boolean>;
 };
 
 const ExportTypeOption: FC<ExportTypeOptionProps> = ({
@@ -27,6 +32,7 @@ const ExportTypeOption: FC<ExportTypeOptionProps> = ({
   setActiveExportValue,
   exportPaths,
   setExportsPathsValue,
+  activeExports,
 }) => {
   const { t } = useTranslation();
 
@@ -41,6 +47,7 @@ const ExportTypeOption: FC<ExportTypeOptionProps> = ({
         disabledExplanation={t(
           exportConfig[exportType].disabledExplanation || ""
         )}
+        checked={activeExports[exportType]}
       />
       <ExportInput
         exportFilePath={exportPaths[exportType]}

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -248,7 +248,10 @@
       "buttonTitle": "Export",
       "EXCHANGE_WITH_ERMS": "Exchange with an ERMS",
       "RECORDS_INVENTORY": "Records inventory",
-      "AUDIT": "Audit"
+      "AUDIT": "Audit",
+      "selectAll": "Select all",
+      "unselectAll": "Unselect all",
+      "browseAll": "Browse for all"
     },
     "audit": {
       "fileCountInfoTitle": "File count",

diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -248,7 +248,10 @@
       "buttonTitle": "Exporter",
       "EXCHANGE_WITH_ERMS": "Export pour transfert",
       "RECORDS_INVENTORY": "Récolement",
-      "AUDIT": "Audit"
+      "AUDIT": "Audit",
+      "selectAll": "Tout sélectionner",
+      "unselectAll": "Tout désélectionner",
+      "browseAll": "Parcourir pour tous"
     },
     "audit": {
       "fileCountInfoTitle": "Nombre de fichiers",