@openmrs/esm-patient-immunizations-app 11.3.1-patch.9064 → 11.3.1-patch.9310

package/src/immunizations/immunizations-form.workspace.tsx

@@ -14,9 +14,9 @@ import {
   useConfig,
   useLayoutType,
   useSession,
-  useVisit,
+  Workspace2,
 } from '@openmrs/esm-framework';
-import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
+import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
 import { DoseInput } from './components/dose-input.component';
 import { immunizationFormSub } from './utils';
 import { mapToFHIRImmunizationResource } from './immunization-mapper';
@@ -27,18 +27,14 @@ import { useImmunizations } from '../hooks/useImmunizations';
 import { useImmunizationsConceptSet } from '../hooks/useImmunizationsConceptSet';
 import styles from './immunizations-form.scss';
 
-const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
-  patient,
-  patientUuid,
+const ImmunizationsForm: React.FC<PatientWorkspace2DefinitionProps<{}, {}>> = ({
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
+  groupProps: { patientUuid, patient, visitContext },
 }) => {
   const config = useConfig<ImmunizationConfigObject>();
   const currentUser = useSession();
   const isTablet = useLayoutType() === 'tablet';
   const { t } = useTranslation();
-  const { currentVisit } = useVisit(patientUuid);
   const { immunizationsConceptSet } = useImmunizationsConceptSet(config);
   const { mutate } = useImmunizations(patientUuid);
 
@@ -100,11 +96,6 @@ const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
     watch,
   } = formProps;
   const vaccinationDate = watch('vaccinationDate');
