change add wiki button (#6199)

* change add wiki button * add wikis dropdown to add wiki * change permission
2025-09-18 00:00:00 +00:00 · 2024-06-17 10:19:27 +08:00
parent dbce889cf6
commit 983b42b1d8
8 changed files with 138 additions and 31 deletions
--- a/frontend/src/components/dialog/add-wiki-dialog.js
+++ b/frontend/src/components/dialog/add-wiki-dialog.js
@@ -10,6 +10,7 @@ import { SeahubSelect } from '../common/select';
 const propTypes = {
  toggleCancel: PropTypes.func.isRequired,
  addWiki: PropTypes.func.isRequired,
+  currentDeptID: PropTypes.string,
 };

 class AddWikiDialog extends React.Component {
@@ -37,7 +38,11 @@ class AddWikiDialog extends React.Component {
        obj.label = departments[i].name;
        options.push(obj);
      }
-      this.setState({options: options});
+      this.setState({ options });
+      if (this.props.currentDeptID) {
+        const selectedOption = options.find(op => op.id == this.props.currentDeptID);
+        this.setState({ selectedOption });
+      }
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
@@ -47,7 +52,6 @@ class AddWikiDialog extends React.Component {
  inputNewName = (e) => {
    this.setState({
      name: e.target.value,
-      isSubmitBtnActive: !!e.target.value.trim(),
    });
  };

@@ -96,7 +100,7 @@ class AddWikiDialog extends React.Component {
        </ModalBody>
        <ModalFooter>
          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.name.trim()}>{gettext('Submit')}</Button>
        </ModalFooter>
      </Modal>
    );
--- a/frontend/src/components/wiki-card-view/wiki-card-group.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-group.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import WikiCardItem from './wiki-card-item';
+import WikiCardItemAdd from './wiki-card-item-add';
 import { isMobile } from '../../utils/utils';

 const propTypes = {
@@ -10,6 +11,7 @@ const propTypes = {
  isDepartment: PropTypes.bool.isRequired,
  isShowAvatar: PropTypes.bool.isRequired,
  renameWiki: PropTypes.func.isRequired,
+  toggelAddWikiDialog: PropTypes.func,
 };

 class WikiCardGroup extends Component {
@@ -37,7 +39,7 @@ class WikiCardGroup extends Component {
  };

  render() {
-    const { wikis, title, isDepartment } = this.props;
+    const { wikis, title, isDepartment, toggelAddWikiDialog } = this.props;
    const numberOfWiki = Math.floor((window.innerWidth * 0.78 / 180));
    const grids = (Math.floor((window.innerWidth * 0.78 - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
    return (
@@ -59,6 +61,9 @@ class WikiCardGroup extends Component {
              />
            );
          })}
+          {toggelAddWikiDialog &&
+            <WikiCardItemAdd toggelAddWikiDialog={toggelAddWikiDialog}/>
+          }
        </div>
      </div>
    );
--- a/frontend/src/components/wiki-card-view/wiki-card-item-add.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-item-add.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+
+function WikiCardItemAdd(props) {
+  return (
+    <div
+      className={'wiki-card-item wiki-card-item-add d-flex flex-column align-items-center justify-content-center'}
+      onClick={props.toggelAddWikiDialog}
+    >
+      <span>+</span>
+      <span>{gettext('Add Wiki')}</span>
+    </div>
+  );
+}
+
+WikiCardItemAdd.propTypes = {
+  toggelAddWikiDialog: PropTypes.func.isRequired,
+};
+
+export default WikiCardItemAdd;
--- a/frontend/src/components/wiki-card-view/wiki-card-view.css
+++ b/frontend/src/components/wiki-card-view/wiki-card-view.css
@@ -112,6 +112,18 @@
  padding-top: 6px;
 }

+.wiki-card-item-add span:first-child {
+  color: #999;
+  line-height: 24px;
+  height: 24px;
+  font-size: 40px;
+  margin-bottom: 10px;
+}
+
+.wiki-card-item-add span:last-child {
+  font-size: 14px;
+}
+
@media (max-width: 768px) {
  .wiki-card-item .wiki-card-item-top .dropdown .sf-dropdown-toggle {
    border: none;
--- a/frontend/src/components/wiki-card-view/wiki-card-view.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-view.js
@@ -1,17 +1,41 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, username } from '../../utils/constants';
+import { gettext, username, canPublishRepo } from '../../utils/constants';
 import WikiCardGroup from './wiki-card-group';
+import wikiAPI from '../../utils/wiki-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
+
 import './wiki-card-view.css';

 const propTypes = {
  data: PropTypes.object.isRequired,
  deleteWiki: PropTypes.func.isRequired,
  renameWiki: PropTypes.func.isRequired,
+  toggelAddWikiDialog: PropTypes.func,
 };

 class WikiCardView extends Component {

+  constructor(props) {
+    super(props);
+    this.state = {
+      departmentMap: {},
+    };
+  }
+
+  componentDidMount() {
+    if (!canPublishRepo) return;
+    let departmentMap = {};
+    wikiAPI.listWikiDepartments().then(res => {
+      res.data.forEach(item => departmentMap[item.id] = true);
+      this.setState({ departmentMap });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
  classifyWikis = (wikis) => {
    let v1Wikis = [];
    let myWikis = [];
@@ -33,6 +57,7 @@ class WikiCardView extends Component {

  render() {
    let { loading, errorMsg, wikis } = this.props.data;
+    const { toggelAddWikiDialog } = this.props;

    if (loading) {
      return <span className="loading-icon loading-tip"></span>;
@@ -51,18 +76,20 @@ class WikiCardView extends Component {
        title={gettext('My Wikis')}
        isDepartment={false}
        isShowAvatar={false}
+        toggelAddWikiDialog={canPublishRepo ? toggelAddWikiDialog.bind(this, null) : null}
      />
    );
-    for (let key in department2WikisMap) {
+    for (let deptID in department2WikisMap) {
      wikiCardGroups.push(
        <WikiCardGroup
-          key={'department-Wikis' + key}
+          key={'department-Wikis-' + deptID}
          deleteWiki={this.props.deleteWiki}
          renameWiki={this.props.renameWiki}
-          wikis={department2WikisMap[key]}
-          title={department2WikisMap[key][0].owner_nickname}
+          wikis={department2WikisMap[deptID]}
+          title={department2WikisMap[deptID][0].owner_nickname}
          isDepartment={true}
          isShowAvatar={false}
+          toggelAddWikiDialog={(canPublishRepo && this.state.departmentMap[deptID]) ? toggelAddWikiDialog.bind(this, deptID) : null}
        />
      );
    }
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -329,3 +329,10 @@ img[src=""],img:not([src]) { /* for first loading img*/
 .path-container .op-btn .sf3-font {
  color: #444;
 }
+
+.path-container .add-wiki-dropdown .sf3-font-drop-down {
+  color: #999;
+  cursor: pointer;
+  font-size: 12px;
+  transform: scale(.8);
+}
--- a/frontend/src/pages/my-libs/mylib-repo-list-view.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-view.js
@@ -15,6 +15,7 @@ const propTypes = {
  onTransferRepo: PropTypes.func.isRequired,
  onMonitorRepo: PropTypes.func.isRequired,
  inAllLibs: PropTypes.bool, // for 'My Libraries' in 'Files' page
+  currentViewMode: PropTypes.string,
 };

 class MylibRepoListView extends React.Component {
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
-import MediaQuery from 'react-responsive';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, canPublishRepo } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
@@ -23,9 +22,11 @@ class Wikis extends Component {
    this.state = {
      loading: true,
      errorMsg: '',
+      currentDeptID: '',
      wikis: [],
      isShowAddWikiMenu: false,
      isShowAddDialog: false,
+      isDropdownMenuShown: false,
    };
  }

@@ -69,20 +70,33 @@ class Wikis extends Component {
  };

  onMenuToggle = () => {
-    this.setState({isShowAddWikiMenu: !this.state.isShowAddWikiMenu});
+    this.setState({ isShowAddWikiMenu: !this.state.isShowAddWikiMenu });
  };

-  toggelAddWikiDialog = () => {
-    this.setState({isShowAddDialog: !this.state.isShowAddDialog});
+  toggelAddWikiDialog = (currentDeptID) => {
+    if (this.state.isShowAddDialog) {
+      this.setState({
+        isShowAddDialog: false,
+        currentDeptID: '',
+      });
+    } else {
+      this.setState({
+        isShowAddDialog: true,
+        currentDeptID
+      });
+    }
  };

-  addWiki = (wikiName, departmentID) => {
-    wikiAPI.addWiki2(wikiName, departmentID).then((res) => {
+  addWiki = (wikiName, currentDeptID) => {
+    wikiAPI.addWiki2(wikiName, currentDeptID).then((res) => {
      let wikis = this.state.wikis.slice(0);
      let new_wiki = res.data;
      new_wiki['version'] = 'v2';
      wikis.push(new_wiki);
-      this.setState({ wikis });
+      this.setState({
+        wikis,
+        currentDeptID: '',
+      });
    }).catch((error) => {
      if (error.response) {
        let errMessage = Utils.getErrorMsg(error);
@@ -153,30 +167,29 @@ class Wikis extends Component {
    }
  };

+  toggleDropdownMenu = (e) => {
+    e.stopPropagation();
+    this.setState({
+      isDropdownMenuShown: !this.state.isDropdownMenuShown
+    });
+  };
+
  render() {
    return (
      <Fragment>
        <div className="main-panel-north border-left-show">
          <div className="cur-view-toolbar">
            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-            {canPublishRepo &&
-            <div className="operation">
-              <Fragment>
-                <MediaQuery query="(min-width: 768px)">
-                  <Button className="btn btn-secondary operation-item" onClick={this.toggelAddWikiDialog}>{gettext('Add Wiki')}</Button>
-                </MediaQuery>
-                <MediaQuery query="(max-width: 767.8px)">
-                  <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Add Wiki')} onClick={this.toggelAddWikiDialog}></span>
-                </MediaQuery>
-              </Fragment>
-            </div>
-            }
          </div>
          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
        </div>
        {this.state.isShowAddDialog &&
          <ModalPortal>
-            <AddWikiDialog toggleCancel={this.toggelAddWikiDialog} addWiki={this.addWiki} />
+            <AddWikiDialog
+              toggleCancel={this.toggelAddWikiDialog}
+              addWiki={this.addWiki}
+              currentDeptID={this.state.currentDeptID}
+            />
          </ModalPortal>
        }
        <div className="main-panel-center">
@@ -184,6 +197,22 @@ class Wikis extends Component {
            <div className="cur-view-path">
              <div className="path-container">
                <h3 className="sf-heading m-0">{gettext('Wikis')}</h3>
+                {canPublishRepo &&
+                  <Dropdown
+                    direction="down"
+                    className="add-wiki-dropdown"
+                    isOpen={this.state.isDropdownMenuShown}
+                    toggle={this.toggleDropdownMenu}
+                    onMouseMove={(e) => {e.stopPropagation();}}
+                  >
+                    <DropdownToggle tag="i" className="px-1">
+                      <span className="sf3-font sf3-font-drop-down" aria-hidden="true"></span>
+                    </DropdownToggle>
+                    <DropdownMenu>
+                      <DropdownItem onClick={() => {this.toggelAddWikiDialog();}}>{gettext('Add Wiki')}</DropdownItem>
+                    </DropdownMenu>
+                  </Dropdown>
+                }
              </div>
            </div>
            {(this.state.loading || this.state.wikis.length !== 0) &&
@@ -192,6 +221,7 @@ class Wikis extends Component {
                  data={this.state}
                  deleteWiki={this.deleteWiki}
                  renameWiki={this.renameWiki}
+                  toggelAddWikiDialog={this.toggelAddWikiDialog}
                />
              </div>
            }