Folder shared out (#5601)

* show if folder has been shared out

* [dir view] use special folder icon to identify folders which are shared out

* [dir view] improvement: in a library, make only one request to get the data of folders shared out

---------

Co-authored-by: llj <lingjun.li1@gmail.com>

frontend/src/models/dirent.js

@@ -16,6 +16,9 @@ class Dirent {
     this.permission = json.permission || 'rw';
     this.isSelected = false; // is check or not
     this.starred = json.starred || false;
+    if (json.type === 'dir') {
+      this.has_been_shared_out = false;
+    }
     if (json.type === 'file') {
       this.size_original = json.size;
       this.size = Utils.bytesToSize(json.size);

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -492,6 +492,22 @@ class LibContentView extends React.Component {
       if (!this.state.repoEncrypted && direntList.length) {
         this.getThumbnails(repoID, path, this.state.direntList);
       }
+
+      if (this.state.currentRepoInfo.is_admin) {
+        if (this.foldersSharedOut) {
+          this.identifyFoldersSharedOut();
+        } else {
+          this.foldersSharedOut = [];
+          seafileAPI.getAllRepoFolderShareInfo(repoID).then(res => {
+            res.data.share_info_list.forEach(item => {
+              if (this.foldersSharedOut.indexOf(item.path) === -1) {
+                this.foldersSharedOut.push(item.path);
+              }
+            });
+            this.identifyFoldersSharedOut();
+          });
+        }
+      }
     }).catch((err) => {
       Utils.getErrorMsg(err, true);
       if (err.response && err.response.status === 403) {
@@ -505,6 +521,21 @@ class LibContentView extends React.Component {
     });
   };
 
+  identifyFoldersSharedOut = () => {
+    const { path, direntList } = this.state;
+    if (this.foldersSharedOut.length == 0) {
+      return;
+    }
+    direntList.forEach(dirent => {
+      if (dirent.type == 'dir' && this.foldersSharedOut.indexOf(Utils.joinPath(path, dirent.name) + '/') !== -1) {
+        dirent.has_been_shared_out = true;
+      }
+    });
+    this.setState({
+      direntList: direntList
+    });
+  };
+
   onListContainerScroll = () => {
     let itemsShowLength = this.state.itemsShowLength + 100;
     this.setState({itemsShowLength: itemsShowLength});

frontend/src/utils/utils.js

@@ -373,7 +373,7 @@ export const Utils = {
       if (dirent.permission && (dirent.permission === 'r' || dirent.permission === 'preview')) {
         readonly = true;
       }
-      return this.getFolderIconUrl(readonly, size);
+      return this.getFolderIconUrl(readonly, size, dirent.has_been_shared_out);
     } else {
       return this.getFileIconUrl(dirent.name, size);
     }
@@ -389,12 +389,12 @@ export const Utils = {
     }
   },
 
-  getFolderIconUrl: function(readonly = false, size) {
+  getFolderIconUrl: function(readonly = false, size, sharedOut) {
     if (!size) {
       size = Utils.isHiDPI() ? 48 : 24;
     }
     size = size > 24 ? 192 : 24;
-    return `${mediaUrl}img/folder${readonly ? '-read-only-' : '-'}${size}.png`;
+    return `${mediaUrl}img/folder${readonly ? '-read-only' : ''}${sharedOut ? '-shared-out' : ''}-${size}.png`;
   },
 
   getFileIconUrl: function(filename, size) {