Draft dashboard optimized (#2384)

* create a common toolbar component * optimized code * combine side-panel * add change state
2025-09-05 08:53:14 +00:00 · 2018-09-19 21:19:11 -05:00
parent 7a17e908b0
commit ba583d6efd
22 changed files with 278 additions and 211 deletions
--- a/frontend/src/components/common/account.js
+++ b/frontend/src/components/common/account.js
@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { keyCodes, bytesToSize } from '../utils';
+import editorUtilities from '../../utils/editor-utilties';
+
+import { siteRoot, gettext } from '../constants';
+
+class Account extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showInfo: false,
+      userName: '',
+      contactEmail: '',
+      quotaUsage: '',
+      quotaTotal: '',
+      isStaff: false,
+      usageRate: '',
+      avatarURL: '',
+    }
+  }
+
+  componentDidMount(){
+    this.getAccountInfo();
+  }
+
+  componentDidUpdate(prevProps) {
+    this.handleProps();
+  }
+
+  getContainer = () => {
+    return ReactDOM.findDOMNode(this);
+  }
+
+  handleProps = () => {
+    if (this.state.showInfo) {
+      this.addEvents();
+    } else {
+      this.removeEvents();
+    }
+  }
+
+  addEvents = () => {
+    ['click', 'touchstart', 'keyup'].forEach(event =>
+      document.addEventListener(event, this.handleDocumentClick, true)
+    );
+  }
+
+  removeEvents = () => {
+    ['click', 'touchstart', 'keyup'].forEach(event =>
+      document.removeEventListener(event, this.handleDocumentClick, true)
+    );
+  }
+
+  handleDocumentClick = (e) => {
+    if (e && (e.which === 3 || (e.type === 'keyup' && e.which !== keyCodes.tab))) return;
+    const container = this.getContainer();
+
+    if (container.contains(e.target) && container !== e.target && (e.type !== 'keyup' || e.which === keyCodes.tab)) {
+      return;
+    }
+
+    this.setState({
+      showInfo: !this.state.showInfo,
+    })
+  }
+
+  onClickAccount = () => {
+     this.setState({
+       showInfo: !this.state.showInfo,
+     })
+  }
+
+  getAccountInfo = () => {
+    editorUtilities.getAccountInfo().then(resp => {
+        this.setState({
+          userName: resp.data.name,
+          contactEmail: resp.data.email,
+          usageRate: resp.data.space_usage,
+          quotaUsage: bytesToSize(resp.data.usage),
+          quotaTotal: bytesToSize(resp.data.total),
+          isStaff: resp.data.is_staff,
+          avatarURL: resp.data.avatar_url
+        })
+      })
+  }
+
+  renderMenu = () => {
+    if(this.state.isStaff){
+      return (
+        <a href={siteRoot + 'sys/useradmin/'} title={gettext("System Admin")} className="item">{gettext("System Admin")}</a>
+      )
+    }
+  }
+
+  renderAvatar = () => {
+    if (this.state.avatarURL) {
+      return (
+        <img src={this.state.avatarURL} width="36" height="36" className="avatar" />
+      )
+    }
+    return (
+      <img src="" width="36" height="36" className="avatar" />
+    )
+  }
+
+  render() {
+    return (
+      <div id="account">
+        <a id="my-info" onClick={this.onClickAccount} className="account-toggle no-deco d-none d-md-block" aria-label="View profile and more">
+         <span>
+          <img src={this.state.avatarURL} width="36" height="36" className="avatar" />
+         </span> <span className="fas fa-caret-down vam"></span>
+        </a>
+        <span className="account-toggle sf2-icon-more mobile-icon d-md-none" aria-label="View profile and more" onClick={this.onClickAccount}></span>
+        <div id="user-info-popup" className={`account-popup sf-popover ${this.state.showInfo? '':'hide'}`}>
+         <div className="outer-caret up-outer-caret"><div className="inner-caret"></div></div>
+         <div className="sf-popover-con">
+           <div className="item o-hidden">
+             {this.renderAvatar()}
+             <div className="txt">
+              {this.state.userName}
+             </div>
+           </div>
+           <div id="space-traffic">
+             <div className="item">
+               <p>{gettext("Used")}: {this.state.quotaUsage} / {this.state.quotaTotal}</p>
+               <div id="quota-bar">
+                <span id="quota-usage" className="usage" style={{width: this.state.usageRate}}></span>
+               </div>
+             </div>
+           </div>
+           <a href={siteRoot + 'profile/'} className="item">{gettext("Settings")}</a>
+           {this.renderMenu()}
+           <a href={siteRoot + 'accounts/logout/'} className="item">{gettext("Log out")}</a>
+         </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Account;