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 793495a132..c7f6b82ae2 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, @@ -9,6 +9,7 @@ import { StyledHeaderContent, StyledBody, } from "../StyledPanels"; +import AccessComboBox from "../SharingPanel/AccessComboBox"; import { createI18N } from "../../../helpers/i18n"; const i18n = createI18N({ page: "AddGroupsPanel", @@ -16,6 +17,7 @@ const i18n = createI18N({ }); const { changeLanguage } = utils; +const { ShareAccessRights } = constants; class AddGroupsPanelComponent extends React.Component { constructor(props) { @@ -23,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(); } @@ -38,23 +43,22 @@ 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) { if (item.key) { 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) { - item.rights = accessRight; - items.push(item); + const newItem = { + access: this.state.accessRight, + isLocked: false, + isOwner: false, + sharedTo: item, + }; + items.push(newItem); } } @@ -62,10 +66,19 @@ class AddGroupsPanelComponent extends React.Component { onClose(); }; - onPLusClick = () => { - console.log("onPlusClick"); + 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() { const scroll = this.scrollRef.current.getElementsByClassName("scroll-body"); setTimeout(() => scroll[1] && scroll[1].focus(), 2000); @@ -75,18 +88,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 && accessRight.rights !== nextProps.accessRight.rights) { + if (accessRight !== nextState.accessRight) { return true; } @@ -102,7 +108,8 @@ class AddGroupsPanelComponent extends React.Component { } render() { - const { visible, embeddedComponent, t } = this.props; + const { t, visible, accessOptions } = this.props; + const { accessRight } = this.state; const zIndex = 310; @@ -146,8 +153,16 @@ 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 3d067f5c1d..c2d2251b95 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, @@ -9,6 +9,7 @@ import { StyledHeaderContent, StyledBody, } from "../StyledPanels"; +import AccessComboBox from "../SharingPanel/AccessComboBox"; import { createI18N } from "../../../helpers/i18n"; const i18n = createI18N({ page: "AddUsersPanel", @@ -16,6 +17,7 @@ const i18n = createI18N({ }); const { changeLanguage } = utils; +const { ShareAccessRights } = constants; class AddUsersPanelComponent extends React.Component { constructor(props) { @@ -25,6 +27,7 @@ class AddUsersPanelComponent extends React.Component { this.state = { showActionPanel: false, + accessRight: ShareAccessRights.ReadOnly, }; this.scrollRef = React.createRef(); @@ -35,28 +38,33 @@ 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) { 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) { - item.rights = accessRight; - items.push(item); + const newItem = { + access: this.state.accessRight, + isLocked: false, + isOwner: false, + sharedTo: item, + }; + items.push(newItem); } } @@ -64,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); @@ -74,17 +95,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 && accessRight.rights !== nextProps.accessRight.rights) { + if (accessRight !== nextState.accessRight) { return true; } @@ -99,11 +114,37 @@ class AddUsersPanelComponent extends React.Component { return false; } + onAccessChange = (e) => { + const accessRight = +e.currentTarget.dataset.access; + this.setState({ accessRight }); + }; + render() { - const { visible, embeddedComponent, t, groupsCaption } = 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 ( @@ -127,7 +168,7 @@ class AddUsersPanelComponent extends React.Component { size="medium" truncate > - {t("LinkText")} + {isMultiSelect ? t("LinkText") : t("OwnerChange")} {/* 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": "Сменить владельца" } 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..5915b1780c --- /dev/null +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js @@ -0,0 +1,124 @@ +import React from "react"; +import { ComboBox, Icons, DropDownItem } from "asc-web-components"; +import { constants } from "asc-web-common"; +import { getAccessIcon } from "../../../store/files/selectors"; + +const { ShareAccessRights } = constants; + +const AccessComboBox = (props) => { + const { + access, + accessOptions, + directionX, + isDisabled, + itemId, + onAccessChange, + t, + } = props; + 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 accessIcon = getAccessIcon(access); + + return ( + + {React.createElement(Icons[accessIcon], { + size: "medium", + className: "sharing-access-combo-box-icon", + })} + + ); +}; + +export default AccessComboBox; 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 f3490067c9..a1b41cbe00 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js @@ -1,273 +1,250 @@ import React from "react"; -import { - IconButton, - ComboBox, - Row, - Text, - Icons, - DropDownItem, -} 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"; +import AccessComboBox from "./AccessComboBox"; +import equal from "fast-deep-equal/react"; +import { getAccessIcon } from "../../../store/files/selectors"; -const SharingRow = (props) => { - const { - t, - selection, - item, - index, - isMyId, - accessOptions, - onFullAccessClick, - onReadOnlyClick, - onReviewClick, - onCommentClick, - onFormFillingClick, - onDenyAccessClick, - onFilterEditingClick, - onRemoveUserClick, - onShowEmbeddingPanel, - onToggleLink, - internalLink, - } = props; - const externalLinkVisible = - selection && selection.length === 1 && item.shareLink; - const internalLinkVisible = index === 0 && internalLink; +class SharingRow extends React.Component { + constructor(props) { + super(props); + + this.state = { + access: props.item.access, + }; + } + + componentDidUpdate() { + const { access } = this.props.item; + if (this.state.access !== access) { + this.setState({ access }); + } + } + + shouldComponentUpdate(nextProps) { + if (!equal(this.props, nextProps)) { + return true; + } + if (this.state.access !== this.props.item.access) { + return true; + } + + return true; + } + + onCopyInternalLink = () => { + const { internalLink, t } = this.props; - const onCopyInternalLink = () => { copy(internalLink); toastr.success(t("LinkCopySuccess")); }; - const advancedOptionsRender = (accessOptions) => ( - <> - {accessOptions.includes("FullAccess") && ( - onFullAccessClick(item)} - /> - )} - - {accessOptions.includes("ReadOnly") && ( - onReadOnlyClick(item)} - /> - )} - - {accessOptions.includes("Review") && ( - onReviewClick(item)} - /> - )} - - {accessOptions.includes("Comment") && ( - onCommentClick(item)} - /> - )} - - {accessOptions.includes("FormFilling") && ( - onFormFillingClick(item)} - /> - )} - {accessOptions.includes("DenyAccess") && ( - onDenyAccessClick(item)} - /> - )} - {accessOptions.includes("FilterEditing") && ( - onFilterEditingClick(item)} - /> - )} - - ); - - const embeddedComponentRender = ( - accessOptions = this.props.accessOptions, - item, - isDisabled - ) => ( - - {React.createElement(Icons[item.rights.icon], { - size: "medium", - className: "sharing-access-combo-box-icon", - })} - - ); - - const onCopyClick = () => { + onCopyClick = () => { + const { t, item } = this.props; + const { shareLink } = item.sharedTo; toastr.success(t("LinkCopySuccess")); - copy(item.shareLink); + copy(shareLink); }; - const onShareEmail = () => { + onShareEmail = () => { + const { selection, item, t } = 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${item.shareLink}111`; + const subject = t("ShareEmailSubject", { itemName }); + const body = t("ShareEmailBody", { itemName, shareLink }); window.open(`mailto:?subject=${subject}&body=${body}`); }; - const onShareTwitter = () => { - const encodedLink = encodeURIComponent(item.shareLink); + onShareTwitter = () => { + const encodedLink = encodeURIComponent(this.props.item.sharedTo.shareLink); window.open(`https://twitter.com/intent/tweet?text=${encodedLink}`); }; - const onShareFacebook = () => { + onShareFacebook = () => { window.open( - `https://www.facebook.com/sharer/sharer.php?u=${item.shareLink}` + `https://www.facebook.com/sharer/sharer.php?u=${this.props.item.sharedTo.shareLink}` ); }; - const internalLinkData = [ - { - key: "linkItem", - label: t("CopyInternalLink"), - onClick: onCopyInternalLink, - }, - ]; + render() { + //console.log("SharingRow render"); + const { + t, + selection, + item, + index, + isMyId, + accessOptions, + onChangeItemAccess, + onRemoveUserClick, + onShowEmbeddingPanel, + onToggleLink, + externalLinkData, + canShareOwnerChange, + onShowChangeOwnerPanel, + isLoading, + internalLink, + } = this.props; + const { access } = this.state; - 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(item.shareLink), - }, - ]; + const { isOwner, isLocked } = item; + const { label, displayName, name, shareLink, id } = item.sharedTo; + const userName = name + ? name === "Everyone" + ? t("ShareEveryone") + : name + : ""; - //console.log("SharingRow render"); - return ( - <> - {externalLinkVisible && ( - - )} - {internalLinkVisible && ( - - )} + const externalLinkVisible = + selection && selection.length === 1 && shareLink; + const internalLinkVisible = index === 0 && internalLink; - {!item.shareLink && ( - - ) : ( - embeddedComponentRender(accessOptions, item) - ) - } - contextButtonSpacerWidth="0px" - > - <> - {!item.shareLink && ( - - {item.label - ? item.label - : item.name - ? item.name - : item.displayName} - - )} - {item.rights.isOwner ? ( - - {t("Owner")} - - ) : item.id === isMyId ? ( - - {t("AccessRightsFullAccess")} - - ) : ( - !item.shareLink && ( - onRemoveUserClick(item)} - className="sharing_panel-remove-icon" - color="#A3A9AE" + 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), + }, + ]; + + const onRemoveUserProp = !isLoading ? { onClick: onRemoveUserClick } : {}; + const onShowChangeOwnerPanelProp = !isLoading + ? { onClick: onShowChangeOwnerPanel } + : {}; + + const accessIcon = getAccessIcon(access); + + return ( + <> + {externalLinkVisible && ( + + )} + {internalLinkVisible && ( + + )} + + {!shareLink && ( + ) - )} - - - )} - - ); -}; + } + contextButtonSpacerWidth="0px" + > + <> + {!shareLink && + (isOwner && canShareOwnerChange ? ( + + {label ? label : userName ? userName : displayName} + + ) : ( + + {label ? label : userName ? userName : displayName} + + ))} + {isOwner ? ( + + {t("Owner")} + + ) : id === isMyId ? ( + + {t("AccessRightsFullAccess")} + + ) : ( + !shareLink && + !isLocked && ( + + ) + )} + + + )} + + ); + } +} 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 d181adeb39..7efda9da40 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"; @@ -20,12 +18,19 @@ import { getShareUsers, setShareFiles, setSharingPanelVisible, + setIsLoading, + setFiles, + setFolders, } from "../../../store/files/actions"; import { getAccessOption, getExternalAccessOption, getSelection, getSharePanelVisible, + getCanShareOwnerChange, + getIsLoading, + getFiles, + getFolders, } from "../../../store/files/selectors"; import { StyledAsidePanel, @@ -66,15 +71,12 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel: false, showEmbeddingPanel: false, showAddGroupsPanel: false, - accessRight: { - icon: "EyeIcon", - rights: "ReadOnly", - accessNumber: ShareAccessRights.ReadOnly, - }, + showChangeOwnerPanel: false, shareLink: "", isLoadedShareData: false, showPanel: false, accessOptions: [], + filesOwnerId: null, }; this.ref = React.createRef(); @@ -91,27 +93,47 @@ class SharingPanelComponent extends React.Component { onToggleLink = (item) => { const { shareDataItems } = this.state; + const { DenyAccess, ReadOnly } = ShareAccessRights; - const rights = - item.rights.accessNumber !== ShareAccessRights.DenyAccess - ? this.getItemAccess(ShareAccessRights.DenyAccess) - : this.getItemAccess(ShareAccessRights.ReadOnly); + const rights = item.access !== DenyAccess ? DenyAccess : ReadOnly; const newDataItems = JSON.parse(JSON.stringify(shareDataItems)); - newDataItems[0].rights = { ...rights }; + newDataItems[0].access = rights; this.setState({ shareDataItems: newDataItems, }); }; + updateRowData = (newRowData) => { + const { files, folders, setFiles, setFolders } = this.props; + + for (let item of newRowData) { + if (!item.fileExst && item.foldersCount) { + let folderIndex = folders.findIndex((x) => x.id === item.id); + if (folderIndex !== -1) { + folders[folderIndex] = item; + } + } else { + let fileIndex = files.findIndex((x) => x.id === item.id); + if (fileIndex !== -1) { + files[fileIndex] = item; + } + } + } + + setFiles(files); + setFolders(folders); + }; + onSaveClick = () => { const { baseShareData, isNotifyUsers, message, shareDataItems, + filesOwnerId, } = this.state; - const { selectedItems } = this.props; + const { selection, setIsLoading } = this.props; const folderIds = []; const fileIds = []; @@ -120,32 +142,37 @@ 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) || + (!item.isOwner && !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: ShareAccessRights.None, + }); } } - for (let item of selectedItems) { + for (let item of selection) { if (item.fileExst) { fileIds.push(item.id); } else { @@ -153,93 +180,28 @@ class SharingPanelComponent extends React.Component { } } + const owner = shareDataItems.find((x) => x.isOwner); + const ownerId = + filesOwnerId !== owner.sharedTo.id ? owner.sharedTo.id : null; + + setIsLoading(true); + this.onClose(); setShareFiles( folderIds, fileIds, share, isNotifyUsers, message, - externalAccess + externalAccess, + ownerId ) + .then((res) => { + if (ownerId) { + this.updateRowData(res[0]); + } + }) .catch((err) => toastr.error(err)) - .finally(() => this.onClose()); - }; - - onFullAccessClick = () => { - this.setState({ - accessRight: { - icon: "AccessEditIcon", - rights: "FullAccess", - accessNumber: ShareAccessRights.FullAccess, - isOwner: false, - }, - }); - }; - - onReadOnlyClick = () => { - this.setState({ - accessRight: { - icon: "EyeIcon", - rights: "ReadOnly", - accessNumber: ShareAccessRights.ReadOnly, - isOwner: false, - }, - }); - }; - - onReviewClick = () => { - this.setState({ - accessRight: { - icon: "AccessReviewIcon", - rights: "Review", - accessNumber: ShareAccessRights.Review, - isOwner: false, - }, - }); - }; - - onCommentClick = () => { - this.setState({ - accessRight: { - icon: "AccessCommentIcon", - rights: "Comment", - accessNumber: ShareAccessRights.Comment, - isOwner: false, - }, - }); - }; - - onFormFillingClick = () => { - this.setState({ - accessRight: { - icon: "AccessFormIcon", - rights: "FormFilling", - accessNumber: ShareAccessRights.FormFilling, - isOwner: false, - }, - }); - }; - - onDenyAccessClick = () => { - this.setState({ - accessRight: { - icon: "AccessNoneIcon", - rights: "DenyAccess", - accessNumber: ShareAccessRights.DenyAccess, - isOwner: false, - }, - }); - }; - - onFilterEditingClick = () => { - this.setState({ - accessRight: { - icon: "CustomFilterIcon", - rights: "CustomFilter", - accessNumber: ShareAccessRights.CustomFilter, - isOwner: false, - }, - }); + .finally(() => setIsLoading(false)); }; onNotifyUsersChange = () => @@ -251,247 +213,35 @@ 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 }); - } - }; - 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 }); - } - }; - 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 }); - } - }; - 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 }); - } - }; - 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 }); + 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 && !x.isOwner); + + if (elem.access !== +access) { + elem.access = +access; + this.setState({ shareDataItems }); } }; - onRemoveUserItemClick = (item) => { + onRemoveUserItemClick = (e) => { + const id = e.currentTarget.dataset.for; const shareDataItems = this.state.shareDataItems.slice(0); - const index = shareDataItems.findIndex((x) => x.id === item.id); + const index = shareDataItems.findIndex((x) => x.sharedTo.id === id); if (index !== -1) { shareDataItems.splice(index, 1); 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; - } - }; - - getShareDataItems = (items) => { - const { - getAccessOption, - getExternalAccessOption, - selectedItems, - } = this.props; - let arrayItems = []; - const newItems = []; - let stash = []; - - 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 = []; - } - 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) => { - let obj = {}; - return shareDataItems.filter((x) => { - if (obj[x.id]) return false; - obj[x.id] = true; - return true; - }); - }; - 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); @@ -508,31 +258,46 @@ class SharingPanelComponent extends React.Component { const returnValue = this.getData(); const folderId = returnValue[0]; const fileId = returnValue[1]; - let error = null; - let shareData = {}; + const { + getAccessOption, + getExternalAccessOption, + selection, + setIsLoading, + } = this.props; if (folderId.length !== 0 || fileId.length !== 0) { + setIsLoading(true); getShareUsers(folderId, fileId) - .then((res) => { - shareData = this.getShareDataItems(res); + .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.sharedTo.id : null; + + this.setState({ + baseShareData, + shareDataItems, + accessOptions, + externalAccessOptions, + showPanel: true, + filesOwnerId, + }); }) .catch((err) => { - error = err; toastr.error(err); + this.onClose(); }) - .finally( - () => - !error && this.setState({ ...shareData, ...{ showPanel: true } }) - ); + .finally(() => setIsLoading(false)); } }; getInternalLink = () => { - const { settings, selectedItems } = this.props; - const item = selectedItems[0]; + const { settings, selection } = this.props; + const item = selection[0]; const isFile = !!item.fileExst; - if (selectedItems.length !== 1) return null; + if (selection.length !== 1) return null; return isFile ? item.canOpenPlayer @@ -555,6 +320,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 }); @@ -577,8 +348,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(); } @@ -599,7 +377,14 @@ class SharingPanelComponent extends React.Component { render() { //console.log("Sharing panel render"); - const { t, isMyId, selectedItems, groupsCaption } = this.props; + const { + t, + isMyId, + selection, + groupsCaption, + canShareOwnerChange, + isLoading, + } = this.props; const { showActionPanel, isNotifyUsers, @@ -608,7 +393,7 @@ class SharingPanelComponent extends React.Component { showAddUsersPanel, showAddGroupsPanel, showEmbeddingPanel, - accessRight, + showChangeOwnerPanel, shareLink, showPanel, accessOptions, @@ -617,85 +402,8 @@ class SharingPanelComponent extends React.Component { const visible = showPanel; const zIndex = 310; - const internalLink = selectedItems && this.getInternalLink(); - - const advancedOptions = ( - <> - {accessOptions.includes("FullAccess") && ( - - )} - - {accessOptions.includes("ReadOnly") && ( - - )} - - {accessOptions.includes("Review") && ( - - )} - - {accessOptions.includes("Comment") && ( - - )} - - {accessOptions.includes("FormFilling") && ( - - )} - {accessOptions.includes("DenyAccess") && ( - - )} - {accessOptions.includes("FilterEditing") && ( - - )} - - ); - - const accessOptionsComboBox = ( - - {React.createElement(Icons[accessRight.icon], { - size: "medium", - //color: this.state.currentIconColor, - //isfill: isFill - })} - - ); + const onPlusClickProp = !isLoading ? { onClick: this.onPlusClick } : {}; + const internalLink = selection.length === 1 && this.getInternalLink(); return ( @@ -706,7 +414,7 @@ class SharingPanelComponent extends React.Component { isAside={true} />