ONI-95: profile page implementation

src/actions.js

@@ -41,7 +41,7 @@ const INSUREE_FULL_PROJECTION = (mm) => [
   "validityTo",
   `family{${FAMILY_FULL_PROJECTION(mm).join(",")}}`,
   `photo{id,uuid,date,folder,filename,officerId,photo}`,
-  "gender{code}",
+  "gender{code, gender}",
   "education{id}",
   "profession{id}",
   "marital",

src/components/FamilyMembersTable.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { TableContainer, TableHead, TableBody, Table, TableCell, TableRow, Paper } from "@material-ui/core";
+import { makeStyles } from "@material-ui/styles";
+
+import { useModulesManager, ProgressOrError, useTranslations } from "@openimis/fe-core";
+import { fetchFamilyMembers } from "../actions";
+import { HYPHEN, MODULE_NAME } from "../constants";
+
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    marginInline: 16,
+    marginBlock: 12,
+  },
+  headerTitle: theme.table.title,
+  actionCell: {
+    width: 60,
+  },
+  header: theme.table.header,
+}));
+
+const FAMILY_MEMBERS_HEADERS = ["FamilyMembersTable.InsuranceNo", "FamilyMembersTable.memberName", "FamilyMembersTable.phone"];
+
+const FamilyMembersTable = () => {
+  const dispatch = useDispatch();
+  const modulesManager = useModulesManager();
+  const classes = useStyles();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const { fetchingFamilyMembers, familyMembers, errorFamilyMembers, insuree } = useSelector((store) => store.insuree);
+
+  useEffect(() => {
+    if (!insuree) return;
+
+    dispatch(fetchFamilyMembers(modulesManager, [`familyUuid: "${insuree.family.uuid}"`]));
+  }, [insuree]);
+
+  return (
+    <TableContainer component={Paper}>
+      <Table size="small">
+        <TableHead className={classes.header}>
+          <TableRow className={classes.headerTitle}>
+            {FAMILY_MEMBERS_HEADERS.map((header) => (
+              <TableCell key={header}> {formatMessage(header)} </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <ProgressOrError progress={fetchingFamilyMembers} error={errorFamilyMembers} />
+          {familyMembers?.map((familyMember) => (
+            <TableRow key={familyMember?.uuid}>
+              <TableCell> {familyMember?.chfId} </TableCell>
+              <TableCell> {`${familyMember?.otherNames} ${familyMember?.lastName}`} </TableCell>
+              <TableCell> {familyMember?.phone ?? HYPHEN} </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default FamilyMembersTable;

src/components/InsureeProfileLink.js

@@ -1,31 +1,26 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { injectIntl } from "react-intl";
-import { withTheme, withStyles } from "@material-ui/core/styles";
-import { Link, Grid } from "@material-ui/core";
-import { FormattedMessage } from "@openimis/fe-core";
+import React from "react";
 
-const styles = (theme) => ({
-  lnk: {
-    textAlign: "center",
-  },
-});
+import { Tooltip, IconButton } from "@material-ui/core";
+import { Person } from "@material-ui/icons";
 
-class InsureeProfileLink extends Component {
-  render() {
-    const { classes, insuree } = this.props;
-    return (
-      <Grid item xs={12} className={classes.lnk}>
-        <Link href={`${process.env.PUBLIC_URL || ""}/insuree/profile?nshid=${insuree.chfId}`}>
-          <FormattedMessage module="insuree" id="link.profile" />
-        </Link>
-      </Grid>
-    );
-  }
-}
+import { useModulesManager, useTranslations, useHistory, historyPush } from "@openimis/fe-core";
+import { MODULE_NAME } from "../constants";
 
-const mapStateToProps = (state) => ({
-  insuree: state.insuree.insuree,
-});
+const InsureeProfileLink = ({ insureeUuid }) => {
+  const modulesManager = useModulesManager();
+  const history = useHistory();
+  const { formatMessage } = useTranslations(MODULE_NAME);
 
-export default injectIntl(withTheme(withStyles(styles)(connect(mapStateToProps)(InsureeProfileLink))));
+  const goToInsureeProfile = (modulesManager, history, uuid, showInAnotherTab = false) =>
+    historyPush(modulesManager, history, "insuree.route.insureeProfile", [uuid], showInAnotherTab);
+
+  return (
+    <Tooltip title={formatMessage("insureeSummaries.goToTheProfile")}>
+      <IconButton onClick={() => goToInsureeProfile(modulesManager, history, insureeUuid)}>
+        <Person />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default InsureeProfileLink;

src/components/InsureeSummary.js

@@ -12,26 +12,31 @@ import {
   historyPush,
   withHistory,
 } from "@openimis/fe-core";
+import { DEFAULT } from "../constants";
+import InsureeProfileLink from "./InsureeProfileLink";
+import { formatLocationString } from "../utils/utils";
 
 const INSUREE_SUMMARY_AVATAR_CONTRIBUTION_KEY = "insuree.InsureeSummaryAvatar";
 const INSUREE_SUMMARY_CORE_CONTRIBUTION_KEY = "insuree.InsureeSummaryCore";
 const INSUREE_SUMMARY_EXT_CONTRIBUTION_KEY = "insuree.InsureeSummaryExt";
 const INSUREE_SUMMARY_CONTRIBUTION_KEY = "insuree.InsureeSummary";
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   label: {
     textAlign: "right",
   },
+  topRightCorner: {
+    position: "absolute",
+    top: theme.spacing(2),
+    right: theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+  },
 }));
 
-function goToFamilyUuid(mm, history, uuid) {
-  historyPush(mm, history, "insuree.route.familyOverview", [uuid], true);
-}
-
-const formatLocationString = (location) => {
-  return [location?.parent?.parent?.name,
-    location?.parent?.name,
-    location?.name].filter(Boolean).join(', ')
+function goToFamilyUuid(modulesManager, history, uuid) {
+  historyPush(modulesManager, history, "insuree.route.familyOverview", [uuid], true);
 }
 
 const InsureeSummary = (props) => {
@@ -42,7 +47,12 @@ const InsureeSummary = (props) => {
   const showInsureeSummaryAddress = props.modulesManager.getConf(
     "fe-insuree",
     "showInsureeSummaryAddress",
-    false
+    DEFAULT.SHOW_INSUREE_SUMMARY_ADDRESS
+  );
+  const showInsureeProfile = props.modulesManager.getConf(
+    "fe-insuree",
+    "InsureeSummary.showInsureeProfileLink",
+    DEFAULT.SHOW_INSUREE_PROFILE,
   );
 
   return (
@@ -144,6 +154,11 @@ const InsureeSummary = (props) => {
               </Button>
             </Grid>
           )}
+          {showInsureeProfile && (
+            <Grid className={classes.topRightCorner}>
+              <InsureeProfileLink insureeUuid={insuree.uuid} />
+            </Grid>
+          )}
         </Grid>
       </Box>
       <Grid item xs={12}>

src/constants.js

@@ -1,8 +1,9 @@
 export const INSUREE_MARITAL_STATUS = ["N", "W", "S", "D", "M"];
 export const FAMILY_POVERTY_STATUS = [true, false];
 export const PHOTO_STATUS = ["with", "without"];
-export const EMPTY_STRING = '';
-export const MODULE_NAME = 'insuree';
+export const EMPTY_STRING = "";
+export const MODULE_NAME = "insuree";
+export const HYPHEN = "-";
 
 export const RIGHT_FAMILY = 101001; //101000 in doc ... but in practice...
 export const RIGHT_FAMILY_SEARCH = 101001;
@@ -15,3 +16,8 @@ export const RIGHT_INSUREE_ADD = 101102;
 export const RIGHT_INSUREE_EDIT = 101103;
 export const RIGHT_INSUREE_DELETE = 101104;
 export const RIGHT_INSUREE_ENQUIRE = 101105;
+
+export const DEFAULT = {
+  SHOW_INSUREE_PROFILE: false,
+  SHOW_INSUREE_SUMMARY_ADDRESS: false,
+};

src/index.js

@@ -4,7 +4,7 @@ import InsureePage from "./pages/InsureePage";
 import FamilyPage from "./pages/FamilyPage";
 import { CappedItemServicePage } from "./pages/CappedItemServicePage";
 import InsureesPage from "./pages/InsureesPage";
-import { ProfilePage } from "./pages/ProfilePage";
+import ProfilePage from "./pages/ProfilePage";
 import FamilyOverviewPage from "./pages/FamilyOverviewPage";
 import Enquiry from "./components/Enquiry";
 import InsureeOfficerPicker from "./pickers/InsureeOfficerPicker";
@@ -43,6 +43,7 @@ import InsureePendingEnrollmentReport from "./reports/InsureePendingEnrollmentRe
 const ROUTE_INSUREE_FAMILIES = "insuree/families";
 const ROUTE_INSUREE_FAMILY_OVERVIEW = "insuree/families/familyOverview";
 const ROUTE_INSUREE_FAMILY = "insuree/family";
+const ROUTE_INSUREE_PROFILE = "insuree/profile";
 const ROUTE_INSUREE_INSUREES = "insuree/insurees";
 const ROUTE_INSUREE_INSUREE = "insuree/insurees/insuree";
 
@@ -124,6 +125,7 @@ const DEFAULT_CONFIG = {
     { key: "insuree.route.family", ref: ROUTE_INSUREE_FAMILY },
     { key: "insuree.route.insurees", ref: ROUTE_INSUREE_INSUREES },
     { key: "insuree.route.insuree", ref: ROUTE_INSUREE_INSUREE },
+    { key: "insuree.route.insureeProfile", ref: ROUTE_INSUREE_PROFILE },
 
     { key: "insuree.Avatar", ref: InsureeAvatar },
     { key: "insuree.Summary", ref: InsureeSummary },
@@ -140,7 +142,7 @@ const DEFAULT_CONFIG = {
     { path: ROUTE_INSUREE_INSUREES, component: InsureesPage },
     { path: ROUTE_INSUREE_INSUREE + "/:insuree_uuid?/:family_uuid?", component: InsureePage },
     { path: "insuree/cappedItemService", component: CappedItemServicePage },
-    { path: "insuree/profile", component: ProfilePage },
+    { path: ROUTE_INSUREE_PROFILE + "/:insuree_uuid", component: ProfilePage },
   ],
   "core.AppBar": [Enquiry],
   "core.MainMenu": [InsureeMainMenu],