From a076a27aef2919be4d1537b78e408c65703ed8f2 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 4 Apr 2022 11:26:13 +0300 Subject: [PATCH] Web: Files: added select gallery items, fixed routing --- products/ASC.Files/Client/src/Files.jsx | 5 ++- .../components/Article/MainButton/index.js | 30 +++++++++++++---- .../Client/src/pages/FormGallery/Body.js | 32 +++++++++++++++--- .../Client/src/pages/FormGallery/Header.js | 22 +++++++++++-- .../pages/FormGallery/TilesView/FileTile.js | 12 +++++-- .../FormGallery/TilesView/StyledTileView.js | 20 +++++++++++ .../TilesView/sub-components/Tile.js | 33 ++++++++++++++++--- .../Body/TilesView/sub-components/Tile.js | 2 -- .../ASC.Files/Client/src/store/FilesStore.js | 7 +++- 9 files changed, 139 insertions(+), 24 deletions(-) diff --git a/products/ASC.Files/Client/src/Files.jsx b/products/ASC.Files/Client/src/Files.jsx index bb2885d22a..1154787b51 100644 --- a/products/ASC.Files/Client/src/Files.jsx +++ b/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 = {}; diff --git a/products/ASC.Files/Client/src/components/Article/MainButton/index.js b/products/ASC.Files/Client/src/components/Article/MainButton/index.js index e53d909305..78d746e101 100644 --- a/products/ASC.Files/Client/src/components/Article/MainButton/index.js +++ b/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, }; } )( diff --git a/products/ASC.Files/Client/src/pages/FormGallery/Body.js b/products/ASC.Files/Client/src/pages/FormGallery/Body.js index 1972c07256..fab874f369 100644 --- a/products/ASC.Files/Client/src/pages/FormGallery/Body.js +++ b/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 ? ( { export default inject(({ filesStore }) => ({ oformFiles: filesStore.oformFiles, - hasOFORMFilesGallery: filesStore.hasOFORMFilesGallery, + hasGalleryFiles: filesStore.hasGalleryFiles, + setGallerySelected: filesStore.setGallerySelected, }))(withTranslation("FormGallery")(observer(SectionBodyContent))); diff --git a/products/ASC.Files/Client/src/pages/FormGallery/Header.js b/products/ASC.Files/Client/src/pages/FormGallery/Header.js index 3f69131875..0eb098aee5 100644 --- a/products/ASC.Files/Client/src/pages/FormGallery/Header.js +++ b/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 ( diff --git a/products/ASC.Files/Client/src/pages/FormGallery/TilesView/FileTile.js b/products/ASC.Files/Client/src/pages/FormGallery/TilesView/FileTile.js index f67ac7d118..57cf6552f8 100644 --- a/products/ASC.Files/Client/src/pages/FormGallery/TilesView/FileTile.js +++ b/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} > { ); }; -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)); diff --git a/products/ASC.Files/Client/src/pages/FormGallery/TilesView/StyledTileView.js b/products/ASC.Files/Client/src/pages/FormGallery/TilesView/StyledTileView.js index e4a0ac4789..84c695a13e 100644 --- a/products/ASC.Files/Client/src/pages/FormGallery/TilesView/StyledTileView.js +++ b/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; diff --git a/products/ASC.Files/Client/src/pages/FormGallery/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/FormGallery/TilesView/sub-components/Tile.js index 7f43fb5924..b6eabe2b08 100644 --- a/products/ASC.Files/Client/src/pages/FormGallery/TilesView/sub-components/Tile.js +++ b/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 ( {icon} - +
{element} diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js index 4ea5006dd9..ec2f040f74 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js +++ b/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 ( { + this.gallerySelected = gallerySelected; + }; + setFirstLoad = (firstLoad) => { this.firstLoad = firstLoad; };