-
-  useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
-
   const vaccineUuid = watch('vaccineUuid');
 
   useEffect(() => {
@@ -155,7 +146,7 @@ const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
           doseNumber,
           nextDoseDate: nextDoseDate ? dayjs(nextDoseDate).startOf('day').toDate().toISOString() : null,
           note,
-          expirationDate: expirationDate ? dayjs(expirationDate).startOf('day').toDate().toISOString() : null,
+          expirationDate: expirationDate ? dayjs(expirationDate).format('YYYY-MM-DD') : null,
           lotNumber,
           manufacturer,
         };
@@ -163,14 +154,14 @@ const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
         await savePatientImmunization(
           mapToFHIRImmunizationResource(
             immunization,
-            immunizationToEditMeta?.visitUuid || currentVisit?.uuid,
+            immunizationToEditMeta?.visitUuid || visitContext?.uuid,
             currentUser?.sessionLocation?.uuid,
             currentUser?.currentProvider?.uuid,
           ),
           immunizationToEditMeta?.immunizationObsUuid,
           abortController,
         );
-        closeWorkspaceWithSavedChanges();
+        closeWorkspace({ discardUnsavedChanges: true });
         mutate();
         showSnackbar({
           kind: 'success',
@@ -190,160 +181,164 @@ const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
       currentUser?.sessionLocation?.uuid,
       patientUuid,
       currentUser?.currentProvider?.uuid,
-      currentVisit?.uuid,
+      visitContext?.uuid,
       immunizationToEditMeta,
       immunizationsConceptSet,
-      closeWorkspaceWithSavedChanges,
+      closeWorkspace,
       t,
       mutate,
     ],
   );
   return (
-    <FormProvider {...formProps}>
-      <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap={5} className={styles.container}>
-          <ResponsiveWrapper>
-            <Controller
-              name="vaccinationDate"
-              control={control}
-              render={({ field, fieldState }) => (
-                <OpenmrsDatePicker
-                  {...field}
-                  className={styles.datePicker}
-                  id="vaccinationDate"
-                  invalid={Boolean(fieldState?.error?.message)}
-                  invalidText={fieldState?.error?.message}
-                  labelText={t('vaccinationDate', 'Vaccination date')}
-                  maxDate={new Date()}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-          <ResponsiveWrapper>
-            <Controller
-              name="vaccineUuid"
-              control={control}
-              render={({ field: { onChange, value } }) => (
-                <Dropdown
-                  disabled={!!immunizationToEditMeta}
-                  id="immunization"
-                  invalid={!!errors?.vaccineUuid}
-                  invalidText={errors?.vaccineUuid?.message}
-                  itemToString={(item) =>
-                    immunizationsConceptSet?.answers.find((candidate) => candidate.uuid == item)?.display
-                  }
-                  items={immunizationsConceptSet?.answers?.map((item) => item.uuid) || []}
-                  label={t('selectImmunization', 'Select immunization')}
-                  onChange={(val) => onChange(val.selectedItem)}
-                  selectedItem={value}
-                  titleText={t('immunization', 'Immunization')}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-          {vaccineUuid && (
+    <Workspace2 title={t('immunizationWorkspaceTitle', 'Immunization')} hasUnsavedChanges={isDirty}>
+      <FormProvider {...formProps}>
+        <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+          <Stack gap={5} className={styles.container}>
             <ResponsiveWrapper>
-              <DoseInput vaccine={vaccineUuid} sequences={config.sequenceDefinitions} control={control} />
+              <Controller
+                name="vaccinationDate"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <OpenmrsDatePicker
+                    {...field}
+                    className={styles.datePicker}
+                    id="vaccinationDate"
+                    invalid={Boolean(fieldState?.error?.message)}
+                    invalidText={fieldState?.error?.message}
+                    labelText={t('vaccinationDate', 'Vaccination date')}
+                    maxDate={new Date()}
+                  />
+                )}
+              />
             </ResponsiveWrapper>
-          )}
-          <div className={styles.vaccineBatchHeading}>{t('vaccineBatchInformation', 'Vaccine Batch Information')}</div>
-          <ResponsiveWrapper>
-            <Controller
-              name="manufacturer"
-              control={control}
-              render={({ field: { onChange, value } }) => (
-                <TextInput
-                  id="manufacturer"
-                  labelText={t('manufacturer', 'Manufacturer')}
-                  onChange={(evt) => onChange(evt.target.value)}
-                  type="text"
-                  value={value}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-          <ResponsiveWrapper>
-            <Controller
-              name="lotNumber"
-              control={control}
-              render={({ field: { onChange, value } }) => (
-                <TextInput
-                  id="lotNumber"
-                  labelText={t('lotNumber', 'Lot Number')}
-                  onChange={(evt) => onChange(evt.target.value)}
-                  type="text"
-                  value={value}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-          <ResponsiveWrapper>
-            <Controller
-              name="expirationDate"
-              control={control}
-              render={({ field, fieldState }) => (
-                <OpenmrsDatePicker
-                  {...field}
-                  className={styles.datePicker}
-                  id="vaccinationExpiration"
-                  invalid={Boolean(fieldState?.error?.message)}
-                  invalidText={fieldState?.error?.message}
-                  labelText={t('expirationDate', 'Expiration date')}
-                  minDate={vaccinationDate}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-          <ResponsiveWrapper>
-            <Controller
-              name="note"
-              control={control}
-              render={({ field: { onChange, value } }) => (
-                <TextArea
-                  enableCounter
-                  id="note"
-                  invalidText={errors?.note?.message}
-                  labelText={t('note', 'Note')}
-                  maxCount={255}
-                  onChange={(evt) => onChange(evt.target.value)}
-                  placeholder={t('immunizationNotePlaceholder', 'For example: mild redness at injection site')}
-                  value={value}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-          <ResponsiveWrapper>
-            <Controller
-              name="nextDoseDate"
-              control={control}
-              render={({ field, fieldState }) => (
-                <OpenmrsDatePicker
-                  {...field}
-                  className={styles.datePicker}
-                  id="nextDoseDate"
-                  invalid={Boolean(fieldState?.error?.message)}
-                  invalidText={fieldState?.error?.message}
-                  labelText={t('nextDoseDate', 'Next dose date')}
-                  minDate={vaccinationDate}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-        </Stack>
-        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
-            {getCoreTranslation('cancel')}
-          </Button>
-          <Button className={styles.button} kind="primary" disabled={isSubmitting} type="submit">
-            {isSubmitting ? (
-              <InlineLoading className={styles.spinner} description={t('saving', 'Saving') + '...'} />
-            ) : (
-              <span>{getCoreTranslation('save')}</span>
+            <ResponsiveWrapper>
+              <Controller
+                name="vaccineUuid"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <Dropdown
+                    disabled={!!immunizationToEditMeta}
+                    id="immunization"
+                    invalid={!!errors?.vaccineUuid}
+                    invalidText={errors?.vaccineUuid?.message}
+                    itemToString={(item) =>
+                      immunizationsConceptSet?.answers.find((candidate) => candidate.uuid == item)?.display
+                    }
+                    items={immunizationsConceptSet?.answers?.map((item) => item.uuid) || []}
+                    label={t('selectImmunization', 'Select immunization')}
+                    onChange={(val) => onChange(val.selectedItem)}
+                    selectedItem={value}
+                    titleText={t('immunization', 'Immunization')}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+            {vaccineUuid && (
+              <ResponsiveWrapper>
+                <DoseInput vaccine={vaccineUuid} sequences={config.sequenceDefinitions} control={control} />
+              </ResponsiveWrapper>
             )}
-          </Button>
-        </ButtonSet>
-      </Form>
-    </FormProvider>
+            <div className={styles.vaccineBatchHeading}>
+              {t('vaccineBatchInformation', 'Vaccine Batch Information')}
+            </div>
+            <ResponsiveWrapper>
+              <Controller
+                name="manufacturer"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <TextInput
+                    id="manufacturer"
+                    labelText={t('manufacturer', 'Manufacturer')}
+                    onChange={(evt) => onChange(evt.target.value)}
+                    type="text"
+                    value={value}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+            <ResponsiveWrapper>
+              <Controller
+                name="lotNumber"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <TextInput
+                    id="lotNumber"
+                    labelText={t('lotNumber', 'Lot Number')}
+                    onChange={(evt) => onChange(evt.target.value)}
+                    type="text"
+                    value={value}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+            <ResponsiveWrapper>
+              <Controller
+                name="expirationDate"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <OpenmrsDatePicker
+                    {...field}
+                    className={styles.datePicker}
+                    id="vaccinationExpiration"
+                    invalid={Boolean(fieldState?.error?.message)}
+                    invalidText={fieldState?.error?.message}
+                    labelText={t('expirationDate', 'Expiration date')}
+                    minDate={vaccinationDate}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+            <ResponsiveWrapper>
+              <Controller
+                name="note"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <TextArea
+                    enableCounter
+                    id="note"
+                    invalidText={errors?.note?.message}
+                    labelText={t('note', 'Note')}
+                    maxCount={255}
+                    onChange={(evt) => onChange(evt.target.value)}
+                    placeholder={t('immunizationNotePlaceholder', 'For example: mild redness at injection site')}
+                    value={value}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+            <ResponsiveWrapper>
+              <Controller
+                name="nextDoseDate"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <OpenmrsDatePicker
+                    {...field}
+                    className={styles.datePicker}
+                    id="nextDoseDate"
+                    invalid={Boolean(fieldState?.error?.message)}
+                    invalidText={fieldState?.error?.message}
+                    labelText={t('nextDoseDate', 'Next dose date')}
+                    minDate={vaccinationDate}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Stack>
+          <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+            <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+              {getCoreTranslation('cancel')}
+            </Button>
+            <Button className={styles.button} kind="primary" disabled={isSubmitting} type="submit">
+              {isSubmitting ? (
+                <InlineLoading className={styles.spinner} description={t('saving', 'Saving') + '...'} />
+              ) : (
+                <span>{getCoreTranslation('save')}</span>
+              )}
+            </Button>
+          </ButtonSet>
+        </Form>
+      </FormProvider>
+    </Workspace2>
   );
 };
 

package/src/immunizations/immunizations-overview.component.tsx

@@ -14,7 +14,7 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { AddIcon, formatDate, launchWorkspace, parseDate, usePagination } from '@openmrs/esm-framework';
+import { AddIcon, formatDate, launchWorkspace2, parseDate, usePagination } from '@openmrs/esm-framework';
 import { CardHeader, EmptyState, ErrorState, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { useImmunizations } from '../hooks/useImmunizations';
 import styles from './immunizations-overview.scss';
@@ -36,7 +36,7 @@ const ImmunizationsOverview: React.FC<ImmunizationsOverviewProps> = ({ patient,
   const { data: immunizations, error, isLoading, isValidating } = useImmunizations(patientUuid);
   const { results: paginatedImmunizations, goTo, currentPage } = usePagination(immunizations ?? [], immunizationsCount);
 
-  const launchImmunizationsForm = React.useCallback(() => launchWorkspace('immunization-form-workspace'), []);
+  const launchImmunizationsForm = React.useCallback(() => launchWorkspace2('immunization-form-workspace'), []);
 
   const tableHeaders = [
     {

package/src/routes.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
-    "webservices.rest": "^2.2.0"
+    "webservices.rest": ">=2.2.0"
   },
   "extensions": [
     {
@@ -37,17 +37,23 @@
     }
   ],
   "pages": [],
-  "workspaces": [
+  "modals": [
+    {
+      "name": "immunization-delete-confirmation-modal",
+      "component": "deleteImmunizationConfirmationModal"
+    }
+  ],
+  "workspaces2": [
     {
       "name": "immunization-form-workspace",
-      "title": "immunizationWorkspaceTitle",
-      "component": "immunizationFormWorkspace"
+      "component": "immunizationFormWorkspace",
+      "window": "immunization-form-window"
     }
   ],
-  "modals": [
+  "workspaceWindows2": [
     {
-      "name": "immunization-delete-confirmation-modal",
-      "component": "deleteImmunizationConfirmationModal"
+      "name": "immunization-form-window",
+      "group": "patient-chart"
     }
   ]
 }

package/translations/fr.json

@@ -16,18 +16,18 @@
   "immunizationDeleted": "Vaccination supprimée",
   "immunizationDeletedSuccess": "Dose de vaccination supprimée avec succès",
   "immunizationDeleteError": "Échec de la supprimer de la vaccination :",
-  "immunizationHistory": "Immunization history",
+  "immunizationHistory": "Historique de vaccination",
   "immunizationNotePlaceholder": "For example: mild redness at injection site",
   "immunizations": "Vaccinations",
   "Immunizations": "Vaccinations",
   "immunizations__lower": "Vaccinations",
-  "immunizationsHistory": "Immunizations history",
+  "immunizationsHistory": "Historique de vaccinations",
   "immunizationWorkspaceTitle": "Formulaire de vaccination",
-  "lastDoseOnDate": "Last dose on {{date}}",
+  "lastDoseOnDate": "Dernière dose le {{date}}",
   "lotNumber": "Numéro de lot",
   "manufacturer": "Fabricant",
-  "nextDose": "Next dose",
-  "nextDoseDate": "Next dose date",
+  "nextDose": "Prochaine dose",
+  "nextDoseDate": "Date de la prochaine dose",
   "notDue": "Not due",
   "note": "Note",
   "pleaseSelect": "Veuillez sélectionner",