feat: update ‘developer management’ on admin portal

reapit · Jul 16, 2020 · e02ce38 · e02ce38
1 parent 1b80f58
commit e02ce38
Show file tree

Hide file tree

Showing 33 changed files with 1,225 additions and 139 deletions.
diff --git a/packages/admin-portal/package.json b/packages/admin-portal/package.json
@@ -39,7 +39,7 @@
     "snyk": "^1.341.1"
   },
   "devDependencies": {
-    "@reapit/foundations-ts-definitions": "0.0.85",
+    "@reapit/foundations-ts-definitions": "0.0.86",
     "@types/nanoid": "^2.1.0",
     "redux-mock-store": "^1.5.4"
   },

diff --git a/packages/admin-portal/src/actions/developer-set-status.ts b/packages/admin-portal/src/actions/developer-set-status.ts
@@ -1,8 +1,14 @@
 import { actionCreator } from '../utils/actions'
 import ActionTypes from '../constants/action-types'
-import { DeveloperModel } from '@reapit/foundations-ts-definitions'
+import { UpdateDeveloperModel } from '@reapit/foundations-ts-definitions'
 
-export const developerSetStatusRequest = actionCreator<DeveloperModel>(ActionTypes.DEVELOPER_SET_STATUS_REQUEST)
+export type UpdateDeveloperModelRequest = {
+  callback?: (success: boolean) => void
+} & UpdateDeveloperModel
+
+export const developerSetStatusRequest = actionCreator<UpdateDeveloperModelRequest>(
+  ActionTypes.DEVELOPER_SET_STATUS_REQUEST,
+)
 export const developerSetStatusRequestLoading = actionCreator<void>(ActionTypes.DEVELOPER_SET_STATUS_REQUEST_LOADING)
 export const developerSetStatusRequestFailure = actionCreator<void>(ActionTypes.DEVELOPER_SET_STATUS_REQUEST_FAILURE)
 export const developerSetStatusRequestSuccess = actionCreator<void>(ActionTypes.DEVELOPER_SET_STATUS_REQUEST_SUCCESS)

diff --git a/...rc/components/pages/apps-management/__tests__/__snapshots__/apps-management.test.tsx.snap b/...rc/components/pages/apps-management/__tests__/__snapshots__/apps-management.test.tsx.snap
@@ -226,7 +226,7 @@ exports[`admin-apps AdminApprovals should match a snapshot 1`] = `
                               validate={null}
                             >
                               <div
-                                className="field"
+                                className="field "
                               >
                                 <div
                                   className="control "
@@ -273,7 +273,7 @@ exports[`admin-apps AdminApprovals should match a snapshot 1`] = `
                               validate={null}
                             >
                               <div
-                                className="field"
+                                className="field "
                               >
                                 <div
                                   className="control "
