[Share Admin] Share Links: added 'select links and delete them in batch'

frontend/src/pages/share-admin/share-links.js

@@ -24,6 +24,8 @@ const contentPropTypes = {
   isLoadingMore: PropTypes.bool.isRequired,
   errorMsg: PropTypes.string.isRequired,
   items: PropTypes.array.isRequired,
+  toggleSelectAllLinks: PropTypes.func.isRequired,
+  toggleSelectLink: PropTypes.func.isRequired,
   onRemoveLink: PropTypes.func.isRequired
 };
 
@@ -40,6 +42,10 @@ class Content extends Component {
     this.setState({ isItemFreezed: isFreezed });
   };
 
+  toggleSelectAllLinks = (e) => {
+    this.props.toggleSelectAllLinks(e.target.checked);
+  };
+
   render() {
     const { loading, errorMsg, items } = this.props;
 
@@ -58,6 +64,9 @@ class Content extends Component {
       );
     }
 
+    const selectedItems = items.filter(item => item.isSelected);
+    const isAllLinksSelected = selectedItems.length == items.length;
+
     const isDesktop = Utils.isDesktop();
     // only for some columns
     const columnWidths = isPro ? [0.14, 0.07, 0.14] : [0.21, 0.14, 0.2];
@@ -67,6 +76,7 @@ class Content extends Component {
         <FixedWidthTable
           className={classnames('', { 'table-thead-hidden': !isDesktop })}
           headers={isDesktop ? [
+            { isFixed: true, width: 30, className: 'text-center', children: (<input type="checkbox" checked={isAllLinksSelected} className="vam" onChange={this.toggleSelectAllLinks} />) }, // checkbox
             { isFixed: true, width: 40 }, // icon
             { isFixed: false, width: 0.35, children: gettext('Name') },
             { isFixed: false, width: columnWidths[0], children: gettext('Library') },
@@ -88,6 +98,7 @@ class Content extends Component {
               onRemoveLink={this.props.onRemoveLink}
               isItemFreezed={this.state.isItemFreezed}
               toggleItemFreezed={this.toggleItemFreezed}
+              toggleSelectLink={this.props.toggleSelectLink}
             />);
           })}
         </FixedWidthTable>
@@ -104,7 +115,8 @@ const itemPropTypes = {
   isDesktop: PropTypes.bool.isRequired,
   onRemoveLink: PropTypes.func.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
-  toggleItemFreezed: PropTypes.func.isRequired
+  toggleItemFreezed: PropTypes.func.isRequired,
+  toggleSelectLink: PropTypes.func.isRequired
 };
 
 class Item extends Component {
@@ -210,8 +222,18 @@ class Item extends Component {
     });
   };
 
