Merge pull request #66 from webitel/refactor/timeline-restructurization

refactor: timeline restructurization [WTEL-3534]

package.json

@@ -9,6 +9,7 @@
     "test:unit": "vitest",
     "lint:fix": "eslint --fix --ext .js,.vue src"
   },
+  "type": "module",
   "dependencies": {
     "@vue/compat": "^3.3.9",
     "@vuelidate/core": "^2.0.0",

src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="day-timeline-row-counters">
+    <div class="day-timeline-row-counters__wrapper">
+      <span>Calls: {{ props.callsCount }}</span>
+      <span>Chats: {{ props.chatsCount }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  callsCount: {
+    type: Number,
+    default: 0,
+  },
+  chatsCount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.day-timeline-row-counters {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.day-timeline-row-counters__wrapper {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+</style>

src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="day-timeline-row-section">
+    <day-timeline-row
+      :timestamp="props.day.dayTimestamp"
+      @toggle="opened = !opened"
+    />
+
+    <div v-if="opened">
+      <task-timeline-row
+        v-for="(item) of props.day.items"
+        :item="item"
+        :key="item.id"
+      ></task-timeline-row>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import DayTimelineRow from './day-timeline-row.vue';
+import TaskTimelineRow from '../task-row/task-timeline-row.vue';
+
+const props = defineProps({
+  day: {
+    type: Object,
+  },
+  // TODO!!
+  isLastDay: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const opened = ref(false);
+</script>
+
+<style lang="scss" scoped>
+// TODO
+.timeline-day {
+  &__title {
+    @extend %typo-subtitle-2;
+  }
+
+  &__wrapper {
+    position: relative;
+  }
+
+  &__divider {
+    height: var(--spacing-sm);
+    width: 1px;
+    position: relative;
+    display: block;
+    background-color: var(--btn-secondary-color);
+    bottom: 0;
+    left: 50%;
+    transform: translate(50%, 0);
+  }
+
+  &__counters {
+    @extend %typo-body-2;
+    display: flex;
+    gap: var(--spacing-sm);
+    justify-content: end;
+  }
+}
+</style>

src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue

@@ -0,0 +1,88 @@
+<template>
+  <timeline-row>
+    <template #before-content>
+      {{ props.timestamp }}
+    </template>
+    <template #pin>
+      <timeline-pin
+        :type="TimelinePinType.DAY"
+        text="dday"
+        @click="emit('toggle')"
+      ></timeline-pin>
+    </template>
+    <template v-slot:content>
+      <day-timeline-row-counters
+        :callsCount="props.callsCount"
+        :chatsCount="props.chatsCount"
+      />
+    </template>
+  </timeline-row>
+
+
+  <!--    // TODO -> day-task-line -->
+  <!--    <event-record>-->
+  <!--      <template v-slot:before-content>-->
+  <!--        <p class="timeline-day__title">{{ t(`contacts.timeline.dayWeek.${dayWeek}`) }}</p>-->
+  <!--        <p class="timeline-day__title">{{ t(`contacts.timeline.mouth.${mouth}`) }}</p>-->
+  <!--      </template>-->
+
+  <!--      <template v-slot:action>-->
+  <!--        <div class="timeline-day__wrapper">-->
+  <!--          <wt-button-->
+  <!--            color="secondary"-->
+  <!--            class="timeline-day__button"-->
+  <!--            @click="isOpenDay = !isOpenDay"-->
+  <!--          >{{ dayNumber }}-->
+  <!--          </wt-button>-->
+  <!--          <div-->
+  <!--            v-if="!isLastDay || (isLastDay && isOpenDay)"-->
+  <!--            class="timeline-day__divider"></div>-->
+  <!--        </div>-->
+  <!--      </template>-->
+
+  <!--      <template v-slot:content>-->
+  <!--        <div class="timeline-day__counters">-->
+  <!--          <p>{{ `${t('channel.type.call')} (${day.callsCount || 0})` }}</p>-->
+  <!--          <p>{{ `${t('channel.type.chat')} (${day.chatsCount || 0})` }}</p>-->
+  <!--        </div>-->
+
+  <!--      </template>-->
+  <!--    </event-record>-->
+</template>
+
+<script setup>
+import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import DayTimelineRowCounters from './day-timeline-row-counters.vue';
+import TimelinePin from '../utils/timeline-pin.vue';
+import TimelineRow from '../utils/timeline-row.vue';
+
+const props = defineProps({
+  timestamp: {
+    type: Number,
+    required: true,
+  },
+  callsCount: {
+    type: Number,
+    default: 0,
+  },
+  chatsCount: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits([
+  'toggle',
+]);
+
+// TODO -> day-task-line
+// const fullDate = computed(() => new Date(+props.day.dayTimestamp));
+// const mouth = computed(() => fullDate.value.toLocaleString('en', { month: 'short' }).toLowerCase());
+// const dayWeek = computed(() => fullDate.value.toLocaleString('en', { weekday: 'short' }).toLowerCase());
+// const dayNumber = computed(() => fullDate.value.getDate());
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>