feat: Sync insights header filters with route

src/components/insights/Layout/HeaderFilters/FiltersModalHumanService.vue

@@ -1,15 +1,18 @@
 <template>
   <UnnnicModal
-    v-if="showModal"
+    :showModal="showModal"
     @close="close"
     class="filters-modal-human-service"
     text="Filtros"
   >
-    <form class="filters-modal-human-service__form">
+    <form
+      @submit.prevent
+      class="filters-modal-human-service__form"
+    >
       <section>
         <UnnnicLabel label="Pesquisa por contato" />
         <UnnnicInput
-          v-model="filters.contact"
+          v-model="filtersClone.contact"
           iconRight="search"
           placeholder="Nome ou URN do contato"
         />
@@ -18,15 +21,15 @@
         <UnnnicLabel label="Data" />
         <UnnnicInputDatePicker
           class="form__date-picker"
-          v-model="filters.date"
+          v-model="filtersClone.date"
           position="right"
           inputFormat="DD/MM/YYYY"
         />
       </section>
       <section>
         <UnnnicLabel label="Setor" />
         <UnnnicSelectSmart
-          v-model="filters.sector"
+          v-model="filtersClone.sector"
           :options="selects.sectors"
           autocomplete
           autocompleteIconLeft
@@ -36,7 +39,7 @@
       <section>
         <UnnnicLabel label="Fila" />
         <UnnnicSelectSmart
-          v-model="filters.queue"
+          v-model="filtersClone.queue"
           :disabled="hasSectorFiltered || selects.queues.length < 2"
           :options="selects.queues"
           autocomplete
@@ -47,7 +50,7 @@
       <section>
         <UnnnicLabel label="Agente" />
         <UnnnicSelectSmart
-          v-model="filters.agent"
+          v-model="filtersClone.agent"
           :disabled="hasSectorFiltered || selects.agents.length < 2"
           :options="selects.agents"
           autocomplete
@@ -58,7 +61,7 @@
       <section>
         <UnnnicLabel label="Tags" />
         <UnnnicSelectSmart
-          v-model="filters.tag"
+          v-model="filtersClone.tags"
           :disabled="hasSectorFiltered || selects.tags.length < 2"
           :options="selects.tags"
           autocomplete
@@ -91,11 +94,15 @@ export default {
       type: Boolean,
       required: true,
     },
