diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx index dc33304..f9c2801 100644 --- a/src/components/interactive-builder/interactive-builder.component.tsx +++ b/src/components/interactive-builder/interactive-builder.component.tsx @@ -1,8 +1,8 @@ -import React, { useCallback } from 'react'; -import { showModal, AddIcon, EditIcon, TrashCanIcon } from '@openmrs/esm-framework'; +import React, { useState, useCallback } 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 } from '@carbon/react'; +import { Button, Accordion, AccordionItem, Tile, TextInput } from '@carbon/react'; import { DefinitionTypes, WidgetTypes, type DynamicExtensionSlot, type Schema } from '../../types'; import styles from './interactive-builder.scss'; import { getSubMenuSlotDetails } from '../../helpers'; @@ -14,6 +14,10 @@ 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 initializeSchema = useCallback(() => { const dummySchema: Schema = { @@ -53,6 +57,56 @@ 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', { @@ -165,126 +219,163 @@ const InteractiveBuilder = ({ schema, onSchemaChange }: InteractiveBuilderProps) 'Now configure dashboards to show on the patient chart when this submenu is clicked.', )}
+ {subMenuSlotDetails?.configure?.[configurationKey]?.tabDefinitions?.map((tabDefinition, index) => ( +{t('tabName', 'Tab name')}
+{editingTab.tabName}
+{t('headerTitle', 'Header title')}
+{editingTab.headerTitle}
+ > + )} +{t('tabName', 'Tab name')}
+{tabDefinition?.tabName}
+{t('headerTitle', 'Header title')}
+{tabDefinition?.headerTitle}
+{t('columns', 'Columns')}
+ {tabDefinition?.columns.map((column) => ( ++ {t('title', 'Title')} : {column.title ?? '--'} +
++ {t('concept', 'Concept')} : {column.concept ?? '--'} +
++ {column.isDate && ( + <> + {t('date', 'Date')} : {column.isDate.toString() ?? '--'} + > + )} +
++ {column.isLink && ( + <> + {t('link', 'Link')} : {column.isLink.toString() ?? '--'} + > + )} +
+{t('tabName', 'Tab name')}
-{tabDefinition?.tabName}
-{t('headerTitle', 'Header title')}
-{tabDefinition?.headerTitle}
-{t('columns', 'Columns')}
- {tabDefinition?.columns.map((column) => ( -- {t('title', 'Title')} : {column.title ?? '--'} -
-- {t('concept', 'Concept')} : {column.concept ?? '--'} -
-- {column.isDate && ( - <> - {t('date', 'Date')} : {column.isDate.toString() ?? '--'} - > - )} -
-- {column.isLink && ( - <> - {t('link', 'Link')} : {column.isLink.toString() ?? '--'} - > - )} -
-{t('headerTitle', 'Header title')}
-{tileDefinition?.tilesHeader}
-{t('columns', 'Columns')}
- {tileDefinition?.columns.map((column) => ( -- {t('title', 'Title')} : {column.title ?? '--'} -
-- {t('concept', 'Concept')} : {column.concept ?? '--'} -
-{t('headerTitle', 'Header title')}
+{tileDefinition?.tilesHeader}
+{t('columns', 'Columns')}
+ {tileDefinition?.columns.map((column) => ( ++ {t('title', 'Title')} : {column.title ?? '--'} +
++ {t('concept', 'Concept')} : {column.concept ?? '--'} +
+