[department] folder permission

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -5,8 +5,9 @@ import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap
 import { Link } from '@reach/router';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff } from '../../utils/constants';
-import ModalPotal from '../../components/modal-portal';
+import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
+import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
 import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 
@@ -33,6 +34,7 @@ class SharedRepoListItem extends React.Component {
       isShowSharedDialog: false,
       isRenaming: false,
       isStarred: this.props.repo.starred,
+      isFolderPermissionDialogOpen: false
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -108,7 +110,7 @@ class SharedRepoListItem extends React.Component {
         this.onItemRenameToggle();
         break;
       case 'Folder Permission':
-        this.onItemPermisionChanged();
+        this.onItemFolderPermissionToggle();
         break;
       case 'Details':
         this.onItemDetails();
@@ -142,8 +144,8 @@ class SharedRepoListItem extends React.Component {
     this.setState({isRenaming: !this.state.isRenaming});
   }
 
-  onItemPermisionChanged = () => {
-    // todo
+  onItemFolderPermissionToggle = () => {
+    this.setState({isFolderPermissionDialogOpen: !this.state.isFolderPermissionDialogOpen});
   }
 
   onItemDetails = () => {
@@ -333,7 +335,7 @@ class SharedRepoListItem extends React.Component {
     } else {
       seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
-      })
+      });
     }
   }
 
@@ -363,7 +365,7 @@ class SharedRepoListItem extends React.Component {
           <td title={repo.owner_contact_email}>{repo.owner_name}</td>
         </tr>
         {this.state.isShowSharedDialog && (
-          <ModalPotal>
+          <ModalPortal>
             <ShareDialog 
               itemType={'library'}
               itemName={repo.repo_name}
@@ -376,7 +378,17 @@ class SharedRepoListItem extends React.Component {
               isGroupOwnedRepo={isGroupOwnedRepo}
               toggleDialog={this.toggleShareDialog}
             />
-          </ModalPotal>
+          </ModalPortal>
+        )}
+        {this.state.isFolderPermissionDialogOpen && (
+          <ModalPortal>
+            <LibSubFolderPermissionDialog
+              toggleDialog={this.onItemFolderPermissionToggle}
+              repoID={repo.repo_id}
+              repoName={repo.repo_name}
+              isDepartmentRepo={true}
+            />
+          </ModalPortal>
         )}
       </Fragment>
     );
@@ -403,7 +415,7 @@ class SharedRepoListItem extends React.Component {
           <td>{this.generatorMobileMenu()}</td>
         </tr>
         {this.state.isShowSharedDialog && (
-          <ModalPotal>
+          <ModalPortal>
             <ShareDialog 
               itemType={'library'}
               itemName={repo.repo_name}
@@ -416,7 +428,7 @@ class SharedRepoListItem extends React.Component {
               isGroupOwnedRepo={isGroupOwnedRepo}
               toggleDialog={this.toggleShareDialog}
             />
-          </ModalPotal>
+          </ModalPortal>
         )}
       </Fragment>
     );