Feature/filtered header menu

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js

@@ -169,6 +169,8 @@ class FilesTableHeader extends React.Component {
       getHeaderMenu,
       filter,
       sectionWidth,
+      cbMenuItems,
+      getCheckboxItemLabel,
     } = this.props;
 
     const { sortBy, sortOrder } = filter;
@@ -177,47 +179,17 @@ class FilesTableHeader extends React.Component {
 
     const checkboxOptions = (
       <>
-        <DropDownItem label={t("All")} data-key="all" onClick={this.onSelect} />
-        <DropDownItem
-          label={t("Translations:Folders")}
-          data-key={FilterType.FoldersOnly}
-          onClick={this.onSelect}
-        />
-        <DropDownItem
-          label={t("Common:Documents")}
-          data-key={FilterType.DocumentsOnly}
-          onClick={this.onSelect}
-        />
-        <DropDownItem
-          label={t("Translations:Presentations")}
-          data-key={FilterType.PresentationsOnly}
-          onClick={this.onSelect}
-        />
-        <DropDownItem
-          label={t("Translations:Spreadsheets")}
-          data-key={FilterType.SpreadsheetsOnly}
-          onClick={this.onSelect}
-        />
-        <DropDownItem
-          label={t("Images")}
-          data-key={FilterType.ImagesOnly}
-          onClick={this.onSelect}
-        />
-        <DropDownItem
-          label={t("Media")}
-          data-key={FilterType.MediaOnly}
-          onClick={this.onSelect}
-        />
-        <DropDownItem
-          label={t("Archives")}
-          data-key={FilterType.ArchiveOnly}
-          onClick={this.onSelect}
-        />
-        <DropDownItem
-          label={t("AllFiles")}
-          data-key={FilterType.FilesOnly}
-          onClick={this.onSelect}
-        />
+        {cbMenuItems.map((key) => {
+          const label = getCheckboxItemLabel(t, key);
+          return (
+            <DropDownItem
+              key={key}
+              label={label}
+              data-key={key}
+              onClick={this.onSelect}
+            />
+          );
+        })}
       </>
     );
 
@@ -260,6 +232,8 @@ export default inject(
       filter,
       fetchFiles,
       canShare,
+      cbMenuItems,
+      getCheckboxItemLabel,
     } = filesStore;
     const { getHeaderMenu } = filesActionsStore;
     const { isPrivacyFolder } = treeFoldersStore;
@@ -280,6 +254,8 @@ export default inject(
       setIsLoading,
       fetchFiles,
       getHeaderMenu,
+      cbMenuItems,
+      getCheckboxItemLabel,
     };
   }
 )(

products/ASC.Files/Client/src/pages/Home/Section/Header/index.js

@@ -311,9 +311,13 @@ class SectionHeaderContent extends React.Component {
   };
 
   getMenuItems = () => {
-    const { t, getHeaderMenu } = this.props;
+    const { t, getHeaderMenu, cbMenuItems, getCheckboxItemLabel } = this.props;
 
     const headerMenu = getHeaderMenu(t);
+    const children = cbMenuItems.map((key, index) => {
+      const label = getCheckboxItemLabel(t, key);
+      return <DropDownItem key={key} label={label} data-index={index} />;
+    });
 
     let menu = [
       {
@@ -322,49 +326,7 @@ class SectionHeaderContent extends React.Component {
         isSeparator: true,
         isSelect: true,
         fontWeight: "bold",
-        children: [
-          <DropDownItem key="all" label={t("All")} data-index={0} />,
-          <DropDownItem
-            key={FilterType.FoldersOnly}
-            label={t("Translations:Folders")}
-            data-index={1}
-          />,
-          <DropDownItem
-            key={FilterType.DocumentsOnly}
-            label={t("Common:Documents")}
-            data-index={2}
-          />,
-          <DropDownItem
-            key={FilterType.PresentationsOnly}
-            label={t("Translations:Presentations")}
-            data-index={3}
-          />,
-          <DropDownItem
-            key={FilterType.SpreadsheetsOnly}
-            label={t("Translations:Spreadsheets")}
-            data-index={4}
-          />,
-          <DropDownItem
-            key={FilterType.ImagesOnly}
-            label={t("Images")}
-            data-index={5}
-          />,
-          <DropDownItem
-            key={FilterType.MediaOnly}
-            label={t("Media")}
-            data-index={6}
-          />,
-          <DropDownItem
-            key={FilterType.ArchiveOnly}
-            label={t("Archives")}
-            data-index={7}
-          />,
-          <DropDownItem
-            key={FilterType.FilesOnly}
-            label={t("AllFiles")}
-            data-index={8}
-          />,
-        ],
+        children,
         onSelect: this.onSelect,
       },
     ];
@@ -518,6 +480,8 @@ export default inject(
       isThirdPartySelection,
       setIsLoading,
       viewAs,
+      cbMenuItems,
+      getCheckboxItemLabel,
     } = filesStore;
     const { setAction } = fileActionStore;
     const {
@@ -545,6 +509,7 @@ export default inject(
       confirmDelete: settingsStore.confirmDelete,
       personal: auth.settingsStore.personal,
       viewAs,
+      cbMenuItems,
 
       setSelected,
       setAction,
@@ -557,6 +522,7 @@ export default inject(
       setDeleteDialogVisible,
       downloadAction,
       getHeaderMenu,
+      getCheckboxItemLabel,
     };
   }
 )(

products/ASC.Files/Client/src/store/FilesStore.js

@@ -1217,6 +1217,68 @@ class FilesStore {
     return newItem;
   }
 
+  get cbMenuItems() {
+    const { mediaViewersFormatsStore, iconFormatsStore } = this.formatsStore;
+    const {
+      isDocument,
+      isPresentation,
+      isSpreadsheet,
+      isArchive,
+    } = iconFormatsStore;
+    const { isImage, isVideo } = mediaViewersFormatsStore;
+
+    let cbMenu = ["all"];
+    const filesItems = [...this.files, ...this.folders];
+
+    if (this.folders.length) cbMenu.push(FilterType.FoldersOnly);
+    for (let item of filesItems) {
+      if (isDocument(item.fileExst)) cbMenu.push(FilterType.DocumentsOnly);
+      else if (isPresentation(item.fileExst))
+        cbMenu.push(FilterType.PresentationsOnly);
+      else if (isSpreadsheet(item.fileExst))
+        cbMenu.push(FilterType.SpreadsheetsOnly);
+      else if (isImage(item.fileExst)) cbMenu.push(FilterType.ImagesOnly);
+      else if (isVideo(item.fileExst)) cbMenu.push(FilterType.MediaOnly);
+      else if (isArchive(item.fileExst)) cbMenu.push(FilterType.ArchiveOnly);
+    }
+
+    const hasFiles = cbMenu.some(
+      (elem) => elem !== "all" && elem !== FilterType.DocumentsOnly
+    );
+
+    if (hasFiles) cbMenu.push(FilterType.FilesOnly);
+
+    cbMenu = cbMenu.filter((item, index) => cbMenu.indexOf(item) === index);
+
+    return cbMenu;
+  }
+
+  getCheckboxItemLabel = (t, key) => {
+    switch (key) {
+      case "all":
+        return t("All");
+      case FilterType.FoldersOnly:
+        return t("Translations:Folders");
+      case FilterType.DocumentsOnly:
+        return t("Common:Documents");
+      case FilterType.PresentationsOnly:
+        return t("Translations:Presentations");
+      case FilterType.SpreadsheetsOnly:
+        return t("Translations:Spreadsheets");
+      case FilterType.ImagesOnly:
+        return t("Images");
+      case FilterType.MediaOnly:
+        return t("Media");
+      case FilterType.ArchiveOnly:
+        return t("Archives");
+      case FilterType.FilesOnly:
+        return t("AllFiles");
+
+      default:
+        return "";
+    }
+  };
+
   get sortedFiles() {
     const {
       isSpreadsheet,

products/ASC.Files/Client/src/store/MediaViewersFormatsStore.js

@@ -44,6 +44,10 @@ class MediaViewersFormatsStore {
     return presentInArray(this.media, extension);
   };
 
+  isImage = (extension) => {
+    return presentInArray(this.images, extension);
+  };
+
   isMediaOrImage = (fileExst) => {
     if (this.media.includes(fileExst) || this.images.includes(fileExst)) {
       return true;