Eusm commodity create Update

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

@@ -19,15 +19,23 @@ import { useTranslation } from '../../../mls';
 import { TFunction } from '@opensrp/i18n';
 import { RbacCheck } from '@opensrp/rbac';
 
-export type TableData = ReturnType<typeof parseGroup> & Record<string, unknown>;
+export type DefaultTableData = ReturnType<typeof parseGroup> & Record<string, unknown>;
 
-export type BaseListViewProps = Partial<Pick<ViewDetailsProps, 'keyValueMapperRenderProp'>> & {
+export type ExtendableTableData = Pick<
+  ReturnType<typeof parseGroup>,
+  'id' | 'name' | 'active' | 'identifier' | 'lastUpdated'
+>;
+
+export type BaseListViewProps<TableData extends ExtendableTableData = DefaultTableData> = Partial<
+  Pick<ViewDetailsProps, 'keyValueMapperRenderProp'>
+> & {
   fhirBaseURL: string;
   getColumns: (t: TFunction) => Column<TableData>[];
   extraQueryFilters?: Record<string, string>;
   createButtonLabel: string;
   createButtonUrl?: string;
   pageTitle: string;
+  generateTableData?: (groups: IGroup) => TableData;
   viewDetailsRender?: (fhirBaseURL: string, resourceId?: string) => ReactNode;
 };
 
@@ -37,7 +45,9 @@ export type BaseListViewProps = Partial<Pick<ViewDetailsProps, 'keyValueMapperRe
  * @param  props - GroupList component props
  * @returns returns healthcare display
  */
-export const BaseListView = (props: BaseListViewProps) => {
+export function BaseListView<TableData extends ExtendableTableData = DefaultTableData>(
+  props: BaseListViewProps<TableData>
+) {
   const {
     fhirBaseURL,
     extraQueryFilters,
@@ -46,6 +56,7 @@ export const BaseListView = (props: BaseListViewProps) => {
     createButtonUrl,
     keyValueMapperRenderProp,
     pageTitle,
+    generateTableData = parseGroup,
     viewDetailsRender,
   } = props;
 
@@ -73,9 +84,9 @@ export const BaseListView = (props: BaseListViewProps) => {
 
   const tableData = (data?.records ?? []).map((org: IGroup, index: number) => {
     return {
-      ...parseGroup(org),
+      ...generateTableData(org),
       key: `${index}`,
-    };
+    } as TableData;
   });
 
   const columns = getColumns(t);
@@ -118,4 +129,4 @@ export const BaseListView = (props: BaseListViewProps) => {
       </Row>
     </div>
   );
-};
+}

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',
+      },
+    },
+  ],
+};