rewrite repo-list-view

frontend/package-lock.json

@@ -9964,7 +9964,7 @@
     },
     "react-popper": {
       "version": "0.8.3",
-      "resolved": "http://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
       "integrity": "sha1-D3MzMTfJ+wr27EB00tBYWgoEYeE=",
       "requires": {
         "popper.js": "^1.12.9",
@@ -10793,9 +10793,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.41",
+      "version": "0.2.42",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.41.tgz",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.42.tgz",
-      "integrity": "sha512-yDNdzALYn5rMt6TeZwWbbZvmFWyS4xhFoEJQIZImGSHXiNHykcEuLkKA2YbUS1z6AwsDPWGJrU0UvzpmQUpX2Q==",
+      "integrity": "sha512-qbia7tcIRRtI16ks42ocJHd2i1z7QkfsvqGawATKtrnvij2kXNRnTnZqwbHpSjv1H1yctots+NN9F1JRziHDkQ==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",

frontend/package.json

@@ -28,7 +28,7 @@
     "react-moment": "^0.7.9",
     "react-select": "^2.1.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.41",
+    "seafile-js": "^0.2.42",
     "seafile-ui": "^0.1.10",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",

frontend/src/components/cur-group-path/group-path.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {gettext, siteRoot} from '../../utils/constants';
+
+const propTypes = {
+  currentGroup: PropTypes.object.isRequired
+};
+
+class GroupPath extends React.Component {
+
+  render() {
+    let currentGroup = this.props.currentGroup;
+    return (
+      <div className="path-container">
+        <a href={`${siteRoot}groups/`}>{gettext("Groups")}</a>
+        <span className="path-split">/</span>
+        <span>{currentGroup.name}</span>
+        {currentGroup.parent_group_id !== 0 && (
+          <span className="address-book-group-icon icon-building" title={gettext("This is a special group representing a department.")}></span>
+        )}
+      </div>
+    );
+  }
+}
+
+GroupPath.propTypes = propTypes;
+
+export default GroupPath;

frontend/src/components/cur-group-path/group-tool.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, username } from '../../utils/constants';
+
+const propTypes = {
+  currentGroup: PropTypes.object.isRequired,
+};
+
+class GroupTool extends React.Component {
+
+  render() {
+    let currentGroup = this.props.currentGroup;
+    let isShowSettingIcon = !(currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
+    return (
+      <div className="path-tool">
+        {isShowSettingIcon && (
+          <a href="#" className="sf2-icon-cog1 op-icon group-top-op-icon" title={gettext("Settings")} id="group-settings-icon" aria-label={gettext("Settings")}></a>
+        )}
+        <a href="#" className="sf2-icon-user2 op-icon group-top-op-icon" title={gettext("Members")} id="group-members-icon" aria-label={gettext("Members")}></a>
+      </div>
+    );
+  }
+}
+
+GroupTool.propTypes = propTypes;
+
+export default GroupTool;

frontend/src/components/cur-group-path/index.js

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import GroupPath from './group-path';
+import GroupTool from './group-tool';
+
+const propTypes = {
+  currentGroup: PropTypes.object.isRequired,
+};
+
+class CurGroupPath extends React.Component {
+
+  render() {
+    return (
+      <Fragment>
+        <GroupPath currentGroup={this.props.currentGroup}/>
+        <GroupTool currentGroup={this.props.currentGroup}/>
+      </Fragment>
+    );
+  }
+}
+
+CurGroupPath.propTypes = propTypes;
+
+export default CurGroupPath;

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Utils } from '../../utils/utils';
+import { siteRoot, } from '../../utils/constants';
+
+const propTypes = {
+  repo: PropTypes.object.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
+  isShowRepoOwner: PropTypes.bool.isRequired,
+  isStuff: PropTypes.bool.isRequired,
+};
+
+class RepoListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      highlight: false,
+      isOperationShow: false,
+      isItemMenuShow: false,
+    };
+  }
+
+  onMouseEnter = () => {
+    this.setState({highlight: true});
+  }
+  
+  onMouseLeave = () => {
+    this.setState({highlight: false});
+  }
+
+  getRepoComputeParams = () => {
+    let repo = this.props.repo;
+    let currentGroup = this.props.currentGroup; //todo--change to libray
+    let isReadyOnly = false;
+    if ( repo.permission === 'r' || repo.permission === 'preview') {
+      isReadyOnly = true;
+    }
+    let iconUrl = Utils.getLibIconUrl({
+      is_encryted: repo.encrypted, 
+      is_readyonly: isReadyOnly,
+      size: Utils.isHiDPI() ? 48 : 24
+    });
+    let iconTitle = Utils.getLibIconTitle({
+      'encrypted': repo.encrypted,
+      'is_admin': repo.is_admin,
+      'permission': repo.permission
+    });
+
+    //todo change to library; div-view is not compatibility
+    let libPath = `${siteRoot}#group/${currentGroup.id}/lib/${this.props.repo.repo_id}/`;
+
+    return { iconUrl, iconTitle, libPath };
+  }
+
+  generatorMenu = () => {
+    //todo
+  }
+
+  renderPCUI = () => {
+    let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
+    let { repo, isShowRepoOwner } = this.props;
+    return (
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
+        <td><a href={libPath}>{repo.repo_name}</a></td>
+        <td>{}</td>
+        <td>{repo.size}</td>
+        <td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
+        {isShowRepoOwner && <td title={repo.owner_contact_email}>{repo.owner_name}</td>}
+      </tr>
+    );
+  }
+  
+  renderMobileUI = () => {
+    let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
+    let { repo, isShowRepoOwner } = this.props;
+    return (
+      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
+        <td>
+          <a href={libPath}>{repo.repo_name}</a><br />
+          {isShowRepoOwner ? <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span> : null}
+          <span className="item-meta-info">{repo.size}</span>
+          <span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
+        </td>
+        <td>{}</td>
+      </tr>
+    );
+  }
+
+  render() {
+    if (window.innerWidth >= 768) {
+      return this.renderPCUI();
+    } else {
+      return this.renderMobileUI();
+    }
+  }
+}
+
+RepoListItem.propTypes = propTypes;
+
+export default RepoListItem;

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import RepoListItem from './repo-list-item';
+
+const propTypes = {
+  isShowRepoOwner: PropTypes.bool.isRequired,
+  repoList: PropTypes.array.isRequired,
+};
+
+class RepoListView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false,
+    };
+  }
+
+  renderPCUI = () => {
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="38%">{gettext("Name")}
+              <a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a>
+            </th>
+            <th width="10%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="14%">{gettext("Size")}</th>
+            <th width="18%">{gettext("Last Update")}
+              <a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a>
+            </th>
+            <th width="16%">{gettext("Owner")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {this.props.repoList.map(repo => {
+            return (
+              <RepoListItem
+                key={repo.repo_id}
+                repo={repo}
+                isShowRepoOwner={this.props.isShowRepoOwner}
+                isItemFreezed={this.state.isItemFreezed}
+                currentGroup={this.props.currentGroup}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+
+  renderMobileUI = () => {
+    return (
+      <table>
+        <thead>
+          <tr>
+            <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="68%">
+              {gettext("Sort:")} {/* TODO: sort */}
+              {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+              {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+            </th>
+            <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          {this.props.repoList.map(repo => {
+            return (
+              <RepoListItem
+                key={repo.repo_id}
+                repo={repo}
+                isShowRepoOwner={this.props.isShowRepoOwner}
+                isItemFreezed={this.state.isItemFreezed}
+                currentGroup={this.props.currentGroup}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+
+  render() {
+    if (window.innerWidth >= 768) {
+      return this.renderPCUI();
+    } else {
+      return this.renderMobileUI();
+    }
+  }
+}
+
+RepoListView.propTypes = propTypes;
+
+export default RepoListView;

frontend/src/models/group.js

@@ -0,0 +1,14 @@
+class Group {
+  constructor(object) {
+    this.id= object.id;
+    this.name = object.name;
+    this.owner = object.owner;
+    this.admins = object.admins;
+    this.avatar_url = object.avatar_url;
+    this.created_at = object.created_at;
+    this.parent_group_id = object.parent_group_id;
+    this.wiki_enabled = object.wiki_enabled;
+  }
+}
+
+export default Group;

frontend/src/models/repoInfo.js

@@ -0,0 +1,24 @@
+import { Utils } from '../utils/utils';
+
+class RepoInfo {
+  constructor(object) {
+    this.repo_id = object.repo_id;
+    this.repo_name = object.repo_name;
+    this.permission = object.permission;
+    this.size = Utils.bytesToSize(object.size);
+    this.owner_name = object.owner_name;
+    this.owner_email = object.owner_email;
+    this.owner_contact_email = object.owner_contact_name;
+    this.is_admin = object.is_admin;
+    this.encrypted = object.encrypted;
+    this.last_modified = object.last_modified;
+    this.modifier_contact_email = object.modifier_contact_email;
+    this.modifier_email = object.modifier_email;
+    this.modifier_name = object.modifier_name;
+    this.mtime = object.mtime;
+  }
+}
+
+export default RepoInfo;
+
+//todo rename to repo, and rename repo to repoInfo

frontend/src/pages/groups/group-view.js

@@ -0,0 +1,175 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Loading from '../../components/loading';
+import { gettext, username, loginUrl } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Group from '../../models/group';
+import RepoInfo from '../../models/repoInfo';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
+import CurGroupPath from '../../components/cur-group-path/';
+import RepoListView from '../../components/repo-list-view/repo-list-view';
+
+const propTypes = {
+
+};
+
+class GroupView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      errMessage: '',
+      currentGroup: null,
+      repoList: [],
+    }
+  }
+
+  componentDidMount() {
+    let groupID = this.props.groupID;
+    this.loadGroup(groupID);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.groupID !== this.props.groupID) {
+      this.loadGroup(nextProps.groupID);
+    }
+  }
+
+  loadGroup = (groupID) => {
+    seafileAPI.getGroup(groupID).then((res) => {
+      let currentGroup = new Group(res.data);
+      this.setState({currentGroup: currentGroup});
+      this.loadRepos(groupID);
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext("Permission denied")
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext("Error")
+          });
+        }
+      } else {
+        this.setState({
+          isLoading: false,
+          errorMsg: gettext("Please check the network.")
+        });
+      }
+    });
+  }
+
+  loadRepos = (groupID) => {
+    this.setState({isLoading: true});
+    seafileAPI.listGroupRepos(groupID).then((res) => {
+      let repoList = res.data.map(item => {
+        let repoInfo = new RepoInfo(item);
+        return repoInfo;
+      });
+      this.setState({
+        isLoading: false,
+        repoList: repoList
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext("Permission denied")
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            isLoading: false,
+            errorMsg: gettext("Error")
+          });
+        }
+      } else {
+        this.setState({
+          isLoading: false,
+          errorMsg: gettext("Please check the network.")
+        });
+      }
+    });
+  }
+
+  onCreateRepo = (repo) => {
+    let groupId = this.props.groupID;
+    seafileAPI.createGroupRepo(groupId, repo).then(() => {
+      //todo update group list
+    });
+  }
+
+  getEmptyTip = () => {
+    let currentGroup = this.state.currentGroup;
+    let emptyTip = null;
+    if (currentGroup) {
+      if (currentGroup.parent_group_id === 0) {
+        emptyTip = (
+          <div className="empty-tip">
+            <h2>{gettext('No library is shared to this group')}</h2>
+            <p>{gettext('You can share libraries by clicking the "New Library" button above or the "Share" icon on your libraries list.')}</p>
+            <p>{gettext('Libraries shared as writable can be downloaded and synced by other group members. Read only libraries can only be downloaded, updates by others will not be uploaded.')}</p>
+          </div>
+        );
+      } else {
+        if (currentGroup.admins.indexOf(username) == -1) {
+          emptyTip = (
+            <div className="empty-tip">
+              <h2>{gettext('No libraries')}</h2>
+            </div>
+          );
+        } else {
+          emptyTip = (
+            <div className="empty-tip">
+              <h2>{gettext('No libraries')}</h2>
+              <p>{gettext('You can create libraries by clicking the "New Library" button above.')}</p>
+            </div>
+          );
+        }
+      }
+    }
+    return emptyTip;
+  }
+
+  render() {
+    let emptyTip = this.getEmptyTip();
+    return (
+      <Fragment>
+        <div className="main-panel-north">
+          <RepoViewToolbar onShowSidePanel={this.props.onShowSidePanel} onCreateRepo={this.onCreateRepo} libraryType={'group'}/>
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+        </div>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              {this.state.currentGroup && <CurGroupPath currentGroup={this.state.currentGroup}/>}
+            </div>
+            <div className="cur-view-content">
+              {this.state.isLoading && <Loading />}
+              {(!this.state.isLoading && this.state.errMessage) && this.state.errMessage}
+              {(!this.state.isLoading && this.state.repoList.length === 0) && emptyTip}
+              {(!this.state.isLoading && this.state.repoList.length > 0) &&
+                <RepoListView 
+                  isShowRepoOwner={true}
+                  currentGroup={this.state.currentGroup} 
+                  repoList={this.state.repoList} 
+                />
+              }
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+GroupView.propTypes = propTypes;
+
+export default GroupView;

frontend/src/pages/groups/groups-view.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+
+};
+
+class Groups extends React.Component {
+
+  render() {
+    return (
+      <div>{placehodler}</div>
+    );
+  }
+}
+
+Groups.propTypes = propTypes;
+
+export default Groups;