create api & fetch groups and users on modal show

src/client/js/components/Admin/UserGroup/UserGroupCreateForm.jsx

@@ -37,8 +37,8 @@ class UserGroupCreateForm extends React.Component {
       });
 
       if (res.ok) {
-        const { userGroup } = res;
-        this.props.onCreate(userGroup);
+        const { userGroup, userGroupRelation } = res;
+        this.props.onCreate(userGroup, userGroupRelation);
       }
       else {
         throw new Error('Unable to create a group');
@@ -70,7 +70,7 @@ class UserGroupCreateForm extends React.Component {
             )
           }
         </p>
-        <form role="form" action="/admin/user-group/create" method="post" onSubmit={this.handleSubmit}>
+        <form onSubmit={this.handleSubmit}>
           <div id="createGroupForm" className="collapse">
             <div className="form-group">
               <label htmlFor="name">{ t('user_group_management.group_name') }</label>

src/client/js/components/Admin/UserGroup/UserGroupPage.jsx

@@ -14,7 +14,8 @@ class UserGroupPage extends React.Component {
 
     this.state = {
       userGroups: props.userGroups,
-      selectedUserGroup: undefined,
+      userGroupRelations: props.userGroupRelations,
+      selectedUserGroup: undefined, // not null but undefined (to use defaultProps in UserGroupDeleteModal)
       isDeleteModalShow: false,
     };
 
@@ -25,7 +26,7 @@ class UserGroupPage extends React.Component {
   }
 
   async showDeleteModal(group) {
-    await this.syncUserGroupState();
+    await this.syncUserGroupAndRelations();
 
     this.setState({
       selectedUserGroup: group,
@@ -40,10 +41,15 @@ class UserGroupPage extends React.Component {
     });
   }
 
-  addUserGroup(newUserGroup) {
+  addUserGroup(newUserGroup, newUserGroupRelation) {
     this.setState((prevState) => {
+      const userGroupRelations = Object.assign(prevState.userGroupRelations, {
+        [newUserGroup._id]: newUserGroupRelation,
+      });
+
       return {
         userGroups: [...prevState.userGroups, newUserGroup],
+        userGroupRelations,
       };
     });
   }
@@ -57,13 +63,20 @@ class UserGroupPage extends React.Component {
     // });
   }
 
-  async syncUserGroupState() {
+  async syncUserGroupAndRelations() {
     let userGroups = [];
+    let userGroupRelations = [];
 
     try {
-      const res = await this.props.crowi.apiGet('/v3/user-groups');
-      if (res.ok) {
-        userGroups = res.userGroups;
+      const responses = await Promise.all([
+        this.props.crowi.apiGet('/v3/user-groups'),
+        this.props.crowi.apiGet('/v3/user-group-relations'),
+      ]);
+
+      if (responses.reduce((isAllOk, res) => { return isAllOk && res.ok }, true)) {
+        const [userGroupsRes, userGroupRelationsRes] = responses;
+        userGroups = userGroupsRes.userGroups;
+        userGroupRelations = userGroupRelationsRes.userGroupRelations;
       }
       else {
         throw new Error('Unable to fetch groups from server');
@@ -73,7 +86,10 @@ class UserGroupPage extends React.Component {
       apiErrorHandler(err);
     }
 
-    this.setState({ userGroups });
+    this.setState({
+      userGroups,
+      userGroupRelations,
+    });
   }
 
   render() {
@@ -87,7 +103,7 @@ class UserGroupPage extends React.Component {
         <UserGroupTable
           crowi={this.props.crowi}
           userGroups={this.state.userGroups}
-          userGroupRelations={this.props.userGroupRelations}
+          userGroupRelations={this.state.userGroupRelations}
           isAclEnabled={this.props.isAclEnabled}
           onDelete={this.showDeleteModal}
         />

src/server/routes/admin.js

@@ -727,29 +727,6 @@ module.exports = function(crowi, app) {
     return res.render('admin/user-group-detail', renderVar);
   };
 
-  // グループの生成
-  actions.userGroup.create = function(req, res) {
-    const form = req.form.createGroupForm;
-    if (req.form.isValid) {
-      const userGroupName = crowi.xss.process(form.userGroupName);
-
-      UserGroup.createGroupByName(userGroupName)
-        .then((newUserGroup) => {
-          req.flash('successMessage', newUserGroup.name);
-          req.flash('createdUserGroup', newUserGroup);
-          return res.redirect('/admin/user-groups');
-        })
-        .catch((err) => {
-          debug('create userGroup error:', err);
-          req.flash('errorMessage', '同じグループ名が既に存在します。');
-        });
-    }
-    else {
-      req.flash('errorMessage', req.form.errors.join('\n'));
-      return res.redirect('/admin/user-groups');
-    }
-  };
-
   //
   actions.userGroup.update = function(req, res) {
     const userGroupId = req.params.userGroupId;

src/server/routes/apiv3/admin/index.js

@@ -1,5 +0,0 @@
-module.exports = (crowi) => {
-  return {
-    userGroup: require('./user-group')(crowi),
-  };
-};

src/server/routes/apiv3/index.js

@@ -10,15 +10,21 @@ const router = express.Router();
 module.exports = (crowi) => {
   const middleware = require('../../util/middlewares');
   const { loginRequired, adminRequired } = middleware;
-  const { userGroup: adminUserGroup } = require('./admin')(crowi);
+
+  const userGroup = require('./user-group')(crowi);
+  const userGroupRelation = require('./user-group-relation')(crowi);
 
   router.use('/healthcheck', require('./healthcheck')(crowi));
 
-  router.get('/user-groups', loginRequired(crowi), adminRequired(), adminUserGroup.find);
+  // user groups
+  router.get('/user-groups', loginRequired(crowi), adminRequired(), userGroup.find);
   // router.get('/user-groups/:id', loginRequired(crowi), adminRequired(), adminUserGroup.findOne);
-  router.post('/user-groups/create', loginRequired(crowi), adminRequired(), adminUserGroup.create);
+  router.post('/user-groups/create', loginRequired(crowi), adminRequired(), userGroup.create);
   // router.post('/user-groups/update/:id', loginRequired(crowi), adminRequired(), adminUserGroup.update);
-  router.post('/user-groups/delete/:id', loginRequired(crowi), adminRequired(), adminUserGroup.delete);
+  router.post('/user-groups/delete/:id', loginRequired(crowi), adminRequired(), userGroup.delete);
+
+  // user group relations
+  router.get('/user-group-relations', loginRequired(crowi), adminRequired(), userGroupRelation.find);
 
   return router;
 };

src/server/routes/apiv3/user-group-relation.js

@@ -0,0 +1,96 @@
+/* eslint-disable no-use-before-define */
+module.exports = (crowi) => {
+  const logger = require('@alias/logger')('growi:routes:apiv3:user-group');
+  const ApiResponse = require('../../util/apiResponse');
+
+  const { UserGroupRelation, UserGroup } = crowi.models;
+
+  const api = {};
+
+  api.find = async(req, res) => {
+    try {
+      const page = parseInt(req.query.page) || 1;
+      const result = await UserGroup.findUserGroupsWithPagination({ page });
+      // const pager = createPager(result.total, result.limit, result.page, result.pages, MAX_PAGE_LIST);
+      const userGroups = result.docs;
+
+      const userGroupRelationsObj = {};
+      await Promise.all(userGroups.map(async(userGroup) => {
+        const userGroupRelations = await UserGroupRelation.findAllRelationForUserGroup(userGroup);
+        userGroupRelationsObj[userGroup._id] = userGroupRelations.map((userGroupRelation) => {
+          return userGroupRelation.relatedUser;
+        });
+      }));
+
+      const data = {
+        userGroupRelations: userGroupRelationsObj,
+      };
+
+      return res.json(ApiResponse.success(data));
+    }
+    catch (err) {
+      logger.error('Error', err);
+      return res.json(ApiResponse.error('Error occurred in fetching user group relations'));
+    }
+  };
+
+  // const MAX_PAGE_LIST = 50;
+
+  // function createPager(total, limit, page, pagesCount, maxPageList) {
+  //   const pager = {
+  //     page,
+  //     pagesCount,
+  //     pages: [],
+  //     total,
+  //     previous: null,
+  //     previousDots: false,
+  //     next: null,
+  //     nextDots: false,
+  //   };
+
+  //   if (page > 1) {
+  //     pager.previous = page - 1;
+  //   }
+
+  //   if (page < pagesCount) {
+  //     pager.next = page + 1;
+  //   }
+
+  //   let pagerMin = Math.max(1, Math.ceil(page - maxPageList / 2));
+  //   let pagerMax = Math.min(pagesCount, Math.floor(page + maxPageList / 2));
+  //   if (pagerMin === 1) {
+  //     if (MAX_PAGE_LIST < pagesCount) {
+  //       pagerMax = MAX_PAGE_LIST;
+  //     }
+  //     else {
+  //       pagerMax = pagesCount;
+  //     }
+  //   }
+  //   if (pagerMax === pagesCount) {
+  //     if ((pagerMax - MAX_PAGE_LIST) < 1) {
+  //       pagerMin = 1;
+  //     }
+  //     else {
+  //       pagerMin = pagerMax - MAX_PAGE_LIST;
+  //     }
+  //   }
+
+  //   pager.previousDots = null;
+  //   if (pagerMin > 1) {
+  //     pager.previousDots = true;
+  //   }
+
+  //   pager.nextDots = null;
+  //   if (pagerMax < pagesCount) {
+  //     pager.nextDots = true;
+  //   }
+
+  //   for (let i = pagerMin; i <= pagerMax; i++) {
+  //     pager.pages.push(i);
+  //   }
+
+  //   return pager;
+  // }
+
+  return api;
+};

src/server/routes/apiv3/admin/user-group.js → src/server/routes/apiv3/user-group.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-use-before-define */
 module.exports = (crowi) => {
-  const logger = require('@alias/logger')('growi:routes:apiv3:admin:user-group');
-  const ApiResponse = require('../../../util/apiResponse');
+  const logger = require('@alias/logger')('growi:routes:apiv3:user-group');
+  const ApiResponse = require('../../util/apiResponse');
 
-  const { UserGroup } = crowi.models;
+  const { UserGroup, UserGroupRelation } = crowi.models;
 
   const api = {};
 
@@ -27,8 +27,14 @@ module.exports = (crowi) => {
     try {
       const userGroupName = crowi.xss.process(name);
       const newUserGroup = await UserGroup.createGroupByName(userGroupName);
+      const userGroupRelations = await UserGroupRelation.findAllRelationForUserGroup(newUserGroup);
 
-      return res.json(ApiResponse.success({ userGroup: newUserGroup }));
+      const data = {
+        userGroup: newUserGroup,
+        userGroupRelation: userGroupRelations,
+      };
+
+      return res.json(ApiResponse.success(data));
     }
     catch (err) {
       logger.error('Error', err);

src/server/routes/index.js

@@ -140,7 +140,6 @@ module.exports = function(crowi, app) {
   // user-groups admin
   app.get('/admin/user-groups'             , loginRequired(crowi, app), middleware.adminRequired(), admin.userGroup.index);
   app.get('/admin/user-group-detail/:id'          , loginRequired(crowi, app), middleware.adminRequired(), admin.userGroup.detail);
-  app.post('/admin/user-group/create'      , form.admin.userGroupCreate, loginRequired(crowi, app), middleware.adminRequired(), csrf, admin.userGroup.create);
   app.post('/admin/user-group/:userGroupId/update', loginRequired(crowi, app), middleware.adminRequired(), csrf, admin.userGroup.update);
   app.post('/admin/user-group.remove' , loginRequired(crowi, app), middleware.adminRequired(), csrf, admin.userGroup.removeCompletely);