Merge pull request #46 from oxyno-zeta/issue-45

oxyno-zeta · web-flow · commit 172d8c957798 · 2023-01-18T21:15:19.000+01:00
diff --git a/dashboard/src/ExtraJS.d.ts b/dashboard/src/ExtraJS.d.ts
@@ -45,6 +45,12 @@ declare let ExtraJS: {
   // Return:
   // Will return a boolean to know if upload feature is enabled.
   isUploadFeatureEnabled(path: string): boolean;
+  // isDownloadAllSelectedFeatureEnabled will allow to know if download all selected feature is enabled.
+  // Params:
+  // - path: actual ui path
+  // Return:
+  // Will return a boolean to know if download all selected feature is enabled.
+  isDownloadAllSelectedFeatureEnabled(path: string): boolean;
   // GetCustomTheme will return a custom theme.
   // Return:
   // Should returns an object that will be taken by createTheme function.
diff --git a/dashboard/src/components/Dashboard/Dashboard.tsx b/dashboard/src/components/Dashboard/Dashboard.tsx
@@ -127,8 +127,8 @@ function Dashboard() {
   const [pageSize, setPageSize] = useState(50);
   // Data reloader help
   const [refreshKey, setRefreshKey] = useState(0);
-  // Deletion data
-  const [forDeletionData, setForDeletionData] = useState<Entry[]>([]);
+  // Selection data
+  const [selectedData, setSelectedData] = useState<Entry[]>([]);
   const [isDeletionManagerDialogOpened, setDeletionManagerDialogOpened] = useState<boolean>(false);
   // Upload modal
   const [isUploadDialogOpened, setUploadDialogOpened] = useState<boolean>(false);
@@ -141,8 +141,8 @@ function Dashboard() {
   useEffect(() => {
     // Start loading
     setLoading(true);
-    // Flush the deletion data
-    setForDeletionData([]);
+    // Flush the selected data
+    setSelectedData([]);
     // Flush filter
     setFilterModel({ items: [] });
     // Request
@@ -206,7 +206,7 @@ function Dashboard() {
         });
 
         // Save selected rows
-        setForDeletionData(selectedRows);
+        setSelectedData(selectedRows);
       }}
       onRowDoubleClick={(params) => {
         const { row } = params;
@@ -216,7 +216,7 @@ function Dashboard() {
           navigate(location.pathname + row.name, { replace: true });
         } else {
           // File detected, open file in another tab to download/open it
-          window.open(row.path, '_blank', 'noreferrer')?.focus();
+          window.open(row.path, '_blank', 'noreferrer noopener')?.focus();
         }
       }}
       autoHeight
@@ -274,7 +274,7 @@ function Dashboard() {
         }}
       />
       <DeletionManager
-        forDeletionData={forDeletionData}
+        forDeletionData={selectedData}
         dialogOkHandler={() => {
           setDeletionManagerDialogOpened(false);
           setRefreshKey(refreshKey + 1);
@@ -285,7 +285,8 @@ function Dashboard() {
         isDialogOpened={isDeletionManagerDialogOpened}
       />
       <PageHeader
-        isDeletionButtonEnabled={forDeletionData.length > 0}
+        isDeletionButtonEnabled={selectedData.length > 0}
+        isDownloadAllSelectedButtonEnabled={selectedData.length > 0}
         deletionButtonHandler={() => {
           setDeletionManagerDialogOpened(true);
         }}
@@ -295,6 +296,11 @@ function Dashboard() {
         settingsButtonHandler={() => {
           setSettingToolbarShowed(!isSettingToolbarShowed);
         }}
+        downloadAllSelectedButtonHandler={() => {
+          selectedData.forEach((row) => {
+            window.open(row.path, '_blank', 'noreferrer noopener');
+          });
+        }}
       />
       {mainElement}
     </>
diff --git a/dashboard/src/components/Dashboard/components/PageHeader/PageHeader.tsx b/dashboard/src/components/Dashboard/components/PageHeader/PageHeader.tsx
@@ -9,20 +9,25 @@ import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
 import DeleteIcon from '@mui/icons-material/Delete';
 import SettingsIcon from '@mui/icons-material/Settings';
+import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
 import capitalize from 'capitalize';
 
 interface Props {
   isDeletionButtonEnabled: boolean;
+  isDownloadAllSelectedButtonEnabled: boolean;
   deletionButtonHandler: () => void;
   addButtonHandler: () => void;
   settingsButtonHandler: () => void;
+  downloadAllSelectedButtonHandler: () => void;
 }
 
 function PageHeader({
   isDeletionButtonEnabled,
+  isDownloadAllSelectedButtonEnabled,
   deletionButtonHandler,
   addButtonHandler,
   settingsButtonHandler,
+  downloadAllSelectedButtonHandler,
 }: Props) {
   // Get location from router
   const location = useLocation();
@@ -48,6 +53,11 @@ function PageHeader({
     ? ExtraJS.isDeleteFeatureEnabled(location.pathname)
     : true;
 
+  // Get download all selected feature enabled flag
+  const downloadAllSelectedFeatureEnabled = ExtraJS.isDownloadAllSelectedFeatureEnabled
+    ? ExtraJS.isDownloadAllSelectedFeatureEnabled(location.pathname)
+    : true;
+
   // Get upload feature enabled flag
   const uploadFeatureEnabled = ExtraJS.isUploadFeatureEnabled
     ? ExtraJS.isUploadFeatureEnabled(location.pathname)
@@ -76,6 +86,11 @@ function PageHeader({
         })}
       </Breadcrumbs>
       <Box sx={{ marginLeft: 'auto' }}>
+        {downloadAllSelectedFeatureEnabled && isDownloadAllSelectedButtonEnabled && (
+          <IconButton onClick={downloadAllSelectedButtonHandler}>
+            <DownloadForOfflineIcon />
+          </IconButton>
+        )}
         {deleteFeatureEnabled && isDeletionButtonEnabled && (
           <IconButton onClick={deletionButtonHandler}>
             <DeleteIcon />
diff --git a/documentation/docs/interfaces/dashboard.md b/documentation/docs/interfaces/dashboard.md
@@ -8,6 +8,7 @@ This interface provide those features:
 - Paginate list of results
 - Allow to delete files on specific path
 - Allow to upload files on specific path
+- Allow to download all selected files on current page
 - Upload files on local path
 - Create subpath and upload in it
 - Interface customizations
@@ -124,6 +125,12 @@ declare let ExtraJS: {
   // Return:
   // Will return a boolean to know if upload feature is enabled.
   isUploadFeatureEnabled(path: string): boolean;
+  // isDownloadAllSelectedFeatureEnabled will allow to know if download all selected feature is enabled.
+  // Params:
+  // - path: actual ui path
+  // Return:
+  // Will return a boolean to know if download all selected feature is enabled.
+  isDownloadAllSelectedFeatureEnabled(path: string): boolean;
   // GetCustomTheme will return a custom theme.
   // Return:
   // Should returns an object that will be taken by createTheme function.
