Cleanup permission grouping function. Checkboxes checked based on available permissions.

Author: Matthew Grill

src/components/05_pages/Permissions/Permissions.jsx

@@ -19,6 +19,16 @@ const Permissions = class Permissions extends Component {
       )
       .catch(console.error);
   }
+  groupPermissions = permissions =>
+    Object.entries(
+      Object.keys(permissions)
+        .map(key => permissions[key])
+        .reduce((acc, cur) => {
+          acc[cur.provider] = acc[cur.provider] || [];
+          acc[cur.provider].push(cur);
+          return acc;
+        }, {}),
+    );
   render() {
     return (
       <Fragment>
@@ -37,20 +47,12 @@ const Permissions = class Permissions extends Component {
               </tr>
             </thead>
             <tbody>
-              {Object.entries(
-                Object.keys(this.state.permissions)
-                  .map(key => this.state.permissions[key])
-                  .reduce((acc, cur) => {
-                    acc[cur.provider] = acc[cur.provider] || [];
-                    acc[cur.provider].push(cur);
-                    return acc;
-                  }, {}),
-              ).map(
+              {this.groupPermissions(this.state.permissions).map(
                 ([permissionGroupName, permissions]) =>
                   permissions.length && (
                     <Fragment key={`fragment-${permissionGroupName}`}>
                       <tr key={`permissionGroup-${permissionGroupName}`}>
-                        <td colSpan="3">
+                        <td colSpan={this.state.roles.length + 1}>
                           <b>{permissionGroupName}</b>
                         </td>
                       </tr>
@@ -61,15 +63,25 @@ const Permissions = class Permissions extends Component {
                           }`}
                         >
                           <td>{permission.title}</td>
-                          <td>
-                            <input type="checkbox" />
-                          </td>
-                          <td>
-                            <input type="checkbox" />
-                          </td>
-                          <td>
-                            <input type="checkbox" />
-                          </td>
+                          {this.state.roles.map(({ attributes }) => (
+                            <td
+                              key={`role-${attributes.id}-permission-${
+                                permission.id
+                              }`}
+                            >
+                              {attributes.is_admin &&
+                              attributes.id === 'administrator' ? (
+                                <input type="checkbox" checked />
+                              ) : (
+                                <input
+                                  type="checkbox"
+                                  checked={attributes.permissions.includes(
+                                    permission.id,
+                                  )}
+                                />
+                              )}
+                            </td>
+                          ))}
                         </tr>
                       ))}
                     </Fragment>