From 18226fb77b21d92a5f4f71e981ccfeb45de16085 Mon Sep 17 00:00:00 2001
From: uccidibuti <lorenzo@vannucci.io>
Date: Mon, 3 Oct 2022 13:10:04 +0200
Subject: [PATCH] fix select-search; fix Time selection is not updated after
 zoom #6904

---
 http_src/vue/data-time-range-picker.vue |  12 ++-
 http_src/vue/page-stats.vue             |   2 +-
 http_src/vue/select-search.vue          | 119 +++++++++++++++++++-----
 3 files changed, 104 insertions(+), 29 deletions(-)

diff --git a/http_src/vue/data-time-range-picker.vue b/http_src/vue/data-time-range-picker.vue
index 9ae50ea051..395eb32b8b 100644
--- a/http_src/vue/data-time-range-picker.vue
+++ b/http_src/vue/data-time-range-picker.vue
@@ -5,7 +5,7 @@
     <div class="controls d-flex flex-wrap">
       <div class="btn-group me-auto btn-group-sm">
         <slot name="begin"></slot>
-        <select-search v-model:selected_option="selected_time_preset"
+        <select-search v-model:selected_option="selected_time_option"
           :id="'time_preset_range_picker'"
           :options="time_preset_list"
           @select_option="change_select_time">
