Map Dialog Updates

Author: BojanSovticEngIT

src/modules/documentExecution/dashboard/interfaces/mapWidget/DashboardMapWidget.d.ts

@@ -245,6 +245,9 @@ export interface IMapDialogSettings {
 
 export interface IMapDialogSettingsProperty {
     name: string
+    prefix: string
+    suffix: string
+    precision: number
     columns: string[]
 }
 
@@ -255,6 +258,9 @@ export interface IMapTooltipSettings {
 
 export interface IMapTooltipSettingsLayer {
     name: string
+    prefix: string
+    suffix: string
+    precision: number
     columns: string[]
 }
 

src/modules/documentExecution/dashboard/widget/MapWidget/LeafletWrapper.vue

@@ -199,7 +199,7 @@ const handleLegendUpdated = (legendData: Record<string, any> | undefined) => {
 
 .customLeafletPopup {
     margin: 0px 0px;
-    padding: 0px 5px;
+    padding: 0px 5px !important;
     background: white;
     min-width: 150px;
     max-width: 400px;

src/modules/documentExecution/dashboard/widget/MapWidget/visualization/MapDialogHelper.ts

@@ -1,5 +1,5 @@
 import { ISelection, IVariable, IWidget } from '../../../Dashboard'
-import { ILayerFeature, IMapDialogSettings, IMapTooltipSettings, IMapTooltipSettingsLayer, IMapWidgetCrossNavigation, IMapWidgetLayer, IMapWidgetLinkConfiguration, IMapWidgetPreview, IMapWidgetSelectionConfiguration, IMapWidgetVisualizationType } from '../../../interfaces/mapWidget/DashboardMapWidget'
+import { ILayerFeature, IMapDialogSettings, IMapDialogSettingsProperty, IMapTooltipSettings, IMapTooltipSettingsLayer, IMapWidgetCrossNavigation, IMapWidgetLayer, IMapWidgetLinkConfiguration, IMapWidgetPreview, IMapWidgetSelectionConfiguration, IMapWidgetVisualizationType } from '../../../interfaces/mapWidget/DashboardMapWidget'
 import { getColumnName } from '../LeafletHelper'
 import L from 'leaflet'
 import { ChartValuesRecord } from './MapChartsVizualizationHelper'
@@ -23,6 +23,7 @@ export const createDialogFromDataset = (tooltip: boolean, layerVisualizationSett
     const layersList = settings.layers.filter((layer: IMapTooltipSettingsLayer) => layer.name === layerVisualizationSettings.target)
     layersList.forEach((item: IMapTooltipSettingsLayer) => {
         item.columns.forEach((column: string) => {
+            const layerSettings = settings.layers.find((layerSettings: IMapDialogSettingsProperty | IMapTooltipSettingsLayer) => layerSettings.name === layerVisualizationSettings.target && layerSettings.columns.includes(column))
             const value = `${column}: ${row[getColumnName(column, meta)]}`
             const dataMap = {}
 
@@ -31,7 +32,7 @@ export const createDialogFromDataset = (tooltip: boolean, layerVisualizationSett
                 dataMap[field.header] = row[field.dataIndex]
             })
 
-            list.append(createTooltipListItem(value, (settings as IMapDialogSettings).style, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
+            list.append(createTooltipListItem(value, (settings as IMapDialogSettings).style, layerSettings, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
         })
     })
     if (tooltip) return L.tooltip().setContent(list)
@@ -65,18 +66,7 @@ export const addTooltipToMarkerForLayerData = (feature: ILayerFeature, model: IW
 }
 
 // Function that creates popup/tooltip for the maps that use layers as the target
-const createDialogForLayerData = (
-    feature: ILayerFeature,
-    tooltip: boolean,
-    layerVisualizationSettings: IMapWidgetVisualizationType,
-    settings: IMapTooltipSettings | IMapDialogSettings,
-    value: string | number | ChartValuesRecord,
-    widgetModel: IWidget,
-    activeSelections: ISelection[],
-    dashboardId: string,
-    variables: IVariable[],
-    foreignKeyValue?: string | null
-) => {
+const createDialogForLayerData = (feature: ILayerFeature, tooltip: boolean, layerVisualizationSettings: IMapWidgetVisualizationType, settings: IMapTooltipSettings | IMapDialogSettings, value: string | number | ChartValuesRecord, widgetModel: IWidget, activeSelections: ISelection[], dashboardId: string, variables: IVariable[], foreignKeyValue?: string | null) => {
     const container = document.createElement('div')
     const layersList = settings.layers.filter((layer: IMapTooltipSettingsLayer) => layer.name === layerVisualizationSettings.target) as any
 
@@ -88,18 +78,19 @@ const createDialogForLayerData = (
         const targetDatasetList = document.createElement('ul')
         targetDatasetList.classList.add('customLeafletPopup')
         targetDatasetList.append(createTooltipListHeader(layerVisualizationSettings.targetDataset))
-        targetDatasetList.append(createTooltipListItem(`${layerVisualizationSettings.targetDatasetForeignKeyColumn}: ${getTooltipHeaderValue(value, layerVisualizationSettings.targetDatasetForeignKeyColumn, foreignKeyValue)}`, (settings as IMapDialogSettings).style, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables))
+        targetDatasetList.append(createTooltipListItem(`${layerVisualizationSettings.targetDatasetForeignKeyColumn}: ${getTooltipHeaderValue(value, layerVisualizationSettings.targetDatasetForeignKeyColumn, foreignKeyValue)}`, (settings as IMapDialogSettings).style, null, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables))
         container.appendChild(targetDatasetList)
     }
 
     const list = document.createElement('ul')
     list.classList.add('customLeafletPopup')
 
     layersList.forEach((item: IMapTooltipSettingsLayer) => {
-        if (layerVisualizationSettings.targetDataset && layerVisualizationSettings.targetProperty) list.append(createTooltipListHeader(item.name))
+        if (layerVisualizationSettings.targetDataset && layerVisualizationSettings.targetProperty) list.append(createTooltipListHeader(layerVisualizationSettings.layerName ?? ''))
         item.columns.forEach((property: string) => {
+            const layerSettings = settings.layers.find((layerSettings: IMapDialogSettingsProperty | IMapTooltipSettingsLayer) => layerSettings.name === layerVisualizationSettings.target && layerSettings.columns.includes(property))
             const dataMap = feature.properties
-            list.append(createTooltipListItem(`${property}: ${feature.properties[property] ?? ''}`, (settings as IMapDialogSettings).style, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
+            list.append(createTooltipListItem(`${property}: ${feature.properties[property] ?? ''}`, (settings as IMapDialogSettings).style, layerSettings, widgetModel, layerVisualizationSettings, activeSelections, dashboardId, variables, dataMap))
         })
     })
 
@@ -122,9 +113,13 @@ const createTooltipListHeader = (header: string) => {
     return headerElement
 }
 
-const createTooltipListItem = (value: string, style: IListItemStyle | undefined, widgetModel: IWidget, layerVisualizationSettings: IMapWidgetVisualizationType, activeSelections: ISelection[], dashboardId: string, variables: IVariable[], dataMap?: Record<string, string | number> | null) => {
+const createTooltipListItem = (value: string, style: IListItemStyle | undefined, layerSettings: IMapDialogSettingsProperty | IMapTooltipSettingsLayer | null | undefined, widgetModel: IWidget, layerVisualizationSettings: IMapWidgetVisualizationType, activeSelections: ISelection[], dashboardId: string, variables: IVariable[], dataMap?: Record<string, string | number> | null) => {
     const li = document.createElement('li')
-    li.innerHTML = value
+    const [rawValueColumn, rawValue] = value.split(':')
+    const column = rawValueColumn.trim()
+    const formattedValue = rawValue.trim()
+
+    li.innerHTML = column + ': ' + (layerSettings?.prefix || '') + getFormattedValueForTheTooltipListItem(formattedValue, layerSettings?.precision) + (layerSettings?.suffix || '')
 
     li.classList.add('kn-cursor-pointer')
 
@@ -150,6 +145,18 @@ const createTooltipListItem = (value: string, style: IListItemStyle | undefined,
     return li
 }
 
+const getFormattedValueForTheTooltipListItem = (value: string, precision: number | undefined) => {
+    if (!precision) return value
+
+    const floatValue = parseFloat(value)
+
+    if (!isNaN(floatValue) && Number.isFinite(floatValue) && !Number.isInteger(floatValue)) {
+        return floatValue.toFixed(precision)
+    }
+
+    return value
+}
+
 const checkInteractionsIfColumnIsClickable = (value: string, widgetModel: IWidget, layerVisualizationSettings: IMapWidgetVisualizationType) => {
     const [rawValueColumn] = value.split(':')
     const column = rawValueColumn.trim()

src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/MapWidget/dialog/MapDialogSettings.vue

@@ -8,14 +8,7 @@
 
         <div v-for="(dialogProperty, index) in dialogSettings.layers" :key="index" class="dynamic-form-item p-grid p-col-12 p-ai-center p-m-0 p-pt-0">
             <div v-show="dropzoneTopVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
-            <div
-                class="p-col-12 form-list-item-dropzone"
-                :class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }"
-                @drop.stop="onDropComplete($event, 'before', index)"
-                @dragover.prevent
-                @dragenter.prevent="displayDropzone('top', index)"
-                @dragleave.prevent="hideDropzone('top', index)"
-            ></div>
+            <div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent="displayDropzone('top', index)" @dragleave.prevent="hideDropzone('top', index)"></div>
 
             <div class="p-d-flex kn-flex p-ai-center" :draggable="true" @dragstart.stop="onDragStart($event, index)">
                 <i class="pi pi-th-large kn-cursor-pointer"></i>
@@ -35,14 +28,13 @@
                 </div>
             </div>
 
-            <div
-                class="p-col-12 form-list-item-dropzone"
-                :class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }"
-                @drop.stop="onDropComplete($event, 'after', index)"
-                @dragover.prevent
-                @dragenter.prevent="displayDropzone('bottom', index)"
-                @dragleave.prevent="hideDropzone('bottom', index)"
-            ></div>
+            <div class="p-grid p-col-12 p-mt-2">
+                <q-input dense class="p-col-4" filled v-model="dialogProperty.prefix" :label="$t('dashboard.widgetEditor.prefix')" :disable="dialogSettingsDisabled" />
+                <q-input dense class="p-col-4" filled v-model="dialogProperty.suffix" :label="$t('dashboard.widgetEditor.suffix')" :disable="dialogSettingsDisabled" />
+                <q-input dense class="p-col-4" type="number" filled v-model="dialogProperty.precision" :label="$t('dashboard.widgetEditor.precision')" :disable="dialogSettingsDisabled" />
+            </div>
+
+            <div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent="displayDropzone('bottom', index)" @dragleave.prevent="hideDropzone('bottom', index)"></div>
             <div v-show="dropzoneBottomVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
         </div>
     </div>
@@ -101,7 +93,7 @@ export default defineComponent({
             if (targetLayer?.type === 'layer') await this.loadAvailablePropertiesInTooltipSettingsForLayer(targetLayer)
         },
         addDialog() {
-            this.dialogSettings?.layers.push({ name: '', columns: [] })
+            this.dialogSettings?.layers.push(mapWidgetDefaultValues.getDefaultDialogSettings().layers[0])
         },
         removeDialog(index: number) {
             if (!this.dialogSettings || !this.dialogSettings.layers) return

src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/MapWidget/tooltips/MapTooltips.vue

@@ -5,14 +5,8 @@
         </Message>
         <div v-for="(tool, index) in tooltip.layers" :key="index" class="dynamic-form-item p-grid p-col-12 p-ai-center">
             <div v-show="dropzoneTopVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
-            <div
-                class="p-col-12 form-list-item-dropzone"
-                :class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }"
-                @drop.stop="onDropComplete($event, 'before', index)"
-                @dragover.prevent
-                @dragenter.prevent="displayDropzone('top', index)"
-                @dragleave.prevent="hideDropzone('top', index)"
-            ></div>
+            <div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneTopVisible[index] }" @drop.stop="onDropComplete($event, 'before', index)" @dragover.prevent @dragenter.prevent="displayDropzone('top', index)" @dragleave.prevent="hideDropzone('top', index)"></div>
+
             <div class="p-d-flex kn-flex p-ai-center" :draggable="true" @dragstart.stop="onDragStart($event, index)">
                 <i class="pi pi-th-large kn-cursor-pointer"></i>
                 <div class="kn-flex p-mx-2 p-d-flex p-flex-row" style="gap: 0.5em">
@@ -31,14 +25,13 @@
                 </div>
             </div>
 
-            <div
-                class="p-col-12 form-list-item-dropzone"
-                :class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }"
-                @drop.stop="onDropComplete($event, 'after', index)"
-                @dragover.prevent
-                @dragenter.prevent="displayDropzone('bottom', index)"
-                @dragleave.prevent="hideDropzone('bottom', index)"
-            ></div>
+            <div class="p-grid p-col-12 p-mt-2">
+                <q-input dense class="p-col-4" filled v-model="tool.prefix" :label="$t('dashboard.widgetEditor.prefix')" :disable="tooltipsDisabled" />
+                <q-input dense class="p-col-4" filled v-model="tool.suffix" :label="$t('dashboard.widgetEditor.suffix')" :disable="tooltipsDisabled" />
+                <q-input dense class="p-col-4" type="number" filled v-model="tool.precision" :label="$t('dashboard.widgetEditor.precision')" :disable="tooltipsDisabled" />
+            </div>
+
+            <div class="p-col-12 form-list-item-dropzone" :class="{ 'form-list-item-dropzone-active': dropzoneBottomVisible[index] }" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent="displayDropzone('bottom', index)" @dragleave.prevent="hideDropzone('bottom', index)"></div>
             <div v-show="dropzoneBottomVisible[index]" class="p-col-12 form-list-item-dropzone-active" @drop.stop="onDropComplete($event, 'after', index)" @dragover.prevent @dragenter.prevent @dragleave.prevent></div>
         </div>
     </div>
@@ -55,6 +48,7 @@ import MultiSelect from 'primevue/multiselect'
 import Message from 'primevue/message'
 import defaultsDescriptor from '../../../helpers/mapWidget/MapWidgetDefaultValuesDescriptor.json'
 import { getPropertiesByLayerId } from '../../../../MapWidget/MapWidgetDataProxy'
+import * as mapWidgetDefaultValues from '../../../helpers/mapWidget/MapWidgetDefaultValues'
 
 export default defineComponent({
     name: 'map-tooltips',
@@ -95,7 +89,7 @@ export default defineComponent({
             if (targetLayer?.type === 'layer') await this.loadAvailablePropertiesInTooltipSettingsForLayer(targetLayer)
         },
         addTooltip() {
-            this.tooltip?.layers.push({ name: '', columns: [] })
+            this.tooltip?.layers.push(mapWidgetDefaultValues.getDefaultMapTooltips().layers[0])
         },
         removeTooltip(index: number) {
             if (!this.tooltip || !this.tooltip.layers) return

src/modules/documentExecution/dashboard/widget/WidgetEditor/helpers/mapWidget/MapWidgetDefaultValuesDescriptor.json

@@ -21,7 +21,10 @@
         "layers": [
             {
                 "columns": [],
-                "name": ""
+                "name": "",
+                "precision": 2,
+                "prefix": "",
+                "suffix": ""
             }
         ],
         "style": {
@@ -87,7 +90,10 @@
         "layers": [
             {
                 "columns": [],
-                "name": ""
+                "name": "",
+                "precision": 2,
+                "prefix": "",
+                "suffix": ""
             }
         ]
     },