feat: APPS-3100 Decouple SectionRemoveSearchFilter (#666)

* chore: add tests

* fix: restore test for now

* fix: run linter, restore repo to baseline

* fix: change emit to only happen on done or clear

* fix: range error on resize

* feat: decouple and make SectionRemoveSearchFilters reusable

* feat: undo datefi;ter changes

* fix: add ftva theme to sectionremovesearchfilters

---------

Co-authored-by: Jess Divers <[email protected]>
Co-authored-by: Jess <[email protected]>

src/lib-components/BlockRemoveSearchFilter.vue

@@ -65,19 +65,28 @@ function closeBlockFilter() {
 </script>
 
 <template>
-  <button type="button" :class="classes" @click="closeBlockFilter">
-    <BlockTag :label="title" :icon-name="iconName" :theme="theme" :is-secondary="true">
-      <span class="button-close" :class="{ 'button-selected': isSelected && theme === 'ftva' }">
+  <button
+    type="button"
+    :class="classes"
+    @click="closeBlockFilter"
+  >
+    <BlockTag
+      :label="title"
+      :icon-name="iconName"
+      :theme="theme"
+      :is-secondary="true"
+    >
+      <span
+        class="button-close"
+        :class="{ 'button-selected': isSelected && theme === 'ftva' }"
+      >
         <component :is="removeIcons[removeIcon]" />
       </span>
     </BlockTag>
   </button>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 @import "@/styles/default/_block-remove-search-filter.scss";
 @import "@/styles/ftva/_block-remove-search-filter.scss";
 </style>

src/lib-components/DateFilter.vue

@@ -456,9 +456,11 @@ onMounted(() => {
   .button-text {
     display: inline-flex;
     align-items: center;
+
     svg {
       margin-right: 8px;
     }
+
     :deep(path.svg__fill--accent-blue) {
       fill: $medium-grey;
     }
@@ -800,29 +802,36 @@ onMounted(() => {
 
   //mobile drawer styles for datefilter
   :deep(.mobile-drawer) {
+
     // center datepicker within drawer
     .dp__main {
       margin: 0 auto;
+
       .dp__menu {
         border: none;
       }
     }
+
     // styles for the drawer launch button
     // these may be useful for filterdropdown as well
     .mobile-button {
       width: 166px;
       padding: 6px;
       border-radius: 4px;
+
       &:active {
         color: white;
         background-color: $accent-blue;
-          path.svg__fill--accent-blue {
-            fill: white;
+
+        path.svg__fill--accent-blue {
+          fill: white;
         }
       }
+
       &.is-expanded {
         color: $accent-blue;
         border: 2px solid $accent-blue;
+
         path.svg__fill--accent-blue {
           fill: $accent-blue;
         }

src/lib-components/SearchGenericFilters.vue

@@ -114,8 +114,16 @@ function doUpdateQueryFilters(key: string) {
   emit('update:queryFilters', queryFilterButtonDropDownStates.value)
   emit('filters-selection-action')
 }
+// Handler to update filters reactively
+function handleFilterUpdate(updatedFilters: QueryFilters) {
+  // Replace the entire object reactively
+  queryFilterButtonDropDownStates.value = { ...updatedFilters }
+  console.log('Updated Filters:', queryFilterButtonDropDownStates.value)
+  // Emit an event if necessary
+  // emit('update:queryFilters', queryFilterButtonDropDownStates.value);
+}
 function doSearch() {
-  console.log('doSearch function called to emit update:queryFilters and filters-selection-action events to the parent component')
+  console.log('doSearch function called to emit update:queryFilters and filters-selection-action events to the parent component', queryFilterButtonDropDownStates.value)
   emit('update:queryFilters', queryFilterButtonDropDownStates.value)
   emit('filters-selection-action')
 }
@@ -169,10 +177,16 @@ onClickOutside(clickOutsideTarget,
       </transition>
     </div>
 
-    <SectionRemoveSearchFilter
+    <!-- SectionRemoveSearchFilter
       v-model:filters="queryFilterButtonDropDownStates"
       class="section-remove-container"
       @remove-selected="doSearch"
+    / -->
+    <SectionRemoveSearchFilter
+      :filters="queryFilterButtonDropDownStates"
+      class="section-remove-container"
+      @update:filters="handleFilterUpdate"
+      @remove-selected="doSearch"
     />
   </div>
 </template>

src/lib-components/SectionRemoveSearchFilter.vue

@@ -4,6 +4,7 @@
 import { computed, ref, watch } from 'vue'
 import type { PropType } from 'vue'
 import BlockRemoveSearchFilter from '@/lib-components/BlockRemoveSearchFilter.vue'
+import { useTheme } from '@/composables/useTheme'
 
 interface Item {
   [key: string]: string[]
@@ -15,9 +16,10 @@ const { filters } = defineProps({
     default: () => { },
   },
 })
-
 const emit = defineEmits(['update:filters', 'remove-selected'])
 
+const theme = useTheme()
+
 const filteredFilters = ref<Item>({})
 
 watch(() => filters, (newFilters) => {
@@ -28,7 +30,8 @@ watch(() => filters, (newFilters) => {
 
 const parsedFilters = computed(() => {
   const result = Object.entries(filteredFilters.value).flatMap(([name, value]) => {
-    return value.map(item => ({ name, value: item }))
+    const items = Array.isArray(value) ? value : []
+    return items.map(item => ({ name, value: item }))
   })
   return result
 })
@@ -53,6 +56,7 @@ function closeBlockFilter(esfieldName: string, label: string | boolean) {
       :key="`filter-${filter.value}`"
     >
       <BlockRemoveSearchFilter
+        :is-selected="theme === 'ftva'"
         :title="filter.value === 'yes' ? getCheckBoxLabel(filter.name) : filter.value"
         @remove-block-filter="
           closeBlockFilter(

src/stories/SectionRemoveSearchFilter.stories.js

@@ -1,3 +1,4 @@
+import { computed } from 'vue'
 import SectionRemoveSearchFilter from '@/lib-components/SectionRemoveSearchFilter'
 
 export default {
@@ -55,3 +56,23 @@ export function WithMoreFilters() {
     `,
   }
 }
+
+// Variations of stories below
+export function FTVA() {
+  return {
+    data() {
+      return { mock }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { SectionRemoveSearchFilter },
+    template: `
+        <section-remove-search-filter
+            :filters="mock"
+        />
+    `,
+  }
+}