Ocm frontend (#4754)

* [OCM] modified the icon in 'side nav' * [OCM] share dialog: improved 'Server select', 'user input', 'submit' and etc. * [OCM] share dialog: fixup & improvement for 'delete an item' and etc. * [OCM] 'Shared from other servers' page: fixup & improvement * [OCM] dir view: fixup & improvement
2025-09-02 07:27:04 +00:00 · 2020-12-17 15:17:18 +08:00
parent 6281cd77ac
commit c0e40076d4
12 changed files with 118 additions and 119 deletions
--- a/frontend/src/components/dialog/share-to-other-server.js
+++ b/frontend/src/components/dialog/share-to-other-server.js
@@ -14,7 +14,8 @@ class ShareItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      isOperationShow: false
+      isOperationShow: false,
+      isOpFrozen: false
    };
  }

@@ -27,16 +28,23 @@ class ShareItem extends React.Component {
  }

  deleteShareItem = () => {
+    this.setState({
+      // the 'delete' takes time,
+      // so 'lock' the op icon here to avoid multiple click on it
+      // avoid repeated requests
+      isOpFrozen: true
+    });
    let item = this.props.item;
    this.props.deleteShareItem(item);
  }

  render() {
    let item = this.props.item;
+    const { isOperationShow, isOpFrozen } = this.state;
    return (
      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
        <td><a href={item.to_server_url} target="_blank">{item.to_server_name}</a></td>
-        <td className="name">{item.to_user}</td>
+        <td>{item.to_user}</td>
        <td>{Utils.sharePerms(item.permission)}</td>
        {/* <td>
          <SharePermissionEditor
@@ -49,7 +57,7 @@ class ShareItem extends React.Component {
        </td> */}
        <td>
          <span
-            className={`sf2-icon-x3 action-icon ${this.state.isOperationShow ? '' : 'hide'}`}
+            className={`sf2-icon-x3 action-icon ${isOperationShow && !isOpFrozen ? '' : 'hide'}`}
            onClick={this.deleteShareItem}
            title={gettext('Delete')}
          >
@@ -104,22 +112,14 @@ class ShareToOtherServer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      selectedOption: null,
-      errorMsg: [],
-      permission: 'rw',
-      ocmShares: [],
+      selectedServer: null,
      toUser: '',
-      toServerURL: '',
+      permission: 'rw',
+      btnDisabled: true,
+      isSubmitting: false,
+      ocmShares: []
    };
-    this.options = [];
    this.permissions = ['rw', 'r'];
-    this.UnshareMessage = 'File was unshared';
-
-  }
-
-  handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
-    this.options = [];
  }

  componentDidMount() {
@@ -127,47 +127,67 @@ class ShareToOtherServer extends React.Component {
      this.setState({ocmShares: res.data.ocm_share_list});
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
+      this.setState({
+        errorMsg: errMessage
+      });
    });
  }

