Create Eusm edit

Author: peterMuriuki

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

@@ -0,0 +1,77 @@
+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',
+      },
+    },
+  ],
+};