edit form frontend

src/client/js/app.js

@@ -40,6 +40,7 @@ import RecentCreated from './components/RecentCreated/RecentCreated';
 import MyDraftList from './components/MyDraftList/MyDraftList';
 import UserPictureList from './components/User/UserPictureList';
 
+import UserGroupDetailPage from './components/Admin/UserGroupDetail/UserGroupDetailPage';
 import CustomCssEditor from './components/Admin/CustomCssEditor';
 import CustomScriptEditor from './components/Admin/CustomScriptEditor';
 import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
@@ -554,6 +555,19 @@ if (pageStatusAlertElem) {
 }
 
 // render for admin
+const adminUserGroupDetailElem = document.getElementById('admin-user-group-detail');
+if (adminUserGroupDetailElem != null) {
+  const userGroup = JSON.parse(adminUserGroupDetailElem.getAttribute('data-user-group'));
+  ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
+      <UserGroupDetailPage
+        crowi={crowi}
+        userGroup={userGroup}
+      />
+    </I18nextProvider>,
+    adminUserGroupDetailElem,
+  );
+}
 const customCssEditorElem = document.getElementById('custom-css-editor');
 if (customCssEditorElem != null) {
   // get input[type=hidden] element

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserGroupEditForm from './UserGroupEditForm';
+import UserGroupUserTable from './UserGroupUserTable';
+import UserGroupUserModal from './UserGroupUserModal';
+import UserGroupPageList from './UserGroupPageList';
+
+class UserGroupDetailPage extends React.Component {
+
+  render() {
+
+    return (
+      <div>
+        <a href="/admin/user-groups" className="btn btn-default">
+          <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
+        グループ一覧に戻る
+        </a>
+        <UserGroupEditForm
+          crowi={this.props.crowi}
+          userGroup={this.props.userGroup}
+        />
+        <UserGroupUserTable />
+        <UserGroupUserModal />
+        <UserGroupPageList />
+      </div>
+    );
+  }
+
+}
+
+UserGroupDetailPage.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  userGroup: PropTypes.object.isRequired,
+};
+
+export default UserGroupDetailPage;

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import dateFnsFormat from 'date-fns/format';
+
+class UserGroupEditForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: props.userGroup.name,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.validateForm = this.validateForm.bind(this);
+  }
+
+  handleChange(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  async handleSubmit(e) {
+    e.preventDefault();
+    alert(`new name is ${this.state.name}`);
+    this.setState({ name: '' });
+
+    // try {
+    //   // action="/admin/user-group/{{userGroup.id}}/update"
+    //   const res = await this.props.crowi.apiGet('/admin/user-groups');
+    //   if (res.ok) {
+    //     groups = res.userGroups;
+    //   }
+    //   else {
+    //     throw new Error('Unable to fetch groups from server');
+    //   }
+    // }
+    // catch (err) {
+    //   this.handleError(err);
+    // }
+  }
+
+  validateForm() {
+    return this.state.name !== '';
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className="m-t-20 form-box">
+        <form className="form-horizontal" onSubmit={this.handleSubmit}>
+          <fieldset>
+            <legend>基本情報</legend>
+            <div className="form-group">
+              <label htmlFor="name" className="col-sm-2 control-label">{ t('Name') }</label>
+              <div className="col-sm-4">
+                <input className="form-control" type="text" name="name" value={this.state.name} onChange={this.handleChange} disabled={!this.validateForm()} />
+              </div>
+            </div>
+            <div className="form-group">
+              <label className="col-sm-2 control-label">{ t('Created') }</label>
+              <div className="col-sm-4">
+                <input className="form-control" type="text" disabled value={dateFnsFormat(new Date(this.props.userGroup.createdAt), 'YYYY-MM-DD')} />
+              </div>
+            </div>
+            <div className="form-group">
+              <div className="col-sm-offset-2 col-sm-10">
+                <input type="hidden" name="_csrf" value="{{ csrf() }}" />
+                <button type="submit" className="btn btn-primary">{ t('Update') }</button>
+              </div>
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    );
+  }
+
+}
+
+UserGroupEditForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  userGroup: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(UserGroupEditForm);

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

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

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

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

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

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

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

@@ -31,12 +31,19 @@
       {% include './widget/menu.html' with {current: 'user-group'} %}
     </div>
 
-    <div class="col-md-9">
+    <div
+      id="admin-user-group-detail"
+      class="col-md-9"
+      data-user-group="{{ userGroup|json }}"
+    >
+      <!-- そのまま start -->
       <a href="/admin/user-groups" class="btn btn-default">
         <i class="icon-fw ti-arrow-left" aria-hidden="true"></i>
         グループ一覧に戻る
       </a>
+      <!-- そのまま end -->
 
+      <!-- UserGroupUserModal start -->
       <div class="modal fade" id="admin-add-user-group-relation-modal">
         <div class="modal-dialog">
           <div class="modal-content">
@@ -87,7 +94,9 @@
         </div>
         <!-- /.modal-dialog -->
       </div>
+      <!-- UserGroupUserModal end -->
 
+      <!-- UserGroupEditForm start -->
       <div class="m-t-20 form-box">
         <form action="/admin/user-group/{{userGroup.id}}/update" method="post" class="form-horizontal" role="form">
           <fieldset>
@@ -113,7 +122,9 @@
           </fieldset>
         </form>
       </div>
+      <!-- UserGroupEditForm end -->
 
+      <!-- UserGroupUserTable start -->
       <legend class="m-t-20">ユーザー一覧</legend>
 
       <table class="table table-bordered table-user-list">
@@ -180,15 +191,18 @@
           {% endif %}
         </tbody>
       </table>
+      <!-- UserGroupUserTable end -->
 
       <!-- {% include '../widget/pager.html' with {path: "/admin/user-group-detail", pager: pager} %} -->
 
       <legend class="m-t-20">ページ一覧</legend>
 
+      <!-- UserGroupPageList start -->
       <div class="page-list">
         {% if relatedPages.length == 0 %}<p>グループが閲覧権限を保有するページはありません</p>{% endif %}
         {% include '../widget/page_list.html' with { pages: relatedPages } %}
       </div>
+      <!-- UserGroupPageList end -->
 
     </div>
   </div>