feat(admin-ui): design the layout for role-permission mapping #336

plugins/admin/components/Mapping/ItemRow.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Button, Row, Col, FormGroup } from '../../../../app/components'
+
+function ItemRow({ key, candidate, permission }) {
+  function doRemove(item) {
+    //confirm('=============' + item)
+  }
+  return (
+    <div key={key}>
+      <FormGroup row />
+      <Row>
+        <Col sm={10}>{permission}</Col>
+        <Col sm={2}>
+          <Button
+            type="button"
+            color="danger"
+            style={{ margin: '1px', float: 'right', padding: '0px' }}
+            onClick={doRemove(permission)}
+          >
+            <i className="fa fa-trash mr-2"></i>
+            Remove
+          </Button>
+        </Col>
+      </Row>
+      <FormGroup row />
+    </div>
+  )
+}
+
+export default ItemRow

plugins/admin/components/Mapping/MappingItem.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import {
+  Row,
+  Badge,
+  Col,
+  FormGroup,
+  Accordion,
+} from '../../../../app/components'
+import ItemRow from './ItemRow'
+
+function MappingItem({ candidate, key }) {
+  return (
+    <div key={key}>
+      <FormGroup row />
+      <Row>
+        <Col sm={12}>
+          <Accordion className="mb-12">
+            <Accordion.Header className="text-info">
+              <Accordion.Indicator className="mr-2" />
+              {candidate.role}
+              <Badge
+                color="info"
+                style={{
+                  float: 'right',
+                }}
+              >
+                {candidate.permissions.length}
+              </Badge>
+            </Accordion.Header>
+            <Accordion.Body>
+              {candidate.permissions.map((perm, id) => (
+                <ItemRow key={id} candiadate={candidate} permission={perm}></ItemRow>
+              ))}
+            </Accordion.Body>
+          </Accordion>
+        </Col>
+        <FormGroup row />
+      </Row>
+    </div>
+  )
+}
+
+export default MappingItem

plugins/admin/components/Mapping/MappingPage.js

@@ -1,27 +1,18 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import {
-  Card,
-  CardBody,
-  FormGroup,
-  Row,
-  Badge,
-  Col,
-  Accordion,
-} from '../../../../app/components'
+import { Card, CardBody, FormGroup } from '../../../../app/components'
 import GluuViewWrapper from '../../../../app/routes/Apps/Gluu/GluuViewWrapper'
 import GluuRibbon from '../../../../app/routes/Apps/Gluu/GluuRibbon'
-import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
+import MappingItem from './MappingItem'
 import { getMapping } from '../../redux/actions/MappingActions'
 import {
   hasPermission,
   buildPayload,
   ROLE_READ,
 } from '../../../../app/utils/PermChecker'
 
-function MappingPage({ mapping, permissions, loading, dispatch }) {
-  console.log('=============' + loading)
+function MappingPage({ mapping, permissions, dispatch }) {
   const { t } = useTranslation()
   const options = []
   const userAction = {}
@@ -38,31 +29,7 @@ function MappingPage({ mapping, permissions, loading, dispatch }) {
         <FormGroup row />
         <GluuViewWrapper canShow={hasPermission(permissions, ROLE_READ)}>
           {mapping.map((candidate, key) => (
-            <Row key={key}>
-              <Col sm={12}>
-                <Accordion className="mb-12">
-                  <Accordion.Header className="text-info">
-                    <Accordion.Indicator className="mr-2" />
-                    {candidate.role}
-                    <Badge
-                      color="info"
-                      style={{
-                        float: 'right',
-                        background: applicationStyle.buttonStyle,
-                      }}
-                    >
-                      {candidate.permissions.length}
-                    </Badge>
-                  </Accordion.Header>
-
-                  <Accordion.Body>
-                    {candidate.permissions.map((perm, id) => (
-                      <div key={id}>{perm}</div>
-                    ))}
-                  </Accordion.Body>
-                </Accordion>
-              </Col>
-            </Row>
+            <MappingItem key={key} candidate={candidate} />
           ))}
         </GluuViewWrapper>
       </CardBody>
@@ -73,7 +40,6 @@ function MappingPage({ mapping, permissions, loading, dispatch }) {
 const mapStateToProps = (state) => {
   return {
     mapping: state.mappingReducer.items,
-    loading: state.mappingReducer.loading,
     permissions: state.authReducer.permissions,
   }
 }