Add Status Labels

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -20,92 +20,92 @@ class UserMenu extends React.Component {
 
   render() {
     const { t } = this.props;
-    // const users = this.props.users;
+
     let contentOfStatus;
-    // let adminMenu;
-
-    // {this.props.users.forEach((user) => {
-    //   if (user.status === 1) {
-    //     contentOfStatus = (
-    //       <a onClick={this.activateUser}>
-    //         <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
-    //       </a>
-    //     );
-
-    //   if (user.status === 2) {
-    //     contentOfStatus = (
-    //       <li>
-    //         { username !== user.username
-    //           ? (
-    //             <li>
-    //               <a onClick={this.susupendUser}>
-    //                 <i className="icon-fw icon-user-unfollow"></i> { t('user_management.deactivate_account') }
-    //               </a>
-    //             </li>
-    //           )
-    //           : (
-    //             <li>
-    //               <a disabled>
-    //                 <i className="icon-fw icon-ban"></i> { t('user_management.deactivate_account') }
-    //               </a>
-    //               <p className="alert alert-danger m-l-10 m-r-10 p-10">{ t('user_management.your_own') }</p>
-    //             </li>
-    //           )
-    //         }
-    //       </li>
-    //     );
-
-    //   if (user.status === 3) {
-    //     contentOfStatus = (
-    //       <a onClick={this.activateUser}>
-    //         <i className="icon-fw icon-action-redo"></i> { t('Undo') }
-    //       </a>
-    //     );
-
-    //   if (user.status === 1 || user.status === 5) {
-    //     contentOfStatus = (
-    //       <li className="dropdown-button">
-    //         <a onClick={this.removeUser}>
-    //           <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
-    //         </a>
-    //       </li>
-    //     );
-    //   }
-
-    //   if (user.admin === true) {
-    //     adminMenu = (
-    //       <li>
-    //         { username !== user.username
-    //           ? (
-    //             <li>
-    //               <a onClick={this.removeFromAdmin}>
-    //                 <i className="icon-fw icon-user-unfollow"></i> { t('user_management.remove_admin_access') }
-    //               </a>
-    //             </li>
-    //           )
-    //           : (
-    //             <li>
-    //               <a disabled>
-    //                 <i className="icon-fw icon-user-unfollow"></i> { t('user_management.remove_admin_access') }
-    //               </a>
-    //               <p className="alert alert-danger m-l-10 m-r-10 p-10">{ t('user_management.cannot_remove') }</p>
-    //             </li>
-    //           )
-    //         }
-    //       </li>
-    //     );
-    //   }
-
-    //   else {
-    //     adminMenu = (
-    //       <li>
-    //         <a onClick={this.giveAdminAccess}>
-    //           <i className="icon-fw icon-magic-wand"></i> { t('user_management.give_admin_access') }
-    //         </a>
-    //       </li>
-    //     );
-    //   }
-    // }}
+    this.props.users.forEach((user) => {
+      if (user.status === 1) {
+        contentOfStatus = (
+          <a onClick={this.activateUser}>
+            <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
+          </a>
+        );
+      }
+      if (user.status === 2) {
+        contentOfStatus = (
+          <li>
+            { user.name !== user.username
+              ? (
+                <li>
+                  <a onClick={this.susupendUser}>
+                    <i className="icon-fw icon-user-unfollow"></i> { t('user_management.deactivate_account') }
+                  </a>
+                </li>
+              )
+              : (
+                <li>
+                  <a disabled>
+                    <i className="icon-fw icon-ban"></i> { t('user_management.deactivate_account') }
+                  </a>
+                  <p className="alert alert-danger m-l-10 m-r-10 p-10">{ t('user_management.your_own') }</p>
+                </li>
+              )
+            }
+          </li>
+        );
+      }
+      if (user.status === 3) {
+        contentOfStatus = (
+          <a onClick={this.activateUser}>
+            <i className="icon-fw icon-action-redo"></i> { t('Undo') }
+          </a>
+        );
+      }
+      if (user.status === 1 || user.status === 5) {
+        contentOfStatus = (
+          <li className="dropdown-button">
+            <a onClick={this.removeUser}>
+              <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
+            </a>
+          </li>
+        );
+      }
+    });
+
+    let adminMenu;
+    this.props.users.forEach((user) => {
+      if (user.admin === true || user.status === 2) {
+        adminMenu = (
+          <li>
+            { user.name !== user.username
+              ? (
+                <li>
+                  <a onClick={this.removeFromAdmin}>
+                    <i className="icon-fw icon-user-unfollow"></i> { t('user_management.remove_admin_access') }
+                  </a>
+                </li>
+              )
+              : (
+                <li>
+                  <a disabled>
+                    <i className="icon-fw icon-user-unfollow"></i> { t('user_management.remove_admin_access') }
+                  </a>
+                  <p className="alert alert-danger m-l-10 m-r-10 p-10">{ t('user_management.cannot_remove') }</p>
+                </li>
+              )
+            }
+          </li>
+        );
+      }
+      if (user.admin === false || user.status === 2) {
+        adminMenu = (
+          <li>
+            <a onClick={this.giveAdminAccess}>
+              <i className="icon-fw icon-magic-wand"></i> { t('user_management.give_admin_access') }
+            </a>
+          </li>
+        );
+      }
+    });
 
     return (
       <Fragment>
@@ -130,7 +130,7 @@ class UserMenu extends React.Component {
             <li className="divider"></li>
             <li className="dropdown-header">{ t('status') }</li>
             <li>{contentOfStatus}</li>
-            {/* <li>{user.status === 2 && adminMenu}</li> */}
+            <li>{adminMenu}</li>
           </ul>
         </div>
         {/* password reset modal */}

src/client/js/components/Admin/Users/UserTable.jsx

@@ -21,6 +21,46 @@ class UserTable extends React.Component {
 
   render() {
     const { t } = this.props;
+    let userStatusLabel;
+
+    this.props.users.forEach((user) => {
+      if (user.status === 1) {
+        userStatusLabel = (
+          <span className="label label-info">
+            Approval Pending
+          </span>
+        );
+      }
+      if (user.status === 2) {
+        userStatusLabel = (
+          <span className="label label-success">
+            Active
+          </span>
+        );
+      }
+      if (user.status === 3) {
+        userStatusLabel = (
+          <span className="label label-warning">
+            Suspended
+          </span>
+        );
+      }
+      if (user.status === 4) {
+        userStatusLabel = (
+          <span className="label label-danger">
+            Deleted
+          </span>
+        );
+      }
+      if (user.status === 5) {
+        userStatusLabel = (
+          <span className="label label-info">
+            Invited
+          </span>
+        );
+      }
+    });
+
 
     return (
       <Fragment>
@@ -47,9 +87,7 @@ class UserTable extends React.Component {
                     <UserPicture user={user} className="picture img-circle" />
                     {user.admin && <span className="label label-inverse label-admin ml-2">{ t('administrator') }</span>}
                   </td>
-                  <td>
-                    {/* TODO ステータスを表示できるようにする */}
-                  </td>
+                  <td>{userStatusLabel}</td>
                   <td>
                     <strong>{user.username}</strong>
                   </td>