From a508444e6e9c7f2509dbe571e87615ad293ab2c8 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 13 Sep 2023 12:20:24 +0300 Subject: [PATCH 01/22] Web: Files: added VDR-room --- .../locales/en/CreateEditRoomDialog.json | 11 +- packages/client/public/locales/en/Files.json | 1 + .../CreateEditRoomDialog/data/index.js | 4 + .../sub-components/RoomType.js | 37 +++--- .../sub-components/SetRoomParams.js | 3 + .../sub-components/VirtualDataRoomBlock.js | 120 ++++++++++++++++++ packages/common/constants/index.js | 1 + packages/components/room-logo/index.js | 3 + public/images/icons/32/room/virtual-data.svg | 4 + 9 files changed, 166 insertions(+), 18 deletions(-) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js create mode 100644 public/images/icons/32/room/virtual-data.svg diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index dbad644ef6..425f9102b3 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/packages/client/public/locales/en/CreateEditRoomDialog.json @@ -14,6 +14,7 @@ "MakeRoomPrivateTitle": "Make the Room Private", "PublicRoomBarDescription": "This room is available to anyone with the link. External users will have View Only permission for all the files.", "PublicRoomDescription": "Invite users via external links to view documents without registration. You can also embed this room into any web interface.", + "VirtualDataRoomDescription": "Use VDR for advanced file security and transparency while filling and signing documents step-by-step. Set watermarks, automatically index and track all content, restrict downloading and copying.", "ReviewRoomDescription": "Request a review or comments on the documents", "ReviewRoomTitle": "Review room", "RoomEditing": "Room editing", @@ -25,5 +26,13 @@ "ThirdPartyStoragePermanentSettingDescription": "Files are stored in a third-party {{thirdpartyTitle}} storage in the \"{{thirdpartyFolderName}}\" folder.\n{{thirdpartyPath}}", "ThirdPartyStorageRoomAdminNoStorageAlert": "To connect a third-party storage, you need to add the corresponding service in the Integration section of DocSpace settings. Contact DocSpace owner or administrator to enable the integration.", "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing.", - "ViewOnlyRoomTitle": "View-only room" + "ViewOnlyRoomTitle": "View-only room", + "AutomaticIndexing": "Automatic indexing", + "AutomaticIndexingDescription": "Enable automatic indexing to index files and folders by serial number. Sorting by number will be set as default for all users.", + "FileLifetime": "File lifetime", + "FileLifetimeDescription": "Set file lifetime to automatically delete the files in this room after a defined period. Lifetime begins on the date of upload/creation of the file.", + "RestrictCopyAndDownload": "Restrict copy and download", + "RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.", + "AddWatermarksToDocuments": "Add watermarks to documents", + "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced." } diff --git a/packages/client/public/locales/en/Files.json b/packages/client/public/locales/en/Files.json index 1a57ef7eae..a45ddcb31d 100644 --- a/packages/client/public/locales/en/Files.json +++ b/packages/client/public/locales/en/Files.json @@ -116,6 +116,7 @@ "PrivateRoomHeader": "Welcome to ONLYOFFICE private room where every symbol you type is encrypted", "PrivateRoomSupport": "Work in Private Room is available via {{organizationName}} desktop app. <3>Instructions", "PublicRoom": "Public room", + "VirtualDataRoom": "Virtual Data Room", "RecentEmptyContainerDescription": "Your last viewed or edited docs will be displayed in this section.", "RecycleBinAction": "Empty trash", "RemovedFromFavorites": "Removed from favorites", diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 57acd64cdd..9df282b42e 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -14,6 +14,8 @@ export const getRoomTypeTitleTranslation = (roomType = 1, t) => { return t("CreateEditRoomDialog:CustomRoomTitle"); case RoomsType.PublicRoom: return t("Files:PublicRoom"); + case RoomsType.VirtualDataRoom: + return t("Files:VirtualDataRoom"); } }; @@ -31,6 +33,8 @@ export const getRoomTypeDescriptionTranslation = (roomType = 1, t) => { return t("CreateEditRoomDialog:CustomRoomDescription"); case RoomsType.PublicRoom: return t("CreateEditRoomDialog:PublicRoomDescription"); + case RoomsType.VirtualDataRoom: + return t("CreateEditRoomDialog:VirtualDataRoomDescription"); } }; 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 05f671c9f4..6e61a2b074 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js @@ -53,7 +53,7 @@ const StyledRoomType = styled.div` } .choose_room-forward_btn { - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` margin-right: auto; @@ -70,53 +70,53 @@ const StyledRoomType = styled.div` `; const StyledListItem = styled(StyledRoomType)` - background-color: ${props => + background-color: ${(props) => props.theme.createEditRoomDialog.roomType.listItem.background}; border: 1px solid - ${props => props.theme.createEditRoomDialog.roomType.listItem.borderColor}; + ${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor}; border-radius: 6px; .choose_room-description { - color: ${props => + color: ${(props) => props.theme.createEditRoomDialog.roomType.listItem.descriptionText}; } `; const StyledDropdownButton = styled(StyledRoomType)` border-radius: 6px; - background-color: ${props => + background-color: ${(props) => props.theme.createEditRoomDialog.roomType.dropdownButton.background}; border: 1px solid - ${props => + ${(props) => props.isOpen ? props.theme.createEditRoomDialog.roomType.dropdownButton .isOpenBorderColor : props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor}; .choose_room-description { - color: ${props => + color: ${(props) => props.theme.createEditRoomDialog.roomType.dropdownButton.descriptionText}; } .choose_room-forward_btn { &.dropdown-button { - transform: ${props => + transform: ${(props) => props.isOpen ? "rotate(-90deg)" : "rotate(90deg)"}; } } `; const StyledDropdownItem = styled(StyledRoomType)` - background-color: ${props => + background-color: ${(props) => props.theme.createEditRoomDialog.roomType.dropdownItem.background}; &:hover { - background-color: ${props => + background-color: ${(props) => props.theme.createEditRoomDialog.roomType.dropdownItem.hoverBackground}; } .choose_room-description { - color: ${props => + color: ${(props) => props.theme.createEditRoomDialog.roomType.dropdownItem.descriptionText}; } @@ -127,15 +127,15 @@ const StyledDropdownItem = styled(StyledRoomType)` const StyledDisplayItem = styled(StyledRoomType)` cursor: default; - background-color: ${props => + background-color: ${(props) => props.theme.createEditRoomDialog.roomType.displayItem.background}; border: 1px solid - ${props => + ${(props) => props.theme.createEditRoomDialog.roomType.displayItem.borderColor}; border-radius: 6px; .choose_room-description { - color: ${props => + color: ${(props) => props.theme.createEditRoomDialog.roomType.displayItem.descriptionText}; } @@ -202,7 +202,8 @@ const RoomType = ({ title={t(room.title)} onClick={onClick} isOpen={isOpen} - data-selected-id={selectedId}> + data-selected-id={selectedId} + > {content} ) : type === "dropdownItem" ? ( @@ -211,14 +212,16 @@ const RoomType = ({ title={t(room.title)} onClick={onClick} isOpen={isOpen} - data-selected-id={selectedId}> + data-selected-id={selectedId} + > {content} ) : ( + data-selected-id={selectedId} + > {content} ); 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 7f8278a701..5090a43c7e 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -17,6 +17,7 @@ import { getRoomTypeDefaultTagTranslation } from "../data"; import ImageEditor from "@docspace/components/ImageEditor"; import PreviewTile from "@docspace/components/ImageEditor/PreviewTile"; +import VirtualDataRoomBlock from "./VirtualDataRoomBlock"; import Text from "@docspace/components/text"; const StyledSetRoomParams = styled.div` @@ -117,6 +118,8 @@ const SetRoomParams = ({ /> )} */} + {} + {!isEdit && enableThirdParty && ( theme.editLink.text.color}; + } + } +`; + +const Block = ({ headerText, bodyText, onChange, isDisabled, isChecked }) => { + return ( +
+
+ + {headerText} + + +
+ + {bodyText} + + {isChecked && ( +
Content
+ )} +
+ ); +}; + +const VirtualDataRoomBlock = ({ t }) => { + const role = t("Translations:RoleViewer"); + + const [automaticIndexingChecked, setAutomaticIndexingChecked] = + useState(false); + const [fileLifetimeChecked, setFileLifetimeChecked] = useState(false); + const [copyAndDownloadChecked, setCopyAndDownloadChecked] = useState(false); + const [watermarksChecked, setWatermarksChecked] = useState(false); + + const onChangeAutomaticIndexing = () => { + setAutomaticIndexingChecked(!automaticIndexingChecked); + }; + + const onChangeFileLifetime = () => { + setFileLifetimeChecked(!fileLifetimeChecked); + }; + + const onChangeRestrictCopyAndDownload = () => { + setCopyAndDownloadChecked(!copyAndDownloadChecked); + }; + + const onChangeAddWatermarksToDocuments = () => { + setWatermarksChecked(!watermarksChecked); + }; + + return ( + + + + + Enable this setting to disable downloads and content copying for + users with the {{ role }} role. + + } + onChange={onChangeRestrictCopyAndDownload} + isDisabled={false} + isChecked={copyAndDownloadChecked} + /> + + + ); +}; + +export default VirtualDataRoomBlock; diff --git a/packages/common/constants/index.js b/packages/common/constants/index.js index 71c06b18c0..ee492bfbc5 100644 --- a/packages/common/constants/index.js +++ b/packages/common/constants/index.js @@ -134,6 +134,7 @@ export const RoomsType = Object.freeze({ // ReviewRoom: 3, //TODO: Restore when certs will be done // ReadOnlyRoom: 4, //TODO: Restore when certs will be done PublicRoom: 6, + VirtualDataRoom: 7, CustomRoom: 5, }); diff --git a/packages/components/room-logo/index.js b/packages/components/room-logo/index.js index 9dfef7618e..9e036719a6 100644 --- a/packages/components/room-logo/index.js +++ b/packages/components/room-logo/index.js @@ -10,6 +10,7 @@ import FillingFormSvg32Url from "PUBLIC_DIR/images/icons/32/room/filling.form.sv import ReviewSvg32Url from "PUBLIC_DIR/images/icons/32/room/review.svg?url"; import ViewOnlySvg32Url from "PUBLIC_DIR/images/icons/32/room/view.only.svg?url"; import PublicRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/public.svg?url"; +import VirtualDataRoomRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/virtual-data.svg?url"; import { RoomsType } from "@docspace/common/constants"; @@ -47,6 +48,8 @@ const RoomLogo = ({ return CustomSvg32Url; case RoomsType.PublicRoom: return PublicRoomSvg32Url; + case RoomsType.VirtualDataRoom: + return VirtualDataRoomRoomSvg32Url; default: return ""; } diff --git a/public/images/icons/32/room/virtual-data.svg b/public/images/icons/32/room/virtual-data.svg new file mode 100644 index 0000000000..6e4daa5156 --- /dev/null +++ b/public/images/icons/32/room/virtual-data.svg @@ -0,0 +1,4 @@ + + + + From e92b3b1485308aefbb30081ac626ac47715033ee Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 13 Sep 2023 12:32:24 +0300 Subject: [PATCH 02/22] Web: Files: fixed display of fields for VDR-rooms --- .../CreateEditRoomDialog/sub-components/SetRoomParams.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 5090a43c7e..803a952ece 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -18,6 +18,7 @@ import { getRoomTypeDefaultTagTranslation } from "../data"; import ImageEditor from "@docspace/components/ImageEditor"; import PreviewTile from "@docspace/components/ImageEditor/PreviewTile"; import VirtualDataRoomBlock from "./VirtualDataRoomBlock"; +import { RoomsType } from "@docspace/common/constants"; import Text from "@docspace/components/text"; const StyledSetRoomParams = styled.div` @@ -55,6 +56,8 @@ const SetRoomParams = ({ }) => { const [previewIcon, setPreviewIcon] = React.useState(null); + const isVDRRoom = roomParams.type === RoomsType.VirtualDataRoom; + const onChangeName = (e) => { setIsValidTitle(true); setRoomParams({ ...roomParams, title: e.target.value }); @@ -118,7 +121,7 @@ const SetRoomParams = ({ /> )} */} - {} + {isVDRRoom && } {!isEdit && enableThirdParty && ( Date: Wed, 13 Sep 2023 15:00:07 +0300 Subject: [PATCH 03/22] Web: Files: fixed VirtualDataRoom icon --- packages/client/src/store/SettingsStore.js | 3 +++ packages/common/utils/image-helpers.js | 2 ++ 2 files changed, 5 insertions(+) diff --git a/packages/client/src/store/SettingsStore.js b/packages/client/src/store/SettingsStore.js index bbd5fcd60b..3f320da515 100644 --- a/packages/client/src/store/SettingsStore.js +++ b/packages/client/src/store/SettingsStore.js @@ -320,6 +320,9 @@ class SettingsStore { case RoomsType.PublicRoom: path = "public.svg"; break; + case RoomsType.VirtualDataRoom: + path = "virtual.data.svg"; + break; } } diff --git a/packages/common/utils/image-helpers.js b/packages/common/utils/image-helpers.js index d1d5e98a20..fb4a7c1e83 100644 --- a/packages/common/utils/image-helpers.js +++ b/packages/common/utils/image-helpers.js @@ -172,6 +172,7 @@ import PptxSvg32Url from "PUBLIC_DIR/images/icons/32/pptx.svg?url"; import ArchiveSvg32Url from "PUBLIC_DIR/images/icons/32/room/archive.svg?url"; import CustomSvg32Url from "PUBLIC_DIR/images/icons/32/room/custom.svg?url"; import PublicSvg32Url from "PUBLIC_DIR/images/icons/32/room/public.svg?url"; +import VirtualDataRoomRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/virtual-data.svg?url"; import EditingSvg32Url from "PUBLIC_DIR/images/icons/32/room/editing.svg?url"; import FillingFormSvg32Url from "PUBLIC_DIR/images/icons/32/room/filling.form.svg?url"; import ReviewSvg32Url from "PUBLIC_DIR/images/icons/32/room/review.svg?url"; @@ -424,6 +425,7 @@ export const iconSize32 = new Map([ ["archive.svg", ArchiveSvg32Url], ["custom.svg", CustomSvg32Url], ["public.svg", PublicSvg32Url], + ["virtual.data.svg", VirtualDataRoomRoomSvg32Url], ["editing.svg", EditingSvg32Url], ["filling.form.svg", FillingFormSvg32Url], ["review.svg", ReviewSvg32Url], From 7a3cb28683e774e3bba907727f87c9a76f7834a9 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 14 Sep 2023 15:44:06 +0300 Subject: [PATCH 04/22] Web: Files: added FileLifetime block --- .../locales/en/CreateEditRoomDialog.json | 3 +- .../sub-components/FileLifetime.js | 114 ++++++++++++++++++ .../sub-components/VirtualDataRoomBlock.js | 29 ++++- public/locales/en/Common.json | 7 +- 4 files changed, 145 insertions(+), 8 deletions(-) create mode 100644 packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index 425f9102b3..04b0c6ace5 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/packages/client/public/locales/en/CreateEditRoomDialog.json @@ -34,5 +34,6 @@ "RestrictCopyAndDownload": "Restrict copy and download", "RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.", "AddWatermarksToDocuments": "Add watermarks to documents", - "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced." + "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced.", + "FilesOlderThan": "Files older than:" } diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js new file mode 100644 index 0000000000..76da90e94c --- /dev/null +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js @@ -0,0 +1,114 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import Text from "@docspace/components/text"; +import TextInput from "@docspace/components/text-input"; +import ComboBox from "@docspace/components/combobox"; + +const StyledFileLifetime = styled.div` + margin-top: 12px; + + .virtual-data-room_file-lifetime_body { + display: flex; + align-items: center; + + .virtual-data-room_file-lifetime_input { + min-width: 150px; + margin-right: 4px; + } + + .virtual-data-room_file-lifetime_combo-box { + margin-right: 16px; + width: 90px; + } + } +`; + +const FileLifetime = ({ t }) => { + const [inputValue, setInputValue] = useState(""); + const onChange = (e) => { + // /^(?:[1-9][0-9]*|0)$/ + if (e.target.value && !/^(?:[1-9][0-9]*)$/.test(e.target.value)) return; + + setInputValue(e.target.value); + }; + + const isLoading = false; + + const onSelectDate = (option) => { + console.log("onDateSelect", option); + }; + + const onSelectDelete = (option) => { + console.log("onSelectDelete", option); + }; + + const dateOptions = [ + { + key: 1, + label: t("Common:Days"), + "data-type": 1, + }, + { + key: 2, + label: t("Common:Months"), + "data-type": 2, + }, + { + key: 3, + label: t("Common:Years"), + "data-type": 3, + }, + ]; + + const deleteOptions = [ + { + key: 1, + label: t("Common:MoveToTrash"), + "data-type": 1, + }, + { + key: 2, + label: t("Common:DeletePermanently"), + "data-type": 2, + }, + ]; + + return ( + + + {t("FilesOlderThan")} + + +
+ + + +
+ + ); +}; + +export default FileLifetime; 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 e2a9a0c06d..047274b25c 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js @@ -3,6 +3,8 @@ import { Trans } from "react-i18next"; import styled from "styled-components"; import Text from "@docspace/components/text"; import ToggleButton from "@docspace/components/toggle-button"; +import FileLifetime from "./FileLifetime"; +import { mobile } from "@docspace/components/utils/device"; const StyledVirtualDataRoomBlock = styled.div` .virtual-data-room-block { @@ -20,12 +22,25 @@ const StyledVirtualDataRoomBlock = styled.div` } } .virtual-data-room-block_description { + max-width: 420px; + + @media ${mobile} { + max-width: 315px; + } + color: ${({ theme }) => theme.editLink.text.color}; } } `; -const Block = ({ headerText, bodyText, onChange, isDisabled, isChecked }) => { +const Block = ({ + headerText, + bodyText, + onChange, + isDisabled, + isChecked, + children, +}) => { return (
@@ -47,7 +62,7 @@ const Block = ({ headerText, bodyText, onChange, isDisabled, isChecked }) => { {bodyText} {isChecked && ( -
Content
+
{children}
)}
); @@ -86,14 +101,16 @@ const VirtualDataRoomBlock = ({ t }) => { onChange={onChangeAutomaticIndexing} isDisabled={false} isChecked={automaticIndexingChecked} - /> + > + > + + { onChange={onChangeRestrictCopyAndDownload} isDisabled={false} isChecked={copyAndDownloadChecked} - /> + > + > ); }; diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index 8975e543b1..97b7aec55a 100644 --- a/public/locales/en/Common.json +++ b/public/locales/en/Common.json @@ -284,5 +284,10 @@ "WantToContinue": "Are you sure you want to continue?", "Warning": "Warning", "Website": "Website", - "Yesterday": "Yesterday" + "Yesterday": "Yesterday", + "Days": "Days", + "Months": "Months", + "Years": "Years", + "MoveToTrash": "Move to trash", + "DeletePermanently": "Delete permanently" } From be954b594c0d9e6dccc7d12df823063226fd8595 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 14 Sep 2023 17:03:33 +0300 Subject: [PATCH 05/22] Web: Files: FileLifetime: fixed mobile view --- .../sub-components/FileLifetime.js | 104 +++++++++++------- .../sub-components/VirtualDataRoomBlock.js | 4 +- 2 files changed, 68 insertions(+), 40 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js index 76da90e94c..757d456522 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js @@ -3,6 +3,7 @@ import styled from "styled-components"; import Text from "@docspace/components/text"; import TextInput from "@docspace/components/text-input"; import ComboBox from "@docspace/components/combobox"; +import { hugeMobile } from "@docspace/components/utils/device"; const StyledFileLifetime = styled.div` margin-top: 12px; @@ -11,37 +12,39 @@ const StyledFileLifetime = styled.div` display: flex; align-items: center; + @media ${hugeMobile} { + display: block; + } + + .virtual-data-room_file-lifetime_date { + display: flex; + align-items: center; + } + .virtual-data-room_file-lifetime_input { min-width: 150px; margin-right: 4px; + + @media ${hugeMobile} { + margin-right: 8px; + width: 165px; + } } .virtual-data-room_file-lifetime_combo-box { margin-right: 16px; - width: 90px; + width: 92px; + min-width: 92px; + + @media ${hugeMobile} { + margin-right: 0px; + width: 165px; + } } } `; const FileLifetime = ({ t }) => { - const [inputValue, setInputValue] = useState(""); - const onChange = (e) => { - // /^(?:[1-9][0-9]*|0)$/ - if (e.target.value && !/^(?:[1-9][0-9]*)$/.test(e.target.value)) return; - - setInputValue(e.target.value); - }; - - const isLoading = false; - - const onSelectDate = (option) => { - console.log("onDateSelect", option); - }; - - const onSelectDelete = (option) => { - console.log("onSelectDelete", option); - }; - const dateOptions = [ { key: 1, @@ -73,6 +76,29 @@ const FileLifetime = ({ t }) => { }, ]; + const [inputValue, setInputValue] = useState(""); + const [selectedDate, setSelectedDate] = useState(dateOptions[0]); + const [selectedDelete, setSelectedDelete] = useState(deleteOptions[0]); + + const onChange = (e) => { + // /^(?:[1-9][0-9]*|0)$/ + if (e.target.value && !/^(?:[1-9][0-9]*)$/.test(e.target.value)) return; + + setInputValue(e.target.value); + }; + + const isLoading = false; + + const onSelectDate = (option) => { + setSelectedDate(option); + console.log("onDateSelect", option); + }; + + const onSelectDelete = (option) => { + setSelectedDelete(option); + console.log("onSelectDelete", option); + }; + return ( @@ -80,29 +106,31 @@ const FileLifetime = ({ t }) => {
- - +
+ + +
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 047274b25c..4f9fe1a4b4 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js @@ -4,7 +4,7 @@ import styled from "styled-components"; import Text from "@docspace/components/text"; import ToggleButton from "@docspace/components/toggle-button"; import FileLifetime from "./FileLifetime"; -import { mobile } from "@docspace/components/utils/device"; +import { hugeMobile } from "@docspace/components/utils/device"; const StyledVirtualDataRoomBlock = styled.div` .virtual-data-room-block { @@ -24,7 +24,7 @@ const StyledVirtualDataRoomBlock = styled.div` .virtual-data-room-block_description { max-width: 420px; - @media ${mobile} { + @media ${hugeMobile} { max-width: 315px; } From 6ed7eacf8c0a169caa095cbd0383298e0baed083 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Tue, 26 Sep 2023 10:40:43 +0300 Subject: [PATCH 06/22] Web:Client:Add CalendarComponent. --- .../Home/InfoPanel/Body/styles/common.js | 52 +++++++++++++------ .../Body/sub-components/ItemTitle/Calendar.js | 46 ++++++++++++++++ .../ItemTitle/FilesItemTitle.js | 20 ++++--- .../ItemTitle/ItemContextOptions.js | 26 +++++----- .../Body/sub-components/ItemTitle/index.js | 3 ++ .../Body/views/History/HistoryBlock.js | 3 ++ .../InfoPanel/Body/views/History/index.js | 4 +- .../Section/sub-components/info-panel-body.js | 7 ++- 8 files changed, 122 insertions(+), 39 deletions(-) create mode 100644 packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js diff --git a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js index 717c0332c3..82d2c837f7 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js @@ -5,7 +5,7 @@ import { hugeMobile, tablet } from "@docspace/components/utils/device"; const StyledInfoPanelBody = styled.div` height: auto; - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` padding: 0px 20px 0 3px; @@ -13,8 +13,8 @@ const StyledInfoPanelBody = styled.div` : css` padding: 0px 3px 0 20px; `} - color: ${props => props.theme.infoPanel.textColor}; - background-color: ${props => props.theme.infoPanel.backgroundColor}; + color: ${(props) => props.theme.infoPanel.textColor}; + background-color: ${(props) => props.theme.infoPanel.backgroundColor}; .no-item { text-align: center; @@ -29,7 +29,7 @@ const StyledInfoPanelBody = styled.div` } @media ${hugeMobile} { - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` padding: 0px 16px 0 8px; @@ -44,7 +44,7 @@ const StyledTitle = styled.div` position: sticky; top: 0; z-index: 100; - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` padding: 24px 20px 24px 0px; @@ -55,7 +55,7 @@ const StyledTitle = styled.div` margin-left: -20px; `} - background: ${props => props.theme.infoPanel.backgroundColor}; + background: ${(props) => props.theme.infoPanel.backgroundColor}; display: flex; flex-wrap: no-wrap; @@ -74,7 +74,7 @@ const StyledTitle = styled.div` } &.is-room { border-radius: 6px; - outline: 1px solid ${props => props.theme.itemIcon.borderColor}; + outline: 1px solid ${(props) => props.theme.itemIcon.borderColor}; } } @@ -91,12 +91,12 @@ const StyledTitle = styled.div` -webkit-line-clamp: 2; } - ${props => + ${(props) => props.withBottomBorder && css` width: calc(100% + 20px); margin: 0 -20px 0 -20px; - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` padding: 23px 23px 23px 0; @@ -104,7 +104,7 @@ const StyledTitle = styled.div` : css` padding: 23px 0 23px 20px; `} - border-bottom: ${props => + border-bottom: ${(props) => `solid 1px ${props.theme.infoPanel.borderColor}`}; `} @@ -115,7 +115,7 @@ const StyledTitle = styled.div` @media ${hugeMobile} { width: calc(100vw - 32px); - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` padding: 24px 16px 24px 0; @@ -124,11 +124,11 @@ const StyledTitle = styled.div` padding: 24px 0 24px 16px; `} - ${props => + ${(props) => props.withBottomBorder && css` width: calc(100% + 16px); - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` padding: 23px 16px 23px 0; @@ -184,7 +184,7 @@ const StyledProperties = styled.div` background: red; max-width: 195px; margin: 0; - background: ${props => props.theme.infoPanel.details.tagBackground}; + background: ${(props) => props.theme.infoPanel.details.tagBackground}; p { white-space: nowrap; overflow: hidden; @@ -209,7 +209,7 @@ const StyledProperties = styled.div` width: 12px; height: 12px; path { - fill: ${props => + fill: ${(props) => props.theme.infoPanel.details.commentEditorIconColor}; } } @@ -247,7 +247,27 @@ const StyledProperties = styled.div` } `; +const StyledItemOptions = styled.div` + ${(props) => + props.theme.interfaceDirection === "rtl" + ? css` + margin-right: auto; + ` + : css` + margin-left: auto; + `} + + display: flex; +`; + StyledInfoPanelBody.defaultProps = { theme: Base }; StyledTitle.defaultProps = { theme: Base }; +StyledItemOptions.defaultProps = { theme: Base }; -export { StyledInfoPanelBody, StyledTitle, StyledSubtitle, StyledProperties }; +export { + StyledInfoPanelBody, + StyledTitle, + StyledSubtitle, + StyledProperties, + StyledItemOptions, +}; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js new file mode 100644 index 0000000000..e5c93ce6d8 --- /dev/null +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -0,0 +1,46 @@ +import { useState } from "react"; +import styled from "styled-components"; +import Calendar from "@docspace/components/calendar"; + +const StyledCalendar = styled.div` + position: relative; + + .calendar { + position: absolute; + right: 0; + /* ${(props) => + props.isMobile && + css` + position: fixed; + bottom: 0; + inset-inline-start: 0; + `} */ + } +`; + +const CalendarComponent = () => { + const [isOpen, setIsOpen] = useState(false); + const [selectedDate, setSelectedDate] = useState(null); + + const toggleCalendar = () => setIsOpen((open) => !open); + const onDateSet = (date) => { + console.log("date", date); + setSelectedDate(date); + setIsOpen(false); + }; + + return ( + +
Calendar
+ {isOpen && ( + + )} + + ); +}; + +export default CalendarComponent; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js index a80cdf7807..071909bdcf 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js @@ -6,15 +6,17 @@ import { ReactSVG } from "react-svg"; import { Text } from "@docspace/components"; import ItemContextOptions from "./ItemContextOptions"; +import CalendarComponent from "./Calendar"; -import { StyledTitle } from "../../styles/common"; +import { StyledTitle, StyledItemOptions } from "../../styles/common"; -const FilesItemTitle = ({ t, selection, isSeveralItems }) => { +const FilesItemTitle = ({ t, selection, isSeveralItems, openHistory }) => { const itemTitleRef = useRef(); if (isSeveralItems) return <>; const icon = selection.icon; + //only history return ( @@ -27,11 +29,15 @@ const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
{selection.title} {selection && ( - + + {openHistory && } + + + )} ); diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js index 8bbbda9a92..bf5df38fbd 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js @@ -6,16 +6,16 @@ import { ContextMenu, ContextMenuButton } from "@docspace/components"; import ContextHelper from "../../helpers/ContextHelper"; -const StyledItemContextOptions = styled.div` - ${props => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: auto; - ` - : css` - margin-left: auto; - `} -`; +// const StyledItemContextOptions = styled.div` +// ${props => +// props.theme.interfaceDirection === "rtl" +// ? css` +// margin-right: auto; +// ` +// : css` +// margin-left: auto; +// `} +// `; const ItemContextOptions = ({ t, @@ -33,7 +33,7 @@ const ItemContextOptions = ({ const contextMenuRef = useRef(); - const onContextMenu = e => { + const onContextMenu = (e) => { e.button === 2; if (!contextMenuRef.current.menuRef.current) itemTitleRef.current.click(e); contextMenuRef.current.show(e); @@ -70,7 +70,7 @@ const ItemContextOptions = ({ }; return ( - + <> )} - + ); }; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js index f7902f1b77..c67cfad0a9 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js @@ -44,12 +44,15 @@ const ItemTitle = ({ ? selectionParentRoom : selection; + const openHistory = roomsView === "info_history"; + return ( ); }; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js index cb10f495f1..71653a13f8 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js @@ -41,8 +41,11 @@ const HistoryBlock = ({ ? initiator.avatarSmall : DefaultUserAvatarSmall; + console.log("json.ModifiedDate", json.ModifiedDate); + return ( diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js index e4c83c212d..a187489991 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js @@ -72,8 +72,10 @@ const History = ({ if (!selectionHistory) return ; if (!selectionHistory?.length) return ; + console.log("selectionHistory", selectionHistory); + return ( - + {selectionHistory.map(({ day, feeds }) => [ {day}, ...feeds.map((feed, i) => ( diff --git a/packages/common/components/Section/sub-components/info-panel-body.js b/packages/common/components/Section/sub-components/info-panel-body.js index fc66545ace..1a66c1f0f9 100644 --- a/packages/common/components/Section/sub-components/info-panel-body.js +++ b/packages/common/components/Section/sub-components/info-panel-body.js @@ -10,7 +10,7 @@ const StyledScrollbar = styled(Scrollbar)` box-sizing: border-box; & .scroll-wrapper > .scroller > .scroll-body { overflow: hidden !important; - ${props => + ${(props) => props.theme.interfaceDirection === "rtl" ? css` padding-left: 17px !important; @@ -30,11 +30,14 @@ const StyledScrollbar = styled(Scrollbar)` const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => { const content = children?.props?.children; + console.log("SubInfoPanelBody"); + return ( + stype="mediumBlack" + > {content} ); From be63e1be5bd375e065dbfde6f1967bf3934d2860 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Wed, 4 Oct 2023 16:23:46 +0300 Subject: [PATCH 07/22] Web:Added scrolling to element by date selected in the calendar. --- .../Body/sub-components/ItemTitle/Calendar.js | 6 ++- .../ItemTitle/FilesItemTitle.js | 5 ++- .../Body/sub-components/ItemTitle/index.js | 6 ++- .../Body/views/History/HistoryBlock.js | 4 +- .../InfoPanel/Body/views/History/index.js | 38 +++++++++++++++++-- .../Section/sub-components/info-panel-body.js | 2 - packages/common/store/InfoPanelStore.js | 5 +++ 7 files changed, 54 insertions(+), 12 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index e5c93ce6d8..f9fbfc7598 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -1,5 +1,6 @@ import { useState } from "react"; import styled from "styled-components"; +import moment from "moment"; import Calendar from "@docspace/components/calendar"; const StyledCalendar = styled.div` @@ -18,14 +19,15 @@ const StyledCalendar = styled.div` } `; -const CalendarComponent = () => { +const CalendarComponent = ({ setCalendarDay }) => { const [isOpen, setIsOpen] = useState(false); const [selectedDate, setSelectedDate] = useState(null); const toggleCalendar = () => setIsOpen((open) => !open); const onDateSet = (date) => { - console.log("date", date); + const formattedDate = moment(date.format("YYYY-MM-DD")); setSelectedDate(date); + setCalendarDay(formattedDate._i); setIsOpen(false); }; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js index 9dab0cbea5..37e27188aa 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js @@ -22,6 +22,7 @@ const FilesItemTitle = ({ setInvitePanelOptions, setInviteUsersWarningDialogVisible, isPublicRoomType, + setCalendarDay, }) => { const itemTitleRef = useRef(); @@ -84,7 +85,9 @@ const FilesItemTitle = ({ )} {selection && ( - {openHistory && } + {openHistory && ( + + )} { if (!selection) return null; @@ -53,12 +54,14 @@ const ItemTitle = ({ isSeveralItems={isSeveralItems} getIcon={getIcon} openHistory={openHistory} + setCalendarDay={setCalendarDay} /> ); }; export default inject(({ auth, settingsStore, peopleStore, oformsStore }) => { - const { selectionParentRoom, roomsView } = auth.infoPanelStore; + const { selectionParentRoom, roomsView, setCalendarDay } = + auth.infoPanelStore; const { getIcon } = settingsStore; const { getUserContextOptions } = peopleStore.contextOptionsStore; const { gallerySelected } = oformsStore; @@ -69,5 +72,6 @@ export default inject(({ auth, settingsStore, peopleStore, oformsStore }) => { selectionParentRoom, roomsView, getIcon, + setCalendarDay, }; })(observer(ItemTitle)); diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js index 71653a13f8..2494d7b377 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js @@ -41,11 +41,9 @@ const HistoryBlock = ({ ? initiator.avatarSmall : DefaultUserAvatarSmall; - console.log("json.ModifiedDate", json.ModifiedDate); - return ( diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js index a187489991..95ec1bab97 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js @@ -23,6 +23,7 @@ const History = ({ openUser, isVisitor, isCollaborator, + calendarDay, }) => { const isMount = useRef(true); const abortControllerRef = useRef(new AbortController()); @@ -62,6 +63,37 @@ const History = ({ fetchHistory(selection.id); }, [selection.id]); + useEffect(() => { + if (!calendarDay) return; + + const historyListNode = document.getElementById("history-list-info-panel"); + + if (!historyListNode) return; + + const scroll = historyListNode.closest(".scroller"); + let datesCoincidingWithCalendarDay = []; + + selectionHistory.forEach((item) => { + item.feeds.forEach((feed) => { + if (feed.json.ModifiedDate.slice(0, 10) === calendarDay) + datesCoincidingWithCalendarDay.push(feed.json.ModifiedDate); + }); + }); + + if (!datesCoincidingWithCalendarDay.length) return; + + const dayNode = historyListNode.getElementsByClassName( + datesCoincidingWithCalendarDay[0] + ); + + if (!dayNode[0]) return; + + //TODO:const 120 + const y = dayNode[0].offsetTop - 120; + + scroll.scrollTo(0, y); + }, [calendarDay]); + useEffect(() => { return () => { abortControllerRef.current?.abort(); @@ -72,10 +104,8 @@ const History = ({ if (!selectionHistory) return ; if (!selectionHistory?.length) return ; - console.log("selectionHistory", selectionHistory); - return ( - + {selectionHistory.map(({ day, feeds }) => [ {day}, ...feeds.map((feed, i) => ( @@ -110,6 +140,7 @@ export default inject(({ auth, filesStore, filesActionsStore }) => { selectionParentRoom, getInfoPanelItemIcon, openUser, + calendarDay, } = auth.infoPanelStore; const { personal, culture } = auth.settingsStore; @@ -134,5 +165,6 @@ export default inject(({ auth, filesStore, filesActionsStore }) => { openUser, isVisitor, isCollaborator, + calendarDay, }; })(withTranslation(["InfoPanel", "Common", "Translations"])(observer(History))); diff --git a/packages/common/components/Section/sub-components/info-panel-body.js b/packages/common/components/Section/sub-components/info-panel-body.js index 1a66c1f0f9..6bb6221a4d 100644 --- a/packages/common/components/Section/sub-components/info-panel-body.js +++ b/packages/common/components/Section/sub-components/info-panel-body.js @@ -30,8 +30,6 @@ const StyledScrollbar = styled(Scrollbar)` const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => { const content = children?.props?.children; - console.log("SubInfoPanelBody"); - return ( { + this.calendarDay = calendarDay; + }; + // Selection helpers // getSelectedItems = () => { From f720d088744d8cd74d2870022cb103983b8a025e Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Wed, 4 Oct 2023 17:46:55 +0300 Subject: [PATCH 08/22] Web:Add minDate, maxDate in Calendar. --- .../Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js | 4 +++- .../Body/sub-components/ItemTitle/FilesItemTitle.js | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index f9fbfc7598..0bf140734f 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -19,7 +19,7 @@ const StyledCalendar = styled.div` } `; -const CalendarComponent = ({ setCalendarDay }) => { +const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { const [isOpen, setIsOpen] = useState(false); const [selectedDate, setSelectedDate] = useState(null); @@ -39,6 +39,8 @@ const CalendarComponent = ({ setCalendarDay }) => { className="calendar" setSelectedDate={onDateSet} selectedDate={selectedDate} + minDate={{ roomCreationDate }} + maxDate={new Date()} /> )} diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js index 37e27188aa..91b068da27 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js @@ -86,7 +86,10 @@ const FilesItemTitle = ({ {selection && ( {openHistory && ( - + )} Date: Thu, 5 Oct 2023 09:12:32 +0300 Subject: [PATCH 09/22] Web:Client:Fix minDate. --- .../Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index 0bf140734f..32eab52809 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -31,6 +31,9 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { setIsOpen(false); }; + const formattedRoomCreationDate = + moment(roomCreationDate).format("YYYY/MM/DD"); + return (
Calendar
@@ -39,7 +42,7 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { className="calendar" setSelectedDate={onDateSet} selectedDate={selectedDate} - minDate={{ roomCreationDate }} + minDate={new Date(formattedRoomCreationDate)} maxDate={new Date()} /> )} From 88e39b44b660da2a30ed2cd5dd7b081c9dd10784 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Tue, 10 Oct 2023 13:52:43 +0300 Subject: [PATCH 10/22] Web:Client:Add Portal. --- .../Body/sub-components/ItemTitle/Calendar.js | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index 32eab52809..fc86dd4b40 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -2,8 +2,9 @@ import { useState } from "react"; import styled from "styled-components"; import moment from "moment"; import Calendar from "@docspace/components/calendar"; +import Portal from "@docspace/components/portal"; -const StyledCalendar = styled.div` +const StyledCalendarComponent = styled.div` position: relative; .calendar { @@ -19,6 +20,12 @@ const StyledCalendar = styled.div` } `; +const StyledCalendar = styled(Calendar)` + position: absolute; + top: 150px; + right: 30px; +`; + const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { const [isOpen, setIsOpen] = useState(false); const [selectedDate, setSelectedDate] = useState(null); @@ -35,18 +42,23 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { moment(roomCreationDate).format("YYYY/MM/DD"); return ( - -
Calendar
+ +
+ Calendar +
{isOpen && ( - + } /> )} - + ); }; From e125c70d6517ad072cd3fc0d3e4d6a8ffcccbcae Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 22 Nov 2023 12:27:10 +0300 Subject: [PATCH 11/22] Web: Files: fixed merge --- .../sub-components/SetRoomParams.js | 34 ------------------- 1 file changed, 34 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 8dd1c402f3..a4a1c63569 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -159,40 +159,6 @@ const SetRoomParams = ({ {isVDRRoom && } - {canOwnerChange && roomParams.roomOwner && ( -
- - {t("Files:RoomOwner")} - - -
- -
- - {roomParams.roomOwner.displayName} - - {isMe && ( - ({t("Common:MeLabel")}) - )} -
-
- - - {t("Common:ChangeButton")} - -
- )} - {!isEdit && enableThirdParty && ( Date: Wed, 22 Nov 2023 12:36:47 +0300 Subject: [PATCH 12/22] Web: Files: CreateEditRoomDialog: removed hugeMobile --- .../CreateEditRoomDialog/sub-components/FileLifetime.js | 8 ++++---- .../sub-components/VirtualDataRoomBlock.js | 6 +----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js index 757d456522..12006359bf 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/FileLifetime.js @@ -3,7 +3,7 @@ import styled from "styled-components"; import Text from "@docspace/components/text"; import TextInput from "@docspace/components/text-input"; import ComboBox from "@docspace/components/combobox"; -import { hugeMobile } from "@docspace/components/utils/device"; +import { mobile } from "@docspace/components/utils/device"; const StyledFileLifetime = styled.div` margin-top: 12px; @@ -12,7 +12,7 @@ const StyledFileLifetime = styled.div` display: flex; align-items: center; - @media ${hugeMobile} { + @media ${mobile} { display: block; } @@ -25,7 +25,7 @@ const StyledFileLifetime = styled.div` min-width: 150px; margin-right: 4px; - @media ${hugeMobile} { + @media ${mobile} { margin-right: 8px; width: 165px; } @@ -36,7 +36,7 @@ const StyledFileLifetime = styled.div` width: 92px; min-width: 92px; - @media ${hugeMobile} { + @media ${mobile} { margin-right: 0px; width: 165px; } 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 4f9fe1a4b4..b8a1423e15 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/VirtualDataRoomBlock.js @@ -4,7 +4,6 @@ import styled from "styled-components"; import Text from "@docspace/components/text"; import ToggleButton from "@docspace/components/toggle-button"; import FileLifetime from "./FileLifetime"; -import { hugeMobile } from "@docspace/components/utils/device"; const StyledVirtualDataRoomBlock = styled.div` .virtual-data-room-block { @@ -23,10 +22,7 @@ const StyledVirtualDataRoomBlock = styled.div` } .virtual-data-room-block_description { max-width: 420px; - - @media ${hugeMobile} { - max-width: 315px; - } + margin-right: 28px; color: ${({ theme }) => theme.editLink.text.color}; } From df56be32e641d212d22f3b4e820d490e446112de Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 5 Dec 2023 18:41:59 +0300 Subject: [PATCH 13/22] Web: Files: Fixed VDR creation, fixed translations --- .../components/dialogs/CreateEditRoomDialog/data/index.js | 2 ++ packages/client/src/helpers/filesUtils.js | 3 +++ packages/client/src/pages/Home/Section/Filter/index.js | 7 +++++++ packages/common/constants/index.js | 3 ++- 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 9df282b42e..07adbb2c31 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -52,5 +52,7 @@ export const getRoomTypeDefaultTagTranslation = (roomType = 1, t) => { return t("Files:CustomRooms"); case RoomsType.PublicRoom: return t("Files:PublicRoom"); + case RoomsType.VirtualDataRoom: + return t("Files:VirtualDataRoom"); } }; diff --git a/packages/client/src/helpers/filesUtils.js b/packages/client/src/helpers/filesUtils.js index 91edb6e8db..916191c5a3 100644 --- a/packages/client/src/helpers/filesUtils.js +++ b/packages/client/src/helpers/filesUtils.js @@ -60,6 +60,9 @@ export const getDefaultRoomName = (room, t) => { case RoomsType.PublicRoom: return t("Files:PublicRoom"); + + case RoomsType.VirtualDataRoom: + return t("Files:VirtualDataRoom"); } }; diff --git a/packages/client/src/pages/Home/Section/Filter/index.js b/packages/client/src/pages/Home/Section/Filter/index.js index 3ca7deda09..3805c530c2 100644 --- a/packages/client/src/pages/Home/Section/Filter/index.js +++ b/packages/client/src/pages/Home/Section/Filter/index.js @@ -1234,6 +1234,13 @@ const SectionFilterContent = ({ group: FilterGroups.roomFilterType, label: t("PublicRoom"), }; + case RoomsType.VirtualDataRoom: + return { + id: "filter_type-virtual-data", + key: RoomsType.VirtualDataRoom, + group: FilterGroups.roomFilterType, + label: t("VirtualDataRoom"), + }; case RoomsType.CustomRoom: default: return { diff --git a/packages/common/constants/index.js b/packages/common/constants/index.js index 83d73e1eaf..7508393b11 100644 --- a/packages/common/constants/index.js +++ b/packages/common/constants/index.js @@ -139,7 +139,7 @@ export const RoomsType = Object.freeze({ // ReviewRoom: 3, //TODO: Restore when certs will be done // ReadOnlyRoom: 4, //TODO: Restore when certs will be done PublicRoom: 6, - VirtualDataRoom: 7, + VirtualDataRoom: 8, CustomRoom: 5, }); @@ -156,6 +156,7 @@ export const RoomsTypeTranslations = Object.freeze({ 4: "Files:ViewOnlyRooms", 5: "Files:CustomRooms", 6: "Files:PublicRoom", + 8: "Files:VirtualDataRoom", }); /** * Enum for room provider type. From da02a34b89757818db00ff66724daaf20517f4ac Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 5 Dec 2023 19:42:46 +0300 Subject: [PATCH 14/22] Web: Files: VRD: added creation with auto indexing --- .../src/components/GlobalEvents/EditRoomEvent.js | 1 + .../dialogs/CreateEditRoomDialog/CreateRoomDialog.js | 1 + .../dialogs/CreateEditRoomDialog/EditRoomDialog.js | 3 ++- .../sub-components/SetRoomParams.js | 8 +++++++- .../sub-components/VirtualDataRoomBlock.js | 10 ++++------ packages/client/src/store/CreateEditRoomStore.js | 1 + packages/client/src/store/FilesStore.js | 2 ++ 7 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/client/src/components/GlobalEvents/EditRoomEvent.js b/packages/client/src/components/GlobalEvents/EditRoomEvent.js index 0aa80775cb..45016aa620 100644 --- a/packages/client/src/components/GlobalEvents/EditRoomEvent.js +++ b/packages/client/src/components/GlobalEvents/EditRoomEvent.js @@ -75,6 +75,7 @@ const EditRoomEvent = ({ zoom: 1, }, roomOwner: item.createdBy, + indexing: item.indexing, }; const updateRoom = (oldRoom, newRoom) => { diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js index cf6aa2302d..dd05ede743 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js @@ -76,6 +76,7 @@ const CreateRoomDialog = ({ y: 0.5, zoom: 1, }, + indexing: false, // VDR Automatic indexing }; const [roomParams, setRoomParams] = useState({ ...startRoomParams }); diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js index 62de4ea147..b846246770 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js @@ -39,7 +39,8 @@ const EditRoomDialog = ({ currentParams.tags.sort().toString() && ((prevParams.icon.uploadedFile === "" && currentParams.icon.uploadedFile === null) || - prevParams.icon.uploadedFile === currentParams.icon.uploadedFile) + prevParams.icon.uploadedFile === currentParams.icon.uploadedFile) && + prevParams.indexing === currentParams.indexing ); }; 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 a4a1c63569..f463b75899 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js @@ -157,7 +157,13 @@ const SetRoomParams = ({ /> )} - {isVDRRoom && } + {isVDRRoom && ( + + )} {!isEdit && enableThirdParty && ( { +const VirtualDataRoomBlock = ({ t, roomParams, setRoomParams }) => { const role = t("Translations:RoleViewer"); - const [automaticIndexingChecked, setAutomaticIndexingChecked] = - useState(false); const [fileLifetimeChecked, setFileLifetimeChecked] = useState(false); const [copyAndDownloadChecked, setCopyAndDownloadChecked] = useState(false); const [watermarksChecked, setWatermarksChecked] = useState(false); const onChangeAutomaticIndexing = () => { - setAutomaticIndexingChecked(!automaticIndexingChecked); + setRoomParams({ ...roomParams, indexing: !roomParams.indexing }); }; const onChangeFileLifetime = () => { @@ -96,7 +94,7 @@ const VirtualDataRoomBlock = ({ t }) => { bodyText={t("AutomaticIndexingDescription")} onChange={onChangeAutomaticIndexing} isDisabled={false} - isChecked={automaticIndexingChecked} + isChecked={roomParams.indexing} > Date: Wed, 24 Jan 2024 11:54:07 +0300 Subject: [PATCH 15/22] Web: Add setCalendarDay, open CalendarComponent. --- .../Body/sub-components/ItemTitle/Calendar.js | 1 + .../sub-components/ItemTitle/Rooms/index.js | 13 +++++++++++- .../Body/sub-components/ItemTitle/index.js | 9 +++++--- .../InfoPanel/Body/views/History/index.js | 1 + packages/common/store/InfoPanelStore.js | 21 ++++++++++++------- 5 files changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index fc86dd4b40..e795211ef4 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -31,6 +31,7 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { const [selectedDate, setSelectedDate] = useState(null); const toggleCalendar = () => setIsOpen((open) => !open); + const onDateSet = (date) => { const formattedDate = moment(date.format("YYYY-MM-DD")); setSelectedDate(date); diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js index bf3870c657..4b627acd2a 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js @@ -8,6 +8,7 @@ import IconButton from "@docspace/components/icon-button"; import { StyledTitle } from "../../../styles/common"; import RoomIcon from "@docspace/components/room-icon"; import RoomsContextBtn from "./context-btn"; +import CalendarComponent from "../Calendar"; import { RoomsType, ShareAccessRights } from "@docspace/common/constants"; const RoomsItemHeader = ({ @@ -20,6 +21,8 @@ const RoomsItemHeader = ({ setInviteUsersWarningDialogVisible, isPublicRoomType, roomsView, + setCalendarDay, + openHistory, }) => { const itemTitleRef = useRef(); @@ -83,7 +86,12 @@ const RoomsItemHeader = ({ size={16} /> )} - + {openHistory && ( + + )}
@@ -96,6 +104,7 @@ export default inject(({ auth, dialogsStore, selectedFolderStore }) => { selectionParentRoom, getIsRooms, roomsView, + setCalendarDay, } = auth.infoPanelStore; const isShowParentRoom = @@ -127,6 +136,8 @@ export default inject(({ auth, dialogsStore, selectedFolderStore }) => { (selectedFolderStore.roomType ?? auth.infoPanelStore.selectionParentRoom?.roomType) === RoomsType.PublicRoom, + + setCalendarDay, }; })( withTranslation([ diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js index 4b05710de6..281dbca24f 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js @@ -38,12 +38,15 @@ const ItemTitle = ({ currentColorScheme={currentColorScheme} gallerySelected={gallerySelected} getIcon={getIcon} - openHistory={openHistory} - setCalendarDay={setCalendarDay} /> ); - return ; + return ( + + ); }; export default inject(({ auth, settingsStore, peopleStore, oformsStore }) => { diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js index 95ec1bab97..fd55c7f05e 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js @@ -71,6 +71,7 @@ const History = ({ if (!historyListNode) return; const scroll = historyListNode.closest(".scroller"); + let datesCoincidingWithCalendarDay = []; selectionHistory.forEach((item) => { diff --git a/packages/common/store/InfoPanelStore.js b/packages/common/store/InfoPanelStore.js index baaa8952e4..3cff5dc70a 100644 --- a/packages/common/store/InfoPanelStore.js +++ b/packages/common/store/InfoPanelStore.js @@ -46,6 +46,7 @@ class InfoPanelStore { selectedFolderStore = null; treeFoldersStore = null; membersList = null; + calendarDay = null; constructor() { makeAutoObservable(this); @@ -227,14 +228,14 @@ class InfoPanelStore { return item.isRoom || !!item.roomType ? item.rootFolderType === FolderType.Archive ? item.logo && item.logo.medium - : this.settingsStore.getIcon( - size, - null, - null, - null, - item.roomType, - true - ) + : this.settingsStore.getIcon( + size, + null, + null, + null, + item.roomType, + true + ) ? item.logo.medium : item.icon ? item.icon @@ -351,6 +352,10 @@ class InfoPanelStore { setMembersList = (membersList) => { this.membersList = membersList; }; + + setCalendarDay = (calendarDay) => { + this.calendarDay = calendarDay; + }; } export default InfoPanelStore; From a88958efbb02468542c165965951b85c99ad3ec1 Mon Sep 17 00:00:00 2001 From: VladaGazizova Date: Thu, 25 Jan 2024 18:10:19 +0300 Subject: [PATCH 16/22] Web:Client:Added transition to the nearest new date if there is no entry in the history for the selected date. --- .../InfoPanel/Body/views/History/index.js | 70 +++++++++++++++---- 1 file changed, 57 insertions(+), 13 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js index fd55c7f05e..95e46413f8 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js @@ -72,27 +72,71 @@ const History = ({ const scroll = historyListNode.closest(".scroller"); - let datesCoincidingWithCalendarDay = []; + let dateCoincidingWithCalendarDay = null; - selectionHistory.forEach((item) => { - item.feeds.forEach((feed) => { - if (feed.json.ModifiedDate.slice(0, 10) === calendarDay) - datesCoincidingWithCalendarDay.push(feed.json.ModifiedDate); + selectionHistory.every((item) => { + if (dateCoincidingWithCalendarDay) return false; + + item.feeds.every((feed) => { + if (feed.json.ModifiedDate.slice(0, 10) === calendarDay) { + dateCoincidingWithCalendarDay = feed.json.ModifiedDate; + } }); + + return true; }); - if (!datesCoincidingWithCalendarDay.length) return; + if (dateCoincidingWithCalendarDay) { + const dayNode = historyListNode.getElementsByClassName( + dateCoincidingWithCalendarDay + ); - const dayNode = historyListNode.getElementsByClassName( - datesCoincidingWithCalendarDay[0] - ); + if (!dayNode[0]) return; - if (!dayNode[0]) return; + //TODO:const 120 + const y = dayNode[0].offsetTop - 120; + scroll.scrollTo(0, y); - //TODO:const 120 - const y = dayNode[0].offsetTop - 120; + return; + } - scroll.scrollTo(0, y); + //If there are no entries in the history for the selected day + const calendarDayModified = new Date(calendarDay); + let nearestNewerDate = null; + + selectionHistory.every((item, indexItem) => { + if (nearestNewerDate) return false; + + item.feeds.every((feed) => { + const date = new Date(feed.json.ModifiedDate); + + //Stop checking all entries for one day + if (date > calendarDayModified) return false; + + //Looking for the nearest new date + if (date < calendarDayModified) { + //if there are no nearby new entries in the post history, then scroll to the last one + if (indexItem === 0) { + nearestNewerDate = feed.json.ModifiedDate; + return false; + } + + nearestNewerDate = + selectionHistory[indexItem - 1].feeds[0].json.ModifiedDate; + } + }); + + return true; + }); + + if (nearestNewerDate) { + const dayNode = historyListNode.getElementsByClassName(nearestNewerDate); + + if (!dayNode[0]) return; + //TODO:const 120 + const y = dayNode[0].offsetTop - 120; + scroll.scrollTo(0, y); + } }, [calendarDay]); useEffect(() => { From 8c4e88835032a9d8a550e4a9b6a94de38b426930 Mon Sep 17 00:00:00 2001 From: VladaGazizova Date: Fri, 26 Jan 2024 10:58:16 +0300 Subject: [PATCH 17/22] Web:Client:Added calendar date reset after scrolling to record in history. --- .../InfoPanel/Body/sub-components/ItemTitle/Calendar.js | 8 +++++++- .../src/pages/Home/InfoPanel/Body/views/History/index.js | 6 +++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index e795211ef4..a6d875da16 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import styled from "styled-components"; import moment from "moment"; import Calendar from "@docspace/components/calendar"; @@ -30,6 +30,12 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { const [isOpen, setIsOpen] = useState(false); const [selectedDate, setSelectedDate] = useState(null); + useEffect(() => { + return () => { + setCalendarDay(null); + }; + }, []); + const toggleCalendar = () => setIsOpen((open) => !open); const onDateSet = (date) => { diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js index 95e46413f8..33dc261e66 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js @@ -24,6 +24,7 @@ const History = ({ isVisitor, isCollaborator, calendarDay, + setCalendarDay, }) => { const isMount = useRef(true); const abortControllerRef = useRef(new AbortController()); @@ -96,7 +97,7 @@ const History = ({ //TODO:const 120 const y = dayNode[0].offsetTop - 120; scroll.scrollTo(0, y); - + setCalendarDay(null); return; } @@ -136,6 +137,7 @@ const History = ({ //TODO:const 120 const y = dayNode[0].offsetTop - 120; scroll.scrollTo(0, y); + setCalendarDay(null); } }, [calendarDay]); @@ -186,6 +188,7 @@ export default inject(({ auth, filesStore, filesActionsStore }) => { getInfoPanelItemIcon, openUser, calendarDay, + setCalendarDay, } = auth.infoPanelStore; const { personal, culture } = auth.settingsStore; @@ -211,5 +214,6 @@ export default inject(({ auth, filesStore, filesActionsStore }) => { isVisitor, isCollaborator, calendarDay, + setCalendarDay, }; })(withTranslation(["InfoPanel", "Common", "Translations"])(observer(History))); From 0471b801ec2a4db0af584a7a1bc3c26a585fb2da Mon Sep 17 00:00:00 2001 From: VladaGazizova Date: Fri, 26 Jan 2024 13:21:08 +0300 Subject: [PATCH 18/22] Web:Client:Add close calendar when clicking outside the area. --- .../Body/sub-components/ItemTitle/Calendar.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index a6d875da16..af946d4a9f 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import styled from "styled-components"; import moment from "moment"; import Calendar from "@docspace/components/calendar"; @@ -30,12 +30,23 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { const [isOpen, setIsOpen] = useState(false); const [selectedDate, setSelectedDate] = useState(null); + const calendarRef = useRef(); + const calendarButtonRef = useRef(); + useEffect(() => { + document.addEventListener("click", handleClick, { capture: true }); return () => { + document.removeEventListener("click", handleClick, { capture: true }); setCalendarDay(null); }; }, []); + const handleClick = (e) => { + !calendarButtonRef?.current?.contains(e.target) && + !calendarRef?.current?.contains(e.target) && + setIsOpen(false); + }; + const toggleCalendar = () => setIsOpen((open) => !open); const onDateSet = (date) => { @@ -50,7 +61,11 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { return ( -
+
Calendar
{isOpen && ( @@ -61,6 +76,7 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { selectedDate={selectedDate} minDate={new Date(formattedRoomCreationDate)} maxDate={new Date()} + forwardedRef={calendarRef} /> } /> From 5174a802822d7558b3d0060d4e8006c7c6c50939 Mon Sep 17 00:00:00 2001 From: VladaGazizova Date: Fri, 26 Jan 2024 17:05:53 +0300 Subject: [PATCH 19/22] Web:Client:Added calendar styles for mobile phones in vertical position. --- .../Body/sub-components/ItemTitle/Calendar.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index af946d4a9f..86d5171fdf 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -1,8 +1,9 @@ import { useState, useEffect, useRef } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import moment from "moment"; import Calendar from "@docspace/components/calendar"; import Portal from "@docspace/components/portal"; +import { isMobile } from "@docspace/components/utils/device"; const StyledCalendarComponent = styled.div` position: relative; @@ -24,6 +25,15 @@ const StyledCalendar = styled(Calendar)` position: absolute; top: 150px; right: 30px; + + ${(props) => + props.isMobile && + css` + position: fixed; + bottom: 0; + top: auto; + right: auto; + `} `; const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { @@ -77,6 +87,7 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { minDate={new Date(formattedRoomCreationDate)} maxDate={new Date()} forwardedRef={calendarRef} + isMobile={isMobile()} /> } /> From bcba14cc8ac07188a2a1d343898a51c754e49663 Mon Sep 17 00:00:00 2001 From: VladaGazizova Date: Fri, 26 Jan 2024 17:37:35 +0300 Subject: [PATCH 20/22] Web:Add icon calendar. --- .../Body/sub-components/ItemTitle/Calendar.js | 11 +++++------ public/images/calendar.info.panel.react.svg | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+), 6 deletions(-) create mode 100644 public/images/calendar.info.panel.react.svg diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index 86d5171fdf..324dc38a30 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -1,9 +1,11 @@ +import IconCalendar from "PUBLIC_DIR/images/calendar.info.panel.react.svg?url"; import { useState, useEffect, useRef } from "react"; import styled, { css } from "styled-components"; import moment from "moment"; import Calendar from "@docspace/components/calendar"; import Portal from "@docspace/components/portal"; import { isMobile } from "@docspace/components/utils/device"; +import { ReactSVG } from "react-svg"; const StyledCalendarComponent = styled.div` position: relative; @@ -71,13 +73,10 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { return ( -
- Calendar +
+
+ {isOpen && ( + + + + + + + + + + + + + + + + + + From 94ad3b879f9f2f1b64668a131b7dcb2292a7ba8f Mon Sep 17 00:00:00 2001 From: VladaGazizova Date: Mon, 29 Jan 2024 11:51:06 +0300 Subject: [PATCH 21/22] Web:Client:Refactoring for Calendar. --- .../Body/sub-components/ItemTitle/Calendar.js | 22 +++++++-------- .../sub-components/ItemTitle/Rooms/index.js | 1 + .../InfoPanel/Body/views/History/index.js | 27 ++++++++++--------- 3 files changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js index 324dc38a30..dd536d3fd3 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js @@ -10,23 +10,15 @@ import { ReactSVG } from "react-svg"; const StyledCalendarComponent = styled.div` position: relative; - .calendar { - position: absolute; - right: 0; - /* ${(props) => - props.isMobile && - css` - position: fixed; - bottom: 0; - inset-inline-start: 0; - `} */ + .icon-calendar { + padding-right: 2px; } `; const StyledCalendar = styled(Calendar)` position: absolute; - top: 150px; - right: 30px; + top: 134px; + right: 16px; ${(props) => props.isMobile && @@ -74,7 +66,11 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => { return (
- +
{isOpen && ( diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js index 4b627acd2a..3e1ef4c96f 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js @@ -86,6 +86,7 @@ const RoomsItemHeader = ({ size={16} /> )} + {/* TODO: Add a condition so that there is a vdr room when the correct room type is returned from the backend for Calendar */} {openHistory && ( { if (!calendarDay) return; - const historyListNode = document.getElementById("history-list-info-panel"); + const heightTitleRoom = 80; + const heightDayWeek = 40; + const historyListNode = document.getElementById("history-list-info-panel"); if (!historyListNode) return; const scroll = historyListNode.closest(".scroller"); + if (!scroll) return; let dateCoincidingWithCalendarDay = null; @@ -91,13 +94,12 @@ const History = ({ const dayNode = historyListNode.getElementsByClassName( dateCoincidingWithCalendarDay ); - if (!dayNode[0]) return; - //TODO:const 120 - const y = dayNode[0].offsetTop - 120; + const y = dayNode[0].offsetTop - heightTitleRoom - heightDayWeek; scroll.scrollTo(0, y); setCalendarDay(null); + return; } @@ -116,7 +118,7 @@ const History = ({ //Looking for the nearest new date if (date < calendarDayModified) { - //if there are no nearby new entries in the post history, then scroll to the last one + //If there are no nearby new entries in the post history, then scroll to the last one if (indexItem === 0) { nearestNewerDate = feed.json.ModifiedDate; return false; @@ -130,15 +132,14 @@ const History = ({ return true; }); - if (nearestNewerDate) { - const dayNode = historyListNode.getElementsByClassName(nearestNewerDate); + if (!nearestNewerDate) return; - if (!dayNode[0]) return; - //TODO:const 120 - const y = dayNode[0].offsetTop - 120; - scroll.scrollTo(0, y); - setCalendarDay(null); - } + const dayNode = historyListNode.getElementsByClassName(nearestNewerDate); + if (!dayNode[0]) return; + + const y = dayNode[0].offsetTop - heightTitleRoom - heightDayWeek; + scroll.scrollTo(0, y); + setCalendarDay(null); }, [calendarDay]); useEffect(() => { From 4b96f5c99ed79ef6367464d40d337f0a856cbaaf Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 17 Jun 2024 13:37:06 +0300 Subject: [PATCH 22/22] Web: VDR: fixed merge --- .../locales/en/CreateEditRoomDialog.json | 2 -- .../CreateEditRoomDialog/data/index.js | 23 +------------------ packages/client/src/helpers/filesUtils.js | 2 +- .../src/pages/Home/Section/Filter/index.js | 2 +- .../components/room-type/RoomType.utils.ts | 4 +++- public/locales/en/Common.json | 4 +++- 6 files changed, 9 insertions(+), 28 deletions(-) diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index c70ebc4720..6fb4e78567 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/packages/client/public/locales/en/CreateEditRoomDialog.json @@ -11,7 +11,6 @@ "MakeRoomPrivateTitle": "Make the Room Private", "PeopleSelectorInfo": "Only a room admin or a {{productName}} admin can become the owner of the room", "PublicRoomBarDescription": "This room is available to anyone with the link. External users will have View Only permission for all the files.", - "VirtualDataRoomDescription": "Use VDR for advanced file security and transparency while filling and signing documents step-by-step. Set watermarks, automatically index and track all content, restrict downloading and copying.", "PublicRoomSystemFoldersDescription": "System folders store copies of forms at different stages of completion. Forms that are being filled are stored in the In progress folder, and completed forms are stored in the Complete folder.", "PublicRoomSystemFoldersTitle": "System Folders", "RoomEditing": "Room editing", @@ -34,5 +33,4 @@ "AddWatermarksToDocuments": "Add watermarks to documents", "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced.", "FilesOlderThan": "Files older than:" - "ThirdPartyStorageRoomAdminNoStorageAlert": "To connect a third-party storage, you need to add the corresponding service in the Integration section of DocSpace settings. Contact DocSpace owner or administrator to enable the integration." } diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js index 7f1b85b6ad..02b1bfa630 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/data/index.js @@ -26,27 +26,6 @@ import { RoomsType } from "@docspace/shared/enums"; -export const getRoomTypeDescriptionTranslation = (roomType = 1, t) => { - switch (roomType) { - case RoomsType.FillingFormsRoom: - return t("CreateEditRoomDialog:FillingFormsRoomDescription"); - case RoomsType.EditingRoom: - return t("CreateEditRoomDialog:CollaborationRoomDescription"); - case RoomsType.ReviewRoom: - return t("CreateEditRoomDialog:ReviewRoomDescription"); - case RoomsType.ReadOnlyRoom: - return t("CreateEditRoomDialog:ViewOnlyRoomDescription"); - case RoomsType.CustomRoom: - return t("CreateEditRoomDialog:CustomRoomDescription"); - case RoomsType.PublicRoom: - return t("CreateEditRoomDialog:PublicRoomDescription"); - case RoomsType.VirtualDataRoom: - return t("CreateEditRoomDialog:VirtualDataRoomDescription"); - case RoomsType.FormRoom: - return t("CreateEditRoomDialog:FormFilingRoomDescription"); - } -}; - export const getRoomTypeDefaultTagTranslation = (roomType = 1, t) => { switch (roomType) { case RoomsType.FillingFormsRoom: @@ -62,7 +41,7 @@ export const getRoomTypeDefaultTagTranslation = (roomType = 1, t) => { case RoomsType.PublicRoom: return t("Common:PublicRoom"); case RoomsType.VirtualDataRoom: - return t("Files:VirtualDataRoom"); + return t("Common:VirtualDataRoom"); case RoomsType.FormRoom: return t("Common:FormRoom"); } diff --git a/packages/client/src/helpers/filesUtils.js b/packages/client/src/helpers/filesUtils.js index 9a192b1d2e..44f256ebaa 100644 --- a/packages/client/src/helpers/filesUtils.js +++ b/packages/client/src/helpers/filesUtils.js @@ -88,7 +88,7 @@ export const getDefaultRoomName = (room, t) => { return t("Common:PublicRoom"); case RoomsType.VirtualDataRoom: - return t("Files:VirtualDataRoom"); + return t("Common:VirtualDataRoom"); case RoomsType.FormRoom: return t("Common:FormRoom"); } diff --git a/packages/client/src/pages/Home/Section/Filter/index.js b/packages/client/src/pages/Home/Section/Filter/index.js index 907cd525b1..2146661f66 100644 --- a/packages/client/src/pages/Home/Section/Filter/index.js +++ b/packages/client/src/pages/Home/Section/Filter/index.js @@ -1624,7 +1624,7 @@ const SectionFilterContent = ({ id: "filter_type-virtual-data", key: RoomsType.VirtualDataRoom, group: FilterGroups.roomFilterType, - label: t("VirtualDataRoom"), + label: t("Common:VirtualDataRoom"), }; case RoomsType.CustomRoom: default: diff --git a/packages/shared/components/room-type/RoomType.utils.ts b/packages/shared/components/room-type/RoomType.utils.ts index f61150a171..bb0d3e6c4b 100644 --- a/packages/shared/components/room-type/RoomType.utils.ts +++ b/packages/shared/components/room-type/RoomType.utils.ts @@ -19,7 +19,7 @@ export const getRoomTypeTitleTranslation = ( case RoomsType.PublicRoom: return t("Common:PublicRoom"); case RoomsType.VirtualDataRoom: - return t("Files:VirtualDataRoom"); + return t("Common:VirtualDataRoom"); case RoomsType.FormRoom: return t("Common:FormFilingRoomTitle"); default: @@ -44,6 +44,8 @@ export const getRoomTypeDescriptionTranslation = ( return t("Common:CustomRoomDescription"); case RoomsType.PublicRoom: return t("Common:PublicRoomDescription"); + case RoomsType.VirtualDataRoom: + return t("Common:VirtualDataRoomDescription"); case RoomsType.FormRoom: return t("Common:FormFilingRoomDescription"); default: diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index ff6e8dc4d2..71ac303e79 100644 --- a/public/locales/en/Common.json +++ b/public/locales/en/Common.json @@ -486,5 +486,7 @@ "OverwriteDescription": "The new file will replace the existing one as a new version.", "OverwriteTitle": "Overwrite with version update", "SkipDescription": "No file will be copied. The original file will be retained in the destination folder.", - "SkipTitle": "Skip" + "SkipTitle": "Skip", + "VirtualDataRoom": "Virtual Data Room", + "VirtualDataRoomDescription": "Use VDR for advanced file security and transparency while filling and signing documents step-by-step. Set watermarks, automatically index and track all content, restrict downloading and copying." }