@@ -320,7 +320,7 @@ exports[`admin-apps AdminApprovals should match a snapshot 1`] = `
                               validate={null}
                             >
                               <div
-                                className="field"
+                                className="field "
                               >
                                 <div
                                   className="control "

diff --git a/packages/admin-portal/src/components/pages/devs-management/devs-management.tsx b/packages/admin-portal/src/components/pages/devs-management/devs-management.tsx
@@ -20,13 +20,14 @@ import {
 } from '@reapit/elements'
 import Routes from '@/constants/routes'
 import DevsManagementFilterForm, { DevsManagementFilterFormValues } from '@/components/ui/devs-management-filter-form'
-import SetDeveloperStatusModal from '@/components/ui/developer-set-status'
+// import SetDeveloperStatusModal from '@/components/ui/developer-set-status'
 import { DeveloperModel } from '@reapit/foundations-ts-definitions'
 import { devsManagementRequestData, DevsManagementRequestDataValues } from '@/actions/devs-management'
 import qs from 'querystring'
 import { selectDevsManagement } from '@/selector/admin'
 import { Dispatch } from 'redux'
 import { cleanObject } from '@reapit/utils'
+import StatusModal from './set-status-modal/status-modal'
 
 // export interface DevsManagementMappedActions {
 //   fetchData: (requestdata: DevsManagementRequestDataValues) => void
@@ -107,25 +108,43 @@ export const DevsManagement: React.FC = () => {
   const pageNo = pageNumber - 1
   const pageNoTimesRevsions = pageNo * REVISIONS_PER_PAGE
   const HeaderCell = ({ row: { index } }) => <div style={{ width: 'auto' }}>{pageNoTimesRevsions + index + 1}</div>
-  const ButtonCell = ({ row: { original } }) => {
-    const { id, isInactive } = original as DeveloperModel
 
+  // Note: Comment because not use in the moment
+
+  // const ButtonCell = ({ row: { original } }) => {
+  //   const { id, isInactive } = original as DeveloperModel
+
+  //   return (
+  //     <Button
+  //       type="button"
+  //       variant="primary"
+  //       onClick={() => {
+  //         if (id) {
+  //           setDeveloper({ ...original, isInactive: isInactive! })
+  //           setIsSetStatusModalOpen(true)
+  //         }
+  //       }}
+  //     >
+  //       {isInactive ? 'Enable' : 'Deactive'}
+  //     </Button>
+  //   )
+  // }
+
+  const CreatedCell = ({ cell: { value } }) => <p>{toLocalTime(value)}</p>
+  const StatusBtnCell = ({ row: { original } }) => {
     return (
       <Button
         type="button"
         variant="primary"
         onClick={() => {
-          if (id) {
-            setDeveloper({ ...original, isInactive: isInactive! })
-            setIsSetStatusModalOpen(true)
-          }
+          setDeveloper({ ...original })
+          setIsSetStatusModalOpen(true)
         }}
       >
-        {isInactive ? 'Enable' : 'Deactive'}
+        Status
       </Button>
     )
   }
-  const CreatedCell = ({ cell: { value } }) => <p>{toLocalTime(value)}</p>
 
   const columns = [
     {
@@ -143,17 +162,20 @@ export const DevsManagement: React.FC = () => {
       accessor: 'created',
       Cell: CreatedCell,
     },
+    {
+      Header: 'Status',
+      accessor: 'status',
+      columnProps: {
+        className: 'capitalize',
+      },
+    },
     {
       Header: '',
       id: 'buttonColumn',
-      Cell: ButtonCell,
+      Cell: StatusBtnCell,
     },
   ]
 
-  if (loading || !data) {
-    return <Loader />
-  }
-
   if (!loading && data?.data?.length === 0) {
     return (
       <React.Fragment>
@@ -175,24 +197,31 @@ export const DevsManagement: React.FC = () => {
         <H3>Developer Management</H3>
       </Section>
       <DevsManagementFilterForm filterValues={filterValues} onSearch={onSearch} />
-      <Section>
-        <Table scrollable={true} loading={false} data={data.data || []} columns={columns} />
-      </Section>
-      <Section>
-        <div>Total: {data.totalCount}</div>
-      </Section>
-      <Pagination
-        onChange={onPageChange}
-        totalCount={data.totalCount}
-        pageSize={data.pageSize}
-        pageNumber={data.pageNumber}
-      />
-      <SetDeveloperStatusModal
+      {loading || !data ? (
+        <Loader />
+      ) : (
+        <>
+          <Section>
+            <Table scrollable={true} loading={false} data={data.data || []} columns={columns} />
+          </Section>
+          <Section>
+            <div>Total: {data.totalCount}</div>
+          </Section>
+          <Pagination
+            onChange={onPageChange}
+            totalCount={data.totalCount}
+            pageSize={data.pageSize}
+            pageNumber={data.pageNumber}
+          />
+          {/* <SetDeveloperStatusModal
         visible={isSetStatusModalOpen}
         afterClose={resetModal(false)}
         onSuccess={resetModal(true)}
         developer={developer}
-      />
+      />  */}
+          <StatusModal visible={isSetStatusModalOpen} developer={developer} resetModal={resetModal} />
+        </>
+      )}
     </ErrorBoundary>
   )
 }