[share dialog] 'share link' panel: added 'export selected links' (#5427)

frontend/src/components/share-link-panel/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { isPro, gettext, shareLinkExpireDaysMin, shareLinkExpireDaysMax, shareLinkExpireDaysDefault } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -6,10 +6,9 @@ import { Utils } from '../../utils/utils';
 import ShareLink from '../../models/share-link';
 import toaster from '../toast';
 import Loading from '../loading';
-import EmptyTip from '../empty-tip';
 import LinkDetails from './link-details';
-import LinkItem from './link-item';
 import LinkCreation from './link-creation';
+import LinkList from './link-list';
 
 const propTypes = {
   itemPath: PropTypes.string.isRequired,
@@ -132,6 +131,28 @@ class ShareLinkPanel extends React.Component {
     this.setState({ mode: mode });
   }
 
+  toggleSelectAllLinks = (isSelected) => {
+    const { shareLinks: links } = this.state;
+    this.setState({
+      shareLinks: links.map(item => {
+        item.isSelected = isSelected;
+        return item;
+      })
+    });
+  }
+
+  toggleSelectLink = (link, isSelected) => {
+    const { shareLinks: links } = this.state;
+    this.setState({
+      shareLinks: links.map(item => {
+        if (item.token == link.token) {
+          item.isSelected = isSelected;
+        }
+        return item;
+      })
+    });
+  }
+
   render() {
     if (this.state.isLoading) {
       return <Loading />;
@@ -181,46 +202,15 @@ class ShareLinkPanel extends React.Component {
         );
       default:
         return (
-          <Fragment>
+          <LinkList
-            <div className="d-flex justify-content-between align-items-center pb-2 border-bottom">
+            shareLinks={shareLinks}
-              <h6 className="font-weight-normal m-0">{gettext('Share Link')}</h6>
-              <div>
-                <button className="btn btn-sm btn-outline-primary mr-2" onClick={this.setMode.bind(this, 'singleLinkCreation')}>{gettext('Generate Link')}</button>
-                <button className="btn btn-sm btn-outline-primary" onClick={this.setMode.bind(this, 'linksCreation')}>{gettext('Generate links in batch')}</button>
-              </div>
-            </div>
-            {shareLinks.length == 0 ? (
-              <EmptyTip forDialog={true}>
-                <p className="text-secondary">{gettext('No share links')}</p>
-              </EmptyTip>
-            ) : (
-              <table className="table-hover">
-                <thead>
-                  <tr>
-                    <th width="28%">{gettext('Link')}</th>
-                    <th width="30%">{gettext('Permission')}</th>
-                    <th width="28%">{gettext('Expiration')}</th>
-                    <th width="14%"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {
-                    shareLinks.map((item, index) => {
-                      return (
-                        <LinkItem
-                          key={index}
-                          item={item}
             permissionOptions={permissionOptions}
+            setMode={this.setMode}
             showLinkDetails={this.showLinkDetails}
+            toggleSelectAllLinks={this.toggleSelectAllLinks}
+            toggleSelectLink={this.toggleSelectLink}
           />
         );
-                    })
-                  }
-                </tbody>
-              </table>
-            )}
-          </Fragment>
-        );
     }
   }
 }

frontend/src/components/share-link-panel/link-item.js

@@ -10,7 +10,8 @@ import { Utils } from '../../utils/utils';
 const propTypes = {
   item: PropTypes.object.isRequired,
   permissionOptions: PropTypes.array,
-  showLinkDetails : PropTypes.func.isRequired
+  showLinkDetails : PropTypes.func.isRequired,
+  toggleSelectLink: PropTypes.func.isRequired
 };
 
 class LinkItem extends React.Component {
@@ -51,13 +52,21 @@ class LinkItem extends React.Component {
     this.props.showLinkDetails(this.props.item);
   }
 
+  toggleSelectLink = (e) => {
+    const { item } = this.props;
+    this.props.toggleSelectLink(item, e.target.checked);
+  }
+
   render() {
     const { isItemOpVisible } = this.state;
     const { item, permissionOptions } = this.props;
-    const { permissions, link, expire_date } = item;
+    const { isSelected = false, permissions, link, expire_date } = item;
     const currentPermission = Utils.getShareLinkPermissionStr(permissions);
     return (
-      <tr onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+      <tr onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={isSelected ? 'tr-highlight' : ''}>
+        <td className="text-center">
+          <input type="checkbox" checked={isSelected} onChange={this.toggleSelectLink} className="vam" />
+        </td>
         <td>{this.cutLink(link)}</td>
         <td>
           {(isPro && permissions) && (

frontend/src/components/share-link-panel/link-list.js

@@ -0,0 +1,96 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext, siteRoot } from '../../utils/constants';
+import EmptyTip from '../empty-tip';
+import LinkItem from './link-item';
+
+const propTypes = {
+  shareLinks: PropTypes.array.isRequired,
+  permissionOptions: PropTypes.array.isRequired,
+  setMode: PropTypes.func.isRequired,
+  showLinkDetails: PropTypes.func.isRequired,
+  toggleSelectAllLinks: PropTypes.func.isRequired,
+  toggleSelectLink: PropTypes.func.isRequired
+};
+
+class LinkList extends React.Component {
+
+  toggleSelectAllLinks = (e) => {
+    this.props.toggleSelectAllLinks(e.target.checked);
+  }
+
+  cancelSelectAllLinks = () => {
+    this.props.toggleSelectAllLinks(false);
+  }
+
+  exportSelectedLinks = () => {
+    const { shareLinks } = this.props;
+    const selectedLinks = shareLinks.filter(item => item.isSelected);
+    let url = `${siteRoot}share/link/export-excel/?`;
+    url += selectedLinks.map(item => `token=${item.token}`).join('&');
+    location.href = url;
+  }
+
+  render() {
+    const { shareLinks, permissionOptions } = this.props;
+    const selectedLinks = shareLinks.filter(item => item.isSelected);
+    const isAllLinksSelected = shareLinks.length == selectedLinks.length;
+
+    return (
+      <Fragment>
+        <div className="d-flex justify-content-between align-items-center pb-2 border-bottom">
+          <h6 className="font-weight-normal m-0">{gettext('Share Link')}</h6>
+          <div>
+            {selectedLinks.length == 0 ? (
+              <>
+                <button className="btn btn-sm btn-outline-primary mr-2" onClick={this.props.setMode.bind(this, 'singleLinkCreation')}>{gettext('Generate Link')}</button>
+                <button className="btn btn-sm btn-outline-primary" onClick={this.props.setMode.bind(this, 'linksCreation')}>{gettext('Generate links in batch')}</button>
+              </>
+            ) : (
+              <>
+                <button className="btn btn-sm btn-secondary mr-2" onClick={this.cancelSelectAllLinks}>{gettext('Cancel')}</button>
+                <button className="btn btn-sm btn-primary" onClick={this.exportSelectedLinks}>{gettext('Export')}</button>
+              </>
+            )}
+          </div>
+        </div>
+        {shareLinks.length == 0 ? (
+          <EmptyTip forDialog={true}>
+            <p className="text-secondary">{gettext('No share links')}</p>
+          </EmptyTip>
+        ) : (
+          <table className="table-hover">
+            <thead>
+              <tr>
+                <th width="5%" className="text-center">
+                  <input type="checkbox" checked={isAllLinksSelected} className="vam" onChange={this.toggleSelectAllLinks} />
+                </th>
+                <th width="23%">{gettext('Link')}</th>
+                <th width="30%">{gettext('Permission')}</th>
+                <th width="28%">{gettext('Expiration')}</th>
+                <th width="14%"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {shareLinks.map((item, index) => {
+                return (
+                  <LinkItem
+                    key={index}
+                    item={item}
+                    permissionOptions={permissionOptions}
+                    showLinkDetails={this.props.showLinkDetails}
+                    toggleSelectLink={this.props.toggleSelectLink}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+LinkList.propTypes = propTypes;
+
+export default LinkList;