+    filters: {
+      type: Object,
+      required: true,
+    },
   },
 
   data() {
     return {
-      filters: {},
+      filtersClone: {},
 
       selects: {
         sectors: [
@@ -124,26 +131,70 @@ export default {
         sector: [{ value: 'all', label: 'Todos' }],
         queue: [{ value: '', label: 'Selecione fila' }],
         agent: [{ value: '', label: 'Selecione agente' }],
-        tag: [{ value: '', label: 'Selecione tags' }],
+        tags: [{ value: '', label: 'Selecione tags' }],
       };
     },
 
     hasSectorFiltered() {
-      return this.filters.sector[0]?.value === '';
+      return this.filtersClone.sector[0]?.value === '';
+    },
+
+    areFiltersPropAndCloneEqual() {
+      return JSON.stringify(this.filters) === JSON.stringify(this.filtersClone);
     },
   },
 
   methods: {
     clearFilters() {
-      this.filters = { ...this.defaultFilters };
+      this.filtersClone = { ...this.defaultFilters };
     },
     emitFilters() {
-      this.$emit('emitFilters', this.filters);
+      this.$emit('update:filters', this.filtersClone);
       this.close();
     },
     close() {
       this.$emit('close');
     },
+    syncFiltersClone() {
+      if (!this.areFiltersPropAndCloneEqual) {
+        const { filters, selects } = this;
+
+        const filterHandlers = {
+          default: (filterName, filterValue) => {
+            this.filtersClone[filterName] = filterValue;
+          },
+          select: (filterName) => {
+            const filterEquivalent = this.filtersClone?.filter(
+              (mappedFilter) => mappedFilter.value === filterName,
+            );
+            this.filtersClone[filterName] = filterEquivalent;
+          },
+          date: (filterValue) => {
+            this.filtersClone.date = {
+              start: filterValue.dateStart,
+              end: filterValue.dateEnd,
+            };
+          },
+        };
+
+        Object.keys(filters)?.forEach((filterName) => {
+          const filterValue = filters[filterName];
+
+          const handler = selects[filterName]
+            ? filterHandlers.select
+            : filterValue.dateStart && filterValue.dateEnd
+              ? filterHandlers.date
+              : filterHandlers.default;
+          handler(filterName, filterValue);
+        });
+      }
+    },
+  },
+
+  watch: {
+    filters() {
+      this.syncFiltersClone();
+    },
   },
 };
 </script>
@@ -157,8 +208,8 @@ export default {
 
     text-align: left;
 
-    :nth-child(1),
-    :nth-child(2) {
+    > :nth-child(1),
+    > :nth-child(2) {
       grid-column-start: 1;
       grid-column-end: 3;
     }

src/components/insights/Layout/HeaderFilters/index.vue

@@ -10,13 +10,14 @@
     <UnnnicInputDatePicker
       v-else
       class="filters__date-picker"
-      v-model="filterDate"
+      v-model="filters.date"
       size="sm"
       inputFormat="DD/MM/YYYY"
     />
 
     <FiltersModalHumanService
       :showModal="filterModalOpened === 'human-service'"
+      v-model:filters="filters"
       @close="filterModalOpened = ''"
     />
   </section>
@@ -34,28 +35,38 @@ export default {
 
   data() {
     return {
-      filterDate: {
-        start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
-        end: moment().format('YYYY-MM-DD'),
+      filters: {
+        date: {
+          start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+          end: moment().format('YYYY-MM-DD'),
+        },
       },
       filterModalOpened: '',
     };
   },
 
   computed: {
+    humanServiceFilters() {
+      if (this.$route.name === 'human-service') {
+        return ['contact', 'sector', 'queue', 'agent', 'tags'];
+      }
+      return undefined;
+    },
     hasManyFilters() {
-      return this.$route.name === 'human-service';
+      return !!this.humanServiceFilters;
     },
   },
 
   methods: {
-    routeUpdateFilterDate() {
+    routeUpdateFilters() {
       const { query } = this.$route;
 
-      if (query.startDate && query.endDate) {
-        this.filterDate = {
-          start: query.startDate,
-          end: query.endDate,
+      this.filters = { ...this.filters, ...query };
+
+      if (query.dateStart && query.dateEnd) {
+        this.filters.date = {
+          start: query.dateStart,
+          end: query.dateEnd,
         };
       }
     },
@@ -71,20 +82,41 @@ export default {
     openFiltersModal() {
       this.filterModalOpened = this.$route.name;
     },
+
+    updateRouterByFilters(filters) {
+      const queryParams = {
+        name: this.$route.name,
+        query: {
+          dateStart: filters.date?.start,
+          dateEnd: filters.date?.end,
+        },
+      };
+
+      this.humanServiceFilters?.forEach((filter) => {
+        const filterValue = Array.isArray(filters[filter])
+          ? filters[filter][0]?.value
+          : filters[filter];
+        if (filterValue) {
+          queryParams.query[filter] = filterValue;
+        }
+      });
+
+      this.$router.replace(queryParams);
+    },
   },
 
   watch: {
     $route(newRoute, oldRoute) {
       if (newRoute.name !== oldRoute.name) {
         this.retainRouteQueries(newRoute, oldRoute);
-        this.routeUpdateFilterDate();
+        this.routeUpdateFilters();
       }
     },
-    filterDate(newDate) {
-      this.$router.replace({
-        name: this.$route.name,
-        query: { startDate: newDate.start, endDate: newDate.end },
-      });
+    filters: {
+      deep: true,
+      handler(newFilters) {
+        this.updateRouterByFilters(newFilters);
+      },
     },
   },
 };

src/router/routes/dashboards.js

@@ -6,17 +6,22 @@ export default [
     path: '/dashboards',
     redirect: '/',
     props: (route) => ({
-      startDate: route.query.startDate,
-      endDate: route.query.endDate,
+      dateStart: route.query.dateStart,
+      dateEnd: route.query.dateEnd,
     }),
   },
   {
     path: '/human-service',
     component: DashboardHumanService,
     name: 'human-service',
     props: (route) => ({
-      startDate: route.query.startDate,
-      endDate: route.query.endDate,
+      dateStart: route.query.dateStart,
+      dateEnd: route.query.dateEnd,
+      contact: route.query.contact,
+      sector: route.query.sector,
+      queue: route.query.queue,
+      agent: route.query.agent,
+      tags: route.query.tags,
     }),
   },
   {