Merge pull request #3 from openimis/feature/OM-83

OM-83: create details page of voucher
openimis · Nov 28, 2023 · 058de77 · 058de77
2 parents fe6030e + 0042c83
commit 058de77
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 7 deletions.
diff --git a/src/actions.js b/src/actions.js
@@ -3,6 +3,7 @@ import {
   graphql,
 } from '@openimis/fe-core';
 import { ACTION_TYPE } from './reducer';
+import { CLEAR } from './utils/action-type';
 
 const WORKER_VOUCHER_PROJECTION = (modulesManager) => [
   'id',
@@ -21,3 +22,14 @@ export function fetchWorkerVouchers(modulesManager, params) {
   const payload = formatPageQueryWithCount('workerVoucher', queryParams, WORKER_VOUCHER_PROJECTION(modulesManager));
   return graphql(payload, ACTION_TYPE.SEARCH_WORKER_VOUCHERS);
 }
+
+export function fetchWorkerVoucher(modulesManager, params) {
+  const payload = formatPageQueryWithCount('workerVoucher', params, WORKER_VOUCHER_PROJECTION(modulesManager));
+  return graphql(payload, ACTION_TYPE.GET_WORKER_VOUCHER);
+}
+
+export const clearWorkerVoucher = () => (dispatch) => {
+  dispatch({
+    type: CLEAR(ACTION_TYPE.GET_WORKER_VOUCHER),
+  });
+};
diff --git a/src/components/VoucherDetailsEmployer.js b/src/components/VoucherDetailsEmployer.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Grid, Divider } from '@material-ui/core';
+
+import { TextInput } from '@openimis/fe-core';
+
+function VoucherDetailsEmployer({
+  workerVoucher, classes, readOnly,
+}) {
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.employer.code"
+            value={workerVoucher?.policyholder?.code}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.employer.tradename"
+            value={workerVoucher?.policyholder?.tradeName}
+            readOnly={readOnly}
+          />
+        </Grid>
+      </Grid>
+      <Divider style={{ margin: '12px 0' }} />
+    </>
+  );
+}
+
+export default VoucherDetailsEmployer;
diff --git a/src/components/VoucherDetailsPanel.js b/src/components/VoucherDetailsPanel.js
@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { Divider, Grid, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+
+import { FormattedMessage } from '@openimis/fe-core';
+import VoucherDetailsEmployer from './VoucherDetailsEmployer';
+import VoucherDetailsVoucher from './VoucherDetailsVoucher';
+import VoucherDetailsWorker from './VoucherDetailsWorker';
+
+const useStyles = makeStyles((theme) => ({
+  tableTitle: theme.table.title,
+  item: theme.paper.item,
+  fullHeight: {
+    height: '100%',
+  },
+}));
+
+function VoucherDetailsPanel({ workerVoucher, readOnly = true, formatMessage }) {
+  const classes = useStyles();
+
+  return (
+    <>
+      <Grid container className={classes.tableTitle}>
+        <Grid
+          container
+          align="start"
+          justify="center"
+          direction="column"
+          className={classes.fullHeight}
+        >
+          <Grid item>
+            <Typography>
+              <FormattedMessage module="workerVoucher" id="workerVoucher.VoucherDetailsPanel.subtitle" />
+            </Typography>
+          </Grid>
+        </Grid>
+      </Grid>
+      <Divider />
+      <VoucherDetailsVoucher
+        workerVoucher={workerVoucher}
+        readOnly={readOnly}
+        classes={classes}
+        formatMessage={formatMessage}
+      />
+      <VoucherDetailsWorker
+        workerVoucher={workerVoucher}
+        readOnly={readOnly}
+        classes={classes}
+      />
+      <VoucherDetailsEmployer
+        workerVoucher={workerVoucher}
+        readOnly={readOnly}
+        classes={classes}
+      />
+    </>
+  );
+}
+
+export default VoucherDetailsPanel;
diff --git a/src/components/VoucherDetailsVoucher.js b/src/components/VoucherDetailsVoucher.js
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { Grid, Divider } from '@material-ui/core';
+
+import { PublishedComponent, TextInput } from '@openimis/fe-core';
+import WorkerVoucherStatusPicker from '../pickers/WorkerVoucherStatusPicker';
+
+function VoucherDetailsVoucher({
+  workerVoucher, classes, readOnly, formatMessage,
+}) {
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.code"
+            value={workerVoucher?.code}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <WorkerVoucherStatusPicker
+            nullLabel={formatMessage('workerVoucher.placeholder.any')}
+            withLabel
+            value={workerVoucher?.status}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <PublishedComponent
+            pubRef="core.DatePicker"
+            module="workerVoucher"
+            label="workerVoucher.assignedDate"
+            value={workerVoucher?.assignedDate}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <PublishedComponent
+            pubRef="core.DatePicker"
+            module="workerVoucher"
+            label="workerVoucher.expiryDate"
+            value={workerVoucher?.expiryDate}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <PublishedComponent
+            pubRef="core.DatePicker"
+            module="workerVoucher"
+            label="workerVoucher.createdDate"
+            value={workerVoucher?.dateCreated}
+            readOnly={readOnly}
+          />
+        </Grid>
+      </Grid>
+      <Divider style={{ margin: '12px 0' }} />
+    </>
+  );
+}
+
+export default VoucherDetailsVoucher;
diff --git a/src/components/VoucherDetailsWorker.js b/src/components/VoucherDetailsWorker.js
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Grid, Divider } from '@material-ui/core';
+
+import { PublishedComponent, TextInput } from '@openimis/fe-core';
+
+function VoucherDetailsWorker({
+  workerVoucher, classes, readOnly,
+}) {
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.worker.code"
+            value={workerVoucher?.insuree?.chfId}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.worker.lastName"
+            value={workerVoucher?.insuree?.lastName}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <TextInput
+            module="workerVoucher"
+            label="workerVoucher.worker.otherNames"
+            value={workerVoucher?.insuree?.otherNames}
+            readOnly={readOnly}
+          />
+        </Grid>
+        <Grid item xs={3} className={classes.item}>
+          <PublishedComponent
+            pubRef="core.DatePicker"
+            module="workerVoucher"
+            label="workerVoucher.worker.dob"
+            value={workerVoucher?.insuree?.dob}
+            readOnly={readOnly}
+          />
+        </Grid>
+      </Grid>
+      <Divider style={{ margin: '12px 0' }} />
+    </>
+  );
+}
+
+export default VoucherDetailsWorker;
diff --git a/src/components/VoucherSearcher.js b/src/components/VoucherSearcher.js
@@ -58,7 +58,7 @@ function VoucherSearcher() {
   const rowIdentifier = (workerVoucher) => workerVoucher.uuid;
 
   const openWorkerVoucher = (workerVoucher) => rights.includes(VOUCHER_RIGHT_SEARCH) && history.push(
-    `/${modulesManager.getRef(REF_ROUTE_WORKER_VOUCHER)}/${workerVoucher?.uuid}}`,
+    `/${modulesManager.getRef(REF_ROUTE_WORKER_VOUCHER)}/${workerVoucher?.uuid}`,
   );
 
   const onDoubleClick = (workerVoucher) => openWorkerVoucher(workerVoucher);

diff --git a/src/pages/VoucherDetailsPage.js b/src/pages/VoucherDetailsPage.js
@@ -1,10 +1,70 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { makeStyles } from '@material-ui/styles';
+
+import {
+  Form,
+  Helmet,
+  useHistory,
+  useModulesManager,
+  useTranslations,
+} from '@openimis/fe-core';
+import { clearWorkerVoucher, fetchWorkerVoucher } from '../actions';
+import { EMPTY_STRING, MODULE_NAME, VOUCHER_RIGHT_SEARCH } from '../constants';
+import VoucherDetailsPanel from '../components/VoucherDetailsPanel';
+
+const useStyles = makeStyles((theme) => ({
+  page: theme.page,
+}));
+
+function VoucherDetailsPage({ match }) {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const modulesManager = useModulesManager();
+  const history = useHistory();
+  const { formatMessage, formatMessageWithValues } = useTranslations(MODULE_NAME, modulesManager);
+  const rights = useSelector((state) => (state.core?.user?.i_user?.rights ?? []));
+  const workerVoucherUuid = match?.params?.voucher_uuid;
+  const { workerVoucher, fetchingWorkerVoucher, errorWorkerVoucher } = useSelector((state) => state.workerVoucher);
+
+  const titleParams = (workerVoucher) => ({
+    code: workerVoucher?.code ?? EMPTY_STRING,
+  });
+
+  useEffect(() => {
+    try {
+      if (workerVoucherUuid) {
+        const params = [`id: "${workerVoucherUuid}"`];
+        dispatch(fetchWorkerVoucher(modulesManager, params));
+      }
+    } catch (error) {
+      throw new Error(`[VOUCHER_DETAILS_PAGE]: Fetching worker voucher failed. ${error}`);
+    }
+
+    return () => dispatch(clearWorkerVoucher());
+  }, [workerVoucherUuid]);
 
-function VoucherDetailsPage() {
   return (
-    <div>
-      VoucherDetailsPage
-    </div>
+    rights.includes(VOUCHER_RIGHT_SEARCH) && (
+      <div className={classes.page}>
+        <Helmet title={formatMessageWithValues('workerVoucher.VoucherDetailsPage.title', titleParams(workerVoucher))} />
+        <Form
+          module="workerVoucher"
+          title={formatMessageWithValues('workerVoucher.VoucherDetailsPage.title', titleParams(workerVoucher))}
+          titleParams={titleParams(workerVoucher)}
+          openDirty
+          workerVoucher={workerVoucher}
+          fetchingWorkerVoucher={fetchingWorkerVoucher}
+          errorWorkerVoucher={errorWorkerVoucher}
+          back={() => history.goBack()}
+          HeadPanel={VoucherDetailsPanel}
+          readOnly
+          formatMessage={formatMessage}
+          rights={rights}
+        />
+      </div>
+    )
   );
 }
 

diff --git a/src/reducer.js b/src/reducer.js
@@ -8,11 +8,13 @@ import {
   parseData,
 } from '@openimis/fe-core';
 import {
+  CLEAR,
   ERROR, REQUEST, SUCCESS,
 } from './utils/action-type';
 
 export const ACTION_TYPE = {
   SEARCH_WORKER_VOUCHERS: 'WORKER_VOUCHER_WORKER_VOUCHERS',
+  GET_WORKER_VOUCHER: 'WORKER_VOUCHER_GET_WORKER_VOUCHER',
 };
 
 const STORE_STATE = {
@@ -22,6 +24,10 @@ const STORE_STATE = {
   workerVouchers: [],
   workerVouchersPageInfo: {},
   workerVouchersTotalCount: 0,
+  fetchingWorkerVoucher: false,
+  fetchedWorkerVoucher: false,
+  workerVoucher: {},
+  errorWorkerVoucher: null,
 };
 
 function reducer(
@@ -58,6 +64,39 @@ function reducer(
         fetchingWorkerVouchers: false,
         errorWorkerVouchers: formatServerError(action.payload),
       };
+    case REQUEST(ACTION_TYPE.GET_WORKER_VOUCHER):
+      return {
+        ...state,
+        fetchingWorkerVoucher: true,
+        fetchedWorkerVoucher: false,
+        workerVoucher: {},
+        errorWorkerVoucher: null,
+      };
+    case SUCCESS(ACTION_TYPE.GET_WORKER_VOUCHER):
+      return {
+        ...state,
+        fetchingWorkerVoucher: false,
+        fetchedWorkerVoucher: true,
+        workerVoucher: parseData(action.payload.data.workerVoucher)?.map((voucher) => ({
+          ...voucher,
+          uuid: decodeId(voucher.id),
+        }))?.[0],
+        errorWorkerVoucher: formatGraphQLError(action.payload),
+      };
+    case ERROR(ACTION_TYPE.GET_WORKER_VOUCHER):
+      return {
+        ...state,
+        fetchingWorkerVoucher: false,
+        errorWorkerVoucher: formatServerError(action.payload),
+      };
+    case CLEAR(ACTION_TYPE.GET_WORKER_VOUCHER):
+      return {
+        ...state,
+        fetchingWorkerVoucher: false,
+        fetchedWorkerVoucher: false,
+        workerVoucher: {},
+        errorWorkerVoucher: null,
+      };
     default:
       return state;
   }