-  startOCMShare = () => {
-    let { repoID, itemPath } = this.props;
-    let { toServerURL, toUser, permission } = this.state;
+  OCMShare = () => {
+    const { repoID, itemPath } = this.props;
+    const { selectedServer, toUser, permission } = this.state;
+    let toServerURL = selectedServer.value;
    if (!toServerURL.endsWith('/')) {
      toServerURL += '/';
    }
+    this.setState({
+      btnDisabled: true,
+      isSubmitting: true
+    });
    seafileAPI.addOCMSharePrepare(toUser, toServerURL, repoID, itemPath, permission).then((res) => {
-      toaster.success(gettext('share success.'));
      let ocmShares = this.state.ocmShares;
-      ocmShares.push(res.data);
-      this.setState({ocmShares: ocmShares});
+      ocmShares.unshift(res.data);
+      this.setState({
+        ocmShares: ocmShares,
+        selectedServer: null,
+        toUser: '',
+        permission: 'rw',
+        isSubmitting: false
+      });
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
+      this.setState({
+        btnDisabled: false,
+        isSubmitting: false
+      });
    });
  }

  handleToUserChange = (e) => {
+    const toUser = e.target.value;
    this.setState({
-      toUser: e.target.value,
+      toUser: toUser,
+      btnDisabled: !this.state.selectedServer || !toUser.trim()
    });
  }

-  handleURLChange = (e) => {
+  handleServerChange = (selectedServer) => {
    this.setState({
-      toServerURL: e.value,
+      selectedServer,
+      btnDisabled: !this.state.toUser.trim()
    });
  }

  deleteShareItem = (deletedItem) => {
-    let { id } = deletedItem;
+    const { id } = deletedItem;
+    toaster.notify(gettext('It may take some time, please wait.'));
    seafileAPI.deleteOCMSharePrepare(id).then((res) => {
-      toaster.success(gettext('delete success.'));
      let ocmShares = this.state.ocmShares.filter(item => {
        return item.id != id;
      });
      this.setState({ocmShares: ocmShares});
+      toaster.success(gettext('Successfully deleted 1 item.'));
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
@@ -178,9 +198,12 @@ class ShareToOtherServer extends React.Component {
    this.setState({permission: permission});
  }

-
  render() {
-    let { ocmShares, toUser, toServerURL, permission } = this.state;
+    const {
+      errorMsg, ocmShares,
+      toUser, selectedServer, permission,
+      btnDisabled, isSubmitting
+    } = this.state;
    return (
      <Fragment>
        <table>
@@ -196,8 +219,10 @@ class ShareToOtherServer extends React.Component {
            <tr>
              <td>
                <Select
+                  placeholder={gettext('Select a server...')}
+                  value={selectedServer}
                  options={ocmRemoteServers}
-                  onChange={this.handleURLChange}
+                  onChange={this.handleServerChange}
                />
              </td>
              <td>
@@ -216,15 +241,23 @@ class ShareToOtherServer extends React.Component {
                />
              </td>
              <td>
-                <Button onClick={this.startOCMShare}>{gettext('Submit')}</Button>
+                <Button
+                  onClick={this.OCMShare}
+                  disabled={btnDisabled}
+                  className={isSubmitting ? 'btn-loading' : ''}>
+                  {gettext('Submit')}
+                </Button>
              </td>
            </tr>
          </tbody>
        </table>
-        <ShareList
-          items={ocmShares}
-          deleteShareItem={this.deleteShareItem}
-        />
+        {errorMsg ?
+          <p className="error text-center mt-4">{errorMsg}</p> :
+          <ShareList
+            items={ocmShares}
+            deleteShareItem={this.deleteShareItem}
+          />
+        }
      </Fragment>
    );
  }
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -219,7 +219,7 @@ class MainSideNav extends React.Component {
            {enableOCM &&
              <li className="nav-item">
                <Link to={siteRoot + 'shared-with-ocm/'} className={`nav-link ellipsis ${this.getActiveClass('shared-with-ocm')}`} title={gettext('Shared from other servers')} onClick={(e) => this.tabItemClick(e, 'shared-with-ocm')}>
-                  <span className="sf2-icon-share" aria-hidden="true"></span>
+                  <span className="sf3-font-share-from-other-servers sf3-font" aria-hidden="true"></span>
                  <span className="nav-text">{gettext('Shared from other servers')}</span>
                </Link>
              </li>
--- a/frontend/src/pages/share-with-ocm/remote-dir-view.js
+++ b/frontend/src/pages/share-with-ocm/remote-dir-view.js
@@ -73,25 +73,10 @@ class DirView extends Component {
        window.history.replaceState({url: url, path: path}, path, url);
      });
    }).catch((error) => {
-      if (error.response) {
-        if (error.response.status == 403) {
-          this.setState({
-            loading: false,
-            errorMsg: gettext('Permission denied')
-          });
-          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
-        } else {
-          this.setState({
-            loading: false,
-            errorMsg: gettext('Error')
-          });
-        }
-      } else {
-        this.setState({
-          loading: false,
-          errorMsg: gettext('Please check the network.')
-        });
-      }
+      this.setState({
+        loading: false,
+        errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
+      });
    });
  }

--- a/frontend/src/pages/share-with-ocm/shared-with-ocm.js
+++ b/frontend/src/pages/share-with-ocm/shared-with-ocm.js
@@ -32,8 +32,8 @@ class Content extends Component {
            <tr>
              <th width="4%"></th>
              <th width="20%">{gettext('Name')}</th>
-              <th width="20%">{gettext('Shared from')}</th>
-              <th width="26%">{gettext('At site')}</th>
+              <th width="20%">{gettext('Shared by')}</th>
+              <th width="26%">{gettext('At server')}</th>
              <th width="20%">{gettext('Time')}</th>
              <th width="10%">{/* operations */}</th>
            </tr>
@@ -43,7 +43,7 @@ class Content extends Component {
              return <Item
                key={index}
                item={item}
-                deleteShare={this.props.deleteShare}
+                leaveShare={this.props.leaveShare}
              />;
            })}
          </tbody>
@@ -66,57 +66,46 @@ class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      showOpIcon: false,
-      isOpMenuOpen: false // for mobile
+      isOpIconShown: false
    };
  }

-  toggleOpMenu = () => {
-    this.setState({
-      isOpMenuOpen: !this.state.isOpMenuOpen
-    });
-  }
-
  handleMouseOver = () => {
    this.setState({
-      showOpIcon: true
+      isOpIconShown: true
    });
  }

  handleMouseOut = () => {
    this.setState({
-      showOpIcon: false
+      isOpIconShown: false
    });
  }

-  deleteShare = () => {
-    this.props.deleteShare(this.props.item);
+  leaveShare = (e) => {
+    e.preventDefault();
+    this.props.leaveShare(this.props.item);
  }

  render() {
    const item = this.props.item;
+    const { isOpIconShown } = this.state;

    item.icon_url = Utils.getLibIconUrl(item);
    item.icon_title = Utils.getLibIconTitle(item);
-    item.url = `${siteRoot}#shared-libs/lib/${item.repo_id}/`;

    let shareRepoUrl =`${siteRoot}remote-library/${this.props.item.provider_id}/${this.props.item.repo_id}/${Utils.encodePath(this.props.item.repo_name)}/`;
-    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
-    let deleteIcon = `action-icon sf2-icon-x3 ${iconVisibility ? 'invisible' : ''}`;
    return (
-      <Fragment>
-        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <td><img src={item.icon_url} title={item.icon_title} alt={item.icon_title} width="24" /></td>
-          <td><Link to={shareRepoUrl}>{item.repo_name}</Link></td>
-          <td>{item.from_user}</td>
-          <td>{item.from_server_url}</td>
-          <td title={moment(item.last_modified).format('llll')}>{moment(item.ctime).fromNow()}</td>
-          <td>
-            <a href="#" className={deleteIcon} title={gettext('Remove')} onClick={this.deleteShare}></a>
-          </td>
-        </tr>
-
-      </Fragment>
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><img src={item.icon_url} title={item.icon_title} alt={item.icon_title} width="24" /></td>
+        <td><Link to={shareRepoUrl}>{item.repo_name}</Link></td>
+        <td>{item.from_user}</td>
+        <td>{item.from_server_url}</td>
+        <td title={moment(item.last_modified).format('llll')}>{moment(item.ctime).fromNow()}</td>
+        <td>
+          <a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Leave Share')} onClick={this.leaveShare}></a>
+        </td>
+      </tr>
    );
  }
 }
@@ -131,7 +120,7 @@ class SharedWithOCM extends Component {
    this.state = {
      loading: true,
      errorMsg: '',
-      items: [],
+      items: []
    };
  }

@@ -142,35 +131,21 @@ class SharedWithOCM extends Component {
        items: res.data.ocm_share_received_list
      });
    }).catch((error) => {
-      if (error.response) {
-        if (error.response.status == 403) {
-          this.setState({
-            loading: false,
-            errorMsg: gettext('Permission denied')
-          });
-        } else {
-          this.setState({
-            loading: false,
-            errorMsg: gettext('Error')
-          });
-        }
-      } else {
-        this.setState({
-          loading: false,
-          errorMsg: gettext('Please check the network.')
-        });
-      }
+      this.setState({
+        loading: false,
+        errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
+      });
    });
  }

