fix: search generic checkbox state (#510)

* feat: update checked_state when props.filter change on the page

* fix: lint errros

src/lib-components/SearchGenericFilters.vue

@@ -41,14 +41,6 @@ const emit = defineEmits(['update:queryFilters', 'filters-selection-action'])
 
 const queryFilterButtonDropDownStates = ref<QueryFilters>({})
 
-watch(() => props.queryFilters, (newQueryFilters) => {
-  // Assuming newQueryFilters is always an object as per your default prop definition.
-
-  Object.entries(newQueryFilters).forEach(([key, value]) => {
-    queryFilterButtonDropDownStates.value[key] = value
-  })
-}, { deep: true, immediate: true })
-
 function updateSelected(key: string, newValue: string[]) {
   // This function updates the selected state and could emit an event for parent component
   console.log('Search Generic Filters updateSelected: ', key, JSON.stringify(newValue))
@@ -61,6 +53,23 @@ const checkedState = ref(props.filters.some(obj => obj.inputType === 'single-che
 
 const openItemIndex = ref(-1) // -1 indicates that no item is open
 
+watch(() => props.queryFilters, (newQueryFilters) => {
+  // Assuming newQueryFilters is always an object as per your default prop definition.
+  console.log('In watch function props.queryFilters updated', JSON.stringify(newQueryFilters), JSON.stringify(props.filters))
+  Object.entries(newQueryFilters).forEach(([key, value]) => {
+    queryFilterButtonDropDownStates.value[key] = value
+  })
+  console.log('queryFilterButtonDropDownStates.value', JSON.stringify(queryFilterButtonDropDownStates.value))
+
+  console.log('In watch function props.queryFilters checkedState.value', checkedState.value, JSON.stringify(props.filters))
+}, { deep: true, immediate: true })
+watch(() => props.filters, (newFilters) => {
+  console.log('In watch function props.filters updated', JSON.stringify(props.filters), JSON.stringify(newFilters))
+  console.log('In watch funciton props.filters heello query filters props.queryFilters', props.queryFilters)
+  console.log('In watch fucntion props.filters queryFilterButtonDropDownStates', queryFilterButtonDropDownStates.value)
+  checkedState.value = newFilters?.some(obj => obj.inputType === 'single-checkbox' && queryFilterButtonDropDownStates.value[obj.esFieldName]?.includes('yes'))
+}, { deep: true, immediate: true })
+
 // filter buttons
 const parsedFilters = computed(() => {
   return props.filters.map((obj, index) => {
@@ -112,6 +121,7 @@ function doSearch() {
 }
 
 watch(queryFilterButtonDropDownStates, () => {
+  console.log('Update checked state')
   checkedState.value = props.filters.some(obj => obj.inputType === 'single-checkbox' && queryFilterButtonDropDownStates.value[obj.esFieldName]?.includes('yes'))
 })
 
@@ -122,7 +132,10 @@ onClickOutside(clickOutsideTarget,
 </script>
 
 <template>
-  <div ref="clickOutsideTarget" class="search-generic-filters">
+  <div
+    ref="clickOutsideTarget"
+    class="search-generic-filters"
+  >
     <div
       v-if="filters.length > 0"
       class="container"