Web: Files: fixed display sharing panel users rights, added new translations, code refactoring

products/ASC.Files/Client/src/components/panels/SharingPanel/SharingPanel.js

@@ -18,7 +18,7 @@ import {
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
-import { utils as commonUtils, constants } from "asc-web-common";
+import { utils as commonUtils, constants, api } from "asc-web-common";
 import i18n from "./i18n";
 import {
   getShareUsersAndGroups,
@@ -39,6 +39,7 @@ import SharingRow from "./SharingRow";
 
 const { changeLanguage } = commonUtils;
 const { ShareAccessRights } = constants;
+const { files } = api;
 
 class SharingPanelComponent extends React.Component {
   constructor(props) {
@@ -60,7 +61,7 @@ class SharingPanelComponent extends React.Component {
         rights: "ReadOnly",
         accessNumber: ShareAccessRights.ReadOnly,
       },
-      shareLink: ""
+      shareLink: "",
     };
 
     this.ref = React.createRef();
@@ -272,14 +273,18 @@ class SharingPanelComponent extends React.Component {
   };
 
   getItemAccess = (item) => {
+    const fullAccessRights = {
+      icon: "AccessEditIcon",
+      rights: "FullAccess",
+      accessNumber: ShareAccessRights.FullAccess,
+      isOwner: item.isOwner,
+    };
+    if (item.sharedTo.shareLink) {
+      return fullAccessRights;
+    }
     switch (item.access) {
       case 1:
-        return {
-          icon: "AccessEditIcon",
-          rights: "FullAccess",
-          accessNumber: ShareAccessRights.FullAccess,
-          isOwner: item.isOwner,
-        };
+        return fullAccessRights;
       case 2:
         return {
           icon: "EyeIcon",
@@ -320,54 +325,75 @@ class SharingPanelComponent extends React.Component {
     }
   };
 
-  getShareDataItems = (res, shareDataItems, foldersIds, filesIds) => {
-    const listOwners = [];
+  getShareDataItems = (items, shareDataItems, foldersIds, filesIds) => {
     const storeShareData = [];
+    const arrayItems = [];
+    for (let item of items) {
+      const rights = this.getItemAccess(item);
 
-    for (let array of res) {
-      let foldersIndex = 0;
-      let filesIndex = 0;
-      let shareIndex = 0;
-
-      if (foldersIds.length > foldersIndex) {
-        storeShareData.push({
-          folderId: foldersIds[foldersIndex],
-          shareDataItems: [],
-        });
-        foldersIndex++;
-      } else {
-        storeShareData.push({
-          fileId: filesIds[filesIndex],
-          shareDataItems: [],
-        });
-        filesIndex++;
+      if (rights) {
+        item.sharedTo = { ...item.sharedTo, ...{ rights } };
+        arrayItems.push(item.sharedTo);
       }
+    }
+    if (foldersIds) {
+      storeShareData.push({
+        folderId: foldersIds[0],
+        shareDataItems: arrayItems,
+      });
+    } else {
+      storeShareData.push({ fileId: filesIds[0], shareDataItems: arrayItems });
+    }
+    this.props.setShareData([...storeShareData, ...this.props.shareData]);
 
-      let arrayItems = [];
+    let listOfArrays = [...shareDataItems.slice(0), ...[arrayItems.slice(0)]];
+
+    listOfArrays = listOfArrays.filter((x) => x.length !== 0);
+
+    let allItems = [];
+    for (let array of listOfArrays) {
       for (let item of array) {
-        const rights = this.getItemAccess(item);
+        allItems.push(item);
+      }
+    }
 
-        if (rights) {
-          item.sharedTo = { ...item.sharedTo, ...{ rights } };
-          item.sharedTo.shareLink
-            ? shareDataItems.unshift(item.sharedTo)
-            : shareDataItems.push(item.sharedTo);
-          arrayItems.push(item.sharedTo);
+    allItems = this.removeDuplicateShareData(allItems);
+    allItems = JSON.parse(JSON.stringify(allItems));
+
+    let stash = 0;
+    for (let item of allItems) {
+      let length = listOfArrays.length;
+      if (!item.shareLink) {
+        while (length !== 0) {
+          if (listOfArrays[length - 1].length !== 0) {
+            stash = listOfArrays[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--;
         }
       }
-      storeShareData[shareIndex].shareDataItems = arrayItems;
-      arrayItems = [];
-      shareIndex++;
     }
 
-    for (let item of shareDataItems) {
-      if (item.rights && item.rights.isOwner) {
-        listOwners.push(item.id);
-      }
-    }
-
-    this.props.setShareData([...storeShareData, ...this.props.shareData]);
-    return [shareDataItems, listOwners];
+    this.setShareDataItemsFunction(allItems);
   };
 
   removeDuplicateShareData = (shareDataItems) => {
@@ -379,104 +405,95 @@ class SharingPanelComponent extends React.Component {
     });
   };
 
-  setDuplicateItemsRights = (shareDataItems, rights) => {
-    const array = shareDataItems.slice(0);
+  setShareDataItemsFunction = (shareDataItems) => {
+    shareDataItems = shareDataItems.filter(
+      (x) => x !== undefined && x.length !== 0
+    );
 
-    let i = 0;
-    while (array.length !== 0) {
-      const item = array[i];
-      array.splice(i, 1);
-      const duplicateItem = array.find((x) => x.id === item.id);
-      if (duplicateItem) {
-        if (item.rights.rights !== duplicateItem.rights.rights) {
-          const shareIndex = shareDataItems.findIndex(
-            (x) => x.id === duplicateItem.id
-          );
-          shareDataItems[shareIndex].rights = rights;
-        }
-      }
-    }
-    return shareDataItems;
+    const clearShareData = JSON.parse(JSON.stringify(shareDataItems));
+    this.props.setShareDataItems(shareDataItems.slice(0));
+    this.setState({ baseShareData: clearShareData });
   };
 
-  setOwnersRights = (listOwners, shareDataItems, rights) => {
-    if (listOwners.length > 1) {
-      while (listOwners.length !== 0) {
-        const index = shareDataItems.findIndex((x) => x.id === listOwners[0]);
-        shareDataItems[index].rights = rights;
-        listOwners.splice(0, 1);
-      }
-    }
-    return shareDataItems;
-  };
-
-  getShareData() {
+  getData = () => {
     const { selection, shareData } = this.props;
-
-    const foldersIds = [];
-    const filesIds = [];
-
-    let shareDataItems = [];
-    let listOwners = [];
+    const shareDataItems = [];
+    const folderId = [];
+    const fileId = [];
 
     for (let item of selection) {
       if (item.fileExst) {
         const itemShareData = shareData.find((x) => x.fileId === item.id);
 
         if (itemShareData) {
-          for (let item of itemShareData.shareDataItems) {
-            shareDataItems.push(item);
-          }
+          shareDataItems.push(itemShareData.shareDataItems);
         } else {
-          filesIds.push(item.id);
+          fileId.push(item.id);
         }
       } else {
         const itemShareData = shareData.find((x) => x.folderId === item.id);
         if (itemShareData) {
-          for (let item of itemShareData.shareDataItems) {
-            shareDataItems.push(item);
-          }
+          shareDataItems.push(itemShareData.shareDataItems);
         } else {
-          foldersIds.push(item.id);
+          folderId.push(item.id);
         }
       }
     }
 
-    getShareUsersAndGroups(foldersIds, filesIds)
-      .then((res) => {
-        //console.log("Response", res);
+    return [shareDataItems, folderId, fileId];
+  };
 
-        const shareDataResult = this.getShareDataItems(
-          res,
-          shareDataItems,
-          foldersIds,
-          filesIds
-        );
-        shareDataItems = shareDataResult[0];
-        listOwners = shareDataResult[1];
-      })
-      .then(() => {
-        const rights = {
-          icon: "CatalogQuestionIcon",
-          rights: "Varies",
-          isOwner: false,
-        };
+  getShareData() {
+    const returnValue = this.getData();
+    let shareDataItems = returnValue[0];
+    const folderId = returnValue[1];
+    const fileId = returnValue[2];
 
-        shareDataItems = shareDataItems.filter(
-          (x) => x !== undefined && x.length !== 0
-        );
-        shareDataItems = this.setDuplicateItemsRights(shareDataItems, rights);
-        shareDataItems = this.removeDuplicateShareData(shareDataItems);
-        shareDataItems = this.setOwnersRights(
-          listOwners,
-          shareDataItems,
-          rights
-        );
-
-        const clearShareData = JSON.parse(JSON.stringify(shareDataItems));
-        this.props.setShareDataItems(shareDataItems.slice(0));
-        this.setState({ baseShareData: clearShareData });
-      });
+    if (folderId.length !== 0) {
+      files
+        .getShareFolders(folderId)
+        .then((res) => {
+          shareDataItems = this.getShareDataItems(
+            res,
+            shareDataItems,
+            folderId,
+            null
+          );
+        })
+        .catch((err) => {
+          const newShareDataItem = [
+            { folderId: folderId[0], shareDataItems: [] },
+          ];
+          this.props.setShareData([
+            ...newShareDataItem,
+            ...this.props.shareData,
+          ]);
+          console.log("getShareFolders", err);
+          return;
+        });
+    } else if (fileId.length !== 0) {
+      files
+        .getShareFiles(fileId)
+        .then((res) => {
+          shareDataItems = this.getShareDataItems(
+            res,
+            shareDataItems,
+            null,
+            fileId
+          );
+        })
+        .catch((err) => {
+          const newShareDataItem = [{ fileId: fileId[0], shareDataItems: [] }];
+          this.props.setShareData([
+            ...newShareDataItem,
+            ...this.props.shareData,
+          ]);
+          console.log("getShareFiles", err);
+          return;
+        });
+    } else {
+      shareDataItems = this.getShareDataItems([], shareDataItems, null, fileId);
+    }
   }
 
   onClose = () => {
@@ -485,8 +502,11 @@ class SharingPanelComponent extends React.Component {
     this.props.onClose();
   };
 
-  onShowEmbeddingPanel = link =>
-    this.setState({ showEmbeddingPanel: !this.state.showEmbeddingPanel, shareLink: link });
+  onShowEmbeddingPanel = (link) =>
+    this.setState({
+      showEmbeddingPanel: !this.state.showEmbeddingPanel,
+      shareLink: link,
+    });
 
   onShowGroupsPanel = () =>
     this.setState({ showAddGroupsPanel: !this.state.showAddGroupsPanel });
@@ -515,7 +535,7 @@ class SharingPanelComponent extends React.Component {
 
   render() {
     //console.log("Sharing panel render");
-    const { visible, t, accessOptions, isMe, selection } = this.props;
+    const { visible, t, accessOptions, isMyId, selection } = this.props;
     const {
       showActionPanel,
       isNotifyUsers,
@@ -525,7 +545,7 @@ class SharingPanelComponent extends React.Component {
       showAddGroupsPanel,
       showEmbeddingPanel,
       accessRight,
-      shareLink
+      shareLink,
     } = this.state;
 
     const zIndex = 310;
@@ -651,7 +671,7 @@ class SharingPanelComponent extends React.Component {
                   selection={selection}
                   item={item}
                   index={index}
-                  isMe={isMe}
+                  isMyId={isMyId}
                   accessOptions={accessOptions}
                   onFullAccessClick={this.onFullAccessItemClick}
                   onReadOnlyClick={this.onReadOnlyItemClick}
@@ -723,7 +743,7 @@ class SharingPanelComponent extends React.Component {
 
 SharingPanelComponent.propTypes = {
   onClose: PropTypes.func,
-  visible: PropTypes.bool
+  visible: PropTypes.bool,
 };
 
 const SharingPanelContainerTranslated = withTranslation()(
@@ -737,7 +757,7 @@ const SharingPanel = (props) => (
 const mapStateToProps = (state) => {
   const { shareDataItems, shareData, selection } = state.files;
 
-  return { shareDataItems, shareData, selection, isMe: state.auth.user.id };
+  return { shareDataItems, shareData, selection, isMyId: state.auth.user.id };
 };
 
 export default connect(mapStateToProps, { setShareDataItems, setShareData })(

products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js

@@ -17,7 +17,7 @@ const SharingRow = (props) => {
     selection,
     item,
     index,
-    isMe,
+    isMyId,
     accessOptions,
     onFullAccessClick,
     onReadOnlyClick,
@@ -28,17 +28,69 @@ const SharingRow = (props) => {
     onRemoveUserClick,
     onShowEmbeddingPanel,
   } = props;
+
   const linkVisible = selection.length === 1 && item.shareLink;
 
-  const onCopyInternalLink = (link) => {
-    const internalLink = link.split("&");
+  const onCopyInternalLink = () => {
+    const internalLink = item.shareLink.split("&");
     copy(`${internalLink[0]}&${internalLink[1]}`);
     toastr.success(t("LinkCopySuccess"));
   };
 
-  const embeddedComponentRender = (accessOptions, item) => (
+  const advancedOptionsRender = () => (
+    <>
+      {accessOptions.includes("FullAccess") && (
+        <DropDownItem
+          label="Full access"
+          icon="AccessEditIcon"
+          onClick={() => onFullAccessClick(item)}
+        />
+      )}
+
+      {accessOptions.includes("ReadOnly") && (
+        <DropDownItem
+          label="Read only"
+          icon="EyeIcon"
+          onClick={() => onReadOnlyClick(item)}
+        />
+      )}
+
+      {accessOptions.includes("Review") && (
+        <DropDownItem
+          label="Review"
+          icon="AccessReviewIcon"
+          onClick={() => onReviewClick(item)}
+        />
+      )}
+
+      {accessOptions.includes("Comment") && (
+        <DropDownItem
+          label="Comment"
+          icon="AccessCommentIcon"
+          onClick={() => onCommentClick(item)}
+        />
+      )}
+
+      {accessOptions.includes("FormFilling") && (
+        <DropDownItem
+          label="Form filling"
+          icon="AccessFormIcon"
+          onClick={() => onFormFillingClick(item)}
+        />
+      )}
+      {accessOptions.includes("DenyAccess") && (
+        <DropDownItem
+          label="Deny access"
+          icon="AccessNoneIcon"
+          onClick={() => onDenyAccessClick(item)}
+        />
+      )}
+    </>
+  );
+
+  const embeddedComponentRender = () => (
     <ComboBox
-      advancedOptions={advancedOptionsRender(accessOptions, item)}
+      advancedOptions={advancedOptionsRender()}
       options={[]}
       selectedOption={{ key: 0 }}
       size="content"
@@ -54,57 +106,6 @@ const SharingRow = (props) => {
     </ComboBox>
   );
 
-  const advancedOptionsRender = (accessOptions, item) => (
-    <>
-      {accessOptions.includes("FullAccess") && (
-        <DropDownItem
-          label="Full access"
-          icon="AccessEditIcon"
-          onClick={onFullAccessClick.bind(this, item)}
-        />
-      )}
-
-      {accessOptions.includes("ReadOnly") && (
-        <DropDownItem
-          label="Read only"
-          icon="EyeIcon"
-          onClick={onReadOnlyClick.bind(this, item)}
-        />
-      )}
-
-      {accessOptions.includes("Review") && (
-        <DropDownItem
-          label="Review"
-          icon="AccessReviewIcon"
-          onClick={onReviewClick.bind(this, item)}
-        />
-      )}
-
-      {accessOptions.includes("Comment") && (
-        <DropDownItem
-          label="Comment"
-          icon="AccessCommentIcon"
-          onClick={onCommentClick.bind(this, item)}
-        />
-      )}
-
-      {accessOptions.includes("FormFilling") && (
-        <DropDownItem
-          label="Form filling"
-          icon="AccessFormIcon"
-          onClick={onFormFillingClick.bind(this, item)}
-        />
-      )}
-      {accessOptions.includes("DenyAccess") && (
-        <DropDownItem
-          label="Deny access"
-          icon="AccessNoneIcon"
-          onClick={onDenyAccessClick.bind(this, item)}
-        />
-      )}
-    </>
-  );
-
   const options = [
     {
       key: 1,
@@ -153,8 +154,8 @@ const SharingRow = (props) => {
   const internalLinkData = [
     {
       key: "linkItem",
-      label: "Copy internal link",
-      onClick: onCopyInternalLink.bind(this, item.shareLink),
+      label: t("CopyInternalLink"),
+      onClick: onCopyInternalLink,
     },
   ];
 
@@ -199,44 +200,55 @@ const SharingRow = (props) => {
     },
   ];
 
+  const linksFunction = (linkText, data) => (
+    <Row
+      key={`${linkText}-key_${index}`}
+      //element={embeddedComponentRender(accessOptions, item)}
+      element={
+        <Icons.AccessEditIcon
+          size="medium"
+          className="sharing_panel-owner-icon"
+        />
+      }
+      contextButtonSpacerWidth="0px"
+    >
+      <>
+        <LinkWithDropdown
+          className="sharing_panel-link"
+          color="black"
+          dropdownType="alwaysDashed"
+          data={data}
+        >
+          {t(linkText)}
+        </LinkWithDropdown>
+        {
+          <ComboBox
+            className="sharing_panel-link-combo-box"
+            options={options}
+            isDisabled={false}
+            selectedOption={options[0]}
+            dropDownMaxHeight={200}
+            noBorder={false}
+            scaled={false}
+            scaledOptions
+            size="content"
+            onSelect={(option) => console.log("selected", option)}
+          />
+        }
+      </>
+    </Row>
+  );
+
   //console.log("SharingRow render");
   return (
     <>
-      {linkVisible && (
-        <Row
-          key={`external-link-key_${index}`}
-          element={embeddedComponentRender(accessOptions, item)}
-          contextButtonSpacerWidth="0px"
-        >
-          <>
-            <LinkWithDropdown
-              className="sharing_panel-link"
-              color="black"
-              dropdownType="alwaysDashed"
-              data={externalLinkData}
-            >
-              {t("ExternalLink")}
-            </LinkWithDropdown>
-            <ComboBox
-              className="sharing_panel-link-combo-box"
-              options={options}
-              isDisabled={false}
-              selectedOption={options[0]}
-              dropDownMaxHeight={200}
-              noBorder={false}
-              scaled={false}
-              scaledOptions={true}
-              size="content"
-              onSelect={(option) => console.log("selected", option)}
-            />
-          </>
-        </Row>
-      )}
-      {(linkVisible || !item.shareLink) && (
+      {linkVisible && linksFunction("ExternalLink", externalLinkData)}
+      {linkVisible && linksFunction("InternalLink", internalLinkData)}
+      {!item.shareLink && (
         <Row
           key={`internal-link-key_${index}`}
           element={
-            item.rights.isOwner || item.id === isMe ? (
+            item.rights.isOwner || item.id === isMyId ? (
               <Icons.AccessEditIcon
                 size="medium"
                 className="sharing_panel-owner-icon"
@@ -248,27 +260,15 @@ const SharingRow = (props) => {
           contextButtonSpacerWidth="0px"
         >
           <>
-            {item.shareLink ? (
-              <LinkWithDropdown
-                className="sharing_panel-link"
-                color="black"
-                dropdownType="alwaysDashed"
-                data={internalLinkData}
-              >
-                {t("InternalLink")}
-              </LinkWithDropdown>
-            ) : (
-              !item.shareLink && (
-                <Text truncate className="sharing_panel-text">
-                  {item.label
-                    ? item.label
-                    : item.name
-                    ? item.name
-                    : item.displayName}
-                </Text>
-              )
+            {!item.shareLink && (
+              <Text truncate className="sharing_panel-text">
+                {item.label
+                  ? item.label
+                  : item.name
+                  ? item.name
+                  : item.displayName}
+              </Text>
             )}
-
             {item.rights.isOwner ? (
               <Text
                 className="sharing_panel-remove-icon"
@@ -276,31 +276,18 @@ const SharingRow = (props) => {
               >
                 {t("Owner")}
               </Text>
-            ) : item.id === isMe ? (
+            ) : item.id === isMyId ? (
               <Text
                 className="sharing_panel-remove-icon"
                 //color="#A3A9AE"
               >
                 {t("AccessRightsFullAccess")}
               </Text>
-            ) : item.shareLink ? (
-              <ComboBox
-                className="sharing_panel-link-combo-box"
-                options={options}
-                isDisabled={false}
-                selectedOption={options[0]}
-                dropDownMaxHeight={200}
-                noBorder={false}
-                scaled={false}
-                scaledOptions={true}
-                size="content"
-                onSelect={(option) => console.log("selected", option)}
-              />
             ) : (
               !item.shareLink && (
                 <IconButton
                   iconName="RemoveIcon"
-                  onClick={onRemoveUserClick.bind(this, item)}
+                  onClick={() => onRemoveUserClick(item)}
                   className="sharing_panel-remove-icon"
                 />
               )
@@ -312,4 +299,4 @@ const SharingRow = (props) => {
   );
 };
 
-export default React.memo(SharingRow);
+export default SharingRow;

products/ASC.Files/Client/src/components/panels/SharingPanel/locales/en/translation.json

@@ -10,6 +10,7 @@
 
   "Notify users": "Notify users",
   "CopyExternalLink": "Copy external link",
+  "CopyInternalLink": "Copy internal link",
   "ShareVia": "Share via",  
   "Embedding": "Embedding",
   "ExternalLink": "External link",

products/ASC.Files/Client/src/components/panels/SharingPanel/locales/ru/translation.json

@@ -10,6 +10,7 @@
 
   "Notify users": "Уведомить пользователей",
   "CopyExternalLink": "Скопировать внешнюю ссылку",
+  "CopyInternalLink": "Скопировать внутреннюю ссылку",
   "ShareVia": "Отправить по",  
   "Embedding": "Встраивание",
   "ExternalLink": "Внешняя ссылка",

products/ASC.Files/Client/src/store/files/actions.js

@@ -322,20 +322,6 @@ export function deleteFolder(folderId, deleteAfter, immediately) {
   }
 }
 
-export function getShareUsersAndGroups(foldersIds, filesIds) {
-  const getFoldersRequests = foldersIds.map(id =>
-    files.getShareFolders(id).catch(() => {
-      return [];
-    })
-  );
-  const getFilesRequests = filesIds.map(id =>
-    files.getShareFiles(id).catch(() => [])
-  );
-  const requests = [...getFoldersRequests, ...getFilesRequests];
-
-  return axios.all(requests).then(res => res);
-}
-
 export function setSharedFolders(folderIds, shareTo, access, notify, sharingMessage) {
   const requests = folderIds.map((id) =>
     files.setShareFolder(id, shareTo, access, notify, sharingMessage)