-  deleteShare = (item) => {
-    let { id } = item;
+  leaveShare = (item) => {
+    const { id, repo_name } = item;
    seafileAPI.deleteOCMShareReceived(id).then((res) => {
-      toaster.success(gettext('delete success.'));
      let items = this.state.items.filter(item => {
        return item.id != id;
      });
      this.setState({items: items});
+      toaster.success(gettext('Successfully unshared {name}').replace('{name}', repo_name));
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
@@ -190,7 +165,7 @@ class SharedWithOCM extends Component {
                loading={this.state.loading}
                errorMsg={this.state.errorMsg}
                items={this.state.items}
-                deleteShare={this.deleteShare}
+                leaveShare={this.leaveShare}
              />
            </div>
          </div>
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -203,7 +203,6 @@ class Item extends Component {

    data.icon_url = Utils.getLibIconUrl(data);
    data.icon_title = Utils.getLibIconTitle(data);
-    data.url = `${siteRoot}#shared-libs/lib/${data.repo_id}/`;

    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
    let shareIconClassName = 'op-icon sf2-icon-share repo-share-btn' + iconVisibility;
--- a/media/css/sf_font3/iconfont.css
+++ b/media/css/sf_font3/iconfont.css
@@ -1,10 +1,10 @@
@font-face {font-family: "sf3-font";
-  src: url('iconfont.eot?t=1593420657805'); /* IE9 */
-  src: url('iconfont.eot?t=1593420657805#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1593420657805') format('woff'),
-  url('iconfont.ttf?t=1593420657805') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1593420657805#sf3-font') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1608001670426'); /* IE9 */
+  src: url('iconfont.eot?t=1608001670426#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1608001670426') format('woff'),
+  url('iconfont.ttf?t=1608001670426') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1608001670426#sf3-font') format('svg'); /* iOS 4.1- */
 }

 .sf3-font {
@@ -15,6 +15,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.sf3-font-share-from-other-servers:before {
+  content: "\e70f";
+}
+
 .sf3-font-tips:before {
  content: "\e6d4";
 }
--- a/media/css/sf_font3/iconfont.eot
+++ b/media/css/sf_font3/iconfont.eot
--- a/media/css/sf_font3/iconfont.js
+++ b/media/css/sf_font3/iconfont.js
--- a/media/css/sf_font3/iconfont.svg
+++ b/media/css/sf_font3/iconfont.svg
@@ -20,6 +20,9 @@ Created by iconfont
  />
    <missing-glyph />
    
+    <glyph glyph-name="share-from-other-servers" unicode="&#59151;" d="M849.28 770.496c0 33.12-29.12 60.928-62.464 60.928H94.56c-33.376 0-60.928-27.52-60.928-60.928v-186.432h815.68V770.496zM352.512 671.456H148.576V744.032h203.904v-72.576z m179.552 17.472a36.192 36.192 0 0 0-1.6 36.576c5.856 11.648 19.104 19.04 32.32 19.04 19.072 0 34.976-15.872 36.544-34.944 1.088-20.672-13.76-37.088-33.888-38.144-13.248 0-25.92 5.824-33.376 17.472z m149.92-17.472a37.664 37.664 0 0 0-37.632 34.976c0 20.128 15.904 36.544 34.976 37.6 20.128 0 36.544-15.904 37.6-34.976 0-20.128-15.904-37.6-34.944-37.6zM352.48 78.78399999999999v-33.92H148.576v73.12h185.376a340.928 340.928 0 0 0-21.728 87.36H32.064v-203.904c0-24.896 19.04-43.424 43.424-43.424h390.336a339.84 339.84 0 0 0-113.344 120.768z m-203.904 271.68v73.12h203.904v-19.072a342.944 342.944 0 0 0 92.16 106.464H32.064v-247.872h279.104c2.144 30.72 7.968 59.84 17.504 87.36H148.576zM668.16 552.3199999999999c-170.56 0-309.312-138.784-309.312-309.344s138.784-309.312 309.312-309.312c170.56 0 309.312 138.752 309.312 309.312s-138.24 309.312-309.312 309.312z m64.768-101.056c33.92 0 60.064-27.104 60.064-60.704 0-33.568-27.424-60.672-61.344-60.672s-60.064 28.416-60.064 60.672c0 33.6 27.424 60.704 61.344 60.704z m-170.72-155.328l113.696 72.064c4.512-11.104 10.336-18.944 20.8-27.136l-114.88-75.2a57.408 57.408 0 0 1-19.616 30.272z m-99.84-46.912c0 33.6 27.104 60.672 60.672 60.672s60.672-27.104 60.672-60.672c0-33.6-27.104-60.704-60.672-60.704a60.608 60.608 0 0 0-60.704 60.704z m108.096-38.528c6.976 9.12 11.264 17.6 13.216 30.176l136.576-72.48c-6.976-9.088-12.544-16.704-15.168-30.848l-134.624 73.152z m195.328-22.176c33.6 0 60.704-27.104 60.704-60.672 0-33.6-28.416-60.704-61.984-60.704-33.6 0-59.424 27.136-59.424 60.704s27.136 60.672 60.704 60.672z"  horiz-adv-x="1024" />
+
+    
    <glyph glyph-name="tips" unicode="&#59092;" d="M512-96C249.6-96 32 118.4 32 384S249.6 864 512 864s480-214.4 480-480-214.4-480-480-480zM480 659.2c-19.2 0-35.2-16-35.2-35.2v-275.2c0-19.2 16-35.2 35.2-35.2h67.2c19.2 0 35.2 16 35.2 35.2V624c0 19.2-16 35.2-35.2 35.2H480z m0-412.8c-19.2 0-35.2-16-35.2-35.2v-67.2c0-19.2 16-35.2 35.2-35.2h67.2c19.2 0 35.2 16 35.2 35.2v67.2c0 19.2-16 35.2-35.2 35.2H480z"  horiz-adv-x="1024" />

    
@@ -38,7 +41,7 @@ Created by iconfont
    <glyph glyph-name="narrow" unicode="&#59056;" d="M64 448h896v-128H64z"  horiz-adv-x="1024" />

    
-    <glyph glyph-name="page-size" unicode="&#59054;" d="M960 320v-384H576v128h256v256h128zM192 320v-256h256v-128H64V320h128zM960 832v-384h-128V704h-256V832h384zM64 832h384v-128H192v-256H64V832z"  horiz-adv-x="1024" />
+    <glyph glyph-name="page-size" unicode="&#59054;" d="M960 256v-320H640v128h192v192h128zM192 256v-192h192v-128H64V256h128zM960 832v-320h-128V704h-192V832h320zM64 832h320v-128H192v-192H64V832z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="arrow" unicode="&#58997;" d="M636.8-41.6l364.8 368c22.4 22.4 28.8 54.4 16 80 0 3.2-3.2 3.2-3.2 6.4-3.2 9.6-9.6 12.8-12.8 19.2L640 809.6c-28.8 32-73.6 32-102.4 3.2-32-28.8-32-76.8-6.4-108.8l3.2-3.2 233.6-243.2H73.6C32 457.6 0 425.6 0 384s28.8-76.8 70.4-76.8h704L531.2 64c-28.8-28.8-28.8-76.8-3.2-105.6 28.8-28.8 76.8-32 108.8 0-3.2 0 0 0 0 0z"  horiz-adv-x="1024" />
--- a/media/css/sf_font3/iconfont.ttf
+++ b/media/css/sf_font3/iconfont.ttf
--- a/media/css/sf_font3/iconfont.woff
+++ b/media/css/sf_font3/iconfont.woff
--- a/media/css/sf_font3/iconfont.woff2
+++ b/media/css/sf_font3/iconfont.woff2