@@ -159,7 +159,8 @@ export default {
             const now = this.get_utc_seconds(Date.now());
             const end_utc_s = this.get_utc_seconds(end_utc);
             const begin_utc_s = this.get_utc_seconds(begin_utc);
-            
+
+	    
             if (this.is_between(end_utc_s, now, tolerance)) {
                 if (this.is_between(begin_utc_s, now - s_values.min_5, tolerance)) {
                     this.select_time_value = "min_5";
@@ -185,8 +186,8 @@ export default {
             this.time_preset_list.forEach(element => {
               element.currently_active = false
               if(element.value == this.select_time_value) {
-                this.selected_time_preset = element
-                element.currently_active = true
+                this.selected_time_option = element;
+                element.currently_active = true;
               }
             });
         },
@@ -326,7 +327,8 @@ export default {
       //status_id: "data-time-range-picker" + this.$props.id,
       epoch_status: null,
       enable_apply: false,
-      select_time_value: "min_5",
+	  select_time_value: "min_5",
+	  selected_time_option: null,
       wrong_date: false,
       flat_begin_date: null,
       flat_end_date: null,
diff --git a/http_src/vue/page-stats.vue b/http_src/vue/page-stats.vue
index d7ae4f519d..7ac67a790b 100644
--- a/http_src/vue/page-stats.vue
+++ b/http_src/vue/page-stats.vue
@@ -128,7 +128,7 @@ const current_groups_options_mode = ref(init_groups_option_mode());
 
 let last_timeseries_groups_loaded = null;
 
-const custom_metric = { value: "custom", label: i18n('page_stats.custom_metrics'), currently_active: false }
+const custom_metric = { label: i18n('page_stats.custom_metrics'), currently_active: false }
 
 const page_snapshots = "timeseries";
 
diff --git a/http_src/vue/select-search.vue b/http_src/vue/select-search.vue
index 156b6fd85e..c4a5143744 100644
--- a/http_src/vue/select-search.vue
+++ b/http_src/vue/select-search.vue
@@ -1,10 +1,10 @@
 <template>
 <select class="select2 form-select" ref="select2" required name="filter_type" >
-  <option v-for="(item, i) in options_2" :selected="selected_option.label == item.label" :value="item">
+  <option v-for="(item, i) in options_2" :selected="item.value == selected_option_2.value" :value="item.value">
     {{item.label}}
   </option>
   <optgroup v-for="(item, i) in groups_options_2" :label="item.group">
-    <option v-for="(opt, j) in item.options" :selected="selected_option.label == opt.label" :value="opt">
+    <option v-for="(opt, j) in item.options" :selected="item.value == selected_option_2.value" :value="opt.value">
       {{opt.label}}
     </option>
   </optgroup>
@@ -22,6 +22,7 @@ const emit = defineEmits(['update:selected_option', 'select_option']);
 
 const options_2 = ref([]);
 const groups_options_2 = ref([]);
+const selected_option_2 = ref({});
 
 const props = defineProps({
     id: String,
@@ -30,52 +31,119 @@ const props = defineProps({
     disable_change: Boolean,
 });
 
+function get_props_selected_option() {
+    if (props.selected_option == null) {
+	return props.options[0];
+    }
+    return props.selected_option;
+}
+
+function set_selected_option(selected_option) {
+    if (selected_option == null) {
+	selected_option = get_props_selected_option();
+    }
+    selected_option_2.value = selected_option;
+    if (selected_option_2.value.value == null) {
+	selected_option_2.value.value = selected_option.label;
+    }
+}
+
 watch(() => props.selected_option, (cur_value, old_value) => {
+    // if (first_time_render == true) { return; }
     console.log(`select-search: selected_options: ${cur_value.label}`);
     // selected2_option.value = cur_value;
-});
+    set_selected_option(cur_value);
+    let select2Div = select2.value;
+    let value = get_value_from_selected_option(cur_value);
+    // let option = find_option_from_value(value);
+    // if (option != null) {
+	console.log(`select-search update value with trigger ${value}`);
+	$(select2Div).val(value)
+	$(select2Div).trigger("change");
+    // }
+}, { flush: 'pre'});
+
+function get_value_from_selected_option(selected_option) {
+    if (selected_option == null) {
+	selected_option = get_props_selected_option();
+    }
+    let value;
+    if (selected_option.value) {
+	value = selected_option.value;
+    } else {
+	value = selected_option.label;
+    }
+    return value;
+}
+
+function find_option_from_value(value) {
+    if (value == null) {
+	value = get_value_from_selected_option();
+    }
+    let option = options_2.value.find((o) => o.value == value);
+    if (option != null) { return option; }
+    for (let i = 0; i < groups_options_2.value.length; i += 1) {
+	let g = groups_options_2.value[i];
+	option = g.options.find((o) => o.value == value);
+	if (option != null) {
+	    return option;
+	}
+    }
+    return null;
+}
 
 let first_time_render = true;
-let is_mounted = false;
-watch(() => props.options, (current_value, old_value) => {    
-    if (props.disable_change == true || is_mounted == false) { return; }
 
-    console.log(`Watch select-search: ${props.id}, ${JSON.stringify(props.selected_option)}`);
-    // setTimeout(() => render(), 100);
-    render();
-}, { flush: 'post'});
+watch(() => props.options, (current_value, old_value) => {    
+    if (props.disable_change == true) { return; }
+    
+    console.log(`select-search:watch-post ${props.id}, ${JSON.stringify(props.selected_option)}`);
+    set_input();
+}, { flush: 'pre'});
 
 onMounted(() => {
     console.log("select-search:mounted");
-    if (!props.disable_change) {
-	render();
+    if (!props.disable_change || !first_time_render) {
+    	set_input();
     }
-    is_mounted = true;
 });
 
 function set_options() {
     options_2.value = [];
     groups_options_2.value = [];
-
+    
     if (props.options == null) { return; }
     let groups_dict = {};
     props.options.forEach((option) => {
+	let opt_2 = { ...option };
+	if (opt_2.value == null) {
+	    opt_2.value = opt_2.label;
+	}
 	if (option.group == null) {
-	    options_2.value.push(option);
+	    options_2.value.push(opt_2);
 	} else {
 	    if (groups_dict[option.group] == null) {
-		groups_dict[option.group] = { group: option.group, options: [] };
+		groups_dict[option.group] = { group: opt_2.group, options: [] };
 	    }
-	    groups_dict[option.group].options.push(option);
-	}	
+	    groups_dict[option.group].options.push(opt_2);
+	}
     });
     groups_options_2.value = ntopng_utility.object_to_array(groups_dict);
+    
+}
 
+watch([options_2, groups_options_2], (cur_value, old_value) => {
+    console.log(`select-search:watchEffect`);
+    render();
+}, { flush: 'post'});
+
+function set_input() {
+    set_options();
+    set_selected_option();
 }
 
 const render = () => {
     console.log(`select-search:render ${JSON.stringify(props.selected_option)}`);
-    set_options();
     let select2Div = select2.value;
     if (first_time_render == false) {
 	destroy();
@@ -86,19 +154,23 @@ const render = () => {
 	    height: '500px',
 	    theme: 'bootstrap-5',
 	    dropdownParent: $(select2Div).parent(),
-      dropdownAutoWidth : true
+	    dropdownAutoWidth : true
 	});
 	$(select2Div).on('select2:select', function (e) {
 	    let data = e.params.data;
 	    let value = data.element._value;
+	    let option = find_option_from_value(value);
 	    if (value != props.selected_option) {
-		console.log(`UPDATE SELECT_SEARCH \n${JSON.stringify(value)} ${JSON.stringify(props.selected_option)}`);
-		emit('update:selected_option', value);
-		emit('select_option', value);
+		console.log(`select-search: UPDATE \n${JSON.stringify(value)} ${JSON.stringify(props.selected_option)}`);
+		// emit('update:selected_option', value);
+		// emit('select_option', value);
+		emit('update:selected_option', option);
+		emit('select_option', option);
 	    }
 	});
     }
     first_time_render = false;
+    console.log(`select-search render: set value ${selected_option_2.value.value}`);
     // this.$forceUpdate();
     // $(select2Div).val(props.selected_option);
 };
@@ -117,6 +189,7 @@ function destroy() {
 }
 
 onBeforeUnmount(() => {
+    console.log("select-search: unmount");
     destroy();
 });