Eusm commodity create Update

app/src/App/tests/App.test.tsx

@@ -242,7 +242,7 @@ describe('App - authenticated', () => {
       `${LIST_COMMODITY_URL}?${viewDetailsQuery}=1`
     );
     wrapper.update();
-    expect(wrapper.find('ViewDetails')).toHaveLength(1);
+    expect(wrapper.find('ViewDetailsWrapper')).toHaveLength(1);
 
     // go to new resource page
     (wrapper.find('Router').prop('history') as RouteComponentProps['history']).push(

app/src/configs/__mocks__/env.ts

@@ -44,3 +44,5 @@ export const ENABLE_QUEST = true;
 export const BACKEND_ACTIVE = false;
 
 export const ENABLE_FHIR_USER_MANAGEMENT = true;
+
+export const COMMODITIES_LIST_RESOURCE_ID = 'ad';

jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
   transformIgnorePatterns: [
     'node_modules/(?!(@helsenorge/toolkit|@helsenorge/core-utils|@helsenorge/designsystem-react)/)',
   ],
-  setupFiles: ['./setupTests'],
+  setupFiles: ['./setupTests', 'jest-canvas-mock'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
   roots: ['packages/', 'app'],
   moduleNameMapper: {

package.json

@@ -96,6 +96,7 @@
     "husky": "^8.0.0",
     "i18next-parser": "^5.4.0",
     "jest": "27.5.1",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom-sixteen": "^2.0.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-haste-map": "^27.4.6",

packages/fhir-group-management/package.json

@@ -31,6 +31,7 @@
   "author": "OpenSRP Engineering",
   "license": "Apache-2.0",
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@opensrp/notifications": "^0.0.5",
     "@opensrp/pkg-config": "^0.0.9",
     "@opensrp/rbac": "workspace:^",
@@ -46,6 +47,7 @@
   },
   "peerDependencies": {
     "@opensrp/i18n": "^0.0.1",
-    "react": "17.0.0"
+    "react": "17.0.0",
+    "react-query": "^3.15.1"
   }
 }

packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button } from 'antd';
 import { PageHeader, useSimpleTabularView } from '@opensrp/react-utils';
@@ -19,15 +19,16 @@ import { useTranslation } from '../../../mls';
 import { TFunction } from '@opensrp/i18n';
 import { RbacCheck } from '@opensrp/rbac';
 
-export type TableData = ReturnType<typeof parseGroup>;
+export type TableData = ReturnType<typeof parseGroup> & Record<string, unknown>;
 
-export type BaseListViewProps = Pick<ViewDetailsProps, 'keyValueMapperRenderProp'> & {
+export type BaseListViewProps = Partial<Pick<ViewDetailsProps, 'keyValueMapperRenderProp'>> & {
   fhirBaseURL: string;
   getColumns: (t: TFunction) => Column<TableData>[];
   extraQueryFilters?: Record<string, string>;
   createButtonLabel: string;
   createButtonUrl?: string;
   pageTitle: string;
+  viewDetailsRender?: (fhirBaseURL: string, resourceId?: string) => ReactNode;
 };
 
 /**
@@ -45,6 +46,7 @@ export const BaseListView = (props: BaseListViewProps) => {
     createButtonUrl,
     keyValueMapperRenderProp,
     pageTitle,
+    viewDetailsRender,
   } = props;
 
   const { sParams } = useSearchParams();
@@ -106,11 +108,13 @@ export const BaseListView = (props: BaseListViewProps) => {
           </div>
           <TableLayout {...tableProps} />
         </Col>
-        <ViewDetailsWrapper
-          resourceId={resourceId}
-          fhirBaseURL={fhirBaseURL}
-          keyValueMapperRenderProp={keyValueMapperRenderProp}
-        />
+        {viewDetailsRender?.(fhirBaseURL, resourceId) ?? (
+          <ViewDetailsWrapper
+            resourceId={resourceId}
+            fhirBaseURL={fhirBaseURL}
+            keyValueMapperRenderProp={keyValueMapperRenderProp}
+          />
+        )}
       </Row>
     </div>
   );

packages/fhir-group-management/src/components/BaseComponents/GroupDetail/index.tsx

@@ -57,7 +57,7 @@ export const parseGroup = (obj: IGroup) => {
 export interface ViewDetailsProps {
   resourceId: string;
   fhirBaseURL: string;
-  keyValueMapperRenderProp: (obj: IGroup, t: TFunction) => JSX.Element;
+  keyValueMapperRenderProp?: (obj: IGroup, t: TFunction) => JSX.Element;
 }
 
 export type ViewDetailsWrapperProps = Pick<
@@ -89,7 +89,7 @@ export const ViewDetails = (props: ViewDetailsProps) => {
   }
 
   const org = data as Group;
-  return keyValueMapperRenderProp(org, t);
+  return keyValueMapperRenderProp?.(org, t) ?? null;
 };
 
 /**

packages/fhir-group-management/src/components/CommodityAddEdit/Default/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { CommodityForm } from '../../ProductForm';
+import { useParams } from 'react-router';
+import {
+  accountabilityPeriod,
+  appropriateUsage,
+  availability,
+  condition,
+  groupResourceType,
+  isAttractiveItem,
+  LIST_COMMODITY_URL,
+  materialNumber,
+  productImage,
+} from '../../../constants';
+import { Spin } from 'antd';
+import { PageHeader } from '@opensrp/react-utils';
+import { useQuery } from 'react-query';
+import { FHIRServiceClass, BrokenPage } from '@opensrp/react-utils';
+import { IGroup } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/IGroup';
+import {
+  generateGroupPayload,
+  getGroupFormFields,
+  postPutGroup,
+  updateListReferencesFactory,
+  validationRulesFactory,
+} from './utils';
+import { useTranslation } from '../../../mls';
+
+export interface GroupAddEditProps {
+  fhirBaseURL: string;
+  listId: string;
+}
+
+export interface RouteParams {
+  id?: string;
+}
+
+export const CommodityAddEdit = (props: GroupAddEditProps) => {
+  const { fhirBaseURL: fhirBaseUrl, listId } = props;
+
+  const { id: resourceId } = useParams<RouteParams>();
+  const { t } = useTranslation();
+
+  const groupQuery = useQuery(
+    [groupResourceType, resourceId],
+    async () =>
+      new FHIRServiceClass<IGroup>(fhirBaseUrl, groupResourceType).read(resourceId as string),
+    {
+      enabled: !!resourceId,
+    }
+  );
+
+  if (!groupQuery.isIdle && groupQuery.isLoading) {
+    return <Spin size="large" className="custom-spinner"></Spin>;
+  }
+
+  if (groupQuery.error && !groupQuery.data) {
+    return <BrokenPage errorMessage={(groupQuery.error as Error).message} />;
+  }
+
+  const initialValues = getGroupFormFields(groupQuery.data);
+
+  const pageTitle = groupQuery.data
+    ? t('Edit Commodity | {{name}}', { name: groupQuery.data.name ?? '' })
+    : t('Create Commodity');
+
+  const postSuccess = updateListReferencesFactory(fhirBaseUrl, listId);
+
+  return (
+    <section className="content-section">
+      <Helmet>
+        <title>{pageTitle}</title>
+      </Helmet>
+      <PageHeader title={pageTitle} />
+      <div className="bg-white p-5">
+        <CommodityForm
+          hidden={[
+            materialNumber,
+            isAttractiveItem,
+            availability,
+            condition,
+            appropriateUsage,
+            accountabilityPeriod,
+            productImage,
+          ]}
+          fhirBaseUrl={fhirBaseUrl}
+          initialValues={initialValues}
+          cancelUrl={LIST_COMMODITY_URL}
+          successUrl={LIST_COMMODITY_URL}
+          postSuccess={postSuccess}
+          validationRulesFactory={validationRulesFactory}
+          mutationEffect={async (initialValues, values) => {
+            const payload = generateGroupPayload(values, initialValues);
+            return postPutGroup(fhirBaseUrl, payload);
+          }}
+        />
+      </div>
+    </section>
+  );
+};

packages/fhir-group-management/src/components/CommodityAddEdit/Default/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly: active radio button 1`] = `
+<input
+  checked=""
+  class="ant-radio-input"
+  type="radio"
+  value="true"
+/>
+`;
+
+exports[`renders correctly: disabled radio button 1`] = `
+<input
+  class="ant-radio-input"
+  type="radio"
+  value="false"
+/>
+`;

packages/fhir-group-management/src/components/CommodityAddEdit/tests/fixtures.ts → packages/fhir-group-management/src/components/CommodityAddEdit/Default/tests/fixtures.ts

@@ -116,6 +116,20 @@ export const newList = {
   entry: [],
 };
 
+export const editedList = {
+  resourceType: 'List',
+  id: 'list-resource-id',
+  identifier: [{ use: 'official', value: 'list-resource-id' }],
+  status: 'current',
+  mode: 'working',
+  title: 'Supply Chain commodities',
+  code: {
+    coding: [{ system: 'http://ona.io', code: 'supply-chain', display: 'Supply Chain Commodity' }],
+    text: 'Supply Chain Commodity',
+  },
+  entry: [{ item: { reference: 'Group/123' } }],
+};
+
 export const createdCommodity1 = {
   code: {
     coding: [{ system: 'http://snomed.info/sct', code: '386452003', display: 'Supply management' }],
@@ -140,3 +154,29 @@ export const createdCommodity1 = {
     },
   ],
 };
+
+export const editedCommodity1 = {
+  resourceType: 'Group',
+  id: '567ec5f2-db90-4fac-b578-6e07df3f48de',
+  identifier: [{ value: '43245245336', use: 'official' }],
+  active: true,
+  type: 'device',
+  actual: false,
+  code: {
+    coding: [{ system: 'http://snomed.info/sct', code: '386452003', display: 'Supply management' }],
+  },
+  name: 'Paracetamol 100mg TabletsDettol',
+  characteristic: [
+    {
+      code: {
+        coding: [
+          { system: 'http://snomed.info/sct', code: '767524001', display: 'Unit of measure' },
+        ],
+      },
+      valueCodeableConcept: {
+        coding: [{ system: 'http://snomed.info/sct', code: '767525000', display: 'Unit' }],
+        text: 'Bottles',
+      },
+    },
+  ],
+};