fix: refactor components[WTEL-4418]

webitel · Apr 22, 2024 · 627cc25 · 627cc25
1 parent 329b7d9
commit 627cc25
Show file tree

Hide file tree

Showing 14 changed files with 493 additions and 428 deletions.
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-counters.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="day-timeline-row-counters">
     <div class="day-timeline-row-counters__wrapper">
-      <span>Calls: {{ props.callsCount }}</span>
-      <span>Chats: {{ props.chatsCount }}</span>
+      <span>{{ `${t('channel.type.call')}: ${props.callsCount} `}}</span>
+      <span>{{ `${t('channel.type.chat')}: ${props.chatsCount} `}}</span>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useI18n } from 'vue-i18n';
+
 const props = defineProps({
   callsCount: {
     type: Number,
@@ -18,17 +20,19 @@ const props = defineProps({
     default: 0,
   },
 });
+
+const { t } = useI18n();
 </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);
+  &__wrapper {
+    display: flex;
+    gap: var(--spacing-xs);
+  }
 }
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row-section.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="day-timeline-row-section">
+  <div>
     <day-timeline-row
-      :timestamp="props.day.dayTimestamp"
+      :timestamp="day.dayTimestamp"
+      :calls-count="day.callsCount"
+      :chats-count="day.chatsCount"
+      :last-day="lastDay"
       @toggle="opened = !opened"
     />
 
     <div v-if="opened">
       <task-timeline-row
-        v-for="(item) of props.day.items"
+        v-for="(item) of day.items"
         :item="item"
         :key="item.id"
       ></task-timeline-row>
@@ -17,52 +20,49 @@
 
 <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: {
+  lastDay: {
     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;
-  }
-}
+//// TODO
+//.day-timeline-row-section {
+//  &__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>
diff --git a/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue b/src/modules/contacts/modules/timeline/components/day-row/day-timeline-row.vue
@@ -1,12 +1,18 @@
 <template>
   <timeline-row>
     <template #before-content>
+      <timeline-row-info
+        :timestamp="timestamp"
+      >
+        <template #title="timesScope">{{ timesScope.weekDay }}</template>
+        <template #subtitle="timesScope">{{ timesScope.month }}</template>
+      </timeline-row-info>
       {{ props.timestamp }}
     </template>
     <template #pin>
       <timeline-pin
         :type="TimelinePinType.DAY"
-        text="dday"
+        :text="dayNumber"
         @click="emit('toggle')"
       ></timeline-pin>
     </template>
@@ -20,38 +26,16 @@
 
 
   <!--    // 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 { computed } from 'vue';
 import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import TimelineRowInfo from '../utils/timeline-row-info.vue';
 import DayTimelineRowCounters from './day-timeline-row-counters.vue';
 import TimelinePin from '../utils/timeline-pin.vue';
 import TimelineRow from '../utils/timeline-row.vue';
@@ -76,10 +60,7 @@ const emit = defineEmits([
 ]);
 
 // 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());
+const dayNumber = computed(() => new Date(+props.timestamp).getDate());
 
 </script>
 

diff --git a/src/modules/contacts/modules/timeline/components/enums/timelineEventTypes.enum.js b/src/modules/contacts/modules/timeline/components/enums/timelineEventTypes.enum.js
@@ -1,14 +1,6 @@
-const timelineEventTypes = Object.freeze([
-  {
-    type: 'calls',
-    iconName: 'call',
-    countName: 'callsCount',
-  },
-  {
-    type: 'chats',
-    iconName: 'chat',
-    countName: 'chatsCount',
-  },
-]);
+const timelineEventTypes = Object.freeze({
+  CALLS: 'сalls',
+  CHATS: 'сhats',
+});
 
 export default timelineEventTypes;