refactor: timeline filters [WTEL-4465]

src/modules/contacts/modules/timeline/api/TimelineAPI.js

@@ -28,7 +28,7 @@ const getList = async (params) => {
       parentId,
       dateFrom,
       dateTo,
-      type,
+      // type,
     );
     const { days, next } = applyTransform(response.data, [
       snakeToCamel(),

src/modules/contacts/modules/timeline/components/the-timeline.vue

@@ -1,10 +1,10 @@
 <template>
   <timeline-container>
     <template #header>
-<!--      <timeline-header-->
-<!--        :list="dataList"-->
-<!--        :filtersNamespace="filtersNamespace"-->
-<!--      ></timeline-header>-->
+      <timeline-header
+        :namespace="timelineNamespace"
+        :list="dataList"
+      />
     </template>
 
     <template #content>
@@ -52,8 +52,6 @@ const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
 
 const timelineNamespace = `${props.namespace}/timeline`;
 
-const { namespace: filtersNamespace } = useTableFilters(timelineNamespace);
-
 const dataList = computed(() => getNamespacedState(store.state, timelineNamespace).dataList);
 const isLoading = computed(() => getNamespacedState(store.state, timelineNamespace).isLoading);
 

src/modules/contacts/modules/timeline/components/timeline-header.vue

@@ -4,29 +4,29 @@
     class="timeline-header">
     <p class="timeline-header-duration">{{ durationTimeline }}</p>
     <div class="timeline-header-actions">
-      <timeline-task-filter-container
-        :list="list"
-        :active-filters="activeFilters"
-        :filtersNamespace="filtersNamespace">
-      </timeline-task-filter-container>
-
+      <timeline-task-type-filter
+        :namespace="filtersNamespace"
+        :calls-count="taskCounters[WebitelContactsTimelineEventType.Call]"
+        :chats-count="taskCounters[WebitelContactsTimelineEventType.Chat]"
+      />
       <button class="timeline-header-collapse">{{ t('contacts.collapseAll') }}</button>
     </div>
   </header>
 
 </template>
 <script setup>
+import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
-import TimelineTaskFilterContainer from '../modules/filters/components/timeline-task-filter-container.vue';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
+import TimelineTaskTypeFilter from '../modules/filters/components/timeline-task-type-filter.vue';
 
 const props = defineProps({
   list: {
     type: Array,
   },
-  filtersNamespace: {
+  namespace: {
     type: String,
     required: true,
   },
@@ -35,8 +35,21 @@ const props = defineProps({
 const { t } = useI18n();
 const store = useStore();
 
-const activeFilters = computed(() => getNamespacedState(store.state, props.filtersNamespace).type.value);
-const isDisplayHeader = computed(() => props.list.length || (!props.list.length && activeFilters.value));
+const { filtersNamespace } = useTableFilters(props.namespace);
+
+const isDisplayHeader = computed(() => props.list.length || (!props.list.length));
+
+const taskCounters = computed(() => {
+  return props.list.reduce((acc, { callsCount = 0, chatsCount = 0 }) => {
+    return {
+      [WebitelContactsTimelineEventType.Call]: acc[WebitelContactsTimelineEventType.Call] + +callsCount,
+      [WebitelContactsTimelineEventType.Chat]: acc[WebitelContactsTimelineEventType.Chat] + +chatsCount,
+    };
+  }, {
+    [WebitelContactsTimelineEventType.Call]: 0,
+    [WebitelContactsTimelineEventType.Chat]: 0,
+  });
+});
 
 const dateFrom = computed(() => props.list[props.list.length - 1]?.dayTimestamp);
 const dateTo = computed(() => props.list[0]?.dayTimestamp);

src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-type-filter.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="timeline-task-type-filter">
+    <div
+      v-for="({ icon, selected, set, count }) of filters"
+      class="timeline-task-filter__filter-wrapper"
+    >
+      <wt-checkbox
+        :selected="selected"
+        @change="set"
+      >
+        <template #label>
+          <div class="timeline-task-type-filter__label-wrapper">
+            <wt-icon :icon="icon" />
+            <span class="timeline-task-filter__count">
+            ({{ count }})
+          </span>
+          </div>
+        </template>
+      </wt-checkbox>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  callsCount: {
+    type: [Number, String],
+    default: 0,
+  },
+  chatsCount: {
+    type: [Number, String],
+    default: 0,
+  },
+});
+
+const store = useStore();
+
+const filterValue =  computed(() => getNamespacedState(store.state, props.namespace).type.value);
+
+function setFilter(payload) {
+  return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
+}
+
+function toggleFilterValue(value) {
+  const newValue = filterValue.value.includes(value)
+    ? filterValue.value.filter((item) => item !== value)
+    : [...filterValue.value, value];
+
+  return setFilter({ filter: 'type', value: newValue });
+}
+
+const filters = computed(() => [
+  {
+    icon: 'call',
+    selected: filterValue.value.includes(WebitelContactsTimelineEventType.Call),
+    set: () => toggleFilterValue(WebitelContactsTimelineEventType.Call),
+    count: props.callsCount,
+  },
+  {
+    icon: 'chat',
+    selected: filterValue.value.includes(WebitelContactsTimelineEventType.Chat),
+    set: () => toggleFilterValue(WebitelContactsTimelineEventType.Chat),
+    count: props.chatsCount,
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+.timeline-task-type-filter {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+.timeline-task-type-filter__label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  margin-left: var(--spacing-2xs);
+}
+</style>

src/modules/contacts/modules/timeline/modules/filters/store/filters.js

@@ -2,22 +2,25 @@ import BaseFilterSchema
   from '@webitel/ui-sdk/src/modules/Filters/classes/BaseFilterSchema';
 import FiltersStoreModule
   from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 import router from '../../../../../../../app/router';
 
 const state = {
   type: new BaseFilterSchema({
-    value: [],
-    defaultValue: ['chat', 'call'], // FIXME use enum
+    value: [WebitelContactsTimelineEventType.Call, WebitelContactsTimelineEventType.Chat],
+    defaultValue: [WebitelContactsTimelineEventType.Call, WebitelContactsTimelineEventType.Chat],
   }),
 };
 
 const getters = {
   ROUTER: () => router,
+  // fixing filters module wrong design decisions :(
   TABLE_NAMESPACE: () => '',
 };
 
 const actions = {
-  LOAD_DATA_LIST: () => {},
+  // fixing filters module wrong design decisions :(
+  LOAD_DATA_LIST: (context) => context.dispatch('contacts/card/timeline/INITIALIZE_LIST', null, { root: true }),
 };
 
 const filters = new FiltersStoreModule().getModule({