feat: migrate filters components to Composition API (#1550)

empathyco · Jul 8, 2024 · dd6a2d7 · dd6a2d7
1 parent 5d8b0b4
commit dd6a2d7
Show file tree

Hide file tree

Showing 5 changed files with 490 additions and 374 deletions.
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
@@ -28,12 +28,69 @@
       </label>
     </SimpleFilter>
   </div>
+  <br />
+  <hr />
+  <br />
+  <h2>Number Range Filter</h2>
+  <NumberRangeFilter
+    :clickEvents="{ UserClickedANumberRangeFilter: filterNumber }"
+    :filter="filterNumber"
+    :cssClasses="innerCssClasses"
+  />
+  <br />
+  <hr />
+  <br />
+  <h2>Editable Number Range Filter</h2>
+  <EditableNumberRangeFilter
+    :filter="filterEditNumber"
+    :hasClearButton="false"
+    :class="innerCssClasses"
+    :inputsClass="'my-inputs-class'"
+    :buttonsClass="'my-buttons-class'"
+  />
+  <EditableNumberRangeFilter
+    :filter="filterEditNumber"
+    :class="innerCssClasses"
+    #default="{
+      min,
+      max,
+      setMin,
+      setMax,
+      emitUserModifiedFilter,
+      clearValues,
+      hasError,
+      isAnyRange
+    }"
+  >
+    <button @click="emitUserModifiedFilter">✅ Apply!</button>
+    <button @click="clearValues">🗑 Clear!</button>
+    <input @change="setMin($event.target.value)" :value="!isAnyRange ? min : null" />
+    <input @change="setMax($event.target.value)" :value="max" />
+    <div v-if="hasError" class="has-error">⚠️ Invalid range values</div>
+  </EditableNumberRangeFilter>
+  <br />
+  <hr />
+  <br />
+  <h2>Hierarchical Filter</h2>
+  <HierarchicalFilter :cssClasses="innerCssClasses" :filter="filterHierarchical">
+    <template #label>
+      <span class="custom-class">{{ filterHierarchical.label }}</span>
+    </template>
+  </HierarchicalFilter>
 </template>
 
 <script setup lang="ts">
-  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
+  import {
+    SimpleFilter as SimpleFilterModel,
+    NumberRangeFilter as NumberRangeFilterModel,
+    EditableNumberRangeFilter as EditableNumberRangeFilterModel,
+    HierarchicalFilter as HierarchicalFilterModel
+  } from '@empathyco/x-types';
   import { computed, ref, Ref } from 'vue';
   import SimpleFilter from '../../../../../x-components/src/x-modules/facets/components/filters/simple-filter.vue';
+  import NumberRangeFilter from '../../../../../x-components/src/x-modules/facets/components/filters/number-range-filter.vue';
+  import EditableNumberRangeFilter from '../../../../../x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue';
+  import HierarchicalFilter from '../../../../../x-components/src/x-modules/facets/components/filters/hierarchical-filter.vue';
 
   const filter: Ref<SimpleFilterModel> = ref({
     modelName: 'SimpleFilter',
@@ -44,14 +101,50 @@
     selected: false
   });
 
+  const filterNumber: Ref<NumberRangeFilterModel> = ref({
+    id: `price:1-10`,
+    modelName: 'NumberRangeFilter',
+    label: `From 1 to 10`,
+    facetId: 'price',
+    range: {
+      min: 1,
+      max: 10
+    },
+    selected: false
+  });
+
+  const filterEditNumber: Ref<EditableNumberRangeFilterModel> = ref({
+    facetId: 'age',
+    id: 'age:primary',
+    label: 'primary',
+    modelName: 'EditableNumberRangeFilter',
+    range: {
+      min: null,
+      max: null
+    },
+    selected: false
+  });
+
+  const filterHierarchical: Ref<HierarchicalFilterModel> = ref({
+    id: `categories:men`,
+    modelName: 'HierarchicalFilter',
+    label: `men`,
+    facetId: 'categories',
+    parentId: null,
+    totalResults: 10,
+    children: [],
+    selected: false
+  });
+
   const innerCssClasses = computed(() => [
     'MOT-CUSTOM',
     { 'MOT-CUSTOM--SELECTED': filter.value.selected }
   ]);
 </script>
 
-<style>
-  .MOT-CUSTOM--SELECTED {
+<style lang="scss">
+  .MOT-CUSTOM--SELECTED,
+  .x-selected {
     background-color: greenyellow;
   }
 </style>
diff --git a/...ts/src/x-modules/facets/components/filters/__tests__/editable-number-range-filter.spec.ts b/...ts/src/x-modules/facets/components/filters/__tests__/editable-number-range-filter.spec.ts
@@ -1,7 +1,7 @@
 import { EditableNumberRangeFilter, RangeValue } from '@empathyco/x-types';
 import { DeepPartial } from '@empathyco/x-utils';
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { Ref, ref } from 'vue';
 import Vuex, { Store } from 'vuex';
 // eslint-disable-next-line max-len
 import { createEditableNumberRangeFilter } from '../../../../../__stubs__/filters-stubs.factory';
@@ -34,13 +34,12 @@ function renderEditableNumberRangeFilter({
     />
   `,
   range,
-  filter = createEditableNumberRangeFilter('age', range),
+  filter = ref(createEditableNumberRangeFilter('age', range)),
   isInstant = false,
   hasClearButton = true,
   buttonsClass,
   inputsClass
 }: EditableNumberRangeFilterOptions = {}): EditableNumberRangeFilterAPI {
-  Vue.observable(filter);
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
@@ -343,7 +342,7 @@ interface EditableNumberRangeFilterOptions {
    * The {@link @empathyco/x-types#EditableNumberRangeFilter | EditableNumberRangeFilter} object
    * to be passed to the component.
    */
-  filter?: EditableNumberRangeFilter;
+  filter?: Ref<EditableNumberRangeFilter>;
   /** `hasClearButton` property to init the component. */
   hasClearButton?: boolean;
   /** `isInstant` property to init the component. */
@@ -364,7 +363,7 @@ interface EditableNumberRangeFilterAPI {
   /** Clear button wrapper. */
   clearButtonWrapper: Wrapper<Vue>;
   /** The filter passed to the component. */
-  filter: EditableNumberRangeFilter;
+  filter: Ref<EditableNumberRangeFilter>;
   /** Filter component wrapper. */
   filterWrapper: Wrapper<Vue>;
   /** Max input element wrapper. */