Skip to content

Commit

Permalink
Eusm commodity create Update (#1330)
Browse files Browse the repository at this point in the history
* Update group-management dependencies

* Extract general re-usable productForm

* Define a way to dynamically provide vlaidationRules

* Make it possible to configure hiddenfilds and validationRUles

* Make the whole Group details section configurable

* Move current commodity list implementation to DEfault

* Add Eusm centric commodity list

* Configurable view details section for group list view

* Conditionally render list view wrt to project code

* Update utils

* Install jest-canvas-mock, mocks canvas for antd upload

* Create a mock for window.URL.createObjectURL

* Create Eusm edit

* Fix lint issues

* Update snapshot tests

* Show error banner if list id is not configured

* Replace fallback image with skeleton image

* Link material number to the identifier dataindex

* Add material number to view details section

* Fix test regressions

* Wrap commodity edit in rbaccheck

* Refactor lexicalities on variable unitOfMeasure

* Cleaning up the code

* Wrap commodity edit in rbaccheck

* Update mock envs to fix test regression

* Update snapshot in commodity list view

* Fix missing material number

* Wait for binary Query to render form view

* Fix binary payload generation and append to list

* Disable caching on binary query

* Update docstring for helper fun toArrayBuffer

* Fix bug where attractive item did not have correct value
  • Loading branch information
peterMuriuki authored Feb 28, 2024
1 parent 2e7ee0f commit 2f590a0
Show file tree
Hide file tree
Showing 33 changed files with 3,131 additions and 2,987 deletions.
2 changes: 1 addition & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 3 additions & 1 deletion packages/fhir-group-management/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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:^",
Expand All @@ -46,6 +47,7 @@
},
"peerDependencies": {
"@opensrp/i18n": "^0.0.1",
"react": "17.0.0"
"react": "17.0.0",
"react-query": "^3.15.1"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand All @@ -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,
Expand All @@ -46,6 +56,7 @@ export const BaseListView = (props: BaseListViewProps) => {
createButtonUrl,
keyValueMapperRenderProp,
pageTitle,
generateTableData = parseGroup,
viewDetailsRender,
} = props;

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -118,4 +129,4 @@ export const BaseListView = (props: BaseListViewProps) => {
</Row>
</div>
);
};
}
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -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"
/>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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' }],
Expand All @@ -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',
},
},
],
};
Loading

0 comments on commit 2f590a0

Please sign in to comment.