Combine view mode (#2959)

frontend/src/pages/lib-content-view/lib-content-main.js

@@ -0,0 +1,285 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
+import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
+import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
+import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
+import CurDirPath from '../../components/cur-dir-path';
+import DirentListView from '../../components/dirent-list-view/dirent-list-view';
+import DirentDetail from '../../components/dirent-detail/dirent-details';
+import FileUploader from '../../components/file-uploader/file-uploader';
+import RepoInfoBar from '../../components/repo-info-bar';
+
+const propTypes = {
+  pathPrefix: PropTypes.array.isRequired,
+  currentMode: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  pathExist: PropTypes.bool.isRequired,
+  // repo
+  currentRepoInfo: PropTypes.object,  // Initially not loaded
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  repoPermission: PropTypes.bool.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
+  isAdmin: PropTypes.bool.isRequired,
+  userPerm: PropTypes.string.isRequired,
+  showShareBtn: PropTypes.bool.isRequired,
+  enableDirPrivateShare: PropTypes.bool.isRequired,
+  isRepoOwner: PropTypes.bool.isRequired,
+  isGroupOwnedRepo: PropTypes.bool.isRequired,
+  // toolbar
+  onTabNavClick: PropTypes.func.isRequired,
+  onSideNavMenuClick: PropTypes.func.isRequired,
+  selectedDirentList: PropTypes.array.isRequired,
+  onItemsMove: PropTypes.func.isRequired,
+  onItemsCopy: PropTypes.func.isRequired,
+  onItemsDelete: PropTypes.func.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
+  onMainNavBarClick: PropTypes.func.isRequired,
+  // repo content
+  draftCounts: PropTypes.number,
+  reviewCounts: PropTypes.number,
+  usedRepoTags: PropTypes.array.isRequired,
+  readmeMarkdown: PropTypes.object,
+  updateUsedRepoTags: PropTypes.func.isRequired,
+  // dirent list
+  isDirentListLoading: PropTypes.bool.isRequired,
+  direntList: PropTypes.array.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortItems: PropTypes.func.isRequired,
+  updateDirent: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemRename: PropTypes.func.isRequired,
+  onItemMove: PropTypes.func.isRequired,
+  onItemCopy: PropTypes.func.isRequired,
+  onAddFolder: PropTypes.func.isRequired,
+  onAddFile: PropTypes.func.isRequired,
+  onFileTagChanged: PropTypes.func.isRequired,
+  isDirentSelected: PropTypes.bool.isRequired,
+  isAllDirentSelected: PropTypes.bool.isRequired,
+  onAllDirentSelected: PropTypes.func.isRequired,
+  onFileUploadSuccess: PropTypes.func.isRequired,
+};
+
+class LibContentMain extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentDirent: null,
+      isDirentDetailShow: false,
+    };
+  }
+
+  onSideNavMenuClick = () => {
+    this.props.onSideNavMenuClick();
+  }
+
+  onPathClick = (path) => {
+    this.setState({isDirentDetailShow: false});
+    this.props.onPathClick(path);
+  }
+
+  onItemClick = (dirent) => {
+    this.setState({isDirentDetailShow: false});
+    this.props.onItemClick(dirent);
+  }
+
+  // on '<tr>'
+  onDirentClick = (dirent) => {
+    if (this.state.isDirentDetailShow) {
+      this.onItemDetails(dirent);
+    }
+  }
+
+  onItemDetails = (dirent) => {
+    this.setState({
+      currentDirent: dirent,
+      isDirentDetailShow: true,
+    });
+  }
+
+  onItemDetailsClose = () => {
+    this.setState({isDirentDetailShow: false});
+  }
+
+  onUploadFile = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.uploader.onFileUpload();
+  }
+
+  onUploadFolder = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.uploader.onFolderUpload();
+  }
+
+  switchViewMode = (mode) => {
+    this.props.switchViewMode(mode);
+  }
+
+  onFileUploadSuccess = (direntObject) => {
+    this.props.onFileUploadSuccess(direntObject);
+  }
+
+  renderListView = () => {
+    let repoID = this.props.repoID;
+    const showRepoInfoBar = this.props.path === '/' && (
+      this.props.usedRepoTags.length != 0 || this.props.readmeMarkdown != null ||
+      this.props.draftCounts != 0 || this.props.reviewCounts != 0);
+    return (
+      <Fragment>
+        {showRepoInfoBar && (
+          <RepoInfoBar
+            repoID={repoID}
+            currentPath={this.props.path}
+            usedRepoTags={this.props.usedRepoTags}
+            readmeMarkdown={this.props.readmeMarkdown}
+            draftCounts={this.props.draftCounts}
+            reviewCounts={this.props.reviewCounts}
+            updateUsedRepoTags={this.props.updateUsedRepoTags}
+          />
+        )}
+        <DirentListView
+          path={this.props.path}
+          repoID={repoID}
+          repoEncrypted={this.props.repoEncrypted}
+          isRepoOwner={this.props.isRepoOwner}
+          isAdmin={this.props.isAdmin}
+          isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+          enableDirPrivateShare={this.props.enableDirPrivateShare}
+          direntList={this.props.direntList}
+          sortBy={this.props.sortBy}
+          sortOrder={this.props.sortOrder}
+          sortItems={this.props.sortItems}
+          onAddFile={this.props.onAddFile}
+          onItemClick={this.onItemClick}
+          onItemDelete={this.props.onItemDelete}
+          onItemRename={this.props.onItemRename}
+          onItemMove={this.props.onItemMove}
+          onItemCopy={this.props.onItemCopy}
+          onDirentClick={this.onDirentClick}
+          onItemDetails={this.onItemDetails}
+          isDirentListLoading={this.props.isDirentListLoading}
+          updateDirent={this.props.updateDirent}
+          currentRepoInfo={this.props.currentRepoInfo}
+          isAllItemSelected={this.props.isAllDirentSelected}
+          onAllItemSelected={this.props.onAllDirentSelected}
+          onItemSelected={this.props.onItemSelected}
+        />
+      </Fragment>
+    );
+  }
+
+  renderGridView = () => {
+    // todo
+    return (
+      <div>grid-mode</div>
+    )
+  }
+
+  renderColumnView = () => {
+    return (
+      this.renderListView()
+    )
+  }
+
+  render() {
+    let repoID = this.props.repoID;
+    const errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
+    return (
+      <div className={`main-panel o-hidden ${this.props.currentMode === 'column' ? 'dir-main-content' : ''}`}>
+        <div className="main-panel-north border-left-show">
+          <div className="cur-view-toolbar">
+            <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onSideNavMenuClick}></span>
+            <div className="dir-operation">
+              {this.props.isDirentSelected ?
+                <MutipleDirOperationToolbar
+                  repoID={repoID} 
+                  path={this.props.path}
+                  selectedDirentList={this.props.selectedDirentList}
+                  onItemsMove={this.props.onItemsMove}
+                  onItemsCopy={this.props.onItemsCopy}
+                  onItemsDelete={this.props.onItemsDelete}
+                /> :
+                <DirOperationToolBar 
+                  path={this.props.path}
+                  repoID={repoID}
+                  repoName={this.props.repoName}
+                  repoEncrypted={this.props.repoEncrypted}
+                  direntList={this.props.direntList}
+                  showShareBtn={this.props.showShareBtn}
+                  enableDirPrivateShare={this.props.enableDirPrivateShare}
+                  userPerm={this.props.userPerm}
+                  isAdmin={this.props.isAdmin}
+                  isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+                  onAddFile={this.props.onAddFile}
+                  onAddFolder={this.props.onAddFolder}
+                  onUploadFile={this.onUploadFile}
+                  onUploadFolder={this.onUploadFolder}
+                />
+              }
+            </div>
+            <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.switchViewMode}/>
+          </div>
+          <CommonToolbar repoID={repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
+        </div>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              {this.props.currentRepoInfo && (
+                <CurDirPath 
+                  repoID={repoID}
+                  repoName={this.props.currentRepoInfo.repo_name}
+                  pathPrefix={this.props.pathPrefix}
+                  currentPath={this.props.path} 
+                  permission={this.props.repoPermission} 
+                  onPathClick={this.props.onMainNavBarClick}
+                  onTabNavClick={this.props.onTabNavClick}
+                />
+              )}
+            </div>
+            <div className="cur-view-content">
+              {!this.props.pathExist && errMessage }
+              {(this.props.pathExist && (
+                <Fragment>
+                  {this.props.currentMode === 'list' && this.renderListView()}
+                  {this.props.currentMode === 'grid' && this.renderGridView()}
+                  {this.props.currentMode === 'column' && this.renderColumnView()}
+                  <FileUploader
+                    ref={uploader => this.uploader = uploader}
+                    dragAndDrop={true}
+                    path={this.props.path}
+                    repoID={repoID}
+                    direntList={this.props.direntList}
+                    onFileUploadSuccess={this.onFileUploadSuccess}
+                  />
+                </Fragment>
+              ))}
+            </div>
+          </div>
+          {this.state.isDirentDetailShow && (
+            <div className="cur-view-detail">
+              <DirentDetail
+                repoID={repoID}
+                path={this.props.path}
+                dirent={this.state.currentDirent}
+                direntPath={this.state.direntPath}
+                onItemDetailsClose={this.onItemDetailsClose}
+                onFileTagChanged={this.props.onFileTagChanged}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+LibContentMain.propTypes = propTypes;
+
+export default LibContentMain;

frontend/src/pages/lib-content-view/lib-content-nav.js

@@ -0,0 +1,235 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import TreeView from '../../components/tree-view/tree-view';
+import Loading from '../../components/loading';
+import ModalPortal from '../../components/modal-portal';
+import Delete from '../../components/dialog/delete-dialog';
+import Rename from '../../components/dialog/rename-dialog';
+import CreateFolder from '../../components/dialog/create-folder-dialog';
+import CreateFile from '../../components/dialog/create-file-dialog';
+
+const propTypes = {
+  repoPermission: PropTypes.bool.isRequired,
+  currentPath: PropTypes.string,
+  currentRepoInfo: PropTypes.object,  // Initially not loaded
+  isTreeDataLoading: PropTypes.bool.isRequired,
+  treeData: PropTypes.object.isRequired,
+  onNodeClick: PropTypes.func.isRequired,
+  onNodeCollapse: PropTypes.func.isRequired,
+  onNodeExpanded: PropTypes.func.isRequired,
+  onRenameNode: PropTypes.func.isRequired,
+  onDeleteNode: PropTypes.func.isRequired,
+  onAddFileNode: PropTypes.func.isRequired,
+  onAddFolderNode: PropTypes.func.isRequired,
+};
+
+class LibContentNav extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      opNode: null,
+      isLoadFailed: false,
+      isMenuIconShow: false,
+      isHeaderMenuShow: false,
+      isHeaderMenuFreezed: false,
+      isDeleteDialogShow: false,
+      isAddFileDialogShow: false,
+      isAddFolderDialogShow: false,
+      isRenameDialogShow: false,
+    };
+    this.isNodeMenuShow = true;
+  }
+
+  onDropdownToggleClick = (e) => {
+    e.preventDefault();
+    this.toggleOperationMenu();
+  }
+
+  toggleOperationMenu = () => {
+    this.setState({isHeaderMenuShow: !this.state.isHeaderMenuShow});
+  }
+
+  onNodeClick = (node) => {
+    this.setState({opNode: node});
+    this.props.onNodeClick(node);
+  }
+
+  onMenuItemClick = (operation, node) => {
+    this.setState({opNode: node});
+    switch (operation) {
+      case 'New Folder':
+        this.onAddFolderToggle();
+        break;
+      case 'New File':
+        this.onAddFileToggle();
+        break;
+      case 'Rename':
+        this.onRenameToggle();
+        break;
+      case 'Delete':
+        this.onDeleteToggle();
+        break;
+    }
+  }
+
+  onAddFileToggle = (type) => {
+    if (type === 'root') {
+      let root = this.props.treeData.root;
+      this.setState({
+        isAddFileDialogShow: !this.state.isAddFileDialogShow,
+        opNode: root,
+      });
+    } else {
+      this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
+    }
+  }
+  
+  onAddFolderToggle = (type) => {
+    if (type === 'root') {
+      let root = this.props.treeData.root;
+      this.setState({
+        isAddFolderDialogShow: !this.state.isAddFolderDialogShow,
+        opNode: root,
+      });
+    } else {
+      this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
+    }
+  }
+
+  onRenameToggle = () => {
+    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
+  }
+
+  onDeleteToggle = () => {
+    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
+  }
+
+  onAddFolderNode = (dirPath) => {
+    this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
+    this.props.onAddFolderNode(dirPath);
+  }
+
+  onAddFileNode = (filePath, isDraft) => {
+    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
+    this.props.onAddFileNode(filePath, isDraft);
+  }
+
+  onRenameNode = (newName) => {
+    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
+    let node = this.state.opNode;
+    this.props.onRenameNode(node, newName);
+  }
+
+  onDeleteNode = () => {
+    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
+    let node = this.state.opNode;
+    this.props.onDeleteNode(node);
+  }
+
+  checkDuplicatedName = (newName) => {
+    let node = this.state.opNode;
+    // root node to new node conditions: parentNode is null, 
+    let parentNode = node.parentNode ? node.parentNode : node;
+    let childrenObject = parentNode.children.map(item => {
+      return item.object;
+    });
+    let isDuplicated = childrenObject.some(object => {
+      return object.name === newName;
+    });
+    return isDuplicated;
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <div id="side-nav" className="dir-side-nav" role="navigation">
+          <h3 className="dir-nav-heading border-left-show" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <div className="heading-title">{gettext('Files')}</div>
+            <div className="heading-icon">
+              {(this.props.repoPermission) && (
+                <Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
+                  <DropdownToggle 
+                    tag="span" 
+                    className="action-icon sf2-icon-plus" 
+                    title={gettext('More Operations')}
+                    data-toggle="dropdown" 
+                    aria-expanded={this.state.isHeaderMenuShow}
+                    onClick={this.onDropdownToggleClick}
+                  />
+                  <DropdownMenu right>
+                    <DropdownItem onClick={this.onAddFolderToggle.bind(this, 'root')}>{gettext('New Folder')}</DropdownItem>
+                    <DropdownItem onClick={this.onAddFileToggle.bind(this, 'root')}>{gettext('New File')}</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+              )}
+            </div>
+          </h3>
+          <div className="dir-nav-container">
+            {this.props.isTreeDataLoading ? 
+              (<Loading/>) :
+              (<TreeView
+                repoPermission={this.props.repoPermission}
+                isNodeMenuShow={this.isNodeMenuShow}
+                treeData={this.props.treeData}
+                currentPath={this.props.currentPath}
+                onNodeClick={this.onNodeClick}
+                onNodeExpanded={this.props.onNodeExpanded}
+                onNodeCollapse={this.props.onNodeCollapse}
+                onMenuItemClick={this.onMenuItemClick}
+                onFreezedItem={this.onFreezedItem}
+                onUnFreezedItem={this.onUnFreezedItem}
+              />)
+            }
+          </div>
+        </div>
+        {this.state.isAddFolderDialogShow && (
+          <ModalPortal>
+            <CreateFolder
+              parentPath={this.state.opNode.path}
+              onAddFolder={this.onAddFolderNode}
+              checkDuplicatedName={this.checkDuplicatedName}
+              addFolderCancel={this.onAddFolderToggle}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isAddFileDialogShow && (
+          <ModalPortal>
+            <CreateFile
+              fileType={'.md'}
+              parentPath={this.state.opNode.path}
+              onAddFile={this.onAddFileNode}
+              checkDuplicatedName={this.checkDuplicatedName}
+              addFileCancel={this.onAddFileToggle}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isRenameDialogShow && (
+          <ModalPortal>
+            <Rename
+              currentNode={this.state.opNode}
+              onRename={this.onRenameNode}
+              checkDuplicatedName={this.checkDuplicatedName}
+              toggleCancel={this.onRenameToggle}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isDeleteDialogShow && (
+          <ModalPortal>
+            <Delete
+              currentNode={this.state.opNode}
+              handleSubmit={this.onDeleteNode}
+              toggleCancel={this.onDeleteToggle}
+            />
+          </ModalPortal>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+LibContentNav.propTypes = propTypes;
+
+export default LibContentNav;