Web: Files: added select gallery items, fixed routing

products/ASC.Files/Client/src/Files.jsx

@@ -41,7 +41,10 @@ const HISTORY_URL = combineUrl(PROXY_HOMEPAGE_URL, "/:fileId/history");
 const PRIVATE_ROOMS_URL = combineUrl(PROXY_HOMEPAGE_URL, "/private");
 const FILTER_URL = combineUrl(PROXY_HOMEPAGE_URL, "/filter");
 const MEDIA_VIEW_URL = combineUrl(PROXY_HOMEPAGE_URL, "/#preview");
-const FORM_GALLERY_URL = combineUrl(PROXY_HOMEPAGE_URL, "/form-gallery");
+const FORM_GALLERY_URL = combineUrl(
+  PROXY_HOMEPAGE_URL,
+  "/form-gallery/:fileId"
+);
 
 if (!window.AppServer) {
   window.AppServer = {};

products/ASC.Files/Client/src/components/Article/MainButton/index.js

@@ -37,7 +37,8 @@ const ArticleMainButtonContent = (props) => {
     isCommonFolder,
     isRecycleBinFolder,
     history,
-    hasOFORMFilesGallery,
+    hasGalleryFiles,
+    currentFolderId,
   } = props;
   const inputFilesElement = React.useRef(null);
   const inputFolderElement = React.useRef(null);
@@ -100,7 +101,11 @@ const ArticleMainButtonContent = (props) => {
 
   const onShowGallery = () => {
     history.push(
-      combineUrl(AppServerConfig.proxyURL, config.homepage, `/form-gallery`)
+      combineUrl(
+        AppServerConfig.proxyURL,
+        config.homepage,
+        `/form-gallery/${currentFolderId}/`
+      )
     );
   };
 
@@ -141,7 +146,7 @@ const ArticleMainButtonContent = (props) => {
                   disabled: isPrivacy,
                   key: "form-file",
                 },
-                hasOFORMFilesGallery && {
+                hasGalleryFiles && {
                   className: "main-button_drop-down_sub",
                   label: t("Common:OFORMsGallery"),
                   onClick: onShowGallery,
@@ -168,7 +173,7 @@ const ArticleMainButtonContent = (props) => {
               disabled: isPrivacy,
               key: "form-file",
             },
-            hasOFORMFilesGallery && {
+            hasGalleryFiles && {
               className: "main-button_drop-down_sub",
               icon: "images/form.react.svg",
               label: t("Common:OFORMsGallery"),
@@ -239,6 +244,7 @@ const ArticleMainButtonContent = (props) => {
   }, [
     t,
     isPrivacy,
+    currentFolderId,
     onCreate,
     onShowSelectFileDialog,
     onUploadFileClick,
@@ -300,14 +306,21 @@ const ArticleMainButtonContent = (props) => {
 };
 
 export default inject(
-  ({ auth, filesStore, dialogsStore, uploadDataStore, treeFoldersStore }) => {
+  ({
+    auth,
+    filesStore,
+    dialogsStore,
+    uploadDataStore,
+    treeFoldersStore,
+    selectedFolderStore,
+  }) => {
     const {
       isLoaded,
       firstLoad,
       isLoading,
       fileActionStore,
       canCreate,
-      hasOFORMFilesGallery,
+      hasGalleryFiles,
     } = filesStore;
     const {
       isPrivacyFolder,
@@ -322,6 +335,8 @@ export default inject(
 
     const isArticleLoading = (!isLoaded || isLoading) && firstLoad;
 
+    const currentFolderId = selectedFolderStore.id;
+
     return {
       showText: auth.settingsStore.showText,
 
@@ -342,7 +357,8 @@ export default inject(
       isLoading,
       isLoaded,
       firstLoad,
-      hasOFORMFilesGallery,
+      hasGalleryFiles,
+      currentFolderId,
     };
   }
 )(

products/ASC.Files/Client/src/pages/FormGallery/Body.js

@@ -1,14 +1,35 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { observer, inject } from "mobx-react";
 import EmptyScreenContainer from "@appserver/components/empty-screen-container";
 import { withTranslation } from "react-i18next";
 import TileContainer from "./TilesView/sub-components/TileContainer";
 import FileTile from "./TilesView/FileTile";
 
-const SectionBodyContent = ({ oformFiles, hasOFORMFilesGallery, t }) => {
-  //console.log("oformFiles", oformFiles);
+const SectionBodyContent = ({
+  oformFiles,
+  hasGalleryFiles,
+  setGallerySelected,
+  t,
+}) => {
+  const onMouseDown = (e) => {
+    if (
+      e.target.closest(".scroll-body") &&
+      !e.target.closest(".files-item") &&
+      !e.target.closest(".not-selectable")
+    ) {
+      setGallerySelected(null);
+    }
+  };
 
-  return !hasOFORMFilesGallery ? (
+  useEffect(() => {
+    window.addEventListener("mousedown", onMouseDown);
+
+    return () => {
+      window.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [onMouseDown]);
+
+  return !hasGalleryFiles ? (
     <EmptyScreenContainer
       imageSrc="images/empty_screen_form-gallery.react.svg"
       imageAlt="Empty Screen Filter image"
@@ -26,5 +47,6 @@ const SectionBodyContent = ({ oformFiles, hasOFORMFilesGallery, t }) => {
 
 export default inject(({ filesStore }) => ({
   oformFiles: filesStore.oformFiles,
-  hasOFORMFilesGallery: filesStore.hasOFORMFilesGallery,
+  hasGalleryFiles: filesStore.hasGalleryFiles,
+  setGallerySelected: filesStore.setGallerySelected,
 }))(withTranslation("FormGallery")(observer(SectionBodyContent)));

products/ASC.Files/Client/src/pages/FormGallery/Header.js

@@ -2,10 +2,28 @@ import React from "react";
 import IconButton from "@appserver/components/icon-button";
 import { withTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
+import { AppServerConfig } from "@appserver/common/constants";
 import { StyledHeadline, StyledContainer } from "./StyledGallery";
+import config from "../../../package.json";
+import FilesFilter from "@appserver/common/api/files/filter";
+import { combineUrl } from "@appserver/common/utils";
 
-const SectionHeaderContent = ({ t, history }) => {
-  const onBackToFiles = () => history.goBack();
+const SectionHeaderContent = (props) => {
+  const { t, history, match } = props;
+
+  const onBackToFiles = () => {
+    const filter = FilesFilter.getDefault();
+    filter.folder = match.params.fileId;
+    const urlFilter = filter.toUrlParams();
+
+    history.push(
+      combineUrl(
+        AppServerConfig.proxyURL,
+        config.homepage,
+        `/filter?${urlFilter}`
+      )
+    );
+  };
 
   return (
     <StyledContainer>

products/ASC.Files/Client/src/pages/FormGallery/TilesView/FileTile.js

@@ -6,7 +6,7 @@ import Link from "@appserver/components/link";
 import { isDesktop } from "react-device-detect";
 
 const FileTile = (props) => {
-  const { item, getIcon } = props;
+  const { item, getIcon, isSelected, setGallerySelected } = props;
   const { fileExst, title } = item;
 
   const src = getIcon(32, ".docxf");
@@ -23,6 +23,8 @@ const FileTile = (props) => {
         thumbnail={thumbnailUrl}
         element={element}
         temporaryIcon={temporaryIcon}
+        isSelected={isSelected}
+        setGallerySelected={setGallerySelected}
       >
         <SimpleFilesTileContent
           //sideColor={theme.filesSection.tilesView.sideColor}
@@ -48,9 +50,15 @@ const FileTile = (props) => {
   );
 };
 
-export default inject(({ settingsStore }) => {
+export default inject(({ settingsStore, filesStore }, { item }) => {
   const { getIcon } = settingsStore;
+  const { gallerySelected, setGallerySelected } = filesStore;
+
+  const isSelected = item.id === gallerySelected;
+
   return {
     getIcon,
+    isSelected,
+    setGallerySelected,
   };
 })(observer(FileTile));

products/ASC.Files/Client/src/pages/FormGallery/TilesView/StyledTileView.js

@@ -13,6 +13,11 @@ const FlexBoxStyles = css`
   align-content: center;
 `;
 
+const checkedStyle = css`
+  background: ${(props) =>
+    props.theme.filesSection.tilesView.tile.checkedColor} !important;
+`;
+
 const StyledTile = styled.div`
   box-sizing: border-box;
   width: 100%;
@@ -21,11 +26,18 @@ const StyledTile = styled.div`
   ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+  ${(props) => props.isSelected && checkedStyle}
+
   &:before,
   &:after {
     ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
   }
 
+  &:before,
+  &:after {
+    ${(props) => props.isSelected && checkedStyle};
+  }
+
   .file-icon {
     display: flex;
     flex: 0 0 auto;
@@ -69,7 +81,15 @@ const StyledFileTileTop = styled.div`
 const StyledFileTileBottom = styled.div`
   ${FlexBoxStyles};
 
+  ${(props) => !props.isEdit && props.isSelected && checkedStyle}
+
   border-top: 1px solid transparent;
+  ${(props) =>
+    props.isSelected &&
+    css`
+      border-top: ${(props) => props.theme.filesSection.tilesView.tile.border};
+      border-radius: 0 0 6px 6px;
+    `}
 
   padding: 9px 0;
   height: 62px;

products/ASC.Files/Client/src/pages/FormGallery/TilesView/sub-components/Tile.js

@@ -6,6 +6,9 @@ import { isDesktop } from "react-device-detect";
 import Link from "@appserver/components/link";
 import { withTranslation } from "react-i18next";
 import { ReactSVG } from "react-svg";
+import { AppServerConfig } from "@appserver/common/constants";
+import { combineUrl } from "@appserver/common/utils";
+import config from "../../../../../package.json";
 
 import {
   StyledTile,
@@ -84,15 +87,33 @@ class Tile extends React.PureComponent {
   };
 
   onCreateForm = () => {
+    // const filter = FilesFilter.getDefault();
+    // filter.folder = match.params.fileId;
+    // const urlFilter = filter.toUrlParams();
+
+    // history.push(
+    //   combineUrl(
+    //     AppServerConfig.proxyURL,
+    //     config.homepage,
+    //     `/filter?${urlFilter}`
+    //   )
+    // );
+
     console.log("onCreateForm");
   };
 
   onShowTemplateInfo = () => {
-    console.log("onShowTemplateInfo");
+    console.log("Open info panel");
   };
 
   getOptions = () => ["create", "template-info"];
 
+  onSelectForm = () => {
+    console.log("onSelectForm");
+    this.props.setGallerySelected(this.props.item.id);
+    this.onShowTemplateInfo();
+  };
+
   render() {
     const {
       children,
@@ -100,7 +121,7 @@ class Tile extends React.PureComponent {
       element,
       tileContextClick,
       isActive,
-
+      isSelected,
       title,
       showHotkeyBorder,
     } = this.props;
@@ -115,18 +136,22 @@ class Tile extends React.PureComponent {
 
     const icon = this.getIconFile();
 
+    //TODO: OFORM isActive
+
     return (
       <StyledTile
         ref={this.tile}
-        {...this.props}
+        isSelected={isSelected}
         onContextMenu={onContextMenu}
         isActive={isActive}
         isDesktop={isDesktop}
         showHotkeyBorder={showHotkeyBorder}
+        onDoubleClick={this.onCreateForm}
+        onClick={this.onSelectForm}
       >
         <StyledFileTileTop isActive={isActive}>{icon}</StyledFileTileTop>
 
-        <StyledFileTileBottom isActive={isActive}>
+        <StyledFileTileBottom isSelected={isSelected} isActive={isActive}>
           <div className="file-icon_container">
             <div className="file-icon" onClick={this.onFileIconClick}>
               {element}

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -396,8 +396,6 @@ class Tile extends React.PureComponent {
       title: children[0].props.item.title,
     };
 
-    console.log({ item });
-
     return (
       <StyledTile
         ref={this.tile}

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

@@ -65,6 +65,7 @@ class FilesStore {
 
   isPrevSettingsModule = false;
   oformFiles = [];
+  gallerySelected = null;
 
   constructor(
     authStore,
@@ -313,10 +314,14 @@ class FilesStore {
     //   );
   };
 
-  get hasOFORMFilesGallery() {
+  get hasGalleryFiles() {
     return !!this.oformFiles.length;
   }
 
+  setGallerySelected = (gallerySelected) => {
+    this.gallerySelected = gallerySelected;
+  };
+
   setFirstLoad = (firstLoad) => {
     this.firstLoad = firstLoad;
   };