page list

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -13,11 +13,13 @@ class UserGroupDetailPage extends React.Component {
     const userGroup = JSON.parse(elem.getAttribute('data-user-group'));
     const userGroupRelations = JSON.parse(elem.getAttribute('data-user-group-relations'));
     const notRelatedUsers = JSON.parse(elem.getAttribute('data-not-related-users'));
+    const relatedPages = JSON.parse(elem.getAttribute('data-related-pages'));
 
     this.state = {
       userGroup,
       userGroupRelations,
       notRelatedUsers,
+      relatedPages,
     };
   }
 
@@ -37,7 +39,9 @@ class UserGroupDetailPage extends React.Component {
           notRelatedUsers={this.state.notRelatedUsers}
           userGroup={this.state.userGroup}
         />
-        <UserGroupPageList />
+        <UserGroupPageList
+          relatedPages={this.state.relatedPages}
+        />
       </div>
     );
   }

src/client/js/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -1,20 +1,64 @@
-import React from 'react';
-// import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import UserPicture from '../../User/UserPicture';
+import PageListMeta from '../../PageList/PageListMeta';
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
 
 class UserGroupPageList extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.renderPageList = this.renderPageList.bind(this);
+  }
+
+  renderPageList(page) {
+    return (
+      <li>
+        <UserPicture user={page.lastUpdateUser} className="picture img-circle" />
+        <a
+          href={page.path}
+          className="page-list-link"
+          data-path={page.path}
+        >
+          {decodeURIComponent(page.path)}
+        </a>
+        <PageListMeta page={page} />
+      </li>
+    );
+  }
+
   render() {
+    const { t } = this.props;
 
     return (
-      <div>
-        UserGroupPageList
-      </div>
+      <Fragment>
+        <legend className="m-t-20">{ t('Page') }</legend>
+        <div className="page-list">
+          <ul className="page-list-ul page-list-ul-flat">
+            {this.props.relatedPages.map((page) => { return this.renderPageList(page) })}
+          </ul>
+          {this.props.relatedPages.length === 0 ? <p>{ t('user_group_management.no_pages') }</p> : null}
+        </div>
+      </Fragment>
     );
   }
 
 }
 
 UserGroupPageList.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  relatedPages: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const UserGroupPageListWrapper = (props) => {
+  return createSubscribedElement(UserGroupPageList, props, [AppContainer]);
 };
 
-export default UserGroupPageList;
+export default withTranslation()(UserGroupPageListWrapper);

src/client/js/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -116,20 +116,18 @@ class UserGroupUserTable extends React.Component {
               );
             })}
 
-            {this.state.userGroupRelations.length === 0 ? (
-              <tr>
-                <td></td>
-                <td className="text-center">
-                  <button className="btn btn-default" type="button" onClick={this.openUserGroupUserModal}>
-                    <i className="ti-plus"></i>
-                  </button>
-                </td>
-                <td></td>
-                <td></td>
-                <td></td>
-                <td></td>
-              </tr>
-            ) : null}
+            <tr>
+              <td></td>
+              <td className="text-center">
+                <button className="btn btn-default" type="button" onClick={this.openUserGroupUserModal}>
+                  <i className="ti-plus"></i>
+                </button>
+              </td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
 
           </tbody>
         </table>

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

@@ -332,6 +332,9 @@ module.exports = (crowi) => {
    *                    userGroup:
    *                      type: object
    *                      description: the group to which a user was added
+   *                    userGroupRelation:
+   *                      type: object
+   *                      description: the associative entity between user and userGroup
    */
   router.post('/:id/users/:username', loginRequired(), adminRequired, validator.users.post, ApiV3FormValidator, async(req, res) => {
     const { id, username } = req.params;
@@ -394,6 +397,9 @@ module.exports = (crowi) => {
    *                    userGroup:
    *                      type: object
    *                      description: the group from which a user was removed
+   *                    userGroupRelation:
+   *                      type: object
+   *                      description: the associative entity between user and userGroup
    */
   router.delete('/:id/users/:username', loginRequired(), adminRequired, validator.users.delete, ApiV3FormValidator, async(req, res) => {
     const { id, username } = req.params;

src/server/views/admin/user-group-detail.html

@@ -37,6 +37,7 @@
       data-user-group="{{ userGroup|json }}"
       data-user-group-relations="{{ userGroupRelations|json }}"
       data-not-related-users="{{ notRelatedusers|json }}"
+      data-related-pages="{{ relatedPages|json }}"
     >
       <!-- そのまま start -->
       <a href="/admin/user-groups" class="btn btn-default">