+  onCheckboxClicked = (e) => {
+    e.stopPropagation();
+  };
+
+  toggleSelectLink = (e) => {
+    const { item } = this.props;
+    this.props.toggleSelectLink(item, e.target.checked);
+  };
+
   render() {
-    const item = this.props.item;
+    const { item } = this.props;
+    const { isSelected = false } = item;
     const { currentPermission, permissionOptions, isOpIconShown, isPermSelectDialogOpen, isLinkDialogOpen } = this.state;
     this.permOptions = permissionOptions.map(item => {
       return {
@@ -222,7 +244,8 @@ class Item extends Component {
     });
     const currentSelectedPermOption = this.permOptions.filter(item => item.isSelected)[0] || {};
 
-    let iconUrl; let objUrl;
+    let iconUrl;
+    let objUrl;
     if (item.is_dir) {
       let path = item.path === '/' ? '/' : item.path.slice(0, item.path.length - 1);
       iconUrl = Utils.getFolderIconUrl(false);
@@ -241,6 +264,15 @@ class Item extends Component {
             onMouseLeave={this.handleMouseLeave}
             onFocus={this.handleMouseEnter}
           >
+            <td className="text-center">
+              <input
+                type="checkbox"
+                checked={isSelected}
+                className="vam"
+                onClick={this.onCheckboxClicked}
+                onChange={this.toggleSelectLink}
+              />
+            </td>
             <td className="pl-2 pr-2"><img src={iconUrl} width="24" alt="" /></td>
             <td>
               {item.is_dir ?
@@ -345,13 +377,14 @@ class ShareAdminShareLinks extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isCleanInvalidShareLinksDialogOpen: false,
       loading: true,
       hasMore: false,
       isLoadingMore: false,
       page: 1,
       errorMsg: '',
       items: [],
+      isCleanInvalidShareLinksDialogOpen: false,
+      isDeleteShareLinksDialogOpen: false
     };
   }
 
@@ -441,7 +474,70 @@ class ShareAdminShareLinks extends Component {
     });
   };
 
+  toggleDeleteShareLinksDialog = () => {
+    this.setState({ isDeleteShareLinksDialogOpen: !this.state.isDeleteShareLinksDialogOpen });
+  };
+
+  cancelSelectAllLinks = () => {
+    this.toggleSelectAllLinks(false);
+  };
+
+  toggleSelectAllLinks = (isSelected) => {
+    const { items: links } = this.state;
+    this.setState({
+      items: links.map(item => {
+        item.isSelected = isSelected;
+        return item;
+      })
+    });
+  };
+
+  toggleSelectLink = (link, isSelected) => {
+    const { items: links } = this.state;
+    this.setState({
+      items: links.map(item => {
+        if (item.token == link.token) {
+          item.isSelected = isSelected;
+        }
+        return item;
+      })
+    });
+  };
+
+  deleteShareLinks = () => {
+    const { items: shareLinks } = this.state;
+    const tokens = shareLinks.filter(item => item.isSelected).map(link => link.token);
+    seafileAPI.deleteShareLinks(tokens).then(res => {
+      const { success, failed } = res.data;
+      if (success.length) {
+        let newShareLinkList = shareLinks.filter(shareLink => {
+          return !success.some(deletedShareLink => {
+            return deletedShareLink.token == shareLink.token;
+          });
+        });
+        this.setState({
+          items: newShareLinkList
+        });
+        const length = success.length;
+        const msg = length == 1 ?
+          gettext('Successfully deleted 1 share link') :
+          gettext('Successfully deleted {number_placeholder} share links')
+            .replace('{number_placeholder}', length);
+        toaster.success(msg);
+      }
+      failed.forEach(item => {
+        const msg = `${item.token}: ${item.error_msg}`;
+        toaster.danger(msg);
+      });
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   render() {
+    const { items } = this.state;
+    const selectedLinks = items.filter(item => item.isSelected);
     return (
       <Fragment>
         <div className="main-panel-center">
@@ -460,6 +556,13 @@ class ShareAdminShareLinks extends Component {
                   <li className="nav-item"><Link to={`${siteRoot}share-admin-upload-links/`} className="nav-link">{gettext('Upload Links')}</Link></li>
                 )}
               </ul>
+
+              {selectedLinks.length > 0 &&
+              <div className="d-flex">
+                <button className="btn btn-sm btn-secondary mr-2" onClick={this.cancelSelectAllLinks}>{gettext('Cancel')}</button>
+                <button className="btn btn-sm btn-secondary" onClick={this.toggleDeleteShareLinksDialog}>{gettext('Delete')}</button>
+              </div>
+              }
             </div>
             <div className="cur-view-content" onScroll={this.handleScroll}>
               <Content
@@ -468,6 +571,8 @@ class ShareAdminShareLinks extends Component {
                 errorMsg={this.state.errorMsg}
                 items={this.state.items}
                 onRemoveLink={this.onRemoveLink}
+                toggleSelectAllLinks={this.toggleSelectAllLinks}
+                toggleSelectLink={this.toggleSelectLink}
               />
             </div>
           </div>
@@ -481,6 +586,15 @@ class ShareAdminShareLinks extends Component {
             toggleDialog={this.toggleCleanInvalidShareLinksDialog}
           />
         }
+        {this.state.isDeleteShareLinksDialogOpen && (
+          <CommonOperationConfirmationDialog
+            title={gettext('Delete share links')}
+            message={gettext('Are you sure you want to delete the selected share link(s) ?')}
+            executeOperation={this.deleteShareLinks}
+            confirmBtnText={gettext('Delete')}
+            toggleDialog={this.toggleDeleteShareLinksDialog}
+          />
+        )}
       </Fragment>
     );
   }