(feat) O3-4068 Add ability to preview clinical view configurations in…

… the patient chart
openmrs · Oct 9, 2024 · 3eb00a4 · 3eb00a4
1 parent 2b8f818
commit 3eb00a4
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 10 deletions.
diff --git a/src/components/view-editor/view-editor.component.tsx b/src/components/view-editor/view-editor.component.tsx
@@ -5,7 +5,7 @@ import { Column, CopyButton, Grid, IconButton, Button, FileUploader } from '@car
 import { type TFunction, useTranslation } from 'react-i18next';
 import { ArrowLeft, Maximize, Minimize, Download } from '@carbon/react/icons';
 import Header from '../header/header.component';
-import { ConfigurableLink, showSnackbar } from '@openmrs/esm-framework';
+import { type ConfigObject, ConfigurableLink, showSnackbar, useConfig } from '@openmrs/esm-framework';
 import SchemaEditor from '../schema-editor/schema-editor.component';
 import InteractiveBuilder from '../interactive-builder/interactive-builder.component';
 import { type Schema } from '../../types';
@@ -25,6 +25,7 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
 
   const { clinicalViewId } = useParams(); // Extract 'id' from the URL
   const location = useLocation(); // To check if it's in 'edit' mode
+  const { patientUuid } = useConfig<ConfigObject>();
 
   useEffect(() => {
     if (clinicalViewId && location.pathname.includes('edit')) {
@@ -33,7 +34,7 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
   }, [clinicalViewId, location]);
 
   const loadSchema = (id: string) => {
-    const savedSchema = localStorage.getItem(`packageJSON_${id}`);
+    const savedSchema = localStorage.getItem(id);
     if (savedSchema) {
       const parsedSchema: Schema = JSON.parse(savedSchema);
       setSchema(parsedSchema);
@@ -56,10 +57,18 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
   }, []);
 
   const renderSchemaChanges = useCallback(() => {
+    if (!stringifiedSchema) {
+      showSnackbar({
+        title: t('errorRendering', 'Error rendering'),
+        kind: 'error',
+        subtitle: t('renderingErrorMessage', 'There was an error rendering the clinical view'),
+      });
+      return;
+    }
     const parsedJson: Schema = JSON.parse(stringifiedSchema);
     updateSchema(parsedJson);
     setStringifiedSchema(JSON.stringify(parsedJson, null, 2));
-  }, [stringifiedSchema, updateSchema]);
+  }, [stringifiedSchema, updateSchema, t]);
 
   const inputDummySchema = useCallback(() => {
     const dummySchema: Schema = {
@@ -149,20 +158,20 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
 
   const handleSavePackage = () => {
     setIsSaving(true);
-    if (schema && schema.id) {
-      const existingSchema = localStorage.getItem(`packageJSON_${schema.id}`);
-
+    const schemaId = Object.keys(schema)?.[0];
+    if (schema && schemaId) {
+      const existingSchema = localStorage.getItem(schemaId);
       if (existingSchema) {
         // If it exists, update the schema
-        localStorage.setItem(`packageJSON_${schema.id}`, JSON.stringify(schema));
+        localStorage.setItem(schemaId, JSON.stringify(schema));
         showSnackbar({
           title: t('clinicalViewUpdated', 'Clinical view updated'),
           kind: 'success',
           subtitle: t('updateSuccessMessage', 'Clinical view updated successfully'),
         });
         setIsSaving(false);
       } else {
-        localStorage.setItem(`packageJSON_${schema.id}`, JSON.stringify(schema));
+        localStorage.setItem(schemaId, JSON.stringify(schema));
         showSnackbar({
           title: t('clinicalViewCreated', 'Clinical view saved'),
           kind: 'success',
@@ -180,6 +189,10 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
     }
   };
 
+  const handlePreviewPackage = () => {
+    window.open(window.getOpenmrsSpaBase() + `patient/${patientUuid}/chart/Patient%20Summary`);
+  };
+
   const navGroupTitle = getNavGroupTitle(schema);
   const sanitizedTitle = navGroupTitle?.replace(/\s+/g, '_');
 
@@ -267,6 +280,9 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
                   ? t('updateSchema', 'Update Schema')
                   : t('saveClinicalView', 'Save clinical view')}
               </Button>
+              <Button disabled={!navGroupTitle || isSaving} onClick={handlePreviewPackage}>
+                {schema && t('previewClinicalView', 'Preview clinical view')}
+              </Button>
             </div>
           </div>
 

diff --git a/src/components/view-editor/view-editor.scss b/src/components/view-editor/view-editor.scss
@@ -111,4 +111,5 @@ button {
 .topBtns {
   display: flex;
   align-items: center;
+  gap: layout.$spacing-03;
 }
diff --git a/src/config-schema.ts b/src/config-schema.ts
@@ -1,3 +1,13 @@
-export const configSchema = {};
+import { Type } from '@openmrs/esm-framework';
 
-export interface ConfigObject {}
+export const configSchema = {
+  patientUuid: {
+    _type: Type.String,
+    _description: 'UUID for the stock item category',
+    _default: '6cea3475-67d0-4ce9-b947-7cfd407c9168',
+  },
+};
+
+export interface ConfigObject {
+  patientUuid: string;
+}
diff --git a/translations/am.json b/translations/am.json
@@ -42,6 +42,7 @@
   "errorCreatingTabColumns": "Error creating tab columns",
   "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "የቦታ ስም አገኘበት",
+  "errorRendering": "Error rendering",
   "errorSaving": "ማስታወሻ አለም",
   "false": "False",
   "form": "Form",
@@ -70,9 +71,11 @@
   "noSubmenusText": "ምንም የተጨማሪ እይታ አልተጨምረም። አዲስ ንብረት ይጨምሩ.",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "አዲስ ፓኬጅ ተፈጠር",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "የፕሮግራም መለያ",
   "programIdentifierPlaceholder": "ምሳሌ ፡ የHiv እና መነሻ አገልግሎት",
   "renderChanges": "ለውጦችን ይወረድ",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "ይደርስ",
   "saveClinicalView": "ክሊኒካል እይታ ይደርስ",
   "savingErrorMessage": "የክሊኒካል እይታ ማስታወሻ ወንጀል አለ",

diff --git a/translations/en.json b/translations/en.json
@@ -42,6 +42,7 @@
   "errorCreatingTabColumns": "Error creating tab columns",
   "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "Error",
+  "errorRendering": "Error rendering",
   "errorSaving": "Error saving",
   "false": "False",
   "form": "Form",
@@ -70,9 +71,11 @@
   "noSubmenusText": "No submenus views added yet. Click the button to add a new submenu link.",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "New package created",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "Program Identifier",
   "programIdentifierPlaceholder": "e.g. Hiv Care and Treatment",
   "renderChanges": "Render changes",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "Save",
   "saveClinicalView": "Save clinical view",
   "savingErrorMessage": "There was an error saving a clinical view",

diff --git a/translations/es.json b/translations/es.json
@@ -42,6 +42,7 @@
   "errorCreatingTabColumns": "Error creating tab columns",
   "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "Error",
+  "errorRendering": "Error rendering",
   "errorSaving": "Error al guardar",
   "false": "False",
   "form": "Form",
@@ -70,9 +71,11 @@
   "noSubmenusText": "No se han agregado vistas de submenú. Haz clic en el botón para agregar un nuevo enlace de submenú.",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "Nuevo paquete creado",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "Identificador del programa",
   "programIdentifierPlaceholder": "p. ej., Cuidado y tratamiento del VIH",
   "renderChanges": "Renderizar cambios",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "Guardar",
   "saveClinicalView": "Guardar vista clínica",
   "savingErrorMessage": "Hubo un error al guardar una vista clínica",

diff --git a/translations/fr.json b/translations/fr.json
@@ -42,6 +42,7 @@
   "errorCreatingTabColumns": "Error creating tab columns",
   "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "Erreur",
+  "errorRendering": "Error rendering",
   "errorSaving": "Erreur lors de l'enregistrement",
   "false": "False",
   "form": "Form",
@@ -70,9 +71,11 @@
   "noSubmenusText": "Aucun sous-menu ajouté. Cliquez sur le bouton pour ajouter un nouveau lien de sous-menu.",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "Nouveau package créé",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "Identifiant du programme",
   "programIdentifierPlaceholder": "p. ex., Soins et traitement du VIH",
   "renderChanges": "Rendre les modifications",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "Enregistrer",
   "saveClinicalView": "Enregistrer la vue clinique",
   "savingErrorMessage": "Une erreur s'est produite lors de l'enregistrement d'une vue clinique",

diff --git a/translations/he.json b/translations/he.json
@@ -42,6 +42,7 @@
   "errorCreatingTabColumns": "Error creating tab columns",
   "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "שגיאה",
+  "errorRendering": "Error rendering",
   "errorSaving": "שגיאה בשמירה",
   "false": "False",
   "form": "Form",
@@ -70,9 +71,11 @@
   "noSubmenusText": "אין תתי תפריטים שנוספו עדיין. לחץ על הכפתור כדי להוסיף קישור לתפריט משנה חדש.",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "חבילה חדשה נוצרה",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "מזהה תוכנית",
   "programIdentifierPlaceholder": "למשל, טיפול וטיפול ב-HIV",
   "renderChanges": "הצג שינויים",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "שמור",
   "saveClinicalView": "שמור תצוגה קלינית",
   "savingErrorMessage": "הייתה שגיאה בשמירה של תצוגה קלינית",

diff --git a/translations/km.json b/translations/km.json
@@ -42,6 +42,7 @@
   "errorCreatingTabColumns": "Error creating tab columns",
   "errorDeletingConfiguration": "Error deleting configuration",
   "errorFindingSlotName": "កំហុស",
+  "errorRendering": "Error rendering",
   "errorSaving": "កំហុសក្នុងការរក្សាទុក",
   "false": "False",
   "form": "Form",
@@ -70,9 +71,11 @@
   "noSubmenusText": "មិនមានមាតិកាសម្រាប់បន្ថែមទេ។ ចុចប៊ូតុងដើម្បីបន្ថែមតំណទៅម៉ឺនុយរងថ្មីមួយ។",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "កញ្ចប់ថ្មីត្រូវបានបង្កើត",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "លេខសម្គាល់កម្មវិធី",
   "programIdentifierPlaceholder": "ឧ. ការថែទាំនិងការព្យាបាល HIV",
   "renderChanges": "បង្ហាញការប្រែប្រែ",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "រក្សាទុក",
   "saveClinicalView": "រក្សាទុកទស្សនៈគ្លីនិក",
   "savingErrorMessage": "មានកំហុសក្នុងការរក្សាទុកទស្សនៈគ្លីនិក",