From 594c39e3321465024eb553dccc90f29321e52850 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Mon, 22 Apr 2024 18:51:53 +0300
Subject: [PATCH] refactor: timeline filters [WTEL-4465]

---
 .../modules/timeline/api/TimelineAPI.js       |  2 +-
 .../timeline/components/the-timeline.vue      | 10 +--
 .../timeline/components/timeline-header.vue   | 35 +++++---
 .../timeline-task-filter-container.vue        | 89 -------------------
 .../components/timeline-task-filter.vue       | 46 ----------
 .../components/timeline-task-type-filter.vue  | 89 +++++++++++++++++++
 .../timeline/modules/filters/store/filters.js |  9 +-
 7 files changed, 124 insertions(+), 156 deletions(-)
 delete mode 100644 src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter-container.vue
 delete mode 100644 src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter.vue
 create mode 100644 src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-type-filter.vue

diff --git a/src/modules/contacts/modules/timeline/api/TimelineAPI.js b/src/modules/contacts/modules/timeline/api/TimelineAPI.js
index 6d08f080..4bd1eec9 100644
--- a/src/modules/contacts/modules/timeline/api/TimelineAPI.js
+++ b/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(),
diff --git a/src/modules/contacts/modules/timeline/components/the-timeline.vue b/src/modules/contacts/modules/timeline/components/the-timeline.vue
index 3e6be806..43f79737 100644
--- a/src/modules/contacts/modules/timeline/components/the-timeline.vue
+++ b/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);
 
diff --git a/src/modules/contacts/modules/timeline/components/timeline-header.vue b/src/modules/contacts/modules/timeline/components/timeline-header.vue
index 9552e2db..da102e47 100644
--- a/src/modules/contacts/modules/timeline/components/timeline-header.vue
+++ b/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);
diff --git a/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter-container.vue b/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter-container.vue
deleted file mode 100644
index d172de9d..00000000
--- a/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter-container.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="timeline-task-filter-container">
-    <timeline-task-filter
-      v-for="(type, idx) of timelineEventTypes"
-      :key="idx"
-      :type="type"
-      :icon="filterIcon[type]"
-      :selected="isSelectedFilter(type)"
-      :count="taskCount[type]"
-      @change="changeFilterValue"
-    ></timeline-task-filter>
-  </div>
-
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-import timelineEventTypes from '../../../components/enums/timelineEventTypes.enum.js'; ///прибрати після додавання енуму Егора
-import TimelineTaskFilter from './timeline-task-filter.vue';
-
-const props = defineProps({
-  list: {
-    type: Array,
-  },
-  activeFilters: {
-    type: Array,
-  },
-  filtersNamespace: {
-    type: String,
-    required: true,
-  },
-});
-
-const store = useStore();
-const filterIcon = {
-  [timelineEventTypes.CALLS]: 'call',
-  [timelineEventTypes.CHATS]: 'chat',
-};
-
-const taskCount = computed(() => {
-  return {
-    [timelineEventTypes.CALLS]: culcTotalCalls(),
-    [timelineEventTypes.CHATS]: culcTotalChats(),
-  }
-});
-
-function setFilter(payload) {
-  return store.dispatch(`${props.filtersNamespace}/SET_FILTER`, payload);
-}
-
-function culcTotalCalls() {
-  return props.list?.reduce((acc, item) => acc + Number(item.callsCount), 0) || 0;
-}
-
-function culcTotalChats() {
-  return props.list?.reduce((acc, item) => acc + Number(item.chatsCount), 0) || 0;
-}
-
-function isSelectedFilter(type) {
-  return !props.activeFilters ? true : props.activeFilters.includes(type);
-}
-
-function defineFilterValue({ type, value }) {
-  let result;
-  if(!value) {
-    if(props.activeFilters) result = props.activeFilters.filter(item => item !== type);
-    else {
-      result = timelineEventTypes.filter(item => item.type !== type).map(item => item.type);
-    }
-  } else {
-    result = [...props.activeFilters];
-    result.push(type);
-  }
-  return result;
-}
-
-function changeFilterValue(event) {
-  const value = defineFilterValue(event);
-  setFilter({ filter: 'type', value })
-}
-</script>
-
-<style lang="scss" scoped>
-.timeline-task-filter-container {
-  display: flex;
-  gap: var(--spacing-md);
-}
-</style>
diff --git a/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter.vue b/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter.vue
deleted file mode 100644
index 978b5a71..00000000
--- a/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-filter.vue
+++ /dev/null
@@ -1,46 +0,0 @@
- <template>
-  <div class="timeline-task-filter">
-    <wt-checkbox
-      :selected="selected"
-      @change="changeValue"></wt-checkbox>
-    <wt-icon :icon="icon"></wt-icon>
-    <p class="timeline-task-filter__count">({{count}})</p>
-  </div>
-</template>
-<script setup>
-
-const props = defineProps({
-  icon: {
-    type: String,
-  },
-  count: {
-    type: Number,
-    default: 0,
-  },
-  type: {
-    type: String,
-  },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(['change']);
-
-function changeValue(value) {
-  emit('change', { value, type: props.type });
-}
-
-</script>
-
-<style lang="scss" scoped>
-.timeline-task-filter{
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-xs);
-
-  &__count {
-    @extend %typo-subtitle-2;
-  }
-}
-</style>
diff --git a/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-type-filter.vue b/src/modules/contacts/modules/timeline/modules/filters/components/timeline-task-type-filter.vue
new file mode 100644
index 00000000..80d55eaf
--- /dev/null
+++ b/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>
diff --git a/src/modules/contacts/modules/timeline/modules/filters/store/filters.js b/src/modules/contacts/modules/timeline/modules/filters/store/filters.js
index 738b10ad..4121f359 100644
--- a/src/modules/contacts/modules/timeline/modules/filters/store/filters.js
+++ b/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({