-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Khp3 6301 add ability to add multiple orders to the lab manifest (#294)
* Configured manifest types,updated formm to use the config * Added modal form for collecting smaple informaton, mutation predicate optimized, active request hook adapted to endpoint payload * Adding and removing orders to and from the manifest
- Loading branch information
Showing
12 changed files
with
487 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,25 @@ | ||
| import { Type, validator } from '@openmrs/esm-framework'; | ||
|
|
||
| export const configSchema = {}; | ||
|
|
||
| export type Config = {}; | ||
| export const configSchema = { | ||
| labmanifestTypes: { | ||
| _type: Type.Array, | ||
| _description: 'List of Lab manifest types', | ||
| _default: [ | ||
| { | ||
| id: 1, | ||
| type: 'EID Type', | ||
| }, | ||
| { | ||
| id: 2, | ||
| type: 'VL Type', | ||
| }, | ||
| { | ||
| id: 3, | ||
| type: 'FLU Type', | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
| export interface LabManifestConfig { | ||
| labmanifestTypes: Array<{ id: number; type: string }>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
174 changes: 174 additions & 0 deletions
174
packages/esm-lab-manifest-app/src/forms/lab-manifest-orders-to-manifest.modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| import { | ||
| Button, | ||
| ButtonSet, | ||
| Column, | ||
| DatePicker, | ||
| DatePickerInput, | ||
| Dropdown, | ||
| Form, | ||
| ModalBody, | ||
| ModalFooter, | ||
| ModalHeader, | ||
| Row, | ||
| Stack, | ||
| } from '@carbon/react'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { showSnackbar } from '@openmrs/esm-framework'; | ||
| import React from 'react'; | ||
| import { Controller, useForm } from 'react-hook-form'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { mutate } from 'swr'; | ||
| import { z } from 'zod'; | ||
| import { addOrderToManifest, labManifestOrderToManifestFormSchema, sampleTypes } from '../lab-manifest.resources'; | ||
| import styles from './lab-manifest-form.scss'; | ||
| import { useLabManifest } from '../hooks'; | ||
|
|
||
| interface LabManifestOrdersToManifestFormProps { | ||
| onClose: () => void; | ||
| props: { | ||
| title?: string; | ||
| selectedOrders: Array<{ | ||
| labManifest: { | ||
| uuid: string; | ||
| }; | ||
| order: { | ||
| uuid: string; | ||
| }; | ||
| payload: string; | ||
| }>; | ||
| }; | ||
| } | ||
|
|
||
| type OrderToManifestFormType = z.infer<typeof labManifestOrderToManifestFormSchema>; | ||
|
|
||
| const LabManifestOrdersToManifestForm: React.FC<LabManifestOrdersToManifestFormProps> = ({ | ||
| onClose, | ||
| props: { title, selectedOrders }, | ||
| }) => { | ||
| const { t } = useTranslation(); | ||
| const form = useForm<OrderToManifestFormType>({ | ||
| defaultValues: {}, | ||
| resolver: zodResolver(labManifestOrderToManifestFormSchema), | ||
| }); | ||
|
|
||
| const { error, isLoading, manifest } = useLabManifest(selectedOrders[0]?.labManifest?.uuid); | ||
| const onSubmit = async (values: OrderToManifestFormType) => { | ||
| try { | ||
| const results = await Promise.allSettled( | ||
| selectedOrders.map((order) => addOrderToManifest({ ...order, ...values })), | ||
| ); | ||
| results.forEach((res) => { | ||
| if (res.status === 'fulfilled') { | ||
| showSnackbar({ title: 'Success', kind: 'success', subtitle: 'Order added succesfully' }); | ||
| } else { | ||
| showSnackbar({ title: 'Failure', kind: 'error', subtitle: 'Error adding order to the manifest' }); | ||
| } | ||
| }); | ||
| const mutateLinks = [ | ||
| `/ws/rest/v1/labmanifest?v=full&status=${manifest.manifestStatus}`, | ||
| `/ws/rest/v1/kemrorder/validorders?manifestUuid=${manifest?.uuid}`, | ||
| `/ws/rest/v1/labmanifest/${manifest?.uuid}`, | ||
| ]; | ||
| mutate((key) => { | ||
| return typeof key === 'string' && mutateLinks.some((link) => key.startsWith(link)); | ||
| }); | ||
| onClose(); | ||
| } catch (error) { | ||
| showSnackbar({ title: 'Failure', kind: 'error', subtitle: 'Error adding orders to the manifest' }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <Form onSubmit={form.handleSubmit(onSubmit)}> | ||
| <ModalHeader closeModal={onClose} className={styles.heading}> | ||
| {title ?? t('updateSampleDetails', 'Update Sample Details')} | ||
| </ModalHeader> | ||
| <ModalBody> | ||
| <Stack gap={4} className={styles.grid}> | ||
| <Column> | ||
| <Controller | ||
| control={form.control} | ||
| name="sampleType" | ||
| render={({ field }) => ( | ||
| <Dropdown | ||
| ref={field.ref} | ||
| invalid={form.formState.errors[field.name]?.message} | ||
| invalidText={form.formState.errors[field.name]?.message} | ||
| id="manifestType" | ||
| titleText={t('sampleType', 'Sample Type')} | ||
| onChange={(e) => { | ||
| field.onChange(e.selectedItem); | ||
| }} | ||
| initialSelectedItem={field.value} | ||
| label="Choose option" | ||
| items={sampleTypes.map((r) => r.value)} | ||
| itemToString={(item) => sampleTypes.find((r) => r.value === item)?.label ?? ''} | ||
| /> | ||
| )} | ||
| /> | ||
| </Column> | ||
| <Row className={styles.datePickersRow}> | ||
| <Column className={styles.datePickerInput}> | ||
| <Controller | ||
| control={form.control} | ||
| name="sampleCollectionDate" | ||
| render={({ field }) => ( | ||
| <DatePicker | ||
| dateFormat="d/m/Y" | ||
| id="sampleCollectionDate" | ||
| datePickerType="single" | ||
| {...field} | ||
| invalid={form.formState.errors[field.name]?.message} | ||
| invalidText={form.formState.errors[field.name]?.message}> | ||
| <DatePickerInput | ||
| invalid={form.formState.errors[field.name]?.message} | ||
| invalidText={form.formState.errors[field.name]?.message} | ||
| placeholder="mm/dd/yyyy" | ||
| labelText={t('sampleCollectionDate', 'Sample collection date')} | ||
| /> | ||
| </DatePicker> | ||
| )} | ||
| /> | ||
| </Column> | ||
| <Column className={styles.datePickerInput}> | ||
| <Controller | ||
| control={form.control} | ||
| name="sampleSeparationDate" | ||
| render={({ field }) => ( | ||
| <DatePicker | ||
| dateFormat="d/m/Y" | ||
| id="sampleSeparationDate" | ||
| datePickerType="single" | ||
| {...field} | ||
| invalid={form.formState.errors[field.name]?.message} | ||
| invalidText={form.formState.errors[field.name]?.message}> | ||
| <DatePickerInput | ||
| invalid={form.formState.errors[field.name]?.message} | ||
| invalidText={form.formState.errors[field.name]?.message} | ||
| placeholder="mm/dd/yyyy" | ||
| labelText={t('sampleSeparationDate', 'Sample seperation date')} | ||
| /> | ||
| </DatePicker> | ||
| )} | ||
| /> | ||
| </Column> | ||
| </Row> | ||
| </Stack> | ||
| </ModalBody> | ||
| <ModalFooter> | ||
| <ButtonSet className={styles.buttonSet}> | ||
| <Button className={styles.button} kind="primary" disabled={form.formState.isSubmitting} type="submit"> | ||
| Submit | ||
| </Button> | ||
| <Button className={styles.button} kind="secondary" onClick={onClose}> | ||
| Cancel | ||
| </Button> | ||
| </ButtonSet> | ||
| </ModalFooter> | ||
| </Form> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export default LabManifestOrdersToManifestForm; |
30 changes: 30 additions & 0 deletions
30
packages/esm-lab-manifest-app/src/forms/sample-delete-confirm-dialog.modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { Button, ButtonSet, ModalBody, ModalFooter, ModalHeader } from '@carbon/react'; | ||
| import React from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| interface SampleDeleteConfirmDialogProps { | ||
| onClose: () => void; | ||
| onDelete: () => void; | ||
| } | ||
| const SampleDeleteConfirmDialog: React.FC<SampleDeleteConfirmDialogProps> = ({ onClose, onDelete }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <ModalHeader closeModal={onClose}>{t('warning', 'Warning!')}</ModalHeader> | ||
| <ModalBody>Are you sure you want to delete sample.This action is irriversible?</ModalBody> | ||
| <ModalFooter> | ||
| <ButtonSet> | ||
| <Button kind="secondary" onClick={onClose}> | ||
| Cancel | ||
| </Button> | ||
| <Button kind="primary" onClick={onDelete}> | ||
| Remove | ||
| </Button> | ||
| </ButtonSet> | ||
| </ModalFooter> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export default SampleDeleteConfirmDialog; |
Oops, something went wrong.