From d2f1927d31c832dfbf4ae9903c1c38d64f701ad4 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 7 Jun 2022 16:31:13 +0300 Subject: [PATCH 001/293] Web: Files: added infinite scroll --- .../Section/sub-components/section-body.js | 6 +- .../Body/RowsView/FilesRowContainer.js | 15 ++++- .../Section/Body/TableView/TableContainer.js | 17 +++++- .../TilesView/sub-components/TileContainer.js | 57 ++++++++++++++++++- .../src/pages/Home/Section/Body/index.js | 13 +++++ .../ASC.Files/Client/src/pages/Home/index.js | 5 -- .../ASC.Files/Client/src/store/FilesStore.js | 47 ++++++++++++++- 7 files changed, 148 insertions(+), 12 deletions(-) diff --git a/packages/asc-web-common/components/Section/sub-components/section-body.js b/packages/asc-web-common/components/Section/sub-components/section-body.js index 99770aba84..dbcde290b8 100644 --- a/packages/asc-web-common/components/Section/sub-components/section-body.js +++ b/packages/asc-web-common/components/Section/sub-components/section-body.js @@ -221,7 +221,11 @@ class SectionBody extends React.Component { > {withScroll ? ( !isMobileOnly ? ( - +
{children} diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js index 2ac612c471..92c27c92fe 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js @@ -5,8 +5,12 @@ import SimpleFilesRow from "./SimpleFilesRow"; import { isMobile } from "react-device-detect"; import styled from "styled-components"; import marginStyles from "./CommonStyles"; -import { isTablet } from "@appserver/components/utils/device"; import { Base } from "@appserver/components/themes"; +import Loaders from "@appserver/common/components/Loaders"; + +const StyledLoader = styled.div` + padding-top: 16px; +`; const StyledRowContainer = styled(RowContainer)` .row-selected + .row-wrapper:not(.row-selected) { @@ -64,6 +68,7 @@ const FilesRowContainer = ({ viewAs, setViewAs, infoPanelVisible, + filesIsLoading, }) => { useEffect(() => { if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; @@ -93,17 +98,23 @@ const FilesRowContainer = ({ sectionWidth={sectionWidth} /> ))} + {filesIsLoading && ( + + + + )} ); }; export default inject(({ filesStore, auth }) => { - const { filesList, viewAs, setViewAs } = filesStore; + const { filesList, viewAs, setViewAs, filesIsLoading } = filesStore; const { isVisible: infoPanelVisible } = auth.infoPanelStore; return { filesList, viewAs, setViewAs, infoPanelVisible, + filesIsLoading, }; })(observer(FilesRowContainer)); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js index a22870eb2b..4c16abd3ec 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -6,8 +6,15 @@ import TableHeader from "./TableHeader"; import TableBody from "@appserver/components/table-container/TableBody"; import { isMobile } from "react-device-detect"; import styled, { css } from "styled-components"; -import { isTablet } from "@appserver/components/utils/device"; import { Base } from "@appserver/components/themes"; +import Loaders from "@appserver/common/components/Loaders"; + +const StyledLoader = styled.div` + grid-column-start: 1; + grid-column-end: -1; + display: grid; + padding-top: 16px; +`; const marginCss = css` margin-top: -1px; @@ -113,6 +120,7 @@ const Table = ({ theme, infoPanelVisible, userId, + filesIsLoading, }) => { const ref = useRef(null); @@ -158,6 +166,11 @@ const Table = ({ columnInfoPanelStorageName={columnInfoPanelStorageName} /> ))} + {filesIsLoading && ( + + + + )} ); @@ -172,6 +185,7 @@ export default inject(({ filesStore, auth }) => { setViewAs, setFirsElemChecked, setHeaderBorder, + filesIsLoading, } = filesStore; return { @@ -183,5 +197,6 @@ export default inject(({ filesStore, auth }) => { theme: auth.settingsStore.theme, userId: auth.userStore.user.id, infoPanelVisible, + filesIsLoading, }; })(observer(Table)); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js index 7ec665ee07..2c6ce0249d 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js @@ -21,6 +21,7 @@ import Text from "@appserver/components/text"; import IconButton from "@appserver/components/icon-button"; import ComboBox from "@appserver/components/combobox"; import { Base } from "@appserver/components/themes"; +import Loaders from "@appserver/common/components/Loaders"; import SortDesc from "../../../../../../../../../../public/images/sort.desc.react.svg"; @@ -48,6 +49,10 @@ const StyledGridWrapper = styled.div` @media ${tablet} { grid-gap: 14px; } + + .folders-loader { + padding-top: 14px; + } `; const StyledTileContainer = styled.div` @@ -322,6 +327,41 @@ class TileContainer extends React.PureComponent { ); }; + getTilesLoaders = (folders, files) => { + const { getCountTilesInRow } = this.props; + + const countTilesInRow = getCountTilesInRow(); + const loaders = []; + + if (files.length === 0) { + let count = countTilesInRow - (folders.length % countTilesInRow); + while (count !== 0) { + loaders.push( + + ); + count--; + } + } else { + let count = countTilesInRow - (files.length % countTilesInRow); + while (count !== 0) { + loaders.push( + + ); + count--; + } + } + + return loaders; + }; + render() { const { t, @@ -335,6 +375,7 @@ class TileContainer extends React.PureComponent { headingFiles, isRecentFolder, isFavoritesFolder, + filesIsLoading, } = this.props; const Folders = []; @@ -425,6 +466,8 @@ class TileContainer extends React.PureComponent { ); }; + const loaders = filesIsLoading ? this.getTilesLoaders(Folders, Files) : []; + return ( {renderList} ) : ( - {Folders} + + {Folders} + {Files.length === 0 && filesIsLoading && loaders} + )} )} @@ -462,7 +508,10 @@ class TileContainer extends React.PureComponent { {useReactWindow ? ( {renderList} ) : ( - {Files} + + {Files} + {filesIsLoading && loaders} + )} )} @@ -500,6 +549,8 @@ export default inject( files, folders, createThumbnails, + filesIsLoading, + getCountTilesInRow, } = filesStore; const { user } = auth.userStore; @@ -530,6 +581,8 @@ export default inject( fetchFiles, setViewAs, createThumbnails, + filesIsLoading, + getCountTilesInRow, personal, }; diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js index 92a09e3417..a16837c1b2 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js @@ -40,6 +40,7 @@ const SectionBodyContent = (props) => { scrollToFolderId, setScrollToFolderId, filesList, + fetchMoreFiles, } = props; useEffect(() => { @@ -59,6 +60,9 @@ const SectionBodyContent = (props) => { document.addEventListener("dragleave", onDragLeaveDoc); document.addEventListener("drop", onDropEvent); + const scroll = document.getElementsByClassName("section-scroll")[0]; + scroll.addEventListener("scroll", onScroll); + return () => { window.removeEventListener("mousedown", onMouseDown); window.removeEventListener("mouseup", onMouseUp); @@ -67,6 +71,7 @@ const SectionBodyContent = (props) => { document.removeEventListener("dragover", onDragOver); document.removeEventListener("dragleave", onDragLeaveDoc); document.removeEventListener("drop", onDropEvent); + scroll.removeEventListener("scroll", onScroll); }; }, [onMouseUp, onMouseMove, startDrag, folderId, viewAs]); @@ -95,6 +100,12 @@ const SectionBodyContent = (props) => { } }, [scrollToFolderId]); + const onScroll = (e) => { + if (window.innerHeight + e.target.scrollTop + 1 > e.target.scrollHeight) { + fetchMoreFiles(); + } + }; + const onMouseDown = (e) => { if ( (e.target.closest(".scroll-body") && @@ -283,6 +294,7 @@ export default inject( scrollToFolderId, setScrollToFolderId, filesList, + fetchMoreFiles, } = filesStore; return { @@ -306,6 +318,7 @@ export default inject( scrollToFolderId, setScrollToFolderId, filesList, + fetchMoreFiles, }; } )( diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js index 0bfa841106..fdf6f010a8 100644 --- a/products/ASC.Files/Client/src/pages/Home/index.js +++ b/products/ASC.Files/Client/src/pages/Home/index.js @@ -317,7 +317,6 @@ class PureHome extends React.Component { secondaryProgressDataStoreAlert, dragging, - tReady, personal, checkedMaintenance, setMaintenanceExist, @@ -390,10 +389,6 @@ class PureHome extends React.Component { - - - - ); diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 7f0825c2ea..756c0adcf3 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -18,6 +18,7 @@ import config from "../../package.json"; import { thumbnailStatuses } from "../helpers/constants"; import { loopTreeFolders } from "../helpers/files-helpers"; import { openDocEditor as openEditor } from "../helpers/utils"; +import { isDesktop } from "@appserver/components/utils/device"; const { FilesFilter } = api; const storageViewAs = localStorage.getItem("viewAs"); @@ -73,6 +74,7 @@ class FilesStore { isLoadingFilesFind = false; pageItemsLength = null; isHidePagination = false; + filesIsLoading = false; constructor( authStore, @@ -268,7 +270,12 @@ class FilesStore { this.isLoaded = isLoaded; }; - setViewAs = (viewAs) => { + setViewAs = async (viewAs) => { + // this.setIsLoading(true); + // await this.fetchFiles(this.selectedFolderStore.id, null, true); + + // this.setIsLoading(false); + this.viewAs = viewAs; localStorage.setItem("viewAs", viewAs); }; @@ -2084,6 +2091,44 @@ class FilesStore { setScrollToFolderId = (folderId) => { this.scrollToFolderId = folderId; }; + + get hasMoreFiles() { + return this.filesList.length < this.filter.total; + } + + setFilesIsLoading = (filesIsLoading) => { + this.filesIsLoading = filesIsLoading; + }; + + fetchMoreFiles = async () => { + if (!this.hasMoreFiles || this.filesIsLoading || this.isLoading) return; + + this.setFilesIsLoading(true); + console.log("fetchMoreFiles"); + + const newFilter = this.filter; + newFilter.page += 1; + const newFiles = await api.files.getFolder(newFilter.folder, newFilter); + + runInAction(() => { + this.setFiles([...this.files, ...newFiles.files]); + this.setFolders([...this.folders, ...newFiles.folders]); + this.setFilesIsLoading(false); + }); + }; + + //Duplicate of countTilesInRow, used to update the number of tiles in a row after the window is resized. + getCountTilesInRow = () => { + const isDesktopView = isDesktop(); + const tileGap = isDesktopView ? 16 : 14; + const minTileWidth = 216 + tileGap; + const sectionPadding = isDesktopView ? 24 : 16; + + const body = document.getElementById("section"); + const sectionWidth = body ? body.offsetWidth - sectionPadding : 0; + + return Math.floor(sectionWidth / minTileWidth); + }; } export default FilesStore; From f08a58f329ab2733e2da055d72142d7418cd22fc Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 7 Jun 2022 17:00:25 +0300 Subject: [PATCH 002/293] Web: Files: fixed loaders for mobile devices --- .../components/Section/sub-components/section-body.js | 6 +----- .../Body/TilesView/sub-components/TileContainer.js | 10 +++++++--- .../Client/src/pages/Home/Section/Body/index.js | 5 ++++- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/asc-web-common/components/Section/sub-components/section-body.js b/packages/asc-web-common/components/Section/sub-components/section-body.js index dbcde290b8..99770aba84 100644 --- a/packages/asc-web-common/components/Section/sub-components/section-body.js +++ b/packages/asc-web-common/components/Section/sub-components/section-body.js @@ -221,11 +221,7 @@ class SectionBody extends React.Component { > {withScroll ? ( !isMobileOnly ? ( - +
{children} diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js index 2c6ce0249d..4b6ba77026 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js @@ -50,8 +50,12 @@ const StyledGridWrapper = styled.div` grid-gap: 14px; } - .folders-loader { + .tiles-loader { padding-top: 14px; + + &:nth-of-type(n + 3) { + display: block; + } } `; @@ -339,7 +343,7 @@ class TileContainer extends React.PureComponent { loaders.push( ); @@ -351,7 +355,7 @@ class TileContainer extends React.PureComponent { loaders.push( ); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js index a16837c1b2..bf21577450 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js @@ -60,7 +60,10 @@ const SectionBodyContent = (props) => { document.addEventListener("dragleave", onDragLeaveDoc); document.addEventListener("drop", onDropEvent); - const scroll = document.getElementsByClassName("section-scroll")[0]; + const scroll = + isMobile && customScrollElm + ? customScrollElm + : document.getElementsByClassName("section-scroll")[0]; scroll.addEventListener("scroll", onScroll); return () => { From f7583badec05330e984c01f4f194fe707444c0e8 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 7 Jun 2022 17:16:47 +0300 Subject: [PATCH 003/293] Web: Files: fixed scroll for IOS --- .../components/Section/sub-components/section-body.js | 8 ++++++-- .../ASC.Files/Client/src/pages/Home/Section/Body/index.js | 6 ++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/asc-web-common/components/Section/sub-components/section-body.js b/packages/asc-web-common/components/Section/sub-components/section-body.js index 99770aba84..62426dc50b 100644 --- a/packages/asc-web-common/components/Section/sub-components/section-body.js +++ b/packages/asc-web-common/components/Section/sub-components/section-body.js @@ -221,7 +221,11 @@ class SectionBody extends React.Component { > {withScroll ? ( !isMobileOnly ? ( - +
{children} @@ -255,7 +259,7 @@ class SectionBody extends React.Component { > {withScroll ? ( !isMobileOnly ? ( - +
{children} diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js index bf21577450..c462cf8365 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js @@ -60,10 +60,8 @@ const SectionBodyContent = (props) => { document.addEventListener("dragleave", onDragLeaveDoc); document.addEventListener("drop", onDropEvent); - const scroll = - isMobile && customScrollElm - ? customScrollElm - : document.getElementsByClassName("section-scroll")[0]; + const scroll = document.getElementById("sectionScroll").childNodes[0]; + scroll.addEventListener("scroll", onScroll); return () => { From 3a1c380c2cd93c3c405b0ce607547c3ec9f86fd6 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 7 Jun 2022 17:28:49 +0300 Subject: [PATCH 004/293] Web: Files: fixed getting sectionScroll --- .../ASC.Files/Client/src/pages/Home/Section/Body/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js index c462cf8365..086d6b6f37 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js @@ -60,7 +60,9 @@ const SectionBodyContent = (props) => { document.addEventListener("dragleave", onDragLeaveDoc); document.addEventListener("drop", onDropEvent); - const scroll = document.getElementById("sectionScroll").childNodes[0]; + const scrollElem = document.getElementById("sectionScroll"); + + const scroll = scrollElem ? scrollElem.childNodes[0] : customScrollElm; scroll.addEventListener("scroll", onScroll); @@ -72,7 +74,7 @@ const SectionBodyContent = (props) => { document.removeEventListener("dragover", onDragOver); document.removeEventListener("dragleave", onDragLeaveDoc); document.removeEventListener("drop", onDropEvent); - scroll.removeEventListener("scroll", onScroll); + scroll && scroll.removeEventListener("scroll", onScroll); }; }, [onMouseUp, onMouseMove, startDrag, folderId, viewAs]); From 4abfe32f282abbc414ba1e63ebefb5cea2ec2095 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 8 Jun 2022 15:49:58 +0300 Subject: [PATCH 005/293] Web: Files: fixed reset filesList after delete operation --- .../Client/src/store/FilesActionsStore.js | 28 +++++++++++++++---- .../ASC.Files/Client/src/store/FilesStore.js | 7 +++-- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/products/ASC.Files/Client/src/store/FilesActionsStore.js b/products/ASC.Files/Client/src/store/FilesActionsStore.js index 6536ea36a3..b943f9e755 100644 --- a/products/ASC.Files/Client/src/store/FilesActionsStore.js +++ b/products/ASC.Files/Client/src/store/FilesActionsStore.js @@ -176,6 +176,22 @@ class FilesActionStore { setTimeout(() => clearSecondaryProgressData(), TIMEOUT); }; + updateFilesAfterDelete = (folderIds) => { + const { folders, setFolders, filter } = this.filesStore; + const { + clearSecondaryProgressData, + } = this.uploadDataStore.secondaryProgressDataStore; + + if (folderIds) { + const newFolders = folders.filter((f) => !folderIds.includes(f.id)); + setFolders(newFolders); + filter.total -= 1; + } + + this.dialogsStore.setIsFolderActions(false); + setTimeout(() => clearSecondaryProgressData(), TIMEOUT); + }; + deleteAction = async ( translations, newSelection = null, @@ -245,7 +261,9 @@ class FilesActionStore { label: translations.deleteOperation, }; await this.uploadDataStore.loopFilesOperations(data, pbData); - this.updateCurrentFolder(fileIds, folderIds); + + //this.updateCurrentFolder(fileIds, folderIds); + this.updateFilesAfterDelete(folderIds); if (currentFolderId) { const { socketHelper } = this.authStore.settingsStore; @@ -557,8 +575,6 @@ class FilesActionStore { label: translations.deleteOperation, }; - const selectionFilesLength = 1; - if (isFile) { addActiveItems([itemId]); this.isMediaOpen(); @@ -567,7 +583,8 @@ class FilesActionStore { if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; await this.uploadDataStore.loopFilesOperations(data, pbData); - this.updateCurrentFolder([itemId]); + //this.updateCurrentFolder([itemId]); + this.updateFilesAfterDelete(); }) .then(() => toastr.success(translations.successRemoveFile)); } else { @@ -577,7 +594,8 @@ class FilesActionStore { if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; await this.uploadDataStore.loopFilesOperations(data, pbData); - this.updateCurrentFolder(null, [itemId]); + //this.updateCurrentFolder(null, [itemId]); + this.updateFilesAfterDelete([itemId]); }) .then(() => toastr.success(translations.successRemoveFolder)); } diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 756c0adcf3..6b185624fd 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -100,7 +100,7 @@ class FilesStore { const { socketHelper } = authStore.settingsStore; socketHelper.on("s:modify-folder", async (opt) => { - //console.log("Call s:modify-folder", opt); + console.log("Call s:modify-folder", opt); if (this.isLoading) return; @@ -162,6 +162,7 @@ class FilesStore { return index !== foundIndex; }) ); + this.filter.total -= 1; // Hide pagination when deleting files runInAction(() => { @@ -604,6 +605,8 @@ class FilesStore { filterData.sortOrder = splitFilter[2]; } + filterData.page = 0; + setSelectedNode([folderId + ""]); //TODO: fix @my @@ -2106,7 +2109,7 @@ class FilesStore { this.setFilesIsLoading(true); console.log("fetchMoreFiles"); - const newFilter = this.filter; + const newFilter = this.filter.clone(); newFilter.page += 1; const newFiles = await api.files.getFolder(newFilter.folder, newFilter); From 1f69e46128daa9ce4b34618aa063344653729b8c Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 8 Jun 2022 16:57:39 +0300 Subject: [PATCH 006/293] Web: Files: fixed upload files --- .../ASC.Files/Client/src/store/FilesStore.js | 8 +-- .../Client/src/store/UploadDataStore.js | 59 ++++++++++--------- 2 files changed, 34 insertions(+), 33 deletions(-) diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 6b185624fd..a6b0b1912b 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -100,7 +100,7 @@ class FilesStore { const { socketHelper } = authStore.settingsStore; socketHelper.on("s:modify-folder", async (opt) => { - console.log("Call s:modify-folder", opt); + //console.log("Call s:modify-folder", opt); if (this.isLoading) return; @@ -114,9 +114,9 @@ class FilesStore { const newFiles = [file, ...this.files]; - if (newFiles.length > this.filter.pageCount) { - newFiles.pop(); // Remove last - } + // if (newFiles.length > this.filter.pageCount) { + // newFiles.pop(); // Remove last + // } this.setFiles(newFiles); } diff --git a/products/ASC.Files/Client/src/store/UploadDataStore.js b/products/ASC.Files/Client/src/store/UploadDataStore.js index 7b4d477c62..25d4b8385d 100644 --- a/products/ASC.Files/Client/src/store/UploadDataStore.js +++ b/products/ASC.Files/Client/src/store/UploadDataStore.js @@ -585,9 +585,9 @@ class UploadDataStore { const newFiles = files; const newFolders = folders; const path = currentFile.path ? currentFile.path.slice() : []; - const fileIndex = newFiles.findIndex( - (x) => x.id === currentFile.fileInfo.id - ); + // const fileIndex = newFiles.findIndex( + // (x) => x.id === currentFile.fileInfo.id + // ); let folderInfo = null; const index = path.findIndex((x) => x === this.selectedFolderStore.id); @@ -617,22 +617,23 @@ class UploadDataStore { newFolders.unshift(folderInfo); setFolders(newFolders); const newFilter = filter; - newFilter.total = newFilter.total += 1; + newFilter.total += 1; setFilter(newFilter); } } else { - if (currentFile && currentFile.fileInfo) { - if (fileIndex === -1) { - newFiles.unshift(currentFile.fileInfo); - setFiles(newFiles); - const newFilter = filter; - newFilter.total = newFilter.total += 1; - setFilter(newFilter); - } else if (!this.settingsStore.storeOriginalFiles) { - newFiles[fileIndex] = currentFile.fileInfo; - setFiles(newFiles); - } - } + // if (currentFile && currentFile.fileInfo) { + // console.log("addNewFile", fileIndex); + // if (fileIndex === -1) { + // newFiles.unshift(currentFile.fileInfo); + // setFiles(newFiles); + // const newFilter = filter; + // newFilter.total += 1; + // setFilter(newFilter); + // } else if (!this.settingsStore.storeOriginalFiles) { + // newFiles[fileIndex] = currentFile.fileInfo; + // setFiles(newFiles); + // } + // } } }; @@ -653,17 +654,17 @@ class UploadDataStore { } } - if (filter.total >= filter.pageCount) { - if (files.length) { - fileIndex === -1 && newFiles.pop(); - addNewFile(); - } else { - newFolders.pop(); - addNewFile(); - } - } else { - addNewFile(); - } + // if (filter.total >= filter.pageCount) { + // if (files.length) { + // fileIndex === -1 && newFiles.pop(); + // addNewFile(); + // } else { + // newFolders.pop(); + // addNewFile(); + // } + // } else { + addNewFile(); + // } if (!!folderInfo) { const { @@ -926,7 +927,7 @@ class UploadDataStore { }; finishUploadFiles = () => { - const { fetchFiles, filter } = this.filesStore; + //const { fetchFiles, filter } = this.filesStore; const totalErrorsCount = sumBy(this.files, (f) => (f.error ? 1 : 0)); @@ -947,7 +948,7 @@ class UploadDataStore { if (this.files.length > 0) { const toFolderId = this.files[0]?.toFolderId; - fetchFiles(toFolderId, filter); + //fetchFiles(toFolderId, filter); if (toFolderId) { const { socketHelper } = this.filesStore.settingsStore; From 25c13a39b2a6340bd9ab28d1105d64147c2a64d0 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 9 Jun 2022 12:56:11 +0300 Subject: [PATCH 007/293] Web: Files: fixed selection after remove action --- products/ASC.Files/Client/src/store/FilesActionsStore.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/products/ASC.Files/Client/src/store/FilesActionsStore.js b/products/ASC.Files/Client/src/store/FilesActionsStore.js index b943f9e755..743bed4e5d 100644 --- a/products/ASC.Files/Client/src/store/FilesActionsStore.js +++ b/products/ASC.Files/Client/src/store/FilesActionsStore.js @@ -177,11 +177,13 @@ class FilesActionStore { }; updateFilesAfterDelete = (folderIds) => { - const { folders, setFolders, filter } = this.filesStore; + const { folders, setFolders, filter, setSelected } = this.filesStore; const { clearSecondaryProgressData, } = this.uploadDataStore.secondaryProgressDataStore; + setSelected("close"); + if (folderIds) { const newFolders = folders.filter((f) => !folderIds.includes(f.id)); setFolders(newFolders); From 3bd4714eb80a12529f492dee844a90ce0760651d Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 9 Jun 2022 14:43:48 +0300 Subject: [PATCH 008/293] Web: Files: Scroll: fixed loading files after changing directory --- .../src/components/Article/Body/index.js | 84 ++++++++++--------- 1 file changed, 46 insertions(+), 38 deletions(-) diff --git a/products/ASC.Files/Client/src/components/Article/Body/index.js b/products/ASC.Files/Client/src/components/Article/Body/index.js index 2c595801ec..07747d9470 100644 --- a/products/ASC.Files/Client/src/components/Article/Body/index.js +++ b/products/ASC.Files/Client/src/components/Article/Body/index.js @@ -37,56 +37,62 @@ const ArticleBodyContent = (props) => { isVisitor, FirebaseHelper, theme, + filesIsLoading, } = props; const campaigns = (localStorage.getItem("campaigns") || "") .split(",") .filter((campaign) => campaign.length > 0); - const onClick = React.useCallback((data) => { - const { - toggleArticleOpen, - setIsLoading, - fetchFiles, - homepage, - history, - } = props; + const onClick = React.useCallback( + (data) => { + const { + toggleArticleOpen, + setIsLoading, + fetchFiles, + homepage, + history, + } = props; - const filesSection = window.location.pathname.indexOf("/filter") > 0; + if (filesIsLoading) return; - if (filesSection) { - setIsLoading(true); - } else { - showLoader(); - } + const filesSection = window.location.pathname.indexOf("/filter") > 0; - fetchFiles(data, null, true, false) - .then(() => { - if (!filesSection) { - const filter = FilesFilter.getDefault(); + if (filesSection) { + setIsLoading(true); + } else { + showLoader(); + } - filter.folder = data; + fetchFiles(data, null, true, false) + .then(() => { + if (!filesSection) { + const filter = FilesFilter.getDefault(); - const urlFilter = filter.toUrlParams(); + filter.folder = data; - history.push( - combineUrl( - AppServerConfig.proxyURL, - homepage, - `/filter?${urlFilter}` - ) - ); - } - }) - .catch((err) => toastr.error(err)) - .finally(() => { - if (isMobileOnly || isMobile()) { - toggleArticleOpen(); - } - if (filesSection) setIsLoading(false); - else hideLoader(); - }); - }, []); + const urlFilter = filter.toUrlParams(); + + history.push( + combineUrl( + AppServerConfig.proxyURL, + homepage, + `/filter?${urlFilter}` + ) + ); + } + }) + .catch((err) => toastr.error(err)) + .finally(() => { + if (isMobileOnly || isMobile()) { + toggleArticleOpen(); + } + if (filesSection) setIsLoading(false); + else hideLoader(); + }); + }, + [filesIsLoading] + ); const onShowNewFilesPanel = React.useCallback((folderId) => { props.setNewFilesPanelVisible(true, [`${folderId}`]); @@ -130,6 +136,7 @@ export default inject( firstLoad, isLoading, isLoaded, + filesIsLoading, } = filesStore; const { treeFolders, setTreeFolders } = treeFoldersStore; @@ -173,6 +180,7 @@ export default inject( isDesktopClient, FirebaseHelper, theme, + filesIsLoading, }; } )( From ce067cfdaf8c10e3c933eea3710e4c55cd779829 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 14 Jun 2022 12:56:20 +0300 Subject: [PATCH 009/293] Web: Files: added setFilter on scroll --- products/ASC.Files/Client/src/store/FilesStore.js | 1 + 1 file changed, 1 insertion(+) diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 3cae89fdb9..e280c801b9 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -2117,6 +2117,7 @@ class FilesStore { const newFilter = this.filter.clone(); newFilter.page += 1; + this.setFilter(newFilter); const newFiles = await api.files.getFolder(newFilter.folder, newFilter); runInAction(() => { From 9169e4733a1d9c7f65f938a20205d7c1020f37d8 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 11 Jul 2022 11:36:34 +0300 Subject: [PATCH 010/293] Web: Files: fixed hasMoreFiles --- products/ASC.Files/Client/src/store/FilesStore.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 2058690f58..bb0279d500 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -2139,8 +2139,12 @@ class FilesStore { this.trashIsEmpty = isEmpty; }; + get filterTotal() { + return this.filter.total; + } + get hasMoreFiles() { - return this.filesList.length < this.filter.total; + return this.filesList.length < this.filterTotal; } setFilesIsLoading = (filesIsLoading) => { From 3f3e612245c972bf7e23fe9959d30a0ce5320dbc Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 11 Jul 2022 11:44:15 +0300 Subject: [PATCH 011/293] Web: Files: removed onScroll listener from SectionBodyContent --- .../Client/src/pages/Home/Section/Body/index.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js index c02f76e191..f3e38405a5 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js @@ -41,7 +41,6 @@ const SectionBodyContent = (props) => { setScrollToItem, filesList, uploaded, - fetchMoreFiles, } = props; useEffect(() => { @@ -62,12 +61,6 @@ const SectionBodyContent = (props) => { document.addEventListener("dragleave", onDragLeaveDoc); document.addEventListener("drop", onDropEvent); - const scrollElem = document.getElementById("sectionScroll"); - - const scroll = scrollElem ? scrollElem.childNodes[0] : customScrollElm; - - scroll.addEventListener("scroll", onScroll); - return () => { window.removeEventListener("beforeunload", onBeforeunload); window.removeEventListener("mousedown", onMouseDown); @@ -77,7 +70,6 @@ const SectionBodyContent = (props) => { document.removeEventListener("dragover", onDragOver); document.removeEventListener("dragleave", onDragLeaveDoc); document.removeEventListener("drop", onDropEvent); - scroll && scroll.removeEventListener("scroll", onScroll); }; }, [onMouseUp, onMouseMove, startDrag, folderId, viewAs, uploaded]); @@ -106,12 +98,6 @@ const SectionBodyContent = (props) => { } }, [scrollToItem]); - const onScroll = (e) => { - if (window.innerHeight + e.target.scrollTop + 1 > e.target.scrollHeight) { - fetchMoreFiles(); - } - }; - const onBeforeunload = (e) => { if (!uploaded) { e.preventDefault(); @@ -308,7 +294,6 @@ export default inject( scrollToItem, setScrollToItem, filesList, - fetchMoreFiles, } = filesStore; return { dragging, @@ -332,7 +317,6 @@ export default inject( setScrollToItem, filesList, uploaded: uploadDataStore.uploaded, - fetchMoreFiles, }; } )( From f69a87a7a70d69d5c63b272bc97f99ff8f22316d Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 11 Jul 2022 15:25:00 +0300 Subject: [PATCH 012/293] Web: Files: added InfiniteLoader to table view --- .../Section/sub-components/section-body.js | 5 ++ .../table-container/StyledTableContainer.js | 25 ++++++ .../table-container/TableBody.js | 87 ++++++++++++++++++- .../table-container/TableContainer.js | 8 +- .../table-container/TableHeader.js | 24 ++++- .../Section/Body/TableView/TableContainer.js | 37 ++++---- .../Section/Body/TableView/TableHeader.js | 48 +++++----- .../Home/Section/Body/TableView/TableRow.js | 1 + .../ASC.Files/Client/src/pages/Home/index.js | 2 +- 9 files changed, 188 insertions(+), 49 deletions(-) diff --git a/packages/asc-web-common/components/Section/sub-components/section-body.js b/packages/asc-web-common/components/Section/sub-components/section-body.js index 8c958607c1..d379a99286 100644 --- a/packages/asc-web-common/components/Section/sub-components/section-body.js +++ b/packages/asc-web-common/components/Section/sub-components/section-body.js @@ -23,6 +23,8 @@ const paddingStyles = css` ? "19px 3px 16px 16px" : "19px 3px 16px 20px"}; + ${({ withScroll }) => !withScroll && "padding: 0"}; //TODO: inf-scroll + @media ${tablet} { padding: ${(props) => props.settingsStudio ? "0 0 16px 24px" : "19px 0 16px 24px"}; @@ -60,6 +62,7 @@ const commonStyles = css` border-top: none; .section-wrapper { + height: 100%; ${(props) => !props.withScroll && `display: flex; flex-direction: column; height: 100%; box-sizing:border-box`}; @@ -134,6 +137,8 @@ const StyledSectionBody = styled.div` const StyledDropZoneBody = styled(DragAndDrop)` max-width: 100vw !important; + /* padding-right: 20px; */ //TODO: inf-scroll + ${commonStyles} .drag-and-drop { user-select: none; height: 100%; diff --git a/packages/asc-web-components/table-container/StyledTableContainer.js b/packages/asc-web-components/table-container/StyledTableContainer.js index 176b9b7386..c324c25371 100644 --- a/packages/asc-web-components/table-container/StyledTableContainer.js +++ b/packages/asc-web-components/table-container/StyledTableContainer.js @@ -4,6 +4,19 @@ import { mobile, tablet, hugeMobile } from "../utils/device"; import Scrollbar from "../scrollbar"; import { isMobile } from "react-device-detect"; +const reactWindowContainerStyles = css` + height: 100%; + overflow: hidden; + display: block; + margin-top: 0; +`; + +const reactWindowBodyStyles = css` + display: block; + height: 100%; + height: 95%; //TODO: inf-scroll +`; + const StyledTableContainer = styled.div` -moz-user-select: none; @@ -75,6 +88,8 @@ const StyledTableContainer = styled.div` width: 22px; } } + + ${({ useReactWindow }) => useReactWindow && reactWindowContainerStyles} `; StyledTableContainer.defaultProps = { theme: Base }; @@ -278,6 +293,8 @@ StyledTableHeaderCell.defaultProps = { theme: Base }; const StyledTableBody = styled.div` display: contents; + + ${({ useReactWindow }) => useReactWindow && reactWindowBodyStyles} `; const StyledTableRow = styled.div` @@ -372,6 +389,13 @@ const StyledScrollbar = styled(Scrollbar)` } `; +const StyledLoader = styled.div` + grid-column-start: 1; + grid-column-end: -1; + display: grid; + padding-top: 16px; +`; + StyledTableRow.defaultProps = { theme: Base }; export { @@ -386,4 +410,5 @@ export { StyledInfoPanelToggleWrapper, StyledEmptyTableContainer, StyledScrollbar, + StyledLoader, }; diff --git a/packages/asc-web-components/table-container/TableBody.js b/packages/asc-web-components/table-container/TableBody.js index 5f03dc1f65..baa931bb30 100644 --- a/packages/asc-web-components/table-container/TableBody.js +++ b/packages/asc-web-components/table-container/TableBody.js @@ -1,8 +1,89 @@ -import React from "react"; -import { StyledTableBody } from "./StyledTableContainer"; +import React, { useCallback, memo } from "react"; +import AutoSizer from "react-virtualized-auto-sizer"; +import { FixedSizeList as List, areEqual } from "react-window"; +import InfiniteLoader from "react-window-infinite-loader"; +import Loaders from "@appserver/common/components/Loaders"; + +import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; +import { StyledTableBody, StyledLoader } from "./StyledTableContainer"; const TableBody = (props) => { - return ; + const { + columnStorageName, + fetchMoreFiles, + children, + filesListLength, + hasMoreFiles, + itemCount, + useReactWindow, + } = props; + + const renderTable = memo(({ data, index, style }) => { + const storageSize = localStorage.getItem(columnStorageName); + + const isLoaded = isItemLoaded(index + 1); + + if (!isLoaded) { + return ( + + + + ); + } + + return ( +
+ {data[index]} +
+ ); + }, areEqual); + + const isItemLoaded = useCallback( + (index) => !hasMoreFiles || index < filesListLength, + [filesListLength, hasMoreFiles] + ); + + const renderList = ({ height, width }) => ( + + {({ onItemsRendered, ref }) => ( + + {renderTable} + + )} + + ); + + return useReactWindow ? ( + + {renderList} + + ) : ( + + ); }; export default TableBody; diff --git a/packages/asc-web-components/table-container/TableContainer.js b/packages/asc-web-components/table-container/TableContainer.js index 75e115b0f2..f569c7a4e7 100644 --- a/packages/asc-web-components/table-container/TableContainer.js +++ b/packages/asc-web-components/table-container/TableContainer.js @@ -3,18 +3,22 @@ import { StyledTableContainer } from "./StyledTableContainer"; import PropTypes from "prop-types"; const TableContainer = (props) => { + const { forwardedRef, useReactWindow, ...rest } = props; + return ( ); }; TableContainer.propTypes = { forwardedRef: PropTypes.shape({ current: PropTypes.any }), + useReactWindow: PropTypes.bool, }; export default TableContainer; diff --git a/packages/asc-web-components/table-container/TableHeader.js b/packages/asc-web-components/table-container/TableHeader.js index 27024a5f6f..a8d8255b5d 100644 --- a/packages/asc-web-components/table-container/TableHeader.js +++ b/packages/asc-web-components/table-container/TableHeader.js @@ -190,8 +190,12 @@ class TableHeader extends React.Component { this.moveToRight(widths, newWidth); } - containerRef.current.style.gridTemplateColumns = widths.join(" "); - this.headerRef.current.style.gridTemplateColumns = widths.join(" "); + const str = widths.join(" "); + + containerRef.current.style.gridTemplateColumns = str; + this.headerRef.current.style.gridTemplateColumns = str; + + this.updateTableRows(str); }; onMouseUp = () => { @@ -537,6 +541,9 @@ class TableHeader extends React.Component { if (str) { container.style.gridTemplateColumns = str; + + this.updateTableRows(str); + if (this.headerRef.current) { this.headerRef.current.style.gridTemplateColumns = str; this.headerRef.current.style.width = containerWidth + "px"; @@ -552,6 +559,18 @@ class TableHeader extends React.Component { } }; + updateTableRows = (str) => { + if (!this.props.useReactWindow) return; + + const rows = document.getElementsByClassName("table-row"); + + if (rows?.length) { + for (let i = 0; i < rows.length; i++) { + rows[i].style.gridTemplateColumns = str; + } + } + }; + resetColumns = (resetToDefault = false) => { const { containerRef, @@ -702,6 +721,7 @@ TableHeader.propTypes = { isLengthenHeader: PropTypes.bool, sortingVisible: PropTypes.bool, infoPanelVisible: PropTypes.bool, + useReactWindow: PropTypes.bool, }; export default TableHeader; diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js index 549f9568b4..60fb5ec88d 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -7,14 +7,6 @@ import TableBody from "@appserver/components/table-container/TableBody"; import { isMobile } from "react-device-detect"; import styled, { css } from "styled-components"; import { Base } from "@appserver/components/themes"; -import Loaders from "@appserver/common/components/Loaders"; - -const StyledLoader = styled.div` - grid-column-start: 1; - grid-column-end: -1; - display: grid; - padding-top: 16px; -`; const marginCss = css` margin-top: -1px; @@ -120,7 +112,9 @@ const Table = ({ theme, infoPanelVisible, userId, - filesIsLoading, + fetchMoreFiles, + hasMoreFiles, + filterTotal, }) => { const ref = useRef(null); @@ -144,7 +138,7 @@ const Table = ({ const columnInfoPanelStorageName = `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; return ( - + - + + {filesList.map((item, index) => ( ))} - {filesIsLoading && ( - - - - )} ); @@ -186,7 +183,9 @@ export default inject(({ filesStore, auth }) => { setViewAs, setFirsElemChecked, setHeaderBorder, - filesIsLoading, + fetchMoreFiles, + hasMoreFiles, + filterTotal, } = filesStore; return { @@ -198,6 +197,8 @@ export default inject(({ filesStore, auth }) => { theme: auth.settingsStore.theme, userId: auth.userStore.user.id, infoPanelVisible, - filesIsLoading, + fetchMoreFiles, + hasMoreFiles, + filterTotal, }; })(observer(Table)); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js index 1a77b31c46..100b5458b9 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -96,35 +96,35 @@ class FilesTableHeader extends React.Component { localStorage.setItem(this.props.tableStorageName, tableColumns); }; +//TODO: inf-scroll componentDidMount() { - this.customScrollElm = document.getElementsByClassName("section-scroll")[0]; - - this.customScrollElm.addEventListener("scroll", this.onBeginScroll); + //this.customScrollElm = document.getElementsByClassName("section-scroll")[0]; + //this.customScrollElm.addEventListener("scroll", this.onBeginScroll); } - onBeginScroll = () => { - const { firstElemChecked } = this.props; + // onBeginScroll = () => { + // const { firstElemChecked } = this.props; - const currentScrollPosition = this.customScrollElm.scrollTop; - const elem = document.getElementById("table-container_caption-header"); + // const currentScrollPosition = this.customScrollElm.scrollTop; + // const elem = document.getElementById("table-container_caption-header"); - if (currentScrollPosition === 0) { - this.isBeginScrolling = false; + // if (currentScrollPosition === 0) { + // this.isBeginScrolling = false; - this.props.headerBorder && - elem?.classList?.add("hotkeys-lengthen-header"); + // this.props.headerBorder && + // elem?.classList?.add("hotkeys-lengthen-header"); - !firstElemChecked && elem?.classList?.remove("lengthen-header"); - return; - } + // !firstElemChecked && elem?.classList?.remove("lengthen-header"); + // return; + // } - if (!this.isBeginScrolling) { - elem?.classList?.remove("hotkeys-lengthen-header"); - elem?.classList?.add("lengthen-header"); - } + // if (!this.isBeginScrolling) { + // elem?.classList?.remove("hotkeys-lengthen-header"); + // elem?.classList?.add("lengthen-header"); + // } - this.isBeginScrolling = true; - }; + // this.isBeginScrolling = true; + // }; componentDidUpdate(prevProps) { const { columns } = this.state; if (this.props.withContent !== prevProps.withContent) { @@ -144,9 +144,10 @@ class FilesTableHeader extends React.Component { } } - componentWillUnmount() { - this.customScrollElm.removeEventListener("scroll", this.onBeginScroll); - } +//TODO: inf-scroll + // componentWillUnmount() { + // this.customScrollElm.removeEventListener("scroll", this.onBeginScroll); + // } getColumns = (defaultColumns, splitColumns) => { const columns = []; @@ -221,6 +222,7 @@ class FilesTableHeader extends React.Component { resetColumnsSize={resetColumnsSize} sortingVisible={sortingVisible} infoPanelVisible={infoPanelVisible} + useReactWindow /> ); } diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js index 8b590a911e..6b0fbf6430 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -273,6 +273,7 @@ const FilesTableRow = (props) => { showHotkeyBorder, tableColumns, id, + style: tableStyles,//TODO: inf-scroll } = props; const { acceptBackground, background } = theme.dragAndDrop; diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js index 8bc0857b41..5746752d56 100644 --- a/products/ASC.Files/Client/src/pages/Home/index.js +++ b/products/ASC.Files/Client/src/pages/Home/index.js @@ -320,7 +320,7 @@ class PureHome extends React.Component {
Date: Mon, 11 Jul 2022 17:06:21 +0300 Subject: [PATCH 013/293] Web: Components: created InfiniteLoader component --- .../infinite-loader/InfiniteLoader.js | 128 ++++++++++++++++++ .../infinite-loader/StyledInfiniteLoader.js | 14 ++ .../infinite-loader/index.js | 1 + .../asc-web-components/row-container/index.js | 41 +++--- .../table-container/StyledTableContainer.js | 8 -- .../table-container/TableBody.js | 89 ++++-------- .../Body/RowsView/FilesRowContainer.js | 33 +++-- .../Section/Body/TableView/TableContainer.js | 2 +- 8 files changed, 211 insertions(+), 105 deletions(-) create mode 100644 packages/asc-web-components/infinite-loader/InfiniteLoader.js create mode 100644 packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js create mode 100644 packages/asc-web-components/infinite-loader/index.js diff --git a/packages/asc-web-components/infinite-loader/InfiniteLoader.js b/packages/asc-web-components/infinite-loader/InfiniteLoader.js new file mode 100644 index 0000000000..cbf5b0bea6 --- /dev/null +++ b/packages/asc-web-components/infinite-loader/InfiniteLoader.js @@ -0,0 +1,128 @@ +import React, { memo, useCallback } from "react"; +import PropTypes from "prop-types"; +import AutoSizer from "react-virtualized-auto-sizer"; +import InfiniteLoader from "react-window-infinite-loader"; +import { FixedSizeList as List, areEqual } from "react-window"; +import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; +import Loaders from "@appserver/common/components/Loaders"; +import { StyledTableLoader, StyledRowLoader } from "./StyledInfiniteLoader"; + +const InfiniteLoaderComponent = ({ + viewAs, + hasMoreFiles, + filesLength, + itemCount, + loadMoreItems, + itemSize, + onScroll, + columnStorageName, + children, + className, +}) => { + const renderRow = memo(({ data, index, style }) => { + const isLoaded = isItemLoaded(index + 1); + if (!isLoaded) return getLoader(style); + + return
{data[index]}
; + }, areEqual); + + const renderTile = memo(({ data, index, style }) => { + //TODO: + return
{data[index]}
; + }, areEqual); + + const isItemLoaded = useCallback( + (index) => !hasMoreFiles || index < filesLength, + [filesLength, hasMoreFiles] + ); + + const renderTable = memo(({ data, index, style }) => { + const storageSize = localStorage.getItem(columnStorageName); + + const isLoaded = isItemLoaded(index + 1); + if (!isLoaded) return getLoader(style); + + return ( +
+ {data[index]} +
+ ); + }, areEqual); + + const getLoader = (style) => { + switch (viewAs) { + case "table": + return ( + + + + ); + case "row": + return ( + + + + ); + case "tile": + return <>; + return; + default: + return; + } + }; + + const renderList = ({ height, width }) => ( + + {({ onItemsRendered, ref }) => ( + + {viewAs === "table" + ? renderTable + : viewAs === "row" + ? renderRow + : renderTile} + + )} + + ); + + return {renderList}; +}; + +InfiniteLoaderComponent.propTypes = { + viewAs: PropTypes.string.isRequired, + hasMoreFiles: PropTypes.bool.isRequired, + filesLength: PropTypes.number.isRequired, + itemCount: PropTypes.number.isRequired, + loadMoreItems: PropTypes.func.isRequired, + itemSize: PropTypes.number.isRequired, + children: PropTypes.any.isRequired, + /** Called when the list scroll positions changes */ + onScroll: PropTypes.func, +}; + +export default InfiniteLoaderComponent; diff --git a/packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js b/packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js new file mode 100644 index 0000000000..bea5428a5d --- /dev/null +++ b/packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js @@ -0,0 +1,14 @@ +import styled from "styled-components"; + +const StyledTableLoader = styled.div` + grid-column-start: 1; + grid-column-end: -1; + display: grid; + padding-top: 16px; +`; + +const StyledRowLoader = styled.div` + padding-top: 16px; +`; + +export { StyledTableLoader, StyledRowLoader }; diff --git a/packages/asc-web-components/infinite-loader/index.js b/packages/asc-web-components/infinite-loader/index.js new file mode 100644 index 0000000000..b50b5bc43a --- /dev/null +++ b/packages/asc-web-components/infinite-loader/index.js @@ -0,0 +1 @@ +export default from "./InfiniteLoader"; diff --git a/packages/asc-web-components/row-container/index.js b/packages/asc-web-components/row-container/index.js index d3220b1394..a784544a42 100644 --- a/packages/asc-web-components/row-container/index.js +++ b/packages/asc-web-components/row-container/index.js @@ -5,6 +5,7 @@ import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual- import { FixedSizeList as List, areEqual } from "react-window"; import AutoSizer from "react-virtualized-auto-sizer"; import StyledRowContainer from "./styled-row-container"; +import InfiniteLoaderComponent from "../infinite-loader"; class RowContainer extends React.PureComponent { renderRow = memo(({ data, index, style }) => { @@ -21,23 +22,12 @@ class RowContainer extends React.PureComponent { className, style, onScroll, + filesLength, + itemCount, + fetchMoreFiles, + hasMoreFiles, } = this.props; - const renderList = ({ height, width }) => ( - - {this.renderRow} - - ); - return ( - {useReactWindow ? {renderList} : children} + {useReactWindow ? ( + + {children} + + ) : ( + children + )} ); } @@ -69,6 +74,10 @@ RowContainer.propTypes = { style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), /** Called when the list scroll positions changes */ onScroll: PropTypes.func, + filesLength: PropTypes.number, + itemCount: PropTypes.number, + loadMoreItems: PropTypes.func, + hasMoreFiles: PropTypes.bool, }; RowContainer.defaultProps = { diff --git a/packages/asc-web-components/table-container/StyledTableContainer.js b/packages/asc-web-components/table-container/StyledTableContainer.js index c324c25371..3578417427 100644 --- a/packages/asc-web-components/table-container/StyledTableContainer.js +++ b/packages/asc-web-components/table-container/StyledTableContainer.js @@ -389,13 +389,6 @@ const StyledScrollbar = styled(Scrollbar)` } `; -const StyledLoader = styled.div` - grid-column-start: 1; - grid-column-end: -1; - display: grid; - padding-top: 16px; -`; - StyledTableRow.defaultProps = { theme: Base }; export { @@ -410,5 +403,4 @@ export { StyledInfoPanelToggleWrapper, StyledEmptyTableContainer, StyledScrollbar, - StyledLoader, }; diff --git a/packages/asc-web-components/table-container/TableBody.js b/packages/asc-web-components/table-container/TableBody.js index baa931bb30..43ab0f5cf6 100644 --- a/packages/asc-web-components/table-container/TableBody.js +++ b/packages/asc-web-components/table-container/TableBody.js @@ -1,89 +1,46 @@ -import React, { useCallback, memo } from "react"; -import AutoSizer from "react-virtualized-auto-sizer"; -import { FixedSizeList as List, areEqual } from "react-window"; -import InfiniteLoader from "react-window-infinite-loader"; -import Loaders from "@appserver/common/components/Loaders"; - -import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; -import { StyledTableBody, StyledLoader } from "./StyledTableContainer"; +import React from "react"; +import { StyledTableBody } from "./StyledTableContainer"; +import InfiniteLoaderComponent from "../infinite-loader"; const TableBody = (props) => { const { columnStorageName, fetchMoreFiles, children, - filesListLength, + filesLength, hasMoreFiles, itemCount, + itemHeight, useReactWindow, + onScroll, } = props; - const renderTable = memo(({ data, index, style }) => { - const storageSize = localStorage.getItem(columnStorageName); - - const isLoaded = isItemLoaded(index + 1); - - if (!isLoaded) { - return ( - - - - ); - } - - return ( -
- {data[index]} -
- ); - }, areEqual); - - const isItemLoaded = useCallback( - (index) => !hasMoreFiles || index < filesListLength, - [filesListLength, hasMoreFiles] - ); - - const renderList = ({ height, width }) => ( - - {({ onItemsRendered, ref }) => ( - - {renderTable} - - )} - - ); - return useReactWindow ? ( - {renderList} + + {children} + ) : ( ); }; +TableBody.defaultProps = { + itemHeight: 40, +}; + export default TableBody; diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js index 53e1d5e5e1..2b3dad30f9 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js @@ -6,11 +6,6 @@ import { isMobile } from "react-device-detect"; import styled from "styled-components"; import marginStyles from "./CommonStyles"; import { Base } from "@appserver/components/themes"; -import Loaders from "@appserver/common/components/Loaders"; - -const StyledLoader = styled.div` - padding-top: 16px; -`; const StyledRowContainer = styled(RowContainer)` .row-selected + .row-wrapper:not(.row-selected) { @@ -68,7 +63,9 @@ const FilesRowContainer = ({ viewAs, setViewAs, infoPanelVisible, - filesIsLoading, + filterTotal, + fetchMoreFiles, + hasMoreFiles, }) => { useEffect(() => { if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; @@ -88,8 +85,12 @@ const FilesRowContainer = ({ return ( {filesList.map((item, index) => ( ))} - {filesIsLoading && ( - - - - )} ); }; export default inject(({ filesStore, auth }) => { - const { filesList, viewAs, setViewAs, filesIsLoading } = filesStore; + const { + filesList, + viewAs, + setViewAs, + filterTotal, + fetchMoreFiles, + hasMoreFiles, + } = filesStore; const { isVisible: infoPanelVisible } = auth.infoPanelStore; return { filesList, viewAs, setViewAs, infoPanelVisible, - filesIsLoading, + filterTotal, + fetchMoreFiles, + hasMoreFiles, }; })(observer(FilesRowContainer)); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js index 60fb5ec88d..95a9ebec6b 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -150,7 +150,7 @@ const Table = ({ Date: Mon, 11 Jul 2022 17:29:18 +0300 Subject: [PATCH 014/293] Web: Components: fixed updateTableRows --- packages/asc-web-components/infinite-loader/InfiniteLoader.js | 2 +- packages/asc-web-components/table-container/TableHeader.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/asc-web-components/infinite-loader/InfiniteLoader.js b/packages/asc-web-components/infinite-loader/InfiniteLoader.js index cbf5b0bea6..c8c64df13c 100644 --- a/packages/asc-web-components/infinite-loader/InfiniteLoader.js +++ b/packages/asc-web-components/infinite-loader/InfiniteLoader.js @@ -44,7 +44,7 @@ const InfiniteLoaderComponent = ({ return (
{ if (!this.props.useReactWindow) return; - const rows = document.getElementsByClassName("table-row"); + const rows = document.querySelectorAll(".table-row, .table-row-list-item"); if (rows?.length) { for (let i = 0; i < rows.length; i++) { From 5d712ea8b1f2a49c79a00fab820769dcc3f42f87 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 15 Jul 2022 11:58:58 +0300 Subject: [PATCH 015/293] Web: Components: moved ListComponent to another file, added GridComponent --- .../infinite-loader/Grid.js | 134 ++++++++++++++++++ .../infinite-loader/InfiniteLoader.js | 121 ++-------------- .../infinite-loader/List.js | 102 +++++++++++++ .../infinite-loader/StyledInfiniteLoader.js | 15 +- .../ASC.Files/Client/src/store/FilesStore.js | 1 - 5 files changed, 259 insertions(+), 114 deletions(-) create mode 100644 packages/asc-web-components/infinite-loader/Grid.js create mode 100644 packages/asc-web-components/infinite-loader/List.js diff --git a/packages/asc-web-components/infinite-loader/Grid.js b/packages/asc-web-components/infinite-loader/Grid.js new file mode 100644 index 0000000000..ea5c2e1955 --- /dev/null +++ b/packages/asc-web-components/infinite-loader/Grid.js @@ -0,0 +1,134 @@ +import React, { memo, useCallback } from "react"; +import AutoSizer from "react-virtualized-auto-sizer"; +import InfiniteLoader from "react-window-infinite-loader"; +import { VariableSizeList as List, areEqual } from "react-window"; +import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; +import Loaders from "@appserver/common/components/Loaders"; +import { StyledCard, StyledItem } from "./StyledInfiniteLoader"; + +const GridComponent = ({ + hasMoreFiles, + filesLength, + itemCount, + loadMoreItems, + onScroll, + countTilesInRow, + children, + className, +}) => { + const isItemLoaded = useCallback( + (index) => { + return !hasMoreFiles || index * countTilesInRow < filesLength; + }, + [filesLength, hasMoreFiles, countTilesInRow] + ); + + const renderTile = memo(({ data, index, style }) => { + const { itemCount } = data; + + // This is the range of cards visible on this row, given the current width: + const startIndex = index * countTilesInRow; + const stopIndex = Math.min(itemCount - 1, startIndex + countTilesInRow - 1); + let countLoaders = (stopIndex + 1) % countTilesInRow; + + const cards = []; + // Header(Files) + for (let i = startIndex; i <= stopIndex; i++) { + if (children[i].props.className === "tile-items-heading") { + cards.push( +
+ {children[i]} +
+ ); + + break; + } + + //Cards + cards.push( + + {children[i]} + + ); + } + + //Loaders + if (hasMoreFiles && cards.length) { + while (countLoaders !== 0) { + cards.push( + + ); + countLoaders--; + } + } + + return ( + + {cards} + + ); + }, areEqual); + + const getItemSize = (index) => { + const newIndex = index * countTilesInRow; + + if (!children[newIndex]) return 0; + + const itemProps = children[newIndex].props; + const isFile = itemProps?.className?.includes("file"); + const isFolder = itemProps?.className?.includes("folder"); + + const horizontalGap = 16; + const verticalGap = 14; + + const folderHeight = 64 + verticalGap; + const fileHeight = 220 + horizontalGap; + const titleHeight = 20 + horizontalGap; + + return isFolder ? folderHeight : isFile ? fileHeight : titleHeight; + }; + + const renderGrid = ({ height, width }) => { + const itemsCount = children.length; + + const rowCount = Math.ceil(itemsCount / countTilesInRow) + 1; + + return ( + + {({ onItemsRendered, ref }) => ( + + {renderTile} + + )} + + ); + }; + + return {renderGrid}; +}; + +export default GridComponent; diff --git a/packages/asc-web-components/infinite-loader/InfiniteLoader.js b/packages/asc-web-components/infinite-loader/InfiniteLoader.js index c8c64df13c..c54cbe97db 100644 --- a/packages/asc-web-components/infinite-loader/InfiniteLoader.js +++ b/packages/asc-web-components/infinite-loader/InfiniteLoader.js @@ -1,125 +1,22 @@ -import React, { memo, useCallback } from "react"; +import React from "react"; import PropTypes from "prop-types"; -import AutoSizer from "react-virtualized-auto-sizer"; -import InfiniteLoader from "react-window-infinite-loader"; -import { FixedSizeList as List, areEqual } from "react-window"; -import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; -import Loaders from "@appserver/common/components/Loaders"; -import { StyledTableLoader, StyledRowLoader } from "./StyledInfiniteLoader"; +import ListComponent from "./List"; +import GridComponent from "./Grid"; -const InfiniteLoaderComponent = ({ - viewAs, - hasMoreFiles, - filesLength, - itemCount, - loadMoreItems, - itemSize, - onScroll, - columnStorageName, - children, - className, -}) => { - const renderRow = memo(({ data, index, style }) => { - const isLoaded = isItemLoaded(index + 1); - if (!isLoaded) return getLoader(style); - - return
{data[index]}
; - }, areEqual); - - const renderTile = memo(({ data, index, style }) => { - //TODO: - return
{data[index]}
; - }, areEqual); - - const isItemLoaded = useCallback( - (index) => !hasMoreFiles || index < filesLength, - [filesLength, hasMoreFiles] +const InfiniteLoaderComponent = (props) => + props.viewAs === "tile" ? ( + + ) : ( + ); - const renderTable = memo(({ data, index, style }) => { - const storageSize = localStorage.getItem(columnStorageName); - - const isLoaded = isItemLoaded(index + 1); - if (!isLoaded) return getLoader(style); - - return ( -
- {data[index]} -
- ); - }, areEqual); - - const getLoader = (style) => { - switch (viewAs) { - case "table": - return ( - - - - ); - case "row": - return ( - - - - ); - case "tile": - return <>; - return; - default: - return; - } - }; - - const renderList = ({ height, width }) => ( - - {({ onItemsRendered, ref }) => ( - - {viewAs === "table" - ? renderTable - : viewAs === "row" - ? renderRow - : renderTile} - - )} - - ); - - return {renderList}; -}; - InfiniteLoaderComponent.propTypes = { viewAs: PropTypes.string.isRequired, hasMoreFiles: PropTypes.bool.isRequired, filesLength: PropTypes.number.isRequired, itemCount: PropTypes.number.isRequired, loadMoreItems: PropTypes.func.isRequired, - itemSize: PropTypes.number.isRequired, + itemSize: PropTypes.number, children: PropTypes.any.isRequired, /** Called when the list scroll positions changes */ onScroll: PropTypes.func, diff --git a/packages/asc-web-components/infinite-loader/List.js b/packages/asc-web-components/infinite-loader/List.js new file mode 100644 index 0000000000..7b52c4eef8 --- /dev/null +++ b/packages/asc-web-components/infinite-loader/List.js @@ -0,0 +1,102 @@ +import React, { memo, useCallback } from "react"; +import AutoSizer from "react-virtualized-auto-sizer"; +import InfiniteLoader from "react-window-infinite-loader"; +import { FixedSizeList as List, areEqual } from "react-window"; +import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; +import Loaders from "@appserver/common/components/Loaders"; +import { StyledTableLoader, StyledRowLoader } from "./StyledInfiniteLoader"; + +const ListComponent = ({ + viewAs, + hasMoreFiles, + filesLength, + itemCount, + loadMoreItems, + itemSize, + onScroll, + columnStorageName, + children, + className, +}) => { + const renderRow = memo(({ index, style }) => { + const isLoaded = isItemLoaded(index + 1); + if (!isLoaded) return getLoader(style); + + return
{children[index]}
; + }, areEqual); + + const isItemLoaded = useCallback( + (index) => !hasMoreFiles || index < filesLength, + [filesLength, hasMoreFiles] + ); + + const renderTable = memo(({ index, style }) => { + const storageSize = localStorage.getItem(columnStorageName); + + const isLoaded = isItemLoaded(index + 1); + if (!isLoaded) return getLoader(style); + + return ( +
+ {children[index]} +
+ ); + }, areEqual); + + const getLoader = (style) => { + switch (viewAs) { + case "table": + return ( + + + + ); + case "row": + return ( + + + + ); + default: + return <>; + } + }; + + const renderList = ({ height, width }) => ( + + {({ onItemsRendered, ref }) => ( + + {viewAs === "table" ? renderTable : renderRow} + + )} + + ); + + return {renderList}; +}; + +export default ListComponent; diff --git a/packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js b/packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js index bea5428a5d..6ffd862047 100644 --- a/packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js +++ b/packages/asc-web-components/infinite-loader/StyledInfiniteLoader.js @@ -11,4 +11,17 @@ const StyledRowLoader = styled.div` padding-top: 16px; `; -export { StyledTableLoader, StyledRowLoader }; +const StyledCard = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); + + //gap: 14px 16px; +`; + +const StyledItem = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); + gap: 14px 16px; +`; + +export { StyledTableLoader, StyledRowLoader, StyledCard, StyledItem }; diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 7ddd8fd0a8..33683cdbda 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -2,7 +2,6 @@ import { makeAutoObservable, runInAction } from "mobx"; import api from "@appserver/common/api"; import { AppServerConfig, - FileAction, FileType, FilterType, FolderType, From 49bf1e0fa16410d894ab1567863ade8f276d3a46 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 15 Jul 2022 12:48:24 +0300 Subject: [PATCH 016/293] Web: Files: Tile: refactoring TileContainer --- .../TilesView/sub-components/TileContainer.js | 221 +++--------------- 1 file changed, 27 insertions(+), 194 deletions(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js index 4b6ba77026..7c4310ba09 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js @@ -1,14 +1,9 @@ -/* eslint-disable react/display-name */ -import React, { memo } from "react"; +import React from "react"; import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; import styled, { css } from "styled-components"; import PropTypes from "prop-types"; -import { FixedSizeList as List, areEqual } from "react-window"; -import AutoSizer from "react-virtualized-auto-sizer"; import Heading from "@appserver/components/heading"; -import ContextMenu from "@appserver/components/context-menu"; -import CustomScrollbarsVirtualList from "@appserver/components/scrollbar"; import { isMobile } from "react-device-detect"; import { tablet, @@ -21,7 +16,6 @@ import Text from "@appserver/components/text"; import IconButton from "@appserver/components/icon-button"; import ComboBox from "@appserver/components/combobox"; import { Base } from "@appserver/components/themes"; -import Loaders from "@appserver/common/components/Loaders"; import SortDesc from "../../../../../../../../../../public/images/sort.desc.react.svg"; @@ -176,7 +170,6 @@ class TileContainer extends React.PureComponent { super(props); this.state = { - contextOptions: [], isOpen: false, selectedFilterData: { sortId: props.filter.sortBy, @@ -185,51 +178,12 @@ class TileContainer extends React.PureComponent { }; } - onRowContextClick = (options) => { - if (Array.isArray(options)) { - this.setState({ - contextOptions: options, - }); - } - }; - toggleDropdown = () => { this.setState((prev) => ({ isOpen: !prev.isOpen, })); }; - componentDidMount() { - window.addEventListener("contextmenu", this.onRowContextClick); - } - - componentWillUnmount() { - window.removeEventListener("contextmenu", this.onRowContextClick); - } - - renderFolders = () => { - return
; - }; - - renderFiles = () => { - return
; - }; - - // eslint-disable-next-line react/prop-types - renderTile = memo(({ data, index, style }) => { - // eslint-disable-next-line react/prop-types - const options = data[index].props.contextOptions; - - return ( -
- {data[index]} -
- ); - }, areEqual); - getSortData = () => { const { t, personal } = this.props; @@ -331,45 +285,9 @@ class TileContainer extends React.PureComponent { ); }; - getTilesLoaders = (folders, files) => { - const { getCountTilesInRow } = this.props; - - const countTilesInRow = getCountTilesInRow(); - const loaders = []; - - if (files.length === 0) { - let count = countTilesInRow - (folders.length % countTilesInRow); - while (count !== 0) { - loaders.push( - - ); - count--; - } - } else { - let count = countTilesInRow - (files.length % countTilesInRow); - while (count !== 0) { - loaders.push( - - ); - count--; - } - } - - return loaders; - }; - render() { const { t, - itemHeight, children, useReactWindow, id, @@ -379,9 +297,10 @@ class TileContainer extends React.PureComponent { headingFiles, isRecentFolder, isFavoritesFolder, - filesIsLoading, } = this.props; + const { isOpen, selectedFilterData } = this.state; + const Folders = []; const Files = []; @@ -389,47 +308,19 @@ class TileContainer extends React.PureComponent { const { isFolder, fileExst, id } = item.props.item; if ((isFolder || id === -1) && !fileExst) { Folders.push( -
+
{item}
); } else { Files.push( -
+
{item}
); } }); - const renderList = ({ height, width }) => ( - - {this.renderTile} - - ); - const advancedOptions = this.getAdvancedOptions(); const renderSorting = () => { @@ -442,7 +333,7 @@ class TileContainer extends React.PureComponent { !isMobileUtils() && (
- <> + {Folders.length > 0 && ( - {Folders.length > 0 && headingFolders} - {Folders.length > 0 && renderSorting()} + {headingFolders} + {renderSorting()} - {Folders.length > 0 && ( - <> - {useReactWindow ? ( - {renderList} - ) : ( - - {Folders} - {Files.length === 0 && filesIsLoading && loaders} - - )} - - )} - - - {Files.length > 0 && ( - <> - - {headingFiles} - {Folders.length === 0 && renderSorting()} - - {useReactWindow ? ( - {renderList} - ) : ( - - {Files} - {filesIsLoading && loaders} - - )} - + )} + {Folders.length > 0 && ( + {Folders} )} - + {Files.length > 0 && ( + + {headingFiles} + {Folders.length === 0 && renderSorting()} + + )} + {Files.length > 0 && {Files}} ); } } TileContainer.propTypes = { - itemHeight: PropTypes.number, - manualHeight: PropTypes.string, children: PropTypes.any.isRequired, useReactWindow: PropTypes.bool, className: PropTypes.string, @@ -537,58 +404,24 @@ TileContainer.propTypes = { }; TileContainer.defaultProps = { - itemHeight: 50, useReactWindow: true, - id: "rowContainer", + id: "tileContainer", }; export default inject( ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => { - const { - fetchFiles, - filter, - setIsLoading, - setViewAs, - viewAs, - files, - folders, - createThumbnails, - filesIsLoading, - getCountTilesInRow, - } = filesStore; - - const { user } = auth.userStore; - const { customNames, personal } = auth.settingsStore; + const { personal } = auth.settingsStore; + const { fetchFiles, filter, setIsLoading } = filesStore; const { isFavoritesFolder, isRecentFolder } = treeFoldersStore; - 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, + personal, + fetchFiles, filter, - viewAs, - isFiltered, + setIsLoading, isFavoritesFolder, isRecentFolder, - - setIsLoading, - fetchFiles, - setViewAs, - createThumbnails, - filesIsLoading, - getCountTilesInRow, - - personal, + selectedFolderId: selectedFolderStore.id, }; } )(observer(withTranslation(["Home", "Common"])(TileContainer))); From 08aefad8691aa57ef2f26926c33d69be58fad4b1 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 15 Jul 2022 15:18:11 +0300 Subject: [PATCH 017/293] Web: Files: added InfiniteGrid component --- .../Body/TilesView/FilesTileContainer.js | 2 +- .../TilesView/sub-components/InfiniteGrid.js | 60 +++++++++++++++++++ .../TilesView/sub-components/TileContainer.js | 39 ++++++++---- 3 files changed, 89 insertions(+), 12 deletions(-) create mode 100644 products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js index 893ed32f5a..24c716953d 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js @@ -70,7 +70,7 @@ const FilesTileContainer = ({ filesList, t, sectionWidth }) => { diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js new file mode 100644 index 0000000000..fa4d1e6aab --- /dev/null +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js @@ -0,0 +1,60 @@ +import React from "react"; +import { inject, observer } from "mobx-react"; +import InfiniteLoaderComponent from "@appserver/components/infinite-loader"; + +const InfiniteGrid = (props) => { + const { + children, + hasMoreFiles, + filterTotal, + fetchMoreFiles, + filesLength, + className, + getCountTilesInRow, + ...rest + } = props; + + const list = []; + React.Children.map( + children.props.children, + (item) => item && list.push(item) + ); + + const countTilesInRow = getCountTilesInRow(); + + return ( + + {list} + + ); +}; + +export default inject(({ filesStore }) => { + const { + filesList, + hasMoreFiles, + filterTotal, + fetchMoreFiles, + getCountTilesInRow, + } = filesStore; + + const filesLength = filesList.length; + + return { + filesList, + hasMoreFiles, + filterTotal, + fetchMoreFiles, + filesLength, + getCountTilesInRow, + }; +})(observer(InfiniteGrid)); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js index 7c4310ba09..972f50f52d 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js @@ -16,8 +16,8 @@ import Text from "@appserver/components/text"; import IconButton from "@appserver/components/icon-button"; import ComboBox from "@appserver/components/combobox"; import { Base } from "@appserver/components/themes"; - import SortDesc from "../../../../../../../../../../public/images/sort.desc.react.svg"; +import InfiniteGrid from "./InfiniteGrid"; const paddingCss = css` @media ${desktop} { @@ -55,6 +55,7 @@ const StyledGridWrapper = styled.div` const StyledTileContainer = styled.div` position: relative; + height: 100%; .tile-item-wrapper { position: relative; @@ -361,14 +362,8 @@ class TileContainer extends React.PureComponent { ); }; - return ( - + const renderTile = ( + <> {Folders.length > 0 && ( )} - {Folders.length > 0 && ( + {Folders.length > 0 && useReactWindow ? ( + Folders + ) : ( {Folders} )} @@ -389,7 +386,27 @@ class TileContainer extends React.PureComponent { {Folders.length === 0 && renderSorting()} )} - {Files.length > 0 && {Files}} + {Files.length > 0 && useReactWindow ? ( + Files + ) : ( + {Files} + )} + + ); + + return ( + + {useReactWindow ? ( + {renderTile} + ) : ( + renderTile + )} ); } From 1a6f88fcfb051d8a42bb2a7a175cf961f0de8f68 Mon Sep 17 00:00:00 2001 From: mushka Date: Tue, 19 Jul 2022 19:50:03 +0300 Subject: [PATCH 018/293] added CreateRoomDialog and uipdated dialogsStore --- .../src/components/Article/MainButton/index.js | 8 +++++++- .../Client/src/components/FilesPanels/index.js | 5 +++++ .../src/components/dialogs/CreateRoomDialog/index.js | 12 ++++++++++++ .../ASC.Files/Client/src/components/dialogs/index.js | 2 ++ products/ASC.Files/Client/src/store/DialogsStore.js | 6 ++++++ 5 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js 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 a1dcade053..7643d80d64 100644 --- a/products/ASC.Files/Client/src/components/Article/MainButton/index.js +++ b/products/ASC.Files/Client/src/components/Article/MainButton/index.js @@ -28,6 +28,7 @@ const ArticleMainButtonContent = (props) => { encrypted, startUpload, setAction, + setCreateRoomDialogVisible, setSelectFileDialogVisible, isArticleLoading, isFavoritesFolder, @@ -66,6 +67,7 @@ const ArticleMainButtonContent = (props) => { const onCreateRoom = React.useCallback(() => { console.log("create room"); + setCreateRoomDialogVisible(true); }, []); const onShowSelectFileDialog = React.useCallback(() => { @@ -327,7 +329,10 @@ export default inject( isArchiveFolder, } = treeFoldersStore; const { startUpload } = uploadDataStore; - const { setSelectFileDialogVisible } = dialogsStore; + const { + setCreateRoomDialogVisible, + setSelectFileDialogVisible, + } = dialogsStore; const isArticleLoading = (!isLoaded || isLoading) && firstLoad; @@ -351,6 +356,7 @@ export default inject( startUpload, + setCreateRoomDialogVisible, setSelectFileDialogVisible, isLoading, diff --git a/products/ASC.Files/Client/src/components/FilesPanels/index.js b/products/ASC.Files/Client/src/components/FilesPanels/index.js index a77a628d77..404a108594 100644 --- a/products/ASC.Files/Client/src/components/FilesPanels/index.js +++ b/products/ASC.Files/Client/src/components/FilesPanels/index.js @@ -21,6 +21,7 @@ import { ThirdPartyDialog, ConflictResolveDialog, ConvertDialog, + CreateRoomDialog, } from "../dialogs"; import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog"; @@ -47,6 +48,7 @@ const Panels = (props) => { setSelectFileDialogVisible, hotkeyPanelVisible, convertPasswordDialogVisible, + createRoomDialogVisible, } = props; const { t } = useTranslation(["Translations", "SelectFile"]); @@ -86,6 +88,7 @@ const Panels = (props) => { ), convertDialogVisible && , + createRoomDialogVisible && , selectFileDialogVisible && ( { + return ( + + Create room + Create room + + ); +}; + +export default CreateRoomDialog; diff --git a/products/ASC.Files/Client/src/components/dialogs/index.js b/products/ASC.Files/Client/src/components/dialogs/index.js index 5fdb148f05..71e708ff12 100644 --- a/products/ASC.Files/Client/src/components/dialogs/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/index.js @@ -7,6 +7,7 @@ import ConnectDialog from "./ConnectDialog"; import ThirdPartyMoveDialog from "./ThirdPartyMoveDialog"; import ThirdPartyDialog from "./ThirdPartyDialog"; import ConflictResolveDialog from "./ConflictResolveDialog"; +import CreateRoomDialog from "./CreateRoomDialog"; export { EmptyTrashDialog, @@ -18,4 +19,5 @@ export { ThirdPartyMoveDialog, ThirdPartyDialog, ConflictResolveDialog, + CreateRoomDialog, }; diff --git a/products/ASC.Files/Client/src/store/DialogsStore.js b/products/ASC.Files/Client/src/store/DialogsStore.js index 7f511aa5bb..c75885d850 100644 --- a/products/ASC.Files/Client/src/store/DialogsStore.js +++ b/products/ASC.Files/Client/src/store/DialogsStore.js @@ -24,6 +24,7 @@ class DialogsStore { newFilesPanelVisible = false; conflictResolveDialogVisible = false; convertDialogVisible = false; + createRoomDialogVisible = false; selectFileDialogVisible = false; convertPasswordDialogVisible = false; isFolderActions = false; @@ -196,6 +197,10 @@ class DialogsStore { this.convertDialogVisible = visible; }; + setConvertDialogVisible = (visible) => { + this.createRoomDialogVisible = visible; + }; + setConvertPasswordDialogVisible = (visible) => { this.convertPasswordDialogVisible = visible; }; @@ -246,6 +251,7 @@ class DialogsStore { this.newFilesPanelVisible || this.conflictResolveDialogVisible || this.convertDialogVisible || + this.createRoomDialogVisible || this.selectFileDialogVisible || this.authStore.settingsStore.hotkeyPanelVisible || this.versionHistoryStore.isVisible From d99a5b6c5aadd1ce7d4bf91609179ca3f52058bb Mon Sep 17 00:00:00 2001 From: mushka Date: Tue, 19 Jul 2022 20:11:55 +0300 Subject: [PATCH 019/293] finished coding interactions of new dialog with other components --- .../src/components/EmptyContainer/index.js | 25 ++++++++++++++++--- .../dialogs/CreateRoomDialog/index.js | 21 +++++++++++++--- .../src/pages/Home/Section/Header/index.js | 4 +++ .../Section/Body/EmptyContainer.js | 7 ++++-- .../Client/src/store/DialogsStore.js | 2 +- 5 files changed, 50 insertions(+), 9 deletions(-) diff --git a/products/ASC.Files/Client/src/components/EmptyContainer/index.js b/products/ASC.Files/Client/src/components/EmptyContainer/index.js index 201b6a28cb..5e84854099 100644 --- a/products/ASC.Files/Client/src/components/EmptyContainer/index.js +++ b/products/ASC.Files/Client/src/components/EmptyContainer/index.js @@ -15,7 +15,12 @@ const linkStyles = { display: "flex", }; -const EmptyContainer = ({ isFiltered, parentId, theme }) => { +const EmptyContainer = ({ + isFiltered, + parentId, + theme, + setCreateRoomDialogVisible, +}) => { linkStyles.color = theme.filesEmptyContainer.linkColor; const onCreate = (e) => { @@ -33,13 +38,18 @@ const EmptyContainer = ({ isFiltered, parentId, theme }) => { }; const onCreateRoom = (e) => { + setCreateRoomDialogVisible(true); console.log("create room"); }; return isFiltered ? ( ) : parentId === 0 ? ( - + ) : ( { }; export default inject( - ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => { + ({ + auth, + filesStore, + dialogsStore, + treeFoldersStore, + selectedFolderStore, + }) => { const { authorType, search, @@ -59,6 +75,8 @@ export default inject( } = filesStore.filter; const { isPrivacyFolder } = treeFoldersStore; + const { setCreateRoomDialogVisible } = dialogsStore; + const isFiltered = (authorType || search || !withSubfolders || filterType) && !(isPrivacyFolder && isMobile); @@ -66,6 +84,7 @@ export default inject( return { theme: auth.settingsStore.theme, isFiltered, + setCreateRoomDialogVisible, parentId: selectedFolderStore.parentId, }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index 5a1605f203..52507b9289 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -1,12 +1,27 @@ +import React from "react"; +import { inject, observer } from "mobx-react"; import ModalDialog from "@appserver/components/modal-dialog"; +import { withTranslation, Trans } from "react-i18next"; + +const CreateRoomDialog = ({ visible, setCreateRoomDialogVisible }) => { + const onClose = () => setCreateRoomDialogVisible(false); -const CreateRoomDialog = ({}) => { return ( - + Create room Create room ); }; -export default CreateRoomDialog; +export default inject(({ dialogsStore }) => { + const { + createRoomDialogVisible: visible, + setCreateRoomDialogVisible, + } = dialogsStore; + + return { + visible, + setCreateRoomDialogVisible, + }; +})(withTranslation(["CreateRoomDialog", "Common"])(observer(CreateRoomDialog))); diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index 884c19d2b1..80938f9485 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -70,6 +70,8 @@ class SectionHeaderContent extends React.Component { onCreateRoom = () => { console.log("create room"); + const { setCreateRoomDialogVisible } = this.props; + setCreateRoomDialogVisible(true); }; createDocument = () => this.onCreate("docx"); @@ -546,6 +548,7 @@ export default inject( setEmptyTrashDialogVisible, setSelectFileDialogVisible, setIsFolderActions, + setCreateRoomDialogVisible, } = dialogsStore; const { @@ -613,6 +616,7 @@ export default inject( backToParentFolder, getCheckboxItemLabel, setSelectFileDialogVisible, + setCreateRoomDialogVisible, isRecycleBinFolder, setEmptyTrashDialogVisible, diff --git a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js index 18a9761ada..09419102be 100644 --- a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js +++ b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js @@ -45,11 +45,12 @@ const linkStyles = { display: "flex", }; -const EmptyContainer = ({ theme }) => { +const EmptyContainer = ({ theme, setCreateRoomDialogVisible }) => { linkStyles.color = theme.filesEmptyContainer.linkColor; const onCreateRoom = () => { console.log("Create room"); + setCreateRoomDialogVisible(true); }; const buttons = ( @@ -79,9 +80,11 @@ const EmptyContainer = ({ theme }) => { ); }; -export default inject(({ auth }) => { +export default inject(({ auth, dialogsStore }) => { const { theme } = auth.settingsStore; + const { setCreateRoomDialogVisible } = dialogsStore; return { theme, + setCreateRoomDialogVisible, }; })(withTranslation(["Home", "Common"])(observer(EmptyContainer))); diff --git a/products/ASC.Files/Client/src/store/DialogsStore.js b/products/ASC.Files/Client/src/store/DialogsStore.js index c75885d850..fd148d45ec 100644 --- a/products/ASC.Files/Client/src/store/DialogsStore.js +++ b/products/ASC.Files/Client/src/store/DialogsStore.js @@ -197,7 +197,7 @@ class DialogsStore { this.convertDialogVisible = visible; }; - setConvertDialogVisible = (visible) => { + setCreateRoomDialogVisible = (visible) => { this.createRoomDialogVisible = visible; }; From c8b10fed16d1b920fe96fff65ffe6bfa4331146e Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 20 Jul 2022 02:08:51 +0300 Subject: [PATCH 020/293] updated api requests --- packages/asc-web-common/api/rooms/index.js | 12 ++++++++++++ products/ASC.Files/Client/src/store/RoomsStore.js | 9 +++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/asc-web-common/api/rooms/index.js b/packages/asc-web-common/api/rooms/index.js index fd6055777d..5721a9b374 100644 --- a/packages/asc-web-common/api/rooms/index.js +++ b/packages/asc-web-common/api/rooms/index.js @@ -41,6 +41,18 @@ export function createRoom(data) { }); } +export function createRoomInThirdpary(id, data) { + const options = { + method: "post", + url: `/files/rooms/thirdparty/:${id}`, + data, + }; + + return request(options).then((res) => { + return res; + }); +} + export function pinRoom(id) { const options = { method: "put", url: `/files/rooms/${id}/pin` }; diff --git a/products/ASC.Files/Client/src/store/RoomsStore.js b/products/ASC.Files/Client/src/store/RoomsStore.js index 090140a806..85ef211b8d 100644 --- a/products/ASC.Files/Client/src/store/RoomsStore.js +++ b/products/ASC.Files/Client/src/store/RoomsStore.js @@ -212,10 +212,11 @@ class RoomsStore { this.bufferSelection = null; }; - createRoom = (title = "Room 4", roomType = RoomsType.ReadOnlyRoom) => { - const data = { title, roomType }; - - return api.rooms.createRoom(data); + createRoom = (data) => { + const isInThirdparty = !!data.storageLocation; + return isInThirdparty + ? api.rooms.createRoomInThirdpary(data.storageLocation.id, data) + : api.rooms.createRoom(data); }; deleteRoom = (room) => { From 370d804ea2785c3949d7a62728b6177245063055 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 20 Jul 2022 02:09:31 +0300 Subject: [PATCH 021/293] added translation keys for header, room titles and descriptions --- .../public/locales/en/CreateRoomDialog.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 products/ASC.Files/Client/public/locales/en/CreateRoomDialog.json diff --git a/products/ASC.Files/Client/public/locales/en/CreateRoomDialog.json b/products/ASC.Files/Client/public/locales/en/CreateRoomDialog.json new file mode 100644 index 0000000000..cbe21bfbea --- /dev/null +++ b/products/ASC.Files/Client/public/locales/en/CreateRoomDialog.json @@ -0,0 +1,16 @@ +{ + "CreateRoom": "Create room", + "ChooseRoomType": "Choose room type", + + "FillingFormsRoomTitle": "Filling forms room", + "CollaborationRoomTitle": "Collaboration room", + "ReviewRoomTitle": "Review room", + "ViewOnlyRoomTitle": "View-only room", + "CustomRoomTitle": "Custom room", + + "FillingFormsRoomDescription": "Build, share and fill document templates or work with the ready presets to quickly create documents of any type", + "CollaborationRoomDescription": "Collaborate on one or multiple documents with your team", + "ReviewRoomDescription": "Request a review or comments on the documents", + "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing", + "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose" +} From fa264ed6f96dd6031628f7e77e8d833376e29eb6 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 20 Jul 2022 02:11:23 +0300 Subject: [PATCH 022/293] coded out ChooseRoomDialog and almost finished with ChooseRoomTypeDropdown --- .../StyledCreateRoomDialog.js | 5 + .../dialogs/CreateRoomDialog/index.js | 122 +++++++++++++- .../sub-components/RoomType.js | 156 ++++++++++++++++++ .../sub-components/RoomTypeDropdown.js | 70 ++++++++ .../sub-components/RoomTypeList.js | 29 ++++ .../sub-components/SetRoomParams.js | 21 +++ 6 files changed, 395 insertions(+), 8 deletions(-) create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/StyledCreateRoomDialog.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/RoomType.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/RoomTypeDropdown.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/RoomTypeList.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/SetRoomParams.js diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/StyledCreateRoomDialog.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/StyledCreateRoomDialog.js new file mode 100644 index 0000000000..49e27d8b95 --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/StyledCreateRoomDialog.js @@ -0,0 +1,5 @@ +import styled from "styled-components"; + +const StyledSetRoomParams = styled.div``; + +export { StyledSetRoomParams }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index 52507b9289..bc6c15f072 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -1,20 +1,125 @@ -import React from "react"; +import React, { useState } from "react"; import { inject, observer } from "mobx-react"; -import ModalDialog from "@appserver/components/modal-dialog"; -import { withTranslation, Trans } from "react-i18next"; +import { withTranslation } from "react-i18next"; -const CreateRoomDialog = ({ visible, setCreateRoomDialogVisible }) => { +import { RoomsType } from "@appserver/common/constants"; +import ModalDialog from "@appserver/components/modal-dialog"; + +import SetRoomParams from "./sub-components/SetRoomParams"; +import RoomTypeList from "./sub-components/RoomTypeList"; +import Button from "@appserver/components/button"; + +const CreateRoomDialog = ({ + t, + visible, + setCreateRoomDialogVisible, + createRoom, +}) => { const onClose = () => setCreateRoomDialogVisible(false); + const [roomParams, setRoomParams] = useState({ + title: "New room", + type: undefined, + tags: [], + isPrivate: false, + storageLocation: {}, + icon: "", + }); + + const chooseRoomType = (roomType) => { + setRoomParams({ ...roomParams, type: roomType }); + }; + + const onCreateRoom = () => { + createRoom({ + title: "some text", + roomType: currentRoomtype, + }); + }; + + const rooms = [ + { + type: RoomsType.FillingFormsRoom, + title: t("FillingFormsRoomTitle"), + description: t("FillingFormsRoomDescription"), + withSecondaryInfo: true, + }, + { + type: RoomsType.EditingRoom, + title: t("CollaborationRoomTitle"), + description: t("CollaborationRoomDescription"), + withSecondaryInfo: true, + }, + { + type: RoomsType.ReviewRoom, + title: t("ReviewRoomTitle"), + description: t("ReviewRoomDescription"), + withSecondaryInfo: true, + }, + { + type: RoomsType.ReadOnlyRoom, + title: t("ViewOnlyRoomTitle"), + description: t("ViewOnlyRoomDescription"), + withSecondaryInfo: true, + }, + { + type: RoomsType.CustomRoom, + title: t("CustomRoomTitle"), + description: t("CustomRoomDescription"), + withSecondaryInfo: false, + }, + ]; + + const isChooseRoomType = roomParams.type === undefined; return ( - - Create room - Create room + + + {isChooseRoomType ? t("ChooseRoomType") : t("CreateRoom")} + + + + {isChooseRoomType ? ( + + ) : ( + + )} + + + {!isChooseRoomType && ( + +
-
-
+
diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/TagList.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/TagList.js index 358b44f4ba..d0cb87799c 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/TagList.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/TagList.js @@ -7,11 +7,13 @@ const StyledTagList = styled.div` display: flex; flex-direction: row; gap: 4px; - width: 100px; + flex-wrap: wrap; + width: 100%; .set_room_params-tag_input-tag { padding: 6px 8px; border-radius: 3px; + margin: 0; .tag-icon { margin-left: 10px; From 11713f5b82edb192b790f4b12d261903d4cb3874 Mon Sep 17 00:00:00 2001 From: mushka Date: Sat, 23 Jul 2022 02:05:17 +0300 Subject: [PATCH 040/293] added ability to lock scroll on modal --- .../asc-web-components/modal-dialog/index.js | 11 ++++++++- .../modal-dialog/styled-modal-dialog.js | 23 +++++++++++++++++++ .../modal-dialog/views/modal-aside.js | 8 ++++++- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/packages/asc-web-components/modal-dialog/index.js b/packages/asc-web-components/modal-dialog/index.js index 93ef0d3f66..781cf08345 100644 --- a/packages/asc-web-components/modal-dialog/index.js +++ b/packages/asc-web-components/modal-dialog/index.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useCallback } from "react"; import PropTypes from "prop-types"; import throttle from "lodash/throttle"; @@ -8,6 +8,7 @@ import ModalAside from "./views/modal-aside"; import { handleTouchMove, handleTouchStart } from "./handlers/swipeHandler"; import { getCurrentDisplayType } from "./handlers/resizeHandler"; import { parseChildren } from "./handlers/childrenParseHandler"; +import { isMobile } from "react-device-detect"; const Header = () => null; Header.displayName = "DialogHeader"; @@ -35,6 +36,7 @@ const ModalDialog = ({ withBodyScroll, modalLoaderBodyHeight, withFooterBorder, + isScrollLocked, }) => { const [currentDisplayType, setCurrentDisplayType] = useState( getCurrentDisplayType(displayType, displayTypeDetailed) @@ -83,6 +85,7 @@ const ModalDialog = ({ className={className} currentDisplayType={currentDisplayType} withBodyScroll={withBodyScroll} + isScrollLocked={isScrollLocked} isLarge={isLarge} zIndex={zIndex} autoMaxHeight={autoMaxHeight} @@ -145,6 +148,12 @@ ModalDialog.propTypes = { Enables Body scroll */ withBodyScroll: PropTypes.bool, + + /** **`ASIDE-ONLY`** + + Gets bool to lock or unlock body scroll */ + isScrollLocked: PropTypes.bool, + /** **`ASIDE-ONLY`** Sets modal dialog size equal to window */ diff --git a/packages/asc-web-components/modal-dialog/styled-modal-dialog.js b/packages/asc-web-components/modal-dialog/styled-modal-dialog.js index 7ec0e1f4e9..4563a35d40 100644 --- a/packages/asc-web-components/modal-dialog/styled-modal-dialog.js +++ b/packages/asc-web-components/modal-dialog/styled-modal-dialog.js @@ -104,6 +104,29 @@ const StyledBody = styled(Box)` padding-bottom: ${(props) => props.currentDisplayType === "aside" || props.hasFooter ? "8px" : "16px"}; + #modal-scroll { + .scroll-body { + margin-right: ${isMobile ? 0 : "-15px"} !important; + padding-right: 16px !important; + ${(props) => + props.isScrollLocked && + css` + margin-right: 0 !important; + overflow: hidden !important; + `} + } + /* ${(props) => + props.isScrollLocked && + css` + div:nth-last-child(1), + div:nth-last-child(2) { + div { + display: none !important; + } + } + `} */ + } + ${(props) => props.currentDisplayType === "aside" && css` diff --git a/packages/asc-web-components/modal-dialog/views/modal-aside.js b/packages/asc-web-components/modal-dialog/views/modal-aside.js index 4cf5b7ab48..9ab0cb2b9e 100644 --- a/packages/asc-web-components/modal-dialog/views/modal-aside.js +++ b/packages/asc-web-components/modal-dialog/views/modal-aside.js @@ -22,6 +22,7 @@ const Modal = ({ className, currentDisplayType, withBodyScroll, + isScrollLocked, isLarge, zIndex, autoMaxHeight, @@ -104,12 +105,17 @@ const Modal = ({ {body && ( {currentDisplayType === "aside" && withBodyScroll ? ( - + {
{bodyComponent} From 41ac0b7dfc4ba6d33b46eeb74592d2d2034a591a Mon Sep 17 00:00:00 2001 From: mushka Date: Sat, 23 Jul 2022 02:05:57 +0300 Subject: [PATCH 041/293] moved thirparty data to its own file --- .../{roomTypes.js => data.js} | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/{roomTypes.js => data.js} (73%) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/roomTypes.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/data.js similarity index 73% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/roomTypes.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/data.js index 5fe733d9cb..10cf637456 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/roomTypes.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/data.js @@ -32,3 +32,30 @@ export const roomTypes = [ withSecondaryInfo: false, }, ]; + +export const thirparties = [ + { + id: 1, + title: "Onlyoffice DocSpace", + }, + { + id: 2, + title: "DropBox", + }, + { + id: 3, + title: "Google Drive", + }, + { + id: 4, + title: "OneDrive", + }, + { + id: 5, + title: "Nextcloud", + }, + { + id: 6, + title: "Yandex Disk", + }, +]; From 2e54549353a6b41fc1169cb13214338041801df4 Mon Sep 17 00:00:00 2001 From: mushka Date: Sat, 23 Jul 2022 02:06:28 +0300 Subject: [PATCH 042/293] fixed styles in TagInput --- .../dialogs/CreateRoomDialog/sub-components/TagInput.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js index 7e51b92954..87eda7356c 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js @@ -16,10 +16,6 @@ const StyledTagInput = styled.div` } } - .set_room_params-tag_input-dropdown { - position: absolute; - } - .dropdown-content-wrapper { max-width: 100%; position: relative; @@ -35,6 +31,8 @@ const StyledTagDropdown = styled.div` box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); border-radius: 3px; z-index: 400; + position: absolute; + width: 100%; .dropdown-tag { From 83f958ec4389989b659cf3918d827166a6f5510f Mon Sep 17 00:00:00 2001 From: mushka Date: Sat, 23 Jul 2022 02:08:24 +0300 Subject: [PATCH 043/293] changed thirparty param from existing component to my own with custom dropdown --- .../sub-components/ThidpartyComboBox.js | 210 +++++++++++++----- 1 file changed, 154 insertions(+), 56 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js index ef22f1ff5e..4714be002c 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js @@ -1,23 +1,109 @@ -import React, { useState } from "react"; -import styled, { css } from "styled-components"; +import React, { useState, useRef } from "react"; +import styled from "styled-components"; +import { ReactSVG } from "react-svg"; import ComboBox from "@appserver/components/combobox"; import Button from "@appserver/components/button"; -import { isSmallTablet } from "@appserver/components/utils/device"; +import { isSmallTablet, smallTablet } from "@appserver/components/utils/device"; +import DomHelpers from "@appserver/components/utils/domHelpers"; +import { thirparties } from "../data"; +import DropDown from "@appserver/components/drop-down"; +import DropDownItem from "@appserver/components/drop-down-item"; +import Text from "@appserver/components/text"; const StyledThirpartyComboBox = styled.div` display: flex; - flex-direction: row; - gap: 8px; - .set_room_params-thirdparty-combo_box { - .combo-button-label { - font-weight: 400; - font-size: 13px; - line-height: 20px; - color: ${(props) => (props.isGrayLabel ? "#a3a9ae" : "#333333")}; + flex-direction: column; + + .set_room_params-thirdparty { + display: flex; + flex-direction: row; + gap: 8px; + &-combobox { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px 7px; + background: #ffffff; + border-radius: 3px; + max-height: 32px; + + border: ${(props) => `1px solid ${props.isOpen ? "#2DA7DB" : "#d0d5da"}`}; + &:hover { + border: ${(props) => + `1px solid ${props.isOpen ? "#2DA7DB" : "#a3a9ae"}`}; + } + + &-text { + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: ${(props) => (props.isGrayLabel ? "#a3a9ae" : "#333333")}; + } + + &-expander { + display: flex; + align-items: center; + justify-content: center; + width: 6.35px; + svg { + transform: ${(props) => + props.isOpen ? "rotate(180deg)" : "rotate(0)"}; + width: 6.35px; + height: auto; + path { + fill: #a3a9ae; + } + } + } } - svg { - height: 4.8px; + } +`; + +const StyledDropdownWrapper = styled.div` + width: 100%; + position: relative; +`; + +const StyledDropDown = styled(DropDown)` + margin-top: 5px; + padding: 6px 0; + background: #ffffff; + border: 1px solid #d0d5da; + box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); + border-radius: 3px; + overflow-y: hidden; + + width: 446px; + max-width: 446px; + div { + max-width: 446px; + } + @media ${smallTablet} { + width: calc(100vw - 34px); + max-width: calc(100vw - 34px); + div { + max-width: calc(100vw - 34px); + } + } + + div[stype="mediumBlack"] { + margin-bottom: -6px; + } + + .dropdown-item { + max-height: 32px; + cursor: pointer; + box-sizing: border-box; + width: 100%; + padding: 6px 8px; + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: #333333; + &:hover { + background: #f3f4f4; } } `; @@ -25,54 +111,66 @@ const StyledThirpartyComboBox = styled.div` const ThirdpartyComboBox = ({ t, roomParams, setRoomParams }) => { const [isGrayLabel, setIsGrayLabel] = useState(true); - const setNewThirdpartyDropdownWidth = () => { - let dropdownContainer = document.getElementById("set_room_params-dropdown"); - const dropdownWidth = isSmallTablet() ? "calc(100vw - 32px)" : "448px"; - dropdownContainer.style.width = dropdownWidth; - dropdownContainer.style.marginTop = "5px"; - }; + const [isOpen, setIsOpen] = useState(false); + const toggleIsOpen = () => setIsOpen(!isOpen); - const onSetStorageLocation = (e) => { - console.log(e); - setRoomParams({ ...roomParams, storageLocation: e }); + const setStorageLocaiton = (thirparty) => { setIsGrayLabel(false); + setRoomParams({ ...roomParams, storageLocation: thirparty }); + toggleIsOpen(); }; + const dropdownRef = useRef(null); return ( - - -
+ + + + {thirparties.map((thirparty) => ( + setStorageLocaiton(thirparty)} + /> + ))} + + + + ); }; From 37ade0870f7abe98b346110cdaaaa62b192eed16 Mon Sep 17 00:00:00 2001 From: mushka Date: Sat, 23 Jul 2022 02:08:55 +0300 Subject: [PATCH 044/293] scroll fixation tryouts --- .../dialogs/CreateRoomDialog/index.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index 4049c4f45a..e060e601c6 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -1,4 +1,5 @@ -import React, { useState } from "react"; +import React, { useState, useCallback } from "react"; +import styled from "styled-components"; import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; @@ -7,9 +8,16 @@ import ModalDialog from "@appserver/components/modal-dialog"; import SetRoomParams from "./views/CreateRoom/SetRoomParams"; import RoomTypeList from "./views/ChooseRoomType/RoomTypeList"; import Button from "@appserver/components/button"; -import { roomTypes } from "./roomTypes"; +import { roomTypes } from "./data"; import TagHandler from "./handlers/tagHandler"; +import { isMobile } from "@appserver/components/utils/device"; +const StyledModalDialog = styled(ModalDialog)` + .modal-scroll { + .scroll-body { + } + } +`; const CreateRoomDialog = ({ t, visible, @@ -17,6 +25,7 @@ const CreateRoomDialog = ({ createRoom, }) => { const onClose = () => setCreateRoomDialogVisible(false); + const [isScrollEnabled, setIsScrollEnabled] = useState(false); const [roomParams, setRoomParams] = useState({ title: "", @@ -42,17 +51,17 @@ const CreateRoomDialog = ({ }; const onCreateRoom = () => { - //createRoom(roomParams); console.log(roomParams); }; const isChooseRoomType = roomParams.type === undefined; return ( - {isChooseRoomType ? t("ChooseRoomType") : t("CreateRoom")} @@ -87,11 +96,11 @@ const CreateRoomDialog = ({ label={t("Common:CancelButton")} size="normal" scale - onClick={onClose} + onClick={() => unlockScroll()} /> )} - + ); }; @@ -101,7 +110,6 @@ export default inject(({ dialogsStore, roomsStore }) => { setCreateRoomDialogVisible, } = dialogsStore; - console.log(roomsStore); //const { createRoom } = roomsStore; return { From ae78f66b810e4c226710143aa220ec2f40142be7 Mon Sep 17 00:00:00 2001 From: mushka Date: Sat, 23 Jul 2022 02:09:15 +0300 Subject: [PATCH 045/293] import fixes --- .../CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js | 2 +- .../CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js index 57f9c60173..0bb206bfc9 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { roomTypes } from "../../roomTypes"; +import { roomTypes } from "../../data"; import RoomType from "../../sub-components/RoomType"; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js index 875cc7b0e1..e68cccf8b8 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { roomTypes } from "../../roomTypes"; +import { roomTypes } from "../../data"; import RoomType from "../../sub-components/RoomType"; const StyledRoomTypeDropdown = styled.div` @@ -36,10 +36,7 @@ const StyledRoomTypeDropdown = styled.div` const RoomTypeDropdown = ({ t, currentRoomType, setRoomType }) => { const [isOpen, setIsOpen] = useState(false); - - const toggleIsOpen = () => { - setIsOpen(!isOpen); - }; + const toggleIsOpen = () => setIsOpen(!isOpen); const [currentRoom] = roomTypes.filter( (room) => room.type === currentRoomType From 93390a86ef80e84f569f7eaba1e6fec1887f018c Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 18:55:07 +0300 Subject: [PATCH 046/293] fixes on dropdown component --- packages/asc-web-components/drop-down/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/asc-web-components/drop-down/index.js b/packages/asc-web-components/drop-down/index.js index 4d6677dfb2..c5bb385136 100644 --- a/packages/asc-web-components/drop-down/index.js +++ b/packages/asc-web-components/drop-down/index.js @@ -16,7 +16,7 @@ import StyledDropdown from "./styled-drop-down"; const Row = memo(({ data, index, style }) => { const option = data.children[index]; - const separator = option.props.isSeparator + const separator = option?.props?.isSeparator ? { width: `calc(100% - 32px)`, height: `1px` } : {}; const newStyle = { ...style, ...separator }; @@ -25,7 +25,7 @@ const Row = memo(({ data, index, style }) => { ); From fa883c967ca024003bd155b2badcaef9b87d2d39 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 18:55:41 +0300 Subject: [PATCH 047/293] moved dropdown styles to its own styled-component --- .../sub-components/StyledDropdown.js | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js new file mode 100644 index 0000000000..c487f589ca --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js @@ -0,0 +1,52 @@ +import styled from "styled-components"; +import { smallTablet } from "@appserver/components/utils/device"; +import DropDown from "@appserver/components/drop-down"; + +const StyledDropdownWrapper = styled.div` + width: 100%; + position: relative; +`; + +const StyledDropDown = styled(DropDown)` + margin-top: 5px; + padding: 6px 0; + background: #ffffff; + border: 1px solid #d0d5da; + box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); + border-radius: 3px; + overflow-y: hidden; + + width: 446px; + max-width: 446px; + div { + max-width: 446px; + } + @media ${smallTablet} { + width: calc(100vw - 34px); + max-width: calc(100vw - 34px); + div { + max-width: calc(100vw - 34px); + } + } + + div[stype="mediumBlack"] { + margin-bottom: -6px; + } + + .dropdown-item { + max-height: 32px; + cursor: pointer; + box-sizing: border-box; + width: 100%; + padding: 6px 8px; + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: #333333; + &:hover { + background: #f3f4f4; + } + } +`; + +export { StyledDropdownWrapper, StyledDropDown }; From 4206f596f69d80be591550d06b0e284bb77dc45d Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 18:56:43 +0300 Subject: [PATCH 048/293] coded out integration with new ModalDialog isScrollLocked prop --- .../src/components/dialogs/CreateRoomDialog/index.js | 10 +++++----- .../CreateRoomDialog/views/CreateRoom/SetRoomParams.js | 8 +++++++- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index e060e601c6..827315ed75 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -1,4 +1,4 @@ -import React, { useState, useCallback } from "react"; +import React, { useState } from "react"; import styled from "styled-components"; import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; @@ -10,7 +10,6 @@ import RoomTypeList from "./views/ChooseRoomType/RoomTypeList"; import Button from "@appserver/components/button"; import { roomTypes } from "./data"; import TagHandler from "./handlers/tagHandler"; -import { isMobile } from "@appserver/components/utils/device"; const StyledModalDialog = styled(ModalDialog)` .modal-scroll { @@ -25,7 +24,7 @@ const CreateRoomDialog = ({ createRoom, }) => { const onClose = () => setCreateRoomDialogVisible(false); - const [isScrollEnabled, setIsScrollEnabled] = useState(false); + const [isScrollLocked, setIsScrollLocked] = useState(false); const [roomParams, setRoomParams] = useState({ title: "", @@ -61,7 +60,7 @@ const CreateRoomDialog = ({ withBodyScroll visible={visible} onClose={onClose} - isScrollLocked={roomParams.isPrivate} + isScrollLocked={isScrollLocked} > {isChooseRoomType ? t("ChooseRoomType") : t("CreateRoom")} @@ -77,6 +76,7 @@ const CreateRoomDialog = ({ roomParams={roomParams} setRoomParams={setRoomParams} setRoomType={setRoomType} + setIsScrollLocked={setIsScrollLocked} /> )} @@ -96,7 +96,7 @@ const CreateRoomDialog = ({ label={t("Common:CancelButton")} size="normal" scale - onClick={() => unlockScroll()} + onClick={onClose} /> )} diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js index 876b2d4e23..684da162e6 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js @@ -98,6 +98,7 @@ const SetRoomParams = ({ setRoomParams, setRoomType, tagHandler, + setIsScrollLocked, }) => { const onChangeIsPrivate = () => setRoomParams({ ...roomParams, isPrivate: !roomParams.isPrivate }); @@ -129,7 +130,11 @@ const SetRoomParams = ({ />
- +
@@ -181,6 +186,7 @@ const SetRoomParams = ({ t={t} roomParams={roomParams} setRoomParams={setRoomParams} + setIsScrollLocked={setIsScrollLocked} /> From 77f4f6be99785602e5f770efab2924735ed1aac7 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 18:57:23 +0300 Subject: [PATCH 049/293] imported new styled-component to ThirpartyComboBox --- .../sub-components/ThidpartyComboBox.js | 70 ++++--------------- 1 file changed, 14 insertions(+), 56 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js index 4714be002c..c9f706b765 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js @@ -2,14 +2,11 @@ import React, { useState, useRef } from "react"; import styled from "styled-components"; import { ReactSVG } from "react-svg"; -import ComboBox from "@appserver/components/combobox"; import Button from "@appserver/components/button"; -import { isSmallTablet, smallTablet } from "@appserver/components/utils/device"; -import DomHelpers from "@appserver/components/utils/domHelpers"; import { thirparties } from "../data"; -import DropDown from "@appserver/components/drop-down"; import DropDownItem from "@appserver/components/drop-down-item"; import Text from "@appserver/components/text"; +import { StyledDropDown, StyledDropdownWrapper } from "./StyledDropdown"; const StyledThirpartyComboBox = styled.div` display: flex; @@ -61,63 +58,26 @@ const StyledThirpartyComboBox = styled.div` } `; -const StyledDropdownWrapper = styled.div` - width: 100%; - position: relative; -`; - -const StyledDropDown = styled(DropDown)` - margin-top: 5px; - padding: 6px 0; - background: #ffffff; - border: 1px solid #d0d5da; - box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); - border-radius: 3px; - overflow-y: hidden; - - width: 446px; - max-width: 446px; - div { - max-width: 446px; - } - @media ${smallTablet} { - width: calc(100vw - 34px); - max-width: calc(100vw - 34px); - div { - max-width: calc(100vw - 34px); - } - } - - div[stype="mediumBlack"] { - margin-bottom: -6px; - } - - .dropdown-item { - max-height: 32px; - cursor: pointer; - box-sizing: border-box; - width: 100%; - padding: 6px 8px; - font-weight: 400; - font-size: 13px; - line-height: 20px; - color: #333333; - &:hover { - background: #f3f4f4; - } - } -`; - -const ThirdpartyComboBox = ({ t, roomParams, setRoomParams }) => { +const ThirdpartyComboBox = ({ + t, + roomParams, + setRoomParams, + setIsScrollLocked, +}) => { const [isGrayLabel, setIsGrayLabel] = useState(true); const [isOpen, setIsOpen] = useState(false); - const toggleIsOpen = () => setIsOpen(!isOpen); + const toggleIsOpen = () => { + if (isOpen) setIsScrollLocked(false); + else setIsScrollLocked(true); + setIsOpen(!isOpen); + }; const setStorageLocaiton = (thirparty) => { setIsGrayLabel(false); setRoomParams({ ...roomParams, storageLocation: thirparty }); toggleIsOpen(); + setIsScrollLocked(false); }; const dropdownRef = useRef(null); @@ -152,12 +112,10 @@ const ThirdpartyComboBox = ({ t, roomParams, setRoomParams }) => { {thirparties.map((thirparty) => ( Date: Sun, 24 Jul 2022 18:58:11 +0300 Subject: [PATCH 050/293] started updating tgiInput with new dropdown component --- .../sub-components/TagInput.js | 131 +++++++++++++----- 1 file changed, 93 insertions(+), 38 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js index 87eda7356c..008da61186 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js @@ -4,6 +4,8 @@ import styled from "styled-components"; import Label from "@appserver/components/label"; import TextInput from "@appserver/components/text-input"; import TagList from "../views/CreateRoom/TagList"; +import DropDownItem from "@appserver/components/drop-down-item"; +import { StyledDropDown, StyledDropdownWrapper } from "./StyledDropdown"; const StyledTagInput = styled.div` .set_room_params-tag_input { @@ -22,44 +24,44 @@ const StyledTagInput = styled.div` } `; -const StyledTagDropdown = styled.div` - display: ${(props) => (props.isOpen ? "flex" : "none")}; - flex-direction: column; - padding: 4px 0; - background: #ffffff; - border: 1px solid #d0d5da; - box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); - border-radius: 3px; - z-index: 400; - position: absolute; +// const StyledTagDropdown = styled.div` +// display: ${(props) => (props.isOpen ? "flex" : "none")}; +// flex-direction: column; +// padding: 4px 0; +// background: #ffffff; +// border: 1px solid #d0d5da; +// box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); +// border-radius: 3px; +// z-index: 400; +// position: absolute; - width: 100%; +// width: 100%; - .dropdown-tag { - cursor: pointer; - box-sizing: border-box; - width: 100%; - padding: 6px 8px; - font-weight: 400; - font-size: 13px; - line-height: 20px; - outline: none; - color: #333333; - &:hover { - background: #f3f4f4; - } +// .dropdown-tag { +// cursor: pointer; +// box-sizing: border-box; +// width: 100%; +// padding: 6px 8px; +// font-weight: 400; +// font-size: 13px; +// line-height: 20px; +// outline: none; +// color: #333333; +// &:hover { +// background: #f3f4f4; +// } - &-separator { - height: 1px; - width: calc(100% - 24px); - box-sizing: border-box; - background: #eceef1; - margin: 3px 12px; - } - } -`; +// &-separator { +// height: 1px; +// width: calc(100% - 24px); +// box-sizing: border-box; +// background: #eceef1; +// margin: 3px 12px; +// } +// } +// `; -const TagInput = ({ t, tagHandler }) => { +const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { const [tagInput, setTagInput] = useState(""); const [isOpen, setIsOpen] = useState(false); @@ -68,10 +70,17 @@ const TagInput = ({ t, tagHandler }) => { ); const onTagInputChange = (e) => setTagInput(e.target.value); - const openDropdown = () => setIsOpen(true); - const closeDropdown = () => setIsOpen(false); const preventDefault = (e) => e.preventDefault(); + const openDropdown = () => { + setIsScrollLocked(true); + setIsOpen(true); + }; + const closeDropdown = () => { + setIsScrollLocked(false); + setIsOpen(false); + }; + const tagsInputElement = document.getElementById("tags-input"); const addNewTag = () => { tagHandler.addTag(tagInput); @@ -82,6 +91,11 @@ const TagInput = ({ t, tagHandler }) => { tagsInputElement.blur(); }; + const dropdownRef = useRef(null); + + const showCreateNewTag = + tagInput && !fetchedTags.find((tag) => tagInput === tag); + const showCreateNewTagSeparator = showCreateNewTag && fetchedTags.length > 0; return (
@@ -104,7 +118,48 @@ const TagInput = ({ t, tagHandler }) => { tabIndex={2} /> -
+ + + {showCreateNewTag && ( + + )} + + {showCreateNewTagSeparator && } + + {fetchedTags.map((fetchedTag, i) => ( + { + addFetchedTag(fetchedTag); + console.log(fetchedTag); + }} + /> + ))} + + + + {/*
{
))} -
+
*/} From 557578906222914962dff2ae1bb710910f59b2b6 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 21:05:14 +0300 Subject: [PATCH 051/293] new props for DropdownItem: hight and heightTablet --- packages/asc-web-components/drop-down-item/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/asc-web-components/drop-down-item/index.js b/packages/asc-web-components/drop-down-item/index.js index d49baf6c9f..4ed7d44409 100644 --- a/packages/asc-web-components/drop-down-item/index.js +++ b/packages/asc-web-components/drop-down-item/index.js @@ -20,6 +20,7 @@ const DropDownItem = (props) => { isActive, withoutIcon, noHover, + height, } = props; const onClickAction = (e) => { @@ -86,6 +87,8 @@ DropDownItem.propTypes = { /** Accepts css style */ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), /** Accepts css text-overflow */ + customHeight: PropTypes.number, + customHeightTablet: PropTypes.number, textOverflow: PropTypes.bool, fillIcon: PropTypes.bool, isSubMenu: PropTypes.bool, @@ -105,6 +108,8 @@ DropDownItem.defaultProps = { isSubMenu: false, isActive: false, withoutIcon: false, + height: 32, + heightTablet: 36, }; export default DropDownItem; From 4866fb8070faff3af500f3d3b3120839aa3734d7 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 21:06:18 +0300 Subject: [PATCH 052/293] added interaction with height and heightTablet props for DropDown --- packages/asc-web-components/drop-down/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/asc-web-components/drop-down/index.js b/packages/asc-web-components/drop-down/index.js index c5bb385136..e095d1589d 100644 --- a/packages/asc-web-components/drop-down/index.js +++ b/packages/asc-web-components/drop-down/index.js @@ -207,7 +207,7 @@ class DropDown extends React.PureComponent { if (item && item.props.isSeparator) return isTablet ? 16 : 12; - return isTablet ? 36 : 32; + return isTablet ? item.props.heightTablet : item.props.height; }; hideDisabledItems = () => { if (React.Children.count(this.props.children) > 0) { From f0c30dbc5ca08c89361ddb1972f77cb94b9b7bf0 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 23:42:10 +0300 Subject: [PATCH 053/293] fixes on drop-down component --- packages/asc-web-components/drop-down/index.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/asc-web-components/drop-down/index.js b/packages/asc-web-components/drop-down/index.js index e095d1589d..832541d1c0 100644 --- a/packages/asc-web-components/drop-down/index.js +++ b/packages/asc-web-components/drop-down/index.js @@ -205,9 +205,16 @@ class DropDown extends React.PureComponent { getItemHeight = (item) => { const isTablet = window.innerWidth < 1024; //TODO: Make some better - if (item && item.props.isSeparator) return isTablet ? 16 : 12; + if (item && item.props.disabled) return 0; - return isTablet ? item.props.heightTablet : item.props.height; + let height = item?.props.height; + let heightTablet = item?.props.heightTablet; + + if (item && item.props.isSeparator) { + return isTablet ? 16 : 12; + } + + return isTablet ? heightTablet : height; }; hideDisabledItems = () => { if (React.Children.count(this.props.children) > 0) { @@ -233,7 +240,6 @@ class DropDown extends React.PureComponent { renderDropDown() { const { maxHeight, children, showDisabledItems, theme } = this.props; const { directionX, directionY, width, manualY } = this.state; - let cleanChildren; const rowHeights = React.Children.map(children, (child) => this.getItemHeight(child) @@ -246,6 +252,7 @@ class DropDown extends React.PureComponent { ? { height: calculatedHeight + "px" } : {}; + let cleanChildren = children; if (!showDisabledItems) cleanChildren = this.hideDisabledItems(); return ( @@ -265,7 +272,7 @@ class DropDown extends React.PureComponent { width={width} itemSize={getItemSize} itemCount={children.length} - itemData={{ children: children, theme: theme }} + itemData={{ children: cleanChildren, theme: theme }} outerElementType={CustomScrollbarsVirtualList} > {Row} From f37ff610b485fb4fde779bf2a3943ddb8a66723c Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 23:42:59 +0300 Subject: [PATCH 054/293] added rememberStorageLocation to component state --- .../Client/src/components/dialogs/CreateRoomDialog/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index 827315ed75..83528cdd42 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -32,6 +32,7 @@ const CreateRoomDialog = ({ tags: [], isPrivate: false, storageLocation: undefined, + rememberStorageLocation: false, icon: "", }); From 55e841a0163b20132cfe1a0ec8963b580ae15610 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 23:44:29 +0300 Subject: [PATCH 055/293] redo of storage location to a single component --- ...hidpartyComboBox.js => StorageLocation.js} | 70 +++++++++++++++---- 1 file changed, 57 insertions(+), 13 deletions(-) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/{ThidpartyComboBox.js => StorageLocation.js} (64%) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js similarity index 64% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js index c9f706b765..b8f0339d1a 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ThidpartyComboBox.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js @@ -7,8 +7,9 @@ import { thirparties } from "../data"; import DropDownItem from "@appserver/components/drop-down-item"; import Text from "@appserver/components/text"; import { StyledDropDown, StyledDropdownWrapper } from "./StyledDropdown"; +import Checkbox from "@appserver/components/checkbox"; -const StyledThirpartyComboBox = styled.div` +const StyledStorageLocation = styled.div` display: flex; flex-direction: column; @@ -55,10 +56,22 @@ const StyledThirpartyComboBox = styled.div` } } } + + &-checkbox { + margin-top: 8px; + .checkbox { + margin-right: 8px; + } + .checkbox-text { + font-weight: 400; + font-size: 13px; + line-height: 20px; + } + } } `; -const ThirdpartyComboBox = ({ +const StorageLocation = ({ t, roomParams, setRoomParams, @@ -80,10 +93,35 @@ const ThirdpartyComboBox = ({ setIsScrollLocked(false); }; + const setRememberStorageLocation = () => + setRoomParams({ + ...roomParams, + rememberStorageLocation: !roomParams.rememberStorageLocation, + }); + const dropdownRef = useRef(null); return ( - <> - + +
+
+ + {t("StorageLocationTitle")} + + +
+
+ {t("StorageLocationDescription")} +
+
+ +
- {thirparties.map((thirparty) => ( + {thirparties.map((thirdparty) => ( setStorageLocaiton(thirparty)} + label={thirdparty.title} + key={thirdparty.id} + onClick={() => setStorageLocaiton(thirdparty)} /> ))} - - + + + + ); }; -export default ThirdpartyComboBox; +export default StorageLocation; From 01ce1e5316c9e6bc5a7762a54e7405b7bbd83e2c Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 23:44:52 +0300 Subject: [PATCH 056/293] fixes on own styled dropdown --- .../sub-components/StyledDropdown.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js index c487f589ca..c422903de1 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js @@ -16,11 +16,17 @@ const StyledDropDown = styled(DropDown)` border-radius: 3px; overflow-y: hidden; + .scroll-body { + /* height: 158px !important; */ + margin-bottom: -21px !important; + } + width: 446px; max-width: 446px; div { max-width: 446px; } + @media ${smallTablet} { width: calc(100vw - 34px); max-width: calc(100vw - 34px); @@ -29,12 +35,9 @@ const StyledDropDown = styled(DropDown)` } } - div[stype="mediumBlack"] { - margin-bottom: -6px; - } - .dropdown-item { - max-height: 32px; + height: 32px !important; + max-height: 32px !important; cursor: pointer; box-sizing: border-box; width: 100%; @@ -46,6 +49,11 @@ const StyledDropDown = styled(DropDown)` &:hover { background: #f3f4f4; } + + &-separator { + height: 7px !important; + max-height: 7px !important; + } } `; From e8fec2ada18f571025d2e5ef4332452e809e4043 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 23:45:09 +0300 Subject: [PATCH 057/293] moved StyledParam to its own file --- .../sub-components/StyledParam.js | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledParam.js diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledParam.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledParam.js new file mode 100644 index 0000000000..4069b32dbc --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledParam.js @@ -0,0 +1,61 @@ +import styled, { css } from "styled-components"; + +const StyledParam = styled.div` + box-sizing: border-box; + display: flex; + width: 100%; + + ${(props) => + props.isPrivate + ? css` + flex-direction: row; + justify-content: space-between; + ` + : props.storageLocation + ? css` + flex-direction: column; + gap: 12px; + ` + : ""} + + .set_room_params-info { + display: flex; + flex-direction: column; + gap: 4px; + + .set_room_params-info-title { + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + + .set_room_params-info-title-text { + font-weight: 600; + font-size: 13px; + line-height: 20px; + } + .set_room_params-info-title-help { + border-radius: 50%; + background-color: #a3a9ae; + circle, + rect { + fill: #ffffff; + } + } + } + .set_room_params-info-description { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #a3a9ae; + } + } + + .set_room_params-toggle { + width: 28px; + height: 16px; + margin: 2px 0; + } +`; + +export { StyledParam }; From 7ba028a12e4ef6713d7309ae876443c7987c4254 Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 23:46:02 +0300 Subject: [PATCH 058/293] upwork of tagInput dropdown --- .../sub-components/TagInput.js | 156 ++++++------------ 1 file changed, 55 insertions(+), 101 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js index 008da61186..3569b8f0d8 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js @@ -24,50 +24,18 @@ const StyledTagInput = styled.div` } `; -// const StyledTagDropdown = styled.div` -// display: ${(props) => (props.isOpen ? "flex" : "none")}; -// flex-direction: column; -// padding: 4px 0; -// background: #ffffff; -// border: 1px solid #d0d5da; -// box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); -// border-radius: 3px; -// z-index: 400; -// position: absolute; - -// width: 100%; - -// .dropdown-tag { -// cursor: pointer; -// box-sizing: border-box; -// width: 100%; -// padding: 6px 8px; -// font-weight: 400; -// font-size: 13px; -// line-height: 20px; -// outline: none; -// color: #333333; -// &:hover { -// background: #f3f4f4; -// } - -// &-separator { -// height: 1px; -// width: calc(100% - 24px); -// box-sizing: border-box; -// background: #eceef1; -// margin: 3px 12px; -// } -// } -// `; - const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { const [tagInput, setTagInput] = useState(""); const [isOpen, setIsOpen] = useState(false); - const fetchedTags = tagHandler.fetchedTags.filter((tag) => + const chosenTags = tagHandler.tags.map((tag) => tag.name); + const fetchedTags = tagHandler.fetchedTags; + const filteredFetchedTags = fetchedTags.filter((tag) => tag.toLowerCase().includes(tagInput.toLowerCase()) ); + const tagsForDropdown = filteredFetchedTags.filter( + (tag) => !chosenTags.includes(tag) + ); const onTagInputChange = (e) => setTagInput(e.target.value); const preventDefault = (e) => e.preventDefault(); @@ -82,6 +50,10 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { }; const tagsInputElement = document.getElementById("tags-input"); + + const onClickOutside = () => { + tagsInputElement.blur(); + }; const addNewTag = () => { tagHandler.addTag(tagInput); tagsInputElement.blur(); @@ -93,9 +65,47 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { const dropdownRef = useRef(null); - const showCreateNewTag = - tagInput && !fetchedTags.find((tag) => tagInput === tag); - const showCreateNewTagSeparator = showCreateNewTag && fetchedTags.length > 0; + let dropdownItems = tagsForDropdown.map((tag, i) => ( + { + addFetchedTag(tag); + console.log(tag); + }} + /> + )); + + if ( + tagInput && + ![...tagsForDropdown, ...chosenTags].find((tag) => tagInput === tag) + ) { + const dropdownItemNewTag = ( + + ); + + if (tagsForDropdown.length > 0) { + dropdownItems = [ + dropdownItemNewTag, + , + ...dropdownItems, + ]; + } else { + dropdownItems = [dropdownItemNewTag, ...dropdownItems]; + } + } + return (
@@ -126,71 +136,15 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { - {showCreateNewTag && ( - - )} - - {showCreateNewTagSeparator && } - - {fetchedTags.map((fetchedTag, i) => ( - { - addFetchedTag(fetchedTag); - console.log(fetchedTag); - }} - /> - ))} + {dropdownItems} - - {/*
- - {tagInput && !fetchedTags.find((tag) => tagInput === tag) && ( - <> -
- Create tag “{tagInput}” -
- {fetchedTags.length > 0 && ( -
- )} - - )} - {fetchedTags.map((fetchedTag, i) => ( -
addFetchedTag(fetchedTag)} - > - {fetchedTag} -
- ))} - -
*/} - ); From 80db7bdb0ffde1750d5548399452a54e7fbe3a4f Mon Sep 17 00:00:00 2001 From: mushka Date: Sun, 24 Jul 2022 23:46:24 +0300 Subject: [PATCH 059/293] fixed importing issues --- .../views/CreateRoom/SetRoomParams.js | 63 +------------------ 1 file changed, 3 insertions(+), 60 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js index 684da162e6..e00c47f43f 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import styled, { css } from "styled-components"; import RoomTypeDropdown from "./RoomTypeDropdown"; -import ThirdpartyComboBox from "../../sub-components/ThidpartyComboBox"; +import StorageLocation from "../../sub-components/StorageLocation"; import TextInput from "@appserver/components/text-input"; import Label from "@appserver/components/label"; @@ -10,6 +10,7 @@ import HelpButton from "@appserver/components/help-button"; import Text from "@appserver/components/text"; import AvatarEditor from "@appserver/components/avatar-editor"; import TagInput from "../../sub-components/TagInput"; +import { StyledParam } from "../../sub-components/StyledParam"; const StyledSetRoomParams = styled.div` display: flex; @@ -24,64 +25,6 @@ const StyledSetRoomParams = styled.div` } `; -const StyledParam = styled.div` - box-sizing: border-box; - display: flex; - width: 100%; - - ${(props) => - props.isPrivate - ? css` - flex-direction: row; - justify-content: space-between; - ` - : props.storageLocation - ? css` - flex-direction: column; - gap: 12px; - ` - : ""} - - .set_room_params-info { - display: flex; - flex-direction: column; - gap: 4px; - - .set_room_params-info-title { - display: flex; - flex-direction: row; - align-items: center; - gap: 6px; - - .set_room_params-info-title-text { - font-weight: 600; - font-size: 13px; - line-height: 20px; - } - .set_room_params-info-title-help { - border-radius: 50%; - background-color: #a3a9ae; - circle, - rect { - fill: #ffffff; - } - } - } - .set_room_params-info-description { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #a3a9ae; - } - } - - .set_room_params-toggle { - width: 28px; - height: 16px; - margin: 2px 0; - } -`; - const StyledIconEditorWrapper = styled.div` .use_modal-avatar_editor_body { margin: 0; @@ -182,7 +125,7 @@ const SetRoomParams = ({
- Date: Mon, 25 Jul 2022 03:31:43 +0300 Subject: [PATCH 060/293] overall component structure rebuild + some fixes --- .../dialogs/CreateRoomDialog/index.js | 4 +- .../ChooseRoomType/index.js} | 6 +- .../CreateRoom/RoomTypeDropdown/index.js} | 6 +- .../StorageLocation/ThirpartyComboBox.js | 150 +++++++++++++++ .../CreateRoom/StorageLocation/index.js | 60 ++++++ .../CreateRoom/TagInput}/TagList.js | 0 .../TagInput/index.js} | 11 +- .../CreateRoom/index.js} | 39 +--- .../sub-components/StorageLocation.js | 179 ------------------ .../sub-components/{ => common}/RoomType.js | 0 .../{ => common}/StyledDropdown.js | 8 +- .../{ => common}/StyledParam.js | 0 12 files changed, 239 insertions(+), 224 deletions(-) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/{views/ChooseRoomType/RoomTypeList.js => sub-components/ChooseRoomType/index.js} (80%) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/{views/CreateRoom/RoomTypeDropdown.js => sub-components/CreateRoom/RoomTypeDropdown/index.js} (93%) create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/{views/CreateRoom => sub-components/CreateRoom/TagInput}/TagList.js (100%) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/{TagInput.js => CreateRoom/TagInput/index.js} (95%) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/{views/CreateRoom/SetRoomParams.js => sub-components/CreateRoom/index.js} (72%) delete mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/{ => common}/RoomType.js (100%) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/{ => common}/StyledDropdown.js (89%) rename products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/{ => common}/StyledParam.js (100%) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index 83528cdd42..a9587e6baa 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -5,8 +5,8 @@ import { withTranslation } from "react-i18next"; import ModalDialog from "@appserver/components/modal-dialog"; -import SetRoomParams from "./views/CreateRoom/SetRoomParams"; -import RoomTypeList from "./views/ChooseRoomType/RoomTypeList"; +import SetRoomParams from "./sub-components/CreateRoom"; +import RoomTypeList from "./sub-components/ChooseRoomType"; import Button from "@appserver/components/button"; import { roomTypes } from "./data"; import TagHandler from "./handlers/tagHandler"; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ChooseRoomType/index.js similarity index 80% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ChooseRoomType/index.js index 0bb206bfc9..0d8a03a0bc 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/ChooseRoomType/RoomTypeList.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/ChooseRoomType/index.js @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import { roomTypes } from "../../data"; -import RoomType from "../../sub-components/RoomType"; +import RoomType from "../common/RoomType"; const StyledRoomTypeList = styled.div` width: 100%; @@ -12,7 +12,7 @@ const StyledRoomTypeList = styled.div` gap: 16px; `; -const RoomTypeList = ({ t, setRoomType }) => { +const ChooseRoomType = ({ t, setRoomType }) => { return ( {roomTypes.map((room) => ( @@ -28,4 +28,4 @@ const RoomTypeList = ({ t, setRoomType }) => { ); }; -export default RoomTypeList; +export default ChooseRoomType; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/RoomTypeDropdown/index.js similarity index 93% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/RoomTypeDropdown/index.js index e68cccf8b8..4233388748 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/RoomTypeDropdown.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/RoomTypeDropdown/index.js @@ -1,12 +1,11 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { roomTypes } from "../../data"; -import RoomType from "../../sub-components/RoomType"; +import { roomTypes } from "../../../data"; +import RoomType from "../../common/RoomType"; const StyledRoomTypeDropdown = styled.div` display: flex; flex-direction: column; - gap: 4px; width: 100%; .dropdown-content-wrapper { @@ -16,6 +15,7 @@ const StyledRoomTypeDropdown = styled.div` ${(props) => !props.isOpen && "display: none"}; .dropdown-content { + margin-top: 4px; background: #ffffff; overflow: visible; z-index: 400; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js new file mode 100644 index 0000000000..72be36d292 --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js @@ -0,0 +1,150 @@ +import React, { useState, useRef } from "react"; +import styled from "styled-components"; +import { ReactSVG } from "react-svg"; + +import { thirparties } from "../../../data"; + +import Text from "@appserver/components/text"; +import Button from "@appserver/components/button"; +import DropDownItem from "@appserver/components/drop-down-item"; +import { + StyledDropDown, + StyledDropDownWrapper, +} from "../../common/StyledDropdown"; + +const StyledStorageLocation = styled.div` + display: flex; + flex-direction: column; + + .set_room_params-thirdparty { + display: flex; + flex-direction: row; + gap: 8px; + &-combobox { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px 7px; + background: #ffffff; + border-radius: 3px; + max-height: 32px; + + border: ${(props) => `1px solid ${props.isOpen ? "#2DA7DB" : "#d0d5da"}`}; + &:hover { + border: ${(props) => + `1px solid ${props.isOpen ? "#2DA7DB" : "#a3a9ae"}`}; + } + + &-text { + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: ${(props) => (props.isGrayLabel ? "#a3a9ae" : "#333333")}; + } + + &-expander { + display: flex; + align-items: center; + justify-content: center; + width: 6.35px; + svg { + transform: ${(props) => + props.isOpen ? "rotate(180deg)" : "rotate(0)"}; + width: 6.35px; + height: auto; + path { + fill: #a3a9ae; + } + } + } + } + + &-checkbox { + margin-top: 8px; + .checkbox { + margin-right: 8px; + } + .checkbox-text { + font-weight: 400; + font-size: 13px; + line-height: 20px; + } + } + } +`; + +const ThirpartyComboBox = ({ + t, + roomParams, + setRoomParams, + setIsScrollLocked, +}) => { + const [isOpen, setIsOpen] = useState(false); + const toggleIsOpen = () => { + if (isOpen) setIsScrollLocked(false); + else setIsScrollLocked(true); + setIsOpen(!isOpen); + }; + + const [isGrayLabel, setIsGrayLabel] = useState(true); + + const setStorageLocaiton = (thirparty) => { + setIsGrayLabel(false); + setRoomParams({ ...roomParams, storageLocation: thirparty }); + toggleIsOpen(); + setIsScrollLocked(false); + }; + + const dropdownRef = useRef(null); + return ( + +
+
+ + {roomParams.storageLocation?.title || "Select"} + + +
+ +
+ + + + {thirparties.map((thirdparty) => ( + setStorageLocaiton(thirdparty)} + /> + ))} + + + + ); +}; + +export default ThirpartyComboBox; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js new file mode 100644 index 0000000000..445a05d056 --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js @@ -0,0 +1,60 @@ +import React from "react"; + +import Text from "@appserver/components/text"; + +import Checkbox from "@appserver/components/checkbox"; +import { StyledParam } from "../../common/StyledParam"; +import HelpButton from "@appserver/components/help-button"; +import ThirpartyComboBox from "./ThirpartyComboBox"; + +const StorageLocation = ({ + t, + roomParams, + setRoomParams, + setIsScrollLocked, +}) => { + const setRememberStorageLocation = () => + setRoomParams({ + ...roomParams, + rememberStorageLocation: !roomParams.rememberStorageLocation, + }); + + return ( + +
+
+ + {t("StorageLocationTitle")} + + +
+
+ {t("StorageLocationDescription")} +
+
+ + + + + + ); +}; + +export default StorageLocation; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/TagList.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/TagList.js similarity index 100% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/TagList.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/TagList.js diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js similarity index 95% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js index 3569b8f0d8..4f81f40bb7 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/TagInput.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js @@ -3,9 +3,12 @@ import styled from "styled-components"; import Label from "@appserver/components/label"; import TextInput from "@appserver/components/text-input"; -import TagList from "../views/CreateRoom/TagList"; +import TagList from "./TagList"; import DropDownItem from "@appserver/components/drop-down-item"; -import { StyledDropDown, StyledDropdownWrapper } from "./StyledDropdown"; +import { + StyledDropDown, + StyledDropDownWrapper, +} from "../../common/StyledDropdown"; const StyledTagInput = styled.div` .set_room_params-tag_input { @@ -128,7 +131,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { tabIndex={2} /> - { > {dropdownItems} - + ); diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js similarity index 72% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js index e00c47f43f..ccffafed39 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/views/CreateRoom/SetRoomParams.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import styled, { css } from "styled-components"; import RoomTypeDropdown from "./RoomTypeDropdown"; -import StorageLocation from "../../sub-components/StorageLocation"; +import StorageLocation from "./StorageLocation"; import TextInput from "@appserver/components/text-input"; import Label from "@appserver/components/label"; @@ -9,8 +9,8 @@ import ToggleButton from "@appserver/components/toggle-button"; import HelpButton from "@appserver/components/help-button"; import Text from "@appserver/components/text"; import AvatarEditor from "@appserver/components/avatar-editor"; -import TagInput from "../../sub-components/TagInput"; -import { StyledParam } from "../../sub-components/StyledParam"; +import TagInput from "./TagInput"; +import { StyledParam } from "../common/StyledParam"; const StyledSetRoomParams = styled.div` display: flex; @@ -105,33 +105,12 @@ const SetRoomParams = ({ /> - -
-
- - {t("StorageLocationTitle")} - - -
-
- {t("StorageLocationDescription")} -
-
- - - + {/* diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js deleted file mode 100644 index b8f0339d1a..0000000000 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StorageLocation.js +++ /dev/null @@ -1,179 +0,0 @@ -import React, { useState, useRef } from "react"; -import styled from "styled-components"; -import { ReactSVG } from "react-svg"; - -import Button from "@appserver/components/button"; -import { thirparties } from "../data"; -import DropDownItem from "@appserver/components/drop-down-item"; -import Text from "@appserver/components/text"; -import { StyledDropDown, StyledDropdownWrapper } from "./StyledDropdown"; -import Checkbox from "@appserver/components/checkbox"; - -const StyledStorageLocation = styled.div` - display: flex; - flex-direction: column; - - .set_room_params-thirdparty { - display: flex; - flex-direction: row; - gap: 8px; - &-combobox { - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 5px 7px; - background: #ffffff; - border-radius: 3px; - max-height: 32px; - - border: ${(props) => `1px solid ${props.isOpen ? "#2DA7DB" : "#d0d5da"}`}; - &:hover { - border: ${(props) => - `1px solid ${props.isOpen ? "#2DA7DB" : "#a3a9ae"}`}; - } - - &-text { - font-weight: 400; - font-size: 13px; - line-height: 20px; - color: ${(props) => (props.isGrayLabel ? "#a3a9ae" : "#333333")}; - } - - &-expander { - display: flex; - align-items: center; - justify-content: center; - width: 6.35px; - svg { - transform: ${(props) => - props.isOpen ? "rotate(180deg)" : "rotate(0)"}; - width: 6.35px; - height: auto; - path { - fill: #a3a9ae; - } - } - } - } - - &-checkbox { - margin-top: 8px; - .checkbox { - margin-right: 8px; - } - .checkbox-text { - font-weight: 400; - font-size: 13px; - line-height: 20px; - } - } - } -`; - -const StorageLocation = ({ - t, - roomParams, - setRoomParams, - setIsScrollLocked, -}) => { - const [isGrayLabel, setIsGrayLabel] = useState(true); - - const [isOpen, setIsOpen] = useState(false); - const toggleIsOpen = () => { - if (isOpen) setIsScrollLocked(false); - else setIsScrollLocked(true); - setIsOpen(!isOpen); - }; - - const setStorageLocaiton = (thirparty) => { - setIsGrayLabel(false); - setRoomParams({ ...roomParams, storageLocation: thirparty }); - toggleIsOpen(); - setIsScrollLocked(false); - }; - - const setRememberStorageLocation = () => - setRoomParams({ - ...roomParams, - rememberStorageLocation: !roomParams.rememberStorageLocation, - }); - - const dropdownRef = useRef(null); - return ( - -
-
- - {t("StorageLocationTitle")} - - -
-
- {t("StorageLocationDescription")} -
-
- - -
-
- - {roomParams.storageLocation?.title || "Select"} - - -
- -
- - - - {thirparties.map((thirdparty) => ( - setStorageLocaiton(thirdparty)} - /> - ))} - - - - - - - ); -}; - -export default StorageLocation; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/RoomType.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/RoomType.js similarity index 100% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/RoomType.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/RoomType.js diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledDropdown.js similarity index 89% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledDropdown.js index c422903de1..bc400c9b7b 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledDropdown.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledDropdown.js @@ -1,8 +1,10 @@ import styled from "styled-components"; + import { smallTablet } from "@appserver/components/utils/device"; + import DropDown from "@appserver/components/drop-down"; -const StyledDropdownWrapper = styled.div` +const StyledDropDownWrapper = styled.div` width: 100%; position: relative; `; @@ -18,7 +20,7 @@ const StyledDropDown = styled(DropDown)` .scroll-body { /* height: 158px !important; */ - margin-bottom: -21px !important; + //margin-bottom: -21px !important; } width: 446px; @@ -57,4 +59,4 @@ const StyledDropDown = styled(DropDown)` } `; -export { StyledDropdownWrapper, StyledDropDown }; +export { StyledDropDownWrapper, StyledDropDown }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledParam.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledParam.js similarity index 100% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/StyledParam.js rename to products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledParam.js From 57c72955b32ecf3abada22981ed6972484bc0fa5 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 04:47:20 +0300 Subject: [PATCH 061/293] added thirdpartyFolderName to component state --- .../Client/src/components/dialogs/CreateRoomDialog/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index a9587e6baa..66f5e1a5cb 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -33,6 +33,7 @@ const CreateRoomDialog = ({ isPrivate: false, storageLocation: undefined, rememberStorageLocation: false, + thirdpartyFolderName: "", icon: "", }); From 34aa6141276a192ec0022271096c772a25ec7b0b Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 04:48:27 +0300 Subject: [PATCH 062/293] added new components for thirdpartyFolderName param --- .../sub-components/CreateRoom/index.js | 44 ++++++++++++++++--- .../sub-components/common/StyledParam.js | 5 +++ 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js index ccffafed39..02a48e569b 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js @@ -43,9 +43,15 @@ const SetRoomParams = ({ tagHandler, setIsScrollLocked, }) => { + const onChangeName = (e) => + setRoomParams({ ...roomParams, title: e.target.value }); + const onChangeIsPrivate = () => setRoomParams({ ...roomParams, isPrivate: !roomParams.isPrivate }); + const onChangeThidpartyFolderName = (e) => + setRoomParams({ ...roomParams, thirdpartyFolderName: e.target.value }); + return ( - setRoomParams({ ...roomParams, title: e.target.value }) - } + onChange={onChangeName} scale placeholder="New room" tabIndex={1} @@ -112,9 +116,39 @@ const SetRoomParams = ({ setIsScrollLocked={setIsScrollLocked} /> - {/* + +
+
+ + {`${t("Folder Name")}:`} + +
+
+ {t( + "A new folder for storing this room’s data will be created in the connected storage" + )} +
+
+ +
+ +
+ + + - */} + ); }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledParam.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledParam.js index 4069b32dbc..d140cd4375 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledParam.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/common/StyledParam.js @@ -16,6 +16,11 @@ const StyledParam = styled.div` flex-direction: column; gap: 12px; ` + : props.folderName + ? css` + flex-direction: column; + gap: 4px; + ` : ""} .set_room_params-info { From 720559c759f92b1d5dfaf6fca9de1e869bf89821 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 04:48:58 +0300 Subject: [PATCH 063/293] moved checkbox to ThirdpartyComboBox --- .../StorageLocation/ThirpartyComboBox.js | 14 ++++++++++++++ .../CreateRoom/StorageLocation/index.js | 13 ------------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js index 72be36d292..a1671a848e 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/ThirpartyComboBox.js @@ -11,6 +11,7 @@ import { StyledDropDown, StyledDropDownWrapper, } from "../../common/StyledDropdown"; +import Checkbox from "@appserver/components/checkbox"; const StyledStorageLocation = styled.div` display: flex; @@ -96,6 +97,12 @@ const ThirpartyComboBox = ({ setIsScrollLocked(false); }; + const setRememberStorageLocation = () => + setRoomParams({ + ...roomParams, + rememberStorageLocation: !roomParams.rememberStorageLocation, + }); + const dropdownRef = useRef(null); return ( @@ -143,6 +150,13 @@ const ThirpartyComboBox = ({ ))} + + ); }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js index 445a05d056..1b4c710341 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/StorageLocation/index.js @@ -13,12 +13,6 @@ const StorageLocation = ({ setRoomParams, setIsScrollLocked, }) => { - const setRememberStorageLocation = () => - setRoomParams({ - ...roomParams, - rememberStorageLocation: !roomParams.rememberStorageLocation, - }); - return (
@@ -46,13 +40,6 @@ const StorageLocation = ({ setRoomParams={setRoomParams} setIsScrollLocked={setIsScrollLocked} /> - - ); }; From 5311ebff5dacd4c096d26e5d22e25777ba5f7f40 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 04:49:40 +0300 Subject: [PATCH 064/293] some fixes and style tweaks in TagInput --- .../CreateRoom/TagInput/index.js | 47 +++++++++++-------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js index 4f81f40bb7..ee2b7a8dde 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js @@ -22,6 +22,7 @@ const StyledTagInput = styled.div` } .dropdown-content-wrapper { + margin-bottom: -4px; max-width: 100%; position: relative; } @@ -59,6 +60,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { }; const addNewTag = () => { tagHandler.addTag(tagInput); + setTagInput(""); tagsInputElement.blur(); }; const addFetchedTag = (name) => { @@ -98,15 +100,18 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { /> ); - if (tagsForDropdown.length > 0) { - dropdownItems = [ - dropdownItemNewTag, - , - ...dropdownItems, - ]; - } else { - dropdownItems = [dropdownItemNewTag, ...dropdownItems]; - } + dropdownItems = [dropdownItemNewTag, ...dropdownItems]; + + // if (tagsForDropdown.length > 0) { + // dropdownItems = [ + // dropdownItemNewTag, + // , + // ...dropdownItems, + // ]; + // dropdownItems = [dropdownItemNewTag, ...dropdownItems]; + // } else { + // dropdownItems = [dropdownItemNewTag, ...dropdownItems]; + // } } return ( @@ -136,17 +141,19 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { ref={dropdownRef} onMouseDown={preventDefault} > - - {dropdownItems} - + {dropdownItems.length > 0 && ( + + {dropdownItems} + + )} From 30d2b47fb01740de2b1aa1b816ef6a7259e410a1 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 18:14:16 +0300 Subject: [PATCH 065/293] added createTag and addTagsToRoom api calls --- packages/asc-web-common/api/rooms/index.js | 28 +++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/asc-web-common/api/rooms/index.js b/packages/asc-web-common/api/rooms/index.js index 5721a9b374..ccf691e851 100644 --- a/packages/asc-web-common/api/rooms/index.js +++ b/packages/asc-web-common/api/rooms/index.js @@ -44,7 +44,7 @@ export function createRoom(data) { export function createRoomInThirdpary(id, data) { const options = { method: "post", - url: `/files/rooms/thirdparty/:${id}`, + url: `/files/rooms/thirdparty/${id}`, data, }; @@ -110,6 +110,32 @@ export function unarchiveRoom(id, deleteAfter = true) { }); } +export function createTag(name) { + const data = { name }; + const options = { + method: "post", + url: "/files/tags", + data, + }; + + return request(options).then((res) => { + return res; + }); +} + +export function addTagsToRoom(id, tagArray) { + const data = { names: tagArray }; + const options = { + method: "put", + url: `/files/rooms/${id}/tags`, + data, + }; + + return request(options).then((res) => { + return res; + }); +} + export function getTags() { const options = { method: "get", From d9689fd6f92d3d09102de11171cde7822e451d86 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 18:17:22 +0300 Subject: [PATCH 066/293] revert of modal callout back to Event method --- .../Client/src/components/Article/MainButton/index.js | 4 ++-- .../ASC.Files/Client/src/components/EmptyContainer/index.js | 4 ++-- .../ASC.Files/Client/src/pages/Home/Section/Header/index.js | 5 ++--- .../src/pages/VirtualRooms/Section/Body/EmptyContainer.js | 5 +++-- 4 files changed, 9 insertions(+), 9 deletions(-) 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 2d908f50c5..2b12081be8 100644 --- a/products/ASC.Files/Client/src/components/Article/MainButton/index.js +++ b/products/ASC.Files/Client/src/components/Article/MainButton/index.js @@ -66,8 +66,8 @@ const ArticleMainButtonContent = (props) => { ); const onCreateRoom = React.useCallback(() => { - console.log("create room"); - setCreateRoomDialogVisible(true); + const event = new Event(Events.ROOM_CREATE); + window.dispatchEvent(event); }, []); const onShowSelectFileDialog = React.useCallback(() => { diff --git a/products/ASC.Files/Client/src/components/EmptyContainer/index.js b/products/ASC.Files/Client/src/components/EmptyContainer/index.js index 482601dbbe..1f1e9ae967 100644 --- a/products/ASC.Files/Client/src/components/EmptyContainer/index.js +++ b/products/ASC.Files/Client/src/components/EmptyContainer/index.js @@ -38,8 +38,8 @@ const EmptyContainer = ({ }; const onCreateRoom = (e) => { - setCreateRoomDialogVisible(true); - console.log("create room"); + const event = new Event(Events.ROOM_CREATE); + window.dispatchEvent(event); }; return isFiltered ? ( diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index 6afc6d431d..cf718b3675 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -69,9 +69,8 @@ class SectionHeaderContent extends React.Component { }; onCreateRoom = () => { - console.log("create room"); - const { setCreateRoomDialogVisible } = this.props; - setCreateRoomDialogVisible(true); + const event = new Event(Events.ROOM_CREATE); + window.dispatchEvent(event); }; createDocument = () => this.onCreate("docx"); diff --git a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js index 09419102be..60a6d7cf2a 100644 --- a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js +++ b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/EmptyContainer.js @@ -11,6 +11,7 @@ import Link from "@appserver/components/link"; import IconButton from "@appserver/components/icon-button"; import { tablet } from "@appserver/components/utils/device"; +import { Events } from "../../../../helpers/constants"; const StyledWrapper = styled.div` .empty-folder_container { @@ -49,8 +50,8 @@ const EmptyContainer = ({ theme, setCreateRoomDialogVisible }) => { linkStyles.color = theme.filesEmptyContainer.linkColor; const onCreateRoom = () => { - console.log("Create room"); - setCreateRoomDialogVisible(true); + const event = new Event(Events.ROOM_CREATE); + window.dispatchEvent(event); }; const buttons = ( From ccb737f19f4a96ce54675f07997bf1b3ba769e73 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 18:18:11 +0300 Subject: [PATCH 067/293] new addNewTag and set up for real tag fetching in TagHandler --- .../CreateRoomDialog/handlers/TagHandler.js | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/handlers/TagHandler.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/handlers/TagHandler.js index d35e3b69e6..a9d9d7cd65 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/handlers/TagHandler.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/handlers/TagHandler.js @@ -1,18 +1,8 @@ class TagHandler { - constructor(tags, setTags) { + constructor(tags, setTags, fetchedTags) { this.tags = tags; this.setTags = setTags; - this.fetchedTags = [ - "Figma", - "Portal", - "Design", - "Images", - "Fi", - "Fa", - "Fo", - "Fam", - "Fim", - ]; + this.fetchedTags = fetchedTags; } createRandomTagId() { @@ -36,12 +26,23 @@ class TagHandler { id: this.createRandomTagId(), name, }); + this.setTags(newTags); + } + addNewTag(name) { + let newTags = [...this.tags]; + newTags.push({ + id: this.createRandomTagId(), + isNew: true, + name, + }); this.setTags(newTags); } deleteTag(id) { - this.setTags(this.tags.filter((tag) => tag.id !== id)); + let newTags = [...this.tags]; + newTags = newTags.filter((tag) => tag.id !== id); + this.setTags(newTags); } } From 2ce7d294669534f677198b0d8d08c99ef3112ef1 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 18:19:24 +0300 Subject: [PATCH 068/293] added clearing output on addTag in TagInput --- .../sub-components/CreateRoom/TagInput/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js index ee2b7a8dde..5badf4fb7d 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/TagInput/index.js @@ -58,13 +58,16 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { const onClickOutside = () => { tagsInputElement.blur(); }; + const addNewTag = () => { - tagHandler.addTag(tagInput); + tagHandler.addNewTag(tagInput); setTagInput(""); tagsInputElement.blur(); }; + const addFetchedTag = (name) => { tagHandler.addTag(name); + setTagInput(""); tagsInputElement.blur(); }; From 63829f01eb59e0ebac54dcfaf971b4bae8659fa3 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 18:20:11 +0300 Subject: [PATCH 069/293] integrated new CreateRoomDialog in CreateRoomEvent and added tag functionality --- .../GlobalEvents/CreateRoomEvent.js | 90 ++++++++++--------- 1 file changed, 50 insertions(+), 40 deletions(-) diff --git a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js index 9707aca02c..4bddabff26 100644 --- a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js @@ -1,65 +1,75 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { inject, observer } from "mobx-react"; import { useTranslation } from "react-i18next"; - import toastr from "studio/toastr"; +import { CreateRoomDialog } from "../dialogs"; +import { addTagsToRoom } from "@appserver/common/api/rooms"; -import { RoomsType } from "@appserver/common/constants"; +const CreateRoomEvent = ({ + createRoom, + createTag, + addTagsToRoom, + fetchTags, + onClose, -import Dialog from "./sub-components/Dialog"; + currrentFolderId, + updateCurrentFolder, +}) => { + const { t } = useTranslation(["CreateRoomDialog", "Translations", "Common"]); + const [fetchedTags, setFetchedTags] = useState([]); -const CreateRoomEvent = ({ createRoom, updateCurrentFolder, id, onClose }) => { - const options = [ - { key: RoomsType.CustomRoom, label: "Custom room" }, - { key: RoomsType.FillingFormsRoom, label: "Filling form room" }, - { key: RoomsType.EditingRoom, label: "Editing room" }, - { key: RoomsType.ReviewRoom, label: "Review room" }, - { key: RoomsType.ReadOnlyRoom, label: "View-only room" }, - ]; + const onCreate = async (roomParams) => { + console.log(roomParams); + const createRoomParams = { + roomType: roomParams.type, + title: roomParams.title || "New room", + }; - const [selectedOption, setSelectedOption] = React.useState(options[0]); + const tags = roomParams.tags.map((tag) => tag.name); + const newTags = roomParams.tags + .filter((tag) => tag.isNew) + .map((tag) => tag.name); + console.log(tags, newTags); - const { t } = useTranslation(["Translations", "Common"]); - - const onSelect = (item) => { - setSelectedOption(item); + const room = await createRoom(createRoomParams); + console.log(room); + for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]); + await addTagsToRoom(room.id, tags); + await updateCurrentFolder(null, currrentFolderId); + onClose(); }; - const onSave = (e, value) => { - createRoom(value, selectedOption.key) - .then(() => { - updateCurrentFolder(null, id); - }) - .finally(() => { - onClose(); - toastr.success(`${value} success created`); - }); - }; + useEffect(async () => { + let tags = await fetchTags(); + setFetchedTags(tags); + }, []); return ( - ); }; export default inject( - ({ filesStore, filesActionsStore, selectedFolderStore }) => { - const { createRoom } = filesStore; - - const { updateCurrentFolder } = filesActionsStore; + ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { + const { createRoom, addTagsToRoom } = filesStore; + const { createTag, fetchTags } = tagsStore; const { id } = selectedFolderStore; + const { updateCurrentFolder } = filesActionsStore; - return { createRoom, updateCurrentFolder, id }; + return { + createRoom, + createTag, + fetchTags, + addTagsToRoom, + currrentFolderId: id, + updateCurrentFolder, + }; } )(observer(CreateRoomEvent)); From 400efbcec6ef3e3fc2ce6cce42638c57c68a8baf Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 18:21:50 +0300 Subject: [PATCH 070/293] added and updated api calls in Files and Tags Stores --- products/ASC.Files/Client/src/store/FilesStore.js | 10 ++++++++-- products/ASC.Files/Client/src/store/TagsStore.js | 4 ++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 24d0591fcc..37ca30eae1 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -1527,8 +1527,14 @@ class FilesStore { return api.files.createFolder(parentFolderId, title); } - createRoom(title, type) { - return api.rooms.createRoom({ title, roomType: type }); + createRoom(roomParams) { + if (roomParams.storageLocation) + return api.rooms.createRoomInThirdpary(roomParams); + return api.rooms.createRoom(roomParams); + } + + addTagsToRoom(id, tagArray) { + return api.rooms.addTagsToRoom(id, tagArray); } setFile = (file) => { diff --git a/products/ASC.Files/Client/src/store/TagsStore.js b/products/ASC.Files/Client/src/store/TagsStore.js index d410e4d6c5..ab8b546d06 100644 --- a/products/ASC.Files/Client/src/store/TagsStore.js +++ b/products/ASC.Files/Client/src/store/TagsStore.js @@ -13,6 +13,10 @@ class TagsStore { this.tags = tags; }; + createTag = (name) => { + return api.rooms.createTag(name); + }; + fetchTags = () => { const request = () => api.rooms.getTags().then((res) => { From 7a5fd3620193bfef610497d6fd8dbcf1aa22cf01 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 25 Jul 2022 18:26:35 +0300 Subject: [PATCH 071/293] removed unnecessary inject from CreateRoomDialog --- .../GlobalEvents/CreateRoomEvent.js | 10 +++++-- .../dialogs/CreateRoomDialog/index.js | 28 ++++++------------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js index 4bddabff26..263ab4eb07 100644 --- a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js @@ -6,14 +6,17 @@ import { CreateRoomDialog } from "../dialogs"; import { addTagsToRoom } from "@appserver/common/api/rooms"; const CreateRoomEvent = ({ + onClose, + createRoom, createTag, addTagsToRoom, fetchTags, - onClose, currrentFolderId, updateCurrentFolder, + + folderFormValidation, }) => { const { t } = useTranslation(["CreateRoomDialog", "Translations", "Common"]); const [fetchedTags, setFetchedTags] = useState([]); @@ -56,13 +59,15 @@ const CreateRoomEvent = ({ }; export default inject( - ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { + ({ auth, filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { const { createRoom, addTagsToRoom } = filesStore; const { createTag, fetchTags } = tagsStore; const { id } = selectedFolderStore; const { updateCurrentFolder } = filesActionsStore; + const { folderFormValidation } = auth.settingsStore; + return { createRoom, createTag, @@ -70,6 +75,7 @@ export default inject( addTagsToRoom, currrentFolderId: id, updateCurrentFolder, + folderFormValidation, }; } )(observer(CreateRoomEvent)); diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index 66f5e1a5cb..18d46eb3fb 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -1,7 +1,6 @@ import React, { useState } from "react"; import styled from "styled-components"; import { inject, observer } from "mobx-react"; -import { withTranslation } from "react-i18next"; import ModalDialog from "@appserver/components/modal-dialog"; @@ -20,10 +19,12 @@ const StyledModalDialog = styled(ModalDialog)` const CreateRoomDialog = ({ t, visible, - setCreateRoomDialogVisible, - createRoom, + onClose, + onCreate, + + fetchedTags, + folderFormValidation, }) => { - const onClose = () => setCreateRoomDialogVisible(false); const [isScrollLocked, setIsScrollLocked] = useState(false); const [roomParams, setRoomParams] = useState({ @@ -40,7 +41,7 @@ const CreateRoomDialog = ({ const setRoomTags = (newTags) => setRoomParams({ ...roomParams, tags: newTags }); - const tagHandler = new TagHandler(roomParams.tags, setRoomTags); + const tagHandler = new TagHandler(roomParams.tags, setRoomTags, fetchedTags); const setRoomType = (newRoomType) => { const [roomByType] = roomTypes.filter((room) => room.type === newRoomType); @@ -52,7 +53,7 @@ const CreateRoomDialog = ({ }; const onCreateRoom = () => { - console.log(roomParams); + onCreate(roomParams); }; const isChooseRoomType = roomParams.type === undefined; @@ -106,17 +107,4 @@ const CreateRoomDialog = ({ ); }; -export default inject(({ dialogsStore, roomsStore }) => { - const { - createRoomDialogVisible: visible, - setCreateRoomDialogVisible, - } = dialogsStore; - - //const { createRoom } = roomsStore; - - return { - visible, - setCreateRoomDialogVisible, - createRoom: () => {}, - }; -})(withTranslation(["CreateRoomDialog", "Common"])(observer(CreateRoomDialog))); +export default CreateRoomDialog; From 416bb477ef4e0ec2927820b1e47aaf5091910d66 Mon Sep 17 00:00:00 2001 From: mushka Date: Tue, 26 Jul 2022 19:46:24 +0300 Subject: [PATCH 072/293] added loader for creareRoomEvent --- .../GlobalEvents/CreateRoomEvent.js | 31 ++++++++++++------- .../dialogs/CreateRoomDialog/index.js | 2 ++ 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js index 263ab4eb07..92e00015b7 100644 --- a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js @@ -20,6 +20,7 @@ const CreateRoomEvent = ({ }) => { const { t } = useTranslation(["CreateRoomDialog", "Translations", "Common"]); const [fetchedTags, setFetchedTags] = useState([]); + const [isLoading, setIsLoading] = useState(false); const onCreate = async (roomParams) => { console.log(roomParams); @@ -28,18 +29,25 @@ const CreateRoomEvent = ({ title: roomParams.title || "New room", }; - const tags = roomParams.tags.map((tag) => tag.name); - const newTags = roomParams.tags - .filter((tag) => tag.isNew) - .map((tag) => tag.name); - console.log(tags, newTags); + try { + setIsLoading(true); + const tags = roomParams.tags.map((tag) => tag.name); + const newTags = roomParams.tags + .filter((tag) => tag.isNew) + .map((tag) => tag.name); + console.log(tags, newTags); - const room = await createRoom(createRoomParams); - console.log(room); - for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]); - await addTagsToRoom(room.id, tags); - await updateCurrentFolder(null, currrentFolderId); - onClose(); + const room = await createRoom(createRoomParams); + console.log(room); + for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]); + await addTagsToRoom(room.id, tags); + await updateCurrentFolder(null, currrentFolderId); + } catch (err) { + console.log(err); + } finally { + setIsLoading(false); + onClose(); + } }; useEffect(async () => { @@ -54,6 +62,7 @@ const CreateRoomEvent = ({ onClose={onClose} onCreate={onCreate} fetchedTags={fetchedTags} + isLoading={isLoading} /> ); }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js index 18d46eb3fb..ea4c19ce84 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/index.js @@ -23,6 +23,7 @@ const CreateRoomDialog = ({ onCreate, fetchedTags, + isLoading, folderFormValidation, }) => { const [isScrollLocked, setIsScrollLocked] = useState(false); @@ -93,6 +94,7 @@ const CreateRoomDialog = ({ primary scale onClick={onCreateRoom} + isLoading={isLoading} />
@@ -134,7 +134,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { onFocus={openDropdown} onBlur={closeDropdown} scale - placeholder={t("Add a tag")} + placeholder={t("TagsPlaceholder")} tabIndex={2} /> diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js index 079b48fc22..124ee48822 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js @@ -72,7 +72,7 @@ const SetRoomParams = ({ value={roomParams.title} onChange={onChangeName} scale - placeholder="New room" + placeholder={t("NamePlaceholder")} tabIndex={1} />
@@ -120,13 +120,11 @@ const SetRoomParams = ({
- {`${t("Folder Name")}:`} + {`${t("FolderNameTitle")}:`}
- {t( - "A new folder for storing this room’s data will be created in the connected storage" - )} + {t("FolderNameDescription")}
@@ -140,7 +138,7 @@ const SetRoomParams = ({ roomParams.storageLocation ? roomParams.storageLocation.title + " - " : "" - }New Room`} + }${t("Home:NewRoom")}`} tabIndex={1} />
From 97c83a1d30118ae3550faaac9741ab52df3f3c31 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 1 Aug 2022 09:51:55 +0300 Subject: [PATCH 079/293] added api calls for room editing --- packages/asc-web-common/api/rooms/index.js | 21 +++++++++++++++++++ .../ASC.Files/Client/src/store/FilesStore.js | 8 +++++++ 2 files changed, 29 insertions(+) diff --git a/packages/asc-web-common/api/rooms/index.js b/packages/asc-web-common/api/rooms/index.js index ccf691e851..30e53b4e52 100644 --- a/packages/asc-web-common/api/rooms/index.js +++ b/packages/asc-web-common/api/rooms/index.js @@ -53,6 +53,14 @@ export function createRoomInThirdpary(id, data) { }); } +export function editRoom(id, data) { + const options = { method: "put", url: `/files/rooms/${id}`, data }; + + return request(options).then((res) => { + return res; + }); +} + export function pinRoom(id) { const options = { method: "put", url: `/files/rooms/${id}/pin` }; @@ -136,6 +144,19 @@ export function addTagsToRoom(id, tagArray) { }); } +export function removeTagsFromRoom(id, tagArray) { + const data = { names: tagArray }; + const options = { + method: "delete", + url: `/files/rooms/${id}/tags`, + data, + }; + + return request(options).then((res) => { + return res; + }); +} + export function getTags() { const options = { method: "get", diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 37ca30eae1..182a80bdd9 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -1533,10 +1533,18 @@ class FilesStore { return api.rooms.createRoom(roomParams); } + editRoom(id, roomParams) { + return api.rooms.editRoom(id, roomParams); + } + addTagsToRoom(id, tagArray) { return api.rooms.addTagsToRoom(id, tagArray); } + removeTagsFromRoom(id, tagArray) { + return api.rooms.removeTagsFromRoom(id, tagArray); + } + setFile = (file) => { const fileIndex = this.files.findIndex((f) => f.id === file.id); if (fileIndex !== -1) this.files[fileIndex] = file; From 8ae3d46e2484de0c665d8c195684c2e4736874e2 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 1 Aug 2022 09:52:48 +0300 Subject: [PATCH 080/293] modal dialog tweaks and fixes --- .../modal-dialog/styled-modal-dialog.js | 18 +----------------- .../modal-dialog/views/modal-aside.js | 6 +----- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/packages/asc-web-components/modal-dialog/styled-modal-dialog.js b/packages/asc-web-components/modal-dialog/styled-modal-dialog.js index 4563a35d40..89debd4e78 100644 --- a/packages/asc-web-components/modal-dialog/styled-modal-dialog.js +++ b/packages/asc-web-components/modal-dialog/styled-modal-dialog.js @@ -84,9 +84,6 @@ const StyledHeader = styled.div` `1px solid ${props.theme.modalDialog.headerBorderColor}`}; margin-bottom: 16px; height: 52px; - - display: flex; - align-items: center; padding: 0 16px 0; .heading { @@ -106,7 +103,7 @@ const StyledBody = styled(Box)` #modal-scroll { .scroll-body { - margin-right: ${isMobile ? 0 : "-15px"} !important; + margin-right: ${isMobile ? 0 : "-17px"} !important; padding-right: 16px !important; ${(props) => props.isScrollLocked && @@ -115,24 +112,11 @@ const StyledBody = styled(Box)` overflow: hidden !important; `} } - /* ${(props) => - props.isScrollLocked && - css` - div:nth-last-child(1), - div:nth-last-child(2) { - div { - display: none !important; - } - } - `} */ } ${(props) => props.currentDisplayType === "aside" && css` - .body_content-with_scroll { - ${isMobile && "margin-right: 8px;"} - } margin-right: ${props.withBodyScroll ? "-16px" : "0"}; padding-bottom: 8px; height: 100%; diff --git a/packages/asc-web-components/modal-dialog/views/modal-aside.js b/packages/asc-web-components/modal-dialog/views/modal-aside.js index 9ab0cb2b9e..39f7addacf 100644 --- a/packages/asc-web-components/modal-dialog/views/modal-aside.js +++ b/packages/asc-web-components/modal-dialog/views/modal-aside.js @@ -116,11 +116,7 @@ const Modal = ({ id="modal-scroll" className="modal-scroll" > - { -
- {bodyComponent} -
- } + {bodyComponent} ) : ( bodyComponent From c79b1864f7f803f64fcaa8ef455157d8abdcb7f8 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 1 Aug 2022 09:54:52 +0300 Subject: [PATCH 081/293] added edit room event and splitted dialog to 2 parts --- .../GlobalEvents/CreateRoomEvent.js | 27 ++-- .../components/GlobalEvents/EditRoomEvent.js | 104 +++++++++++++ .../src/components/GlobalEvents/index.js | 59 ++++++-- .../CreateEditRoomDialog/CreateRoomDialog.js | 142 ++++++++++++++++++ .../CreateEditRoomDialog/EditRoomDialog.js | 95 ++++++++++++ .../Client/src/components/dialogs/index.js | 4 +- .../ASC.Files/Client/src/helpers/constants.js | 1 + .../Client/src/store/ContextOptionsStore.js | 8 +- 8 files changed, 403 insertions(+), 37 deletions(-) create mode 100644 products/ASC.Files/Client/src/components/GlobalEvents/EditRoomEvent.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js create mode 100644 products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js diff --git a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js index 79124dff0a..23ec534c1e 100644 --- a/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js @@ -1,11 +1,10 @@ import React, { useState, useEffect } from "react"; import { inject, observer } from "mobx-react"; import { useTranslation } from "react-i18next"; -import toastr from "studio/toastr"; import { CreateRoomDialog } from "../dialogs"; -import { addTagsToRoom } from "@appserver/common/api/rooms"; const CreateRoomEvent = ({ + visible, onClose, createRoom, @@ -15,11 +14,9 @@ const CreateRoomEvent = ({ currrentFolderId, updateCurrentFolder, - - folderFormValidation, }) => { const { t } = useTranslation([ - "CreateRoomDialog", + "CreateEditRoomDialog", "Common", "Settings", "Home", @@ -34,13 +31,12 @@ const CreateRoomEvent = ({ title: roomParams.title || "New room", }; + const tags = roomParams.tags.map((tag) => tag.name); + const newTags = roomParams.tags.filter((t) => t.isNew).map((t) => t.name); + console.log(tags, newTags); + try { setIsLoading(true); - const tags = roomParams.tags.map((tag) => tag.name); - const newTags = roomParams.tags - .filter((tag) => tag.isNew) - .map((tag) => tag.name); - console.log(tags, newTags); const room = await createRoom(createRoomParams); console.log(room); @@ -63,7 +59,7 @@ const CreateRoomEvent = ({ return ( { + ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { const { createRoom, addTagsToRoom } = filesStore; const { createTag, fetchTags } = tagsStore; - const { id } = selectedFolderStore; + const { id: currrentFolderId } = selectedFolderStore; const { updateCurrentFolder } = filesActionsStore; - const { folderFormValidation } = auth.settingsStore; - return { createRoom, createTag, fetchTags, addTagsToRoom, - currrentFolderId: id, + currrentFolderId, updateCurrentFolder, - folderFormValidation, }; } )(observer(CreateRoomEvent)); diff --git a/products/ASC.Files/Client/src/components/GlobalEvents/EditRoomEvent.js b/products/ASC.Files/Client/src/components/GlobalEvents/EditRoomEvent.js new file mode 100644 index 0000000000..d18ac83f73 --- /dev/null +++ b/products/ASC.Files/Client/src/components/GlobalEvents/EditRoomEvent.js @@ -0,0 +1,104 @@ +import React, { useState, useEffect } from "react"; +import { inject, observer } from "mobx-react"; +import { useTranslation } from "react-i18next"; +import { EditRoomDialog } from "../dialogs"; + +const EditRoomEvent = ({ + visible, + onClose, + item, + + editRoom, + addTagsToRoom, + removeTagsFromRoom, + + createTag, + fetchTags, + + currrentFolderId, + updateCurrentFolder, +}) => { + const { t } = useTranslation([ + "CreateEditRoomDialog", + "Common", + "Settings", + "Home", + ]); + const [fetchedTags, setFetchedTags] = useState([]); + const [isLoading, setIsLoading] = useState(false); + + const roomId = item.id; + const startTags = Object.values(item.tags); + const startObjTags = startTags.map((tag, i) => ({ id: i, name: tag })); + const fetchedRoomParams = { + title: item.title, + type: item.roomType, + tags: startObjTags, + icon: item.icon, + }; + + const onSave = async (roomParams) => { + console.log(roomParams); + const editRoomParams = { + // currently only title can be chaned + title: roomParams.title || "New room", + }; + + const tags = roomParams.tags.map((tag) => tag.name); + const newTags = roomParams.tags.filter((t) => t.isNew).map((t) => t.name); + const removedTags = startTags.filter((sT) => !tags.includes(sT)); + console.log(tags, newTags, removedTags); + + try { + setIsLoading(true); + await editRoom(roomId, editRoomParams); + for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]); + await addTagsToRoom(roomId, tags); + await removeTagsFromRoom(roomId, removedTags); + await updateCurrentFolder(null, currrentFolderId); + } catch (err) { + console.log(err); + } finally { + setIsLoading(false); + onClose(); + } + }; + + useEffect(async () => { + let tags = await fetchTags(); + setFetchedTags(tags); + }, []); + + return ( + + ); +}; + +export default inject( + ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { + const { editRoom, addTagsToRoom, removeTagsFromRoom } = filesStore; + const { createTag, fetchTags } = tagsStore; + + const { id: currrentFolderId } = selectedFolderStore; + const { updateCurrentFolder } = filesActionsStore; + return { + editRoom, + addTagsToRoom, + removeTagsFromRoom, + + createTag, + fetchTags, + + currrentFolderId, + updateCurrentFolder, + }; + } +)(observer(EditRoomEvent)); diff --git a/products/ASC.Files/Client/src/components/GlobalEvents/index.js b/products/ASC.Files/Client/src/components/GlobalEvents/index.js index 4e63d6e0b2..448e95e012 100644 --- a/products/ASC.Files/Client/src/components/GlobalEvents/index.js +++ b/products/ASC.Files/Client/src/components/GlobalEvents/index.js @@ -1,12 +1,12 @@ import React from "react"; import { FileAction } from "@appserver/common/constants"; - import { Events } from "../../helpers/constants"; import CreateEvent from "./CreateEvent"; import RenameEvent from "./RenameEvent"; import CreateRoomEvent from "./CreateRoomEvent"; +import EditRoomEvent from "./EditRoomEvent"; const GlobalEvents = () => { const [createDialogProps, setCreateDialogProps] = React.useState({ @@ -20,12 +20,18 @@ const GlobalEvents = () => { onClose: null, }); + const [renameDialogProps, setRenameDialogProps] = React.useState({ + visible: false, + item: null, + onClose: null, + }); + const [createRoomDialogProps, setCreateRoomDialogProps] = React.useState({ visible: false, onClose: null, }); - const [renameDialogProps, setRenameDialogProps] = React.useState({ + const [editRoomDialogProps, setEditRoomDialogProps] = React.useState({ visible: false, item: null, onClose: null, @@ -59,14 +65,6 @@ const GlobalEvents = () => { }); }, []); - const onCreateRoom = React.useCallback((e) => { - setCreateRoomDialogProps({ - visible: true, - onClose: () => - setCreateRoomDialogProps({ visible: false, onClose: null }), - }); - }, []); - const onRename = React.useCallback((e) => { const visible = e.item ? true : false; @@ -77,34 +75,63 @@ const GlobalEvents = () => { onClose: () => { setRenameDialogProps({ visible: false, - typ: null, + type: null, item: null, }); }, }); }, []); + const onCreateRoom = React.useCallback((e) => { + setCreateRoomDialogProps({ + visible: true, + onClose: () => + setCreateRoomDialogProps({ visible: false, onClose: null }), + }); + }, []); + + const onEditRoom = React.useCallback((e) => { + const visible = e.item ? true : false; + + setEditRoomDialogProps({ + visible: visible, + item: e.item, + onClose: () => { + setEditRoomDialogProps({ + visible: false, + item: null, + onClose: null, + }); + }, + }); + }, []); + React.useEffect(() => { window.addEventListener(Events.CREATE, onCreate); - window.addEventListener(Events.ROOM_CREATE, onCreateRoom); window.addEventListener(Events.RENAME, onRename); + window.addEventListener(Events.ROOM_CREATE, onCreateRoom); + window.addEventListener(Events.ROOM_EDIT, onEditRoom); return () => { window.removeEventListener(Events.CREATE, onCreate); - window.removeEventListener(Events.ROOM_CREATE, onCreateRoom); window.removeEventListener(Events.RENAME, onRename); + window.removeEventListener(Events.ROOM_CREATE, onCreateRoom); + window.removeEventListener(Events.ROOM_EDIT, onEditRoom); }; - }, [onRename, onCreate]); + }, [onRename, onCreate, onCreateRoom, onEditRoom]); return [ createDialogProps.visible && ( ), + renameDialogProps.visible && ( + + ), createRoomDialogProps.visible && ( ), - renameDialogProps.visible && ( - + editRoomDialogProps.visible && ( + ), ]; }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js new file mode 100644 index 0000000000..990a0bdec6 --- /dev/null +++ b/products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js @@ -0,0 +1,142 @@ +import React, { useState } from "react"; +import styled from "styled-components"; + +import ModalDialog from "@appserver/components/modal-dialog"; +import Button from "@appserver/components/button"; + +import TagHandler from "./handlers/tagHandler"; + +import SetRoomParams from "./sub-components/SetRoomParams"; +import RoomTypeList from "./sub-components/RoomTypeList"; +import { roomTypes } from "./data"; +import IconButton from "@appserver/components/icon-button"; + +const StyledModalDialog = styled(ModalDialog)` + .header-with-button { + display: flex; + align-items: center; + flex-direction: row; + gap: 12px; + } +`; + +const CreateRoomDialog = ({ + t, + visible, + onClose, + onCreate, + + fetchedTags, + isLoading, + folderFormValidation, +}) => { + const [isScrollLocked, setIsScrollLocked] = useState(false); + + const [roomParams, setRoomParams] = useState({ + title: "", + type: undefined, + tags: [], + isPrivate: false, + storageLocation: undefined, + rememberStorageLocation: false, + thirdpartyFolderName: "", + icon: "", + }); + + const setRoomTags = (newTags) => + setRoomParams({ ...roomParams, tags: newTags }); + + const tagHandler = new TagHandler(roomParams.tags, setRoomTags, fetchedTags); + + const setRoomType = (newRoomType) => { + const [roomByType] = roomTypes.filter((room) => room.type === newRoomType); + tagHandler.refreshDefaultTag(t(roomByType.title)); + setRoomParams((prev) => ({ + ...prev, + type: newRoomType, + })); + }; + + const onCreateRoom = () => { + onCreate(roomParams); + }; + + const isChooseRoomType = roomParams.type === undefined; + const goBack = () => { + setRoomParams({ + title: "", + type: undefined, + tags: [], + isPrivate: false, + storageLocation: undefined, + rememberStorageLocation: false, + thirdpartyFolderName: "", + icon: "", + }); + }; + + return ( + + + {isChooseRoomType ? ( + t("ChooseRoomType") + ) : ( +
+ +
{t("CreateRoom")}
+
+ )} + + + + {isChooseRoomType ? ( + + ) : ( + + )} + + + {!isChooseRoomType && ( + +
- {type !== "dropdownItem" && ( - {}} - /> - )} + {}} + /> ); @@ -155,14 +158,19 @@ const RoomType = ({ t, room, onClick, type = "listItem", isOpen }) => { {content} ) : ( - {content} + {content} ); }; RoomType.propTypes = { room: PropTypes.object, onClick: PropTypes.func, - type: PropTypes.oneOf(["listItem", "dropdownButton", "dropdownItem"]), + type: PropTypes.oneOf([ + "displayItem", + "listItem", + "dropdownButton", + "dropdownItem", + ]), isOpen: PropTypes.bool, }; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/RoomTypeDropdown/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown.js similarity index 86% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/RoomTypeDropdown/index.js rename to products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown.js index 4233388748..4a7b8cbde0 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/RoomTypeDropdown/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { roomTypes } from "../../../data"; -import RoomType from "../../common/RoomType"; +import { roomTypes } from "../data"; +import RoomType from "./RoomType"; const StyledRoomTypeDropdown = styled.div` display: flex; @@ -34,14 +34,10 @@ const StyledRoomTypeDropdown = styled.div` } `; -const RoomTypeDropdown = ({ t, currentRoomType, setRoomType }) => { +const RoomTypeDropdown = ({ t, currentRoom, setRoomType }) => { const [isOpen, setIsOpen] = useState(false); const toggleIsOpen = () => setIsOpen(!isOpen); - const [currentRoom] = roomTypes.filter( - (room) => room.type === currentRoomType - ); - return ( { +const RoomTypeList = ({ t, setRoomType }) => { return ( {roomTypes.map((room) => ( @@ -28,4 +28,4 @@ const ChooseRoomType = ({ t, setRoomType }) => { ); }; -export default ChooseRoomType; +export default RoomTypeList; diff --git a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js b/products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js similarity index 88% rename from products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js rename to products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index 124ee48822..d11f5286ce 100644 --- a/products/ASC.Files/Client/src/components/dialogs/CreateRoomDialog/sub-components/CreateRoom/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import styled, { css } from "styled-components"; +import React from "react"; +import styled from "styled-components"; import RoomTypeDropdown from "./RoomTypeDropdown"; import StorageLocation from "./StorageLocation"; @@ -10,7 +10,9 @@ import HelpButton from "@appserver/components/help-button"; import Text from "@appserver/components/text"; import AvatarEditor from "@appserver/components/avatar-editor"; import TagInput from "./TagInput"; -import { StyledParam } from "../common/StyledParam"; +import { StyledParam } from "./StyledParam"; +import RoomType from "./RoomType"; +import { roomTypes } from "../data"; const StyledSetRoomParams = styled.div` display: flex; @@ -42,6 +44,7 @@ const SetRoomParams = ({ setRoomType, tagHandler, setIsScrollLocked, + isEdit, }) => { const onChangeName = (e) => setRoomParams({ ...roomParams, title: e.target.value }); @@ -52,13 +55,21 @@ const SetRoomParams = ({ const onChangeThidpartyFolderName = (e) => setRoomParams({ ...roomParams, thirdpartyFolderName: e.target.value }); + const [currentRoomTypeData] = roomTypes.filter( + (room) => room.type === roomParams.type + ); + return ( - + {isEdit ? ( + + ) : ( + + )}
+ + + + {thirparties.map((thirdparty) => ( + setStorageLocaiton(thirdparty)} + /> + ))} + + + + + + ); +}; + +export default ThirpartyComboBox; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js new file mode 100644 index 0000000000..69a074950c --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js @@ -0,0 +1,47 @@ +import React from "react"; + +import Text from "@appserver/components/text"; + +import Checkbox from "@appserver/components/checkbox"; +import { StyledParam } from "../StyledParam"; +import HelpButton from "@appserver/components/help-button"; +import ThirpartyComboBox from "./ThirpartyComboBox"; + +const StorageLocation = ({ + t, + roomParams, + setRoomParams, + setIsScrollLocked, +}) => { + return ( + +
+
+ + {t("StorageLocationTitle")} + + +
+
+ {t("StorageLocationDescription")} +
+
+ + + + ); +}; + +export default StorageLocation; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js new file mode 100644 index 0000000000..161a77cb72 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js @@ -0,0 +1,57 @@ +import styled from "styled-components"; + +import { smallTablet } from "@appserver/components/utils/device"; + +import DropDown from "@appserver/components/drop-down"; + +const StyledDropDownWrapper = styled.div` + width: 100%; + position: relative; +`; + +const StyledDropDown = styled(DropDown)` + margin-top: ${(props) => (props.marginTop ? props.marginTop : "4px")}; + padding: 6px 0; + background: #ffffff; + border: 1px solid #d0d5da; + box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); + border-radius: 3px; + overflow: hidden; + + width: 446px; + max-width: 446px; + div { + max-width: 446px; + } + + @media ${smallTablet} { + width: calc(100vw - 34px); + max-width: calc(100vw - 34px); + div { + max-width: calc(100vw - 34px); + } + } + + .dropdown-item { + height: 32px !important; + max-height: 32px !important; + cursor: pointer; + box-sizing: border-box; + width: 100%; + padding: 6px 8px; + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: #333333; + &:hover { + background: #f3f4f4; + } + + &-separator { + height: 7px !important; + max-height: 7px !important; + } + } +`; + +export { StyledDropDownWrapper, StyledDropDown }; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js new file mode 100644 index 0000000000..d140cd4375 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js @@ -0,0 +1,66 @@ +import styled, { css } from "styled-components"; + +const StyledParam = styled.div` + box-sizing: border-box; + display: flex; + width: 100%; + + ${(props) => + props.isPrivate + ? css` + flex-direction: row; + justify-content: space-between; + ` + : props.storageLocation + ? css` + flex-direction: column; + gap: 12px; + ` + : props.folderName + ? css` + flex-direction: column; + gap: 4px; + ` + : ""} + + .set_room_params-info { + display: flex; + flex-direction: column; + gap: 4px; + + .set_room_params-info-title { + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + + .set_room_params-info-title-text { + font-weight: 600; + font-size: 13px; + line-height: 20px; + } + .set_room_params-info-title-help { + border-radius: 50%; + background-color: #a3a9ae; + circle, + rect { + fill: #ffffff; + } + } + } + .set_room_params-info-description { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #a3a9ae; + } + } + + .set_room_params-toggle { + width: 28px; + height: 16px; + margin: 2px 0; + } +`; + +export { StyledParam }; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js new file mode 100644 index 0000000000..2c01ebcf04 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js @@ -0,0 +1,54 @@ +import Tag from "@appserver/components/tag"; +import React from "react"; +import styled from "styled-components"; + +const StyledTagList = styled.div` + margin-top: 2px; + display: flex; + flex-direction: row; + gap: 4px; + flex-wrap: wrap; + width: 100%; + + .set_room_params-tag_input-tag { + padding: 6px 8px; + border-radius: 3px; + margin: 0; + + .tag-icon { + margin-left: 10px; + } + } +`; + +const TagList = ({ t, tagHandler }) => { + const { tags } = tagHandler; + + return ( + + {tags.length ? ( + tags.map((tag) => ( + { + tagHandler.deleteTag(tag.id); + }} + /> + )) + ) : ( + + )} + + ); +}; + +export default TagList; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js new file mode 100644 index 0000000000..23213c4dfb --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js @@ -0,0 +1,161 @@ +import React, { useState, useRef } from "react"; +import styled from "styled-components"; + +import Label from "@appserver/components/label"; +import TextInput from "@appserver/components/text-input"; +import TagList from "./TagList"; +import DropDownItem from "@appserver/components/drop-down-item"; +import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; +import { isMobile } from "@appserver/components/utils/device"; + +const StyledTagInput = styled.div` + .set_room_params-tag_input { + &-label_wrapper { + &-label { + cursor: pointer; + width: auto; + display: inline-block; + } + } + } + + .dropdown-content-wrapper { + margin-bottom: -4px; + max-width: 100%; + position: relative; + } +`; + +const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { + const [tagInput, setTagInput] = useState(""); + const [isOpen, setIsOpen] = useState(false); + + const chosenTags = tagHandler.tags.map((tag) => tag.name); + const fetchedTags = tagHandler.fetchedTags; + const filteredFetchedTags = fetchedTags.filter((tag) => + tag.toLowerCase().includes(tagInput.toLowerCase()) + ); + const tagsForDropdown = filteredFetchedTags.filter( + (tag) => !chosenTags.includes(tag) + ); + + const onTagInputChange = (e) => setTagInput(e.target.value); + const preventDefault = (e) => e.preventDefault(); + + const openDropdown = () => { + setIsScrollLocked(true); + setIsOpen(true); + }; + const closeDropdown = () => { + setIsScrollLocked(false); + setIsOpen(false); + }; + + const tagsInputElement = document.getElementById("tags-input"); + + const onClickOutside = () => { + tagsInputElement.blur(); + }; + + const addNewTag = () => { + tagHandler.addNewTag(tagInput); + setTagInput(""); + tagsInputElement.blur(); + }; + + const addFetchedTag = (name) => { + tagHandler.addTag(name); + setTagInput(""); + tagsInputElement.blur(); + }; + + const dropdownRef = useRef(null); + + let dropdownItems = tagsForDropdown.map((tag, i) => ( + { + addFetchedTag(tag); + console.log(tag); + }} + /> + )); + + if ( + tagInput && + ![...tagsForDropdown, ...chosenTags].find((tag) => tagInput === tag) + ) { + const dropdownItemNewTag = ( + + ); + //dropdownItems = [dropdownItemNewTag, ...dropdownItems]; + + if (tagsForDropdown.length > 0) { + dropdownItems = [ + dropdownItemNewTag, + , + ...dropdownItems, + ]; + } else { + dropdownItems = [dropdownItemNewTag, ...dropdownItems]; + } + } + + return ( + +
+
+ + + + {dropdownItems.length > 0 && ( + + {dropdownItems} + + )} + + + + ); +}; + +export default TagInput; From 03f1f0c8cc6924732b427679508b132e98d818a1 Mon Sep 17 00:00:00 2001 From: mushka Date: Tue, 2 Aug 2022 14:54:59 +0300 Subject: [PATCH 088/293] fix dialog exporting after merge --- packages/client/src/components/dialogs/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/client/src/components/dialogs/index.js b/packages/client/src/components/dialogs/index.js index a1222658ea..21aea389ec 100644 --- a/packages/client/src/components/dialogs/index.js +++ b/packages/client/src/components/dialogs/index.js @@ -20,6 +20,8 @@ import ChangeUserTypeDialog from "./ChangeUserTypeDialog"; import DataLossWarningDialog from "./DataLossWarningDialog"; import ResetApplicationDialog from "./ResetApplicationDialog"; import BackupCodesDialog from "./BackupCodesDialog"; +import CreateRoomDialog from "./CreateEditRoomDialog/CreateRoomDialog"; +import EditRoomDialog from "./CreateEditRoomDialog/EditRoomDialog"; export { EmptyTrashDialog, @@ -44,4 +46,6 @@ export { DataLossWarningDialog, ResetApplicationDialog, BackupCodesDialog, + CreateRoomDialog, + EditRoomDialog, }; From 1d8d7e9a6e4e54d16363fab9158575990a54ecb3 Mon Sep 17 00:00:00 2001 From: mushka Date: Tue, 2 Aug 2022 14:55:51 +0300 Subject: [PATCH 089/293] appserver to docspace import fix --- .../src/components/GlobalEvents/index.js | 22 +++++++++---------- .../CreateEditRoomDialog/CreateRoomDialog.js | 6 ++--- .../CreateEditRoomDialog/EditRoomDialog.js | 4 ++-- .../CreateEditRoomDialog/data/index.js | 2 +- .../sub-components/RoomType.js | 8 +++---- .../sub-components/SetRoomParams.js | 12 +++++----- .../StorageLocation/ThirpartyComboBox.js | 12 +++++----- .../sub-components/StorageLocation/index.js | 6 ++--- .../sub-components/StyledDropdown.js | 4 ++-- .../sub-components/TagInput/TagList.js | 2 +- .../sub-components/TagInput/index.js | 8 +++---- 11 files changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/index.js b/packages/client/src/components/GlobalEvents/index.js index 63e037973e..fa1933a9db 100644 --- a/packages/client/src/components/GlobalEvents/index.js +++ b/packages/client/src/components/GlobalEvents/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect, useCallback, memo } from "react"; import { FileAction } from "@docspace/common/constants"; import { Events } from "@docspace/client/src/helpers/filesConstants"; @@ -9,7 +9,7 @@ import CreateRoomEvent from "./CreateRoomEvent"; import EditRoomEvent from "./EditRoomEvent"; const GlobalEvents = () => { - const [createDialogProps, setCreateDialogProps] = React.useState({ + const [createDialogProps, setCreateDialogProps] = useState({ visible: false, id: null, type: null, @@ -20,24 +20,24 @@ const GlobalEvents = () => { onClose: null, }); - const [renameDialogProps, setRenameDialogProps] = React.useState({ + const [renameDialogProps, setRenameDialogProps] = useState({ visible: false, item: null, onClose: null, }); - const [createRoomDialogProps, setCreateRoomDialogProps] = React.useState({ + const [createRoomDialogProps, setCreateRoomDialogProps] = useState({ visible: false, onClose: null, }); - const [editRoomDialogProps, setEditRoomDialogProps] = React.useState({ + const [editRoomDialogProps, setEditRoomDialogProps] = useState({ visible: false, item: null, onClose: null, }); - const onCreate = React.useCallback((e) => { + const onCreate = useCallback((e) => { const { payload } = e; const visible = payload.id ? true : false; @@ -65,7 +65,7 @@ const GlobalEvents = () => { }); }, []); - const onRename = React.useCallback((e) => { + const onRename = useCallback((e) => { const visible = e.item ? true : false; setRenameDialogProps({ @@ -82,7 +82,7 @@ const GlobalEvents = () => { }); }, []); - const onCreateRoom = React.useCallback((e) => { + const onCreateRoom = useCallback((e) => { setCreateRoomDialogProps({ visible: true, onClose: () => @@ -90,7 +90,7 @@ const GlobalEvents = () => { }); }, []); - const onEditRoom = React.useCallback((e) => { + const onEditRoom = useCallback((e) => { const visible = e.item ? true : false; setEditRoomDialogProps({ @@ -106,7 +106,7 @@ const GlobalEvents = () => { }); }, []); - React.useEffect(() => { + useEffect(() => { window.addEventListener(Events.CREATE, onCreate); window.addEventListener(Events.RENAME, onRename); window.addEventListener(Events.ROOM_CREATE, onCreateRoom); @@ -136,4 +136,4 @@ const GlobalEvents = () => { ]; }; -export default React.memo(GlobalEvents); +export default memo(GlobalEvents); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js index 990a0bdec6..3c4e31b00e 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js @@ -1,15 +1,15 @@ import React, { useState } from "react"; import styled from "styled-components"; -import ModalDialog from "@appserver/components/modal-dialog"; -import Button from "@appserver/components/button"; +import ModalDialog from "@docspace/components/modal-dialog"; +import Button from "@docspace/components/button"; import TagHandler from "./handlers/tagHandler"; import SetRoomParams from "./sub-components/SetRoomParams"; import RoomTypeList from "./sub-components/RoomTypeList"; import { roomTypes } from "./data"; -import IconButton from "@appserver/components/icon-button"; +import IconButton from "@docspace/components/icon-button"; const StyledModalDialog = styled(ModalDialog)` .header-with-button { diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js index 227e56f652..80767e07cf 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; -import ModalDialog from "@appserver/components/modal-dialog"; -import Button from "@appserver/components/button"; +import ModalDialog from "@docspace/components/modal-dialog"; +import Button from "@docspace/components/button"; import TagHandler from "./handlers/tagHandler"; import { roomTypes } from "./data"; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 10cf637456..3b93a377d2 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -1,4 +1,4 @@ -import { RoomsType } from "@appserver/common/constants"; +import { RoomsType } from "@docspace/common/constants"; export const roomTypes = [ { diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js index 0f4f28204d..2ff9f4ae7f 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js @@ -2,10 +2,10 @@ import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; -import IconButton from "@appserver/components/icon-button"; -import Text from "@appserver/components/text"; -import RoomLogo from "@appserver/components/room-logo"; -import HelpButton from "@appserver/components/help-button"; +import IconButton from "@docspace/components/icon-button"; +import Text from "@docspace/components/text"; +import RoomLogo from "@docspace/components/room-logo"; +import HelpButton from "@docspace/components/help-button"; const StyledRoomType = styled.div` cursor: pointer; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index d11f5286ce..244de059cd 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -3,12 +3,12 @@ import styled from "styled-components"; import RoomTypeDropdown from "./RoomTypeDropdown"; import StorageLocation from "./StorageLocation"; -import TextInput from "@appserver/components/text-input"; -import Label from "@appserver/components/label"; -import ToggleButton from "@appserver/components/toggle-button"; -import HelpButton from "@appserver/components/help-button"; -import Text from "@appserver/components/text"; -import AvatarEditor from "@appserver/components/avatar-editor"; +import TextInput from "@docspace/components/text-input"; +import Label from "@docspace/components/label"; +import ToggleButton from "@docspace/components/toggle-button"; +import HelpButton from "@docspace/components/help-button"; +import Text from "@docspace/components/text"; +import AvatarEditor from "@docspace/components/avatar-editor"; import TagInput from "./TagInput"; import { StyledParam } from "./StyledParam"; import RoomType from "./RoomType"; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/ThirpartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/ThirpartyComboBox.js index f7258105ce..0b659fd175 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/ThirpartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/ThirpartyComboBox.js @@ -5,13 +5,13 @@ import { ReactSVG } from "react-svg"; import { thirparties } from "../../data"; import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; -import { isHugeMobile } from "@appserver/components/utils/device"; -import DomHelpers from "@appserver/components/utils/domHelpers"; +import { isHugeMobile } from "@docspace/components/utils/device"; +import DomHelpers from "@docspace/components/utils/domHelpers"; -import Text from "@appserver/components/text"; -import Button from "@appserver/components/button"; -import DropDownItem from "@appserver/components/drop-down-item"; -import Checkbox from "@appserver/components/checkbox"; +import Text from "@docspace/components/text"; +import Button from "@docspace/components/button"; +import DropDownItem from "@docspace/components/drop-down-item"; +import Checkbox from "@docspace/components/checkbox"; const StyledStorageLocation = styled.div` display: flex; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js index 69a074950c..bfab7157be 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js @@ -1,10 +1,10 @@ import React from "react"; -import Text from "@appserver/components/text"; +import Text from "@docspace/components/text"; -import Checkbox from "@appserver/components/checkbox"; +import Checkbox from "@docspace/components/checkbox"; import { StyledParam } from "../StyledParam"; -import HelpButton from "@appserver/components/help-button"; +import HelpButton from "@docspace/components/help-button"; import ThirpartyComboBox from "./ThirpartyComboBox"; const StorageLocation = ({ diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js index 161a77cb72..30e1d13937 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledDropdown.js @@ -1,8 +1,8 @@ import styled from "styled-components"; -import { smallTablet } from "@appserver/components/utils/device"; +import { smallTablet } from "@docspace/components/utils/device"; -import DropDown from "@appserver/components/drop-down"; +import DropDown from "@docspace/components/drop-down"; const StyledDropDownWrapper = styled.div` width: 100%; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js index 2c01ebcf04..5ab899e976 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js @@ -1,4 +1,4 @@ -import Tag from "@appserver/components/tag"; +import Tag from "@docspace/components/tag"; import React from "react"; import styled from "styled-components"; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js index 23213c4dfb..84e6e4697f 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js @@ -1,12 +1,12 @@ import React, { useState, useRef } from "react"; import styled from "styled-components"; -import Label from "@appserver/components/label"; -import TextInput from "@appserver/components/text-input"; +import Label from "@docspace/components/label"; +import TextInput from "@docspace/components/text-input"; import TagList from "./TagList"; -import DropDownItem from "@appserver/components/drop-down-item"; +import DropDownItem from "@docspace/components/drop-down-item"; import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; -import { isMobile } from "@appserver/components/utils/device"; +import { isMobile } from "@docspace/components/utils/device"; const StyledTagInput = styled.div` .set_room_params-tag_input { From 1e10e329d964bcc7bc8df6ac65c70624450e38dc Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:28:00 +0300 Subject: [PATCH 090/293] added ability to pass props directly to tooltip through help-button --- packages/components/help-button/index.js | 5 +++++ packages/components/tooltip/index.js | 2 ++ 2 files changed, 7 insertions(+) diff --git a/packages/components/help-button/index.js b/packages/components/help-button/index.js index 879b5f6d3c..c941dcaf57 100644 --- a/packages/components/help-button/index.js +++ b/packages/components/help-button/index.js @@ -50,6 +50,7 @@ class HelpButton extends React.Component { render() { const { tooltipContent, + tooltipProps, place, offsetTop, offsetBottom, @@ -81,6 +82,7 @@ class HelpButton extends React.Component { /> {getContent ? ( ) : ( {tooltipContent} @@ -122,6 +126,7 @@ HelpButton.propTypes = { PropTypes.node, ]), tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + tooltipProps: PropTypes.object, offsetRight: PropTypes.number, offsetLeft: PropTypes.number, offsetTop: PropTypes.number, diff --git a/packages/components/tooltip/index.js b/packages/components/tooltip/index.js index 4620ac5773..ed3b454ed4 100644 --- a/packages/components/tooltip/index.js +++ b/packages/components/tooltip/index.js @@ -31,6 +31,7 @@ class Tooltip extends Component { style, color, maxWidth, + ...rest } = this.props; const renderTooltip = () => ( @@ -58,6 +59,7 @@ class Tooltip extends Component { afterShow={afterShow} afterHide={afterHide} isCapture={true} + {...rest} > {children} From a373d0dcc85660a1f1e33029fd67c175e4296bea Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:42:49 +0300 Subject: [PATCH 091/293] created own component for help button --- .../sub-components/SecondaryInfoButton.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js new file mode 100644 index 0000000000..342a134f3b --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js @@ -0,0 +1,28 @@ +import React from "react"; +import styled from "styled-components"; + +import HelpButton from "@docspace/components/help-button"; + +const StyledHelpButton = styled(HelpButton)` + border-radius: 50%; + background-color: #a3a9ae; + circle, + rect { + fill: #ffffff; + } +`; + +const SecondaryInfoButton = ({ content }) => { + return ( + + ); +}; + +export default SecondaryInfoButton; From 29160a6cbcaf17dc6c28597e7b5cc5abb431f98b Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:46:55 +0300 Subject: [PATCH 092/293] impemented new SecondaryInfoButtonComponent --- .../CreateEditRoomDialog/sub-components/RoomType.js | 10 ++-------- .../sub-components/SetRoomParams.js | 11 ++--------- .../sub-components/StorageLocation/index.js | 12 ++---------- 3 files changed, 6 insertions(+), 27 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js index 2ff9f4ae7f..68fa35c3bb 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js @@ -6,6 +6,7 @@ import IconButton from "@docspace/components/icon-button"; import Text from "@docspace/components/text"; import RoomLogo from "@docspace/components/room-logo"; import HelpButton from "@docspace/components/help-button"; +import SecondaryInfoButton from "./SecondaryInfoButton"; const StyledRoomType = styled.div` cursor: pointer; @@ -122,14 +123,7 @@ const RoomType = ({ t, room, onClick, type = "listItem", isOpen }) => { {room.withSecondaryInfo && (
- +
)}
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index 244de059cd..e411217392 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -6,13 +6,13 @@ import StorageLocation from "./StorageLocation"; import TextInput from "@docspace/components/text-input"; import Label from "@docspace/components/label"; import ToggleButton from "@docspace/components/toggle-button"; -import HelpButton from "@docspace/components/help-button"; import Text from "@docspace/components/text"; import AvatarEditor from "@docspace/components/avatar-editor"; import TagInput from "./TagInput"; import { StyledParam } from "./StyledParam"; import RoomType from "./RoomType"; import { roomTypes } from "../data"; +import SecondaryInfoButton from "./SecondaryInfoButton"; const StyledSetRoomParams = styled.div` display: flex; @@ -100,14 +100,7 @@ const SetRoomParams = ({ {t("MakeRoomPrivateTitle")} - +
{t("MakeRoomPrivateDescription")} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js index bfab7157be..a5d633909c 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js @@ -2,10 +2,9 @@ import React from "react"; import Text from "@docspace/components/text"; -import Checkbox from "@docspace/components/checkbox"; import { StyledParam } from "../StyledParam"; -import HelpButton from "@docspace/components/help-button"; import ThirpartyComboBox from "./ThirpartyComboBox"; +import SecondaryInfoButton from "../SecondaryInfoButton"; const StorageLocation = ({ t, @@ -20,14 +19,7 @@ const StorageLocation = ({ {t("StorageLocationTitle")} - +
{t("StorageLocationDescription")} From 766082b5052a37b9e00e26d65093a561b802c8bf Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:47:06 +0300 Subject: [PATCH 093/293] removed unused styles --- .../CreateEditRoomDialog/sub-components/StyledParam.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js index d140cd4375..82e917b804 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js @@ -39,14 +39,6 @@ const StyledParam = styled.div` font-size: 13px; line-height: 20px; } - .set_room_params-info-title-help { - border-radius: 50%; - background-color: #a3a9ae; - circle, - rect { - fill: #ffffff; - } - } } .set_room_params-info-description { font-weight: 400; From 50c6a82c8c249239eca890d9f9b940b968ed4212 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:47:30 +0300 Subject: [PATCH 094/293] added translation keys for room types --- .../client/public/locales/en/CreateEditRoomDialog.json | 5 +++++ .../client/public/locales/ru/CreateEditRoomDialog.json | 7 ++++++- .../components/dialogs/CreateEditRoomDialog/data/index.js | 4 ++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index 9ea498427a..37c56ca21a 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/packages/client/public/locales/en/CreateEditRoomDialog.json @@ -15,6 +15,11 @@ "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing", "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose", + "FillingFormsRoomSecondaryInfo": "NO TEXT", + "CollaborationRoomSecondaryInfo": "In this room participants will be able to edit documents together. This room can be useful for quick preparation of documents.", + "ReviewRoomSecondaryInfo": "In the review room participants will be able to discuss, comment and review documents. Taking into account the reviews, you can create/supplement a document in the room.", + "ViewOnlyRoomSecondaryInfo": "In this room you can add any files that need to be provided to users for review.", + "NamePlaceholder": "Enter name", "TagsPlaceholder": "Add a tag", diff --git a/packages/client/public/locales/ru/CreateEditRoomDialog.json b/packages/client/public/locales/ru/CreateEditRoomDialog.json index 74f40e5a29..b320d36aa1 100644 --- a/packages/client/public/locales/ru/CreateEditRoomDialog.json +++ b/packages/client/public/locales/ru/CreateEditRoomDialog.json @@ -4,7 +4,7 @@ "RoomEditing": "Редактирование комнаты", "FillingFormsRoomTitle": "Комната для заполнения форм", - "CollaborationRoomTitle": "Комната для совместной работы", + "CollaborationRoomTitle": "Комната для совместного редактирования", "ReviewRoomTitle": "Комната для рецензирования", "ViewOnlyRoomTitle": "Комната для просмотра", "CustomRoomTitle": "Пользователсьская комната", @@ -15,6 +15,11 @@ "ViewOnlyRoomDescription": "Предоставляйте доступ к любым готовым документам, отчетам, документации и другим файлам для просмотра", "CustomRoomDescription": "Примените собственные настройки, чтобы использовать эту комнату для любых пользовательских целей", + "FillingFormsRoomSecondaryInfo": "НЕТ ТЕКСТА", + "CollaborationRoomSecondaryInfo": "В данной комнате участники смогут совместно редактировать документы. Это комната может быть полезна для быстрой подготовки документов.", + "ReviewRoomSecondaryInfo": "В комнате для рецензирования участники смогут обсуждать, комментировать и рецензировать документы. С учетом рецензий можно создать/дополнить документ в комнате.", + "ViewOnlyRoomSecondaryInfo": "В эту комнату вы можете добавлять любые файлы, которые необходимо предоставить пользователям для ознакомления.", + "NamePlaceholder": "Введите имя", "TagsPlaceholder": "Добавьте тэг", diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 3b93a377d2..1e5dab83bc 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -6,24 +6,28 @@ export const roomTypes = [ title: "FillingFormsRoomTitle", description: "FillingFormsRoomDescription", withSecondaryInfo: true, + secondaryInfo: "FillingFormsRoomSecondaryInfo", }, { type: RoomsType.EditingRoom, title: "CollaborationRoomTitle", description: "CollaborationRoomDescription", withSecondaryInfo: true, + secondaryInfo: "CollaborationRoomSecondaryInfo", }, { type: RoomsType.ReviewRoom, title: "ReviewRoomTitle", description: "ReviewRoomDescription", withSecondaryInfo: true, + secondaryInfo: "ReviewRoomSecondaryInfo", }, { type: RoomsType.ReadOnlyRoom, title: "ViewOnlyRoomTitle", description: "ViewOnlyRoomDescription", withSecondaryInfo: true, + secondaryInfo: "ViewOnlyRoomSecondaryInfo", }, { type: RoomsType.CustomRoom, From 507979d9cc56ffeab3fb49b3ae6850d9729a252a Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:55:59 +0300 Subject: [PATCH 095/293] added translation keys for storageLocation and MakePrivate secondary infos --- packages/client/public/locales/en/CreateEditRoomDialog.json | 2 ++ packages/client/public/locales/ru/CreateEditRoomDialog.json | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index 37c56ca21a..92213defbd 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/packages/client/public/locales/en/CreateEditRoomDialog.json @@ -27,9 +27,11 @@ "MakeRoomPrivateTitle": "Make the Room Private", "MakeRoomPrivateDescription": "All files in this room will be encrypted", + "MakeRoomPrivateSecondaryInfo": "NO TEXT", "StorageLocationTitle": "Storage location", "StorageLocationDescription": "Use third-party services as data storage for this room", + "StorageLocationSecondaryInfo": "NO TEXT", "StorageLocationRememberChoice": "Remember this choice for new rooms", "FolderNameTitle": "Folder Name", diff --git a/packages/client/public/locales/ru/CreateEditRoomDialog.json b/packages/client/public/locales/ru/CreateEditRoomDialog.json index b320d36aa1..d51a43da55 100644 --- a/packages/client/public/locales/ru/CreateEditRoomDialog.json +++ b/packages/client/public/locales/ru/CreateEditRoomDialog.json @@ -27,9 +27,11 @@ "MakeRoomPrivateTitle": "Сделайте комнату приватной", "MakeRoomPrivateDescription": "Все файлы в этой комнате будут зашифрованы", + "MakeRoomPrivateSecondaryInfo": "NO TEXT", "StorageLocationTitle": "Место хранения", "StorageLocationDescription": "Используйте сторонние сервисы в качестве хранилища данных для этой комнаты", + "StorageLocationSecondaryInfo": "NO TEXT", "StorageLocationRememberChoice": "Запомнить этот выбор для новых комнат", "FolderNameTitle": "Имя папки", From b1b5b878716c5590abd450793b0ed4d74ea65cc7 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:56:26 +0300 Subject: [PATCH 096/293] implemented new translation keys --- .../CreateEditRoomDialog/sub-components/SetRoomParams.js | 2 +- .../sub-components/StorageLocation/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index e411217392..324c93e542 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -100,7 +100,7 @@ const SetRoomParams = ({ {t("MakeRoomPrivateTitle")} - +
{t("MakeRoomPrivateDescription")} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js index a5d633909c..0086f46d0e 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js @@ -19,7 +19,7 @@ const StorageLocation = ({ {t("StorageLocationTitle")} - +
{t("StorageLocationDescription")} From 57e76d78e168a16f3e2dde10f2ee1b2fd37d85d1 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 14:56:43 +0300 Subject: [PATCH 097/293] secondaryInfoButton fix position --- .../CreateEditRoomDialog/sub-components/SecondaryInfoButton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js index 342a134f3b..830a97dcc6 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SecondaryInfoButton.js @@ -20,6 +20,7 @@ const SecondaryInfoButton = ({ content }) => { iconName="/static/images/info.react.svg" tooltipProps={{ globalEventOff: "click" }} tooltipContent={content} + offsetRight={0} size={12} /> ); From 4272c1f661c0c643cab53b5e3672a917be2842c1 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 16:34:14 +0300 Subject: [PATCH 098/293] small stranslation fix --- packages/client/public/locales/ru/CreateEditRoomDialog.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/public/locales/ru/CreateEditRoomDialog.json b/packages/client/public/locales/ru/CreateEditRoomDialog.json index d51a43da55..bcd1ecd0b4 100644 --- a/packages/client/public/locales/ru/CreateEditRoomDialog.json +++ b/packages/client/public/locales/ru/CreateEditRoomDialog.json @@ -7,7 +7,7 @@ "CollaborationRoomTitle": "Комната для совместного редактирования", "ReviewRoomTitle": "Комната для рецензирования", "ViewOnlyRoomTitle": "Комната для просмотра", - "CustomRoomTitle": "Пользователсьская комната", + "CustomRoomTitle": "Пользовательская комната", "FillingFormsRoomDescription": "Данная комната подойдет для сбора форм/анкет/тестов и тд.", "CollaborationRoomDescription": "Совместная работа над одним или несколькими документами с вашей командой", From 050cd9fc841e667eb2d8d535adf744e10ac479b9 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 16:36:31 +0300 Subject: [PATCH 099/293] fixed default tags names --- .../client/src/components/GlobalEvents/CreateRoomEvent.js | 2 +- .../dialogs/CreateEditRoomDialog/CreateRoomDialog.js | 2 +- .../components/dialogs/CreateEditRoomDialog/data/index.js | 5 +++++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js index 1187036b33..77712c3229 100644 --- a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js @@ -18,7 +18,7 @@ const CreateRoomEvent = ({ const { t } = useTranslation([ "CreateEditRoomDialog", "Common", - "Settings", + "Files", "Home", ]); const [fetchedTags, setFetchedTags] = useState([]); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js index 3c4e31b00e..f32ebe1edc 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js @@ -50,7 +50,7 @@ const CreateRoomDialog = ({ const setRoomType = (newRoomType) => { const [roomByType] = roomTypes.filter((room) => room.type === newRoomType); - tagHandler.refreshDefaultTag(t(roomByType.title)); + tagHandler.refreshDefaultTag(t(roomByType.defaultTag)); setRoomParams((prev) => ({ ...prev, type: newRoomType, diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 1e5dab83bc..3c15ddf78d 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -5,6 +5,7 @@ export const roomTypes = [ type: RoomsType.FillingFormsRoom, title: "FillingFormsRoomTitle", description: "FillingFormsRoomDescription", + defaultTag: "Files:FillingFormsRoom", withSecondaryInfo: true, secondaryInfo: "FillingFormsRoomSecondaryInfo", }, @@ -12,6 +13,7 @@ export const roomTypes = [ type: RoomsType.EditingRoom, title: "CollaborationRoomTitle", description: "CollaborationRoomDescription", + defaultTag: "Files:EditingRoom", withSecondaryInfo: true, secondaryInfo: "CollaborationRoomSecondaryInfo", }, @@ -19,6 +21,7 @@ export const roomTypes = [ type: RoomsType.ReviewRoom, title: "ReviewRoomTitle", description: "ReviewRoomDescription", + defaultTag: "Files:ReviewRoom", withSecondaryInfo: true, secondaryInfo: "ReviewRoomSecondaryInfo", }, @@ -26,6 +29,7 @@ export const roomTypes = [ type: RoomsType.ReadOnlyRoom, title: "ViewOnlyRoomTitle", description: "ViewOnlyRoomDescription", + defaultTag: "Files:ReadOnlyRoom", withSecondaryInfo: true, secondaryInfo: "ViewOnlyRoomSecondaryInfo", }, @@ -33,6 +37,7 @@ export const roomTypes = [ type: RoomsType.CustomRoom, title: "CustomRoomTitle", description: "CustomRoomDescription", + defaultTag: "Files:CustomRoom", withSecondaryInfo: false, }, ]; From 28a95c269fd387557fa15e880d1ce0cae39d5b99 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 16:37:10 +0300 Subject: [PATCH 100/293] removed default tags interation from editRoom --- .../dialogs/CreateEditRoomDialog/EditRoomDialog.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js index 80767e07cf..ad6dad6eea 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js @@ -34,14 +34,11 @@ const EditRoomDialog = ({ const tagHandler = new TagHandler(roomParams.tags, setRoomTags, fetchedTags); - const setRoomType = (newRoomType) => { - const [roomByType] = roomTypes.filter((room) => room.type === newRoomType); - tagHandler.refreshDefaultTag(t(roomByType.title)); + const setRoomType = (newRoomType) => setRoomParams((prev) => ({ ...prev, type: newRoomType, })); - }; const onEditRoom = () => { onSave(roomParams); From 8c289c66ec3c30b27b685929b83b56c548c2aef2 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 16:37:30 +0300 Subject: [PATCH 101/293] deleted unused console.log --- .../CreateEditRoomDialog/sub-components/TagInput/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js index 84e6e4697f..c6a39c83d3 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js @@ -78,10 +78,7 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { heightTablet={32} key={i} label={tag} - onClick={() => { - addFetchedTag(tag); - console.log(tag); - }} + onClick={() => addFetchedTag(tag)} /> )); From 8fddde9d7c6332b087b36a2cfdf6829cfc5b2c90 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 16:37:45 +0300 Subject: [PATCH 102/293] fixed translation import --- .../client/src/components/GlobalEvents/EditRoomEvent.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/EditRoomEvent.js b/packages/client/src/components/GlobalEvents/EditRoomEvent.js index d18ac83f73..80f2bb9ac0 100644 --- a/packages/client/src/components/GlobalEvents/EditRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/EditRoomEvent.js @@ -18,12 +18,7 @@ const EditRoomEvent = ({ currrentFolderId, updateCurrentFolder, }) => { - const { t } = useTranslation([ - "CreateEditRoomDialog", - "Common", - "Settings", - "Home", - ]); + const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Home"]); const [fetchedTags, setFetchedTags] = useState([]); const [isLoading, setIsLoading] = useState(false); From 24f26491d846d59d93a93b6933f7ce00150391c6 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 3 Aug 2022 16:41:00 +0300 Subject: [PATCH 103/293] commented out help button in roomType --- .../dialogs/CreateEditRoomDialog/sub-components/RoomType.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js index 68fa35c3bb..90ccd43d20 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js @@ -123,7 +123,7 @@ const RoomType = ({ t, room, onClick, type = "listItem", isOpen }) => { {room.withSecondaryInfo && (
- + {/* */}
)}
From d0182d7aad52c4735a5abc1315220358b8b951eb Mon Sep 17 00:00:00 2001 From: mushka Date: Thu, 4 Aug 2022 13:28:54 +0300 Subject: [PATCH 104/293] created new IconEditorComponent --- .../sub-components/IconEditor/index.js | 27 +++++++++++++++++++ .../sub-components/SetRoomParams.js | 6 ++--- 2 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js new file mode 100644 index 0000000000..72fcc29e41 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js @@ -0,0 +1,27 @@ +import React from "react"; +import styled from "styled-components"; + +const StyledIconEditorWrapper = styled.div` + .use_modal-buttons_wrapper { + display: none; + } +`; + +const StyledIconEditor = styled(AvatarEditor)` + margin: 0; +`; + +import AvatarEditor from "@docspace/components/avatar-editor"; + +const IconEditor = () => { + return ( + + + + ); +}; + +export default IconEditor; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index 324c93e542..32256e199b 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -7,12 +7,12 @@ import TextInput from "@docspace/components/text-input"; import Label from "@docspace/components/label"; import ToggleButton from "@docspace/components/toggle-button"; import Text from "@docspace/components/text"; -import AvatarEditor from "@docspace/components/avatar-editor"; import TagInput from "./TagInput"; import { StyledParam } from "./StyledParam"; import RoomType from "./RoomType"; import { roomTypes } from "../data"; import SecondaryInfoButton from "./SecondaryInfoButton"; +import IconEditor from "./IconEditor"; const StyledSetRoomParams = styled.div` display: flex; @@ -148,9 +148,7 @@ const SetRoomParams = ({
- {/* - - */} + ); }; From 65e9cd6cacf6923f9afde50784e4cff4c3b94981 Mon Sep 17 00:00:00 2001 From: mushka Date: Thu, 4 Aug 2022 15:10:33 +0300 Subject: [PATCH 105/293] separated createRoom and createRoomInThirdparty --- .../client/src/components/GlobalEvents/CreateRoomEvent.js | 7 +++++-- packages/client/src/store/FilesStore.js | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js index 77712c3229..2806dd9fca 100644 --- a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js @@ -8,6 +8,7 @@ const CreateRoomEvent = ({ onClose, createRoom, + createRoomInThirdpary, createTag, addTagsToRoom, fetchTags, @@ -37,12 +38,13 @@ const CreateRoomEvent = ({ try { setIsLoading(true); - const room = await createRoom(createRoomParams); console.log(room); for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]); await addTagsToRoom(room.id, tags); await updateCurrentFolder(null, currrentFolderId); + // let thirpartyFolderId = "sbox-1-|ПАПКА ОТ ДОКСПЕЙС"; + // createRoomInThirdpary(thirpartyFolderId, createRoomParams); } catch (err) { console.log(err); } finally { @@ -70,7 +72,7 @@ const CreateRoomEvent = ({ export default inject( ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { - const { createRoom, addTagsToRoom } = filesStore; + const { createRoom, createRoomInThirdpary, addTagsToRoom } = filesStore; const { createTag, fetchTags } = tagsStore; const { id: currrentFolderId } = selectedFolderStore; @@ -78,6 +80,7 @@ export default inject( return { createRoom, + createRoomInThirdpary, createTag, fetchTags, addTagsToRoom, diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 540a142729..5068e1389e 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -1572,11 +1572,14 @@ class FilesStore { } createRoom(roomParams) { - if (roomParams.storageLocation) - return api.rooms.createRoomInThirdpary(roomParams); return api.rooms.createRoom(roomParams); } + createRoomInThirdpary(thirpartyFolderId, roomParams) { + console.log(thirpartyFolderId, roomParams); + return api.rooms.createRoomInThirdpary(thirpartyFolderId, roomParams); + } + editRoom(id, roomParams) { return api.rooms.editRoom(id, roomParams); } From 0de5d36ce4965fe3b7ab855e34a53849071ca746 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 9 Aug 2022 13:43:24 +0300 Subject: [PATCH 106/293] Web: Files: Scroll: added WindowScroller --- .../Section/Body/TableView/TableHeader.js | 46 ++++++------- packages/client/src/pages/Home/index.js | 2 +- .../Section/sub-components/section-body.js | 5 +- packages/components/infinite-loader/Grid.js | 15 +++-- .../infinite-loader/InfiniteLoader.js | 31 +++++++-- packages/components/infinite-loader/List.js | 67 ++++++++++++------- packages/components/package.json | 1 + .../table-container/StyledTableContainer.js | 3 - yarn.lock | 22 +++++- 9 files changed, 121 insertions(+), 71 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js index 37aa8507ea..26f4e7e97f 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -299,35 +299,34 @@ class FilesTableHeader extends React.Component { localStorage.setItem(this.props.tableStorageName, tableColumns); }; -//TODO: inf-scroll componentDidMount() { - //this.customScrollElm = document.getElementsByClassName("section-scroll")[0]; - //this.customScrollElm.addEventListener("scroll", this.onBeginScroll); + this.customScrollElm = document.getElementsByClassName("section-scroll")[0]; + this.customScrollElm.addEventListener("scroll", this.onBeginScroll); } - // onBeginScroll = () => { - // const { firstElemChecked } = this.props; + onBeginScroll = () => { + const { firstElemChecked } = this.props; - // const currentScrollPosition = this.customScrollElm.scrollTop; - // const elem = document.getElementById("table-container_caption-header"); + const currentScrollPosition = this.customScrollElm.scrollTop; + const elem = document.getElementById("table-container_caption-header"); - // if (currentScrollPosition === 0) { - // this.isBeginScrolling = false; + if (currentScrollPosition === 0) { + this.isBeginScrolling = false; - // this.props.headerBorder && - // elem?.classList?.add("hotkeys-lengthen-header"); + this.props.headerBorder && + elem?.classList?.add("hotkeys-lengthen-header"); - // !firstElemChecked && elem?.classList?.remove("lengthen-header"); - // return; - // } + !firstElemChecked && elem?.classList?.remove("lengthen-header"); + return; + } - // if (!this.isBeginScrolling) { - // elem?.classList?.remove("hotkeys-lengthen-header"); - // elem?.classList?.add("lengthen-header"); - // } + if (!this.isBeginScrolling) { + elem?.classList?.remove("hotkeys-lengthen-header"); + elem?.classList?.add("lengthen-header"); + } - // this.isBeginScrolling = true; - // }; + this.isBeginScrolling = true; + }; componentDidUpdate(prevProps) { if (this.props.isRooms !== this.state.isRooms) { return this.getTableColumns(true); @@ -351,10 +350,9 @@ class FilesTableHeader extends React.Component { } } -//TODO: inf-scroll - // componentWillUnmount() { - // this.customScrollElm.removeEventListener("scroll", this.onBeginScroll); - // } + componentWillUnmount() { + this.customScrollElm.removeEventListener("scroll", this.onBeginScroll); + } getColumns = (defaultColumns, splitColumns) => { const columns = []; diff --git a/packages/client/src/pages/Home/index.js b/packages/client/src/pages/Home/index.js index 76905470ce..f17d639a96 100644 --- a/packages/client/src/pages/Home/index.js +++ b/packages/client/src/pages/Home/index.js @@ -513,7 +513,7 @@ class PureHome extends React.Component {
!withScroll && "padding: 0"}; //TODO: inf-scroll - @media ${tablet} { padding: ${(props) => props.settingsStudio ? "0 0 16px 24px" : "19px 0 16px 24px"}; @@ -70,6 +68,8 @@ const commonStyles = css` } .section-wrapper-content { + height: 100%; + ${paddingStyles} flex: 1 0 auto; outline: none; @@ -137,7 +137,6 @@ const StyledSectionBody = styled.div` const StyledDropZoneBody = styled(DragAndDrop)` max-width: 100vw !important; - /* padding-right: 20px; */ //TODO: inf-scroll ${commonStyles} .drag-and-drop { user-select: none; diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index 97ed974665..ac72dc5886 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useRef } from "react"; import AutoSizer from "react-virtualized-auto-sizer"; import InfiniteLoader from "react-window-infinite-loader"; import { VariableSizeList as List, areEqual } from "react-window"; -import Scroll from "./Scroll"; +//import Scroll from "./Scroll"; const GridComponent = ({ hasMoreFiles, @@ -14,11 +14,12 @@ const GridComponent = ({ selectedFolderId, children, className, + listRef, }) => { const gridRef = useRef(null); useEffect(() => { - //TODO:it is slow + //TODO: inf-scroll it is slow //console.log("resetAfterIndex"); gridRef?.current?.resetAfterIndex(0); @@ -63,16 +64,18 @@ const GridComponent = ({ onScroll={onScroll} className={className} height={height} + width={width} itemCount={children.length} itemSize={getItemSize} - width={width} onItemsRendered={onItemsRendered} - ref={(listRef) => { + ref={(refList) => { ref(listRef); - gridRef.current = listRef; + gridRef.current = refList; + listRef.current = refList; }} - outerElementType={Scroll} + //outerElementType={Scroll} overscanCount={5} //TODO: inf-scroll + style={{ height: "100% !important" }} > {renderTile} diff --git a/packages/components/infinite-loader/InfiniteLoader.js b/packages/components/infinite-loader/InfiniteLoader.js index c54cbe97db..9e5344a11d 100644 --- a/packages/components/infinite-loader/InfiniteLoader.js +++ b/packages/components/infinite-loader/InfiniteLoader.js @@ -1,15 +1,32 @@ -import React from "react"; +import React, { useRef } from "react"; import PropTypes from "prop-types"; +import { WindowScroller } from "react-virtualized"; import ListComponent from "./List"; import GridComponent from "./Grid"; -const InfiniteLoaderComponent = (props) => - props.viewAs === "tile" ? ( - - ) : ( - - ); +const InfiniteLoaderComponent = (props) => { + const ref = useRef(null); + const scroll = document.getElementsByClassName("section-scroll")[0]; + + const onScroll = ({ scrollTop }) => { + ref.current.scrollTo(scrollTop); + }; + + return ( + <> + + {() =>
} + + + {props.viewAs === "tile" ? ( + + ) : ( + + )} + + ); +}; InfiniteLoaderComponent.propTypes = { viewAs: PropTypes.string.isRequired, hasMoreFiles: PropTypes.bool.isRequired, diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 07621a20bd..c1ded2bca2 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -1,8 +1,8 @@ -import React, { memo, useCallback } from "react"; +import React, { memo, useCallback, useEffect, useRef } from "react"; import AutoSizer from "react-virtualized-auto-sizer"; import InfiniteLoader from "react-window-infinite-loader"; import { FixedSizeList as List, areEqual } from "react-window"; -import Scroll from "./Scroll"; +//import Scroll from "./Scroll"; import Loaders from "@docspace/common/components/Loaders"; import { StyledTableLoader, StyledRowLoader } from "./StyledInfiniteLoader"; @@ -15,9 +15,19 @@ const ListComponent = ({ itemSize, onScroll, columnStorageName, + selectedFolderId, children, className, + listRef, }) => { + const listComponentRef = useRef(null); + + useEffect(() => { + //TODO: inf-scroll it is slow + + listComponentRef?.current?.resetAfterIndex(0); + }, [selectedFolderId]); + const renderRow = memo(({ index, style }) => { const isLoaded = isItemLoaded(index + 1); if (!isLoaded) return getLoader(style); @@ -72,29 +82,36 @@ const ListComponent = ({ } }; - const renderList = ({ height, width }) => ( - - {({ onItemsRendered, ref }) => ( - - {viewAs === "table" ? renderTable : renderRow} - - )} - - ); + const renderList = ({ height, width }) => { + return ( + + {({ onItemsRendered, ref }) => ( + { + ref(listRef); + listComponentRef.current = refList; + listRef.current = refList; + }} + style={{ height: "100% !important" }} + //outerElementType={Scroll} + > + {viewAs === "table" ? renderTable : renderRow} + + )} + + ); + }; return {renderList}; }; diff --git a/packages/components/package.json b/packages/components/package.json index 4ca9f87c7d..97e7861118 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -38,6 +38,7 @@ "react-toastify": "^7.0.0", "react-tooltip": "^4.2.21", "react-transition-group": "^4.4.1", + "react-virtualized": "^9.22.3", "react-window": "^1.8.6", "resize-image": "^0.1.0" }, diff --git a/packages/components/table-container/StyledTableContainer.js b/packages/components/table-container/StyledTableContainer.js index 3578417427..c77a35e6d2 100644 --- a/packages/components/table-container/StyledTableContainer.js +++ b/packages/components/table-container/StyledTableContainer.js @@ -6,15 +6,12 @@ import { isMobile } from "react-device-detect"; const reactWindowContainerStyles = css` height: 100%; - overflow: hidden; display: block; - margin-top: 0; `; const reactWindowBodyStyles = css` display: block; height: 100%; - height: 95%; //TODO: inf-scroll `; const StyledTableContainer = styled.div` diff --git a/yarn.lock b/yarn.lock index a0090dbf12..d9a6763a4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2155,6 +2155,7 @@ __metadata: react-tooltip: ^4.2.21 react-transition-group: ^4.4.1 react-values: ^0.3.3 + react-virtualized: ^9.22.3 react-window: ^1.8.6 resize-image: ^0.1.0 styled-components: ^5.3.1 @@ -8883,7 +8884,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^1.1.1": +"clsx@npm:^1.0.4, clsx@npm:^1.1.1": version: 1.2.1 resolution: "clsx@npm:1.2.1" checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 @@ -10534,7 +10535,7 @@ __metadata: languageName: node linkType: hard -"dom-helpers@npm:^5.0.1": +"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.1.3": version: 5.2.1 resolution: "dom-helpers@npm:5.2.1" dependencies: @@ -20692,6 +20693,23 @@ __metadata: languageName: node linkType: hard +"react-virtualized@npm:^9.22.3": + version: 9.22.3 + resolution: "react-virtualized@npm:9.22.3" + dependencies: + "@babel/runtime": ^7.7.2 + clsx: ^1.0.4 + dom-helpers: ^5.1.3 + loose-envify: ^1.4.0 + prop-types: ^15.7.2 + react-lifecycles-compat: ^3.0.4 + peerDependencies: + react: ^15.3.0 || ^16.0.0-alpha + react-dom: ^15.3.0 || ^16.0.0-alpha + checksum: 5e3b566592293bc0057bc6be4f6ee29c58c8931421d2882a3ef45ca9b24c6f3ea78bbc5a182c2916af6520845e5a90f569b3a63c9b5e89428720913e6d6239cc + languageName: node + linkType: hard + "react-window-infinite-loader@npm:^1.0.7": version: 1.0.8 resolution: "react-window-infinite-loader@npm:1.0.8" From b1d70eaeb054f390b3c6765492025ec37cda2d79 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 9 Aug 2022 14:13:42 +0300 Subject: [PATCH 107/293] Web: Files: fixed Tile styles --- .../sub-components/StyledInfiniteGrid.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js index 77ad4e1855..8d9b8b3897 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js @@ -1,4 +1,16 @@ -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { desktop, tablet } from "@docspace/components/utils/device"; + +const paddingCss = css` + @media ${desktop} { + margin-left: 1px; + padding-right: 0px; + } + + @media ${tablet} { + margin-left: -1px; + } +`; const StyledCard = styled.div` display: grid; @@ -10,6 +22,9 @@ const StyledItem = styled.div` display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 14px 16px; + width: 100%; + + ${paddingCss}; `; const StyledHeaderItem = styled.div` From deffed2d14d8cf58a0f0d41af32a7c95ce749c8e Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 9 Aug 2022 16:19:52 +0300 Subject: [PATCH 108/293] Web: Files: fixed scroll for mobile devices --- packages/client/src/components/Layout/MobileLayout.js | 7 ++++++- packages/components/infinite-loader/InfiniteLoader.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/Layout/MobileLayout.js b/packages/client/src/components/Layout/MobileLayout.js index 55ab85cf79..87d54f0a16 100644 --- a/packages/client/src/components/Layout/MobileLayout.js +++ b/packages/client/src/components/Layout/MobileLayout.js @@ -132,7 +132,12 @@ class MobileLayout extends Component { const { children } = this.props; return ( - + { const ref = useRef(null); - const scroll = document.getElementsByClassName("section-scroll")[0]; + const scroll = isMobile + ? document.getElementsByClassName("mobile-scroll")[0] + : document.getElementsByClassName("section-scroll")[0]; const onScroll = ({ scrollTop }) => { ref.current.scrollTo(scrollTop); From 08c41f5121e2591d5118ddaf9a6a53d9121ba1c0 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 10 Aug 2022 11:28:57 +0300 Subject: [PATCH 109/293] Web: Files: FormGallery: removed useless code --- packages/client/src/pages/FormGallery/Body.js | 2 +- .../TilesView/sub-components/TileContainer.js | 54 ++----------------- 2 files changed, 5 insertions(+), 51 deletions(-) diff --git a/packages/client/src/pages/FormGallery/Body.js b/packages/client/src/pages/FormGallery/Body.js index a15a1413a3..ea07cfe58a 100644 --- a/packages/client/src/pages/FormGallery/Body.js +++ b/packages/client/src/pages/FormGallery/Body.js @@ -43,7 +43,7 @@ const SectionBodyContent = ({ descriptionText={t("EmptyScreenDescription")} /> ) : ( - + {oformFiles.map((item, index) => ( ))} diff --git a/packages/client/src/pages/FormGallery/TilesView/sub-components/TileContainer.js b/packages/client/src/pages/FormGallery/TilesView/sub-components/TileContainer.js index 0cf19ec0b6..b249b5e98c 100644 --- a/packages/client/src/pages/FormGallery/TilesView/sub-components/TileContainer.js +++ b/packages/client/src/pages/FormGallery/TilesView/sub-components/TileContainer.js @@ -1,71 +1,25 @@ -import React, { memo } from "react"; +import React from "react"; import { withTranslation } from "react-i18next"; import PropTypes from "prop-types"; -import { FixedSizeList as List, areEqual } from "react-window"; -import AutoSizer from "react-virtualized-auto-sizer"; -import CustomScrollbarsVirtualList from "@docspace/components/scrollbar"; import { StyledGridWrapper, StyledTileContainer } from "../StyledTileView"; class TileContainer extends React.PureComponent { - renderTile = memo(({ data, index, style }) => { - return
{data[index]}
; - }, areEqual); - render() { - const { - itemHeight, - children, - useReactWindow, - id, - className, - style, - } = this.props; - - const renderList = ({ height, width }) => ( - - {this.renderTile} - - ); + const { children, id, className, style } = this.props; return ( - - {useReactWindow ? ( - {renderList} - ) : ( - {children} - )} + + {children} ); } } TileContainer.propTypes = { - itemHeight: PropTypes.number, - manualHeight: PropTypes.string, children: PropTypes.any.isRequired, - useReactWindow: PropTypes.bool, className: PropTypes.string, id: PropTypes.string, style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), }; -TileContainer.defaultProps = { - itemHeight: 50, - useReactWindow: true, - id: "rowContainer", -}; - export default withTranslation(["Files", "Common"])(TileContainer); From 2c2251d33e20715f1c17b7d14a3a8802654e9fb3 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 10 Aug 2022 11:37:14 +0300 Subject: [PATCH 110/293] Web: Files: added default useReactWindow prop --- .../pages/Home/Section/Body/TableView/TableContainer.js | 1 - packages/components/infinite-loader/Grid.js | 6 +++++- packages/components/infinite-loader/List.js | 8 ++++++-- packages/components/table-container/TableBody.js | 1 + packages/components/table-container/TableContainer.js | 4 ++++ packages/components/table-container/TableHeader.js | 3 ++- 6 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index 5658dd7d93..75b5896562 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -7,7 +7,6 @@ import TableHeader from "./TableHeader"; import TableBody from "@docspace/components/table-container/TableBody"; import { isMobile } from "react-device-detect"; import styled, { css } from "styled-components"; -import { isTablet } from "@docspace/components/utils/device"; import { Base } from "@docspace/components/themes"; const marginCss = css` diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index ac72dc5886..95d9002594 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -33,7 +33,11 @@ const GridComponent = ({ ); const renderTile = memo(({ index, style }) => { - return
{children[index]}
; + return ( +
+ {children[index]} +
+ ); }, areEqual); const getItemSize = (index) => { diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index c1ded2bca2..5c4b92d601 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -32,7 +32,11 @@ const ListComponent = ({ const isLoaded = isItemLoaded(index + 1); if (!isLoaded) return getLoader(style); - return
{children[index]}
; + return ( +
+ {children[index]} +
+ ); }, areEqual); const isItemLoaded = useCallback( @@ -48,7 +52,7 @@ const ListComponent = ({ return (
{ TableBody.defaultProps = { itemHeight: 40, + useReactWindow: false, }; export default TableBody; diff --git a/packages/components/table-container/TableContainer.js b/packages/components/table-container/TableContainer.js index f569c7a4e7..f4dae10cf0 100644 --- a/packages/components/table-container/TableContainer.js +++ b/packages/components/table-container/TableContainer.js @@ -16,6 +16,10 @@ const TableContainer = (props) => { ); }; +TableContainer.defaultProps = { + useReactWindow: false, +}; + TableContainer.propTypes = { forwardedRef: PropTypes.shape({ current: PropTypes.any }), useReactWindow: PropTypes.bool, diff --git a/packages/components/table-container/TableHeader.js b/packages/components/table-container/TableHeader.js index 06324db6ef..5d627bc5cf 100644 --- a/packages/components/table-container/TableHeader.js +++ b/packages/components/table-container/TableHeader.js @@ -563,7 +563,7 @@ class TableHeader extends React.Component { updateTableRows = (str) => { if (!this.props.useReactWindow) return; - const rows = document.querySelectorAll(".table-row, .table-row-list-item"); + const rows = document.querySelectorAll(".table-row, .table-list-item"); if (rows?.length) { for (let i = 0; i < rows.length; i++) { @@ -708,6 +708,7 @@ class TableHeader extends React.Component { TableHeader.defaultProps = { sortingVisible: true, infoPanelVisible: false, + useReactWindow: false, }; TableHeader.propTypes = { From 966e1e293e2cbe265ba336270ca17293765417ea Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 10 Aug 2022 11:38:04 +0300 Subject: [PATCH 111/293] Web: Files: fixed hotkeys --- packages/client/src/HOCs/withHotkeys.js | 11 ++++++++--- packages/client/src/store/HotkeyStore.js | 9 ++++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/client/src/HOCs/withHotkeys.js b/packages/client/src/HOCs/withHotkeys.js index 2b815e689f..d121b78691 100644 --- a/packages/client/src/HOCs/withHotkeys.js +++ b/packages/client/src/HOCs/withHotkeys.js @@ -1,7 +1,6 @@ import React, { useEffect } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { observer, inject } from "mobx-react"; -import { FileAction } from "@docspace/common/constants"; import { Events } from "@docspace/client/src/helpers/filesConstants"; import toastr from "client/toastr"; @@ -51,6 +50,7 @@ const withHotkeys = (Component) => { selection, setFavoriteAction, + filesIsLoading, } = props; const hotkeysFilter = { @@ -58,7 +58,11 @@ const withHotkeys = (Component) => { ev.target?.type === "checkbox" || ev.target?.tagName !== "INPUT", filterPreventDefault: false, enableOnTags: ["INPUT"], - enabled: !someDialogIsOpen && enabledHotkeys && !mediaViewerIsVisible, + enabled: + !someDialogIsOpen && + enabledHotkeys && + !mediaViewerIsVisible && + !filesIsLoading, // keyup: true, // keydown: false, }; @@ -322,9 +326,9 @@ const withHotkeys = (Component) => { setSelected, viewAs, setViewAs, - fileActionStore, enabledHotkeys, selection, + filesIsLoading, } = filesStore; const { @@ -413,6 +417,7 @@ const withHotkeys = (Component) => { selection, setFavoriteAction, + filesIsLoading, }; } )(observer(WithHotkeys)); diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js index 0f6333785c..0d8c4ad878 100644 --- a/packages/client/src/store/HotkeyStore.js +++ b/packages/client/src/store/HotkeyStore.js @@ -85,7 +85,14 @@ class HotkeyStore { ) { //console.log("element is visible"); } else { - scroll.scrollTo(0, el.offsetTop - scrollRect.height / 2); + const offset = el.closest(".window-item")?.offsetTop; + const offsetTop = offset + ? offset + : viewAs === "tile" + ? el.parentElement.parentElement.offsetTop + : el.offsetTop; + + scroll.scrollTo(0, offsetTop - scrollRect.height / 2); //console.log("element is not visible"); } } From 8f4ee05948c848be7c1e40240f5146e84de064d3 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 10 Aug 2022 13:27:52 +0300 Subject: [PATCH 112/293] Web: Files: fixed mobile scroll --- packages/client/src/components/Layout/MobileLayout.js | 7 +------ packages/components/infinite-loader/InfiniteLoader.js | 8 ++++---- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/client/src/components/Layout/MobileLayout.js b/packages/client/src/components/Layout/MobileLayout.js index 87d54f0a16..55ab85cf79 100644 --- a/packages/client/src/components/Layout/MobileLayout.js +++ b/packages/client/src/components/Layout/MobileLayout.js @@ -132,12 +132,7 @@ class MobileLayout extends Component { const { children } = this.props; return ( - + { const ref = useRef(null); - const scroll = isMobile - ? document.getElementsByClassName("mobile-scroll")[0] - : document.getElementsByClassName("section-scroll")[0]; + const scroll = isMobileOnly + ? document.querySelector("#customScrollBar > .scroll-body") + : document.querySelector("#sectionScroll > .scroll-body"); const onScroll = ({ scrollTop }) => { ref.current.scrollTo(scrollTop); From 492ed8667480725869439c1e3d128c13cc8d69bc Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 10 Aug 2022 13:32:17 +0300 Subject: [PATCH 113/293] Web: Files: fixed double scroll --- packages/components/infinite-loader/Grid.js | 2 +- packages/components/infinite-loader/List.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index 95d9002594..c9d1cfe05f 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -79,7 +79,7 @@ const GridComponent = ({ }} //outerElementType={Scroll} overscanCount={5} //TODO: inf-scroll - style={{ height: "100% !important" }} + style={{ height: "100% !important", overflow: "hidden" }} > {renderTile} diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 5c4b92d601..527290b245 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -107,7 +107,7 @@ const ListComponent = ({ listComponentRef.current = refList; listRef.current = refList; }} - style={{ height: "100% !important" }} + style={{ height: "100% !important", overflow: "hidden" }} //outerElementType={Scroll} > {viewAs === "table" ? renderTable : renderRow} From 28c73a4a7c7357150c24ec31033ad9665b1e818b Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 10:35:32 +0300 Subject: [PATCH 114/293] Web: Components: moved to react-virtualized, fixed blue screen --- packages/components/infinite-loader/Grid.js | 99 ++++++------- .../infinite-loader/InfiniteLoader.js | 25 +--- packages/components/infinite-loader/List.js | 132 +++++++++--------- .../infinite-loader/StyledInfiniteLoader.js | 18 +-- 4 files changed, 120 insertions(+), 154 deletions(-) diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index c9d1cfe05f..dae8fd52f0 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -1,8 +1,6 @@ -import React, { memo, useCallback, useEffect, useRef } from "react"; -import AutoSizer from "react-virtualized-auto-sizer"; -import InfiniteLoader from "react-window-infinite-loader"; -import { VariableSizeList as List, areEqual } from "react-window"; -//import Scroll from "./Scroll"; +import React, { useCallback } from "react"; +import { InfiniteLoader, WindowScroller, AutoSizer } from "react-virtualized"; +import { StyledList } from "./StyledInfiniteLoader"; const GridComponent = ({ hasMoreFiles, @@ -11,36 +9,26 @@ const GridComponent = ({ loadMoreItems, onScroll, countTilesInRow, - selectedFolderId, children, className, - listRef, + scroll, }) => { - const gridRef = useRef(null); - - useEffect(() => { - //TODO: inf-scroll it is slow - //console.log("resetAfterIndex"); - - gridRef?.current?.resetAfterIndex(0); - }, [selectedFolderId]); - const isItemLoaded = useCallback( - (index) => { + ({ index }) => { return !hasMoreFiles || index * countTilesInRow < filesLength; }, [filesLength, hasMoreFiles, countTilesInRow] ); - const renderTile = memo(({ index, style }) => { + const renderTile = ({ index, style, key }) => { return ( -
+
{children[index]}
); - }, areEqual); + }; - const getItemSize = (index) => { + const getItemSize = ({ index }) => { const itemClassNames = children[index]?.props?.className; const isFile = itemClassNames?.includes("isFile"); const isFolder = itemClassNames?.includes("isFolder"); @@ -56,41 +44,40 @@ const GridComponent = ({ return isFolder ? folderHeight : isFile ? fileHeight : titleHeight; }; - const renderGrid = ({ height, width }) => { - return ( - - {({ onItemsRendered, ref }) => ( - { - ref(listRef); - gridRef.current = refList; - listRef.current = refList; - }} - //outerElementType={Scroll} - overscanCount={5} //TODO: inf-scroll - style={{ height: "100% !important", overflow: "hidden" }} - > - {renderTile} - - )} - - ); - }; - - //console.log("GridComponent render"); - - return {renderGrid}; + return ( + + {({ onRowsRendered, registerChild }) => ( + + {({ height, isScrolling, onChildScroll, scrollTop }) => ( + + {({ width }) => ( + + )} + + )} + + )} + + ); }; export default GridComponent; diff --git a/packages/components/infinite-loader/InfiniteLoader.js b/packages/components/infinite-loader/InfiniteLoader.js index f47b469f6c..da422afe9f 100644 --- a/packages/components/infinite-loader/InfiniteLoader.js +++ b/packages/components/infinite-loader/InfiniteLoader.js @@ -1,33 +1,18 @@ -import React, { useRef } from "react"; +import React from "react"; import PropTypes from "prop-types"; -import { WindowScroller } from "react-virtualized"; import { isMobileOnly } from "react-device-detect"; import ListComponent from "./List"; import GridComponent from "./Grid"; const InfiniteLoaderComponent = (props) => { - const ref = useRef(null); - const scroll = isMobileOnly ? document.querySelector("#customScrollBar > .scroll-body") : document.querySelector("#sectionScroll > .scroll-body"); - const onScroll = ({ scrollTop }) => { - ref.current.scrollTo(scrollTop); - }; - - return ( - <> - - {() =>
} - - - {props.viewAs === "tile" ? ( - - ) : ( - - )} - + return props.viewAs === "tile" ? ( + + ) : ( + ); }; InfiniteLoaderComponent.propTypes = { diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 527290b245..12314fa42c 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -1,54 +1,42 @@ -import React, { memo, useCallback, useEffect, useRef } from "react"; -import AutoSizer from "react-virtualized-auto-sizer"; -import InfiniteLoader from "react-window-infinite-loader"; -import { FixedSizeList as List, areEqual } from "react-window"; -//import Scroll from "./Scroll"; +import React, { useCallback } from "react"; +import { InfiniteLoader, WindowScroller, AutoSizer } from "react-virtualized"; import Loaders from "@docspace/common/components/Loaders"; -import { StyledTableLoader, StyledRowLoader } from "./StyledInfiniteLoader"; +import { StyledList } from "./StyledInfiniteLoader"; const ListComponent = ({ viewAs, hasMoreFiles, filesLength, itemCount, + onScroll, loadMoreItems, itemSize, - onScroll, columnStorageName, - selectedFolderId, children, className, - listRef, + scroll, }) => { - const listComponentRef = useRef(null); - - useEffect(() => { - //TODO: inf-scroll it is slow - - listComponentRef?.current?.resetAfterIndex(0); - }, [selectedFolderId]); - - const renderRow = memo(({ index, style }) => { - const isLoaded = isItemLoaded(index + 1); - if (!isLoaded) return getLoader(style); + const renderRow = ({ key, index, style }) => { + const isLoaded = isItemLoaded({ index: index + 2 }); + if (!isLoaded) return getLoader(style, key); return ( -
+
{children[index]}
); - }, areEqual); + }; const isItemLoaded = useCallback( - (index) => !hasMoreFiles || index < filesLength, + ({ index }) => !hasMoreFiles || index < filesLength, [filesLength, hasMoreFiles] ); - const renderTable = memo(({ index, style }) => { + const renderTable = ({ index, style, key }) => { const storageSize = localStorage.getItem(columnStorageName); - const isLoaded = isItemLoaded(index + 1); - if (!isLoaded) return getLoader(style); + const isLoaded = isItemLoaded({ index: index + 2 }); + if (!isLoaded) return getLoader(style, key); return (
{children[index]}
); - }, areEqual); + }; - const getLoader = (style) => { + const getLoader = (style, key) => { switch (viewAs) { case "table": return ( - - - + count={1} + /> ); case "row": return ( - - - + ); default: return <>; } }; - const renderList = ({ height, width }) => { - return ( - - {({ onItemsRendered, ref }) => ( - { - ref(listRef); - listComponentRef.current = refList; - listRef.current = refList; - }} - style={{ height: "100% !important", overflow: "hidden" }} - //outerElementType={Scroll} - > - {viewAs === "table" ? renderTable : renderRow} - - )} - - ); - }; + return ( + + {({ onRowsRendered, registerChild }) => ( + + {({ height, isScrolling, onChildScroll, scrollTop }) => { + if (height === undefined) { + height = scroll.getBoundingClientRect().height; + } - return {renderList}; + return ( + + {({ width }) => ( + + )} + + ); + }} + + )} + + ); }; export default ListComponent; diff --git a/packages/components/infinite-loader/StyledInfiniteLoader.js b/packages/components/infinite-loader/StyledInfiniteLoader.js index 8ed1d2b8d3..5f961dd865 100644 --- a/packages/components/infinite-loader/StyledInfiniteLoader.js +++ b/packages/components/infinite-loader/StyledInfiniteLoader.js @@ -1,17 +1,7 @@ +import { List } from "react-virtualized"; import styled from "styled-components"; import Base from "../themes/base"; -const StyledTableLoader = styled.div` - grid-column-start: 1; - grid-column-end: -1; - display: grid; - padding-top: 16px; -`; - -const StyledRowLoader = styled.div` - padding-top: 16px; -`; - const StyledScroll = styled.div` overflow: scroll; @@ -38,8 +28,12 @@ const StyledScroll = styled.div` scrollbar-color: ${({ theme }) => theme.scrollbar.backgroundColorVertical}; `; +const StyledList = styled(List)` + outline: none; +`; + StyledScroll.defaultProps = { theme: Base, }; -export { StyledTableLoader, StyledRowLoader, StyledScroll }; +export { StyledScroll, StyledList }; From 7d691f6dcbe50e01a1c9d53d7f680059ff361e46 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 11:00:42 +0300 Subject: [PATCH 115/293] Web: Common: fixed scroll --- .../common/components/Section/sub-components/section-body.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/common/components/Section/sub-components/section-body.js b/packages/common/components/Section/sub-components/section-body.js index ac0a876a0f..596fb7273d 100644 --- a/packages/common/components/Section/sub-components/section-body.js +++ b/packages/common/components/Section/sub-components/section-body.js @@ -68,8 +68,6 @@ const commonStyles = css` } .section-wrapper-content { - height: 100%; - ${paddingStyles} flex: 1 0 auto; outline: none; From 1853175976a20ec9102385577e917e58c6a1dad5 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 12:56:57 +0300 Subject: [PATCH 116/293] Web: Files: fixed create/rename events --- packages/client/src/HOCs/withContent.js | 2 -- .../components/GlobalEvents/CreateEvent.js | 8 ++--- .../components/GlobalEvents/RenameEvent.js | 10 +++--- .../dialogs/ConvertPasswordDialog/index.js | 2 +- .../client/src/store/FilesActionsStore.js | 31 +++---------------- packages/client/src/store/FilesStore.js | 15 +++++++-- 6 files changed, 26 insertions(+), 42 deletions(-) diff --git a/packages/client/src/HOCs/withContent.js b/packages/client/src/HOCs/withContent.js index 64062d934b..87ff930f1b 100644 --- a/packages/client/src/HOCs/withContent.js +++ b/packages/client/src/HOCs/withContent.js @@ -120,7 +120,6 @@ export default function withContent(WrappedContent) { }, { item } ) => { - const { editCompleteAction } = filesActionsStore; const { createFile, createFolder, @@ -164,7 +163,6 @@ export default function withContent(WrappedContent) { createFile, createFolder, culture, - editCompleteAction, folderFormValidation, homepage: config.homepage, diff --git a/packages/client/src/components/GlobalEvents/CreateEvent.js b/packages/client/src/components/GlobalEvents/CreateEvent.js index 2b6acf0c9a..e5d6376ccc 100644 --- a/packages/client/src/components/GlobalEvents/CreateEvent.js +++ b/packages/client/src/components/GlobalEvents/CreateEvent.js @@ -103,7 +103,7 @@ const CreateEvent = ({ addActiveItems(null, [folder.id]); setCreatedItem({ id: createdFolderId, type: "folder" }); }) - .then(() => editCompleteAction(id, item, false, type)) + .then(() => editCompleteAction(item, type)) .catch((e) => toastr.error(e)) .finally(() => { const folderIds = [+id]; @@ -123,7 +123,7 @@ const CreateEvent = ({ open && openDocEditor(file.id, file.providerKey, tab); }) - .then(() => editCompleteAction(id, item, false, type)) + .then(() => editCompleteAction(item, type)) .catch((err) => { if (err.indexOf("password") == -1) { toastr.error(err, t("Common:Warning")); @@ -173,7 +173,7 @@ const CreateEvent = ({ return open && openDocEditor(file.id, file.providerKey, tab); }) - .then(() => editCompleteAction(id, item, false, type)) + .then(() => editCompleteAction(item, type)) .catch((e) => toastr.error(e)) .finally(() => { const fileIds = [+id]; @@ -209,7 +209,7 @@ const CreateEvent = ({ return open && openDocEditor(file.id, file.providerKey, tab); }) - .then(() => editCompleteAction(id, item, false, type)) + .then(() => editCompleteAction(item, type)) .catch((e) => toastr.error(e)) .finally(() => { const fileIds = [+id]; diff --git a/packages/client/src/components/GlobalEvents/RenameEvent.js b/packages/client/src/components/GlobalEvents/RenameEvent.js index 5b46519269..96a5f20a45 100644 --- a/packages/client/src/components/GlobalEvents/RenameEvent.js +++ b/packages/client/src/components/GlobalEvents/RenameEvent.js @@ -48,7 +48,7 @@ const RenameEvent = ({ if (isSameTitle) { setStartValue(originalTitle); - return editCompleteAction(item.id, item, isSameTitle, type); + return editCompleteAction(item, type); } else { timerId = setTimeout(() => { isFile ? addActiveItems([item.id]) : addActiveItems(null, [item.id]); @@ -57,7 +57,7 @@ const RenameEvent = ({ isFile ? updateFile(item.id, value) - .then(() => editCompleteAction(item.id, item, false, type)) + .then(() => editCompleteAction(item, type)) .then(() => toastr.success( t("FileRenamed", { @@ -68,7 +68,7 @@ const RenameEvent = ({ ) .catch((err) => { toastr.error(err); - editCompleteAction(item.id, item, false, type); + editCompleteAction(item, type); }) .finally(() => { clearTimeout(timerId); @@ -79,7 +79,7 @@ const RenameEvent = ({ onClose(); }) : renameFolder(item.id, value) - .then(() => editCompleteAction(item.id, item, false, type)) + .then(() => editCompleteAction(item, type)) .then(() => toastr.success( t("FolderRenamed", { @@ -90,7 +90,7 @@ const RenameEvent = ({ ) .catch((err) => { toastr.error(err); - editCompleteAction(item.id, item, false, type); + editCompleteAction(item, type); }) .finally(() => { clearTimeout(timerId); diff --git a/packages/client/src/components/dialogs/ConvertPasswordDialog/index.js b/packages/client/src/components/dialogs/ConvertPasswordDialog/index.js index b3f60de943..30ad712393 100644 --- a/packages/client/src/components/dialogs/ConvertPasswordDialog/index.js +++ b/packages/client/src/components/dialogs/ConvertPasswordDialog/index.js @@ -114,7 +114,7 @@ const ConvertPasswordDialogComponent = (props) => { open && openDocEditor(file.id, file.providerKey, tab); }) .then(() => { - editCompleteAction(actionId, fileInfo, false); + editCompleteAction(fileInfo); }) .catch((err) => { if (err.indexOf("password") == -1) { diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js index 82634a7ac0..5bf1fcb764 100644 --- a/packages/client/src/store/FilesActionsStore.js +++ b/packages/client/src/store/FilesActionsStore.js @@ -489,35 +489,12 @@ class FilesActionStore { return this.downloadFiles(fileIds, folderIds, label); }; - editCompleteAction = async (id, selectedItem, isCancelled = false, type) => { - const { - filter, - folders, - files, + editCompleteAction = async (selectedItem, type) => { + if (type === FileAction.Create) { + this.filesStore.addFile(selectedItem); + } - fetchFiles, - setIsLoading, - } = this.filesStore; - - const { treeFolders, setTreeFolders } = this.treeFoldersStore; - - const items = [...folders, ...files]; - const item = items.find((o) => o.id === id && !o.fileExst); //TODO: maybe need files find and folders find, not at one function? if (type === FileAction.Create || type === FileAction.Rename) { - setIsLoading(true); - - if (!isCancelled) { - const data = await fetchFiles(this.selectedFolderStore.id, filter); - const newItem = (item && item.id) === -1 ? null : item; //TODO: not add new folders? - if (!selectedItem.fileExst && !selectedItem.contentLength) { - const path = data.selectedFolder.pathParts; - const folders = await getSubfolders(this.selectedFolderStore.id); - loopTreeFolders(path, treeFolders, folders, null, newItem); - setTreeFolders(treeFolders); - } - } - - setIsLoading(false); type === FileAction.Rename && this.onSelectItem( { diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index c5bbe41867..9e83cdb9d2 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -12,7 +12,7 @@ import { import history from "@docspace/common/history"; import { combineUrl } from "@docspace/common/utils"; import { updateTempContent } from "@docspace/common/utils"; -import { isMobile } from "react-device-detect"; +import { isMobile, isMobileOnly } from "react-device-detect"; import toastr from "client/toastr"; import config from "PACKAGE_FILE"; @@ -671,9 +671,7 @@ class FilesStore { treeFolders, setSelectedNode, getSubfolders, - selectedTreeNode, } = this.treeFoldersStore; - const { id } = this.selectedFolderStore; const filterData = filter ? filter.clone() : FilesFilter.getDefault(); filterData.folder = folderId; @@ -1631,6 +1629,17 @@ class FilesStore { this.folders[idx].pinned = !this.folders[idx].pinned; }; + addFile = (item) => { + this.filter.total += 1; + this.files.unshift(item); + + const scrollElm = isMobileOnly + ? document.querySelector("#customScrollBar > .scroll-body") + : document.querySelector("#sectionScroll > .scroll-body"); + + scrollElm && scrollElm.scrollTo(0, 0); + }; + updateFile = (fileId, title) => { return api.files .updateFile(fileId, title) From 87d351a3049180ededf5533a29eb01ff4b773e90 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 14:45:14 +0300 Subject: [PATCH 117/293] Web: Components: fixed List width, fixed fetch --- packages/client/src/store/FilesStore.js | 14 ++++-- packages/components/infinite-loader/Grid.js | 48 ++++++++++--------- packages/components/infinite-loader/List.js | 45 +++++++++-------- .../components/table-container/TableBody.js | 2 +- 4 files changed, 60 insertions(+), 49 deletions(-) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 983d7abcd4..08f3f281f3 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -666,6 +666,8 @@ class FilesStore { getSubfolders, } = this.treeFoldersStore; + this.scrollToTop(); + const filterData = filter ? filter.clone() : FilesFilter.getDefault(); filterData.folder = folderId; @@ -1622,10 +1624,7 @@ class FilesStore { this.folders[idx].pinned = !this.folders[idx].pinned; }; - addFile = (item) => { - this.filter.total += 1; - this.files.unshift(item); - + scrollToTop = () => { const scrollElm = isMobileOnly ? document.querySelector("#customScrollBar > .scroll-body") : document.querySelector("#sectionScroll > .scroll-body"); @@ -1633,6 +1632,13 @@ class FilesStore { scrollElm && scrollElm.scrollTo(0, 0); }; + addFile = (item) => { + this.filter.total += 1; + this.files.unshift(item); + + this.scrollToTop(); + }; + updateFile = (fileId, title) => { return api.files .updateFile(fileId, title) diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index dae8fd52f0..2b9ffd7284 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -1,5 +1,5 @@ import React, { useCallback } from "react"; -import { InfiniteLoader, WindowScroller, AutoSizer } from "react-virtualized"; +import { InfiniteLoader, WindowScroller } from "react-virtualized"; import { StyledList } from "./StyledInfiniteLoader"; const GridComponent = ({ @@ -52,28 +52,30 @@ const GridComponent = ({ > {({ onRowsRendered, registerChild }) => ( - {({ height, isScrolling, onChildScroll, scrollTop }) => ( - - {({ width }) => ( - - )} - - )} + {({ height, isScrolling, onChildScroll, scrollTop }) => { + const width = + document.getElementById("tileContainer")?.getBoundingClientRect() + .width ?? 0; + + return ( + + ); + }} )} diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 12314fa42c..5017b0088a 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -1,5 +1,5 @@ import React, { useCallback } from "react"; -import { InfiniteLoader, WindowScroller, AutoSizer } from "react-virtualized"; +import { InfiniteLoader, WindowScroller } from "react-virtualized"; import Loaders from "@docspace/common/components/Loaders"; import { StyledList } from "./StyledInfiniteLoader"; @@ -91,27 +91,30 @@ const ListComponent = ({ height = scroll.getBoundingClientRect().height; } + const viewId = + viewAs === "table" ? "table-container" : "rowContainer"; + + const width = + document.getElementById(viewId)?.getBoundingClientRect().width ?? + 0; + return ( - - {({ width }) => ( - - )} - + ); }} diff --git a/packages/components/table-container/TableBody.js b/packages/components/table-container/TableBody.js index 642bd96a96..576702c0a0 100644 --- a/packages/components/table-container/TableBody.js +++ b/packages/components/table-container/TableBody.js @@ -40,7 +40,7 @@ const TableBody = (props) => { }; TableBody.defaultProps = { - itemHeight: 40, + itemHeight: 41, useReactWindow: false, }; From 645c771b3b09f980666f95f47dd829857c9fb503 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 15:28:57 +0300 Subject: [PATCH 118/293] Web: Components: fixed table columns --- .../src/pages/Home/Section/Body/TableView/TableContainer.js | 2 ++ packages/components/infinite-loader/List.js | 6 +++++- packages/components/table-container/TableBody.js | 5 +++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index 75b5896562..ab51837173 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -204,6 +204,8 @@ const Table = ({ hasMoreFiles={hasMoreFiles} itemCount={filterTotal} useReactWindow + infoPanelVisible={infoPanelVisible} + columnInfoPanelStorageName={columnInfoPanelStorageName} > {filesList.map((item, index) => { return index === 0 && item.isRoom ? ( diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 5017b0088a..7d7bc0e3f3 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -12,9 +12,11 @@ const ListComponent = ({ loadMoreItems, itemSize, columnStorageName, + columnInfoPanelStorageName, children, className, scroll, + infoPanelVisible, }) => { const renderRow = ({ key, index, style }) => { const isLoaded = isItemLoaded({ index: index + 2 }); @@ -33,7 +35,9 @@ const ListComponent = ({ ); const renderTable = ({ index, style, key }) => { - const storageSize = localStorage.getItem(columnStorageName); + const storageSize = infoPanelVisible + ? localStorage.getItem(columnInfoPanelStorageName) + : localStorage.getItem(columnStorageName); const isLoaded = isItemLoaded({ index: index + 2 }); if (!isLoaded) return getLoader(style, key); diff --git a/packages/components/table-container/TableBody.js b/packages/components/table-container/TableBody.js index 576702c0a0..630a4d3eab 100644 --- a/packages/components/table-container/TableBody.js +++ b/packages/components/table-container/TableBody.js @@ -5,6 +5,7 @@ import InfiniteLoaderComponent from "../infinite-loader"; const TableBody = (props) => { const { columnStorageName, + columnInfoPanelStorageName, fetchMoreFiles, children, filesLength, @@ -13,6 +14,7 @@ const TableBody = (props) => { itemHeight, useReactWindow, onScroll, + infoPanelVisible, } = props; return useReactWindow ? ( @@ -28,8 +30,10 @@ const TableBody = (props) => { itemCount={itemCount} loadMoreItems={fetchMoreFiles} columnStorageName={columnStorageName} + columnInfoPanelStorageName={columnInfoPanelStorageName} itemSize={itemHeight} onScroll={onScroll} + infoPanelVisible={infoPanelVisible} > {children} @@ -42,6 +46,7 @@ const TableBody = (props) => { TableBody.defaultProps = { itemHeight: 41, useReactWindow: false, + infoPanelVisible: false, }; export default TableBody; From 2ec456f07077680ca1a7da5bd949461c13d1e91a Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 15:31:21 +0300 Subject: [PATCH 119/293] Web: Components: fixed height error --- packages/components/infinite-loader/Grid.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index 2b9ffd7284..d35948c6c0 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -53,6 +53,10 @@ const GridComponent = ({ {({ onRowsRendered, registerChild }) => ( {({ height, isScrolling, onChildScroll, scrollTop }) => { + if (height === undefined) { + height = scroll.getBoundingClientRect().height; + } + const width = document.getElementById("tileContainer")?.getBoundingClientRect() .width ?? 0; From a35aa2d306414c60bc8a909ca3f173ed80291f93 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 15:56:18 +0300 Subject: [PATCH 120/293] Web: Files: fixed create folders --- .../client/src/components/GlobalEvents/CreateEvent.js | 2 +- .../Body/TilesView/sub-components/TileContainer.js | 9 +-------- packages/client/src/store/FilesActionsStore.js | 4 ++-- packages/client/src/store/FilesStore.js | 4 ++-- 4 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/CreateEvent.js b/packages/client/src/components/GlobalEvents/CreateEvent.js index e5d6376ccc..2b9a226cca 100644 --- a/packages/client/src/components/GlobalEvents/CreateEvent.js +++ b/packages/client/src/components/GlobalEvents/CreateEvent.js @@ -103,7 +103,7 @@ const CreateEvent = ({ addActiveItems(null, [folder.id]); setCreatedItem({ id: createdFolderId, type: "folder" }); }) - .then(() => editCompleteAction(item, type)) + .then(() => editCompleteAction(item, type, true)) .catch((e) => toastr.error(e)) .finally(() => { const folderIds = [+id]; diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js index fc90d2cb16..9d11da6e7f 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js @@ -172,7 +172,6 @@ class TileContainer extends React.PureComponent { super(props); this.state = { - isOpen: false, selectedFilterData: { sortId: props.filter.sortBy, sortDirection: props.filter.sortOrder, @@ -180,12 +179,6 @@ class TileContainer extends React.PureComponent { }; } - toggleDropdown = () => { - this.setState((prev) => ({ - isOpen: !prev.isOpen, - })); - }; - render() { const { children, @@ -197,7 +190,7 @@ class TileContainer extends React.PureComponent { headingFiles, } = this.props; - const { isOpen, selectedFilterData } = this.state; + const { selectedFilterData } = this.state; const Rooms = []; const Folders = []; diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js index 2c0d942a36..5bf34216d2 100644 --- a/packages/client/src/store/FilesActionsStore.js +++ b/packages/client/src/store/FilesActionsStore.js @@ -489,9 +489,9 @@ class FilesActionStore { return this.downloadFiles(fileIds, folderIds, label); }; - editCompleteAction = async (selectedItem, type) => { + editCompleteAction = async (selectedItem, type, isFolder = false) => { if (type === FileAction.Create) { - this.filesStore.addFile(selectedItem); + this.filesStore.addFile(selectedItem, isFolder); } if (type === FileAction.Create || type === FileAction.Rename) { diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 08f3f281f3..7b5ed07256 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -1632,9 +1632,9 @@ class FilesStore { scrollElm && scrollElm.scrollTo(0, 0); }; - addFile = (item) => { + addFile = (item, isFolder) => { this.filter.total += 1; - this.files.unshift(item); + isFolder ? this.folders.unshift(item) : this.files.unshift(item); this.scrollToTop(); }; From 22c45015c33913c2c8342fb450cf928ac54acb1d Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 17:01:53 +0300 Subject: [PATCH 121/293] Web: Components: fixed scroll --- packages/components/infinite-loader/StyledInfiniteLoader.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/infinite-loader/StyledInfiniteLoader.js b/packages/components/infinite-loader/StyledInfiniteLoader.js index 5f961dd865..eb73c729bb 100644 --- a/packages/components/infinite-loader/StyledInfiniteLoader.js +++ b/packages/components/infinite-loader/StyledInfiniteLoader.js @@ -30,6 +30,7 @@ const StyledScroll = styled.div` const StyledList = styled(List)` outline: none; + overflow: hidden !important; `; StyledScroll.defaultProps = { From 5fcb32c16e7589e40d8b3ece3248f269a2849c4e Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 17:35:30 +0300 Subject: [PATCH 122/293] Web: Files: fixed remove files --- packages/client/src/store/FilesActionsStore.js | 3 +++ packages/client/src/store/FilesStore.js | 11 ++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js index 5bf34216d2..4c02c17c9d 100644 --- a/packages/client/src/store/FilesActionsStore.js +++ b/packages/client/src/store/FilesActionsStore.js @@ -289,6 +289,7 @@ class FilesActionStore { //this.updateCurrentFolder(fileIds, folderIds, false); this.updateFilesAfterDelete(folderIds); + this.filesStore.removeFiles(fileIds, folderIds); if (currentFolderId) { const { socketHelper } = this.authStore.settingsStore; @@ -623,6 +624,7 @@ class FilesActionStore { await this.uploadDataStore.loopFilesOperations(data, pbData); //this.updateCurrentFolder([itemId]); this.updateFilesAfterDelete(); + this.filesStore.removeFiles([itemId]); }) .then(() => toastr.success(translations.successRemoveFile)); } else if (isRoom) { @@ -648,6 +650,7 @@ class FilesActionStore { await this.uploadDataStore.loopFilesOperations(data, pbData); //this.updateCurrentFolder(null, [itemId]); this.updateFilesAfterDelete([itemId]); + this.filesStore.removeFiles([itemId]); getIsEmptyTrash(); }) .then(() => toastr.success(translations.successRemoveFolder)); diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 7b5ed07256..f3169f0c9d 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -1639,6 +1639,14 @@ class FilesStore { this.scrollToTop(); }; + removeFiles = (fileIds, folderIds) => { + this.filter.total -= fileIds.length + folderIds.length; + + if (fileIds) this.files = this.files.filter((x) => !fileIds.includes(x.id)); + if (folderIds) + this.folders = this.folders.filter((x) => !folderIds.includes(x.id)); + }; + updateFile = (fileId, title) => { return api.files .updateFile(fileId, title) @@ -2482,12 +2490,13 @@ class FilesStore { this.trashIsEmpty = isEmpty; }; + //TODO: filter.total is not updated, need move filter to new filterStore get filterTotal() { return this.filter.total; } get hasMoreFiles() { - return this.filesList.length < this.filterTotal; + return this.filesList.length < this.filter.total; } setFilesIsLoading = (filesIsLoading) => { From 160bc3a1a736cea8bb1c7083aab6a558774b47f1 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 12 Aug 2022 17:52:21 +0300 Subject: [PATCH 123/293] Web: Components: fixed grid loaders --- packages/components/infinite-loader/Grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index d35948c6c0..5369095601 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -15,7 +15,7 @@ const GridComponent = ({ }) => { const isItemLoaded = useCallback( ({ index }) => { - return !hasMoreFiles || index * countTilesInRow < filesLength; + return !hasMoreFiles || (index + 1) * countTilesInRow < filesLength; }, [filesLength, hasMoreFiles, countTilesInRow] ); From 769f70db182eea40d77daf963ffdf9bd96e7e1cf Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 15 Aug 2022 12:06:19 +0300 Subject: [PATCH 124/293] Web: Files: fixed hotkeys scroll --- packages/client/src/store/FilesStore.js | 4 +- packages/client/src/store/HotkeyStore.js | 116 ++++++++++++++--------- 2 files changed, 71 insertions(+), 49 deletions(-) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index f3169f0c9d..0e48e45610 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -529,9 +529,7 @@ class FilesStore { }; setHotkeyCaret = (hotkeyCaret) => { - if (hotkeyCaret) { - this.hotkeyCaret = hotkeyCaret; - } else if (this.hotkeyCaret) { + if (hotkeyCaret || this.hotkeyCaret) { this.hotkeyCaret = hotkeyCaret; } }; diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js index 0d8c4ad878..a34833bcf5 100644 --- a/packages/client/src/store/HotkeyStore.js +++ b/packages/client/src/store/HotkeyStore.js @@ -14,6 +14,8 @@ class HotkeyStore { treeFoldersStore; uploadDataStore; + elemOffset = 0; + constructor( filesStore, dialogsStore, @@ -50,7 +52,7 @@ class HotkeyStore { e.preventDefault(); } - const { selection: s, hotkeyCaret, viewAs, filesList } = this.filesStore; + const { selection: s, hotkeyCaret, filesList } = this.filesStore; const selection = s.length ? s : filesList; if (!hotkeyCaret) { @@ -59,12 +61,44 @@ class HotkeyStore { } if (!hotkeyCaret && selection.length) { - this.filesStore.setHotkeyCaret(selection[0]); + this.setCaret(selection[0]); this.filesStore.setHotkeyCaretStart(selection[0]); } if (!hotkeyCaret || isDefaultKeys) return; + const { offsetTop, item } = this.getItemOffset(); + const scroll = document.getElementsByClassName("section-scroll")[0]; + const scrollRect = scroll.getBoundingClientRect(); + + if (item && item[0]) { + const el = item[0]; + const rect = el.getBoundingClientRect(); + + if ( + scrollRect.top + scrollRect.height - rect.height > rect.top && + scrollRect.top < rect.top + el.offsetHeight + ) { + //console.log("element is visible"); + } else { + scroll.scrollTo(0, offsetTop - scrollRect.height / 2); + //console.log("element is not visible"); + } + } else { + scroll.scrollTo(0, this.elemOffset - scrollRect.height / 2); + } + }; + + setCaret = (caret) => { + this.filesStore.setHotkeyCaret(caret); + const { offsetTop } = this.getItemOffset(); + + if (offsetTop) this.elemOffset = offsetTop; + }; + + getItemOffset = () => { + const { hotkeyCaret, viewAs } = this.filesStore; + let item = document.getElementsByClassName( `${hotkeyCaret.id}_${hotkeyCaret.fileExst}` ); @@ -75,42 +109,38 @@ class HotkeyStore { if (item && item[0]) { const el = item[0]; - const rect = el.getBoundingClientRect(); - const scroll = document.getElementsByClassName("section-scroll")[0]; - const scrollRect = scroll.getBoundingClientRect(); - if ( - scrollRect.top + scrollRect.height - rect.height > rect.top && - scrollRect.top < rect.top + el.offsetHeight - ) { - //console.log("element is visible"); - } else { - const offset = el.closest(".window-item")?.offsetTop; - const offsetTop = offset - ? offset - : viewAs === "tile" - ? el.parentElement.parentElement.offsetTop - : el.offsetTop; + const offset = el.closest(".window-item")?.offsetTop; - scroll.scrollTo(0, offsetTop - scrollRect.height / 2); - //console.log("element is not visible"); - } + const offsetTop = offset + ? offset + : viewAs === "tile" + ? el.parentElement.parentElement.offsetTop + : el.offsetTop; + + return { offsetTop, item }; } + + return { offsetTop: null, item: null }; }; selectFirstFile = () => { const { filesList } = this.filesStore; if (filesList.length) { + // scroll to first element + const scroll = document.querySelector("#sectionScroll > .scroll-body"); + scroll.scrollTo(0, 0); + this.filesStore.setSelection([filesList[0]]); - this.filesStore.setHotkeyCaret(filesList[0]); + this.setCaret(filesList[0]); this.filesStore.setHotkeyCaretStart(filesList[0]); } }; setSelectionWithCaret = (selection) => { this.filesStore.setSelection(selection); - this.filesStore.setHotkeyCaret(selection[0]); + this.setCaret(selection[0]); this.filesStore.setHotkeyCaretStart(selection[0]); }; @@ -119,7 +149,6 @@ class HotkeyStore { selection, setSelection, hotkeyCaret, - setHotkeyCaret, setHotkeyCaretStart, } = this.filesStore; @@ -135,7 +164,7 @@ class HotkeyStore { setHotkeyCaretStart(hotkeyCaret); } else { if (selection.length) { - setHotkeyCaret(selection[0]); + this.setCaret(selection[0]); setHotkeyCaretStart(selection[0]); } else this.selectFirstFile(); } @@ -204,7 +233,6 @@ class HotkeyStore { setHotkeyCaretStart, hotkeyCaret, viewAs, - setHotkeyCaret, deselectFile, } = this.filesStore; @@ -220,14 +248,14 @@ class HotkeyStore { ...this.selectionsDown, ...[hotkeyCaretStart ? hotkeyCaretStart : hotkeyCaret], ]); - setHotkeyCaret(this.nextForTileDown); + this.setCaret(this.nextForTileDown); } else if (this.nextFile) { if (selection.findIndex((f) => f.id === this.nextFile.id) !== -1) { deselectFile(hotkeyCaret); } else { setSelection([...selection, ...[this.nextFile]]); } - setHotkeyCaret(this.nextFile); + this.setCaret(this.nextFile); } }; @@ -239,7 +267,6 @@ class HotkeyStore { setHotkeyCaretStart, hotkeyCaret, viewAs, - setHotkeyCaret, deselectFile, } = this.filesStore; @@ -255,7 +282,7 @@ class HotkeyStore { ...this.selectionsUp, ...[hotkeyCaretStart ? hotkeyCaretStart : hotkeyCaret], ]); - setHotkeyCaret(this.prevForTileUp); + this.setCaret(this.prevForTileUp); } else if (this.prevFile) { if (selection.findIndex((f) => f.id === this.prevFile.id) !== -1) { deselectFile(hotkeyCaret); @@ -263,7 +290,7 @@ class HotkeyStore { setSelection([...[this.prevFile], ...selection]); } - setHotkeyCaret(this.prevFile); + this.setCaret(this.prevFile); } }; @@ -273,7 +300,6 @@ class HotkeyStore { setSelection, hotkeyCaret, viewAs, - setHotkeyCaret, deselectFile, hotkeyCaretStart, filesList, @@ -314,7 +340,7 @@ class HotkeyStore { if (viewAs === "tile") { setSelection(nextForTileRight); - setHotkeyCaret(nextFile); + this.setCaret(nextFile); } else if (nextFile) { if (selection.findIndex((f) => f.id === nextFile.id) !== -1) { deselectFile(hotkeyCaret); @@ -322,7 +348,7 @@ class HotkeyStore { setSelection([...selection, ...[nextFile]]); } - setHotkeyCaret(nextFile); + this.setCaret(nextFile); } }; @@ -332,7 +358,6 @@ class HotkeyStore { setSelection, hotkeyCaret, viewAs, - setHotkeyCaret, deselectFile, filesList, hotkeyCaretStart, @@ -373,7 +398,7 @@ class HotkeyStore { if (viewAs === "tile") { setSelection(prevForTileLeft); - setHotkeyCaret(prevFile); + this.setCaret(prevFile); } else if (prevFile) { if (selection.findIndex((f) => f.id === prevFile.id) !== -1) { deselectFile(hotkeyCaret); @@ -381,30 +406,30 @@ class HotkeyStore { setSelection([...[prevFile], ...selection]); } - setHotkeyCaret(prevFile); + this.setCaret(prevFile); } }; moveCaretBottom = () => { - const { viewAs, setHotkeyCaret } = this.filesStore; + const { viewAs } = this.filesStore; - if (viewAs === "tile") setHotkeyCaret(this.nextForTileDown); - else if (this.nextFile) setHotkeyCaret(this.nextFile); + if (viewAs === "tile") this.setCaret(this.nextForTileDown); + else if (this.nextFile) this.setCaret(this.nextFile); }; moveCaretUpper = () => { - const { viewAs, setHotkeyCaret } = this.filesStore; + const { viewAs } = this.filesStore; - if (viewAs === "tile") setHotkeyCaret(this.prevForTileUp); - else if (this.prevFile) setHotkeyCaret(this.prevFile); + if (viewAs === "tile") this.setCaret(this.prevForTileUp); + else if (this.prevFile) this.setCaret(this.prevFile); }; moveCaretLeft = () => { - if (this.prevFile) this.filesStore.setHotkeyCaret(this.prevFile); + if (this.prevFile) this.setCaret(this.prevFile); }; moveCaretRight = () => { - if (this.nextFile) this.filesStore.setHotkeyCaret(this.nextFile); + if (this.nextFile) this.setCaret(this.nextFile); }; openItem = () => { @@ -418,14 +443,13 @@ class HotkeyStore { const { filesList, hotkeyCaret, - setHotkeyCaret, setHotkeyCaretStart, setSelected, } = this.filesStore; setSelected("all"); if (!hotkeyCaret) { - setHotkeyCaret(filesList[0]); + this.setCaret(filesList[0]); setHotkeyCaretStart(filesList[0]); } }; From ea5b92f1afa00eab5135af6aef1bb489c0c88c2b Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:48:23 +0300 Subject: [PATCH 125/293] added func for getting cloudTypeIcon to filesUtils --- packages/client/src/helpers/filesUtils.js | 26 +++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/client/src/helpers/filesUtils.js b/packages/client/src/helpers/filesUtils.js index 7b0eaadd44..5f61f448e5 100644 --- a/packages/client/src/helpers/filesUtils.js +++ b/packages/client/src/helpers/filesUtils.js @@ -205,3 +205,29 @@ export const connectedCloudsTypeTitleTranslation = (key, t) => { return key; } }; + +export const connectedCloudsTypeIcon = (key) => { + switch (key) { + case "GoogleDrive": + return "/static/images/cloud.services.google.drive.react.svg"; + case "Box": + return "/static/images/cloud.services.box.react.svg"; + case "DropboxV2": + return "/static/images/cloud.services.dropbox.react.svg"; + case "OneDrive": + return "/static/images/cloud.services.onedrive.react.svg"; + case "SharePoint": + return "/static/images/cloud.services.onedrive.react.svg"; + case "kDrive": + return "/static/images/cloud.services.kdrive.react.svg"; + case "Yandex": + return "/static/images/cloud.services.yandex.react.svg"; + case "NextCloud": + return "/static/images/cloud.services.nextcloud.react.svg"; + case "OwnCloud": + return "/static/images/catalog.folder.react.svg"; + case "WebDav": + return "/static/images/cloud.services.webdav.react.svg"; + default: + } +}; From 868ca37341b33e7c634c9339146cd5247c434d5b Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:49:19 +0300 Subject: [PATCH 126/293] added svg for icon-croppper grid --- packages/client/public/images/icon-cropper-grid.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/client/public/images/icon-cropper-grid.svg diff --git a/packages/client/public/images/icon-cropper-grid.svg b/packages/client/public/images/icon-cropper-grid.svg new file mode 100644 index 0000000000..abed88d075 --- /dev/null +++ b/packages/client/public/images/icon-cropper-grid.svg @@ -0,0 +1,3 @@ + + + From a2ef8d46b51999b01806f2b089699529244dd4f4 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:49:43 +0300 Subject: [PATCH 127/293] updated and edited translations --- .../locales/en/CreateEditRoomDialog.json | 18 ++++++++---------- .../locales/ru/CreateEditRoomDialog.json | 18 ++++++++---------- 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index 92213defbd..f221dd690f 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/packages/client/public/locales/en/CreateEditRoomDialog.json @@ -15,11 +15,6 @@ "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing", "CustomRoomDescription": "Apply your own settings to use this room for any custom purpose", - "FillingFormsRoomSecondaryInfo": "NO TEXT", - "CollaborationRoomSecondaryInfo": "In this room participants will be able to edit documents together. This room can be useful for quick preparation of documents.", - "ReviewRoomSecondaryInfo": "In the review room participants will be able to discuss, comment and review documents. Taking into account the reviews, you can create/supplement a document in the room.", - "ViewOnlyRoomSecondaryInfo": "In this room you can add any files that need to be provided to users for review.", - "NamePlaceholder": "Enter name", "TagsPlaceholder": "Add a tag", @@ -27,12 +22,15 @@ "MakeRoomPrivateTitle": "Make the Room Private", "MakeRoomPrivateDescription": "All files in this room will be encrypted", - "MakeRoomPrivateSecondaryInfo": "NO TEXT", + "PrivacyLimitationsWarningDescription": "With this feature, you can invite only existing users on the portal. After creating a room, you will not be able to change the list of users.", - "StorageLocationTitle": "Storage location", - "StorageLocationDescription": "Use third-party services as data storage for this room", - "StorageLocationSecondaryInfo": "NO TEXT", - "StorageLocationRememberChoice": "Remember this choice for new rooms", + "ThirdPartyStorageTitle": "Third party storage", + "ThirdPartyStorageDescription": "Use third-party services as data storage for this room. A new folder for storing this room’s data will be created in the connected storage", + "ThirdPartyStorageComboBoxPlaceholder": "Select storage", + "ThirdPartyStorageNoStorageAlert": "No storage is connected in the portal Settings. Go to the Integrations section to enable data storage on a third-party", + "ThirdPartyStorageNoStorageAlertLink": "Third-party services", + "ThirdPartyStorageRememberChoice": "Remember this choice for new rooms", + "ThirdPartyStoragePermanentSettingDescription": "Files are stored in a third-party {{thirdpartyTitle}} storage in the \"{{thirdpartyFolderName}}\" folder.\n{{thirdpartyPath}}", "FolderNameTitle": "Folder Name", "FolderNameDescription": "A new folder for storing this room’s data will be created in the connected storage" diff --git a/packages/client/public/locales/ru/CreateEditRoomDialog.json b/packages/client/public/locales/ru/CreateEditRoomDialog.json index bcd1ecd0b4..818a5e6f04 100644 --- a/packages/client/public/locales/ru/CreateEditRoomDialog.json +++ b/packages/client/public/locales/ru/CreateEditRoomDialog.json @@ -15,11 +15,6 @@ "ViewOnlyRoomDescription": "Предоставляйте доступ к любым готовым документам, отчетам, документации и другим файлам для просмотра", "CustomRoomDescription": "Примените собственные настройки, чтобы использовать эту комнату для любых пользовательских целей", - "FillingFormsRoomSecondaryInfo": "НЕТ ТЕКСТА", - "CollaborationRoomSecondaryInfo": "В данной комнате участники смогут совместно редактировать документы. Это комната может быть полезна для быстрой подготовки документов.", - "ReviewRoomSecondaryInfo": "В комнате для рецензирования участники смогут обсуждать, комментировать и рецензировать документы. С учетом рецензий можно создать/дополнить документ в комнате.", - "ViewOnlyRoomSecondaryInfo": "В эту комнату вы можете добавлять любые файлы, которые необходимо предоставить пользователям для ознакомления.", - "NamePlaceholder": "Введите имя", "TagsPlaceholder": "Добавьте тэг", @@ -27,12 +22,15 @@ "MakeRoomPrivateTitle": "Сделайте комнату приватной", "MakeRoomPrivateDescription": "Все файлы в этой комнате будут зашифрованы", - "MakeRoomPrivateSecondaryInfo": "NO TEXT", + "MakeRoomPrivateLimitationsWarningDescription": "С данной функцией Вы можете пригласить только уже существующих пользователей на портале. После создания комнаты изменить список пользобателей будет нельзя.", - "StorageLocationTitle": "Место хранения", - "StorageLocationDescription": "Используйте сторонние сервисы в качестве хранилища данных для этой комнаты", - "StorageLocationSecondaryInfo": "NO TEXT", - "StorageLocationRememberChoice": "Запомнить этот выбор для новых комнат", + "ThirdPartyStorageTitle": "Место хранения", + "ThirdPartyStorageDescription": "Используйте сторонние сервисы в качестве хранилища данных для этой комнаты. В подключенном хранилище будет создана новая папка для хранения данных этой комнаты", + "ThirdPartyStorageComboBoxPlaceholder": "Выберите хранилище", + "ThirdPartyStorageNoStorageAlert": "В Настройках портала не подключено ни одного хранилища. Перейдите в раздел Интеграций, чтобы включить возможность хранения данных на стороннем сервисе ", + "ThirdPartyStorageNoStorageAlertLink": "Сторонние сервисы", + "ThirdPartyStorageRememberChoice": "Запомнить этот выбор для новых комнат", + "ThirdPartyStoragePermanentSettingDescription": "Файлы хранятся в стороннем хранилище {{thirdpartyTitle}} в папке \"{{thirdpartyFolderName}}\".\n{{thirdpartyPath}}", "FolderNameTitle": "Имя папки", "FolderNameDescription": "В подключенном хранилище будет создана новая папка для хранения данных этой комнаты" From 307be1d4e5a7feda5a4a014ab484994758bf0cbc Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:50:18 +0300 Subject: [PATCH 128/293] updated state in CreateRoom --- .../CreateEditRoomDialog/CreateRoomDialog.js | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js index f32ebe1edc..34487d8fc5 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js @@ -26,6 +26,7 @@ const CreateRoomDialog = ({ onClose, onCreate, + providers, fetchedTags, isLoading, folderFormValidation, @@ -37,10 +38,18 @@ const CreateRoomDialog = ({ type: undefined, tags: [], isPrivate: false, - storageLocation: undefined, - rememberStorageLocation: false, - thirdpartyFolderName: "", - icon: "", + isThirdparty: false, + storageLocation: null, + rememberThirdpartyStorage: false, + icon: { + uploadedFile: null, + tmpFile: "", + x: 0.5, + y: 0.5, + width: 216, + height: 216, + zoom: 1, + }, }); const setRoomTags = (newTags) => @@ -57,9 +66,7 @@ const CreateRoomDialog = ({ })); }; - const onCreateRoom = () => { - onCreate(roomParams); - }; + const onCreateRoom = () => onCreate(roomParams); const isChooseRoomType = roomParams.type === undefined; const goBack = () => { @@ -68,9 +75,8 @@ const CreateRoomDialog = ({ type: undefined, tags: [], isPrivate: false, + isThirdparty: false, storageLocation: undefined, - rememberStorageLocation: false, - thirdpartyFolderName: "", icon: "", }); }; @@ -111,6 +117,7 @@ const CreateRoomDialog = ({ setRoomParams={setRoomParams} setRoomType={setRoomType} setIsScrollLocked={setIsScrollLocked} + providers={providers} /> )} From 84f50bd4bd4b1a516d1fce4f4075afcedb7c940b Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:50:31 +0300 Subject: [PATCH 129/293] updated state in EditRoom --- .../dialogs/CreateEditRoomDialog/EditRoomDialog.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js index ad6dad6eea..9ea0b04330 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js @@ -22,11 +22,6 @@ const EditRoomDialog = ({ const [roomParams, setRoomParams] = useState({ ...fetchedRoomParams, - // cant fetch - isPrivate: false, - storageLocation: undefined, - rememberStorageLocation: false, - thirdpartyFolderName: "", }); const setRoomTags = (newTags) => @@ -40,9 +35,9 @@ const EditRoomDialog = ({ type: newRoomType, })); - const onEditRoom = () => { - onSave(roomParams); - }; + const onEditRoom = () => onSave(roomParams); + + console.log(roomParams); return ( Date: Mon, 15 Aug 2022 15:51:11 +0300 Subject: [PATCH 130/293] created iconEditorComponent --- .../sub-components/IconEditor/Dropzone.js | 77 ++++++++ .../sub-components/IconEditor/IconCropper.js | 175 ++++++++++++++++++ .../sub-components/IconEditor/PreviewTile.js | 71 +++++++ .../sub-components/IconEditor/index.js | 54 ++++-- 4 files changed, 362 insertions(+), 15 deletions(-) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/Dropzone.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/Dropzone.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/Dropzone.js new file mode 100644 index 0000000000..48bb6e21e3 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/Dropzone.js @@ -0,0 +1,77 @@ +import React, { useEffect } from "react"; +import styled from "styled-components"; +import { useDropzone } from "react-dropzone"; + +const StyledDropzone = styled.div` + cursor: pointer; + width: 100%; + height: 150px; + border: 2px dashed #eceef1; + border-radius: 6px; + + .dropzone { + height: 100%; + width: 100%; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + + &-link { + display: flex; + flex-direction: row; + gap: 4px; + + font-size: 13px; + line-height: 20px; + &-main { + color: #316daa; + font-weight: 600; + text-decoration: underline; + text-decoration-style: dashed; + text-underline-offset: 1px; + } + &-secondary { + font-weight: 400; + } + } + + &-exsts { + font-weight: 600; + font-size: 12px; + line-height: 16px; + color: #a3a9ae; + } + } +`; + +const Dropzone = ({ setUploadedFile }) => { + const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ + maxFiles: 1, + maxSize: 1000000, + // accept: { + // "image/*": [".jpeg", ".png"], + // }, + }); + + useEffect(() => { + if (acceptedFiles.length) setUploadedFile(acceptedFiles[0]); + }, [acceptedFiles]); + + return ( + +
+ +
+ Select new image + or drop file here +
+
(JPG or PNG, max 1 MB)
+
+ + ); +}; + +export default Dropzone; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js new file mode 100644 index 0000000000..32b58b06d3 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js @@ -0,0 +1,175 @@ +import React, { useState, useEffect } from "react"; +import styled from "styled-components"; +import { ReactSVG } from "react-svg"; +import throttle from "lodash/throttle"; + +import AvatarEditor from "react-avatar-editor"; +import Slider from "@docspace/components/slider"; +import IconButton from "@docspace/components/icon-button"; + +const StyledIconCropper = styled.div` + max-width: 216px; + + .icon_cropper-crop_area { + width: 216px; + height: 216px; + margin-bottom: 4px; + position: relative; + .icon_cropper-grid { + pointer-events: none; + position: absolute; + width: 216px; + height: 216px; + top: 0; + bottom: 0; + left: 0; + right: 0; + svg { + opacity: 0.2; + path { + fill: #333333; + } + } + } + } + + .icon_cropper-delete_button { + cursor: pointer; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + padding: 6px 0; + background: #f8f9f9; + border-radius: 3px; + margin-bottom: 12px; + + &-text { + font-weight: 600; + line-height: 20px; + color: #555f65; + } + + svg { + path { + fill: #657077; + } + } + } + + .icon_cropper-zoom-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 12px; + margin-bottom: 20px; + + &-slider { + margin: 0; + } + + &-button { + user-select: none; + } + } +`; + +const IconCropper = ({ + t, + icon, + onChangeIcon, + uploadedFile, + setUploadedFile, + setPreviewIcon, +}) => { + let editorRef = null; + const setEditorRef = (editor) => (editorRef = editor); + + const handlePositionChange = (position) => + onChangeIcon({ ...icon, x: position.x, y: position.y }); + + const handleSliderChange = (e, newZoom = null) => + onChangeIcon({ ...icon, zoom: newZoom ? newZoom : +e.target.value }); + + const handleZoomInClick = () => + handleSliderChange({}, icon.zoom <= 4.5 ? icon.zoom + 0.5 : 5); + + const handleZoomOutClick = () => + handleSliderChange({}, icon.zoom >= 1.5 ? icon.zoom - 0.5 : 1); + + const handleDeleteImage = () => setUploadedFile(null); + + const handleImageChange = throttle(() => { + if (editorRef) { + const newPreveiwImage = editorRef.getImageScaledToCanvas()?.toDataURL(); + setPreviewIcon(newPreveiwImage); + } + }, 300); + + useEffect(() => handleImageChange(), [icon]); + + return ( + +
+ + +
+ +
+ +
+ {t("Common:Delete")} +
+
+ +
+ + + +
+ + ); +}; + +export default IconCropper; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js new file mode 100644 index 0000000000..748c8e7e42 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js @@ -0,0 +1,71 @@ +import React from "react"; +import styled from "styled-components"; + +import { smallTablet } from "@docspace/components/utils/device"; + +import Tags from "@docspace/common/components/Tags"; + +const StyledPreviewTile = styled.div` + background: #ffffff; + width: 214px; + border: 1px solid #d0d5da; + height: 120px; + border-radius: 12px; + + @media ${smallTablet} { + display: none; + } + + .tile-header { + display: flex; + flex-direction: row; + align-items: center; + gap: 12px; + padding: 15px; + border-bottom: 1px solid #d0d5da; + + &-icon { + width: 32px; + height: 32px; + border: 1px solid #eceef1; + border-radius: 6px; + img { + height: 32px; + width: ${(props) => (props.isGeneratedPreview ? "32px" : "auto")}; + border-radius: 6px; + } + } + &-title { + font-weight: 600; + font-size: 16px; + line-height: 22px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + .tile-tags { + display: flex; + align-items: center; + justify-content: start; + padding: 15px; + } +`; + +const PreviewTile = ({ title, previewIcon, tags }) => { + return ( + +
+
+ {title} +
+
{title}
+
+
+ +
+ + ); +}; + +export default PreviewTile; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js index 72fcc29e41..47a90372f9 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js @@ -1,26 +1,50 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; -const StyledIconEditorWrapper = styled.div` - .use_modal-buttons_wrapper { - display: none; +import Dropzone from "./Dropzone"; + +const StyledIconEditor = styled.div` + .icon-editor { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: start; + gap: 16px; } `; -const StyledIconEditor = styled(AvatarEditor)` - margin: 0; -`; +import IconCropper from "./IconCropper"; +import PreviewTile from "./PreviewTile"; -import AvatarEditor from "@docspace/components/avatar-editor"; +const IconEditor = ({ t, isEdit, title, tags, icon, onChangeIcon }) => { + const [previewIcon, setPreviewIcon] = useState(null); + + const uploadedFile = icon.uploadedFile; + const setUploadedFile = (uploadedFile) => + onChangeIcon({ ...icon, uploadedFile }); -const IconEditor = () => { return ( - - - + + {uploadedFile && ( +
+ + + tag.name)} + /> +
+ )} + + ); }; From 78fe4291247f61b39df7782c49d35c071dcc7b2c Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:52:10 +0300 Subject: [PATCH 131/293] restructured params to templates --- .../sub-components/Params/InputParam.js | 46 +++++++++++++++++ .../sub-components/Params/StyledParam.js | 50 +++++++++++++++++++ .../sub-components/Params/ToggleParam.js | 42 ++++++++++++++++ 3 files changed, 138 insertions(+) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/StyledParam.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/ToggleParam.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js new file mode 100644 index 0000000000..125b98a573 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/InputParam.js @@ -0,0 +1,46 @@ +import React from "react"; +import styled from "styled-components"; +import { StyledParam } from "./StyledParam"; + +import Label from "@docspace/components/label"; +import TextInput from "@docspace/components/text-input"; + +const StyledInputParam = styled(StyledParam)` + flex-direction: column; + gap: 4px; +`; + +const InputParam = ({ + id, + title, + placeholder, + value, + onChange, + onFocus, + onBlur, +}) => { + return ( + +
+
+ + + ); +}; + +export default InputParam; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/StyledParam.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/StyledParam.js new file mode 100644 index 0000000000..8e814ecdb7 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/StyledParam.js @@ -0,0 +1,50 @@ +import styled, { css } from "styled-components"; + +const StyledParam = styled.div` + box-sizing: border-box; + display: flex; + width: 100%; + + ${(props) => + props.storageLocation + ? css`` + : props.folderName + ? css` + flex-direction: column; + gap: 4px; + ` + : ""} + + .set_room_params-info { + display: flex; + flex-direction: column; + gap: 4px; + + .set_room_params-info-title { + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + + .set_room_params-info-title-text { + font-weight: 600; + font-size: 13px; + line-height: 20px; + } + } + .set_room_params-info-description { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #a3a9ae; + } + } + + .set_room_params-toggle { + width: 28px; + height: 16px; + margin: 2px 0; + } +`; + +export { StyledParam }; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/ToggleParam.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/ToggleParam.js new file mode 100644 index 0000000000..2bf2aa44fa --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Params/ToggleParam.js @@ -0,0 +1,42 @@ +import ToggleButton from "@docspace/components/toggle-button"; +import React from "react"; +import styled from "styled-components"; +import { StyledParam } from "./StyledParam"; + +const StyledToggleParam = styled(StyledParam)` + flex-direction: row; + justify-content: space-between; + gap: 8px; + box-sizing: border-box; + max-width: 100%; + + .set_room_params-info-description { + box-sizing: border-box; + max-width: 100%; + } + + .set_room_params-toggle { + width: 28px; + min-width: 28px; + } +`; + +const ToggleParam = ({ title, description, isChecked, onCheckedChange }) => { + return ( + +
+
+
{title}
+
+
{description}
+
+ + + ); +}; + +export default ToggleParam; From 5aa2147bf396c3d3c7a8f967dc8472e50e97b5bc Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:52:30 +0300 Subject: [PATCH 132/293] added permanent settings --- .../PermanentSettings/PermanentSetting.js | 94 +++++++++++++++++++ .../sub-components/PermanentSettings/index.js | 80 ++++++++++++++++ 2 files changed, 174 insertions(+) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/PermanentSetting.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/PermanentSetting.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/PermanentSetting.js new file mode 100644 index 0000000000..d77b18bbfc --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/PermanentSetting.js @@ -0,0 +1,94 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { ReactSVG } from "react-svg"; + +import SecondaryInfoButton from "../SecondaryInfoButton"; + +const StyledPermanentSetting = styled.div` + box-sizing: border-box; + display: flex; + flex-direction: ${(props) => (props.isFull ? "column" : "row")}; + align-items: ${(props) => (props.isFull ? "start" : "center")}; + justify-content: ${(props) => (props.isFull ? "center" : "start")}; + gap: 4px; + + width: 100%; + max-width: 100%; + padding: 12px 16px; + + background: #f8f9f9; + border-radius: 6px; + + .permanent_setting-main_info { + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; + gap: 8px; + + &-icon { + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + + svg { + max-width: 100%; + max-height: 100%; + width: 16px; + height: 16px; + + ${(props) => + props.type === "privacy" && + css` + path { + fill: #35ad17; + } + `} + } + } + + &-title { + font-weight: 600; + font-size: 12px; + line-height: 16px; + } + } + + .permanent_setting-help_button { + margin-left: auto; + } + + .permanent_setting-secondary-info { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #555f65; + } +`; + +const PermanentSetting = ({ isFull, type, icon, title, content }) => { + return ( + +
+ +
{title}
+
+ + {isFull ? ( +
{content}
+ ) : ( +
+ +
+ )} + + ); +}; + +export default PermanentSetting; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js new file mode 100644 index 0000000000..998df6e4e0 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js @@ -0,0 +1,80 @@ +import React from "react"; +import styled from "styled-components"; +import { Trans } from "react-i18next"; + +import { + connectedCloudsTypeIcon as getProviderTypeIcon, + connectedCloudsTypeTitleTranslation as getProviderTypeTitle, +} from "@docspace/client/src/helpers/filesUtils"; + +import PermanentSetting from "./PermanentSetting"; + +const StyledPermanentSettings = styled.div` + display: flex; + flex-direction: row; + gap: 8px; + margin-top: -12px; +`; + +const PermanentSettings = ({ + t, + title, + isThirdparty, + storageLocation, + isPrivate, +}) => { + const thirdpartyTitle = isThirdparty + ? getProviderTypeTitle(storageLocation.providerKey, t) + : ""; + + const thirdpartyIcon = isThirdparty + ? getProviderTypeIcon(storageLocation.providerKey) + : ""; + + const thirdpartyFolderName = isThirdparty ? storageLocation.title : ""; + + const createThirdpartyPath = () => { + const path = storageLocation.parentId.split("|"); + path.shift(); + path.unshift(thirdpartyTitle); + path.push(thirdpartyFolderName); + return `(${path.join("/")})`; + }; + + const thirdpartyPath = isThirdparty ? createThirdpartyPath() : ""; + + return ( + + {isThirdparty && ( + + Files are stored in a third-party {{ thirdpartyTitle }} storage in + the \"{{ thirdpartyFolderName }}\" folder.{" "} + {{ thirdpartyPath }}" + + } + /> + )} + {isPrivate && ( + + )} + + ); +}; + +export default PermanentSettings; From d79e7bf452dbfb4dd49fd23469a7d7b01f0ee43e Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:53:16 +0300 Subject: [PATCH 133/293] fixed translations in data & removed thhirdparties --- .../dialogs/CreateEditRoomDialog/data/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 3c15ddf78d..47fefe4649 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -5,7 +5,7 @@ export const roomTypes = [ type: RoomsType.FillingFormsRoom, title: "FillingFormsRoomTitle", description: "FillingFormsRoomDescription", - defaultTag: "Files:FillingFormsRoom", + defaultTag: "Files:FillingFormRooms", withSecondaryInfo: true, secondaryInfo: "FillingFormsRoomSecondaryInfo", }, @@ -13,7 +13,7 @@ export const roomTypes = [ type: RoomsType.EditingRoom, title: "CollaborationRoomTitle", description: "CollaborationRoomDescription", - defaultTag: "Files:EditingRoom", + defaultTag: "Files:CollaborationRooms", withSecondaryInfo: true, secondaryInfo: "CollaborationRoomSecondaryInfo", }, @@ -21,7 +21,7 @@ export const roomTypes = [ type: RoomsType.ReviewRoom, title: "ReviewRoomTitle", description: "ReviewRoomDescription", - defaultTag: "Files:ReviewRoom", + defaultTag: "Files:ReviewRooms", withSecondaryInfo: true, secondaryInfo: "ReviewRoomSecondaryInfo", }, @@ -29,7 +29,7 @@ export const roomTypes = [ type: RoomsType.ReadOnlyRoom, title: "ViewOnlyRoomTitle", description: "ViewOnlyRoomDescription", - defaultTag: "Files:ReadOnlyRoom", + defaultTag: "Files:ViewOnlyRooms", withSecondaryInfo: true, secondaryInfo: "ViewOnlyRoomSecondaryInfo", }, @@ -37,7 +37,7 @@ export const roomTypes = [ type: RoomsType.CustomRoom, title: "CustomRoomTitle", description: "CustomRoomDescription", - defaultTag: "Files:CustomRoom", + defaultTag: "Files:CustomRooms", withSecondaryInfo: false, }, ]; From aad25382f2761a73d3477825341c9c6469c02eef Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:53:47 +0300 Subject: [PATCH 134/293] moved privacy setting to own component and added warning banner --- .../PrivacyLimitationsWarning.js | 78 +++++++++++++++++++ .../sub-components/IsPrivateParam/index.js | 27 +++++++ 2 files changed, 105 insertions(+) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/index.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js new file mode 100644 index 0000000000..eb17ff537b --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js @@ -0,0 +1,78 @@ +import React from "react"; +import styled from "styled-components"; +import { ReactSVG } from "react-svg"; + +const StyledPrivacyLimitationsWarning = styled.div` + box-sizing: border-box; + width: 100%; + display: flex; + flex-direction: column; + gap: 4px; + background: #f8f9f9; + border-radius: 6px; + padding: 12px 8px; + + .warning-title { + display: flex; + flex-direction: row; + gap: 8px; + &-icon-wrapper { + display: flex; + align-items: center; + .warning-title-icon { + width: 16px; + height: 14px; + path { + fill: #ed7309; + } + } + } + + &-text { + font-weight: 600; + font-size: 13px; + line-height: 20px; + color: #ed7309; + } + } + + .warning-description { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #555f65; + } + + .warning-link { + cursor: pointer; + margin-top: 2px; + font-weight: 600; + font-size: 13px; + line-height: 15px; + color: #555f65; + text-decoration: underline; + text-underline-offset: 1px; + } +`; + +const PrivacyLimitationsWarning = ({ t }) => { + return ( + +
+
+ +
+
{t("Common:Warning")}
+
+
+ {t("MakeRoomPrivateLimitationsWarningDescription")} +
+
{t("Common:LearnMore")}
+ + ); +}; + +export default PrivacyLimitationsWarning; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/index.js new file mode 100644 index 0000000000..ff741b9d63 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/index.js @@ -0,0 +1,27 @@ +import React from "react"; +import styled from "styled-components"; + +import ToggleParam from "../Params/ToggleParam"; +import PrivacyLimitationsWarning from "./PrivacyLimitationsWarning"; + +const StyledIsPrivateParam = styled.div` + display: flex; + flex-direction: column; + gap: 12px; +`; + +const IsPrivateParam = ({ t, isPrivate, onChangeIsPrivate }) => { + return ( + + + {isPrivate && } + + ); +}; + +export default IsPrivateParam; From 95be5666fd2eab71966441c9259edd75261105d3 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:54:24 +0300 Subject: [PATCH 135/293] updated tagInput and tagList --- .../sub-components/TagInput/TagList.js | 2 +- .../sub-components/TagInput/index.js | 22 +++++-------------- 2 files changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js index 5ab899e976..130c635b62 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js @@ -3,7 +3,7 @@ import React from "react"; import styled from "styled-components"; const StyledTagList = styled.div` - margin-top: 2px; + margin-top: 12px; display: flex; flex-direction: row; gap: 4px; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js index c6a39c83d3..4b3288d649 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js @@ -1,12 +1,11 @@ import React, { useState, useRef } from "react"; import styled from "styled-components"; -import Label from "@docspace/components/label"; -import TextInput from "@docspace/components/text-input"; import TagList from "./TagList"; import DropDownItem from "@docspace/components/drop-down-item"; import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; import { isMobile } from "@docspace/components/utils/device"; +import InputParam from "../Params/InputParam"; const StyledTagInput = styled.div` .set_room_params-tag_input { @@ -112,24 +111,14 @@ const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { return ( -
-
- { )} + ); From f0351ceec0f09f0d6cde20ea80345cc68056d385 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:54:46 +0300 Subject: [PATCH 136/293] added roomLogo api methods --- packages/common/api/rooms/index.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/common/api/rooms/index.js b/packages/common/api/rooms/index.js index 30e53b4e52..863d0b91bb 100644 --- a/packages/common/api/rooms/index.js +++ b/packages/common/api/rooms/index.js @@ -167,3 +167,28 @@ export function getTags() { return res; }); } + +export function uploadRoomLogo(data) { + const options = { + method: "post", + url: `/files/logos`, + data, + }; + + return request(options).then((res) => { + console.log(res); + return res; + }); +} + +export function addLogoToRoom(id, data) { + const options = { + method: "post", + url: `/files/rooms/${id}/logo`, + data, + }; + + return request(options).then((res) => { + return res; + }); +} From 2acc22b17f9b09d301bec8fa805b91be9cd70a18 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:55:04 +0300 Subject: [PATCH 137/293] added roomLogo methods to filesStore --- packages/client/src/store/FilesStore.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 975e70c053..599e8eef22 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -1599,6 +1599,14 @@ class FilesStore { return api.rooms.removeTagsFromRoom(id, tagArray); } + uploadRoomLogo(formData) { + return api.rooms.uploadRoomLogo(formData); + } + + addLogoToRoom(id, icon) { + return api.rooms.addLogoToRoom(id, icon); + } + setFile = (file) => { const fileIndex = this.files.findIndex((f) => f.id === file.id); if (fileIndex !== -1) this.files[fileIndex] = file; From 2c2ae838b30bd061ba177a6c10e15fa8d2b4ed0c Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:55:24 +0300 Subject: [PATCH 138/293] updatedEditRoomEvent --- .../components/GlobalEvents/EditRoomEvent.js | 67 +++++++++++++++++-- 1 file changed, 60 insertions(+), 7 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/EditRoomEvent.js b/packages/client/src/components/GlobalEvents/EditRoomEvent.js index 80f2bb9ac0..0c5847cc11 100644 --- a/packages/client/src/components/GlobalEvents/EditRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/EditRoomEvent.js @@ -12,44 +12,80 @@ const EditRoomEvent = ({ addTagsToRoom, removeTagsFromRoom, + uploadRoomLogo, + addLogoToRoom, + createTag, fetchTags, currrentFolderId, updateCurrentFolder, }) => { - const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Home"]); + const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]); const [fetchedTags, setFetchedTags] = useState([]); + const [fetchedImage, setFetchedImage] = useState([]); const [isLoading, setIsLoading] = useState(false); + console.log(item); + const roomId = item.id; const startTags = Object.values(item.tags); const startObjTags = startTags.map((tag, i) => ({ id: i, name: tag })); + const fetchedRoomParams = { title: item.title, type: item.roomType, tags: startObjTags, - icon: item.icon, + isThirdparty: !!item.providerKey, + storageLocation: { + title: item.title, + parentId: item.parentId, + providerKey: item.providerKey, + }, + isPrivate: false, + icon: { + uploadedFile: undefined, //fetchedImage, + tmpFile: "", + x: 0.5, + y: 0.5, + width: 216, + height: 216, + zoom: 1, + }, }; const onSave = async (roomParams) => { console.log(roomParams); + const editRoomParams = { - // currently only title can be chaned - title: roomParams.title || "New room", + title: roomParams.title || t("Files:NewRoom"), }; const tags = roomParams.tags.map((tag) => tag.name); const newTags = roomParams.tags.filter((t) => t.isNew).map((t) => t.name); const removedTags = startTags.filter((sT) => !tags.includes(sT)); - console.log(tags, newTags, removedTags); + + const uploadLogoData = new FormData(); + uploadLogoData.append(0, roomParams.icon.uploadedFile); try { setIsLoading(true); + await editRoom(roomId, editRoomParams); + for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]); + await addTagsToRoom(roomId, tags); + await removeTagsFromRoom(roomId, removedTags); + + if (roomParams.icon.uploadedFile) + await uploadRoomLogo(uploadLogoData).then((response) => { + const { x, y, width, height } = roomParams.icon; + console.log(x, y, width, height); + addLogoToRoom({ tmpFile: response.data, x, y, width, height }); + }); + await updateCurrentFolder(null, currrentFolderId); } catch (err) { console.log(err); @@ -60,8 +96,16 @@ const EditRoomEvent = ({ }; useEffect(async () => { - let tags = await fetchTags(); + const tags = await fetchTags(); setFetchedTags(tags); + + await fetch( + "https://wow.zamimg.com/modelviewer/tbc/webthumbs/outfit/94/70494.webp" + ).then((res) => { + const buf = res.arrayBuffer(); + const file = new File([buf], "fetchedImage", { type: "image/png" }); + setFetchedImage(file[0]); + }); }, []); return ( @@ -79,7 +123,13 @@ const EditRoomEvent = ({ export default inject( ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { - const { editRoom, addTagsToRoom, removeTagsFromRoom } = filesStore; + const { + editRoom, + addTagsToRoom, + removeTagsFromRoom, + uploadRoomLogo, + addLogoToRoom, + } = filesStore; const { createTag, fetchTags } = tagsStore; const { id: currrentFolderId } = selectedFolderStore; @@ -89,6 +139,9 @@ export default inject( addTagsToRoom, removeTagsFromRoom, + uploadRoomLogo, + addLogoToRoom, + createTag, fetchTags, From a2f32969e4eb9df9a2c35941c076ebd78f51983a Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:55:37 +0300 Subject: [PATCH 139/293] updatedCreateRoomEvent --- .../GlobalEvents/CreateRoomEvent.js | 68 +++++++++++++++---- 1 file changed, 54 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js index 2806dd9fca..ce39ca5acd 100644 --- a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js @@ -11,8 +11,12 @@ const CreateRoomEvent = ({ createRoomInThirdpary, createTag, addTagsToRoom, + uploadRoomLogo, + addLogoToRoom, fetchTags, + providers, + currrentFolderId, updateCurrentFolder, }) => { @@ -20,31 +24,47 @@ const CreateRoomEvent = ({ "CreateEditRoomDialog", "Common", "Files", - "Home", + "ToastHeaders", ]); const [fetchedTags, setFetchedTags] = useState([]); const [isLoading, setIsLoading] = useState(false); + console.log(providers); + const onCreate = async (roomParams) => { console.log(roomParams); - const createRoomParams = { + + const createRoomData = { roomType: roomParams.type, - title: roomParams.title || t("Home:NewRoom"), + title: roomParams.title || t("Files:NewRoom"), }; - const tags = roomParams.tags.map((tag) => tag.name); - const newTags = roomParams.tags.filter((t) => t.isNew).map((t) => t.name); - console.log(tags, newTags); + const addTagsData = roomParams.tags.map((tag) => tag.name); + + const createTagsData = roomParams.tags + .filter((t) => t.isNew) + .map((t) => t.name); + + const uploadLogoData = new FormData(); + uploadLogoData.append(0, roomParams.icon.uploadedFile); try { setIsLoading(true); - const room = await createRoom(createRoomParams); - console.log(room); - for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]); - await addTagsToRoom(room.id, tags); + + const room = await createRoom(createRoomData); + + for (let i = 0; i < createTagsData.length; i++) + await createTag(createTagsData[i]); + + await addTagsToRoom(room.id, addTagsData); + + if (roomParams.icon.uploadedFile) + await uploadRoomLogo(uploadLogoData).then((response) => { + const { x, y, width, height } = roomParams.icon; + addLogoToRoom({ tmpFile: response.data, x, y, width, height }); + }); + await updateCurrentFolder(null, currrentFolderId); - // let thirpartyFolderId = "sbox-1-|ПАПКА ОТ ДОКСПЕЙС"; - // createRoomInThirdpary(thirpartyFolderId, createRoomParams); } catch (err) { console.log(err); } finally { @@ -66,24 +86,44 @@ const CreateRoomEvent = ({ onCreate={onCreate} fetchedTags={fetchedTags} isLoading={isLoading} + providers={providers} /> ); }; export default inject( - ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => { - const { createRoom, createRoomInThirdpary, addTagsToRoom } = filesStore; + ({ + filesStore, + tagsStore, + filesActionsStore, + selectedFolderStore, + settingsStore, + }) => { + const { + createRoom, + createRoomInThirdpary, + addTagsToRoom, + uploadRoomLogo, + addLogoToRoom, + } = filesStore; const { createTag, fetchTags } = tagsStore; const { id: currrentFolderId } = selectedFolderStore; const { updateCurrentFolder } = filesActionsStore; + const { providers } = settingsStore.thirdPartyStore; + return { createRoom, createRoomInThirdpary, createTag, fetchTags, addTagsToRoom, + uploadRoomLogo, + addLogoToRoom, + + providers, + currrentFolderId, updateCurrentFolder, }; From f99806f51eecb1fab72ea59a5bcdfd94e77736a7 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:56:28 +0300 Subject: [PATCH 140/293] update of ThirdPartyStorage --- .../sub-components/StorageLocation/index.js | 39 --------- .../ThirpartyComboBox.js | 47 +++++----- .../sub-components/ThirdPartyStorage/index.js | 85 +++++++++++++++++++ 3 files changed, 105 insertions(+), 66 deletions(-) delete mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js rename packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/{StorageLocation => ThirdPartyStorage}/ThirpartyComboBox.js (80%) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js deleted file mode 100644 index 0086f46d0e..0000000000 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/index.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; - -import Text from "@docspace/components/text"; - -import { StyledParam } from "../StyledParam"; -import ThirpartyComboBox from "./ThirpartyComboBox"; -import SecondaryInfoButton from "../SecondaryInfoButton"; - -const StorageLocation = ({ - t, - roomParams, - setRoomParams, - setIsScrollLocked, -}) => { - return ( - -
-
- - {t("StorageLocationTitle")} - - -
-
- {t("StorageLocationDescription")} -
-
- - - - ); -}; - -export default StorageLocation; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/ThirpartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js similarity index 80% rename from packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/ThirpartyComboBox.js rename to packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js index 0b659fd175..cf863c3ab1 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StorageLocation/ThirpartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js @@ -2,7 +2,6 @@ import React, { useState, useRef } from "react"; import styled from "styled-components"; import { ReactSVG } from "react-svg"; -import { thirparties } from "../../data"; import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; import { isHugeMobile } from "@docspace/components/utils/device"; @@ -12,6 +11,7 @@ import Text from "@docspace/components/text"; import Button from "@docspace/components/button"; import DropDownItem from "@docspace/components/drop-down-item"; import Checkbox from "@docspace/components/checkbox"; +import { connectedCloudsTypeTitleTranslation } from "@docspace/client/src/helpers/filesUtils"; const StyledStorageLocation = styled.div` display: flex; @@ -41,7 +41,6 @@ const StyledStorageLocation = styled.div` font-weight: 400; font-size: 13px; line-height: 20px; - color: ${(props) => (props.isGrayLabel ? "#a3a9ae" : "#333333")}; } &-expander { @@ -77,14 +76,23 @@ const StyledStorageLocation = styled.div` const ThirpartyComboBox = ({ t, - roomParams, - setRoomParams, + providers, + storageLocation, + setChangeStorageLocation, setIsScrollLocked, }) => { const dropdownRef = useRef(null); - const [isGrayLabel, setIsGrayLabel] = useState(true); + + const thirdparties = providers.map((provider, i) => ({ + id: i, + title: connectedCloudsTypeTitleTranslation(provider.provider_key, t), + })); + + console.log(thirdparties); const [isOpen, setIsOpen] = useState(false); + const [dropdownDirection, setDropdownDirection] = useState("bottom"); + const toggleIsOpen = () => { if (isOpen) setIsScrollLocked(false); else { @@ -94,27 +102,18 @@ const ThirpartyComboBox = ({ setIsOpen(!isOpen); }; - const [dropdownDirection, setDropdownDirection] = useState("bottom"); - const setStorageLocaiton = (thirparty) => { - setIsGrayLabel(false); - setRoomParams({ ...roomParams, storageLocation: thirparty }); + setChangeStorageLocation(thirparty); setIsOpen(false); setIsScrollLocked(false); }; - const setRememberStorageLocation = () => - setRoomParams({ - ...roomParams, - rememberStorageLocation: !roomParams.rememberStorageLocation, - }); - const calculateDropdownDirection = () => { const { top: offsetTop } = DomHelpers.getOffset(dropdownRef.current); const offsetBottom = window.innerHeight - offsetTop; - const neededHeightDesktop = Math.min(thirparties.length * 32 + 16, 404); - const neededHeightMobile = Math.min(thirparties.length * 32 + 16, 180); + const neededHeightDesktop = Math.min(thirdparties.length * 32 + 16, 404); + const neededHeightMobile = Math.min(thirdparties.length * 32 + 16, 180); const neededheight = isHugeMobile() ? neededHeightMobile : neededHeightDesktop; @@ -123,14 +122,15 @@ const ThirpartyComboBox = ({ }; return ( - +
- {roomParams.storageLocation?.title || "Select"} + {storageLocation?.title || + t("ThirdPartyStorageComboBoxPlaceholder")} - {thirparties.map((thirdparty) => ( + {thirdparties.map((thirdparty) => ( - - ); }; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js new file mode 100644 index 0000000000..d041ed45b5 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js @@ -0,0 +1,85 @@ +import Checkbox from "@docspace/components/checkbox"; +import React from "react"; +import styled from "styled-components"; +import { StyledParam } from "../Params/StyledParam"; + +import ToggleParam from "../Params/ToggleParam"; +import ThirpartyComboBox from "./ThirpartyComboBox"; + +import Toast from "@docspace/components/toast"; +import toastrHelper from "@docspace/client/src/helpers/toastr"; + +const StyledThirdPartyStorage = styled(StyledParam)` + flex-direction: column; + gap: 12px; +`; + +const ThirdPartyStorage = ({ + t, + providers, + isThirdparty, + onChangeIsThirdparty, + storageLocation, + setChangeStorageLocation, + rememberThirdpartyStorage, + onChangeRememberThirdpartyStorage, + setIsScrollLocked, +}) => { + const checkForProviders = () => { + if (providers.length) onChangeIsThirdparty(); + else + toastrHelper.warning( +
+
{t("ThirdPartyStorageNoStorageAlert")}
+ Third-party services +
, + "Alert", + 5000, + true, + false + ); + }; + + return ( + + {/*
+
+ + {t("ThirdPartyStorageTitle")} + +
+
+ {t("ThirdPartyStorageDescription")} +
+
*/} + + + + {isThirdparty && ( + + )} + + {isThirdparty && storageLocation && ( + + )} + + ); +}; + +export default ThirdPartyStorage; From e86d45d88d60897739071f41acbd45b57596b1bf Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:56:54 +0300 Subject: [PATCH 141/293] removed unwanted file --- .../sub-components/StyledParam.js | 58 ------------------- 1 file changed, 58 deletions(-) delete mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js deleted file mode 100644 index 82e917b804..0000000000 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/StyledParam.js +++ /dev/null @@ -1,58 +0,0 @@ -import styled, { css } from "styled-components"; - -const StyledParam = styled.div` - box-sizing: border-box; - display: flex; - width: 100%; - - ${(props) => - props.isPrivate - ? css` - flex-direction: row; - justify-content: space-between; - ` - : props.storageLocation - ? css` - flex-direction: column; - gap: 12px; - ` - : props.folderName - ? css` - flex-direction: column; - gap: 4px; - ` - : ""} - - .set_room_params-info { - display: flex; - flex-direction: column; - gap: 4px; - - .set_room_params-info-title { - display: flex; - flex-direction: row; - align-items: center; - gap: 6px; - - .set_room_params-info-title-text { - font-weight: 600; - font-size: 13px; - line-height: 20px; - } - } - .set_room_params-info-description { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #a3a9ae; - } - } - - .set_room_params-toggle { - width: 28px; - height: 16px; - margin: 2px 0; - } -`; - -export { StyledParam }; From ec286077c29a2e833b364b89da20535cafa97470 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:57:33 +0300 Subject: [PATCH 142/293] updated and fixed SetRoomParams --- .../sub-components/SetRoomParams.js | 183 +++++++++--------- 1 file changed, 94 insertions(+), 89 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index 32256e199b..6c413672bd 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -1,40 +1,24 @@ import React from "react"; import styled from "styled-components"; import RoomTypeDropdown from "./RoomTypeDropdown"; -import StorageLocation from "./StorageLocation"; +import ThirdPartyStorage from "./ThirdPartyStorage"; import TextInput from "@docspace/components/text-input"; import Label from "@docspace/components/label"; -import ToggleButton from "@docspace/components/toggle-button"; -import Text from "@docspace/components/text"; import TagInput from "./TagInput"; -import { StyledParam } from "./StyledParam"; import RoomType from "./RoomType"; import { roomTypes } from "../data"; -import SecondaryInfoButton from "./SecondaryInfoButton"; import IconEditor from "./IconEditor"; +import PermanentSettings from "./PermanentSettings"; +import ToggleParam from "./Params/ToggleParam"; +import InputParam from "./Params/InputParam"; +import IsPrivateParam from "./IsPrivateParam"; const StyledSetRoomParams = styled.div` display: flex; flex-direction: column; width: 100%; gap: 20px; - - .set_room_params-input { - display: flex; - flex-direction: column; - gap: 4px; - } -`; - -const StyledIconEditorWrapper = styled.div` - .use_modal-avatar_editor_body { - margin: 0; - } - - .use_modal-buttons_wrapper { - display: none; - } `; const SetRoomParams = ({ @@ -45,6 +29,7 @@ const SetRoomParams = ({ tagHandler, setIsScrollLocked, isEdit, + providers, }) => { const onChangeName = (e) => setRoomParams({ ...roomParams, title: e.target.value }); @@ -52,8 +37,22 @@ const SetRoomParams = ({ const onChangeIsPrivate = () => setRoomParams({ ...roomParams, isPrivate: !roomParams.isPrivate }); - const onChangeThidpartyFolderName = (e) => - setRoomParams({ ...roomParams, thirdpartyFolderName: e.target.value }); + // const onChangeThidpartyFolderName = (e) => + // setRoomParams({ ...roomParams, thirdpartyFolderName: e.target.value }); + + const onChangeIcon = (icon) => setRoomParams({ ...roomParams, icon: icon }); + + const onChangeIsThirdparty = () => + setRoomParams({ ...roomParams, isThirdparty: !roomParams.isThirdparty }); + + const setChangeStorageLocation = (storageLocation) => + setRoomParams({ ...roomParams, storageLocation }); + + const onChangeRememberThirdpartyStorage = () => + setRoomParams({ + ...roomParams, + rememberThirdpartyStorage: !roomParams.rememberThirdpartyStorage, + }); const [currentRoomTypeData] = roomTypes.filter( (room) => room.type === roomParams.type @@ -71,22 +70,23 @@ const SetRoomParams = ({ /> )} -
-
+ )} + + - -
-
- - {t("MakeRoomPrivateTitle")} - - -
-
- {t("MakeRoomPrivateDescription")} -
-
- - + )} - + )} + + {/* {!isEdit && roomParams.isThirdparty && ( + +
+
+ + {`${t("FolderNameTitle")}:`} + +
+
+ {t("FolderNameDescription")} +
+
+ +
+ +
+ + )} */} + + - - -
-
- - {`${t("FolderNameTitle")}:`} - -
-
- {t("FolderNameDescription")} -
-
- -
- -
- - - ); }; From d772e1eb13ba53cfd7a1a991e9de2725cb6ada1b Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 15:58:03 +0300 Subject: [PATCH 143/293] removed not needed data --- .../CreateEditRoomDialog/data/index.js | 27 ------------------- 1 file changed, 27 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 47fefe4649..551a6431b7 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -41,30 +41,3 @@ export const roomTypes = [ withSecondaryInfo: false, }, ]; - -export const thirparties = [ - { - id: 1, - title: "Onlyoffice DocSpace", - }, - { - id: 2, - title: "DropBox", - }, - { - id: 3, - title: "Google Drive", - }, - { - id: 4, - title: "OneDrive", - }, - { - id: 5, - title: "Nextcloud", - }, - { - id: 6, - title: "Yandex Disk", - }, -]; From c65e01a988cf5500589f021c9acdb8d76b74c112 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 15 Aug 2022 17:22:50 +0300 Subject: [PATCH 144/293] Web: Files: fixed fetch files --- .../Body/TilesView/sub-components/InfiniteGrid.js | 4 ++-- packages/components/infinite-loader/Grid.js | 9 ++++++++- packages/components/infinite-loader/List.js | 9 ++++++++- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js index fcd092fba7..4aeecbb3ae 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js @@ -142,7 +142,7 @@ const InfiniteGrid = (props) => { addItemToList(listKey, otherClassName); } - //console.log("InfiniteGrid render", list); + // console.log("InfiniteGrid render", list); return ( { countTilesInRow={countTilesInRow} filesLength={filesLength} hasMoreFiles={hasMoreFiles} - itemCount={filterTotal / countTilesInRow} //TODO: - count headers + itemCount={hasMoreFiles ? list.length + 1 : list.length} loadMoreItems={fetchMoreFiles} className={`TileList ${className}`} selectedFolderId={selectedFolderId} diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index 5369095601..c5186856a3 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -1,4 +1,4 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useEffect } from "react"; import { InfiniteLoader, WindowScroller } from "react-virtualized"; import { StyledList } from "./StyledInfiniteLoader"; @@ -13,6 +13,12 @@ const GridComponent = ({ className, scroll, }) => { + const loaderRef = React.createRef(); + + useEffect(() => { + setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0); + }, [loaderRef]); + const isItemLoaded = useCallback( ({ index }) => { return !hasMoreFiles || (index + 1) * countTilesInRow < filesLength; @@ -49,6 +55,7 @@ const GridComponent = ({ isRowLoaded={isItemLoaded} rowCount={itemCount} loadMoreRows={loadMoreItems} + ref={loaderRef} > {({ onRowsRendered, registerChild }) => ( diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 7d7bc0e3f3..f7c68f7082 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -1,4 +1,4 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useEffect } from "react"; import { InfiniteLoader, WindowScroller } from "react-virtualized"; import Loaders from "@docspace/common/components/Loaders"; import { StyledList } from "./StyledInfiniteLoader"; @@ -18,6 +18,12 @@ const ListComponent = ({ scroll, infoPanelVisible, }) => { + const loaderRef = React.createRef(); + + useEffect(() => { + setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0); + }, [loaderRef]); + const renderRow = ({ key, index, style }) => { const isLoaded = isItemLoaded({ index: index + 2 }); if (!isLoaded) return getLoader(style, key); @@ -87,6 +93,7 @@ const ListComponent = ({ isRowLoaded={isItemLoaded} rowCount={itemCount} loadMoreRows={loadMoreItems} + ref={loaderRef} > {({ onRowsRendered, registerChild }) => ( From 5d3c98ea91ece22cb2a2cdefd5012a96297d4a40 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 15 Aug 2022 17:41:39 +0300 Subject: [PATCH 145/293] Web: Files: fixed fetch files --- .../Body/RowsView/FilesRowContainer.js | 51 +++++++------- .../Section/Body/TableView/TableContainer.js | 69 ++++++++++--------- packages/components/infinite-loader/Grid.js | 7 +- packages/components/infinite-loader/List.js | 7 +- packages/components/row-container/index.js | 2 + .../components/table-container/TableBody.js | 2 + 6 files changed, 77 insertions(+), 61 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js index 8d0b1ab26e..aae1dd5726 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js @@ -68,6 +68,7 @@ const FilesRowContainer = ({ fetchMoreFiles, hasMoreFiles, isRooms, + selectedFolderId, }) => { useEffect(() => { if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; @@ -93,6 +94,7 @@ const FilesRowContainer = ({ hasMoreFiles={hasMoreFiles} draggable useReactWindow + selectedFolderId={selectedFolderId} > {filesList.map((item, index) => ( { - const { - filesList, - viewAs, - setViewAs, - filterTotal, - fetchMoreFiles, - hasMoreFiles, - } = filesStore; - const { isVisible: infoPanelVisible } = auth.infoPanelStore; - const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; +export default inject( + ({ filesStore, auth, treeFoldersStore, selectedFolderStore }) => { + const { + filesList, + viewAs, + setViewAs, + filterTotal, + fetchMoreFiles, + hasMoreFiles, + } = filesStore; + const { isVisible: infoPanelVisible } = auth.infoPanelStore; + const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; - const isRooms = isRoomsFolder || isArchiveFolder; + const isRooms = isRoomsFolder || isArchiveFolder; - return { - filesList, - viewAs, - setViewAs, - infoPanelVisible, - filterTotal, - fetchMoreFiles, - hasMoreFiles, - isRooms, - }; -})(observer(FilesRowContainer)); + return { + filesList, + viewAs, + setViewAs, + infoPanelVisible, + filterTotal, + fetchMoreFiles, + hasMoreFiles, + isRooms, + selectedFolderId: selectedFolderStore.id, + }; + } +)(observer(FilesRowContainer)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index ab51837173..38a93a044f 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -122,6 +122,7 @@ const Table = ({ hasMoreFiles, filterTotal, isRooms, + selectedFolderId, }) => { const [tagCount, setTagCount] = React.useState(null); @@ -206,6 +207,7 @@ const Table = ({ useReactWindow infoPanelVisible={infoPanelVisible} columnInfoPanelStorageName={columnInfoPanelStorageName} + selectedFolderId={selectedFolderId} > {filesList.map((item, index) => { return index === 0 && item.isRoom ? ( @@ -246,39 +248,42 @@ const Table = ({ ); }; -export default inject(({ filesStore, treeFoldersStore, auth }) => { - const { isVisible: infoPanelVisible } = auth.infoPanelStore; +export default inject( + ({ filesStore, treeFoldersStore, auth, selectedFolderStore }) => { + const { isVisible: infoPanelVisible } = auth.infoPanelStore; - const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; + const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; - const isRooms = - isRoomsFolder || - isArchiveFolder || - window.location.href.includes("/rooms?"); + const isRooms = + isRoomsFolder || + isArchiveFolder || + window.location.href.includes("/rooms?"); - const { - filesList, - viewAs, - setViewAs, - setFirsElemChecked, - setHeaderBorder, - fetchMoreFiles, - hasMoreFiles, - filterTotal, - } = filesStore; + const { + filesList, + viewAs, + setViewAs, + setFirsElemChecked, + setHeaderBorder, + fetchMoreFiles, + hasMoreFiles, + filterTotal, + } = filesStore; - return { - filesList, - viewAs, - setViewAs, - setFirsElemChecked, - setHeaderBorder, - theme: auth.settingsStore.theme, - userId: auth.userStore.user.id, - infoPanelVisible, - fetchMoreFiles, - hasMoreFiles, - filterTotal, - isRooms, - }; -})(observer(Table)); + return { + filesList, + viewAs, + setViewAs, + setFirsElemChecked, + setHeaderBorder, + theme: auth.settingsStore.theme, + userId: auth.userStore.user.id, + infoPanelVisible, + fetchMoreFiles, + hasMoreFiles, + filterTotal, + isRooms, + selectedFolderId: selectedFolderStore.id, + }; + } +)(observer(Table)); diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index c5186856a3..7695332c53 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useCallback, useEffect, createRef } from "react"; import { InfiniteLoader, WindowScroller } from "react-virtualized"; import { StyledList } from "./StyledInfiniteLoader"; @@ -12,12 +12,13 @@ const GridComponent = ({ children, className, scroll, + selectedFolderId, }) => { - const loaderRef = React.createRef(); + const loaderRef = createRef(); useEffect(() => { setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0); - }, [loaderRef]); + }, [loaderRef, selectedFolderId]); const isItemLoaded = useCallback( ({ index }) => { diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index f7c68f7082..81b78f7f75 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useCallback, useEffect, createRef } from "react"; import { InfiniteLoader, WindowScroller } from "react-virtualized"; import Loaders from "@docspace/common/components/Loaders"; import { StyledList } from "./StyledInfiniteLoader"; @@ -17,12 +17,13 @@ const ListComponent = ({ className, scroll, infoPanelVisible, + selectedFolderId, }) => { - const loaderRef = React.createRef(); + const loaderRef = createRef(); useEffect(() => { setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0); - }, [loaderRef]); + }, [loaderRef, selectedFolderId]); const renderRow = ({ key, index, style }) => { const isLoaded = isItemLoaded({ index: index + 2 }); diff --git a/packages/components/row-container/index.js b/packages/components/row-container/index.js index 34cc2cf707..54e504fe67 100644 --- a/packages/components/row-container/index.js +++ b/packages/components/row-container/index.js @@ -19,6 +19,7 @@ class RowContainer extends React.PureComponent { itemCount, fetchMoreFiles, hasMoreFiles, + selectedFolderId, } = this.props; return ( @@ -39,6 +40,7 @@ class RowContainer extends React.PureComponent { loadMoreItems={fetchMoreFiles} itemSize={itemHeight} onScroll={onScroll} + selectedFolderId={selectedFolderId} > {children} diff --git a/packages/components/table-container/TableBody.js b/packages/components/table-container/TableBody.js index 630a4d3eab..a88fd17f1b 100644 --- a/packages/components/table-container/TableBody.js +++ b/packages/components/table-container/TableBody.js @@ -15,6 +15,7 @@ const TableBody = (props) => { useReactWindow, onScroll, infoPanelVisible, + selectedFolderId, } = props; return useReactWindow ? ( @@ -34,6 +35,7 @@ const TableBody = (props) => { itemSize={itemHeight} onScroll={onScroll} infoPanelVisible={infoPanelVisible} + selectedFolderId={selectedFolderId} > {children} From 0a686b6731e6f043313ec710eee87e3dd89f8f03 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 19:06:46 +0300 Subject: [PATCH 146/293] added react-avatar-editor dependency --- packages/client/package.json | 3 ++- yarn.lock | 46 ++++++++++++++++++++++++++++++++++-- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index 3a7fcd9da7..064ef5c3fb 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -45,7 +45,8 @@ "react-hotkeys-hook": "^3.4.4", "react-markdown": "^7.0.1", "react-smartbanner": "^5.1.4", - "react-string-format": "^0.1.4" + "react-string-format": "^0.1.4", + "react-avatar-editor": "^13.0.0" }, "devDependencies": { "@babel/core": "^7.15.5", diff --git a/yarn.lock b/yarn.lock index a0090dbf12..96f14eddcc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1425,6 +1425,22 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-runtime@npm:^7.12.1": + version: 7.18.10 + resolution: "@babel/plugin-transform-runtime@npm:7.18.10" + dependencies: + "@babel/helper-module-imports": ^7.18.6 + "@babel/helper-plugin-utils": ^7.18.9 + babel-plugin-polyfill-corejs2: ^0.3.2 + babel-plugin-polyfill-corejs3: ^0.5.3 + babel-plugin-polyfill-regenerator: ^0.4.0 + semver: ^6.3.0 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 98c18680b4258b8bd3f04926b73c72ae77037d5ea5b50761ca35de15896bf0d04bedabde39a81be56dbd4859c96ffaa7103fbefb5d5b58a36e0a80381e4a146c + languageName: node + linkType: hard + "@babel/plugin-transform-runtime@npm:^7.15.0, @babel/plugin-transform-runtime@npm:^7.18.6": version: 7.18.9 resolution: "@babel/plugin-transform-runtime@npm:7.18.9" @@ -7522,7 +7538,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.3.1": +"babel-plugin-polyfill-corejs2@npm:^0.3.1, babel-plugin-polyfill-corejs2@npm:^0.3.2": version: 0.3.2 resolution: "babel-plugin-polyfill-corejs2@npm:0.3.2" dependencies: @@ -7547,7 +7563,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs3@npm:^0.5.2": +"babel-plugin-polyfill-corejs3@npm:^0.5.2, babel-plugin-polyfill-corejs3@npm:^0.5.3": version: 0.5.3 resolution: "babel-plugin-polyfill-corejs3@npm:0.5.3" dependencies: @@ -7570,6 +7586,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-regenerator@npm:^0.4.0": + version: 0.4.0 + resolution: "babel-plugin-polyfill-regenerator@npm:0.4.0" + dependencies: + "@babel/helper-define-polyfill-provider": ^0.3.2 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 699aa9c0dc5a2259d7fa52b26613fa1e782439eee54cd98506991f87fddf0c00eec6c5b1917edf586c170731d9e318903bc41210225a691e7bb8087652bbda94 + languageName: node + linkType: hard + "babel-plugin-react-docgen@npm:^4.2.1": version: 4.2.1 resolution: "babel-plugin-react-docgen@npm:4.2.1" @@ -10484,6 +10511,7 @@ __metadata: version: 0.0.0-use.local resolution: "docspace@workspace:." dependencies: + react-avatar-editor: ^13.0.0 shx: ^0.3.3 terser: ^5.8.0 languageName: unknown @@ -19970,6 +19998,20 @@ __metadata: languageName: node linkType: hard +"react-avatar-editor@npm:^13.0.0": + version: 13.0.0 + resolution: "react-avatar-editor@npm:13.0.0" + dependencies: + "@babel/plugin-transform-runtime": ^7.12.1 + "@babel/runtime": ^7.12.5 + prop-types: ^15.7.2 + peerDependencies: + react: ^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + checksum: e23b717c5a70f4ae2dbbdba359b83a15c89d758ef388c6a1114d3c355edfc423bfdb72b5667822bfa97f6903656d969ee8b324fc09c15d956c84bb71ee16195e + languageName: node + linkType: hard + "react-clientside-effect@npm:^1.2.6": version: 1.2.6 resolution: "react-clientside-effect@npm:1.2.6" From 218b94b5b627c641401c86f10c08808ebff2220f Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 19:07:59 +0300 Subject: [PATCH 147/293] commented out unfinished room params --- .../sub-components/SetRoomParams.js | 40 +++---------------- 1 file changed, 5 insertions(+), 35 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index 6c413672bd..3edeb7e48d 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -94,15 +94,15 @@ const SetRoomParams = ({ setIsScrollLocked={setIsScrollLocked} /> - {!isEdit && ( + {/* {!isEdit && ( - )} + )} */} - {!isEdit && ( + {/* {!isEdit && ( - )} - - {/* {!isEdit && roomParams.isThirdparty && ( - -
-
- - {`${t("FolderNameTitle")}:`} - -
-
- {t("FolderNameDescription")} -
-
- -
- -
- )} */} - + /> */} ); }; From 6d7dd140cdea2ae10cb05821007bf1e21f637b15 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 15 Aug 2022 19:13:15 +0300 Subject: [PATCH 148/293] commented out react-avatar-editor dependancy --- .../sub-components/IconEditor/IconCropper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js index 32b58b06d3..cd1090037d 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js @@ -3,7 +3,7 @@ import styled from "styled-components"; import { ReactSVG } from "react-svg"; import throttle from "lodash/throttle"; -import AvatarEditor from "react-avatar-editor"; +// import AvatarEditor from "react-avatar-editor"; import Slider from "@docspace/components/slider"; import IconButton from "@docspace/components/icon-button"; From fe37848cdc52510829542f7c4eb31a56df04f338 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 16 Aug 2022 16:15:05 +0300 Subject: [PATCH 149/293] Web: Files: Row: fixed itemHeight --- .../src/pages/Home/Section/Body/RowsView/FilesRowContainer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js index aae1dd5726..002222c7b4 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js @@ -95,6 +95,7 @@ const FilesRowContainer = ({ draggable useReactWindow selectedFolderId={selectedFolderId} + itemHeight={58} > {filesList.map((item, index) => ( Date: Tue, 16 Aug 2022 16:16:33 +0300 Subject: [PATCH 150/293] Web: Files: fixed removeFiles, fixed filterTotal --- .../client/src/store/FilesActionsStore.js | 10 +---- packages/client/src/store/FilesStore.js | 43 ++++++++++++++++--- packages/common/api/files/filter.js | 3 +- 3 files changed, 40 insertions(+), 16 deletions(-) diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js index 4c02c17c9d..50c1d8c02e 100644 --- a/packages/client/src/store/FilesActionsStore.js +++ b/packages/client/src/store/FilesActionsStore.js @@ -199,20 +199,14 @@ class FilesActionStore { setTimeout(() => clearSecondaryProgressData(), TIMEOUT); }; - updateFilesAfterDelete = (folderIds) => { - const { folders, setFolders, filter, setSelected } = this.filesStore; + updateFilesAfterDelete = () => { + const { setSelected } = this.filesStore; const { clearSecondaryProgressData, } = this.uploadDataStore.secondaryProgressDataStore; setSelected("close"); - if (folderIds) { - const newFolders = folders.filter((f) => !folderIds.includes(f.id)); - setFolders(newFolders); - filter.total -= 1; - } - this.dialogsStore.setIsFolderActions(false); setTimeout(() => clearSecondaryProgressData(), TIMEOUT); }; diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 0e48e45610..2b4dd36067 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -1631,18 +1631,48 @@ class FilesStore { }; addFile = (item, isFolder) => { - this.filter.total += 1; + const filter = this.filter.clone(); + filter.total += 1; + this.setFilter(filter); + isFolder ? this.folders.unshift(item) : this.files.unshift(item); this.scrollToTop(); }; removeFiles = (fileIds, folderIds) => { - this.filter.total -= fileIds.length + folderIds.length; + const newFilter = this.filter.clone(); + const deleteCount = fileIds.length + folderIds.length; + newFilter.startIndex = + (newFilter.page + 1) * newFilter.pageCount - deleteCount; + newFilter.pageCount = deleteCount; - if (fileIds) this.files = this.files.filter((x) => !fileIds.includes(x.id)); - if (folderIds) - this.folders = this.folders.filter((x) => !folderIds.includes(x.id)); + api.files + .getFolder(newFilter.folder, newFilter) + .then((res) => { + const files = fileIds + ? this.files.filter((x) => !fileIds.includes(x.id)) + : []; + const folders = folderIds + ? this.folders.filter((x) => !folderIds.includes(x.id)) + : []; + + const newFiles = [...files, ...res.files]; + const newFolders = [...folders, ...res.folders]; + + const filter = this.filter.clone(); + filter.total = res.total; + + runInAction(() => { + this.setFilter(filter); + this.setFiles(newFiles); + this.setFolders(newFolders); + }); + }) + .catch(() => { + toastr.error(err); + console.log("Need page reload"); + }); }; updateFile = (fileId, title) => { @@ -2488,13 +2518,12 @@ class FilesStore { this.trashIsEmpty = isEmpty; }; - //TODO: filter.total is not updated, need move filter to new filterStore get filterTotal() { return this.filter.total; } get hasMoreFiles() { - return this.filesList.length < this.filter.total; + return this.filesList.length < this.filterTotal; } setFilesIsLoading = (filesIsLoading) => { diff --git a/packages/common/api/files/filter.js b/packages/common/api/files/filter.js index b545b667b2..c178b8ed81 100644 --- a/packages/common/api/files/filter.js +++ b/packages/common/api/files/filter.js @@ -135,6 +135,7 @@ class FilesFilter { sortBy, sortOrder, withSubfolders, + startIndex, } = this; const isFilterSet = @@ -148,7 +149,7 @@ class FilesFilter { const dtoFilter = { count: pageCount, - startIndex: this.getStartIndex(), + startIndex: startIndex ? startIndex : this.getStartIndex(), page: page, sortby: sortBy, sortOrder: sortOrder, From 0b1a8bf3687b83361639a53475c15a323ea76e1f Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 17 Aug 2022 15:11:48 +0300 Subject: [PATCH 151/293] Web: Files: fixed infinite-scroll styles --- .../TilesView/sub-components/InfiniteGrid.js | 9 ++-- .../sub-components/StyledInfiniteGrid.js | 4 ++ .../Section/sub-components/section-body.js | 46 +++++++++-------- packages/components/infinite-loader/Grid.js | 3 +- .../infinite-loader/InfiniteLoader.js | 8 ++- packages/components/infinite-loader/List.js | 1 + .../infinite-loader/StyledInfiniteLoader.js | 49 ++++++++++++++++++- 7 files changed, 93 insertions(+), 27 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js index 4aeecbb3ae..1596aebd5f 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js @@ -5,9 +5,9 @@ import { StyledCard, StyledItem, StyledHeaderItem } from "./StyledInfiniteGrid"; import Loaders from "@docspace/common/components/Loaders"; import uniqueid from "lodash/uniqueId"; -const HeaderItem = ({ children, ...rest }) => { +const HeaderItem = ({ children, className, ...rest }) => { return ( - + {children} ); @@ -95,7 +95,10 @@ const InfiniteGrid = (props) => { } list.push( - + {child} ); diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js index 8d9b8b3897..2976567cd4 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js @@ -24,6 +24,10 @@ const StyledItem = styled.div` gap: 14px 16px; width: 100%; + @media ${tablet} { + gap: 14px; + } + ${paddingCss}; `; diff --git a/packages/common/components/Section/sub-components/section-body.js b/packages/common/components/Section/sub-components/section-body.js index e28369ebef..7a88972cb2 100644 --- a/packages/common/components/Section/sub-components/section-body.js +++ b/packages/common/components/Section/sub-components/section-body.js @@ -10,33 +10,37 @@ import Scrollbar from "@docspace/components/scrollbar"; import DragAndDrop from "@docspace/components/drag-and-drop"; import { tablet, - mobile, desktop, smallTablet, } from "@docspace/components/utils/device"; +const settingsStudioStyles = css` + ${({ settingsStudio }) => + settingsStudio + ? css` + padding: 0 7px 16px 20px; + + @media ${tablet} { + padding: 0 0 16px 24px; + } + + @media ${smallTablet} { + padding: 8px 0 16px 24px; + } + ` + : css` + @media ${tablet} { + padding: ${({ viewAs }) => + viewAs === "tile" ? "19px 0 16px 24px" : "19px 0 16px 8px"}; + } + `} +`; + const paddingStyles = css` - padding: ${(props) => - props.settingsStudio - ? "0 7px 16px 20px" - : props.viewAs === "row" - ? "19px 3px 16px 16px" - : "19px 3px 16px 20px"}; + padding: ${({ viewAs }) => + viewAs === "row" ? "19px 3px 16px 0px" : "19px 3px 16px 20px"}; - @media ${tablet} { - padding: ${(props) => - props.settingsStudio ? "0 0 16px 24px" : "19px 0 16px 24px"}; - } - - @media ${smallTablet} { - padding: ${(props) => - props.settingsStudio ? "8px 0 16px 24px" : "19px 0 16px 24px"}; - } - - @media ${mobile} { - padding: ${(props) => - props.settingsStudio ? "8px 0 16px 24px" : "19px 0 16px 24px"}; - } + ${settingsStudioStyles}; ${isMobile && css` diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index 7695332c53..4697d25b05 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -39,6 +39,7 @@ const GridComponent = ({ const itemClassNames = children[index]?.props?.className; const isFile = itemClassNames?.includes("isFile"); const isFolder = itemClassNames?.includes("isFolder"); + const isFolderHeader = itemClassNames?.includes("folder_header"); const horizontalGap = 16; const verticalGap = 14; @@ -46,7 +47,7 @@ const GridComponent = ({ const folderHeight = 64 + verticalGap; const fileHeight = 220 + horizontalGap; - const titleHeight = 20 + headerMargin; + const titleHeight = 20 + headerMargin + (isFolderHeader ? 0 : 11); return isFolder ? folderHeight : isFile ? fileHeight : titleHeight; }; diff --git a/packages/components/infinite-loader/InfiniteLoader.js b/packages/components/infinite-loader/InfiniteLoader.js index da422afe9f..6f44dd94f5 100644 --- a/packages/components/infinite-loader/InfiniteLoader.js +++ b/packages/components/infinite-loader/InfiniteLoader.js @@ -3,13 +3,19 @@ import PropTypes from "prop-types"; import { isMobileOnly } from "react-device-detect"; import ListComponent from "./List"; import GridComponent from "./Grid"; +import { isMobile } from "../utils/device"; const InfiniteLoaderComponent = (props) => { + const { viewAs } = props; + const scroll = isMobileOnly ? document.querySelector("#customScrollBar > .scroll-body") : document.querySelector("#sectionScroll > .scroll-body"); - return props.viewAs === "tile" ? ( + if (viewAs === "row") scroll.style.paddingRight = 0; + else scroll.style.paddingRight = isMobile() ? "8px" : "17px"; + + return viewAs === "tile" ? ( ) : ( diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 81b78f7f75..3881edb504 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -126,6 +126,7 @@ const ListComponent = ({ scrollTop={scrollTop} overscanRowCount={3} onScroll={onScroll} + viewAs={viewAs} /> ); }} diff --git a/packages/components/infinite-loader/StyledInfiniteLoader.js b/packages/components/infinite-loader/StyledInfiniteLoader.js index eb73c729bb..cc676535eb 100644 --- a/packages/components/infinite-loader/StyledInfiniteLoader.js +++ b/packages/components/infinite-loader/StyledInfiniteLoader.js @@ -1,6 +1,7 @@ import { List } from "react-virtualized"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import Base from "../themes/base"; +import { desktop, mobile, tablet } from "../utils/device"; const StyledScroll = styled.div` overflow: scroll; @@ -28,9 +29,55 @@ const StyledScroll = styled.div` scrollbar-color: ${({ theme }) => theme.scrollbar.backgroundColorVertical}; `; +const rowStyles = css` + .row-list-item, + .row-loader { + padding-left: 16px; + width: calc(100% - 33px) !important; + + @media ${mobile} { + width: calc(100% - 24px) !important; + } + } + + .row-loader { + padding-left: 22px; + } +`; + +const tableStyles = css` + margin-left: -20px; + width: ${({ width }) => width + 40 + "px !important"}; + + .ReactVirtualized__Grid__innerScrollContainer { + max-width: ${({ width }) => width + 40 + "px !important"}; + } + .table-container_body-loader { + width: calc(100% - 48px) !important; + } + + .table-list-item, + .table-container_body-loader { + padding-left: 20px; + } +`; + +const tileStyles = css` + .files_header { + padding-top: 11px; + } +`; + const StyledList = styled(List)` outline: none; overflow: hidden !important; + + ${({ viewAs }) => + viewAs === "row" + ? rowStyles + : viewAs === "table" + ? tableStyles + : tileStyles} `; StyledScroll.defaultProps = { From 2afade9016dcb68ca82d66189277efd4c508e246 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 17 Aug 2022 17:16:49 +0300 Subject: [PATCH 152/293] Web: Files: Hotkeys: added throttle to keydown event --- packages/client/src/HOCs/withHotkeys.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/client/src/HOCs/withHotkeys.js b/packages/client/src/HOCs/withHotkeys.js index 481dc2ccd6..cd9f046e19 100644 --- a/packages/client/src/HOCs/withHotkeys.js +++ b/packages/client/src/HOCs/withHotkeys.js @@ -3,6 +3,7 @@ import { useHotkeys } from "react-hotkeys-hook"; import { observer, inject } from "mobx-react"; import { Events } from "@docspace/client/src/helpers/filesConstants"; import toastr from "client/toastr"; +import throttle from "lodash/throttle"; const withHotkeys = (Component) => { const WithHotkeys = (props) => { @@ -91,9 +92,12 @@ const withHotkeys = (Component) => { }; useEffect(() => { - window.addEventListener("keydown", onKeyDown); + const throttledKeyDownEvent = throttle(onKeyDown, 300); - return () => window.removeEventListener("keypress", onKeyDown); + window.addEventListener("keydown", throttledKeyDownEvent); + + return () => + window.removeEventListener("keypress", throttledKeyDownEvent); }); //Select/deselect item From 896f86fde41870a6b21984615acf7a3e949dd53e Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 17 Aug 2022 17:30:55 +0300 Subject: [PATCH 153/293] Web: Files: fixed hotkeys scroll --- packages/client/src/store/HotkeyStore.js | 55 +++++++++++++----------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js index a34833bcf5..c93e784cf5 100644 --- a/packages/client/src/store/HotkeyStore.js +++ b/packages/client/src/store/HotkeyStore.js @@ -33,6 +33,29 @@ class HotkeyStore { this.uploadDataStore = uploadDataStore; } + scrollToCaret = () => { + const { offsetTop, item } = this.getItemOffset(); + const scroll = document.getElementsByClassName("section-scroll")[0]; + const scrollRect = scroll.getBoundingClientRect(); + + if (item && item[0]) { + const el = item[0]; + const rect = el.getBoundingClientRect(); + + if ( + scrollRect.top + scrollRect.height - rect.height > rect.top && + scrollRect.top < rect.top + el.offsetHeight + ) { + //console.log("element is visible"); + } else { + scroll.scrollTo(0, offsetTop - scrollRect.height / 2); + //console.log("element is not visible"); + } + } else { + scroll.scrollTo(0, this.elemOffset - scrollRect.height / 2); + } + }; + activateHotkeys = (e) => { if ( this.dialogsStore.someDialogIsOpen || @@ -65,34 +88,18 @@ class HotkeyStore { this.filesStore.setHotkeyCaretStart(selection[0]); } - if (!hotkeyCaret || isDefaultKeys) return; - - const { offsetTop, item } = this.getItemOffset(); - const scroll = document.getElementsByClassName("section-scroll")[0]; - const scrollRect = scroll.getBoundingClientRect(); - - if (item && item[0]) { - const el = item[0]; - const rect = el.getBoundingClientRect(); - - if ( - scrollRect.top + scrollRect.height - rect.height > rect.top && - scrollRect.top < rect.top + el.offsetHeight - ) { - //console.log("element is visible"); - } else { - scroll.scrollTo(0, offsetTop - scrollRect.height / 2); - //console.log("element is not visible"); - } - } else { - scroll.scrollTo(0, this.elemOffset - scrollRect.height / 2); - } + if (!hotkeyCaret || isDefaultKeys) return e; }; setCaret = (caret) => { - this.filesStore.setHotkeyCaret(caret); - const { offsetTop } = this.getItemOffset(); + const id = caret.isFolder ? `folder_${caret.id}` : `file_${caret.id}`; + const elem = document.getElementById(id); + if (!elem) return; + this.filesStore.setHotkeyCaret(caret); + this.scrollToCaret(); + + const { offsetTop } = this.getItemOffset(); if (offsetTop) this.elemOffset = offsetTop; }; From 2e2b701df03430591240187d97c67d0fd53b92ab Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 17 Aug 2022 17:54:35 +0300 Subject: [PATCH 154/293] Web: Common: changed DEFAULT_PAGE_COUNT --- packages/common/api/files/filter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/api/files/filter.js b/packages/common/api/files/filter.js index c178b8ed81..eabf6b2fc8 100644 --- a/packages/common/api/files/filter.js +++ b/packages/common/api/files/filter.js @@ -2,7 +2,7 @@ import { getObjectByLocation, toUrlParams } from "../../utils"; import queryString from "query-string"; const DEFAULT_PAGE = 0; -const DEFAULT_PAGE_COUNT = 25; +const DEFAULT_PAGE_COUNT = 100; const DEFAULT_TOTAL = 0; const DEFAULT_SORT_BY = "DateAndTime"; const DEFAULT_SORT_ORDER = "descending"; From c8676289a6b1aace4d7a7195b32e631c5631e651 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 17 Aug 2022 17:55:05 +0300 Subject: [PATCH 155/293] Web: Files: Hotkeys: fixed scrollToCaret --- packages/client/src/store/HotkeyStore.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js index c93e784cf5..9fe02d46c2 100644 --- a/packages/client/src/store/HotkeyStore.js +++ b/packages/client/src/store/HotkeyStore.js @@ -92,9 +92,10 @@ class HotkeyStore { }; setCaret = (caret) => { - const id = caret.isFolder ? `folder_${caret.id}` : `file_${caret.id}`; - const elem = document.getElementById(id); - if (!elem) return; + //TODO: inf-scroll + // const id = caret.isFolder ? `folder_${caret.id}` : `file_${caret.id}`; + // const elem = document.getElementById(id); + // if (!elem) return; this.filesStore.setHotkeyCaret(caret); this.scrollToCaret(); From 6df825670de22173d3ac1576974191e131a97f82 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 17 Aug 2022 17:55:59 +0300 Subject: [PATCH 156/293] Web: Components: fixed scroll z-index --- packages/components/scrollbar/styled-scrollbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/scrollbar/styled-scrollbar.js b/packages/components/scrollbar/styled-scrollbar.js index 287aaed1fb..b264ac564b 100644 --- a/packages/components/scrollbar/styled-scrollbar.js +++ b/packages/components/scrollbar/styled-scrollbar.js @@ -8,7 +8,7 @@ const StyledScrollbar = styled(Scrollbars)` props.color ? props.color : props.theme.scrollbar.backgroundColorVertical}; - z-index: 1; + z-index: 201; } .nav-thumb-horizontal { background-color: ${(props) => From 09fbafed03200a1f83cfe1e0a5d10bb15eae28a6 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 18 Aug 2022 10:20:12 +0300 Subject: [PATCH 157/293] Web: Components: fixed loadMoreItems --- packages/components/infinite-loader/Grid.js | 4 ++-- packages/components/infinite-loader/List.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js index 4697d25b05..5ecbb3ae7f 100644 --- a/packages/components/infinite-loader/Grid.js +++ b/packages/components/infinite-loader/Grid.js @@ -17,8 +17,8 @@ const GridComponent = ({ const loaderRef = createRef(); useEffect(() => { - setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0); - }, [loaderRef, selectedFolderId]); + setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 1000); + }, [loaderRef, selectedFolderId, filesLength]); const isItemLoaded = useCallback( ({ index }) => { diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js index 3881edb504..1dab53c80a 100644 --- a/packages/components/infinite-loader/List.js +++ b/packages/components/infinite-loader/List.js @@ -22,8 +22,8 @@ const ListComponent = ({ const loaderRef = createRef(); useEffect(() => { - setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 0); - }, [loaderRef, selectedFolderId]); + setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 1000); + }, [loaderRef, selectedFolderId, filesLength]); const renderRow = ({ key, index, style }) => { const isLoaded = isItemLoaded({ index: index + 2 }); From a6ddc6937c73e1bed5fb69fb68b4a4c391c5ca26 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 18 Aug 2022 10:46:22 +0300 Subject: [PATCH 158/293] Web: Files: fixed deleteAction toast --- .../client/src/store/FilesActionsStore.js | 72 ++++++++++--------- packages/client/src/store/FilesStore.js | 4 +- 2 files changed, 41 insertions(+), 35 deletions(-) diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js index 50c1d8c02e..ebad96eb6f 100644 --- a/packages/client/src/store/FilesActionsStore.js +++ b/packages/client/src/store/FilesActionsStore.js @@ -283,7 +283,22 @@ class FilesActionStore { //this.updateCurrentFolder(fileIds, folderIds, false); this.updateFilesAfterDelete(folderIds); - this.filesStore.removeFiles(fileIds, folderIds); + + const showToast = () => { + if (isRecycleBinFolder) { + return toastr.success(translations.deleteFromTrash); + } + + if (selection.length > 1 || isThirdPartyFile) { + return toastr.success(translations.deleteSelectedElem); + } + if (selection[0].fileExst) { + return toastr.success(translations.FileRemoved); + } + return toastr.success(translations.FolderRemoved); + }; + + this.filesStore.removeFiles(fileIds, folderIds, showToast); if (currentFolderId) { const { socketHelper } = this.authStore.settingsStore; @@ -293,18 +308,6 @@ class FilesActionStore { data: currentFolderId, }); } - - if (isRecycleBinFolder) { - return toastr.success(translations.deleteFromTrash); - } - - if (selection.length > 1 || isThirdPartyFile) { - return toastr.success(translations.deleteSelectedElem); - } - if (selection[0].fileExst) { - return toastr.success(translations.FileRemoved); - } - return toastr.success(translations.FolderRemoved); }) .finally(() => { clearActiveOperations(fileIds, folderIds); @@ -611,16 +614,17 @@ class FilesActionStore { if (isFile) { addActiveItems([itemId]); this.isMediaOpen(); - return deleteFile(itemId) - .then(async (res) => { - if (res[0]?.error) return Promise.reject(res[0].error); - const data = res[0] ? res[0] : null; - await this.uploadDataStore.loopFilesOperations(data, pbData); - //this.updateCurrentFolder([itemId]); - this.updateFilesAfterDelete(); - this.filesStore.removeFiles([itemId]); - }) - .then(() => toastr.success(translations.successRemoveFile)); + return deleteFile(itemId).then(async (res) => { + if (res[0]?.error) return Promise.reject(res[0].error); + const data = res[0] ? res[0] : null; + await this.uploadDataStore.loopFilesOperations(data, pbData); + //this.updateCurrentFolder([itemId]); + this.updateFilesAfterDelete(); + + this.filesStore.removeFiles([itemId], null, () => + toastr.success(translations.successRemoveFile) + ); + }); } else if (isRoom) { const items = Array.isArray(itemId) ? itemId : [itemId]; addActiveItems(null, items); @@ -637,17 +641,17 @@ class FilesActionStore { .then(() => toastr.success(translations?.successRemoveRoom)); } else { addActiveItems(null, [itemId]); - return deleteFolder(itemId) - .then(async (res) => { - if (res[0]?.error) return Promise.reject(res[0].error); - const data = res[0] ? res[0] : null; - await this.uploadDataStore.loopFilesOperations(data, pbData); - //this.updateCurrentFolder(null, [itemId]); - this.updateFilesAfterDelete([itemId]); - this.filesStore.removeFiles([itemId]); - getIsEmptyTrash(); - }) - .then(() => toastr.success(translations.successRemoveFolder)); + return deleteFolder(itemId).then(async (res) => { + if (res[0]?.error) return Promise.reject(res[0].error); + const data = res[0] ? res[0] : null; + await this.uploadDataStore.loopFilesOperations(data, pbData); + //this.updateCurrentFolder(null, [itemId]); + this.updateFilesAfterDelete([itemId]); + this.filesStore.removeFiles([itemId], null, () => + toastr.success(translations.successRemoveFolder) + ); + getIsEmptyTrash(); + }); } }; diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 2b4dd36067..05f0186c2e 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -1640,7 +1640,7 @@ class FilesStore { this.scrollToTop(); }; - removeFiles = (fileIds, folderIds) => { + removeFiles = (fileIds, folderIds, showToast) => { const newFilter = this.filter.clone(); const deleteCount = fileIds.length + folderIds.length; newFilter.startIndex = @@ -1668,6 +1668,8 @@ class FilesStore { this.setFiles(newFiles); this.setFolders(newFolders); }); + + showToast && showToast(); }) .catch(() => { toastr.error(err); From b8ee0b66e07a17f73f51fd8507c96322723877e9 Mon Sep 17 00:00:00 2001 From: mushka Date: Thu, 18 Aug 2022 17:05:36 +0300 Subject: [PATCH 159/293] updated yarn.lock and package.json --- packages/client/package.json | 4 ++-- yarn.lock | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index 064ef5c3fb..8c093a350a 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -42,11 +42,11 @@ "copy-to-clipboard": "^3.3.1", "file-saver": "^2.0.5", "firebase": "^8.10.0", + "react-avatar-editor": "^13.0.0", "react-hotkeys-hook": "^3.4.4", "react-markdown": "^7.0.1", "react-smartbanner": "^5.1.4", - "react-string-format": "^0.1.4", - "react-avatar-editor": "^13.0.0" + "react-string-format": "^0.1.4" }, "devDependencies": { "@babel/core": "^7.15.5", diff --git a/yarn.lock b/yarn.lock index 96f14eddcc..7da021d1f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2039,6 +2039,7 @@ __metadata: html-webpack-plugin: 5.3.2 json-loader: ^0.5.7 playwright: ^1.18.1 + react-avatar-editor: ^13.0.0 react-hotkeys-hook: ^3.4.4 react-markdown: ^7.0.1 react-smartbanner: ^5.1.4 @@ -10511,7 +10512,6 @@ __metadata: version: 0.0.0-use.local resolution: "docspace@workspace:." dependencies: - react-avatar-editor: ^13.0.0 shx: ^0.3.3 terser: ^5.8.0 languageName: unknown From 8ce7810566c00c4fe2aa9abacb517ca54e01a55d Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:02:17 +0300 Subject: [PATCH 160/293] created new view for RoomTypeDropdown on mobile --- .../RoomTypeDropdown/DropdownDesktop.js | 49 +++++++++++ .../RoomTypeDropdown/DropdownMobile.js | 87 +++++++++++++++++++ .../sub-components/RoomTypeDropdown/index.js | 67 ++++++++++++++ 3 files changed, 203 insertions(+) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js new file mode 100644 index 0000000000..0d7d3ad193 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownDesktop.js @@ -0,0 +1,49 @@ +import React from "react"; +import styled from "styled-components"; + +import RoomType from "../RoomType"; + +const StyledDropdownDesktop = styled.div` + max-width: 100%; + position: relative; + background: #ffffff; + ${(props) => !props.isOpen && "display: none"}; + + .dropdown-content { + margin-top: 4px; + background: #ffffff; + overflow: visible; + z-index: 400; + top: 0; + left: 0; + box-sizing: border-box; + width: 100%; + position: absolute; + display: flex; + flex-direction: column; + padding: 6px 0; + border: 1px solid #d0d5da; + box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); + border-radius: 6px; + } +`; + +const DropdownDesktop = ({ t, open, roomTypes, chooseRoomType }) => { + return ( + +
+ {roomTypes.map((room) => ( + chooseRoomType(room.type)} + /> + ))} +
+ + ); +}; + +export default DropdownDesktop; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js new file mode 100644 index 0000000000..3fe8268cac --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js @@ -0,0 +1,87 @@ +import React from "react"; +import styled from "styled-components"; + +import RoomType from "../RoomType"; + +import { Scrollbar } from "@docspace/components"; + +const StyledDropdownMobile = styled.div` + visibility: ${(props) => (props.isOpen ? "visible" : "hidden")}; + + & > .dropdown-mobile-backdrop { + z-index: 999; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + margin-top: -64px; + + .dropdown-mobile-wrapper { + border-radius: 6px 6px 0 0; + padding: 6px 0; + box-shadow: 0px -4px 60px rgba(4, 15, 27, 0.12); + position: fixed; + background: #ffffff; + width: 100%; + height: calc(100vh - 254px); + + bottom: -100%; + transition: all 0.2s ease-in-out; + &-active { + bottom: 0; + } + } + + .dropdown-mobile-scrollbar { + background: rgba(6, 22, 38, 0.2); + .scroll-body { + padding-right: 0 !important; + * { + -ms-overflow-style: none; + } + ::-webkit-scrollbar { + display: none; + } + } + + .dropdown-mobile-content { + background: #ffffff; + box-sizing: border-box; + width: 100%; + display: flex; + flex-direction: column; + } + } + } +`; + +const DropdownMobile = ({ t, open, onClose, roomTypes, chooseRoomType }) => { + return ( + +
+
+ +
+ {roomTypes.map((room) => ( + chooseRoomType(room.type)} + /> + ))} +
+ +
+
+ + ); +}; + +export default DropdownMobile; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js new file mode 100644 index 0000000000..cdb8db3aa2 --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js @@ -0,0 +1,67 @@ +import { isHugeMobile } from "@docspace/components/utils/device"; +import React, { useState } from "react"; +import styled from "styled-components"; +import { roomTypes } from "../../data"; +import RoomType from "../RoomType"; +import DropdownDesktop from "./DropdownDesktop"; +import DropdownMobile from "./DropdownMobile"; + +const StyledRoomTypeDropdown = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; + +const RoomTypeDropdown = ({ + t, + currentRoom, + setRoomType, + setIsScrollLocked, +}) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleDropdown = () => { + if (isOpen) { + setIsScrollLocked(false); + setIsOpen(false); + } else { + setIsScrollLocked(true); + setIsOpen(true); + } + }; + + const chooseRoomType = (roomType) => { + setRoomType(roomType); + toggleDropdown(); + }; + + return ( + + + {isHugeMobile() ? ( + + ) : ( + + )} + + ); +}; + +export default RoomTypeDropdown; From c187ffade53cc31fdaf60f41255fb63ac8f5d362 Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:02:39 +0300 Subject: [PATCH 161/293] fixed and updated roomType --- .../dialogs/CreateEditRoomDialog/sub-components/RoomType.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js index 90ccd43d20..635f11bdd6 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js @@ -10,6 +10,9 @@ import SecondaryInfoButton from "./SecondaryInfoButton"; const StyledRoomType = styled.div` cursor: pointer; + user-select: none; + outline: 0; + padding: 16px; width: 100%; box-sizing: border-box; @@ -24,6 +27,9 @@ const StyledRoomType = styled.div` } .choose_room-info_wrapper { + display: flex; + flex-direction: column; + gap: 4px; .choose_room-title { display: flex; flex-direction: row; From fa2275b0e81ec5f7ec7faa55984bef29d8a19922 Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:05:58 +0300 Subject: [PATCH 162/293] passed default tag to previewTile + started working on default tag change --- .../CreateEditRoomDialog/CreateRoomDialog.js | 5 +++-- .../sub-components/IconEditor/PreviewTile.js | 14 ++++++++++++-- .../sub-components/IconEditor/index.js | 12 +++++++++++- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js index 34487d8fc5..79aaadabb1 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js @@ -58,8 +58,8 @@ const CreateRoomDialog = ({ const tagHandler = new TagHandler(roomParams.tags, setRoomTags, fetchedTags); const setRoomType = (newRoomType) => { - const [roomByType] = roomTypes.filter((room) => room.type === newRoomType); - tagHandler.refreshDefaultTag(t(roomByType.defaultTag)); + // const [roomByType] = roomTypes.filter((room) => room.type === newRoomType); + // tagHandler.refreshDefaultTag(t(roomByType.defaultTag)); setRoomParams((prev) => ({ ...prev, type: newRoomType, @@ -89,6 +89,7 @@ const CreateRoomDialog = ({ onClose={onClose} isScrollLocked={isScrollLocked} withFooterBorder + isRoomTypeDropdownOpen={isRoomTypeDropdownOpen} > {isChooseRoomType ? ( diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js index 748c8e7e42..85e4012197 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js @@ -4,6 +4,7 @@ import styled from "styled-components"; import { smallTablet } from "@docspace/components/utils/device"; import Tags from "@docspace/common/components/Tags"; +import Tag from "@docspace/components/tag"; const StyledPreviewTile = styled.div` background: #ffffff; @@ -52,7 +53,7 @@ const StyledPreviewTile = styled.div` } `; -const PreviewTile = ({ title, previewIcon, tags }) => { +const PreviewTile = ({ t, title, previewIcon, tags, defaultTagLabel }) => { return (
@@ -62,7 +63,16 @@ const PreviewTile = ({ title, previewIcon, tags }) => {
{title}
- + {tags.length ? ( + + ) : ( + + )}
); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js index 47a90372f9..c26ad3545f 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/index.js @@ -16,7 +16,15 @@ const StyledIconEditor = styled.div` import IconCropper from "./IconCropper"; import PreviewTile from "./PreviewTile"; -const IconEditor = ({ t, isEdit, title, tags, icon, onChangeIcon }) => { +const IconEditor = ({ + t, + isEdit, + title, + tags, + currentRoomTypeData, + icon, + onChangeIcon, +}) => { const [previewIcon, setPreviewIcon] = useState(null); const uploadedFile = icon.uploadedFile; @@ -37,9 +45,11 @@ const IconEditor = ({ t, isEdit, title, tags, icon, onChangeIcon }) => { /> tag.name)} + defaultTagLabel={t(currentRoomTypeData.defaultTag)} />
)} From 9028432bf690a839ccde42163dfaf973ca436d50 Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:06:48 +0300 Subject: [PATCH 163/293] updated and fixed tagInput + changed default tag functionality --- .../sub-components/TagInput/TagDropdown.js | 116 +++++++++++++++++ .../sub-components/TagInput/TagList.js | 4 +- .../sub-components/TagInput/index.js | 120 ++++-------------- 3 files changed, 142 insertions(+), 98 deletions(-) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js new file mode 100644 index 0000000000..945fae9b4f --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js @@ -0,0 +1,116 @@ +import React, { useRef, useState, useEffect } from "react"; + +import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; + +import DropDownItem from "@docspace/components/drop-down-item"; +import { isHugeMobile } from "@docspace/components/utils/device"; +import DomHelpers from "@docspace/components/utils/domHelpers"; + +const TagDropdown = ({ + open, + tagHandler, + tagInputValue, + setTagInputValue, + createTagLabel, +}) => { + const dropdownRef = useRef(null); + + const [dropdownMaxHeight, setDropdownMaxHeight] = useState(0); + + const chosenTags = tagHandler.tags.map((tag) => tag.name); + + const tagsForDropdown = tagHandler.fetchedTags.filter( + (tag) => + tag.toLowerCase().includes(tagInputValue.toLowerCase()) && + !chosenTags.includes(tag) + ); + + const preventDefault = (e) => { + e.preventDefault(); + }; + + const onClickOutside = () => { + document.getElementById("tags-input").blur(); + }; + + const addNewTag = () => { + tagHandler.addNewTag(tagInputValue); + setTagInputValue(""); + onClickOutside(); + }; + + const addFetchedTag = (name) => { + tagHandler.addTag(name); + setTagInputValue(""); + onClickOutside(); + }; + + const calcualateDisplayedDropdownItems = () => { + let res = tagsForDropdown.map((tag, i) => ( + addFetchedTag(tag)} + /> + )); + + if ( + tagInputValue && + ![...tagsForDropdown, ...chosenTags].find((tag) => tagInputValue === tag) + ) + res = [ + , + ...res, + ]; + + return res; + }; + + useEffect(() => { + if (dropdownRef && open) { + const { top: offsetTop } = DomHelpers.getOffset(dropdownRef.current); + const offsetBottom = window.innerHeight - offsetTop; + const maxHeight = Math.floor((offsetBottom - 22) / 32) * 32 - 2; + const result = isHugeMobile() + ? Math.min(maxHeight, 158) + : Math.min(maxHeight, 382); + setDropdownMaxHeight(result); + } + }, [open]); + + const dropdownItems = calcualateDisplayedDropdownItems(); + + return ( + + {!!dropdownItems.length && ( + + {dropdownItems} + + )} + + ); +}; + +export default TagDropdown; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js index 130c635b62..a27b21ce00 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagList.js @@ -21,7 +21,7 @@ const StyledTagList = styled.div` } `; -const TagList = ({ t, tagHandler }) => { +const TagList = ({ defaultTagLabel, tagHandler }) => { const { tags } = tagHandler; return ( @@ -43,7 +43,7 @@ const TagList = ({ t, tagHandler }) => { )} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js index 4b3288d649..a22d6d66ee 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js @@ -1,11 +1,10 @@ -import React, { useState, useRef } from "react"; +import React, { useState } from "react"; import styled from "styled-components"; import TagList from "./TagList"; -import DropDownItem from "@docspace/components/drop-down-item"; -import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; -import { isMobile } from "@docspace/components/utils/device"; + import InputParam from "../Params/InputParam"; +import TagDropdown from "./TagDropdown"; const StyledTagInput = styled.div` .set_room_params-tag_input { @@ -25,90 +24,27 @@ const StyledTagInput = styled.div` } `; -const TagInput = ({ t, tagHandler, setIsScrollLocked }) => { +const TagInput = ({ + t, + tagHandler, + currentRoomTypeData, + setIsScrollLocked, +}) => { const [tagInput, setTagInput] = useState(""); - const [isOpen, setIsOpen] = useState(false); - - const chosenTags = tagHandler.tags.map((tag) => tag.name); - const fetchedTags = tagHandler.fetchedTags; - const filteredFetchedTags = fetchedTags.filter((tag) => - tag.toLowerCase().includes(tagInput.toLowerCase()) - ); - const tagsForDropdown = filteredFetchedTags.filter( - (tag) => !chosenTags.includes(tag) - ); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); const onTagInputChange = (e) => setTagInput(e.target.value); - const preventDefault = (e) => e.preventDefault(); const openDropdown = () => { setIsScrollLocked(true); - setIsOpen(true); + setIsDropdownOpen(true); }; + const closeDropdown = () => { setIsScrollLocked(false); - setIsOpen(false); + setIsDropdownOpen(false); }; - const tagsInputElement = document.getElementById("tags-input"); - - const onClickOutside = () => { - tagsInputElement.blur(); - }; - - const addNewTag = () => { - tagHandler.addNewTag(tagInput); - setTagInput(""); - tagsInputElement.blur(); - }; - - const addFetchedTag = (name) => { - tagHandler.addTag(name); - setTagInput(""); - tagsInputElement.blur(); - }; - - const dropdownRef = useRef(null); - - let dropdownItems = tagsForDropdown.map((tag, i) => ( - addFetchedTag(tag)} - /> - )); - - if ( - tagInput && - ![...tagsForDropdown, ...chosenTags].find((tag) => tagInput === tag) - ) { - const dropdownItemNewTag = ( - - ); - //dropdownItems = [dropdownItemNewTag, ...dropdownItems]; - - if (tagsForDropdown.length > 0) { - dropdownItems = [ - dropdownItemNewTag, - , - ...dropdownItems, - ]; - } else { - dropdownItems = [dropdownItemNewTag, ...dropdownItems]; - } - } - return ( { onBlur={closeDropdown} /> - - {dropdownItems.length > 0 && ( - - {dropdownItems} - - )} - + - + ); }; From ca65ccbb683d73ee119665f402f9afa4a5772b12 Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:07:18 +0300 Subject: [PATCH 164/293] fixed props passing from setRoomParams --- .../sub-components/SetRoomParams.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js index 3edeb7e48d..804f1a23cd 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -67,6 +67,7 @@ const SetRoomParams = ({ t={t} currentRoom={currentRoomTypeData} setRoomType={setRoomType} + setIsScrollLocked={setIsScrollLocked} /> )} @@ -91,6 +92,7 @@ const SetRoomParams = ({ @@ -102,7 +104,7 @@ const SetRoomParams = ({ /> )} */} - {/* {!isEdit && ( + {!isEdit && ( - )} */} + )} - {/* */} + /> ); }; From 35102131f1788ee21747dadae82878b1a25ced8c Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:07:39 +0300 Subject: [PATCH 165/293] fixed imports in IconCropper --- .../sub-components/IconEditor/IconCropper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js index cd1090037d..92604c169a 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js @@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react"; import styled from "styled-components"; import { ReactSVG } from "react-svg"; import throttle from "lodash/throttle"; +import AvatarEditor from "react-avatar-editor"; -// import AvatarEditor from "react-avatar-editor"; import Slider from "@docspace/components/slider"; import IconButton from "@docspace/components/icon-button"; From e9b451598d05a8c5d21977a95aadc9e0eba60da3 Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:08:15 +0300 Subject: [PATCH 166/293] tweaked ThirdpartyComboBox --- .../sub-components/ThirdPartyStorage/ThirpartyComboBox.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js index cf863c3ab1..dfa558d019 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js @@ -10,7 +10,6 @@ import DomHelpers from "@docspace/components/utils/domHelpers"; import Text from "@docspace/components/text"; import Button from "@docspace/components/button"; import DropDownItem from "@docspace/components/drop-down-item"; -import Checkbox from "@docspace/components/checkbox"; import { connectedCloudsTypeTitleTranslation } from "@docspace/client/src/helpers/filesUtils"; const StyledStorageLocation = styled.div` @@ -88,8 +87,6 @@ const ThirpartyComboBox = ({ title: connectedCloudsTypeTitleTranslation(provider.provider_key, t), })); - console.log(thirdparties); - const [isOpen, setIsOpen] = useState(false); const [dropdownDirection, setDropdownDirection] = useState("bottom"); From 3e4a036cb0504db5271360c484a7f446c4728eba Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:09:00 +0300 Subject: [PATCH 167/293] permanent settings update and tweak --- .../sub-components/PermanentSettings/index.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js index 998df6e4e0..45b20f1fcc 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/PermanentSettings/index.js @@ -10,7 +10,7 @@ import { import PermanentSetting from "./PermanentSetting"; const StyledPermanentSettings = styled.div` - display: flex; + display: ${(props) => (props.displayNone ? "none" : "flex")}; flex-direction: row; gap: 8px; margin-top: -12px; @@ -23,16 +23,6 @@ const PermanentSettings = ({ storageLocation, isPrivate, }) => { - const thirdpartyTitle = isThirdparty - ? getProviderTypeTitle(storageLocation.providerKey, t) - : ""; - - const thirdpartyIcon = isThirdparty - ? getProviderTypeIcon(storageLocation.providerKey) - : ""; - - const thirdpartyFolderName = isThirdparty ? storageLocation.title : ""; - const createThirdpartyPath = () => { const path = storageLocation.parentId.split("|"); path.shift(); @@ -41,10 +31,13 @@ const PermanentSettings = ({ return `(${path.join("/")})`; }; + const thirdpartyTitle = getProviderTypeTitle(storageLocation?.providerKey, t); + const thirdpartyIcon = getProviderTypeIcon(storageLocation?.providerKey); + const thirdpartyFolderName = isThirdparty ? storageLocation?.title : ""; const thirdpartyPath = isThirdparty ? createThirdpartyPath() : ""; return ( - + {isThirdparty && ( Date: Fri, 19 Aug 2022 04:09:52 +0300 Subject: [PATCH 168/293] tryouts for editRoom icon restructure --- .../CreateEditRoomDialog/EditRoomDialog.js | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js index 9ea0b04330..9a54ff0b32 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js @@ -1,13 +1,11 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; + +import TagHandler from "./handlers/tagHandler"; +import SetRoomParams from "./sub-components/SetRoomParams"; import ModalDialog from "@docspace/components/modal-dialog"; import Button from "@docspace/components/button"; -import TagHandler from "./handlers/tagHandler"; -import { roomTypes } from "./data"; - -import SetRoomParams from "./sub-components/SetRoomParams"; - const EditRoomDialog = ({ t, visible, @@ -20,9 +18,7 @@ const EditRoomDialog = ({ }) => { const [isScrollLocked, setIsScrollLocked] = useState(false); - const [roomParams, setRoomParams] = useState({ - ...fetchedRoomParams, - }); + const [roomParams, setRoomParams] = useState({ ...fetchedRoomParams }); const setRoomTags = (newTags) => setRoomParams({ ...roomParams, tags: newTags }); @@ -37,6 +33,22 @@ const EditRoomDialog = ({ const onEditRoom = () => onSave(roomParams); + useEffect(async () => { + console.log(fetchedRoomParams.uploadedFileSrc); + if (fetchedRoomParams.uploadedFileSrc) + await fetch( + "http://192.168.0.100:8092/storage/room_logos/root/sbox9DOCSPACE%20CUSTOM%20ROOM%209_orig_887-339.jpeg" + ).then((res) => { + const buf = res.arrayBuffer(); + const file = new File([buf], "fetchedImage", { type: "image/png" }); + console.log(file); + setRoomParams({ + ...roomParams, + icon: { ...roomParams.icon, uploadedFile: file }, + }); + }); + }, []); + console.log(roomParams); return ( From 6e083782d7eea6350c7224f369886f63b176e10a Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:10:12 +0300 Subject: [PATCH 169/293] updated and fixed modal-dialog --- .../modal-dialog/styled-modal-dialog.js | 20 +++++++++---------- .../modal-dialog/views/modal-aside.js | 3 +++ 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/components/modal-dialog/styled-modal-dialog.js b/packages/components/modal-dialog/styled-modal-dialog.js index 89debd4e78..c6c0341f81 100644 --- a/packages/components/modal-dialog/styled-modal-dialog.js +++ b/packages/components/modal-dialog/styled-modal-dialog.js @@ -101,17 +101,15 @@ const StyledBody = styled(Box)` padding-bottom: ${(props) => props.currentDisplayType === "aside" || props.hasFooter ? "8px" : "16px"}; - #modal-scroll { - .scroll-body { - margin-right: ${isMobile ? 0 : "-17px"} !important; - padding-right: 16px !important; - ${(props) => - props.isScrollLocked && - css` - margin-right: 0 !important; - overflow: hidden !important; - `} - } + #modal-scroll > .scroll-body { + ${isMobile && "margin-right: 0 !important"} + padding-right: 16px !important; + ${(props) => + props.isScrollLocked && + css` + margin-right: 0 !important; + overflow: hidden !important; + `} } ${(props) => diff --git a/packages/components/modal-dialog/views/modal-aside.js b/packages/components/modal-dialog/views/modal-aside.js index a6f91e62c1..a93a3ea9aa 100644 --- a/packages/components/modal-dialog/views/modal-aside.js +++ b/packages/components/modal-dialog/views/modal-aside.js @@ -89,6 +89,7 @@ const Modal = ({ {header && ( @@ -104,6 +105,7 @@ const Modal = ({ )} {body && ( Date: Fri, 19 Aug 2022 04:10:49 +0300 Subject: [PATCH 170/293] updated and cleaned up events --- .../components/GlobalEvents/CreateRoomEvent.js | 2 -- .../src/components/GlobalEvents/EditRoomEvent.js | 16 +++------------- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js index ce39ca5acd..f27dcb91d4 100644 --- a/packages/client/src/components/GlobalEvents/CreateRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/CreateRoomEvent.js @@ -29,8 +29,6 @@ const CreateRoomEvent = ({ const [fetchedTags, setFetchedTags] = useState([]); const [isLoading, setIsLoading] = useState(false); - console.log(providers); - const onCreate = async (roomParams) => { console.log(roomParams); diff --git a/packages/client/src/components/GlobalEvents/EditRoomEvent.js b/packages/client/src/components/GlobalEvents/EditRoomEvent.js index 0c5847cc11..b3ce67b117 100644 --- a/packages/client/src/components/GlobalEvents/EditRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/EditRoomEvent.js @@ -23,11 +23,8 @@ const EditRoomEvent = ({ }) => { const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]); const [fetchedTags, setFetchedTags] = useState([]); - const [fetchedImage, setFetchedImage] = useState([]); const [isLoading, setIsLoading] = useState(false); - console.log(item); - const roomId = item.id; const startTags = Object.values(item.tags); const startObjTags = startTags.map((tag, i) => ({ id: i, name: tag })); @@ -44,7 +41,7 @@ const EditRoomEvent = ({ }, isPrivate: false, icon: { - uploadedFile: undefined, //fetchedImage, + uploadedFileSrc: item.icon, tmpFile: "", x: 0.5, y: 0.5, @@ -82,7 +79,6 @@ const EditRoomEvent = ({ if (roomParams.icon.uploadedFile) await uploadRoomLogo(uploadLogoData).then((response) => { const { x, y, width, height } = roomParams.icon; - console.log(x, y, width, height); addLogoToRoom({ tmpFile: response.data, x, y, width, height }); }); @@ -98,16 +94,10 @@ const EditRoomEvent = ({ useEffect(async () => { const tags = await fetchTags(); setFetchedTags(tags); - - await fetch( - "https://wow.zamimg.com/modelviewer/tbc/webthumbs/outfit/94/70494.webp" - ).then((res) => { - const buf = res.arrayBuffer(); - const file = new File([buf], "fetchedImage", { type: "image/png" }); - setFetchedImage(file[0]); - }); }, []); + console.log(item); + return ( Date: Fri, 19 Aug 2022 04:11:00 +0300 Subject: [PATCH 171/293] removed unused file --- .../sub-components/RoomTypeDropdown.js | 70 ------------------- 1 file changed, 70 deletions(-) delete mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown.js diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown.js deleted file mode 100644 index 4a7b8cbde0..0000000000 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown.js +++ /dev/null @@ -1,70 +0,0 @@ -import React, { useState } from "react"; -import styled from "styled-components"; -import { roomTypes } from "../data"; -import RoomType from "./RoomType"; - -const StyledRoomTypeDropdown = styled.div` - display: flex; - flex-direction: column; - width: 100%; - - .dropdown-content-wrapper { - max-width: 100%; - position: relative; - background: #ffffff; - ${(props) => !props.isOpen && "display: none"}; - - .dropdown-content { - margin-top: 4px; - background: #ffffff; - overflow: visible; - z-index: 400; - top: 0; - left: 0; - box-sizing: border-box; - width: 100%; - position: absolute; - display: flex; - flex-direction: column; - padding: 6px 0; - border: 1px solid #d0d5da; - box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12); - border-radius: 6px; - } - } -`; - -const RoomTypeDropdown = ({ t, currentRoom, setRoomType }) => { - const [isOpen, setIsOpen] = useState(false); - const toggleIsOpen = () => setIsOpen(!isOpen); - - return ( - - -
-
- {roomTypes.map((room) => ( - { - setRoomType(room.type); - toggleIsOpen(); - }} - /> - ))} -
-
- - ); -}; - -export default RoomTypeDropdown; From cff96d5a25c52fd9df16565ceab55018d8583ae2 Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 19 Aug 2022 04:12:43 +0300 Subject: [PATCH 172/293] fixed deleted state passing --- .../components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js index 79aaadabb1..10be14d569 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js @@ -89,7 +89,6 @@ const CreateRoomDialog = ({ onClose={onClose} isScrollLocked={isScrollLocked} withFooterBorder - isRoomTypeDropdownOpen={isRoomTypeDropdownOpen} > {isChooseRoomType ? ( From e5e1d966d1929533a3d7a26855adb68a1ea6b573 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 19 Aug 2022 12:37:30 +0300 Subject: [PATCH 173/293] Web: Files: restored paging, added withPaging parameter --- .../Body/RowsView/FilesRowContainer.js | 5 +- .../Section/Body/TableView/TableContainer.js | 7 ++- .../Section/Body/TableView/TableHeader.js | 6 +- .../Body/TilesView/FilesTileContainer.js | 7 ++- .../TilesView/sub-components/TileContainer.js | 1 - packages/client/src/pages/Home/index.js | 11 ++++ .../client/src/store/FilesActionsStore.js | 41 ++++++++----- packages/client/src/store/FilesStore.js | 22 +++---- packages/client/src/store/UploadDataStore.js | 60 +++++++++---------- packages/common/api/files/filter.js | 2 +- packages/common/components/Section/index.js | 4 ++ .../Section/sub-components/section-body.js | 18 ++++-- 12 files changed, 116 insertions(+), 68 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js index 002222c7b4..a621f14a68 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js @@ -69,6 +69,7 @@ const FilesRowContainer = ({ hasMoreFiles, isRooms, selectedFolderId, + withPaging, }) => { useEffect(() => { if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; @@ -93,7 +94,7 @@ const FilesRowContainer = ({ fetchMoreFiles={fetchMoreFiles} hasMoreFiles={hasMoreFiles} draggable - useReactWindow + useReactWindow={!withPaging} selectedFolderId={selectedFolderId} itemHeight={58} > @@ -119,6 +120,7 @@ export default inject( filterTotal, fetchMoreFiles, hasMoreFiles, + withPaging, } = filesStore; const { isVisible: infoPanelVisible } = auth.infoPanelStore; const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; @@ -135,6 +137,7 @@ export default inject( hasMoreFiles, isRooms, selectedFolderId: selectedFolderStore.id, + withPaging, }; } )(observer(FilesRowContainer)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index 38a93a044f..f7eba972bf 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -123,6 +123,7 @@ const Table = ({ filterTotal, isRooms, selectedFolderId, + withPaging, }) => { const [tagCount, setTagCount] = React.useState(null); @@ -184,7 +185,7 @@ const Table = ({ : `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; return ( - + ); } @@ -357,7 +358,7 @@ export default inject( canShare, firstElemChecked, headerBorder, - + withPaging, roomsFilter, fetchRooms, } = filesStore; @@ -385,6 +386,7 @@ export default inject( headerBorder, infoPanelVisible, + withPaging, }; } )( diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js index 90fcc8aded..9f6c756c12 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js @@ -28,7 +28,7 @@ const getThumbSize = (width) => { return `${imgWidth}x300`; }; -const FilesTileContainer = ({ filesList, t, sectionWidth }) => { +const FilesTileContainer = ({ filesList, t, sectionWidth, withPaging }) => { const firstRef = useRef(); const [thumbSize, setThumbSize] = useState(""); const [columnCount, setColumnCount] = useState(null); @@ -77,7 +77,7 @@ const FilesTileContainer = ({ filesList, t, sectionWidth }) => { @@ -108,9 +108,10 @@ const FilesTileContainer = ({ filesList, t, sectionWidth }) => { }; export default inject(({ filesStore }) => { - const { filesList } = filesStore; + const { filesList, withPaging } = filesStore; return { filesList, + withPaging, }; })(observer(FilesTileContainer)); diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js index 9d11da6e7f..391b2e1c8d 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js @@ -305,7 +305,6 @@ TileContainer.propTypes = { }; TileContainer.defaultProps = { - useReactWindow: true, id: "tileContainer", }; diff --git a/packages/client/src/pages/Home/index.js b/packages/client/src/pages/Home/index.js index f17d639a96..dcf991ec6d 100644 --- a/packages/client/src/pages/Home/index.js +++ b/packages/client/src/pages/Home/index.js @@ -493,6 +493,7 @@ class PureHome extends React.Component { secondaryProgressDataStoreAlert, dragging, + tReady, personal, checkedMaintenance, setMaintenanceExist, @@ -501,6 +502,7 @@ class PureHome extends React.Component { showTitle, showFilter, frameConfig, + withPaging, } = this.props; if (window.parent && !frameConfig) { @@ -512,6 +514,7 @@ class PureHome extends React.Component {
+ + {withPaging && ( + + + + )}
); @@ -629,6 +638,7 @@ export default inject( createRoom, refreshFiles, setViewAs, + withPaging, } = filesStore; const { @@ -765,6 +775,7 @@ export default inject( createRoom, refreshFiles, setViewAs, + withPaging, }; } )(withRouter(observer(Home))); diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js index ebad96eb6f..658ebbf862 100644 --- a/packages/client/src/store/FilesActionsStore.js +++ b/packages/client/src/store/FilesActionsStore.js @@ -281,9 +281,6 @@ class FilesActionStore { }; await this.uploadDataStore.loopFilesOperations(data, pbData); - //this.updateCurrentFolder(fileIds, folderIds, false); - this.updateFilesAfterDelete(folderIds); - const showToast = () => { if (isRecycleBinFolder) { return toastr.success(translations.deleteFromTrash); @@ -298,7 +295,13 @@ class FilesActionStore { return toastr.success(translations.FolderRemoved); }; - this.filesStore.removeFiles(fileIds, folderIds, showToast); + if (this.filesStore.withPaging) { + this.updateCurrentFolder(fileIds, folderIds, false); + showToast(); + } else { + this.updateFilesAfterDelete(folderIds); + this.filesStore.removeFiles(fileIds, folderIds, showToast); + } if (currentFolderId) { const { socketHelper } = this.authStore.settingsStore; @@ -618,12 +621,16 @@ class FilesActionStore { if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; await this.uploadDataStore.loopFilesOperations(data, pbData); - //this.updateCurrentFolder([itemId]); - this.updateFilesAfterDelete(); - this.filesStore.removeFiles([itemId], null, () => - toastr.success(translations.successRemoveFile) - ); + if (this.filesStore.withPaging) { + this.updateCurrentFolder([itemId]); + toastr.success(translations.successRemoveFile); + } else { + this.updateFilesAfterDelete(); + this.filesStore.removeFiles([itemId], null, () => + toastr.success(translations.successRemoveFile) + ); + } }); } else if (isRoom) { const items = Array.isArray(itemId) ? itemId : [itemId]; @@ -645,11 +652,17 @@ class FilesActionStore { if (res[0]?.error) return Promise.reject(res[0].error); const data = res[0] ? res[0] : null; await this.uploadDataStore.loopFilesOperations(data, pbData); - //this.updateCurrentFolder(null, [itemId]); - this.updateFilesAfterDelete([itemId]); - this.filesStore.removeFiles([itemId], null, () => - toastr.success(translations.successRemoveFolder) - ); + + if (this.filesStore.withPaging) { + this.updateCurrentFolder(null, [itemId]); + toastr.success(translations.successRemoveFolder); + } else { + this.updateFilesAfterDelete([itemId]); + this.filesStore.removeFiles([itemId], null, () => + toastr.success(translations.successRemoveFolder) + ); + } + getIsEmptyTrash(); }); } diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 05f0186c2e..42e60fb4a1 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -92,6 +92,7 @@ class FilesStore { isHidePagination = false; trashIsEmpty = false; filesIsLoading = false; + withPaging = false; constructor( authStore, @@ -131,9 +132,9 @@ class FilesStore { const newFiles = [file, ...this.files]; - // if (newFiles.length > this.filter.pageCount) { - // newFiles.pop(); // Remove last - // } + if (newFiles.length > this.filter.pageCount && this.withPaging) { + newFiles.pop(); // Remove last + } this.setFiles(newFiles); } @@ -179,7 +180,10 @@ class FilesStore { return index !== foundIndex; }) ); - this.filter.total -= 1; + + const newFilter = this.filter.clone(); + newFilter.total -= 1; + this.setFilter(newFilter); // Hide pagination when deleting files runInAction(() => { @@ -294,11 +298,6 @@ class FilesStore { }; setViewAs = async (viewAs) => { - // this.setIsLoading(true); - // await this.fetchFiles(this.selectedFolderStore.id, null, true); - - // this.setIsLoading(false); - this.viewAs = viewAs; localStorage.setItem("viewAs", viewAs); }; @@ -590,6 +589,7 @@ class FilesStore { }; setFilter = (filter) => { + if (!this.withPaging) filter.pageCount = 100; this.filter = filter; }; @@ -681,7 +681,7 @@ class FilesStore { filterData.sortOrder = splitFilter[2]; } - filterData.page = 0; + if (!this.withPaging) filterData.page = 0; setSelectedNode([folderId + ""]); @@ -1623,6 +1623,8 @@ class FilesStore { }; scrollToTop = () => { + if (this.withPaging) return; + const scrollElm = isMobileOnly ? document.querySelector("#customScrollBar > .scroll-body") : document.querySelector("#sectionScroll > .scroll-body"); diff --git a/packages/client/src/store/UploadDataStore.js b/packages/client/src/store/UploadDataStore.js index 1f2f1e92ce..249fc5b398 100644 --- a/packages/client/src/store/UploadDataStore.js +++ b/packages/client/src/store/UploadDataStore.js @@ -581,13 +581,14 @@ class UploadDataStore { filter, setFilter, } = this.filesStore; + if (window.location.pathname.indexOf("/history") === -1) { const newFiles = files; const newFolders = folders; const path = currentFile.path ? currentFile.path.slice() : []; - // const fileIndex = newFiles.findIndex( - // (x) => x.id === currentFile.fileInfo.id - // ); + const fileIndex = newFiles.findIndex( + (x) => x.id === currentFile.fileInfo.id + ); let folderInfo = null; const index = path.findIndex((x) => x === this.selectedFolderStore.id); @@ -621,19 +622,18 @@ class UploadDataStore { setFilter(newFilter); } } else { - // if (currentFile && currentFile.fileInfo) { - // console.log("addNewFile", fileIndex); - // if (fileIndex === -1) { - // newFiles.unshift(currentFile.fileInfo); - // setFiles(newFiles); - // const newFilter = filter; - // newFilter.total += 1; - // setFilter(newFilter); - // } else if (!this.settingsStore.storeOriginalFiles) { - // newFiles[fileIndex] = currentFile.fileInfo; - // setFiles(newFiles); - // } - // } + if (currentFile && currentFile.fileInfo) { + if (fileIndex === -1) { + newFiles.unshift(currentFile.fileInfo); + setFiles(newFiles); + const newFilter = filter; + newFilter.total += 1; + setFilter(newFilter); + } else if (!this.settingsStore.storeOriginalFiles) { + newFiles[fileIndex] = currentFile.fileInfo; + setFiles(newFiles); + } + } } }; @@ -641,7 +641,7 @@ class UploadDataStore { filter.filterType || filter.authorType || filter.search || - filter.page !== 0; + (this.filesStore.withPaging && filter.page !== 0); if ((!currentFile && !folderInfo) || isFiltered) return; if (folderInfo && this.selectedFolderStore.id === folderInfo.id) return; @@ -654,17 +654,17 @@ class UploadDataStore { } } - // if (filter.total >= filter.pageCount) { - // if (files.length) { - // fileIndex === -1 && newFiles.pop(); - // addNewFile(); - // } else { - // newFolders.pop(); - // addNewFile(); - // } - // } else { - addNewFile(); - // } + if (filter.total >= filter.pageCount && this.filesStore.withPaging) { + if (files.length) { + fileIndex === -1 && newFiles.pop(); + addNewFile(); + } else { + newFolders.pop(); + addNewFile(); + } + } else { + addNewFile(); + } if (!!folderInfo) { const { @@ -927,7 +927,7 @@ class UploadDataStore { }; finishUploadFiles = () => { - //const { fetchFiles, filter } = this.filesStore; + const { fetchFiles, filter, withPaging } = this.filesStore; const totalErrorsCount = sumBy(this.files, (f) => (f.error ? 1 : 0)); @@ -948,7 +948,7 @@ class UploadDataStore { if (this.files.length > 0) { const toFolderId = this.files[0]?.toFolderId; - //fetchFiles(toFolderId, filter); + withPaging && fetchFiles(toFolderId, filter); if (toFolderId) { const { socketHelper } = this.filesStore.settingsStore; diff --git a/packages/common/api/files/filter.js b/packages/common/api/files/filter.js index eabf6b2fc8..c178b8ed81 100644 --- a/packages/common/api/files/filter.js +++ b/packages/common/api/files/filter.js @@ -2,7 +2,7 @@ import { getObjectByLocation, toUrlParams } from "../../utils"; import queryString from "query-string"; const DEFAULT_PAGE = 0; -const DEFAULT_PAGE_COUNT = 100; +const DEFAULT_PAGE_COUNT = 25; const DEFAULT_TOTAL = 0; const DEFAULT_SORT_BY = "DateAndTime"; const DEFAULT_SORT_ORDER = "descending"; diff --git a/packages/common/components/Section/index.js b/packages/common/components/Section/index.js index 4b419d74ac..aa1fac1978 100644 --- a/packages/common/components/Section/index.js +++ b/packages/common/components/Section/index.js @@ -224,6 +224,7 @@ class Section extends React.Component { isInfoPanelAvailable, settingsStudio, clearUploadedFilesHistory, + withPaging, } = this.props; let sectionHeaderContent = null; @@ -362,6 +363,7 @@ class Section extends React.Component { viewAs={viewAs} isHomepage={isHomepage} settingsStudio={settingsStudio} + withPaging={withPaging} > {isMobile && ( - viewAs === "tile" ? "19px 0 16px 24px" : "19px 0 16px 8px"}; + padding: ${({ viewAs, withPaging }) => + viewAs === "tile" + ? "19px 0 16px 24px" + : withPaging + ? "19px 0 16px 24px" + : "19px 0 16px 8px"}; } `} `; const paddingStyles = css` - padding: ${({ viewAs }) => - viewAs === "row" ? "19px 3px 16px 0px" : "19px 3px 16px 20px"}; + padding: ${({ viewAs, withPaging }) => + viewAs === "row" + ? withPaging + ? "19px 3px 16px 16px" + : "19px 3px 16px 0px" + : "19px 3px 16px 20px"}; ${settingsStudioStyles}; @@ -208,6 +216,7 @@ class SectionBody extends React.Component { isDesktop, isHomepage, settingsStudio, + withPaging, } = this.props; const focusProps = autoFocus @@ -227,6 +236,7 @@ class SectionBody extends React.Component { isLoaded={isLoaded} isDesktop={isDesktop} settingsStudio={settingsStudio} + withPaging={withPaging} className="section-body" > {withScroll ? ( From 76425d413491d13dec7a275d2a4ff6a0d622c11c Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Fri, 19 Aug 2022 14:11:58 +0300 Subject: [PATCH 174/293] Web: Files: fixed setViewAs --- packages/client/src/store/FilesStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 42e60fb4a1..622402c3b4 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -297,7 +297,7 @@ class FilesStore { this.isLoaded = isLoaded; }; - setViewAs = async (viewAs) => { + setViewAs = (viewAs) => { this.viewAs = viewAs; localStorage.setItem("viewAs", viewAs); }; From 8e9d2c6d933f2994231d11576fe9f2570ecbd7d8 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 22 Aug 2022 14:30:42 +0300 Subject: [PATCH 175/293] Web: Common: upgraded react-selecto --- packages/common/components/Section/index.js | 7 +++- .../Section/sub-components/section-body.js | 6 +++ packages/common/package.json | 2 +- yarn.lock | 40 +++++++++---------- 4 files changed, 32 insertions(+), 23 deletions(-) diff --git a/packages/common/components/Section/index.js b/packages/common/components/Section/index.js index aa1fac1978..a2dfa27a6c 100644 --- a/packages/common/components/Section/index.js +++ b/packages/common/components/Section/index.js @@ -150,6 +150,7 @@ class Section extends React.Component { this.intervalHandler = null; this.scroll = null; + this.selectoRef = React.createRef(null); } componentDidUpdate(prevProps) { @@ -364,6 +365,7 @@ class Section extends React.Component { isHomepage={isHomepage} settingsStudio={settingsStudio} withPaging={withPaging} + selectoRef={this.selectoRef} > {isMobile && ( { + this.props.selectoRef.current.checkScroll(); + return e; + }; + render() { //console.log(" SectionBody render" ); const { @@ -245,6 +250,7 @@ class SectionBody extends React.Component { id="sectionScroll" scrollclass="section-scroll" stype="mediumBlack" + onScroll={this.onScroll} >
diff --git a/packages/common/package.json b/packages/common/package.json index 4210e56374..ec17ecdf14 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -32,7 +32,7 @@ "react-resize-detector": "^6.7.6", "react-router": "^5.2.1", "react-router-dom": "^5.3.0", - "react-selecto": "^1.12.0", + "react-selecto": "^1.18.2", "react-tooltip": "^4.2.21", "react-viewer": "^3.2.2", "react-virtualized-auto-sizer": "^1.0.6", diff --git a/yarn.lock b/yarn.lock index d9a6763a4a..fc5f8eabdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2067,7 +2067,7 @@ __metadata: react-resize-detector: ^6.7.6 react-router: ^5.2.1 react-router-dom: ^5.3.0 - react-selecto: ^1.12.0 + react-selecto: ^1.18.2 react-tooltip: ^4.2.21 react-viewer: ^3.2.2 react-virtualized-auto-sizer: ^1.0.6 @@ -3591,13 +3591,13 @@ __metadata: languageName: node linkType: hard -"@scena/dragscroll@npm:^1.1.1": - version: 1.2.0 - resolution: "@scena/dragscroll@npm:1.2.0" +"@scena/dragscroll@npm:^1.2.1": + version: 1.2.1 + resolution: "@scena/dragscroll@npm:1.2.1" dependencies: "@daybrush/utils": 1.6.0 "@scena/event-emitter": ^1.0.2 - checksum: cac9db269d865a0acacf836327d26966d8acf10764bdeb52c4be5953797a805169dbcd6df15d090864046c6a2ed6bc49a0e22309b20e36dda8e73844e6833fa1 + checksum: 217b0612b0b5d2e721cd41b7534cc1b831aca236a4256b30bdeb965b3b0b7cf9f3934801a7158cb38483242e2568f8b734eeccfaee43b5df4e5df9ead7653dd5 languageName: node linkType: hard @@ -12711,13 +12711,13 @@ __metadata: languageName: node linkType: hard -"gesto@npm:^1.9.0": - version: 1.11.1 - resolution: "gesto@npm:1.11.1" +"gesto@npm:^1.11.1": + version: 1.12.1 + resolution: "gesto@npm:1.12.1" dependencies: "@daybrush/utils": ^1.7.1 "@scena/event-emitter": ^1.0.2 - checksum: cfd0c17bc84865f062b8ae03a99fe21373239a5e0a593d185a0d0713d3dc0ebf21738859b7473c7949ae9b79f40e02188d5c384656bab6932e439c380ed04a91 + checksum: e9b3f461e3ac05cc77187052660dbd0efa0aa7922bc650ced2d1d24ee77633046a92b8093eb584475bed1e3e82236999c86aef7007f949d55b4cce45c1d2bc5b languageName: node linkType: hard @@ -20475,12 +20475,12 @@ __metadata: languageName: node linkType: hard -"react-selecto@npm:^1.12.0": - version: 1.17.0 - resolution: "react-selecto@npm:1.17.0" +"react-selecto@npm:^1.18.2": + version: 1.18.2 + resolution: "react-selecto@npm:1.18.2" dependencies: - selecto: ~1.17.0 - checksum: 135bc3f9100a6631232b408ecb4ce008219ccce5b106ccc1cf03c7a0aba62cbe8bdf0427d88db5323988f181affc1635adb448f149eed93b7aa72d24c1a41e35 + selecto: ~1.18.2 + checksum: f1207f66b0a806e0129e9e611b720c160f5362a28cc9c381f8428fca0c4dc1df92a0a03c31f3b61a6c3de02f615eabbcf43cb785d908103548cc5ef3d1acda27 languageName: node linkType: hard @@ -21842,21 +21842,21 @@ __metadata: languageName: node linkType: hard -"selecto@npm:~1.17.0": - version: 1.17.0 - resolution: "selecto@npm:1.17.0" +"selecto@npm:~1.18.2": + version: 1.18.2 + resolution: "selecto@npm:1.18.2" dependencies: "@daybrush/utils": ^1.7.1 "@egjs/children-differ": ^1.0.1 - "@scena/dragscroll": ^1.1.1 + "@scena/dragscroll": ^1.2.1 "@scena/event-emitter": ^1.0.5 css-styled: ^1.0.0 css-to-mat: ^1.0.3 framework-utils: ^1.1.0 - gesto: ^1.9.0 + gesto: ^1.11.1 keycon: ^1.2.0 overlap-area: ^1.1.0 - checksum: ad288ee4be3bc2610925010a5a215370e0664f2075d7157ef2c020d08ac7244e9d6818fccb67998dbd655be8c5b9f2912cac329b8a9961787c9e86873adba47d + checksum: 192221746c8688c11e20ea1fc5918de8674e5eeba2b6d3a15324fb6befec3005abfaa42625eda36095f79df5bc76036576e8aa9a29a0a05476e1528666809b1e languageName: node linkType: hard From 1f2cceda94708bd5b0b9f70e17fe55364e05f180 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 22 Aug 2022 14:38:00 +0300 Subject: [PATCH 176/293] Web: Common: hidden Selecto for infinite scroll --- packages/common/components/Section/index.js | 2 +- .../common/components/Section/sub-components/section-body.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/common/components/Section/index.js b/packages/common/components/Section/index.js index a2dfa27a6c..f358d0e12e 100644 --- a/packages/common/components/Section/index.js +++ b/packages/common/components/Section/index.js @@ -502,7 +502,7 @@ class Section extends React.Component { return ( <> {renderSection()} - {!isMobile && uploadFiles && !dragging && ( + {!isMobile && uploadFiles && !dragging && withPaging && ( { - this.props.selectoRef.current.checkScroll(); + this.props.selectoRef.current && + this.props.selectoRef.current.checkScroll(); return e; }; From c5a78fafd373541d123e418b0d253b10a507612a Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 22 Aug 2022 16:15:28 +0300 Subject: [PATCH 177/293] updated connect diaolog to work with room creation --- .../components/dialogs/ConnectDialog/index.js | 54 ++++++++++++------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/packages/client/src/components/dialogs/ConnectDialog/index.js b/packages/client/src/components/dialogs/ConnectDialog/index.js index 1a387eca5d..5a38c3f4b7 100644 --- a/packages/client/src/components/dialogs/ConnectDialog/index.js +++ b/packages/client/src/components/dialogs/ConnectDialog/index.js @@ -30,6 +30,8 @@ const PureConnectDialogContainer = (props) => { personal, getSubfolders, folderFormValidation, + roomCreation, + setSaveThirdpartyResponse, } = props; const { corporate, @@ -132,7 +134,9 @@ const PureConnectDialogContainer = (props) => { provider_key || key, provider_id ) - .then(async () => { + .then(async (res) => { + setSaveThirdpartyResponse(res); + const folderId = isCorporate ? commonFolderId : myFolderId; const subfolders = await getSubfolders(folderId); const node = treeFolders.find((x) => x.id === folderId); @@ -211,7 +215,12 @@ const PureConnectDialogContainer = (props) => { {isAccount ? ( - +
-
+
{t("Common:Delete")} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js index 6ef316b49e..acc041d1dd 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/PreviewTile.js @@ -31,6 +31,7 @@ const StyledPreviewTile = styled.div` border: 1px solid #eceef1; border-radius: 6px; img { + user-select: none; height: 32px; width: ${(props) => (props.isGeneratedPreview ? "32px" : "auto")}; border-radius: 6px; @@ -43,6 +44,7 @@ const StyledPreviewTile = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + user-select: none; } } .tile-tags { @@ -54,6 +56,7 @@ const StyledPreviewTile = styled.div` padding: 15px; .type_tag { + user-select: none; box-sizing: border-box; max-width: 100%; white-space: nowrap; @@ -77,7 +80,7 @@ const PreviewTile = ({ t, title, previewIcon, tags, defaultTagLabel }) => { ) : ( { return ( -
-
+
{tags.length ? ( - + ) : ( Date: Thu, 25 Aug 2022 21:31:05 +0300 Subject: [PATCH 244/293] removed for-dev console.log --- packages/client/src/components/dialogs/ConnectDialog/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/client/src/components/dialogs/ConnectDialog/index.js b/packages/client/src/components/dialogs/ConnectDialog/index.js index 3b107c8907..c15d2c1bb7 100644 --- a/packages/client/src/components/dialogs/ConnectDialog/index.js +++ b/packages/client/src/components/dialogs/ConnectDialog/index.js @@ -385,8 +385,6 @@ export default inject( setSaveThirdpartyResponse, } = dialogsStore; - console.log(roomCreation); - return { selectedFolderId: id, selectedFolderFolders: folders, From 1be967fe3f53545dfd19b2ef885390be60a3a401 Mon Sep 17 00:00:00 2001 From: MaksimChegulov Date: Fri, 26 Aug 2022 13:07:27 +0300 Subject: [PATCH 245/293] Files: added id conversion in base64 string --- .../Core/Thirdparty/Sharpbox/SharpBoxDaoBase.cs | 13 +++++++++++-- products/ASC.Files/Core/GlobalUsings.cs | 3 ++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/products/ASC.Files/Core/Core/Thirdparty/Sharpbox/SharpBoxDaoBase.cs b/products/ASC.Files/Core/Core/Thirdparty/Sharpbox/SharpBoxDaoBase.cs index 9c83a7310b..0b4b48e037 100644 --- a/products/ASC.Files/Core/Core/Thirdparty/Sharpbox/SharpBoxDaoBase.cs +++ b/products/ASC.Files/Core/Core/Thirdparty/Sharpbox/SharpBoxDaoBase.cs @@ -219,7 +219,16 @@ internal abstract class SharpBoxDaoBase : ThirdPartyProviderDao Date: Fri, 26 Aug 2022 13:08:03 +0300 Subject: [PATCH 246/293] Files: fix rename for SharpBox, SharePoint providers --- .../ASC.Files/Server/Helpers/FilesControllerHelper.cs | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/products/ASC.Files/Server/Helpers/FilesControllerHelper.cs b/products/ASC.Files/Server/Helpers/FilesControllerHelper.cs index d74614ae8f..8dcdefd9b6 100644 --- a/products/ASC.Files/Server/Helpers/FilesControllerHelper.cs +++ b/products/ASC.Files/Server/Helpers/FilesControllerHelper.cs @@ -235,17 +235,20 @@ public class FilesControllerHelper : FilesHelperBase public async Task> UpdateFileAsync(T fileId, string title, int lastVersion) { + File file = null; + if (!string.IsNullOrEmpty(title)) { - await _fileStorageService.FileRenameAsync(fileId, title); + file = await _fileStorageService.FileRenameAsync(fileId, title); } if (lastVersion > 0) { - await _fileStorageService.UpdateToVersionAsync(fileId, lastVersion); + var result = await _fileStorageService.UpdateToVersionAsync(fileId, lastVersion); + file = result.Key; } - return await GetFileInfoAsync(fileId); + return await GetFileInfoAsync(file.Id); } public async Task> UpdateFileStreamAsync(Stream file, T fileId, string fileExtension, bool encrypted = false, bool forcesave = false) From 4797576a0c4910a16d5edf157f06f1636bf98a5b Mon Sep 17 00:00:00 2001 From: MaksimChegulov Date: Fri, 26 Aug 2022 13:54:22 +0300 Subject: [PATCH 247/293] Files: fix open in editor --- products/ASC.Files/Core/Utils/FileShareLink.cs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/products/ASC.Files/Core/Utils/FileShareLink.cs b/products/ASC.Files/Core/Utils/FileShareLink.cs index 76fe7640fd..b349e7bb61 100644 --- a/products/ASC.Files/Core/Utils/FileShareLink.cs +++ b/products/ASC.Files/Core/Utils/FileShareLink.cs @@ -111,7 +111,14 @@ public class FileShareLink } var fileId = Parse(doc); - var file = await fileDao.GetFileAsync(fileId); + + File file = null; + + if (!EqualityComparer.Default.Equals(fileId, default(T))) + { + file = await fileDao.GetFileAsync(fileId); + } + if (file == null) { return (FileShare.Restrict, file); From 5351719175047dc64e2c101c46629bcbcf7c3200 Mon Sep 17 00:00:00 2001 From: mushka Date: Fri, 26 Aug 2022 20:12:48 +0300 Subject: [PATCH 248/293] new thirdparty connect btn stays diabled until provedr is chosen --- .../sub-components/ThirdPartyStorage/ThirpartyComboBox.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js index 2a83cf2110..a97bb8982f 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js @@ -209,6 +209,7 @@ const ThirpartyComboBox = ({
)} - + ); }; From d4ebaa1b498c0f7be0dcdad427505db84e5b5383 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Aug 2022 14:39:30 +0300 Subject: [PATCH 281/293] Web: Files: added logs to hasMoreFiles --- packages/client/src/store/FilesStore.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index e4dccf1b68..d1c63046ef 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -2587,6 +2587,13 @@ class FilesStore { const filterTotal = isRoom ? this.roomsFilterTotal : this.filterTotal; + console.log("hasMoreFiles isRoom", isRoom); + console.log("hasMoreFiles filesList", this.filesList.length); + console.log("hasMoreFiles this.filter.total", this.filter.total); + console.log("hasMoreFiles filterTotal", filterTotal); + console.log("hasMoreFiles", this.filesList.length < filterTotal); + console.log("----------------------------"); + return this.filesList.length < filterTotal; } From 34969029a0b25f0363bf95d68f6deecde66989d6 Mon Sep 17 00:00:00 2001 From: pavelbannov Date: Mon, 29 Aug 2022 15:27:50 +0300 Subject: [PATCH 282/293] fixed warnings --- common/ASC.Data.Storage/S3/S3Storage.cs | 16 ++++++++-------- .../Serializers/ProtobufSerializer.cs | 12 ++++++++---- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/common/ASC.Data.Storage/S3/S3Storage.cs b/common/ASC.Data.Storage/S3/S3Storage.cs index 96b1c6f1bc..7240e8ad3e 100644 --- a/common/ASC.Data.Storage/S3/S3Storage.cs +++ b/common/ASC.Data.Storage/S3/S3Storage.cs @@ -24,9 +24,9 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -using Amazon.S3.Internal; using Amazon.Extensions.S3.Encryption; using Amazon.Extensions.S3.Encryption.Primitives; +using Amazon.S3.Internal; namespace ASC.Data.Storage.S3; @@ -47,7 +47,7 @@ public class S3Storage : BaseStorage private string _serviceurl; private bool _forcepathstyle; private string _secretAccessKeyId = string.Empty; - private ServerSideEncryptionMethod _sse = ServerSideEncryptionMethod.AES256; + private readonly ServerSideEncryptionMethod _sse = ServerSideEncryptionMethod.AES256; private bool _useHttp = true; private bool _lowerCasing = true; private bool _revalidateCloudFront; @@ -55,7 +55,7 @@ public class S3Storage : BaseStorage private string _subDir = ""; private EncryptionMethod _encryptionMethod = EncryptionMethod.None; - private string _encryptionKey = null; + private string _encryptionKey; public S3Storage( TempStream tempStream, @@ -184,17 +184,17 @@ public class S3Storage : BaseStorage return SaveAsync(domain, path, stream, contentType, contentDisposition, ACL.Auto); } - private bool EnableQuotaCheck(string domain) - { - return (QuotaController != null) && !domain.EndsWith("_temp"); - } + private bool EnableQuotaCheck(string domain) + { + return (QuotaController != null) && !domain.EndsWith("_temp"); + } public async Task SaveAsync(string domain, string path, Stream stream, string contentType, string contentDisposition, ACL acl, string contentEncoding = null, int cacheDays = 5) { var buffered = _tempStream.GetBuffered(stream); - if (EnableQuotaCheck(domain)) + if (EnableQuotaCheck(domain)) { QuotaController.QuotaUsedCheck(buffered.Length); } diff --git a/common/ASC.EventBus/Serializers/ProtobufSerializer.cs b/common/ASC.EventBus/Serializers/ProtobufSerializer.cs index 3024d05136..4b6754b280 100644 --- a/common/ASC.EventBus/Serializers/ProtobufSerializer.cs +++ b/common/ASC.EventBus/Serializers/ProtobufSerializer.cs @@ -45,7 +45,11 @@ public class ProtobufSerializer : IIntegrationEventSerializer private void BuildTypeModelFromAssembly(Assembly assembly) { - if (!assembly.GetName().Name.StartsWith("ASC.")) return; + var name = assembly.GetName().Name; + if (name == null || !name.StartsWith("ASC.")) + { + return; + } var types = assembly.GetExportedTypes() .Where(t => t.GetCustomAttributes().Any()); @@ -64,7 +68,7 @@ public class ProtobufSerializer : IIntegrationEventSerializer { return Array.Empty(); } - + using var ms = new MemoryStream(); Serializer.Serialize(ms, item); @@ -74,7 +78,7 @@ public class ProtobufSerializer : IIntegrationEventSerializer /// public T Deserialize(byte[] serializedObject) - { + { using var ms = new MemoryStream(serializedObject); return Serializer.Deserialize(ms); @@ -107,7 +111,7 @@ public class ProtobufSerializer : IIntegrationEventSerializer if (!baseType.GetSubtypes().Any(s => s.DerivedType == itemType)) { baseType.AddSubType(_baseFieldNumber, protoType); - + _baseFieldNumber++; _processedProtoTypes.Add(protoType.FullName); From 8f286125196087e3310bae599c864d7a036faf8c Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Aug 2022 15:41:13 +0300 Subject: [PATCH 283/293] Web: Files: fixed hasMoreFiles --- packages/client/src/store/FilesStore.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index d1c63046ef..8c47a1d996 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -2585,14 +2585,14 @@ class FilesStore { const { Shared, Archive } = CategoryType; const isRoom = this.categoryType == Shared || this.categoryType == Archive; - const filterTotal = isRoom ? this.roomsFilterTotal : this.filterTotal; + const filterTotal = isRoom ? this.roomsFilterTotal : this.filter.total; - console.log("hasMoreFiles isRoom", isRoom); - console.log("hasMoreFiles filesList", this.filesList.length); - console.log("hasMoreFiles this.filter.total", this.filter.total); - console.log("hasMoreFiles filterTotal", filterTotal); - console.log("hasMoreFiles", this.filesList.length < filterTotal); - console.log("----------------------------"); + // console.log("hasMoreFiles isRoom", isRoom); + // console.log("hasMoreFiles filesList", this.filesList.length); + // console.log("hasMoreFiles this.filter.total", this.filter.total); + // console.log("hasMoreFiles filterTotal", filterTotal); + // console.log("hasMoreFiles", this.filesList.length < filterTotal); + // console.log("----------------------------"); return this.filesList.length < filterTotal; } From f9c40397d574112aa7eedc8901d1ba0d1bccaeb5 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Aug 2022 15:43:52 +0300 Subject: [PATCH 284/293] Web: Files: restore hasMoreFiles logs --- packages/client/src/store/FilesStore.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 8c47a1d996..4e849145a7 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -2587,12 +2587,12 @@ class FilesStore { const filterTotal = isRoom ? this.roomsFilterTotal : this.filter.total; - // console.log("hasMoreFiles isRoom", isRoom); - // console.log("hasMoreFiles filesList", this.filesList.length); - // console.log("hasMoreFiles this.filter.total", this.filter.total); - // console.log("hasMoreFiles filterTotal", filterTotal); - // console.log("hasMoreFiles", this.filesList.length < filterTotal); - // console.log("----------------------------"); + console.log("hasMoreFiles isRoom", isRoom); + console.log("hasMoreFiles filesList", this.filesList.length); + console.log("hasMoreFiles this.filter.total", this.filter.total); + console.log("hasMoreFiles filterTotal", filterTotal); + console.log("hasMoreFiles", this.filesList.length < filterTotal); + console.log("----------------------------"); return this.filesList.length < filterTotal; } From 20b6c667fdd0f9f934e65280b414c4de52278709 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Aug 2022 15:49:02 +0300 Subject: [PATCH 285/293] Web: Files: fixed roomsFilter total --- packages/client/src/store/FilesStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 4e849145a7..b862f2a850 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -2585,7 +2585,7 @@ class FilesStore { const { Shared, Archive } = CategoryType; const isRoom = this.categoryType == Shared || this.categoryType == Archive; - const filterTotal = isRoom ? this.roomsFilterTotal : this.filter.total; + const filterTotal = isRoom ? this.roomsFilter.total : this.filter.total; console.log("hasMoreFiles isRoom", isRoom); console.log("hasMoreFiles filesList", this.filesList.length); From 2d91c421943c773c0d26381d0358ff4f7b08cbca Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Aug 2022 16:13:24 +0300 Subject: [PATCH 286/293] Web: Files: fixed filterTotal --- .../pages/Home/Section/Body/RowsView/FilesRowContainer.js | 3 ++- .../pages/Home/Section/Body/TableView/TableContainer.js | 3 ++- .../Section/Body/TilesView/sub-components/InfiniteGrid.js | 7 ++++++- packages/client/src/store/FilesStore.js | 1 + 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js index a621f14a68..e5864e1e6c 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js @@ -121,6 +121,7 @@ export default inject( fetchMoreFiles, hasMoreFiles, withPaging, + roomsFilterTotal, } = filesStore; const { isVisible: infoPanelVisible } = auth.infoPanelStore; const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; @@ -132,7 +133,7 @@ export default inject( viewAs, setViewAs, infoPanelVisible, - filterTotal, + filterTotal: isRooms ? roomsFilterTotal : filterTotal, fetchMoreFiles, hasMoreFiles, isRooms, diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index 84738b5391..df00fb6b77 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -271,6 +271,7 @@ export default inject( hasMoreFiles, filterTotal, withPaging, + roomsFilterTotal, } = filesStore; return { @@ -284,7 +285,7 @@ export default inject( infoPanelVisible, fetchMoreFiles, hasMoreFiles, - filterTotal, + filterTotal: isRooms ? roomsFilterTotal : filterTotal, isRooms, selectedFolderId: selectedFolderStore.id, withPaging, diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js index 4975aa3cac..905a567b24 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js @@ -182,14 +182,19 @@ export default inject(({ filesStore, selectedFolderStore }) => { filterTotal, fetchMoreFiles, getCountTilesInRow, + roomsFilterTotal, } = filesStore; const filesLength = filesList.length; + const isRooms = + isRoomsFolder || + isArchiveFolder || + window.location.href.includes("/rooms?"); return { filesList, hasMoreFiles, - filterTotal, + filterTotal: isRooms ? roomsFilterTotal : filterTotal, fetchMoreFiles, filesLength, getCountTilesInRow, diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index b862f2a850..e1d57331cb 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -2590,6 +2590,7 @@ class FilesStore { console.log("hasMoreFiles isRoom", isRoom); console.log("hasMoreFiles filesList", this.filesList.length); console.log("hasMoreFiles this.filter.total", this.filter.total); + console.log("hasMoreFiles this.roomsFilter.total", this.roomsFilter.total); console.log("hasMoreFiles filterTotal", filterTotal); console.log("hasMoreFiles", this.filesList.length < filterTotal); console.log("----------------------------"); From 39a6776066b55bc13f26f35bb8a2e6a9f22c2781 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Aug 2022 16:18:18 +0300 Subject: [PATCH 287/293] Web: Files: fixed Tile view --- .../TilesView/sub-components/InfiniteGrid.js | 52 ++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js index 905a567b24..bc4f088f3b 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js @@ -175,29 +175,33 @@ const InfiniteGrid = (props) => { ); }; -export default inject(({ filesStore, selectedFolderStore }) => { - const { - filesList, - hasMoreFiles, - filterTotal, - fetchMoreFiles, - getCountTilesInRow, - roomsFilterTotal, - } = filesStore; +export default inject( + ({ filesStore, selectedFolderStore, treeFoldersStore }) => { + const { + filesList, + hasMoreFiles, + filterTotal, + fetchMoreFiles, + getCountTilesInRow, + roomsFilterTotal, + } = filesStore; - const filesLength = filesList.length; - const isRooms = - isRoomsFolder || - isArchiveFolder || - window.location.href.includes("/rooms?"); + const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; - return { - filesList, - hasMoreFiles, - filterTotal: isRooms ? roomsFilterTotal : filterTotal, - fetchMoreFiles, - filesLength, - getCountTilesInRow, - selectedFolderId: selectedFolderStore.id, - }; -})(observer(InfiniteGrid)); + const filesLength = filesList.length; + const isRooms = + isRoomsFolder || + isArchiveFolder || + window.location.href.includes("/rooms?"); + + return { + filesList, + hasMoreFiles, + filterTotal: isRooms ? roomsFilterTotal : filterTotal, + fetchMoreFiles, + filesLength, + getCountTilesInRow, + selectedFolderId: selectedFolderStore.id, + }; + } +)(observer(InfiniteGrid)); From 091f90d2ff8868e50ed828de7c269b3cd1bb19d5 Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Mon, 29 Aug 2022 16:28:54 +0300 Subject: [PATCH 288/293] Web: Added missed import. --- .../categories/data-management/backup/manual-backup/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js index 5d7f600709..23d88810bb 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js @@ -11,7 +11,7 @@ import ThirdPartyModule from "./sub-components/ThirdPartyModule"; import RoomsModule from "./sub-components/RoomsModule"; import ThirdPartyStorageModule from "./sub-components/ThirdPartyStorageModule"; import { StyledModules, StyledManualBackup } from "./../StyledBackup"; -import { getFromLocalStorage } from "../../../../utils"; +import { getFromLocalStorage, saveToLocalStorage } from "../../../../utils"; //import { getThirdPartyCommonFolderTree } from "@docspace/common/api/files"; import DataBackupLoader from "@docspace/common/components/Loaders/DataBackupLoader"; import { From ed503875a246ce957b60ad38b0fa09d66a74fb20 Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Mon, 29 Aug 2022 16:40:54 +0300 Subject: [PATCH 289/293] Web: ManualBackup: Fixed memory leak. --- .../panels/SelectFolderInput/index.js | 47 +++++++++++-------- .../sub-components/RoomsModule.js | 15 ++++-- .../sub-components/ThirdPartyModule.js | 16 +++++-- 3 files changed, 52 insertions(+), 26 deletions(-) diff --git a/packages/client/src/components/panels/SelectFolderInput/index.js b/packages/client/src/components/panels/SelectFolderInput/index.js index f066bf8351..64859fbefd 100644 --- a/packages/client/src/components/panels/SelectFolderInput/index.js +++ b/packages/client/src/components/panels/SelectFolderInput/index.js @@ -24,6 +24,8 @@ class SelectFolderInput extends React.PureComponent { resultingFolderTree: [], baseId: "", }; + + this._isMount = false; } setBaseInfo = async () => { @@ -52,20 +54,22 @@ class SelectFolderInput extends React.PureComponent { ); } catch (e) { toastr.error(e); - this.setState({ - isLoading: false, - }); + this._isMount && + this.setState({ + isLoading: false, + }); return; } - this.setState({ - isPathError: false, - resultingFolderTree, - baseId: resultingId, - baseFolderPath: "", - newFolderPath: "", - ...(withoutBasicSelection && { isLoading: false }), - }); + this._isMount && + this.setState({ + isPathError: false, + resultingFolderTree, + baseId: resultingId, + baseFolderPath: "", + newFolderPath: "", + ...(withoutBasicSelection && { isLoading: false }), + }); }; componentDidMount() { @@ -140,7 +144,7 @@ class SelectFolderInput extends React.PureComponent { }; onSetNewFolderPath = async (folderId) => { let timerId = setTimeout(() => { - this.setState({ isLoading: true }); + this._isMount && this.setState({ isLoading: true }); }, 500); try { const convertFoldersArray = await this.setFolderPath(folderId); @@ -157,10 +161,11 @@ class SelectFolderInput extends React.PureComponent { toastr.error(e); clearTimeout(timerId); timerId = null; - this.setState({ - isLoading: false, - isPathError: true, - }); + this._isMount && + this.setState({ + isLoading: false, + isPathError: true, + }); } }; onSetBaseFolderPath = async (folderId) => { @@ -175,14 +180,16 @@ class SelectFolderInput extends React.PureComponent { }); } catch (e) { toastr.error(e); - this.setState({ - isLoading: false, - isPathError: true, - }); + this._isMount && + this.setState({ + isLoading: false, + isPathError: true, + }); } }; onSelectFolder = (folderId) => { const { onSelectFolder: onSelect } = this.props; + if (!this._isMount) return; this.onSetFolderInfo(folderId); onSelect && onSelect(folderId); }; diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/RoomsModule.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/RoomsModule.js index 1840f93ed4..8ce73ca695 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/RoomsModule.js +++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/RoomsModule.js @@ -22,12 +22,21 @@ class RoomsModule extends React.Component { selectedFolder: selectedFolder, isPanelVisible: false, }; + + this._isMount = false; } + componentDidMount() { + this._isMount = true; + } + componentWillUnmount() { + this._isMount = false; + } onSelectFolder = (folderId) => { - this.setState({ - selectedFolder: folderId, - }); + this._isMount && + this.setState({ + selectedFolder: folderId, + }); }; onClickInput = () => { diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js index fbabc1b7ad..9d7fd8ef5e 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js +++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyModule.js @@ -26,6 +26,15 @@ class ThirdPartyModule extends React.Component { isError: false, isLoading: false, }; + + this._isMount = false; + } + + componentDidMount() { + this._isMount = true; + } + componentWillUnmount() { + this._isMount = false; } onSetLoadingData = (isLoading) => { @@ -37,9 +46,10 @@ class ThirdPartyModule extends React.Component { }; onSelectFolder = (folderId) => { - this.setState({ - selectedFolder: folderId, - }); + this._isMount && + this.setState({ + selectedFolder: folderId, + }); }; onClickInput = () => { From 4f1e8b860ace0d362e7b36af342f466778758bb0 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 29 Aug 2022 16:47:32 +0300 Subject: [PATCH 290/293] added hover styles to iconCropper delete button --- .../sub-components/IconEditor/IconCropper.js | 14 ++++++++++++++ packages/components/themes/base.js | 3 +++ packages/components/themes/dark.js | 3 +++ 3 files changed, 20 insertions(+) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js index 74446487a6..f2de074d2a 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IconEditor/IconCropper.js @@ -46,9 +46,23 @@ const StyledIconCropper = styled.div` padding: 6px 0; background: ${(props) => props.theme.createEditRoomDialog.iconCropper.deleteButton.background}; + border: 1px solid + ${(props) => + props.theme.createEditRoomDialog.iconCropper.deleteButton.borderColor}; border-radius: 3px; margin-bottom: 12px; + transition: all 0.2s ease; + &:hover { + background: ${(props) => + props.theme.createEditRoomDialog.iconCropper.deleteButton + .hoverBackground}; + border: 1px solid + ${(props) => + props.theme.createEditRoomDialog.iconCropper.deleteButton + .hoverBorderColor}; + } + &-text { user-select: none; font-weight: 600; diff --git a/packages/components/themes/base.js b/packages/components/themes/base.js index 20d0f1914b..05b6a02b38 100644 --- a/packages/components/themes/base.js +++ b/packages/components/themes/base.js @@ -2338,6 +2338,9 @@ const Base = { gridColor: "#333333", deleteButton: { background: "#f8f9f9", + hoverBackground: "#f3f4f4", + borderColor: "#f8f9f9", + hoverBorderColor: "#f3f4f4", color: "#555f65", iconColor: "#657077", }, diff --git a/packages/components/themes/dark.js b/packages/components/themes/dark.js index 07d86021d5..81acb77955 100644 --- a/packages/components/themes/dark.js +++ b/packages/components/themes/dark.js @@ -2346,6 +2346,9 @@ const Dark = { gridColor: "#333333", deleteButton: { background: "#292929", + hoverBackground: "#333333", + borderColor: "#292929", + hoverBorderColor: "#fafafa", color: "#858585", iconColor: "#e8e8e9", }, From 4c33ef15badd1510385570d0548db2860ddbd703 Mon Sep 17 00:00:00 2001 From: mushka Date: Mon, 29 Aug 2022 16:47:51 +0300 Subject: [PATCH 291/293] added transition for thirdparty combobobx dropdown hover --- .../sub-components/ThirdPartyStorage/ThirpartyComboBox.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js index c9a5aac085..a48cc10820 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirpartyComboBox.js @@ -41,6 +41,8 @@ const StyledStorageLocation = styled.div` : props.theme.createEditRoomDialog.thirdpartyStorage.combobox .dropdownBorderColor }`}; + + transition: all 0.2s ease; &:hover { border: ${(props) => `1px solid ${ From 646411c7d3e34849a72eabcb332da9d3a11d40cd Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Aug 2022 17:38:01 +0300 Subject: [PATCH 292/293] Web: Files: fixed infinite-scroll for thirdparty-folders --- .../Section/Body/TableView/TableContainer.js | 5 +--- .../TilesView/sub-components/InfiniteGrid.js | 5 +--- packages/client/src/store/FilesStore.js | 25 +++++++++++-------- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index df00fb6b77..abd060c1f4 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -256,10 +256,7 @@ export default inject( const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; - const isRooms = - isRoomsFolder || - isArchiveFolder || - window.location.href.includes("/rooms?"); + const isRooms = isRoomsFolder || isArchiveFolder; const { filesList, diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js index bc4f088f3b..0fe57b3960 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js @@ -189,10 +189,7 @@ export default inject( const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; const filesLength = filesList.length; - const isRooms = - isRoomsFolder || - isArchiveFolder || - window.location.href.includes("/rooms?"); + const isRooms = isRoomsFolder || isArchiveFolder; return { filesList, diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 1b7030fa9e..8b30261f9e 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -2617,15 +2617,17 @@ class FilesStore { } get hasMoreFiles() { - const { Shared, Archive } = CategoryType; - const isRoom = this.categoryType == Shared || this.categoryType == Archive; + const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore; - const filterTotal = isRoom ? this.roomsFilter.total : this.filter.total; + const isRooms = isRoomsFolder || isArchiveFolder; - console.log("hasMoreFiles isRoom", isRoom); + // const filterTotal = isRoom ? this.roomsFilterTotal : this.filterTotal; + const filterTotal = isRooms ? this.roomsFilter.total : this.filter.total; + + console.log("hasMoreFiles isRooms", isRooms); console.log("hasMoreFiles filesList", this.filesList.length); - console.log("hasMoreFiles this.filter.total", this.filter.total); - console.log("hasMoreFiles this.roomsFilter.total", this.roomsFilter.total); + console.log("hasMoreFiles this.filterTotal", this.filterTotal); + console.log("hasMoreFiles this.roomsFilterTotal", this.roomsFilterTotal); console.log("hasMoreFiles filterTotal", filterTotal); console.log("hasMoreFiles", this.filesList.length < filterTotal); console.log("----------------------------"); @@ -2640,18 +2642,19 @@ class FilesStore { fetchMoreFiles = async () => { if (!this.hasMoreFiles || this.filesIsLoading || this.isLoading) return; - const { Shared, Archive } = CategoryType; - const isRoom = this.categoryType == Shared || this.categoryType == Archive; + const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore; + + const isRooms = isRoomsFolder || isArchiveFolder; this.setFilesIsLoading(true); // console.log("fetchMoreFiles"); - const newFilter = isRoom ? this.roomsFilter.clone() : this.filter.clone(); + const newFilter = isRooms ? this.roomsFilter.clone() : this.filter.clone(); newFilter.page += 1; - if (isRoom) this.setRoomsFilter(newFilter); + if (isRooms) this.setRoomsFilter(newFilter); else this.setFilter(newFilter); - const newFiles = isRoom + const newFiles = isRooms ? await api.rooms.getRooms(newFilter) : await api.files.getFolder(newFilter.folder, newFilter); From d908ca1ce4c08f0f055ba4a3eb8e9f2ec4006e75 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Mon, 29 Aug 2022 18:09:32 +0300 Subject: [PATCH 293/293] Web: Fix translation of ByLastModifiedDate key --- packages/client/src/pages/Home/InfoPanel/Body/GalleryItem.js | 4 +++- packages/client/src/pages/Home/InfoPanel/Body/SingleItem.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/GalleryItem.js b/packages/client/src/pages/Home/InfoPanel/Body/GalleryItem.js index c05258a96e..cdde355668 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/GalleryItem.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/GalleryItem.js @@ -55,7 +55,9 @@ const SingleItem = (props) => {
- {t("Home:ByLastModifiedDate")} + + {t("Files:ByLastModifiedDate")} + {parseAndFormatDate(selectedItem.attributes.updatedAt)} diff --git a/packages/client/src/pages/Home/InfoPanel/Body/SingleItem.js b/packages/client/src/pages/Home/InfoPanel/Body/SingleItem.js index bb3c0de248..61aec323f5 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/SingleItem.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/SingleItem.js @@ -147,7 +147,7 @@ const SingleItem = (props) => { }, { id: "ByLastModifiedDate", - title: t("Home:ByLastModifiedDate"), + title: t("Files:ByLastModifiedDate"), content: styledText(parseAndFormatDate(item.updated)), }, {