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

#10)

* (feat) O3-4068 Add ability to preview clinical view configurations in the patient chart

* code review

* code review

src/components/view-editor/view-editor.component.tsx

@@ -5,12 +5,13 @@ 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';
 
 import styles from './view-editor.scss';
+import { updateSchemaInConfig } from '../../helpers';
 
 interface TranslationFnProps {
   t: TFunction;
@@ -25,6 +26,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 +35,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 +58,18 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
   }, []);
 
   const renderSchemaChanges = useCallback(() => {
+    if (!stringifiedSchema) {
+      showSnackbar({
+        title: t('renderingError', 'Rendering error'),
+        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 = {
@@ -147,22 +157,21 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
     return '';
   };
 
-  const handleSavePackage = () => {
+  const handleSaveClinicalView = () => {
     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));
+        updateSchemaInConfig(schemaId, 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));
+        updateSchemaInConfig(schemaId, schema);
         showSnackbar({
           title: t('clinicalViewCreated', 'Clinical view saved'),
           kind: 'success',
@@ -180,6 +189,10 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
     }
   };
 
+  const handlePreviewClinicalView = () => {
+    window.open(window.getOpenmrsSpaBase() + `patient/${patientUuid}/chart/Patient%20Summary`);
+  };
+
   const navGroupTitle = getNavGroupTitle(schema);
   const sanitizedTitle = navGroupTitle?.replace(/\s+/g, '_');
 
@@ -262,11 +275,14 @@ const ContentPackagesEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
           <div className={styles.heading}>
             <span className={styles.tabHeading}>{t('interactiveBuilder', 'Interactive Builder')}</span>
             <div className={styles.topBtns}>
-              <Button disabled={!navGroupTitle || isSaving} onClick={handleSavePackage}>
+              <Button disabled={!navGroupTitle || isSaving} onClick={handleSaveClinicalView}>
                 {schema && clinicalViewId
                   ? t('updateSchema', 'Update Schema')
                   : t('saveClinicalView', 'Save clinical view')}
               </Button>
+              <Button disabled={!navGroupTitle || isSaving} onClick={handlePreviewClinicalView}>
+                {schema && t('previewClinicalView', 'Preview clinical view')}
+              </Button>
             </div>
           </div>
 

src/components/view-editor/view-editor.scss

@@ -111,4 +111,5 @@ button {
 .topBtns {
   display: flex;
   align-items: center;
+  gap: layout.$spacing-03;
 }

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 patient',
+    _default: '6cea3475-67d0-4ce9-b947-7cfd407c9168',
+  },
+};
+
+export interface ConfigObject {
+  patientUuid: string;
+}

src/helpers.ts

@@ -23,3 +23,7 @@ export const toCamelCase = (str: string) => {
 export const isValidSlotName = (slotName: string) => {
   return /^[a-zA-Z0-9-]+$/.test(slotName);
 };
+
+export const updateSchemaInConfig = (schemaId, schema) => {
+  localStorage.setItem(schemaId, JSON.stringify(schema));
+};

translations/am.json

@@ -70,9 +70,12 @@
   "noSubmenusText": "ምንም የተጨማሪ እይታ አልተጨምረም። አዲስ ንብረት ይጨምሩ.",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "አዲስ ፓኬጅ ተፈጠር",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "የፕሮግራም መለያ",
   "programIdentifierPlaceholder": "ምሳሌ ፡ የHiv እና መነሻ አገልግሎት",
   "renderChanges": "ለውጦችን ይወረድ",
+  "renderingError": "Rendering error",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "ይደርስ",
   "saveClinicalView": "ክሊኒካል እይታ ይደርስ",
   "savingErrorMessage": "የክሊኒካል እይታ ማስታወሻ ወንጀል አለ",

translations/en.json

@@ -70,9 +70,12 @@
   "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",
+  "renderingError": "Rendering error",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "Save",
   "saveClinicalView": "Save clinical view",
   "savingErrorMessage": "There was an error saving a clinical view",

translations/es.json

@@ -70,9 +70,12 @@
   "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",
+  "renderingError": "Rendering error",
+  "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",

translations/fr.json

@@ -70,9 +70,12 @@
   "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",
+  "renderingError": "Rendering error",
+  "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",

translations/he.json

@@ -70,9 +70,12 @@
   "noSubmenusText": "אין תתי תפריטים שנוספו עדיין. לחץ על הכפתור כדי להוסיף קישור לתפריט משנה חדש.",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "חבילה חדשה נוצרה",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "מזהה תוכנית",
   "programIdentifierPlaceholder": "למשל, טיפול וטיפול ב-HIV",
   "renderChanges": "הצג שינויים",
+  "renderingError": "Rendering error",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "שמור",
   "saveClinicalView": "שמור תצוגה קלינית",
   "savingErrorMessage": "הייתה שגיאה בשמירה של תצוגה קלינית",

translations/km.json

@@ -70,9 +70,12 @@
   "noSubmenusText": "មិនមានមាតិកាសម្រាប់បន្ថែមទេ។ ចុចប៊ូតុងដើម្បីបន្ថែមតំណទៅម៉ឺនុយរងថ្មីមួយ។",
   "noWidgetsAvailable": "No widgets available",
   "packageCreated": "កញ្ចប់ថ្មីត្រូវបានបង្កើត",
+  "previewClinicalView": "Preview clinical view",
   "programIdentifier": "លេខសម្គាល់កម្មវិធី",
   "programIdentifierPlaceholder": "ឧ. ការថែទាំនិងការព្យាបាល HIV",
   "renderChanges": "បង្ហាញការប្រែប្រែ",
+  "renderingError": "Rendering error",
+  "renderingErrorMessage": "There was an error rendering the clinical view",
   "save": "រក្សាទុក",
   "saveClinicalView": "រក្សាទុកទស្សនៈគ្លីនិក",
   "savingErrorMessage": "មានកំហុសក្នុងការរក្សាទុកទស្សនៈគ្លីនិក",