fix: style, classes and locale[WTEL-4418]

webitel · Apr 24, 2024 · 66fa2f1 · 66fa2f1
1 parent ee9010d
commit 66fa2f1
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@vue/compat": "^3.3.9",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.2",
-    "@webitel/ui-sdk": "^24.4.25",
+    "@webitel/ui-sdk": "^24.4.28",
     "axios": "^1.6.5",
     "core-js": "^3.8.3",
     "deep-equal": "^2.2.1",

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
@@ -4,6 +4,7 @@ import AccessMode
   from '../../../modules/contacts/modules/permissions/enums/AccessMode.enum';
 import TimelineTaskStatusEnum
   from '../../../modules/contacts/modules/timeline/enums/TimelineTaskStatus.enum.js';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 
 export default {
   crm: 'CRM',
@@ -25,6 +26,10 @@ export default {
         [TimelineTaskStatusEnum.TRANSFERRED]: 'Transferred',
         [TimelineTaskStatusEnum.ENDED]: 'Ended',
       },
+      eventType: {
+        [WebitelContactsTimelineEventType.Call]: 'Call | Calls',
+        [WebitelContactsTimelineEventType.Chat]: 'Chat | Chats',
+      },
     },
     communications: {
       communications: 'Communication option | Communication options',

diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
@@ -1,5 +1,6 @@
 import ChatGatewayProvider
   from '@webitel/ui-sdk/src/enums/ChatGatewayProvider/ChatGatewayProvider.enum';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 import AccessMode
   from '../../../modules/contacts/modules/permissions/enums/AccessMode.enum';
 import TimelineTaskStatusEnum
@@ -25,6 +26,10 @@ export default {
         [TimelineTaskStatusEnum.TRANSFERRED]: 'Переведено',
         [TimelineTaskStatusEnum.ENDED]: 'Кінець',
       },
+      eventType: {
+        [WebitelContactsTimelineEventType.Call]: 'Звонок | Звонки',
+        [WebitelContactsTimelineEventType.Chat]: 'Чат | Чаты',
+      },
     },
     communications: {
       communications: 'Средство связи | Средства связи',

diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
@@ -1,5 +1,6 @@
 import ChatGatewayProvider
   from '@webitel/ui-sdk/src/enums/ChatGatewayProvider/ChatGatewayProvider.enum';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 import AccessMode
   from '../../../modules/contacts/modules/permissions/enums/AccessMode.enum';
 import TimelineTaskStatusEnum
@@ -25,6 +26,10 @@ export default {
         [TimelineTaskStatusEnum.TRANSFERRED]: 'Переведено',
         [TimelineTaskStatusEnum.ENDED]: 'Конец',
       },
+      eventType: {
+        [WebitelContactsTimelineEventType.Call]: 'Дзвінок | Дзвінки',
+        [WebitelContactsTimelineEventType.Chat]: 'Чат | Чати',
+      },
     },
     communications: {
       communications: 'Засіб зв\'язку | Засоби зв\'язку',

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,14 +1,15 @@
 <template>
   <div class="day-timeline-row-counters">
     <div class="day-timeline-row-counters__wrapper">
-      <span>{{ `${t('channel.type.call')}: ${props.callsCount} `}}</span>
-      <span>{{ `${t('channel.type.chat')}: ${props.chatsCount} `}}</span>
+      <span>{{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Call}`, 2)}: ${props.callsCount} ` }}</span>
+      <span>{{ `${t(`contacts.timeline.eventType.${WebitelContactsTimelineEventType.Chat}`, 2)}: ${props.chatsCount} `}}</span>
     </div>
   </div>
 </template>
 
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 
 const props = defineProps({
   callsCount: {

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
@@ -32,32 +32,4 @@ const opened = ref(false);
 </script>
 
 <style lang="scss" scoped>
-//// 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/task-row/call-task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
@@ -22,7 +22,7 @@
       </template>
 
       <template v-slot:content>
-        <div class="chat-task-timeline-row-content">
+        <div class="chat-task-timeline-row__content">
           <timeline-row-initiator
             :type="taskType"
             :text="taskInitiator"
@@ -123,7 +123,7 @@ const taskInitiator = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.chat-task-timeline-row-content {
+.chat-task-timeline-row__content {
   display: flex;
   gap: var(--spacing-sm);
   align-items: center;

diff --git a/src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/task-timeline-row.vue
@@ -22,8 +22,7 @@ const component = computed(() => {
   switch (props.item.type) {
     case WebitelContactsTimelineEventType.Chat: return ChatTaskTimelineRow;
     case WebitelContactsTimelineEventType.Call: return CallTaskTimelineRow;
-   // default:
-    //  return throw new Error(`Unknown item type, ${props.item.type}!`);
+    default: throw new Error(`Unknown item type, ${props.item.type}!`);
   }
 });
 </script>

diff --git a/src/modules/contacts/modules/timeline/components/timeline-container.vue b/src/modules/contacts/modules/timeline/components/timeline-container.vue
@@ -25,7 +25,8 @@
 
 .timeline-content {
   @extend %wt-scrollbar;
-  overflow-y: scroll;
+  overflow-y: auto;
+  height: 100%;
   padding: var(--spacing-sm);
 }
 </style>
diff --git a/src/modules/contacts/modules/timeline/components/timeline-header.vue b/src/modules/contacts/modules/timeline/components/timeline-header.vue
@@ -2,14 +2,14 @@
   <header
     v-if="isDisplayHeader"
     class="timeline-header">
-    <p class="timeline-header-duration">{{ durationTimeline }}</p>
-    <div class="timeline-header-actions">
+    <p class="timeline-header__duration">{{ durationTimeline }}</p>
+    <div class="timeline-header__actions">
       <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>
+      <button class="timeline-header__collapse">{{ t('contacts.collapseAll') }}</button>
     </div>
   </header>
 
@@ -36,7 +36,7 @@ const { d, t } = useI18n();
 
 const { filtersNamespace } = useTableFilters(props.namespace);
 
-const isDisplayHeader = computed(() => props.list.length || (!props.list.length));
+const isDisplayHeader = computed(() => props.list.length || Object.values(taskCounters.value).some(num => num));
 
 const taskCounters = computed(() => {
     return props.list.reduce((acc, { callsCount = 0, chatsCount = 0 }) => {
@@ -74,16 +74,16 @@ function formatDate(date) {
   padding: var(--spacing-xs) var(--spacing-sm);
   background-color: var(--secondary-light-color);
 
-  &-duration {
+  &__duration {
     @extend %typo-subtitle-2;
   }
 
-  &-actions {
+  &__actions {
     display: flex;
     gap: var(--spacing-md);
   }
 
-  &-collapse {
+  &__collapse {
     @extend %typo-body-2;
     margin: auto;
     cursor: pointer;

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
@@ -42,7 +42,8 @@ const stateMap = {
   },
   [TimelinePinType.CLOSE]: {
     component: 'wt-rounded-action',
-    icon: 'close'
+    icon: 'close',
+    rounded: true,
   },
   [TimelinePinType.CHAT]: {
     component: 'wt-rounded-action',
@@ -90,6 +91,7 @@ const stateMap = {
 };
 
 const state = computed(() => {
+  if(props.type === TimelinePinType.DAY) return stateMap[TimelinePinType.DAY];
   return props.collapsed ? stateMap[props.type] : stateMap[TimelinePinType.CLOSE];
 });
 

diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-info.vue
@@ -45,7 +45,7 @@ const timestampWeekDay = computed(() => {
 
 const timestampMonth = computed(() => {
   const date = new Date(+props.timestamp);
-  return d(date, { month: 'short' });
+  return d(date, { month: 'long' });
 });
 
 const timesScope = computed(() => {

diff --git a/...odules/contacts/modules/timeline/modules/filters/components/timeline-task-type-filter.vue b/...odules/contacts/modules/timeline/modules/filters/components/timeline-task-type-filter.vue
@@ -2,7 +2,7 @@
   <div class="timeline-task-type-filter">
     <div
       v-for="({ icon, selected, set, count }) of filters"
-      class="timeline-task-filter__filter-wrapper"
+      class="timeline-task-type-filter__filter-wrapper"
     >
       <wt-checkbox
         :selected="selected"
@@ -11,7 +11,7 @@
         <template #label>
           <div class="timeline-task-type-filter__label-wrapper">
             <wt-icon :icon="icon" />
-            <span class="timeline-task-filter__count">
+            <span class="timeline-task-type-filter__count">
             ({{ count }})
           </span>
           </div>
@@ -44,7 +44,7 @@ const props = defineProps({
 
 const store = useStore();
 
-const filterValue =  computed(() => getNamespacedState(store.state, props.namespace).type.value);
+const filterValue = computed(() => getNamespacedState(store.state, props.namespace).type.value);
 
 function setFilter(payload) {
   return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
@@ -78,12 +78,12 @@ const filters = computed(() => [
 .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);
+  &__label-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2xs);
+    margin-left: var(--spacing-2xs);
+  }
 }
 </style>