From 40ed3bb1181bf554a24cf954859b694a19d69665 Mon Sep 17 00:00:00 2001
From: lucille <lucyjemutai.2019@gmail.com>
Date: Fri, 11 Oct 2024 11:08:13 +0300
Subject: [PATCH 1/2] update -edit tab definition

---
 .../edit-tab-definition-modal.tsx             |  46 +++
 .../interactive-builder.component.tsx         | 377 ++++++++----------
 src/types.ts                                  |   1 +
 3 files changed, 212 insertions(+), 212 deletions(-)
 create mode 100644 src/components/interactive-builder/edit-tab-definition-modal.tsx

diff --git a/src/components/interactive-builder/edit-tab-definition-modal.tsx b/src/components/interactive-builder/edit-tab-definition-modal.tsx
new file mode 100644
index 0000000..4554175
--- /dev/null
+++ b/src/components/interactive-builder/edit-tab-definition-modal.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Modal, TextInput } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+const EditTabDefinitionModal = ({ tabDefinition, onSave, onCancel }) => {
+  const { t } = useTranslation();
+  const [tabName, setTabName] = useState(tabDefinition?.tabName ?? '');
+  const [headerTitle, setHeaderTitle] = useState(tabDefinition?.headerTitle ?? '');
+
+  const handleSave = () => {
+    const updatedTabDefinition = {
+      ...tabDefinition,
+      tabName,
+      headerTitle,
+    };
+    onSave(updatedTabDefinition);
+  };
+
+  return (
+    <Modal
+      open={true}
+      modalHeading={t('editTabDefinition', 'Edit Tab Definition')}
+      primaryButtonText={t('save', 'Save')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestSubmit={handleSave}
+      onRequestClose={onCancel}
+    >
+      <form>
+        <TextInput
+          id="tabName"
+          labelText={t('tabName', 'Tab Name')}
+          value={tabName}
+          onChange={(e) => setTabName(e.target.value)}
+        />
+        <TextInput
+          id="headerTitle"
+          labelText={t('headerTitle', 'Header Title')}
+          value={headerTitle}
+          onChange={(e) => setHeaderTitle(e.target.value)}
+        />
+      </form>
+    </Modal>
+  );
+};
+
+export default EditTabDefinitionModal;
diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx
index f9c2801..e5b6e75 100644
--- a/src/components/interactive-builder/interactive-builder.component.tsx
+++ b/src/components/interactive-builder/interactive-builder.component.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { showModal, AddIcon, EditIcon, TrashCanIcon, showSnackbar } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-import { Button, Accordion, AccordionItem, Tile, TextInput } from '@carbon/react';
-import { DefinitionTypes, WidgetTypes, type DynamicExtensionSlot, type Schema } from '../../types';
+import { Button, Accordion, AccordionItem, Tile } from '@carbon/react';
+import { DefinitionTypes, type DynamicExtensionSlot, type Schema } from '../../types';
 import styles from './interactive-builder.scss';
 import { getSubMenuSlotDetails } from '../../helpers';
+import EditTabDefinitionModal from './edit-tab-definition-modal';
 
 interface InteractiveBuilderProps {
   schema: Schema;
@@ -15,9 +16,36 @@ interface InteractiveBuilderProps {
 const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps) => {
   const { t } = useTranslation();
   const [editingTab, setEditingTab] = useState(null);
-  const [editedTabName, setEditedTabName] = useState('');
-  const [editedHeaderTitle, setEditedHeaderTitle] = useState('');
-  const [isEditing, setIsEditing] = useState(false);
+
+  const handleEditTabDefinitionModal = (submenuDetails, tabDefinition, configurationKey) => {
+    setEditingTab({ tabDefinition, submenuDetails, configurationKey });
+  };
+
+  const handleSaveTabDefinition = (updatedTabDefinition) => {
+    const updatedSchema = { ...schema };
+    const { submenuDetails, configurationKey } = editingTab;
+
+    const submenuConfig =
+      updatedSchema['@openmrs/esm-patient-chart-app'].extensionSlots[submenuDetails.slot].configure[configurationKey];
+
+    submenuConfig.tabDefinitions = submenuConfig.tabDefinitions.map((tab) =>
+      tab.id === updatedTabDefinition.id ? updatedTabDefinition : tab,
+    );
+
+    onSchemaChange(updatedSchema);
+    setEditingTab(null);
+
+    showSnackbar({
+      title: t('success', 'Success!'),
+      kind: 'success',
+      isLowContrast: true,
+      subtitle: t('tabEditedSuccessfully', 'Tab edited successfully!'),
+    });
+  };
+
+  const handleCancelEdit = () => {
+    setEditingTab(null);
+  };
 
   const initializeSchema = useCallback(() => {
     const dummySchema: Schema = {
@@ -57,56 +85,6 @@ const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps)
     });
   }, [schema, onSchemaChange]);
 
-  const handleEditTab = (tabDefinition) => {
-    setEditingTab(tabDefinition);
-    setEditedTabName(tabDefinition.tabName);
-    setEditedHeaderTitle(tabDefinition.headerTitle);
-    setIsEditing(true);
-  };
-
-  const handleSaveTab = (submenuKey, tabIndex) => {
-    const updatedSchema = JSON.parse(JSON.stringify(schema));
-
-    // Get the dynamic key for the extension slots
-    const extensionSlots = updatedSchema['@openmrs/esm-patient-chart-app'].extensionSlots;
-    const extensionSlotKey = Object.keys(extensionSlots)[0]; // Assuming there is only one key, or get it based on your logic
-
-    let configureEntry = extensionSlots[extensionSlotKey].configure[submenuKey];
-
-    if (!configureEntry) {
-      configureEntry = { tabDefinitions: [] };
-      updatedSchema['@openmrs/esm-patient-chart-app'].extensionSlots[extensionSlotKey].configure[submenuKey] =
-        configureEntry;
-    }
-
-    const updatedTabDefinition = {
-      ...editingTab,
-      tabName: editedTabName,
-      headerTitle: editedHeaderTitle,
-    };
-
-    configureEntry.tabDefinitions[tabIndex] = updatedTabDefinition;
-
-    onSchemaChange(updatedSchema);
-
-    showSnackbar({
-      title: t('success', 'Success!'),
-      kind: 'success',
-      isLowContrast: true,
-      subtitle: t('tabEditedSuccessfully', 'Tab edited successfully!'),
-    });
-
-    setEditingTab(updatedTabDefinition);
-    setIsEditing(false);
-  };
-
-  const handleCancelEdit = () => {
-    setEditingTab(null);
-    setEditedTabName('');
-    setEditedHeaderTitle('');
-    setIsEditing(false);
-  };
-
   const handleConfigureDashboardModal = useCallback(
     (slotName) => {
       const dispose = showModal('configure-dashboard-modal', {
@@ -198,8 +176,17 @@ const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps)
 
       {schema && (
         <div>
+          {editingTab && (
+            <EditTabDefinitionModal
+              tabDefinition={editingTab.tabDefinition}
+              onSave={handleSaveTabDefinition}
+              onCancel={handleCancelEdit}
+            />
+          )}
+
           <div className={styles.packageLabel}>{navGroupTitle}</div>
           <div className={styles.subHeading}>{t('clinicalViewMenus', 'Clinical View Submenus')}</div>
+
           {submenuConfig ? (
             submenuConfig.add?.map((submenuKey) => {
               const submenuDetails = submenuConfig?.configure[submenuKey];
@@ -219,163 +206,129 @@ const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps)
                         'Now configure dashboards to show on the patient chart when this submenu is clicked.',
                       )}
                     </p>
-                    {subMenuSlotDetails?.configure?.[configurationKey]?.tabDefinitions?.map((tabDefinition, index) => (
-                      <Tile className={styles.tileContainer} key={tabDefinition?.tabName}>
-                        {editingTab === tabDefinition ? (
-                          <>
-                            <TextInput
-                              id="tab-name"
-                              labelText={t('tabName', 'Tab Name')}
-                              value={editedTabName}
-                              onChange={(e) => setEditedTabName(e.target.value)}
-                            />
-                            <TextInput
-                              id="header-title"
-                              labelText={t('headerTitle', 'Header Title')}
-                              value={editedHeaderTitle}
-                              onChange={(e) => setEditedHeaderTitle(e.target.value)}
-                            />
-                            <Button onClick={() => handleSaveTab(submenuKey, index)}>{t('save', 'Save')}</Button>
-                            <Button kind="tertiary" onClick={handleCancelEdit}>
-                              {t('cancel', 'Cancel')}
-                            </Button>
-                          </>
-                        ) : (
-                          <>
-                            {editingTab && (
-                              <>
-                                <p className={styles.subheading}>{t('tabName', 'Tab name')}</p>
-                                <p>{editingTab.tabName}</p>
-                                <p className={styles.subheading}>{t('headerTitle', 'Header title')}</p>
-                                <p>{editingTab.headerTitle}</p>
-                              </>
-                            )}
-                            <div className={styles.editStatusIcon}>
-                              <Button
-                                size="md"
-                                kind="tertiary"
-                                hasIconOnly
-                                renderIcon={(props) => <EditIcon size={16} {...props} />}
-                                iconDescription={t('editTabDefinition', 'Edit tab definition')}
-                                onClick={() => handleEditTab(tabDefinition)}
-                              />
-                              <Button
-                                size="md"
-                                kind="tertiary"
-                                hasIconOnly
-                                renderIcon={(props) => <TrashCanIcon size={16} {...props} />}
-                                iconDescription={t('deleteTabDefinition', 'Delete tab definition')}
-                                onClick={() => {
-                                  handleDeleteConfigDetailModal(
-                                    submenuDetails,
-                                    tabDefinition,
-                                    configurationKey,
-                                    DefinitionTypes.TAB_DEFINITION,
-                                  );
-                                }}
-                              />
-                            </div>
-                            <p className={styles.subheading}>{t('tabName', 'Tab name')}</p>
-                            <p>{tabDefinition?.tabName}</p>
-                            <p className={styles.subheading}>{t('headerTitle', 'Header title')}</p>
-                            <p>{tabDefinition?.headerTitle}</p>
-                            <p className={styles.subheading}>{t('columns', 'Columns')}</p>
-                            {tabDefinition?.columns.map((column) => (
-                              <div className={styles.tileContent} key={column.title}>
-                                <p className={styles.content}>
-                                  {t('title', 'Title')} : {column.title ?? '--'}
-                                </p>
-                                <p className={styles.content}>
-                                  {t('concept', 'Concept')} : {column.concept ?? '--'}
-                                </p>
-                                <p className={styles.content}>
-                                  {column.isDate && (
-                                    <>
-                                      {t('date', 'Date')} : {column.isDate.toString() ?? '--'}
-                                    </>
-                                  )}
-                                </p>
-                                <p className={styles.content}>
-                                  {column.isLink && (
-                                    <>
-                                      {t('link', 'Link')} : {column.isLink.toString() ?? '--'}
-                                    </>
-                                  )}
-                                </p>
-                              </div>
-                            ))}
-                            <Button
-                              kind="ghost"
-                              renderIcon={AddIcon}
-                              onClick={() => {
-                                handleConfigureColumnsModal(
-                                  submenuDetails,
-                                  tabDefinition,
-                                  DefinitionTypes.TAB_DEFINITION,
-                                );
-                              }}
-                            >
-                              {t('configureColumns', 'Configure columns')}
-                            </Button>
 
-                            {subMenuSlotDetails?.configure[configurationKey]?.tilesDefinitions?.map(
-                              (tileDefinition) => (
-                                <Tile className={styles.tileContainer} key={tileDefinition?.tilesHeader}>
-                                  <div className={styles.editStatusIcon}>
-                                    <Button
-                                      size="md"
-                                      kind="tertiary"
-                                      hasIconOnly
-                                      renderIcon={(props) => <EditIcon size={16} {...props} />}
-                                      iconDescription={t('editTileDefinition', 'Edit tile definition')}
-                                    />
-                                    <Button
-                                      size="md"
-                                      kind="tertiary"
-                                      hasIconOnly
-                                      renderIcon={(props) => <TrashCanIcon size={16} {...props} />}
-                                      iconDescription={t('deleteTileDefinition', 'Delete tile definition')}
-                                      onClick={() => {
-                                        handleDeleteConfigDetailModal(
-                                          submenuDetails,
-                                          tileDefinition,
-                                          configurationKey,
-                                          DefinitionTypes.TILE_DEFINITION,
-                                        );
-                                      }}
-                                    />
-                                  </div>
-                                  <p className={styles.subheading}>{t('headerTitle', 'Header title')}</p>
-                                  <p>{tileDefinition?.tilesHeader}</p>
-                                  <p className={styles.subheading}>{t('columns', 'Columns')}</p>
-                                  {tileDefinition?.columns.map((column) => (
-                                    <div className={styles.tileContent} key={column.title}>
-                                      <p className={styles.content}>
-                                        {t('title', 'Title')} : {column.title ?? '--'}
-                                      </p>
-                                      <p className={styles.content}>
-                                        {t('concept', 'Concept')} : {column.concept ?? '--'}
-                                      </p>
-                                    </div>
-                                  ))}
-                                  <Button
-                                    kind="ghost"
-                                    renderIcon={AddIcon}
-                                    onClick={() => {
-                                      handleConfigureColumnsModal(
-                                        submenuDetails,
-                                        tileDefinition,
-                                        DefinitionTypes.TILE_DEFINITION,
-                                      );
-                                    }}
-                                  >
-                                    {t('configureColumns', 'Configure columns')}
-                                  </Button>
-                                </Tile>
-                              ),
-                            )}
-                          </>
-                        )}
+                    {subMenuSlotDetails?.configure?.[configurationKey]?.tabDefinitions?.map((tabDefinition) => (
+                      <Tile className={styles.tileContainer} key={tabDefinition.id}>
+                        <div className={styles.editStatusIcon}>
+                          <Button
+                            size="md"
+                            kind={'tertiary'}
+                            hasIconOnly
+                            renderIcon={(props) => <EditIcon size={16} {...props} />}
+                            iconDescription={t('editTabDefinition', 'Edit tab definition')}
+                            onClick={() =>
+                              handleEditTabDefinitionModal(submenuDetails, tabDefinition, configurationKey)
+                            }
+                          />
+                          <Button
+                            size="md"
+                            kind={'tertiary'}
+                            hasIconOnly
+                            renderIcon={(props) => <TrashCanIcon size={16} {...props} />}
+                            iconDescription={t('deleteTabDefinition', 'Delete tab definition')}
+                            onClick={() => {
+                              handleDeleteConfigDetailModal(
+                                submenuDetails,
+                                tabDefinition,
+                                configurationKey,
+                                DefinitionTypes.TAB_DEFINITION,
+                              );
+                            }}
+                          />
+                        </div>
+                        <p className={styles.subheading}>{t('tabName', 'Tab name')}</p>
+                        <p>{tabDefinition?.tabName}</p>
+                        <p className={styles.subheading}>{t('headerTitle', 'Header title')}</p>
+                        <p>{tabDefinition?.headerTitle}</p>
+                        <p className={styles.subheading}>{t('columns', 'Columns')}</p>
+                        {tabDefinition?.columns.map((column) => (
+                          <div className={styles.tileContent}>
+                            <p className={styles.content}>
+                              {t('title', 'Title')} : {column.title ?? '--'}
+                            </p>
+                            <p className={styles.content}>
+                              {t('concept', 'Concept')} : {column.concept ?? '--'}
+                            </p>
+                            <p className={styles.content}>
+                              {column.isDate && (
+                                <>
+                                  {t('date', 'Date')} : {column.isDate.toString() ?? '--'}
+                                </>
+                              )}
+                            </p>
+                            <p className={styles.content}>
+                              {column.isLink && (
+                                <>
+                                  {t('link', 'Link')} : {column.isLink.toString() ?? '--'}
+                                </>
+                              )}
+                            </p>
+                          </div>
+                        ))}
+                        <Button
+                          kind="ghost"
+                          renderIcon={AddIcon}
+                          onClick={() => {
+                            handleConfigureColumnsModal(submenuDetails, tabDefinition, DefinitionTypes.TAB_DEFINITION);
+                          }}
+                        >
+                          {t('configureColumns', 'Configure columns')}
+                        </Button>
+                      </Tile>
+                    ))}
+
+                    {subMenuSlotDetails?.configure[configurationKey]?.tilesDefinitions?.map((tileDefinition) => (
+                      <Tile className={styles.tileContainer}>
+                        <div className={styles.editStatusIcon}>
+                          <Button
+                            size="md"
+                            kind={'tertiary'}
+                            hasIconOnly
+                            renderIcon={(props) => <EditIcon size={16} {...props} />}
+                            iconDescription={t('editTileDefinition', 'Edit tile definition')}
+                          />
+                          <Button
+                            size="md"
+                            kind={'tertiary'}
+                            hasIconOnly
+                            renderIcon={(props) => <TrashCanIcon size={16} {...props} />}
+                            iconDescription={t('deleteTileDefinition', 'Delete tile definition')}
+                            onClick={() => {
+                              handleDeleteConfigDetailModal(
+                                submenuDetails,
+                                tileDefinition,
+                                configurationKey,
+                                DefinitionTypes.TILE_DEFINITION,
+                              );
+                            }}
+                          />
+                        </div>
+                        <p className={styles.subheading}>{t('headerTitle', 'Header title')}</p>
+                        <p>{tileDefinition?.tilesHeader}</p>
+                        <p className={styles.subheading}>{t('columns', 'Columns')} </p>
+                        {tileDefinition?.columns.map((column) => (
+                          <div className={styles.tileContent}>
+                            <p className={styles.content}>
+                              {t('title', 'Title')} : {column.title ?? '--'}
+                            </p>
+                            <p className={styles.content}>
+                              {t('concept', 'Concept')} : {column.concept ?? '--'}
+                            </p>
+                          </div>
+                        ))}
+                        <Button
+                          kind="ghost"
+                          renderIcon={AddIcon}
+                          onClick={() => {
+                            handleConfigureColumnsModal(
+                              submenuDetails,
+                              tileDefinition,
+                              DefinitionTypes.TILE_DEFINITION,
+                            );
+                          }}
+                        >
+                          {t('configureColumns', 'Configure columns')}
+                        </Button>
                       </Tile>
                     ))}
                     <Button
diff --git a/src/types.ts b/src/types.ts
index bcba1e2..ffee4e2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -54,6 +54,7 @@ export interface Column {
 }
 
 export interface TabDefinition {
+  id: any;
   tabName: string;
   headerTitle: string;
   displayText: string;

From 09b1ce781edd062fca0d51f95eeb7d03c00355b5 Mon Sep 17 00:00:00 2001
From: lucille <lucyjemutai.2019@gmail.com>
Date: Fri, 11 Oct 2024 11:17:20 +0300
Subject: [PATCH 2/2] update the transalations

---
 translations/am.json | 1 +
 translations/en.json | 1 +
 translations/es.json | 1 +
 translations/fr.json | 1 +
 translations/he.json | 1 +
 translations/km.json | 1 +
 6 files changed, 6 insertions(+)

diff --git a/translations/am.json b/translations/am.json
index 91f490d..4a9c18a 100644
--- a/translations/am.json
+++ b/translations/am.json
@@ -90,6 +90,7 @@
   "success": "ስኬታማ!",
   "tabColumnsCreated": "Tab columns created",
   "tabConfigurationDeleted": "Tab configuration deleted",
+  "tabEditedSuccessfully": "Tab edited successfully!",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",
diff --git a/translations/en.json b/translations/en.json
index cb41c9a..1002d30 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -90,6 +90,7 @@
   "success": "Success!",
   "tabColumnsCreated": "Tab columns created",
   "tabConfigurationDeleted": "Tab configuration deleted",
+  "tabEditedSuccessfully": "Tab edited successfully!",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",
diff --git a/translations/es.json b/translations/es.json
index a4e182d..dfeade6 100644
--- a/translations/es.json
+++ b/translations/es.json
@@ -90,6 +90,7 @@
   "success": "¡Éxito!",
   "tabColumnsCreated": "Tab columns created",
   "tabConfigurationDeleted": "Tab configuration deleted",
+  "tabEditedSuccessfully": "Tab edited successfully!",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",
diff --git a/translations/fr.json b/translations/fr.json
index 3f742e8..2662c8d 100644
--- a/translations/fr.json
+++ b/translations/fr.json
@@ -90,6 +90,7 @@
   "success": "Succès !",
   "tabColumnsCreated": "Tab columns created",
   "tabConfigurationDeleted": "Tab configuration deleted",
+  "tabEditedSuccessfully": "Tab edited successfully!",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",
diff --git a/translations/he.json b/translations/he.json
index 675e4eb..e270d8c 100644
--- a/translations/he.json
+++ b/translations/he.json
@@ -90,6 +90,7 @@
   "success": "הצלחה!",
   "tabColumnsCreated": "Tab columns created",
   "tabConfigurationDeleted": "Tab configuration deleted",
+  "tabEditedSuccessfully": "Tab edited successfully!",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",
diff --git a/translations/km.json b/translations/km.json
index 71edace..d2209a6 100644
--- a/translations/km.json
+++ b/translations/km.json
@@ -90,6 +90,7 @@
   "success": "ជោគជ័យ!",
   "tabColumnsCreated": "Tab columns created",
   "tabConfigurationDeleted": "Tab configuration deleted",
+  "tabEditedSuccessfully": "Tab edited successfully!",
   "tabName": "Tab name",
   "tabNamePlaceholder": "e.g. Clinical Visit",
   "title": "Title",