Web:Files:Section: connect new filter input with backend API

products/ASC.Files/Client/src/pages/Home/Section/Filter/newIndex.js

@@ -1,22 +1,22 @@
-import React from 'react';
-import find from 'lodash/find';
-import result from 'lodash/result';
-import { withTranslation } from 'react-i18next';
-import { withRouter } from 'react-router';
-import { FilterType } from '@appserver/common/constants';
-import Loaders from '@appserver/common/components/Loaders';
-import FilterInput from '@appserver/common/components/NewFilterInput';
-import { withLayoutSize } from '@appserver/common/utils';
-import { isMobileOnly, isMobile } from 'react-device-detect';
-import { inject, observer } from 'mobx-react';
-import withLoader from '../../../../HOCs/withLoader';
+import React from "react";
+import find from "lodash/find";
+import result from "lodash/result";
+import { withTranslation } from "react-i18next";
+import { withRouter } from "react-router";
+import { FilterType } from "@appserver/common/constants";
+import Loaders from "@appserver/common/components/Loaders";
+import FilterInput from "@appserver/common/components/NewFilterInput";
+import { withLayoutSize } from "@appserver/common/utils";
+import { isMobileOnly, isMobile } from "react-device-detect";
+import { inject, observer } from "mobx-react";
+import withLoader from "../../../../HOCs/withLoader";
 
 const getFilterType = (filterValues) => {
   const filterType = result(
     find(filterValues, (value) => {
-      return value.group === 'filter-filterType';
+      return value.group === "filter-filterType";
     }),
-    'key',
+    "key"
   );
 
   return filterType ? +filterType : null;
@@ -25,9 +25,9 @@ const getFilterType = (filterValues) => {
 const getAuthorType = (filterValues) => {
   const authorType = result(
     find(filterValues, (value) => {
-      return value.group === 'filter-author';
+      return value.group === "filter-author";
     }),
-    'key',
+    "key"
   );
 
   return authorType ? authorType : null;
@@ -41,12 +41,12 @@ const getSelectedItem = (filterValues, type) => {
 const getSearchParams = (filterValues) => {
   const searchParams = result(
     find(filterValues, (value) => {
-      return value.group === 'filter-folders';
+      return value.group === "filter-folders";
     }),
-    'key',
+    "key"
   );
 
-  return searchParams || 'true';
+  return searchParams || "true";
 };
 
 const SectionFilterContent = ({
@@ -58,7 +58,6 @@ const SectionFilterContent = ({
   isRecentFolder,
   isFavoritesFolder,
   sectionWidth,
-  isFiltered,
   viewAs,
   createThumbnails,
   setViewAs,
@@ -66,40 +65,42 @@ const SectionFilterContent = ({
   selectedFolderId,
   fetchFiles,
 }) => {
-  const filterColumnCount = window.innerWidth < 500 ? {} : { filterColumnCount: personal ? 2 : 3 };
+  const filterColumnCount =
+    window.innerWidth < 500 ? {} : { filterColumnCount: personal ? 2 : 3 };
 
   const onFilter = (data) => {
     const filterType = getFilterType(data) || null;
-    // const authorType = getAuthorType(data.filterValues);
+    const authorType = !!getAuthorType(data)
+      ? getAuthorType(data).includes("user_")
+        ? getAuthorType(data)
+        : `user_${getAuthorType(data)}`
+      : null;
     const withSubfolders = getSearchParams(data);
 
-    // const selectedItem = authorType ? getSelectedItem(data.filterValues, authorType) : null;
-    // const selectedFilterItem = {};
-    // if (selectedItem) {
-    //   selectedFilterItem.key = selectedItem.selectedItem.key;
-    //   selectedFilterItem.label = selectedItem.selectedItem.label;
-    //   selectedFilterItem.type = selectedItem.typeSelector;
-    // }
-
     const newFilter = filter.clone();
     newFilter.page = 0;
     newFilter.filterType = filterType;
-    // newFilter.authorType = authorType;
+    newFilter.authorType = authorType;
     newFilter.withSubfolders = withSubfolders;
-    // newFilter.selectedItem = selectedFilterItem;
 
     setIsLoading(true);
 
     fetchFiles(selectedFolderId, newFilter).finally(() => setIsLoading(false));
   };
 
-  const onSearch = (data) => {};
+  const onSearch = (data = "") => {
+    const newFilter = filter.clone();
+    newFilter.page = 0;
+    newFilter.search = data;
 
-  const onSort = (data) => {};
+    setIsLoading(true);
+
+    fetchFiles(selectedFolderId, newFilter).finally(() => setIsLoading(false));
+  };
 
   const onChangeViewAs = (view) => {
-    if (view === 'row') {
-      setViewAs('table');
+    if (view === "row") {
+      setViewAs("table");
     } else {
       setViewAs(view);
     }
@@ -114,77 +115,77 @@ const SectionFilterContent = ({
         ? [
             {
               key: FilterType.FoldersOnly.toString(),
-              group: 'filter-filterType',
-              label: t('Translations:Folders'),
+              group: "filter-filterType",
+              label: t("Translations:Folders"),
             },
           ]
-        : '';
+        : "";
 
     const allFiles =
       !isFavoritesFolder && !isRecentFolder
         ? [
             {
               key: FilterType.FilesOnly.toString(),
-              group: 'filter-filterType',
-              label: t('AllFiles'),
+              group: "filter-filterType",
+              label: t("AllFiles"),
             },
           ]
-        : '';
+        : "";
 
     const images = !isRecentFolder
       ? [
           {
             key: FilterType.ImagesOnly.toString(),
-            group: 'filter-filterType',
-            label: t('Images'),
+            group: "filter-filterType",
+            label: t("Images"),
           },
         ]
-      : '';
+      : "";
 
     const archives = !isRecentFolder
       ? [
           {
             key: FilterType.ArchiveOnly.toString(),
-            group: 'filter-filterType',
-            label: t('Archives'),
+            group: "filter-filterType",
+            label: t("Archives"),
           },
         ]
-      : '';
+      : "";
 
     const media = !isRecentFolder
       ? [
           {
             key: FilterType.MediaOnly.toString(),
-            group: 'filter-filterType',
-            label: t('Media'),
+            group: "filter-filterType",
+            label: t("Media"),
           },
         ]
-      : '';
+      : "";
 
     const typeOptions = [
       {
-        key: 'filter-filterType',
-        group: 'filter-filterType',
-        label: t('Common:Type'),
+        key: "filter-filterType",
+        group: "filter-filterType",
+        label: t("Common:Type"),
         isHeader: true,
       },
       {
         key: FilterType.DocumentsOnly.toString(),
-        group: 'filter-filterType',
-        label: t('Common:Documents'),
+        group: "filter-filterType",
+        label: t("Common:Documents"),
       },
       ...folders,
       {
         key: FilterType.SpreadsheetsOnly.toString(),
-        group: 'filter-filterType',
-        label: t('Translations:Spreadsheets'),
+        group: "filter-filterType",
+        label: t("Translations:Spreadsheets"),
       },
       ...archives,
 
       {
         key: FilterType.PresentationsOnly.toString(),
-        group: 'filter-filterType',
-        label: t('Translations:Presentations'),
+        group: "filter-filterType",
+        label: t("Translations:Presentations"),
       },
       ...images,
       ...media,
@@ -196,22 +197,22 @@ const SectionFilterContent = ({
     if (!personal) {
       filterOptions.push(
         {
-          key: 'filter-author',
-          group: 'filter-author',
-          label: t('ByAuthor'),
+          key: "filter-author",
+          group: "filter-author",
+          label: t("ByAuthor"),
           isHeader: true,
         },
         {
-          key: 'user',
-          group: 'filter-author',
+          key: "user",
+          group: "filter-author",
           label: usersCaption,
           isSelector: true,
-          defaultOptionLabel: t('Common:MeLabel'),
-          defaultSelectLabel: t('Common:Select'),
+          defaultOptionLabel: t("Common:MeLabel"),
+          defaultSelectLabel: t("Common:Select"),
           groupsCaption,
           defaultOption: user,
           selectedItem,
-        },
+        }
       );
     }
 
@@ -220,19 +221,19 @@ const SectionFilterContent = ({
     if (!isRecentFolder && !isFavoritesFolder)
       filterOptions.push(
         {
-          key: 'filter-folders',
-          group: 'filter-folders',
-          label: t('Translations:Folders'),
+          key: "filter-folders",
+          group: "filter-folders",
+          label: t("Translations:Folders"),
           isHeader: true,
           withoutHeader: true,
           isLast: true,
         },
         {
-          key: 'false',
-          group: 'filter-folders',
-          label: t('NoSubfolders'),
+          key: "false",
+          group: "filter-folders",
+          label: t("NoSubfolders"),
           isToggle: true,
-        },
+        }
       );
 
     return filterOptions;
@@ -241,7 +242,7 @@ const SectionFilterContent = ({
   const getSelectedFilterData = () => {
     const selectedFilterData = {
       filterValues: [],
-      sortDirection: filter.sortOrder === 'ascending' ? 'asc' : 'desc',
+      sortDirection: filter.sortOrder === "ascending" ? "asc" : "desc",
       sortId: filter.sortBy,
     };
 
@@ -250,21 +251,21 @@ const SectionFilterContent = ({
     if (filter.filterType) {
       selectedFilterData.filterValues.push({
         key: `${filter.filterType}`,
-        group: 'filter-filterType',
+        group: "filter-filterType",
       });
     }
 
     if (filter.authorType) {
       selectedFilterData.filterValues.push({
         key: `${filter.authorType}`,
-        group: 'filter-author',
+        group: "filter-author",
       });
     }
 
-    if (filter.withSubfolders === 'false') {
+    if (filter.withSubfolders === "false") {
       selectedFilterData.filterValues.push({
         key: filter.withSubfolders,
-        group: 'filter-folders',
+        group: "filter-folders",
       });
     }
 
@@ -274,14 +275,14 @@ const SectionFilterContent = ({
   const getViewSettingsData = () => {
     const viewSettings = [
       {
-        value: 'row',
-        label: t('ViewList'),
-        icon: '/static/images/view-rows.react.svg',
+        value: "row",
+        label: t("ViewList"),
+        icon: "/static/images/view-rows.react.svg",
       },
       {
-        value: 'tile',
-        label: t('ViewTiles'),
-        icon: '/static/images/view-tiles.react.svg',
+        value: "tile",
+        label: t("ViewTiles"),
+        icon: "/static/images/view-tiles.react.svg",
         callback: createThumbnails,
       },
     ];
@@ -291,17 +292,17 @@ const SectionFilterContent = ({
 
   const getSortData = () => {
     const commonOptions = [
-      { key: 'DateAndTime', label: t('ByLastModifiedDate'), default: true },
-      { key: 'DateAndTimeCreation', label: t('ByCreationDate'), default: true },
-      { key: 'AZ', label: t('ByTitle'), default: true },
-      { key: 'Type', label: t('Common:Type'), default: true },
-      { key: 'Size', label: t('Common:Size'), default: true },
+      { key: "DateAndTime", label: t("ByLastModifiedDate"), default: true },
+      { key: "DateAndTimeCreation", label: t("ByCreationDate"), default: true },
+      { key: "AZ", label: t("ByTitle"), default: true },
+      { key: "Type", label: t("Common:Type"), default: true },
+      { key: "Size", label: t("Common:Size"), default: true },
     ];
 
     if (!personal)
       commonOptions.push({
-        key: 'Author',
-        label: t('ByAuthor'),
+        key: "Author",
+        label: t("ByAuthor"),
         default: true,
       });
 
@@ -316,63 +317,71 @@ const SectionFilterContent = ({
       getViewSettingsData={getViewSettingsData}
       selectedFilterData={getSelectedFilterData()}
       onFilter={onFilter}
+      onSearch={onSearch}
       onChangeViewAs={onChangeViewAs}
       viewAs={viewAs}
-      directionAscLabel={t('Common:DirectionAscLabel')}
-      directionDescLabel={t('Common:DirectionDescLabel')}
-      placeholder={t('Common:Search')}
+      directionAscLabel={t("Common:DirectionAscLabel")}
+      directionDescLabel={t("Common:DirectionDescLabel")}
+      placeholder={t("Common:Search")}
       // isReady={isReady}
       {...filterColumnCount}
-      contextMenuHeader={t('Common:AddFilter')}
+      contextMenuHeader={t("Common:AddFilter")}
+      addUserHeader={t("SharingPanel:LinkText")}
     />
   );
 };
 
-export default inject(({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
-  const {
-    fetchFiles,
-    filter,
-    setIsLoading,
-    setViewAs,
-    viewAs,
-    files,
-    folders,
-    createThumbnails,
-  } = filesStore;
+export default inject(
+  ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
+    const {
+      fetchFiles,
+      filter,
+      setIsLoading,
+      setViewAs,
+      viewAs,
+      files,
+      folders,
+      createThumbnails,
+    } = filesStore;
 
-  const { user } = auth.userStore;
-  const { customNames, culture, personal } = auth.settingsStore;
-  const { isFavoritesFolder, isRecentFolder } = treeFoldersStore;
+    const { user } = auth.userStore;
+    const { customNames, culture, personal } = auth.settingsStore;
+    const { isFavoritesFolder, isRecentFolder } = treeFoldersStore;
 
-  const { search, filterType, authorType } = filter;
-  const isFiltered =
-    (!!files.length || !!folders.length || search || filterType || authorType) &&
-    !(treeFoldersStore.isPrivacyFolder && isMobile);
+    const { search, filterType, authorType } = filter;
+    const isFiltered =
+      (!!files.length ||
+        !!folders.length ||
+        search ||
+        filterType ||
+        authorType) &&
+      !(treeFoldersStore.isPrivacyFolder && isMobile);
 
-  return {
-    customNames,
-    user,
-    selectedFolderId: selectedFolderStore.id,
-    selectedItem: filter.selectedItem,
-    filter,
-    viewAs,
-    isFiltered,
-    isFavoritesFolder,
-    isRecentFolder,
+    return {
+      customNames,
+      user,
+      selectedFolderId: selectedFolderStore.id,
+      selectedItem: filter.selectedItem,
+      filter,
+      viewAs,
+      isFiltered,
+      isFavoritesFolder,
+      isRecentFolder,
 
-    setIsLoading,
-    fetchFiles,
-    setViewAs,
-    createThumbnails,
+      setIsLoading,
+      fetchFiles,
+      setViewAs,
+      createThumbnails,
 
-    personal,
-  };
-})(
+      personal,
+    };
+  }
+)(
   withRouter(
     withLayoutSize(
-      withTranslation(['Home', 'Common', 'Translations'])(
-        withLoader(observer(SectionFilterContent))(<Loaders.Filter />),
-      ),
-    ),
-  ),
+      withTranslation(["Home", "Common", "SharingPanel", "Translations"])(
+        withLoader(observer(SectionFilterContent))(<Loaders.Filter />)
+      )
+    )
+  )
 );

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

@@ -1,4 +1,5 @@
-export { default as SectionHeaderContent } from './Header';
-export { default as SectionBodyContent } from './Body';
-export { default as SectionFilterContent } from './Filter/newIndex';
-export { default as SectionPagingContent } from './Paging';
+export { default as SectionHeaderContent } from "./Header";
+export { default as SectionBodyContent } from "./Body";
+export { default as SectionFilterContent } from "./Filter/newIndex";
+// export { default as SectionFilterContent } from "./Filter";
+export { default as SectionPagingContent } from "./Paging";

products/ASC.Files/Server/DocStore

@@ -1 +1 @@
-Subproject commit 2bb4d878b42e8c648dd44fed7d445163772551fa
+Subproject commit de099e764df4f1039d66b82c0b5ca61b13f5ed25