From be153f7d2c4d0950f2b367a5ed5f51b42f4fcd59 Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Mon, 6 May 2024 13:42:09 +0300 Subject: [PATCH] Web: Client/Shared: Added getting information about watermarks. --- .../components/GlobalEvents/EditRoomEvent.js | 44 ++++++---- .../CreateEditRoomDialog/EditRoomDialog.js | 2 + .../sub-components/SetRoomParams.js | 1 + .../sub-components/VirtualDataRoomBlock.js | 23 +++++- .../sub-components/Watermarks/ViewerInfo.js | 20 +++-- .../sub-components/Watermarks/index.js | 82 ++++++++++++------- .../client/src/store/CreateEditRoomStore.js | 17 +++- packages/shared/api/rooms/index.ts | 7 ++ 8 files changed, 136 insertions(+), 60 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/EditRoomEvent.js b/packages/client/src/components/GlobalEvents/EditRoomEvent.js index f6a5166526..fd99b14a00 100644 --- a/packages/client/src/components/GlobalEvents/EditRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/EditRoomEvent.js @@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next"; import { EditRoomDialog } from "../dialogs"; import { Encoder } from "@docspace/shared/utils/encoder"; import api from "@docspace/shared/api"; -import { getRoomInfo } from "@docspace/shared/api/rooms"; +import { getRoomInfo, getWatermarkSettings } from "@docspace/shared/api/rooms"; import { toastr } from "@docspace/shared/components/toast"; const EditRoomEvent = ({ @@ -75,12 +75,15 @@ const EditRoomEvent = ({ defaultRoomsQuota, isDefaultRoomsQuotaSet, + + setWatermarksSettings, }) => { const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]); const [fetchedTags, setFetchedTags] = useState([]); const [fetchedImage, setFetchedImage] = useState(null); const [isLoading, setIsLoading] = useState(false); + const [isInitLoading, setIsInitLoading] = useState(false); const startTags = Object.values(item.tags); const startObjTags = startTags.map((tag, i) => ({ id: i, name: tag })); @@ -268,24 +271,27 @@ const EditRoomEvent = ({ setFetchedImage(file); }, []); - useEffect(() => { - const logo = item?.logo?.large ? item.logo.large : ""; - if (logo) { - fetchLogoAction(logo); - } - }, []); - - const fetchTagsAction = useCallback(async () => { - const tags = await fetchTags(); - setFetchedTags(tags); - }, []); - - useEffect(() => { - fetchTagsAction(); - }, [fetchTagsAction]); - useEffect(() => { setCreateRoomDialogVisible(true); + setIsInitLoading(true); + + const logo = item?.logo?.large ? item.logo.large : ""; + + const requests = [fetchTags(), getWatermarkSettings(item.id)]; + + if (logo) requests.push(fetchLogoAction); + + const fetchInfo = async () => { + const [tags, watermarks] = await Promise.all(requests); + + setFetchedTags(tags); + setWatermarksSettings(watermarks); + + setIsInitLoading(false); + }; + + fetchInfo(); + return () => setCreateRoomDialogVisible(false); }, []); @@ -299,6 +305,7 @@ const EditRoomEvent = ({ fetchedTags={fetchedTags} fetchedImage={fetchedImage} isLoading={isLoading} + isInitLoading={isInitLoading} /> ); }; @@ -314,6 +321,7 @@ export default inject( filesSettingsStore, infoPanelStore, currentQuotaStore, + createEditRoomStore, }) => { const { editRoom, @@ -345,6 +353,7 @@ export default inject( const { updateInfoPanelSelection } = infoPanelStore; const { defaultRoomsQuota, isDefaultRoomsQuotaSet } = currentQuotaStore; + const { setWatermarksSettings } = createEditRoomStore; return { defaultRoomsQuota, @@ -382,6 +391,7 @@ export default inject( updateInfoPanelSelection, changeRoomOwner, + setWatermarksSettings, }; }, )(observer(EditRoomEvent)); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js index 115945a69c..73a4c3a2f7 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js @@ -42,6 +42,7 @@ const EditRoomDialog = ({ fetchedRoomParams, fetchedTags, fetchedImage, + isInitLoading, }) => { const [isScrollLocked, setIsScrollLocked] = useState(false); const [isValidTitle, setIsValidTitle] = useState(true); @@ -131,6 +132,7 @@ const EditRoomDialog = ({ visible={visible} onClose={onCloseAction} isScrollLocked={isScrollLocked} + isLoading={isInitLoading} withFooterBorder > 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 08980e4fd2..c2355c7d94 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -222,6 +222,7 @@ const SetRoomParams = ({ t={t} roomParams={roomParams} setRoomParams={setRoomParams} + isEdit={isEdit} /> )} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js index 1c130ac019..893a2c3c17 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js @@ -1,8 +1,11 @@ import { useState } from "react"; import { Trans } from "react-i18next"; import styled from "styled-components"; +import { inject, observer } from "mobx-react"; + import { Text } from "@docspace/shared/components/text"; import { ToggleButton } from "@docspace/shared/components/toggle-button"; + import FileLifetime from "./FileLifetime"; import Watermarks from "../sub-components/Watermarks"; @@ -68,12 +71,18 @@ const Block = ({ ); }; -const VirtualDataRoomBlock = ({ t, roomParams, setRoomParams }) => { +const VirtualDataRoomBlock = ({ + t, + roomParams, + setRoomParams, + isEdit, + isWatermarks, +}) => { const role = t("Translations:RoleViewer"); const [fileLifetimeChecked, setFileLifetimeChecked] = useState(false); const [copyAndDownloadChecked, setCopyAndDownloadChecked] = useState(false); - const [watermarksChecked, setWatermarksChecked] = useState(false); + const [watermarksChecked, setWatermarksChecked] = useState(isWatermarks); const onChangeAutomaticIndexing = () => { setRoomParams({ ...roomParams, indexing: !roomParams.indexing }); @@ -128,10 +137,16 @@ const VirtualDataRoomBlock = ({ t, roomParams, setRoomParams }) => { isDisabled={false} isChecked={watermarksChecked} > - + ); }; -export default VirtualDataRoomBlock; +export default inject(({ createEditRoomStore }) => { + const { watermarksSettings } = createEditRoomStore; + + return { + isWatermarks: watermarksSettings?.enabled, + }; +})(observer(VirtualDataRoomBlock)); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js index b51273936f..e4ef2bc376 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js @@ -26,13 +26,15 @@ import { useState, useRef } from "react"; import { useTranslation } from "react-i18next"; +import { inject, observer } from "mobx-react"; + import { TabsContainer } from "@docspace/shared/components/tabs-container"; import { TextInput } from "@docspace/shared/components/text-input"; import { Text } from "@docspace/shared/components/text"; import { ComboBox } from "@docspace/shared/components/combobox"; +import { WatermarkAdditions } from "@docspace/shared/enums"; import { StyledWatermark } from "./StyledComponent"; -import { WatermarkAdditions } from "@docspace/shared/enums"; const getInitialState = (initialTab) => { const state = { @@ -51,7 +53,7 @@ const getInitialState = (initialTab) => { }; const ViewerInfoWatermark = ({ - setParams, + setWatermarksSettings, initialPosition, dataPosition, dataTabs, @@ -79,20 +81,20 @@ const ViewerInfoWatermark = ({ } } - setParams({ additions: flagsCount }); + setWatermarksSettings({ additions: flagsCount }); }; const onPositionChange = (item) => { setSelectedPosition(item); - setParams({ rotate: item.key }); + setWatermarksSettings({ rotate: item.key }); }; const onTextChange = (e) => { const { value } = e.target; setTextValue(value); - setParams({ text: value }); + setWatermarksSettings({ text: value }); }; return ( @@ -132,4 +134,10 @@ const ViewerInfoWatermark = ({ ); }; -export default ViewerInfoWatermark; + +export default inject(({ createEditRoomStore }) => { + const { setWatermarksSettings } = createEditRoomStore; + return { + setWatermarksSettings, + }; +})(observer(ViewerInfoWatermark)); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js index 81a534c86e..3580df27ca 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js @@ -24,8 +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 -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; +import { inject, observer } from "mobx-react"; import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group"; @@ -47,12 +48,12 @@ const options = (t) => [ }, ]; -const positionOptions = (t) => [ +const rotateOptions = (t) => [ { key: -45, label: t("Diagonal") }, { key: 0, label: t("Horizontal") }, ]; -const elementsOptions = (t) => [ +const tabsOptions = (t) => [ { key: "UserName", title: t("UserName"), @@ -79,29 +80,49 @@ const elementsOptions = (t) => [ index: 4, }, ]; -const Watermarks = ({ setRoomParams }) => { + +const getInitialTabs = (additions, t) => { + const dataTabs = tabsOptions(t); + + if (!additions) return [dataTabs[0]]; + + return dataTabs.filter((item) => additions & WatermarkAdditions[item.key]); +}; + +const getInitialRotate = (rotate, t) => { + const dataRotate = rotateOptions(t); + + if (!rotate) return dataRotate[0]; + + return dataRotate.filter((item) => item.key === rotate); +}; + +const Watermarks = ({ setWatermarksSettings, watermarksSettings, isEdit }) => { const { t } = useTranslation(["CreateEditRoomDialog", "Common"]); const [type, setType] = useState(viewerInfoWatermark); - const dataPosition = positionOptions(t); - const initialPosition = dataPosition[0]; + const initialInfo = useRef(null); - const dataTabs = elementsOptions(t); - const initialTab = [dataTabs[0]]; + if (initialInfo.current === null) { + initialInfo.current = { + dataRotate: rotateOptions(t), + dataTabs: tabsOptions(t), + initialRotate: getInitialRotate(watermarksSettings?.rotate, t), + initialTabs: getInitialTabs(watermarksSettings?.additions, t), + }; + } + + const initialInfoRef = initialInfo.current; useEffect(() => { - let additions = 0; - initialTab.map((item) => (additions += WatermarkAdditions[item.key])); - - setRoomParams((prevState) => ({ - ...prevState, - watermarks: { + if (!isEdit) { + setWatermarksSettings({ enabled: true, - rotate: initialPosition.key, + rotate: initialInfoRef.initialRotate.key, text: "", - additions, - }, - })); + additions: WatermarkAdditions.UserEmail, + }); + } }, []); const onSelectType = (e) => { @@ -110,14 +131,10 @@ const Watermarks = ({ setRoomParams }) => { setType(value); }; - const setParams = (info) => { - setRoomParams((prevState) => ({ - ...prevState, - watermarks: { ...prevState.watermarks, ...info }, - })); - }; const typeOptions = options(t); + console.log("============Watermarks render", watermarksSettings); + return ( { {type === viewerInfoWatermark && ( )} ); }; -export default Watermarks; +export default inject(({ createEditRoomStore }) => { + const { setWatermarksSettings, watermarksSettings } = createEditRoomStore; + return { + setWatermarksSettings, + watermarksSettings, + }; +})(observer(Watermarks)); diff --git a/packages/client/src/store/CreateEditRoomStore.js b/packages/client/src/store/CreateEditRoomStore.js index 9f323ee472..0376bf5e5e 100644 --- a/packages/client/src/store/CreateEditRoomStore.js +++ b/packages/client/src/store/CreateEditRoomStore.js @@ -47,6 +47,7 @@ class CreateEditRoomStore { settingsStore = null; infoPanelStore = null; currentQuotaStore = null; + watermarksSettings = null; constructor( filesStore, @@ -92,6 +93,18 @@ class CreateEditRoomStore { this.onClose = onClose; }; + setWatermarksSettings = (watermarksSettings) => { + if (!watermarksSettings) { + this.watermarksSettings = null; + return; + } + + this.watermarksSettings = { + ...this.watermarksSettings, + ...watermarksSettings, + }; + }; + onCreateRoom = async (withConfirm = false, t) => { const roomParams = this.roomParams; @@ -158,9 +171,7 @@ class CreateEditRoomStore { const actions = []; - const watermarks = roomParams.watermarks; - - if (watermarks) { + if (this.watermarksSettings) { await setRoomWatermarks(room.id, watermarks); } // delete thirdparty account if not needed diff --git a/packages/shared/api/rooms/index.ts b/packages/shared/api/rooms/index.ts index 84b61928af..aa17825c3f 100644 --- a/packages/shared/api/rooms/index.ts +++ b/packages/shared/api/rooms/index.ts @@ -499,3 +499,10 @@ export function setRoomWatermarks( return request(options); } + +export function getWatermarkSettings(roomId: number | string) { + return request({ + method: "get", + url: `files/rooms/${roomId}/watermark`, + }); +}