From 798d9c55b2dfa278a78c9567be6f31b98d96b2e2 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Mon, 21 Oct 2024 10:43:20 -0300
Subject: [PATCH] Components: Very-generic-input-widget: Fix selector not
 persistent

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 .../custom-widget-elements/Dropdown.vue       | 38 +++++++------------
 src/types/widgets.ts                          | 28 ++++++++------
 2 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/src/components/custom-widget-elements/Dropdown.vue b/src/components/custom-widget-elements/Dropdown.vue
index f80b4eb71..81b42345e 100644
--- a/src/components/custom-widget-elements/Dropdown.vue
+++ b/src/components/custom-widget-elements/Dropdown.vue
@@ -37,7 +37,7 @@ import {
   unlistenCockpitActionVariable,
 } from '@/libs/actions/data-lake'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
-import { CustomWidgetElementOptions, CustomWidgetElementType } from '@/types/widgets'
+import { CustomWidgetElementOptions, CustomWidgetElementType, SelectorOption } from '@/types/widgets'
 
 const widgetStore = useWidgetManagerStore()
 
@@ -49,8 +49,7 @@ const props = defineProps<{
 }>()
 
 const element = toRefs(props).element
-const lastSelectedOption = ref()
-const selectedOption = ref()
+const selectedOption = ref<SelectorOption | undefined>(props.element.options.lastSelected || undefined)
 
 const options = computed(() => {
   return (
@@ -60,27 +59,12 @@ const options = computed(() => {
   )
 })
 
-watch(
-  () => element.value.options,
-  (newValue) => {
-    if (newValue.layout?.selectorOptions) {
-      selectedOption.value = newValue.layout.selectorOptions.find((option) => option.value === selectedOption.value)
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => widgetStore.editingMode,
-  (newValue) => {
-    if (newValue) {
-      lastSelectedOption.value = selectedOption.value
-      selectedOption.value = null
-      return
-    }
-    selectedOption.value = lastSelectedOption.value
-  }
-)
+watch(selectedOption, (newValue) => {
+  widgetStore.updateElementOptions(element.value.hash, {
+    ...element.value.options,
+    lastSelected: newValue,
+  })
+})
 
 const handleSelection = (value: string | number | boolean): void => {
   if (element.value.options.actionParameter?.id) {
@@ -93,6 +77,7 @@ onMounted(() => {
     widgetStore.updateElementOptions(element.value.hash, {
       cockpitAction: undefined,
       actionParameter: undefined,
+      lastSelected: { name: '', value: '' },
       layout: {
         selectorOptions: [{ name: '', value: '' }],
         align: 'start',
@@ -102,9 +87,12 @@ onMounted(() => {
   }
   if (element.value.options.actionParameter) {
     listenCockpitActionVariable(element.value.options.actionParameter.name, (value) => {
-      selectedOption.value = value
+      selectedOption.value = options.value.find((option) => option.value === value)
     })
   }
+  if (element.value.options.lastSelected?.name !== '') {
+    selectedOption.value = element.value.options.lastSelected
+  }
 })
 
 onUnmounted(() => {
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index bc9ecb638..df5094154 100644
--- a/src/types/widgets.ts
+++ b/src/types/widgets.ts
@@ -97,6 +97,17 @@ export enum CustomWidgetElementContainers {
   Right9 = '9-right',
 }
 
+export type SelectorOption = {
+  /**
+   * The name of the option
+   */
+  name: string
+  /**
+   * The value of the option
+   */
+  value: string
+}
+
 /**
  * Options for the Cockpit Actions parameters
  */
@@ -359,6 +370,10 @@ export type CustomWidgetElementOptions = {
        * Action parameter
        */
       actionParameter: CockpitActionParameter
+      /**
+       * Last selected value
+       */
+      lastSelected: SelectorOption
       /**
        * Layout options
        */
@@ -366,18 +381,7 @@ export type CustomWidgetElementOptions = {
         /**
          * Alignment of the element
          */
-        selectorOptions: [
-          {
-            /**
-             * The name of the option
-             */
-            name: string
-            /**
-             * The value of the option
-             */
-            value: string
-          }
-        ]
+        selectorOptions: SelectorOption[]
         /**
          * Alignment of the element
          */