From 86325f87ba8eb4e7b2d58c97849d6d76952a3540 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 9 Dec 2020 15:37:34 +0300 Subject: [PATCH 01/23] Web: Common: fixed sharing api --- .../Client/src/store/files/actions.js | 34 ++----------------- web/ASC.Web.Common/src/api/files/index.js | 33 ++++++++---------- 2 files changed, 18 insertions(+), 49 deletions(-) diff --git a/products/ASC.Files/Client/src/store/files/actions.js b/products/ASC.Files/Client/src/store/files/actions.js index e6b690d1aa..ed6e219522 100644 --- a/products/ASC.Files/Client/src/store/files/actions.js +++ b/products/ASC.Files/Client/src/store/files/actions.js @@ -550,41 +550,13 @@ export function setShareFiles( fileIds, share, notify, - sharingMessage, - externalAccess + sharingMessage ) { - const foldersRequests = folderIds.map((id) => - files.setShareFolder(id, share, notify, sharingMessage) - ); - - const filesRequests = fileIds.map((id) => - files.setShareFiles(id, share, notify, sharingMessage) - ); - - let externalAccessRequest = []; - - if (fileIds.length === 1 && externalAccess !== null) { - externalAccessRequest = fileIds.map((id) => - files.setExternalAccess(id, externalAccess) - ); - } - - const requests = [ - ...foldersRequests, - ...filesRequests, - ...externalAccessRequest, - ]; - return axios.all(requests); + return files.setShareFiles(fileIds, folderIds, share, notify, sharingMessage); } export function getShareUsers(folderIds, fileIds) { - const foldersRequests = folderIds.map((folderId) => - files.getShareFolders(folderId) - ); - const filesRequests = fileIds.map((fileId) => files.getShareFiles(fileId)); - const requests = [...foldersRequests, ...filesRequests]; - - return axios.all(requests).then((res) => res); + return files.getShareFiles(fileIds, folderIds); } export function clearPrimaryProgressData() { diff --git a/web/ASC.Web.Common/src/api/files/index.js b/web/ASC.Web.Common/src/api/files/index.js index f7ae70d16a..143745d4c6 100644 --- a/web/ASC.Web.Common/src/api/files/index.js +++ b/web/ASC.Web.Common/src/api/files/index.js @@ -382,17 +382,12 @@ export function removeFiles(folderIds, fileIds, deleteAfter, immediately) { return request({ method: "put", url: "/files/fileops/delete", data }); } -export function getShareFolders(folderId) { +export function getShareFiles(fileIds, folderIds) { + const data = { fileIds, folderIds }; return request({ - method: "get", - url: `/files/folder/${folderId}/share`, - }); -} - -export function getShareFiles(fileId) { - return request({ - method: "get", - url: `/files/file/${fileId}/share`, + method: "post", + url: "/files/share", + data, }); } @@ -405,20 +400,22 @@ export function setExternalAccess(fileId, accessType) { }); } -export function setShareFolder(folderId, share, notify, sharingMessage) { - const data = { share, notify, sharingMessage }; +export function setShareFiles( + fileIds, + folderIds, + share, + notify, + sharingMessage +) { + const data = { fileIds, folderIds, share, notify, sharingMessage }; + return request({ method: "put", - url: `/files/folder/${folderId}/share`, + url: `/files/share`, data, }); } -export function setShareFiles(fileId, share, notify, sharingMessage) { - const data = { share, notify, sharingMessage }; - return request({ method: "put", url: `/files/file/${fileId}/share`, data }); -} - export function startUploadSession(folderId, fileName, fileSize, relativePath) { const data = { fileName, fileSize, relativePath }; return request({ From 2da7ae56565e5ffc7d1b3f35ad9bca0dcac1389b Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 9 Dec 2020 15:38:08 +0300 Subject: [PATCH 02/23] Web: Files: added new share translations --- .../panels/SharingPanel/locales/en/translation.json | 11 +++++++++-- .../panels/SharingPanel/locales/ru/translation.json | 9 ++++++++- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/en/translation.json b/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/en/translation.json index 58039d7336..c01827b828 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/en/translation.json +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/en/translation.json @@ -14,5 +14,12 @@ "ShareVia": "Share via", "Embedding": "Embedding", "ExternalLink": "External link", - "InternalLink": "Internal link" -} + "InternalLink": "Internal link", + + "FullAccess": "Full access", + "ReadOnly": "Read only", + "Review": "Review", + "Comment": "Comment", + "FormFilling": "Form filling", + "DenyAccess": "Deny access" +} \ No newline at end of file diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/ru/translation.json b/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/ru/translation.json index 3ebb592fca..635c54a839 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/ru/translation.json +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/locales/ru/translation.json @@ -14,5 +14,12 @@ "ShareVia": "Отправить по", "Embedding": "Встраивание", "ExternalLink": "Внешняя ссылка", - "InternalLink": "Внутренняя ссылка" + "InternalLink": "Внутренняя ссылка", + + "FullAccess": "Полный доступ", + "ReadOnly": "Только чтение", + "Review": "Рецензирование", + "Comment": "Комментирование", + "FormFilling": "Заполнение форм", + "DenyAccess": "Доступ запрещён" } From c3b935e6b3b5d9ce868d4e72f421d86183b18eec Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 9 Dec 2020 15:39:01 +0300 Subject: [PATCH 03/23] Web: Files: added AccessComboBox component --- .../panels/SharingPanel/AccessComboBox.js | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js new file mode 100644 index 0000000000..2b3e8be163 --- /dev/null +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js @@ -0,0 +1,63 @@ +import React from "react"; +import { ComboBox, Icons } from "asc-web-components"; + +const AccessComboBox = (props) => { + const { + //t, + //itemId, + //itemAccess, + //accessOptions, + //onFullAccessClick, + //onReadOnlyClick, + //onReviewClick, + //onCommentClick, + //onFormFillingClick, + //onDenyAccessClick, + access, + advancedOptions, + directionX, + } = props; + + const getAccessIcon = () => { + switch (access) { + case 1: + return "AccessEditIcon"; + case 2: + return "EyeIcon"; + case 3: + return "AccessNoneIcon"; + case 5: + return "AccessReviewIcon"; + case 6: + return "AccessCommentIcon"; + case 7: + return "AccessFormIcon"; + case 8: + return "CustomFilterIcon"; + default: + return; + } + }; + + const accessIcon = getAccessIcon(); + + return ( + + {React.createElement(Icons[accessIcon], { + size: "medium", + className: "sharing-access-combo-box-icon", + })} + + ); +}; + +export default AccessComboBox; From 962e9c8643483ef4cc737e50d098466a03623d40 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 9 Dec 2020 15:39:52 +0300 Subject: [PATCH 04/23] Web: Files: refactoring SharingPanel --- .../components/panels/AddGroupsPanel/index.js | 24 +- .../components/panels/AddUsersPanel/index.js | 24 +- .../panels/SharingPanel/SharingRow.js | 140 +++--- .../components/panels/SharingPanel/index.js | 429 +++++------------- .../components/panels/SharingPanel/linkRow.js | 37 +- 5 files changed, 244 insertions(+), 410 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js index b5eac84413..6dfae4bb8e 100644 --- a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js @@ -9,6 +9,7 @@ import { StyledHeaderContent, StyledBody, } from "../StyledPanels"; +import AccessComboBox from "../SharingPanel/AccessComboBox"; import { createI18N } from "../../../helpers/i18n"; const i18n = createI18N({ page: "AddGroupsPanel", @@ -53,8 +54,13 @@ class AddGroupsPanelComponent extends React.Component { } const currentItem = shareDataItems.find((x) => x.id === item.id); if (!currentItem) { - item.rights = accessRight; - items.push(item); + const newItem = { + access: accessRight, + isLocked: false, + isOwner: false, + sharedTo: item, + }; + items.push(newItem); } } @@ -86,7 +92,7 @@ class AddGroupsPanelComponent extends React.Component { const { showActionPanel } = this.state; const { visible, accessRight } = this.props; - if (accessRight && accessRight.rights !== nextProps.accessRight.rights) { + if (accessRight !== nextProps.accessRight) { return true; } @@ -102,7 +108,7 @@ class AddGroupsPanelComponent extends React.Component { } render() { - const { visible, embeddedComponent, t } = this.props; + const { visible, t } = this.props; const zIndex = 310; @@ -145,8 +151,14 @@ class AddGroupsPanelComponent extends React.Component { displayType="aside" withoutAside onSelect={this.onSelectGroups} - embeddedComponent={embeddedComponent} - showCounter={true} + embeddedComponent={ + + } + showCounter /> diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js index 725a2e2bd4..7ceb54afbe 100644 --- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js @@ -9,6 +9,7 @@ import { StyledHeaderContent, StyledBody, } from "../StyledPanels"; +import AccessComboBox from "../SharingPanel/AccessComboBox"; import { createI18N } from "../../../helpers/i18n"; const i18n = createI18N({ page: "AddUsersPanel", @@ -55,8 +56,13 @@ class AddUsersPanelComponent extends React.Component { } const currentItem = shareDataItems.find((x) => x.id === item.id); if (!currentItem) { - item.rights = accessRight; - items.push(item); + const newItem = { + access: accessRight, + isLocked: false, + isOwner: false, + sharedTo: item, + }; + items.push(newItem); } } @@ -84,7 +90,7 @@ class AddUsersPanelComponent extends React.Component { const { showActionPanel } = this.state; const { visible, accessRight } = this.props; - if (accessRight && accessRight.rights !== nextProps.accessRight.rights) { + if (accessRight !== nextProps.accessRight) { return true; } @@ -100,7 +106,7 @@ class AddUsersPanelComponent extends React.Component { } render() { - const { visible, embeddedComponent, t, groupsCaption } = this.props; + const { visible, t, groupsCaption } = this.props; const zIndex = 310; @@ -143,9 +149,15 @@ class AddUsersPanelComponent extends React.Component { isOpen={visible} isMultiSelect onSelect={this.onPeopleSelect} - embeddedComponent={embeddedComponent} + embeddedComponent={ + + } groupsCaption={groupsCaption} - showCounter={true} + showCounter //onCancel={onClose} /> diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js index 7dcac44c9d..5588217842 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -1,15 +1,9 @@ import React from "react"; -import { - IconButton, - ComboBox, - Row, - Text, - Icons, - DropDownItem, -} from "asc-web-components"; +import { IconButton, Row, Text, Icons, DropDownItem } from "asc-web-components"; import { toastr } from "asc-web-common"; import copy from "copy-to-clipboard"; import LinkRow from "./linkRow"; +import AccessComboBox from "./AccessComboBox"; const SharingRow = (props) => { const { @@ -32,7 +26,13 @@ const SharingRow = (props) => { externalLinkData, } = props; - const linkVisible = selection && selection.length === 1 && item.shareLink; + console.log("SharingRow render item", item); + console.log("SharingRow render accessOptions", accessOptions); + + const { isOwner, access } = item; + const { label, name, displayName, shareLink, id } = item.sharedTo; + + const linkVisible = selection && selection.length === 1 && shareLink; const onCopyInternalLink = () => { const internalLink = selection.webUrl ? selection.webUrl @@ -41,21 +41,23 @@ const SharingRow = (props) => { toastr.success(t("LinkCopySuccess")); }; - const advancedOptionsRender = (accessOptions) => ( + const advancedOptions = ( <> {accessOptions.includes("FullAccess") && ( onFullAccessClick(item)} + data-id={id} + onClick={onFullAccessClick} /> )} - {accessOptions.includes("ReadOnly") && ( + {accessOptions.includes("FilterEditing") && ( onReadOnlyClick(item)} + label="Custom filter" + icon="CustomFilterIcon" + data-id={id} + onClick={onFilterEditingClick} /> )} @@ -63,15 +65,8 @@ const SharingRow = (props) => { onReviewClick(item)} - /> - )} - - {accessOptions.includes("Comment") && ( - onCommentClick(item)} + data-id={id} + onClick={onReviewClick} /> )} @@ -79,67 +74,58 @@ const SharingRow = (props) => { onFormFillingClick(item)} + data-id={id} + onClick={onFormFillingClick} /> )} + + {accessOptions.includes("Comment") && ( + + )} + + {accessOptions.includes("ReadOnly") && ( + + )} + {accessOptions.includes("DenyAccess") && ( onDenyAccessClick(item)} - /> - )} - {accessOptions.includes("FilterEditing") && ( - onFilterEditingClick(item)} + data-id={id} + onClick={onDenyAccessClick} /> )} ); - const embeddedComponentRender = ( - accessOptions = this.props.accessOptions, - item, - isDisabled - ) => ( - - {React.createElement(Icons[item.rights.icon], { - size: "medium", - className: "sharing-access-combo-box-icon", - })} - - ); - const onCopyClick = () => { toastr.success(t("LinkCopySuccess")); - copy(item.shareLink); + copy(shareLink); }; const onShareEmail = () => { const itemName = selection.title ? selection.title : selection[0].title; const subject = `You have been granted access to the ${itemName} document`; - const body = `You have been granted access to the ${itemName} document. Click the link below to open the document right now: 111${item.shareLink}111`; + const body = `You have been granted access to the ${itemName} document. Click the link below to open the document right now: 111${shareLink}111`; window.open(`mailto:?subject=${subject}&body=${body}`); }; const onShareTwitter = () => - window.open(`https://twitter.com/intent/tweet?text=${item.shareLink}`); + window.open(`https://twitter.com/intent/tweet?text=${shareLink}`); const onShareFacebook = () => window.open(`https://www.facebook.com`); - /*window.open(`https://www.facebook.com/dialog/feed?app_id=645528132139019&display=popup&link=${item.shareLink}`);*/ + /*window.open(`https://www.facebook.com/dialog/feed?app_id=645528132139019&display=popup&link=${shareLink}`);*/ const internalLinkData = [ { @@ -186,11 +172,10 @@ const SharingRow = (props) => { { key: "linkItem_7", label: t("Embedding"), - onClick: () => onShowEmbeddingPanel(item.shareLink), + onClick: () => onShowEmbeddingPanel(shareLink), }, ]; - //console.log("SharingRow render"); return ( <> {linkVisible && ( @@ -199,51 +184,51 @@ const SharingRow = (props) => { linkText="ExternalLink" options={externalLinkOptions} externalLinkData={externalLinkData} - embeddedComponentRender={embeddedComponentRender} onToggleLink={onToggleLink} withToggle={true} {...props} + advancedOptions={advancedOptions} /> )} - {!item.shareLink && ( + {!shareLink && ( ) : ( - embeddedComponentRender(accessOptions, item) + ) } contextButtonSpacerWidth="0px" > <> - {!item.shareLink && ( + {!shareLink && ( - {item.label - ? item.label - : item.name - ? item.name - : item.displayName} + {label ? label : name ? name : displayName} )} - {item.rights.isOwner ? ( + {isOwner ? ( {t("Owner")} - ) : item.id === isMyId ? ( + ) : id === isMyId ? ( { {t("AccessRightsFullAccess")} ) : ( - !item.shareLink && ( + !shareLink && ( onRemoveUserClick(item)} + id={id} + onClick={onRemoveUserClick} className="sharing_panel-remove-icon" color="#A3A9AE" /> diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index 3c8c4d3ab7..bd93c9a0cf 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -65,11 +65,7 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel: false, showEmbeddingPanel: false, showAddGroupsPanel: false, - accessRight: { - icon: "EyeIcon", - rights: "ReadOnly", - accessNumber: ShareAccessRights.ReadOnly, - }, + accessRight: ShareAccessRights.ReadOnly, shareLink: "", isLoadedShareData: false, showPanel: false, @@ -92,12 +88,13 @@ class SharingPanelComponent extends React.Component { const { shareDataItems } = this.state; const rights = - item.rights.accessNumber !== ShareAccessRights.DenyAccess - ? this.getItemAccess(ShareAccessRights.DenyAccess) - : this.getItemAccess(ShareAccessRights.ReadOnly); + item.access !== ShareAccessRights.DenyAccess + ? ShareAccessRights.DenyAccess + : ShareAccessRights.ReadOnly; const newDataItems = JSON.parse(JSON.stringify(shareDataItems)); + console.log("newDataItems", newDataItems); - newDataItems[0].rights = { ...rights }; + newDataItems[0].access = rights; this.setState({ shareDataItems: newDataItems, }); @@ -110,7 +107,7 @@ class SharingPanelComponent extends React.Component { message, shareDataItems, } = this.state; - const { selectedItems } = this.props; + const { selection } = this.props; const folderIds = []; const fileIds = []; @@ -144,7 +141,7 @@ class SharingPanelComponent extends React.Component { } } - for (let item of selectedItems) { + for (let item of selection) { if (item.fileExst) { fileIds.push(item.id); } else { @@ -166,78 +163,43 @@ class SharingPanelComponent extends React.Component { onFullAccessClick = () => { this.setState({ - accessRight: { - icon: "AccessEditIcon", - rights: "FullAccess", - accessNumber: ShareAccessRights.FullAccess, - isOwner: false, - }, + accessRight: ShareAccessRights.FullAccess, }); }; onReadOnlyClick = () => { this.setState({ - accessRight: { - icon: "EyeIcon", - rights: "ReadOnly", - accessNumber: ShareAccessRights.ReadOnly, - isOwner: false, - }, + accessRight: ShareAccessRights.ReadOnly, }); }; onReviewClick = () => { this.setState({ - accessRight: { - icon: "AccessReviewIcon", - rights: "Review", - accessNumber: ShareAccessRights.Review, - isOwner: false, - }, + accessRight: ShareAccessRights.Review, }); }; onCommentClick = () => { this.setState({ - accessRight: { - icon: "AccessCommentIcon", - rights: "Comment", - accessNumber: ShareAccessRights.Comment, - isOwner: false, - }, + accessRight: ShareAccessRights.Comment, }); }; onFormFillingClick = () => { this.setState({ - accessRight: { - icon: "AccessFormIcon", - rights: "FormFilling", - accessNumber: ShareAccessRights.FormFilling, - isOwner: false, - }, + accessRight: ShareAccessRights.FormFilling, }); }; onDenyAccessClick = () => { this.setState({ - accessRight: { - icon: "AccessNoneIcon", - rights: "DenyAccess", - accessNumber: ShareAccessRights.DenyAccess, - isOwner: false, - }, + accessRight: ShareAccessRights.DenyAccess, }); }; onFilterEditingClick = () => { this.setState({ - accessRight: { - icon: "CustomFilterIcon", - rights: "CustomFilter", - accessNumber: ShareAccessRights.CustomFilter, - isOwner: false, - }, + accessRight: ShareAccessRights.CustomFilter, }); }; @@ -250,230 +212,82 @@ class SharingPanelComponent extends React.Component { showActionPanel: false, }); - onFullAccessItemClick = (item) => { - const newUsers = this.state.shareDataItems; - const elementIndex = newUsers.findIndex((x) => x.id === item.id); - if (newUsers[elementIndex].rights.rights !== "FullAccess") { - newUsers[elementIndex].rights = { - icon: "AccessEditIcon", - rights: "FullAccess", - accessNumber: ShareAccessRights.FullAccess, - }; - this.setState({ shareDataItems: newUsers }); + onFullAccessItemClick = (e) => { + const id = e.currentTarget.dataset.id; + const shareDataItems = this.state.shareDataItems; + const elem = shareDataItems.find((x) => x.sharedTo.id === id); + if (elem.access !== ShareAccessRights.FullAccess) { + elem.access = ShareAccessRights.FullAccess; + this.setState({ shareDataItems }); } }; - onReadOnlyItemClick = (item) => { - const newUsers = this.state.shareDataItems; - const elementIndex = newUsers.findIndex((x) => x.id === item.id); - if (newUsers[elementIndex].rights.rights !== "ReadOnly") { - newUsers[elementIndex].rights = { - icon: "EyeIcon", - rights: "ReadOnly", - accessNumber: ShareAccessRights.ReadOnly, - }; - this.setState({ shareDataItems: newUsers }); + onReadOnlyItemClick = (e) => { + const id = e.currentTarget.dataset.id; + const shareDataItems = this.state.shareDataItems; + const elem = shareDataItems.find((x) => x.sharedTo.id === id); + if (elem.access !== ShareAccessRights.ReadOnly) { + elem.access = ShareAccessRights.ReadOnly; + this.setState({ shareDataItems }); } }; - onReviewItemClick = (item) => { - const newUsers = this.state.shareDataItems; - const elementIndex = newUsers.findIndex((x) => x.id === item.id); - if (newUsers[elementIndex].rights.rights !== "Review") { - newUsers[elementIndex].rights = { - icon: "AccessReviewIcon", - rights: "Review", - accessNumber: ShareAccessRights.Review, - }; - this.setState({ shareDataItems: newUsers }); + onReviewItemClick = (e) => { + const id = e.currentTarget.dataset.id; + const shareDataItems = this.state.shareDataItems; + const elem = shareDataItems.find((x) => x.sharedTo.id === id); + if (elem.access !== ShareAccessRights.Review) { + elem.access = ShareAccessRights.Review; + this.setState({ shareDataItems }); } }; - onCommentItemClick = (item) => { - const newUsers = this.state.shareDataItems; - const elementIndex = newUsers.findIndex((x) => x.id === item.id); - if (newUsers[elementIndex].rights.rights !== "Comment") { - newUsers[elementIndex].rights = { - icon: "AccessCommentIcon", - rights: "Comment", - accessNumber: ShareAccessRights.Comment, - }; - this.setState({ shareDataItems: newUsers }); + onCommentItemClick = (e) => { + const id = e.currentTarget.dataset.id; + const shareDataItems = this.state.shareDataItems; + const elem = shareDataItems.find((x) => x.sharedTo.id === id); + if (elem.access !== ShareAccessRights.Comment) { + elem.access = ShareAccessRights.Comment; + this.setState({ shareDataItems }); } }; - onFormFillingItemClick = (item) => { - const newUsers = this.state.shareDataItems; - const elementIndex = newUsers.findIndex((x) => x.id === item.id); - if (newUsers[elementIndex].rights.rights !== "FormFilling") { - newUsers[elementIndex].rights = { - icon: "AccessFormIcon", - rights: "FormFilling", - accessNumber: ShareAccessRights.FormFilling, - }; - this.setState({ shareDataItems: newUsers }); - } - }; - onFilterEditingItemClick = (item) => { - const newUsers = this.state.shareDataItems; - const elementIndex = newUsers.findIndex((x) => x.id === item.id); - if (newUsers[elementIndex].rights.rights !== "CustomFilter") { - newUsers[elementIndex].rights = { - icon: "CustomFilterIcon", - rights: "CustomFilter", - accessNumber: ShareAccessRights.CustomFilter, - }; - this.setState({ shareDataItems: newUsers }); - } - }; - onDenyAccessItemClick = (item) => { - const newUsers = this.state.shareDataItems; - const elementIndex = newUsers.findIndex((x) => x.id === item.id); - if (newUsers[elementIndex].rights.rights !== "DenyAccess") { - newUsers[elementIndex].rights = { - icon: "AccessNoneIcon", - rights: "DenyAccess", - accessNumber: ShareAccessRights.DenyAccess, - }; - this.setState({ shareDataItems: newUsers }); - } - }; - - onRemoveUserItemClick = (item) => { - const shareDataItems = this.state.shareDataItems.slice(0); - - const index = shareDataItems.findIndex((x) => x.id === item.id); - if (index !== -1) { - shareDataItems.splice(index, 1); + onFormFillingItemClick = (e) => { + const id = e.currentTarget.dataset.id; + const shareDataItems = this.state.shareDataItems; + const elem = shareDataItems.find((x) => x.sharedTo.id === id); + if (elem.access !== ShareAccessRights.FormFilling) { + elem.access = ShareAccessRights.FormFilling; this.setState({ shareDataItems }); } }; - getItemAccess = (accessType, isOwner = false) => { - const fullAccessRights = { - icon: "AccessEditIcon", - rights: "FullAccess", - accessNumber: ShareAccessRights.FullAccess, - isOwner: isOwner, - }; - switch (accessType) { - case 1: - return fullAccessRights; - case 2: - return { - icon: "EyeIcon", - rights: "ReadOnly", - accessNumber: ShareAccessRights.ReadOnly, - isOwner: false, - }; - case 3: - return { - icon: "AccessNoneIcon", - rights: "DenyAccess", - accessNumber: ShareAccessRights.DenyAccess, - isOwner: false, - }; - case 5: - return { - icon: "AccessReviewIcon", - rights: "Review", - accessNumber: ShareAccessRights.Review, - isOwner: false, - }; - case 6: - return { - icon: "AccessCommentIcon", - rights: "Comment", - accessNumber: ShareAccessRights.Comment, - isOwner: false, - }; - case 7: - return { - icon: "AccessFormIcon", - rights: "FormFilling", - accessNumber: ShareAccessRights.FormFilling, - isOwner: false, - }; - case 8: - return { - icon: "CustomFilterIcon", - rights: "CustomFilter", - accessNumber: ShareAccessRights.CustomFilter, - isOwner: false, - }; - default: - return; + onFilterEditingItemClick = (e) => { + const id = e.currentTarget.dataset.id; + const shareDataItems = this.state.shareDataItems; + const elem = shareDataItems.find((x) => x.sharedTo.id === id); + + if (elem.access !== ShareAccessRights.CustomFilter) { + elem.access = ShareAccessRights.CustomFilter; + this.setState({ shareDataItems }); + } + }; + onDenyAccessItemClick = (e) => { + const id = e.currentTarget.dataset.id; + const shareDataItems = this.state.shareDataItems; + const elem = shareDataItems.find((x) => x.sharedTo.id === id); + + if (elem.access !== ShareAccessRights.DenyAccess) { + elem.access = ShareAccessRights.DenyAccess; + this.setState({ shareDataItems }); } }; - getShareDataItems = (items) => { - const { - getAccessOption, - getExternalAccessOption, - selectedItems, - } = this.props; - let arrayItems = []; - const newItems = []; - let stash = []; + onRemoveUserItemClick = (e) => { + const id = e.currentTarget.dataset.for; + const shareDataItems = this.state.shareDataItems.slice(0); - for (let array of items) { - for (let item of array) { - const rights = this.getItemAccess(item.access, item.isOwner); - - if (rights) { - item.sharedTo = { ...item.sharedTo, ...{ rights } }; - arrayItems.push(item.sharedTo); - stash.push(item.sharedTo); - } - } - newItems.push(stash); - stash = []; + const index = shareDataItems.findIndex((x) => x.sharedTo.id === id); + if (index !== -1) { + shareDataItems.splice(index, 1); + this.setState({ shareDataItems }); } - stash = null; - for (let item of arrayItems) { - let length = newItems.length; - if (!item.shareLink) { - while (length !== 0) { - if (newItems[length - 1].length !== 0) { - stash = newItems[length - 1].find((x) => x.id === item.id); - if (stash === this.props.isMyId) { - const adminRights = { - icon: "AccessEditIcon", - rights: "FullAccess", - accessNumber: ShareAccessRights.FullAccess, - isOwner: item.isOwner, - }; - item.rights = adminRights; - } else if ( - !stash || - item.rights.rights !== stash.rights.rights || - item.rights.isOwner !== stash.rights.isOwner - ) { - const variesRights = { - icon: "CatalogQuestionIcon", - rights: "Varies", - isOwner: false, - }; - item.rights = variesRights; - } - } - length--; - } - } else { - const externalLinkAccess = items[0][0].access; - item.access = externalLinkAccess; - item.rights = this.getItemAccess(externalLinkAccess); - } - } - - arrayItems = this.removeDuplicateShareData(arrayItems); - const baseShareData = JSON.parse(JSON.stringify(arrayItems)); - - const accessOptions = getAccessOption(selectedItems); - const externalAccessOptions = getExternalAccessOption(selectedItems); - - return { - baseShareData, - shareDataItems: arrayItems, - accessOptions, - externalAccessOptions, - }; }; removeDuplicateShareData = (shareDataItems) => { @@ -486,11 +300,11 @@ class SharingPanelComponent extends React.Component { }; getData = () => { - const { selectedItems } = this.props; + const { selection } = this.props; const folderId = []; const fileId = []; - for (let item of selectedItems) { + for (let item of selection) { if (item.access === 1 || item.access === 0) { if (item.fileExst) { fileId.push(item.id); @@ -507,22 +321,24 @@ class SharingPanelComponent extends React.Component { const returnValue = this.getData(); const folderId = returnValue[0]; const fileId = returnValue[1]; - let error = null; - let shareData = {}; + const { getAccessOption, selection } = this.props; if (folderId.length !== 0 || fileId.length !== 0) { getShareUsers(folderId, fileId) - .then((res) => { - shareData = this.getShareDataItems(res); + .then((shareDataItems) => { + const baseShareData = JSON.parse(JSON.stringify(shareDataItems)); + const accessOptions = getAccessOption(selection); + + this.setState({ + baseShareData, + shareDataItems, + accessOptions, + showPanel: true, + }); }) .catch((err) => { - error = err; toastr.error(err); - }) - .finally( - () => - !error && this.setState({ ...shareData, ...{ showPanel: true } }) - ); + }); } }; @@ -582,7 +398,7 @@ class SharingPanelComponent extends React.Component { render() { //console.log("Sharing panel render"); - const { t, isMyId, selectedItems, groupsCaption } = this.props; + const { t, isMyId, selection, groupsCaption } = this.props; const { showActionPanel, isNotifyUsers, @@ -611,11 +427,11 @@ class SharingPanelComponent extends React.Component { /> )} - {accessOptions.includes("ReadOnly") && ( + {accessOptions.includes("FilterEditing") && ( )} @@ -627,6 +443,14 @@ class SharingPanelComponent extends React.Component { /> )} + {accessOptions.includes("FormFilling") && ( + + )} + {accessOptions.includes("Comment") && ( )} - {accessOptions.includes("FormFilling") && ( + {accessOptions.includes("ReadOnly") && ( )} + {accessOptions.includes("DenyAccess") && ( )} - {accessOptions.includes("FilterEditing") && ( - - )} ); - const accessOptionsComboBox = ( - - {React.createElement(Icons[accessRight.icon], { - size: "medium", - //color: this.state.currentIconColor, - //isfill: isFill - })} - - ); - return ( @@ -728,12 +526,11 @@ class SharingPanelComponent extends React.Component { stype="mediumBlack" style={SharingBodyStyle} > - {" "} {shareDataItems.map((item, index) => ( )} @@ -797,10 +594,10 @@ class SharingPanelComponent extends React.Component { onSharingPanelClose={this.onClose} onClose={this.onShowGroupsPanel} visible={showAddGroupsPanel} - embeddedComponent={accessOptionsComboBox} - accessRight={accessRight} shareDataItems={shareDataItems} setShareDataItems={this.setShareDataItems} + accessRight={accessRight} + advancedOptions={advancedOptions} /> )} @@ -827,11 +624,11 @@ const SharingPanel = (props) => ( const mapStateToProps = (state) => { return { - getAccessOption: (selectedItems) => getAccessOption(state, selectedItems), + getAccessOption: (selection) => getAccessOption(state, selection), getExternalAccessOption: (selectedItems) => getExternalAccessOption(state, selectedItems), isMyId: getCurrentUserId(state), - selectedItems: getSelection(state), + selection: getSelection(state), groupsCaption: getSettingsCustomNamesGroupsCaption(state), sharingPanelVisible: getSharePanelVisible(state), }; diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js index 8853383a91..6158772382 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js @@ -1,12 +1,17 @@ import React from "react"; -import { Row, LinkWithDropdown, ToggleButton, Icons } from "asc-web-components"; +import { + Row, + LinkWithDropdown, + ToggleButton, + Icons, + ComboBox, +} from "asc-web-components"; import { StyledLinkRow } from "../StyledPanels"; import { constants } from "asc-web-common"; const { ShareAccessRights } = constants; class LinkRow extends React.Component { - onToggleButtonChange = () => { const { onToggleLink, item } = this.props; @@ -21,11 +26,16 @@ class LinkRow extends React.Component { t, embeddedComponentRender, externalAccessOptions, + //embeddedComponentRender, + advancedOptions, + //accessOptions, item, withToggle, } = this.props; - const isChecked = item.rights.accessNumber !== ShareAccessRights.DenyAccess; + //console.log("LinkRow item", item); + + const isChecked = item.access !== ShareAccessRights.DenyAccess; const isDisabled = withToggle ? !isChecked : false; return ( @@ -35,7 +45,24 @@ class LinkRow extends React.Component { key={`${linkText}-key_${index}`} element={ withToggle ? ( - embeddedComponentRender(externalAccessOptions, item, isDisabled) + // embeddedComponentRender(externalAccessOptions, item, isDisabled) + + {React.createElement(Icons["EyeIcon"], { + //{React.createElement(Icons[item.rights.icon], { + size: "medium", + className: "sharing-access-combo-box-icon", + })} + ) : ( Date: Wed, 9 Dec 2020 16:01:37 +0300 Subject: [PATCH 05/23] Web: Files: removed useless code, added new translations for sharing panel --- .../components/panels/AddGroupsPanel/index.js | 4 +-- .../panels/SharingPanel/AccessComboBox.js | 16 +-------- .../panels/SharingPanel/SharingRow.js | 36 +++++++++---------- .../components/panels/SharingPanel/index.js | 6 ++-- .../components/panels/SharingPanel/linkRow.js | 4 --- .../SharingPanel/locales/en/translation.json | 3 +- .../SharingPanel/locales/ru/translation.json | 3 +- 7 files changed, 25 insertions(+), 47 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js index 6dfae4bb8e..f7e0a8355e 100644 --- a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js @@ -68,9 +68,7 @@ class AddGroupsPanelComponent extends React.Component { onClose(); }; - onPLusClick = () => { - console.log("onPlusClick"); - }; + //onPLusClick = () => console.log("onPlusClick"); componentDidMount() { const scroll = this.scrollRef.current.getElementsByClassName("scroll-body"); diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js index 2b3e8be163..3f4b046048 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js @@ -2,21 +2,7 @@ import React from "react"; import { ComboBox, Icons } from "asc-web-components"; const AccessComboBox = (props) => { - const { - //t, - //itemId, - //itemAccess, - //accessOptions, - //onFullAccessClick, - //onReadOnlyClick, - //onReviewClick, - //onCommentClick, - //onFormFillingClick, - //onDenyAccessClick, - access, - advancedOptions, - directionX, - } = props; + const { access, advancedOptions, directionX } = props; const getAccessIcon = () => { switch (access) { diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js index 5588217842..ba743e8578 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -6,11 +6,11 @@ import LinkRow from "./linkRow"; import AccessComboBox from "./AccessComboBox"; const SharingRow = (props) => { + console.log("SharingRow render"); const { t, selection, item, - index, isMyId, accessOptions, onFullAccessClick, @@ -26,26 +26,16 @@ const SharingRow = (props) => { externalLinkData, } = props; - console.log("SharingRow render item", item); - console.log("SharingRow render accessOptions", accessOptions); - const { isOwner, access } = item; const { label, name, displayName, shareLink, id } = item.sharedTo; const linkVisible = selection && selection.length === 1 && shareLink; - const onCopyInternalLink = () => { - const internalLink = selection.webUrl - ? selection.webUrl - : selection[0].webUrl; - copy(internalLink); - toastr.success(t("LinkCopySuccess")); - }; const advancedOptions = ( <> {accessOptions.includes("FullAccess") && ( { {accessOptions.includes("FilterEditing") && ( { {accessOptions.includes("Review") && ( { {accessOptions.includes("FormFilling") && ( { {accessOptions.includes("Comment") && ( { {accessOptions.includes("ReadOnly") && ( { {accessOptions.includes("DenyAccess") && ( { ); + const onCopyInternalLink = () => { + const internalLink = selection.webUrl + ? selection.webUrl + : selection[0].webUrl; + copy(internalLink); + toastr.success(t("LinkCopySuccess")); + }; + const onCopyClick = () => { toastr.success(t("LinkCopySuccess")); copy(shareLink); @@ -201,7 +199,7 @@ const SharingRow = (props) => { {!shareLink && ( - {shareDataItems.map((item, index) => ( + {shareDataItems.map((item) => ( Date: Thu, 10 Dec 2020 11:17:01 +0300 Subject: [PATCH 06/23] Web: Files: removed useless sharing function, fixed sharingRow render --- .../components/panels/AddGroupsPanel/index.js | 8 +- .../components/panels/AddUsersPanel/index.js | 14 +- .../panels/SharingPanel/AccessComboBox.js | 3 +- .../panels/SharingPanel/SharingRow.js | 477 ++++++++++-------- .../components/panels/SharingPanel/index.js | 188 ++----- .../components/panels/SharingPanel/linkRow.js | 27 +- 6 files changed, 334 insertions(+), 383 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js index f7e0a8355e..a6704b9918 100644 --- a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js @@ -52,7 +52,7 @@ class AddGroupsPanelComponent extends React.Component { item.id = item.key; delete item.key; } - const currentItem = shareDataItems.find((x) => x.id === item.id); + const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id); if (!currentItem) { const newItem = { access: accessRight, @@ -106,7 +106,7 @@ class AddGroupsPanelComponent extends React.Component { } render() { - const { visible, t } = this.props; + const { t, visible, accessRight, advancedOptions } = this.props; const zIndex = 310; @@ -151,8 +151,8 @@ class AddGroupsPanelComponent extends React.Component { onSelect={this.onSelectGroups} embeddedComponent={ } diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js index 7ceb54afbe..06cb4f1564 100644 --- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js @@ -54,7 +54,7 @@ class AddUsersPanelComponent extends React.Component { item.id = item.key; delete item.key; } - const currentItem = shareDataItems.find((x) => x.id === item.id); + const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id); if (!currentItem) { const newItem = { access: accessRight, @@ -106,7 +106,13 @@ class AddUsersPanelComponent extends React.Component { } render() { - const { visible, t, groupsCaption } = this.props; + const { + t, + visible, + groupsCaption, + accessRight, + advancedOptions, + } = this.props; const zIndex = 310; @@ -151,8 +157,8 @@ class AddUsersPanelComponent extends React.Component { onSelect={this.onPeopleSelect} embeddedComponent={ } diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js index 3f4b046048..0e5ef71b5f 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js @@ -2,7 +2,7 @@ import React from "react"; import { ComboBox, Icons } from "asc-web-components"; const AccessComboBox = (props) => { - const { access, advancedOptions, directionX } = props; + const { access, advancedOptions, directionX, isDisabled } = props; const getAccessIcon = () => { switch (access) { @@ -37,6 +37,7 @@ const AccessComboBox = (props) => { scaled={false} directionX={directionX} disableIconClick={false} + isDisabled={isDisabled} > {React.createElement(Icons[accessIcon], { size: "medium", diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js index ba743e8578..77fc40d313 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -1,104 +1,43 @@ import React from "react"; import { IconButton, Row, Text, Icons, DropDownItem } from "asc-web-components"; -import { toastr } from "asc-web-common"; +import { toastr, constants } from "asc-web-common"; import copy from "copy-to-clipboard"; import LinkRow from "./linkRow"; import AccessComboBox from "./AccessComboBox"; +import equal from "fast-deep-equal/react"; -const SharingRow = (props) => { - console.log("SharingRow render"); - const { - t, - selection, - item, - isMyId, - accessOptions, - onFullAccessClick, - onReadOnlyClick, - onReviewClick, - onCommentClick, - onFormFillingClick, - onDenyAccessClick, - onFilterEditingClick, - onRemoveUserClick, - onShowEmbeddingPanel, - onToggleLink, - externalLinkData, - } = props; +const { ShareAccessRights } = constants; - const { isOwner, access } = item; - const { label, name, displayName, shareLink, id } = item.sharedTo; +class SharingRow extends React.Component { + constructor(props) { + super(props); - const linkVisible = selection && selection.length === 1 && shareLink; + this.state = { + access: props.item.access, + }; + } - const advancedOptions = ( - <> - {accessOptions.includes("FullAccess") && ( - - )} + componentDidUpdate() { + const { access } = this.props.item; + if (this.state.access !== access) { + this.setState({ access }); + } + } - {accessOptions.includes("FilterEditing") && ( - - )} + shouldComponentUpdate(nextProps) { + if (!equal(this.props, nextProps)) { + return true; + } + if (this.state.access !== this.props.item.access) { + return true; + } - {accessOptions.includes("Review") && ( - - )} + return true; + } - {accessOptions.includes("FormFilling") && ( - - )} + onCopyInternalLink = () => { + const { selection, t } = this.props; - {accessOptions.includes("Comment") && ( - - )} - - {accessOptions.includes("ReadOnly") && ( - - )} - - {accessOptions.includes("DenyAccess") && ( - - )} - - ); - - const onCopyInternalLink = () => { const internalLink = selection.webUrl ? selection.webUrl : selection[0].webUrl; @@ -106,149 +45,261 @@ const SharingRow = (props) => { toastr.success(t("LinkCopySuccess")); }; - const onCopyClick = () => { + onCopyClick = () => { + const { t, item } = this.props; + const { shareLink } = item.sharedTo; toastr.success(t("LinkCopySuccess")); copy(shareLink); }; - const onShareEmail = () => { + onShareEmail = () => { + const { selection, item } = this.props; + const { shareLink } = item.sharedTo; const itemName = selection.title ? selection.title : selection[0].title; const subject = `You have been granted access to the ${itemName} document`; - const body = `You have been granted access to the ${itemName} document. Click the link below to open the document right now: 111${shareLink}111`; + const body = `You have been granted access to the ${itemName} document. Click the link below to open the document right now: ${shareLink}`; window.open(`mailto:?subject=${subject}&body=${body}`); }; - const onShareTwitter = () => - window.open(`https://twitter.com/intent/tweet?text=${shareLink}`); + onShareTwitter = () => + window.open( + `https://twitter.com/intent/tweet?text=${this.props.item.sharedTo.shareLink}` + ); - const onShareFacebook = () => window.open(`https://www.facebook.com`); - /*window.open(`https://www.facebook.com/dialog/feed?app_id=645528132139019&display=popup&link=${shareLink}`);*/ + onShareFacebook = () => window.open(`https://www.facebook.com`); + //window.open(`https://www.facebook.com/dialog/feed?app_id=645528132139019&display=popup&link=${shareLink}`); - const internalLinkData = [ - { - key: "linkItem", - label: t("CopyInternalLink"), - onClick: onCopyInternalLink, - }, - ]; + render() { + //console.log("SharingRow render"); + const { + t, + selection, + item, + isMyId, + accessOptions, + onChangeItemAccess, + onRemoveUserClick, + onShowEmbeddingPanel, + onToggleLink, + externalLinkData, + } = this.props; - const externalLinkOptions = [ - { - key: "linkItem_0", - label: t("CopyExternalLink"), - onClick: onCopyClick, - }, - { - key: "linkItem_1", - isSeparator: true, - }, - { - key: "linkItem_2", - label: `${t("ShareVia")} e-mail`, - onClick: onShareEmail, - }, - { - key: "linkItem_3", - label: `${t("ShareVia")} Google Plus`, - onClick: () => toastr.warning("Share via Google Plus"), - }, - { - key: "linkItem_4", - label: `${t("ShareVia")} Facebook`, - onClick: onShareFacebook, - }, - { - key: "linkItem_5", - label: `${t("ShareVia")} Twitter`, - onClick: onShareTwitter, - }, - { - key: "linkItem_6", - isSeparator: true, - }, - { - key: "linkItem_7", - label: t("Embedding"), - onClick: () => onShowEmbeddingPanel(shareLink), - }, - ]; + const { isOwner } = item; + const { label, name, displayName, shareLink, id } = item.sharedTo; - return ( - <> - {linkVisible && ( - <> - + {accessOptions.includes("FullAccess") && ( + - - - )} + )} - {!shareLink && ( - - ) : ( - - ) - } - contextButtonSpacerWidth="0px" - > + {accessOptions.includes("FilterEditing") && ( + + )} + + {accessOptions.includes("Review") && ( + + )} + + {accessOptions.includes("FormFilling") && ( + + )} + + {accessOptions.includes("Comment") && ( + + )} + + {accessOptions.includes("ReadOnly") && ( + + )} + + {accessOptions.includes("DenyAccess") && ( + + )} + + ); + + const internalLinkData = [ + { + key: "linkItem", + label: t("CopyInternalLink"), + onClick: this.onCopyInternalLink, + }, + ]; + + const externalLinkOptions = [ + { + key: "linkItem_0", + label: t("CopyExternalLink"), + onClick: this.onCopyClick, + }, + { + key: "linkItem_1", + isSeparator: true, + }, + { + key: "linkItem_2", + label: `${t("ShareVia")} e-mail`, + onClick: this.onShareEmail, + }, + { + key: "linkItem_3", + label: `${t("ShareVia")} Google Plus`, + onClick: () => toastr.warning("Share via Google Plus"), + }, + { + key: "linkItem_4", + label: `${t("ShareVia")} Facebook`, + onClick: this.onShareFacebook, + }, + { + key: "linkItem_5", + label: `${t("ShareVia")} Twitter`, + onClick: this.onShareTwitter, + }, + { + key: "linkItem_6", + isSeparator: true, + }, + { + key: "linkItem_7", + label: t("Embedding"), + onClick: () => onShowEmbeddingPanel(shareLink), + }, + ]; + + return ( + <> + {linkVisible && ( <> - {!shareLink && ( - - {label ? label : name ? name : displayName} - - )} - {isOwner ? ( - - {t("Owner")} - - ) : id === isMyId ? ( - - {t("AccessRightsFullAccess")} - - ) : ( - !shareLink && ( - + + + )} + + {!shareLink && ( + + ) : ( + ) - )} - - - )} - - ); -}; + } + contextButtonSpacerWidth="0px" + > + <> + {!shareLink && ( + + {label ? label : name ? name : displayName} + + )} + {isOwner ? ( + + {t("Owner")} + + ) : id === isMyId ? ( + + {t("AccessRightsFullAccess")} + + ) : ( + !shareLink && ( + + ) + )} + + + )} + + ); + } +} export default SharingRow; diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index f1dcf9ba82..b2d78f2b36 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -9,8 +9,6 @@ import { DropDown, DropDownItem, Textarea, - ComboBox, - Icons, } from "asc-web-components"; import { connect } from "react-redux"; import { withRouter } from "react-router"; @@ -115,28 +113,30 @@ class SharingPanelComponent extends React.Component { let externalAccess = null; for (let item of shareDataItems) { - const baseItem = baseShareData.find((x) => x.id === item.id); - if ( - (baseItem && - baseItem.rights.rights !== item.rights.rights && - !item.shareLink) || - !baseItem - ) { - share.push({ shareTo: item.id, access: item.rights.accessNumber }); - } + const baseItem = baseShareData.find( + (x) => x.sharedTo.id === item.sharedTo.id + ); if ( - item.shareLink && - item.rights.accessNumber !== baseItem.rights.accessNumber + (baseItem && + baseItem.access !== item.access && + !item.sharedTo.shareLink) || + !baseItem ) { - externalAccess = item.rights.accessNumber; + share.push({ shareTo: item.sharedTo.id, access: item.access }); + } + + if (item.sharedTo.shareLink && item.access !== baseItem.access) { + externalAccess = item.access; } } for (let item of baseShareData) { - const baseItem = shareDataItems.find((x) => x.id === item.id); + const baseItem = shareDataItems.find( + (x) => x.sharedTo.id === item.sharedTo.id + ); if (!baseItem) { - share.push({ shareTo: item.id, access: 0 }); + share.push({ shareTo: item.sharedTo.id, access: 0 }); } } @@ -160,46 +160,9 @@ class SharingPanelComponent extends React.Component { .finally(() => this.onClose()); }; - onFullAccessClick = () => { - this.setState({ - accessRight: ShareAccessRights.FullAccess, - }); - }; - - onReadOnlyClick = () => { - this.setState({ - accessRight: ShareAccessRights.ReadOnly, - }); - }; - - onReviewClick = () => { - this.setState({ - accessRight: ShareAccessRights.Review, - }); - }; - - onCommentClick = () => { - this.setState({ - accessRight: ShareAccessRights.Comment, - }); - }; - - onFormFillingClick = () => { - this.setState({ - accessRight: ShareAccessRights.FormFilling, - }); - }; - - onDenyAccessClick = () => { - this.setState({ - accessRight: ShareAccessRights.DenyAccess, - }); - }; - - onFilterEditingClick = () => { - this.setState({ - accessRight: ShareAccessRights.CustomFilter, - }); + onChangeAccess = (e) => { + const accessRight = +e.currentTarget.dataset.access; + this.setState({ accessRight }); }; onNotifyUsersChange = () => @@ -211,69 +174,14 @@ class SharingPanelComponent extends React.Component { showActionPanel: false, }); - onFullAccessItemClick = (e) => { - const id = e.currentTarget.dataset.id; - const shareDataItems = this.state.shareDataItems; - const elem = shareDataItems.find((x) => x.sharedTo.id === id); - if (elem.access !== ShareAccessRights.FullAccess) { - elem.access = ShareAccessRights.FullAccess; - this.setState({ shareDataItems }); - } - }; - onReadOnlyItemClick = (e) => { - const id = e.currentTarget.dataset.id; - const shareDataItems = this.state.shareDataItems; - const elem = shareDataItems.find((x) => x.sharedTo.id === id); - if (elem.access !== ShareAccessRights.ReadOnly) { - elem.access = ShareAccessRights.ReadOnly; - this.setState({ shareDataItems }); - } - }; - onReviewItemClick = (e) => { - const id = e.currentTarget.dataset.id; - const shareDataItems = this.state.shareDataItems; - const elem = shareDataItems.find((x) => x.sharedTo.id === id); - if (elem.access !== ShareAccessRights.Review) { - elem.access = ShareAccessRights.Review; - this.setState({ shareDataItems }); - } - }; - onCommentItemClick = (e) => { - const id = e.currentTarget.dataset.id; - const shareDataItems = this.state.shareDataItems; - const elem = shareDataItems.find((x) => x.sharedTo.id === id); - if (elem.access !== ShareAccessRights.Comment) { - elem.access = ShareAccessRights.Comment; - this.setState({ shareDataItems }); - } - }; - onFormFillingItemClick = (e) => { - const id = e.currentTarget.dataset.id; - const shareDataItems = this.state.shareDataItems; - const elem = shareDataItems.find((x) => x.sharedTo.id === id); - if (elem.access !== ShareAccessRights.FormFilling) { - elem.access = ShareAccessRights.FormFilling; - this.setState({ shareDataItems }); - } - }; - - onFilterEditingItemClick = (e) => { + onChangeItemAccess = (e) => { const id = e.currentTarget.dataset.id; + const access = e.currentTarget.dataset.access; const shareDataItems = this.state.shareDataItems; const elem = shareDataItems.find((x) => x.sharedTo.id === id); - if (elem.access !== ShareAccessRights.CustomFilter) { - elem.access = ShareAccessRights.CustomFilter; - this.setState({ shareDataItems }); - } - }; - onDenyAccessItemClick = (e) => { - const id = e.currentTarget.dataset.id; - const shareDataItems = this.state.shareDataItems; - const elem = shareDataItems.find((x) => x.sharedTo.id === id); - - if (elem.access !== ShareAccessRights.DenyAccess) { - elem.access = ShareAccessRights.DenyAccess; + if (elem.access !== +access) { + elem.access = +access; this.setState({ shareDataItems }); } }; @@ -289,15 +197,6 @@ class SharingPanelComponent extends React.Component { } }; - removeDuplicateShareData = (shareDataItems) => { - let obj = {}; - return shareDataItems.filter((x) => { - if (obj[x.id]) return false; - obj[x.id] = true; - return true; - }); - }; - getData = () => { const { selection } = this.props; const folderId = []; @@ -416,13 +315,24 @@ class SharingPanelComponent extends React.Component { const visible = showPanel; const zIndex = 310; + const { + FullAccess, + CustomFilter, + Review, + FormFilling, + Comment, + ReadOnly, + DenyAccess, + } = ShareAccessRights; + const advancedOptions = ( <> {accessOptions.includes("FullAccess") && ( )} @@ -430,7 +340,8 @@ class SharingPanelComponent extends React.Component { )} @@ -438,7 +349,8 @@ class SharingPanelComponent extends React.Component { )} @@ -446,7 +358,8 @@ class SharingPanelComponent extends React.Component { )} @@ -454,7 +367,8 @@ class SharingPanelComponent extends React.Component { )} @@ -462,7 +376,8 @@ class SharingPanelComponent extends React.Component { )} @@ -470,7 +385,8 @@ class SharingPanelComponent extends React.Component { )} @@ -527,20 +443,14 @@ class SharingPanelComponent extends React.Component { > {shareDataItems.map((item) => ( - {React.createElement(Icons["EyeIcon"], { - //{React.createElement(Icons[item.rights.icon], { - size: "medium", - className: "sharing-access-combo-box-icon", - })} - + /> ) : ( Date: Thu, 10 Dec 2020 12:14:34 +0300 Subject: [PATCH 07/23] Web: Files: moved advancedOptions to AccessComboBox --- .../components/panels/AddGroupsPanel/index.js | 47 ++++---- .../components/panels/AddUsersPanel/index.js | 48 ++++---- .../panels/SharingPanel/AccessComboBox.js | 97 ++++++++++++++++- .../panels/SharingPanel/SharingRow.js | 103 ++---------------- .../components/panels/SharingPanel/index.js | 96 +--------------- .../components/panels/SharingPanel/linkRow.js | 7 +- 6 files changed, 164 insertions(+), 234 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js index a6704b9918..ad49a46b6f 100644 --- a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Backdrop, Heading, Aside, IconButton } from "asc-web-components"; -import { GroupSelector, utils } from "asc-web-common"; +import { GroupSelector, utils, constants } from "asc-web-common"; import { withTranslation } from "react-i18next"; import { StyledAddGroupsPanel, @@ -17,6 +17,7 @@ const i18n = createI18N({ }); const { changeLanguage } = utils; +const { ShareAccessRights } = constants; class AddGroupsPanelComponent extends React.Component { constructor(props) { @@ -24,7 +25,10 @@ class AddGroupsPanelComponent extends React.Component { changeLanguage(i18n); - this.state = { showActionPanel: false }; + this.state = { + showActionPanel: false, + accessRight: ShareAccessRights.ReadOnly, + }; this.scrollRef = React.createRef(); } @@ -39,12 +43,7 @@ class AddGroupsPanelComponent extends React.Component { }; onSelectGroups = (groups) => { - const { - accessRight, - shareDataItems, - setShareDataItems, - onClose, - } = this.props; + const { shareDataItems, setShareDataItems, onClose } = this.props; const items = shareDataItems; for (let item of groups) { @@ -55,7 +54,7 @@ class AddGroupsPanelComponent extends React.Component { const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id); if (!currentItem) { const newItem = { - access: accessRight, + access: this.state.accessRight, isLocked: false, isOwner: false, sharedTo: item, @@ -68,6 +67,17 @@ class AddGroupsPanelComponent extends React.Component { onClose(); }; + onKeyPress = (event) => { + if (event.key === "Esc" || event.key === "Escape") { + this.props.onClose(); + } + }; + + onAccessChange = (e) => { + const accessRight = +e.currentTarget.dataset.access; + this.setState({ accessRight }); + }; + //onPLusClick = () => console.log("onPlusClick"); componentDidMount() { @@ -79,18 +89,11 @@ class AddGroupsPanelComponent extends React.Component { componentWillUnmount() { window.removeEventListener("keyup", this.onKeyPress); } - - onKeyPress = (event) => { - if (event.key === "Esc" || event.key === "Escape") { - this.props.onClose(); - } - }; - shouldComponentUpdate(nextProps, nextState) { - const { showActionPanel } = this.state; - const { visible, accessRight } = this.props; + const { showActionPanel, accessRight } = this.state; + const { visible } = this.props; - if (accessRight !== nextProps.accessRight) { + if (accessRight !== nextState.accessRight) { return true; } @@ -106,7 +109,8 @@ class AddGroupsPanelComponent extends React.Component { } render() { - const { t, visible, accessRight, advancedOptions } = this.props; + const { t, visible, accessOptions } = this.props; + const { accessRight } = this.state; const zIndex = 310; @@ -152,8 +156,9 @@ class AddGroupsPanelComponent extends React.Component { embeddedComponent={ } showCounter diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js index 06cb4f1564..3b18268d0c 100644 --- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Backdrop, Heading, Aside, IconButton } from "asc-web-components"; -import { PeopleSelector, utils } from "asc-web-common"; +import { PeopleSelector, utils, constants } from "asc-web-common"; import { withTranslation } from "react-i18next"; import { StyledAddUsersPanelPanel, @@ -17,6 +17,7 @@ const i18n = createI18N({ }); const { changeLanguage } = utils; +const { ShareAccessRights } = constants; class AddUsersPanelComponent extends React.Component { constructor(props) { @@ -26,6 +27,7 @@ class AddUsersPanelComponent extends React.Component { this.state = { showActionPanel: false, + accessRight: ShareAccessRights.ReadOnly, }; this.scrollRef = React.createRef(); @@ -36,18 +38,19 @@ class AddUsersPanelComponent extends React.Component { onArrowClick = () => this.props.onClose(); + onKeyPress = (event) => { + if (event.key === "Esc" || event.key === "Escape") { + this.props.onClose(); + } + }; + onClosePanels = () => { this.props.onClose(); this.props.onSharingPanelClose(); }; onPeopleSelect = (users) => { - const { - accessRight, - shareDataItems, - setShareDataItems, - onClose, - } = this.props; + const { shareDataItems, setShareDataItems, onClose } = this.props; const items = shareDataItems; for (let item of users) { if (item.key) { @@ -57,7 +60,7 @@ class AddUsersPanelComponent extends React.Component { const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id); if (!currentItem) { const newItem = { - access: accessRight, + access: this.state.accessRight, isLocked: false, isOwner: false, sharedTo: item, @@ -80,17 +83,11 @@ class AddUsersPanelComponent extends React.Component { window.removeEventListener("keyup", this.onKeyPress); } - onKeyPress = (event) => { - if (event.key === "Esc" || event.key === "Escape") { - this.props.onClose(); - } - }; - shouldComponentUpdate(nextProps, nextState) { - const { showActionPanel } = this.state; - const { visible, accessRight } = this.props; + const { showActionPanel, accessRight } = this.state; + const { visible } = this.props; - if (accessRight !== nextProps.accessRight) { + if (accessRight !== nextState.accessRight) { return true; } @@ -105,14 +102,14 @@ class AddUsersPanelComponent extends React.Component { return false; } + onAccessChange = (e) => { + const accessRight = +e.currentTarget.dataset.access; + this.setState({ accessRight }); + }; + render() { - const { - t, - visible, - groupsCaption, - accessRight, - advancedOptions, - } = this.props; + const { t, visible, groupsCaption, accessOptions } = this.props; + const { accessRight } = this.state; const zIndex = 310; @@ -158,8 +155,9 @@ class AddUsersPanelComponent extends React.Component { embeddedComponent={ } groupsCaption={groupsCaption} diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js index 0e5ef71b5f..f1ada5412c 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js @@ -1,8 +1,27 @@ import React from "react"; -import { ComboBox, Icons } from "asc-web-components"; +import { ComboBox, Icons, DropDownItem } from "asc-web-components"; +import { constants } from "asc-web-common"; + +const { ShareAccessRights } = constants; const AccessComboBox = (props) => { - const { access, advancedOptions, directionX, isDisabled } = props; + const { + access, + accessOptions, + directionX, + isDisabled, + itemId, + onAccessChange, + } = props; + const { + FullAccess, + CustomFilter, + Review, + FormFilling, + Comment, + ReadOnly, + DenyAccess, + } = ShareAccessRights; const getAccessIcon = () => { switch (access) { @@ -25,6 +44,80 @@ const AccessComboBox = (props) => { } }; + const advancedOptions = ( + <> + {accessOptions.includes("FullAccess") && ( + + )} + + {accessOptions.includes("FilterEditing") && ( + + )} + + {accessOptions.includes("Review") && ( + + )} + + {accessOptions.includes("FormFilling") && ( + + )} + + {accessOptions.includes("Comment") && ( + + )} + + {accessOptions.includes("ReadOnly") && ( + + )} + + {accessOptions.includes("DenyAccess") && ( + + )} + + ); + const accessIcon = getAccessIcon(); return ( diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js index 77fc40d313..7de5293059 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -1,13 +1,11 @@ import React from "react"; -import { IconButton, Row, Text, Icons, DropDownItem } from "asc-web-components"; -import { toastr, constants } from "asc-web-common"; +import { IconButton, Row, Text, Icons } from "asc-web-components"; +import { toastr } from "asc-web-common"; import copy from "copy-to-clipboard"; import LinkRow from "./linkRow"; import AccessComboBox from "./AccessComboBox"; import equal from "fast-deep-equal/react"; -const { ShareAccessRights } = constants; - class SharingRow extends React.Component { constructor(props) { super(props); @@ -84,96 +82,17 @@ class SharingRow extends React.Component { onToggleLink, externalLinkData, } = this.props; + const { access } = this.state; const { isOwner } = item; const { label, name, displayName, shareLink, id } = item.sharedTo; - const { access } = this.state; + //console.log("access", access); + //console.log("onChangeItemAccess", onChangeItemAccess); + //console.log("itemId", id); + //console.log("accessOptions", accessOptions); const linkVisible = selection && selection.length === 1 && shareLink; - const { - FullAccess, - CustomFilter, - Review, - FormFilling, - Comment, - ReadOnly, - DenyAccess, - } = ShareAccessRights; - - const advancedOptions = ( - <> - {accessOptions.includes("FullAccess") && ( - - )} - - {accessOptions.includes("FilterEditing") && ( - - )} - - {accessOptions.includes("Review") && ( - - )} - - {accessOptions.includes("FormFilling") && ( - - )} - - {accessOptions.includes("Comment") && ( - - )} - - {accessOptions.includes("ReadOnly") && ( - - )} - - {accessOptions.includes("DenyAccess") && ( - - )} - - ); const internalLinkData = [ { @@ -233,15 +152,13 @@ class SharingRow extends React.Component { options={externalLinkOptions} externalLinkData={externalLinkData} onToggleLink={onToggleLink} - withToggle={true} + withToggle {...this.props} - advancedOptions={advancedOptions} /> )} @@ -259,8 +176,10 @@ class SharingRow extends React.Component { ) : ( ) } diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index b2d78f2b36..1f3be93ea1 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -63,7 +63,6 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel: false, showEmbeddingPanel: false, showAddGroupsPanel: false, - accessRight: ShareAccessRights.ReadOnly, shareLink: "", isLoadedShareData: false, showPanel: false, @@ -84,11 +83,9 @@ class SharingPanelComponent extends React.Component { onToggleLink = (item) => { const { shareDataItems } = this.state; + const { DenyAccess, ReadOnly } = ShareAccessRights; - const rights = - item.access !== ShareAccessRights.DenyAccess - ? ShareAccessRights.DenyAccess - : ShareAccessRights.ReadOnly; + const rights = item.access !== DenyAccess ? DenyAccess : ReadOnly; const newDataItems = JSON.parse(JSON.stringify(shareDataItems)); newDataItems[0].access = rights; @@ -160,11 +157,6 @@ class SharingPanelComponent extends React.Component { .finally(() => this.onClose()); }; - onChangeAccess = (e) => { - const accessRight = +e.currentTarget.dataset.access; - this.setState({ accessRight }); - }; - onNotifyUsersChange = () => this.setState({ isNotifyUsers: !this.state.isNotifyUsers }); @@ -305,7 +297,6 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel, showAddGroupsPanel, showEmbeddingPanel, - accessRight, shareLink, showPanel, accessOptions, @@ -315,83 +306,6 @@ class SharingPanelComponent extends React.Component { const visible = showPanel; const zIndex = 310; - const { - FullAccess, - CustomFilter, - Review, - FormFilling, - Comment, - ReadOnly, - DenyAccess, - } = ShareAccessRights; - - const advancedOptions = ( - <> - {accessOptions.includes("FullAccess") && ( - - )} - - {accessOptions.includes("FilterEditing") && ( - - )} - - {accessOptions.includes("Review") && ( - - )} - - {accessOptions.includes("FormFilling") && ( - - )} - - {accessOptions.includes("Comment") && ( - - )} - - {accessOptions.includes("ReadOnly") && ( - - )} - - {accessOptions.includes("DenyAccess") && ( - - )} - - ); - return ( @@ -491,9 +405,8 @@ class SharingPanelComponent extends React.Component { visible={showAddUsersPanel} shareDataItems={shareDataItems} setShareDataItems={this.setShareDataItems} - accessRight={accessRight} groupsCaption={groupsCaption} - advancedOptions={advancedOptions} + accessOptions={accessOptions} /> )} @@ -504,8 +417,7 @@ class SharingPanelComponent extends React.Component { visible={showAddGroupsPanel} shareDataItems={shareDataItems} setShareDataItems={this.setShareDataItems} - accessRight={accessRight} - advancedOptions={advancedOptions} + accessOptions={accessOptions} /> )} diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js index 1a9796179a..134f8c606a 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js @@ -19,9 +19,10 @@ class LinkRow extends React.Component { options, index, t, - advancedOptions, item, withToggle, + accessOptions, + onChangeItemAccess, } = this.props; //console.log("LinkRow item", item); @@ -38,8 +39,10 @@ class LinkRow extends React.Component { withToggle ? ( ) : ( From a562631c3ed1ad8082adc3829d7a3d33e8c07fe8 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 10 Dec 2020 12:26:09 +0300 Subject: [PATCH 08/23] Web: Files: removed useless code from sharing panel --- .../Client/src/components/panels/AddGroupsPanel/index.js | 1 - .../Client/src/components/panels/AddUsersPanel/index.js | 1 - .../Client/src/components/panels/SharingPanel/SharingRow.js | 5 ----- .../Client/src/components/panels/SharingPanel/linkRow.js | 2 -- 4 files changed, 9 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js index ad49a46b6f..6998f8d2e8 100644 --- a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js @@ -49,7 +49,6 @@ class AddGroupsPanelComponent extends React.Component { for (let item of groups) { if (item.key) { item.id = item.key; - delete item.key; } const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id); if (!currentItem) { diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js index 3b18268d0c..89d0f484e0 100644 --- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js @@ -55,7 +55,6 @@ class AddUsersPanelComponent extends React.Component { for (let item of users) { if (item.key) { item.id = item.key; - delete item.key; } const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id); if (!currentItem) { diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js index 7de5293059..8084e7efd1 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -87,11 +87,6 @@ class SharingRow extends React.Component { const { isOwner } = item; const { label, name, displayName, shareLink, id } = item.sharedTo; - //console.log("access", access); - //console.log("onChangeItemAccess", onChangeItemAccess); - //console.log("itemId", id); - //console.log("accessOptions", accessOptions); - const linkVisible = selection && selection.length === 1 && shareLink; const internalLinkData = [ diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js index 134f8c606a..e0502a34f1 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js @@ -25,8 +25,6 @@ class LinkRow extends React.Component { onChangeItemAccess, } = this.props; - //console.log("LinkRow item", item); - const isChecked = item.access !== ShareAccessRights.DenyAccess; const isDisabled = withToggle ? !isChecked : false; From 1a1417e20ae487d5c2e32172b59f7f16361d2ed9 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Thu, 10 Dec 2020 14:46:57 +0300 Subject: [PATCH 09/23] Web: Files: fixed share link access rights --- .../Client/src/components/panels/SharingPanel/index.js | 4 +++- .../Client/src/components/panels/SharingPanel/linkRow.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index 1f3be93ea1..48f05964e4 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -211,18 +211,20 @@ class SharingPanelComponent extends React.Component { const returnValue = this.getData(); const folderId = returnValue[0]; const fileId = returnValue[1]; - const { getAccessOption, selection } = this.props; + const { getAccessOption, getExternalAccessOption, selection } = this.props; if (folderId.length !== 0 || fileId.length !== 0) { getShareUsers(folderId, fileId) .then((shareDataItems) => { const baseShareData = JSON.parse(JSON.stringify(shareDataItems)); const accessOptions = getAccessOption(selection); + const externalAccessOptions = getExternalAccessOption(selection); this.setState({ baseShareData, shareDataItems, accessOptions, + externalAccessOptions, showPanel: true, }); }) diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js index e0502a34f1..a5a6cc6b6d 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js @@ -21,7 +21,7 @@ class LinkRow extends React.Component { t, item, withToggle, - accessOptions, + externalAccessOptions, onChangeItemAccess, } = this.props; @@ -38,7 +38,7 @@ class LinkRow extends React.Component { Date: Mon, 14 Dec 2020 15:05:09 +0300 Subject: [PATCH 10/23] Web: Files: added OwnerChange translation --- .../panels/AddUsersPanel/locales/en/translation.json | 3 ++- .../panels/AddUsersPanel/locales/ru/translation.json | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/en/translation.json b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/en/translation.json index 837587aee5..e4724e1af9 100644 --- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/en/translation.json +++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/en/translation.json @@ -1,3 +1,4 @@ { - "LinkText": "Add users" + "LinkText": "Add users", + "OwnerChange": "Change owner" } diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/ru/translation.json b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/ru/translation.json index 75eb618b47..589dfb5c19 100644 --- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/ru/translation.json +++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/locales/ru/translation.json @@ -1,3 +1,4 @@ { - "LinkText": "Добавить пользователей" + "LinkText": "Добавить пользователей", + "OwnerChange": "Сменить владельца" } From 15420cb96b208c202947ff1369a2af8db8b812cd Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 14 Dec 2020 15:06:24 +0300 Subject: [PATCH 11/23] Web: Files: fixed ShareAccessRights constants --- .../Client/src/components/panels/SharingPanel/AccessComboBox.js | 2 ++ web/ASC.Web.Common/src/constants/index.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js index f1ada5412c..6e235fc387 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js @@ -31,6 +31,8 @@ const AccessComboBox = (props) => { return "EyeIcon"; case 3: return "AccessNoneIcon"; + case 4: + return "CatalogQuestionIcon"; case 5: return "AccessReviewIcon"; case 6: diff --git a/web/ASC.Web.Common/src/constants/index.js b/web/ASC.Web.Common/src/constants/index.js index eac576dee3..eeb9a5ba75 100644 --- a/web/ASC.Web.Common/src/constants/index.js +++ b/web/ASC.Web.Common/src/constants/index.js @@ -92,9 +92,11 @@ export const FolderType = Object.freeze({ }); export const ShareAccessRights = Object.freeze({ + None: 0, FullAccess: 1, ReadOnly: 2, DenyAccess: 3, + Varies: 4, Review: 5, Comment: 6, FormFilling: 7, From 45001f0dcf100d772928ce9f30f15b3b5a33c5db Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 14 Dec 2020 15:07:27 +0300 Subject: [PATCH 12/23] Web: Common: added owner change api --- web/ASC.Web.Common/src/api/files/index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/web/ASC.Web.Common/src/api/files/index.js b/web/ASC.Web.Common/src/api/files/index.js index 9daa836f5d..4186588f89 100644 --- a/web/ASC.Web.Common/src/api/files/index.js +++ b/web/ASC.Web.Common/src/api/files/index.js @@ -411,7 +411,16 @@ export function setShareFiles( return request({ method: "put", - url: `/files/share`, + url: "/files/share", + data, + }); +} + +export function setFileOwner(folderIds, fileIds, userId) { + const data = { folderIds, fileIds, userId }; + return request({ + method: "post", + url: "/files/owner", data, }); } From d428ec37c2b7038fe6233c12f26f78d2eea5c721 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 14 Dec 2020 15:08:41 +0300 Subject: [PATCH 13/23] Web: Files: fixed setShareFiles action, added getCanShareOwnerChange selector --- .../Client/src/store/files/actions.js | 23 +++++++++++++++++-- .../Client/src/store/files/selectors.js | 9 ++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/products/ASC.Files/Client/src/store/files/actions.js b/products/ASC.Files/Client/src/store/files/actions.js index 30b4496b0d..3a9c234d9c 100644 --- a/products/ASC.Files/Client/src/store/files/actions.js +++ b/products/ASC.Files/Client/src/store/files/actions.js @@ -550,9 +550,28 @@ export function setShareFiles( fileIds, share, notify, - sharingMessage + sharingMessage, + externalAccess, + ownerId ) { - return files.setShareFiles(fileIds, folderIds, share, notify, sharingMessage); + let externalAccessRequest = []; + if (fileIds.length === 1 && externalAccess !== null) { + externalAccessRequest = fileIds.map((id) => + files.setExternalAccess(id, externalAccess) + ); + } + + const ownerChangeRequest = ownerId + ? [files.setFileOwner(folderIds, fileIds, ownerId)] + : []; + + const requests = [ + files.setShareFiles(fileIds, folderIds, share, notify, sharingMessage), + ...externalAccessRequest, + ...ownerChangeRequest, + ]; + + return axios.all(requests); } export function getShareUsers(folderIds, fileIds) { diff --git a/products/ASC.Files/Client/src/store/files/selectors.js b/products/ASC.Files/Client/src/store/files/selectors.js index 1bf48bcfd7..e262a3d1c2 100644 --- a/products/ASC.Files/Client/src/store/files/selectors.js +++ b/products/ASC.Files/Client/src/store/files/selectors.js @@ -1182,3 +1182,12 @@ export const getIconOfDraggedFile = (state) => { export const getSharePanelVisible = (state) => { return state.files.sharingPanelVisible; }; + +export const getCanShareOwnerChange = createSelector( + isAdmin, + getPathParts, + getCommonFolderId, + (isAdmin, pathParts, commonId) => { + return isAdmin && commonId === pathParts[0]; + } +); From 6ce69ef768a59898b074e9f49b3e7dea36858e68 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 14 Dec 2020 15:12:56 +0300 Subject: [PATCH 14/23] Web: Files: added change of file owner --- .../components/panels/AddUsersPanel/index.js | 49 ++++++-- .../panels/SharingPanel/SharingRow.js | 37 ++++-- .../components/panels/SharingPanel/index.js | 105 +++++++++++++++--- .../components/panels/SharingPanel/linkRow.js | 5 +- .../src/components/panels/StyledPanels.js | 18 ++- 5 files changed, 169 insertions(+), 45 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js index 89d0f484e0..28ca238380 100644 --- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js @@ -72,6 +72,19 @@ class AddUsersPanelComponent extends React.Component { onClose(); }; + onOwnerSelect = (owner) => { + const { setShareDataItems, shareDataItems, onClose } = this.props; + const ownerItem = shareDataItems.find((x) => x.isOwner); + ownerItem.sharedTo = owner[0]; + + if (owner[0].key) { + owner[0].id = owner[0].key; + } + + setShareDataItems(shareDataItems); + onClose(); + }; + componentDidMount() { const scroll = this.scrollRef.current.getElementsByClassName("scroll-body"); setTimeout(() => scroll[1] && scroll[1].focus(), 2000); @@ -107,11 +120,30 @@ class AddUsersPanelComponent extends React.Component { }; render() { - const { t, visible, groupsCaption, accessOptions } = this.props; + const { + t, + visible, + groupsCaption, + accessOptions, + isMultiSelect, + } = this.props; const { accessRight } = this.state; const zIndex = 310; + const embeddedComponent = isMultiSelect + ? { + embeddedComponent: ( + + ), + } + : null; + //console.log("AddUsersPanel render"); return ( @@ -134,7 +166,7 @@ class AddUsersPanelComponent extends React.Component { size="medium" truncate > - {t("LinkText")} + {isMultiSelect ? t("LinkText") : t("OwnerChange")} {/* + isMultiSelect={isMultiSelect} + onSelect={ + isMultiSelect ? this.onPeopleSelect : this.onOwnerSelect } + {...embeddedComponent} groupsCaption={groupsCaption} showCounter //onCancel={onClose} diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js index 8084e7efd1..1d217932ff 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -1,5 +1,5 @@ import React from "react"; -import { IconButton, Row, Text, Icons } from "asc-web-components"; +import { IconButton, Row, Text, Icons, Link } from "asc-web-components"; import { toastr } from "asc-web-common"; import copy from "copy-to-clipboard"; import LinkRow from "./linkRow"; @@ -81,12 +81,14 @@ class SharingRow extends React.Component { onShowEmbeddingPanel, onToggleLink, externalLinkData, + canShareOwnerChange, + onShowChangeOwnerPanel, + isLoading, } = this.props; const { access } = this.state; - const { isOwner } = item; + const { isOwner, isLocked } = item; const { label, name, displayName, shareLink, id } = item.sharedTo; - const linkVisible = selection && selection.length === 1 && shareLink; const internalLinkData = [ @@ -138,6 +140,11 @@ class SharingRow extends React.Component { }, ]; + const onRemoveUserProp = !isLoading ? { onClick: onRemoveUserClick } : {}; + const onShowChangeOwnerPanelProp = !isLoading + ? { onClick: onShowChangeOwnerPanel } + : {}; + return ( <> {linkVisible && ( @@ -163,7 +170,7 @@ class SharingRow extends React.Component { className="sharing-row" key={`internal-link-key_${id}`} element={ - isOwner || id === isMyId ? ( + isOwner || id === isMyId || isLocked ? ( ) } contextButtonSpacerWidth="0px" > <> - {!shareLink && ( - - {label ? label : name ? name : displayName} - - )} + {!shareLink && + (isOwner && canShareOwnerChange ? ( + + {label ? label : name ? name : displayName} + + ) : ( + + {label ? label : name ? name : displayName} + + ))} {isOwner ? ( {t("Owner")} @@ -198,13 +211,15 @@ class SharingRow extends React.Component { {t("AccessRightsFullAccess")} ) : ( - !shareLink && ( + !shareLink && + !isLocked && ( ) )} diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index 48f05964e4..c70ca2a74b 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -18,12 +18,15 @@ import { getShareUsers, setShareFiles, setSharingPanelVisible, + setIsLoading, } from "../../../store/files/actions"; import { getAccessOption, getExternalAccessOption, getSelection, getSharePanelVisible, + getCanShareOwnerChange, + getIsLoading, } from "../../../store/files/selectors"; import { StyledAsidePanel, @@ -63,10 +66,12 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel: false, showEmbeddingPanel: false, showAddGroupsPanel: false, + showChangeOwnerPanel: false, shareLink: "", isLoadedShareData: false, showPanel: false, accessOptions: [], + filesOwnerId: null, }; this.ref = React.createRef(); @@ -100,8 +105,9 @@ class SharingPanelComponent extends React.Component { isNotifyUsers, message, shareDataItems, + filesOwnerId, } = this.state; - const { selection } = this.props; + const { selection, setIsLoading } = this.props; const folderIds = []; const fileIds = []; @@ -133,7 +139,10 @@ class SharingPanelComponent extends React.Component { (x) => x.sharedTo.id === item.sharedTo.id ); if (!baseItem) { - share.push({ shareTo: item.sharedTo.id, access: 0 }); + share.push({ + shareTo: item.sharedTo.id, + access: ShareAccessRights.None, + }); } } @@ -145,16 +154,25 @@ class SharingPanelComponent extends React.Component { } } + const owner = shareDataItems.find((x) => x.isOwner); + const ownerId = + filesOwnerId !== owner.sharedTo.id ? owner.sharedTo.id : null; + + setIsLoading(true); setShareFiles( folderIds, fileIds, share, isNotifyUsers, message, - externalAccess + externalAccess, + ownerId ) .catch((err) => toastr.error(err)) - .finally(() => this.onClose()); + .finally(() => { + this.onClose(); + setIsLoading(false); + }); }; onNotifyUsersChange = () => @@ -170,7 +188,7 @@ class SharingPanelComponent extends React.Component { const id = e.currentTarget.dataset.id; const access = e.currentTarget.dataset.access; const shareDataItems = this.state.shareDataItems; - const elem = shareDataItems.find((x) => x.sharedTo.id === id); + const elem = shareDataItems.find((x) => x.sharedTo.id === id && !x.isOwner); if (elem.access !== +access) { elem.access = +access; @@ -211,14 +229,22 @@ class SharingPanelComponent extends React.Component { const returnValue = this.getData(); const folderId = returnValue[0]; const fileId = returnValue[1]; - const { getAccessOption, getExternalAccessOption, selection } = this.props; + const { + getAccessOption, + getExternalAccessOption, + selection, + setIsLoading, + } = this.props; if (folderId.length !== 0 || fileId.length !== 0) { + setIsLoading(true); getShareUsers(folderId, fileId) .then((shareDataItems) => { const baseShareData = JSON.parse(JSON.stringify(shareDataItems)); const accessOptions = getAccessOption(selection); const externalAccessOptions = getExternalAccessOption(selection); + const filesOwner = shareDataItems.find((x) => x.isOwner); + const filesOwnerId = filesOwner ? filesOwner.id : null; this.setState({ baseShareData, @@ -226,11 +252,14 @@ class SharingPanelComponent extends React.Component { accessOptions, externalAccessOptions, showPanel: true, + filesOwnerId, }); }) .catch((err) => { toastr.error(err); - }); + this.onClose(); + }) + .finally(() => setIsLoading(false)); } }; @@ -246,6 +275,12 @@ class SharingPanelComponent extends React.Component { showActionPanel: false, }); + onShowChangeOwnerPanel = () => + this.setState({ + showChangeOwnerPanel: !this.state.showChangeOwnerPanel, + showActionPanel: false, + }); + onChangeMessage = (e) => this.setState({ message: e.target.value }); setShareDataItems = (shareDataItems) => this.setState({ shareDataItems }); @@ -268,8 +303,15 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel, showEmbeddingPanel, showAddGroupsPanel, + showChangeOwnerPanel, } = this.state; - if (showAddUsersPanel || showEmbeddingPanel || showAddGroupsPanel) return; + if ( + showAddUsersPanel || + showEmbeddingPanel || + showAddGroupsPanel || + showChangeOwnerPanel + ) + return; if (event.key === "Esc" || event.key === "Escape") { this.onClose(); } @@ -290,7 +332,14 @@ class SharingPanelComponent extends React.Component { render() { //console.log("Sharing panel render"); - const { t, isMyId, selection, groupsCaption } = this.props; + const { + t, + isMyId, + selection, + groupsCaption, + canShareOwnerChange, + isLoading, + } = this.props; const { showActionPanel, isNotifyUsers, @@ -299,6 +348,7 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel, showAddGroupsPanel, showEmbeddingPanel, + showChangeOwnerPanel, shareLink, showPanel, accessOptions, @@ -307,12 +357,13 @@ class SharingPanelComponent extends React.Component { const visible = showPanel; const zIndex = 310; + const onPlusClickProp = !isLoading ? { onClick: this.onPlusClick } : {}; return (