Merge pull request #208 from webitel/feature/cases__card_deadlines

Feature/cases card deadlines
webitel · Dec 26, 2024 · d2ea11e · d2ea11e
2 parents d7f2f02 + 3071fad
commit d2ea11e
Show file tree

Hide file tree

Showing 10 changed files with 323 additions and 122 deletions.
diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
@@ -155,6 +155,8 @@ export default {
     rating: 'Rating',
     persons: 'Persons',
     selectAService: 'Select a service',
+    deadlines: 'Deadlines',
+    createdAt: 'Created at',
     ratingComment: 'Rating comment',
     caseInfo: {
       caseInfo: 'Case info',

diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
@@ -154,6 +154,8 @@ export default {
     rating: 'Оценка',
     persons: 'Персоны',
     selectAService: 'Выберите сервис',
+    deadlines: 'Сроки',
+    createdAt: 'Создано',
     ratingComment: 'Комментарий к оценке',
     caseInfo: {
       caseInfo: 'Информация',

diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
@@ -155,6 +155,8 @@ export default {
     rating: 'Оцінка',
     persons: 'Особи',
     selectAService: 'Виберіть сервіс',
+    deadlines: 'Терміни',
+    createdAt: 'Створено',
     ratingComment: 'Коментар до оцінки',
     caseInfo: {
       caseInfo: 'Інформація',

diff --git a/src/modules/cases/api/CasesAPI.js b/src/modules/cases/api/CasesAPI.js
@@ -20,7 +20,7 @@ const data = {
         id: "u1",
         name: "User One"
       },
-      createdAt: "2024-11-01T10:00:00Z",
+      createdAt: "1734950841253",
       updatedBy: {
         id: "u2",
         name: "User Two"
@@ -30,8 +30,8 @@ const data = {
       subject: "Network Issue",
       description: "The network is experiencing downtime.",
       contactInfo: "[email protected]",
-      plannedReactionAt: "2024-11-01T12:00:00Z",
-      plannedResolveAt: "2024-11-03T12:00:00Z",
+      plannedReactionAt: "1734961322138",
+      plannedResolveAt: "1734961322138",
       status: {
         id: "s1",
         name: "Open"
@@ -84,42 +84,40 @@ const data = {
         ratingComment: "Issue resolved promptly."
       },
       timing: {
-        resolvedAt: "2024-11-03T10:00:00Z",
-        reactedAt: "2024-11-01T10:30:00Z",
-        differenceInReaction: "30m",
-        differenceInResolve: "2d"
-      },
-      slaCondition: [
-        {
-          id: "sla1",
-          name: "Critical SLA",
-          priorities: [
-            {
-              id: "p1",
-              name: "High"
-            }
-          ],
-          reactionTime: {
-            hours: 1,
-            minutes: 0
-          },
-          resolutionTime: {
-            hours: 48,
-            minutes: 0
-          },
-          slaId: "slaId1",
-          createdAt: "2024-10-01T10:00:00Z",
-          updatedAt: "2024-10-01T12:00:00Z",
-          createdBy: {
-            id: "u5",
-            name: "SLA Manager"
-          },
-          updatedBy: {
-            id: "u6",
-            name: "SLA Admin"
+        resolvedAt: "1734961389622",
+        reactedAt: "1734950841253",
+        differenceInReaction: "1800",
+        differenceInResolve: "-172800000"
+      },
+      slaCondition: {
+        id: "sla1",
+        name: "Critical SLA",
+        priorities: [
+          {
+            id: "p1",
+            name: "High"
           }
+        ],
+        reactionTime: {
+          hours: 1,
+          minutes: 0
+        },
+        resolutionTime: {
+          hours: 48,
+          minutes: 0
+        },
+        slaId: "slaId1",
+        createdAt: "2024-10-01T10:00:00Z",
+        updatedAt: "2024-10-01T12:00:00Z",
+        createdBy: {
+          id: "u5",
+          name: "SLA Manager"
+        },
+        updatedBy: {
+          id: "u6",
+          name: "SLA Admin"
         }
-      ],
+      },
       service: {
         id: "subservice2",
         name: "Network Support"
@@ -224,8 +222,8 @@ const data = {
       subject: "Login Issue",
       description: "Users are unable to log in to the system.",
       contactInfo: "[email protected]",
-      plannedReactionAt: "2024-11-05T12:00:00Z",
-      plannedResolveAt: "2024-11-07T12:00:00Z",
+      plannedReactionAt: "1734961322138",
+      plannedResolveAt: "1734961322138",
       status: {
         id: "s2",
         name: "In Progress"
@@ -278,42 +276,40 @@ const data = {
         ratingComment: "Issue is being addressed."
       },
       timing: {
-        resolvedAt: "2024-11-07T10:00:00Z",
-        reactedAt: "2024-11-05T11:30:00Z",
-        differenceInReaction: "30m",
-        differenceInResolve: "2d"
-      },
-      slaCondition: [
-        {
-          id: "sla2",
-          name: "Standard SLA",
-          priorities: [
-            {
-              id: "p2",
-              name: "Medium"
-            }
-          ],
-          reactionTime: {
-            hours: 2,
-            minutes: 0
-          },
-          resolutionTime: {
-            hours: 72,
-            minutes: 0
-          },
-          slaId: "slaId2",
-          createdAt: "2024-10-05T10:00:00Z",
-          updatedAt: "2024-10-05T12:00:00Z",
-          createdBy: {
-            id: "u5",
-            name: "SLA Manager"
-          },
-          updatedBy: {
-            id: "u6",
-            name: "SLA Admin"
+        resolvedAt: "1734950841253",
+        reactedAt: "1734950841253",
+        differenceInReaction: "1800",
+        differenceInResolve: "172800000"
+      },
+      slaCondition:  {
+        id: "sla2",
+        name: "Standard SLA",
+        priorities: [
+          {
+            id: "p2",
+            name: "Medium"
           }
+        ],
+        reactionTime: {
+          hours: 2,
+          minutes: 0
+        },
+        resolutionTime: {
+          hours: 72,
+          minutes: 0
+        },
+        slaId: "slaId2",
+        createdAt: "2024-10-05T10:00:00Z",
+        updatedAt: "2024-10-05T12:00:00Z",
+        createdBy: {
+          id: "u5",
+          name: "SLA Manager"
+        },
+        updatedBy: {
+          id: "u6",
+          name: "SLA Admin"
         }
-      ],
+      },
       service: {
         id: "srv2",
         name: "Login Support"
@@ -405,11 +401,11 @@ const fieldsToSend = [
   'name',
   'subject',
   'description',
-  'contact_info',
-  'planned_reaction_at',
-  'planned_resolve_at',
+  'contactInfo',
+  'plannedReactionAt',
+  'plannedResolveAt',
   'status_lookup',
-  'close_reason_lookup',
+  'closeReasonLookup',
   'author',
   'assignee',
   'reporter',
@@ -421,13 +417,13 @@ const fieldsToSend = [
   'close',
   'rate',
   'timing',
-  'sla_condition',
+  'slaCondition',
   'sla',
   'service',
   'comments',
   'related',
   'links',
-  'status_condition'
+  'statusCondition'
 ];
 
 

diff --git a/src/modules/cases/components/opened-case-general.vue b/src/modules/cases/components/opened-case-general.vue
@@ -6,6 +6,9 @@
     <case-priority
       :namespace="namespace"
     />
+    <case-deadlines
+      :namespace="namespace"
+    />
     <case-service
       :namespace="namespace"
     />
@@ -19,6 +22,7 @@
 </template>
 
 <script setup>
+import CaseDeadlines from '../modules/deadlines/components/case-deadline-list.vue';
 import CasePersons from '../modules/persons/components/case-persons.vue';
 import CasePriority from '../modules/priority/components/case-priority.vue';
 import CaseService from '../modules/service/components/case-service.vue';

diff --git a/src/modules/cases/modules/case-info/components/editable-field.vue b/src/modules/cases/modules/case-info/components/editable-field.vue
@@ -7,15 +7,16 @@
       v-if="!editMode"
       class="editable-field__content"
     >
-      <div class="editable-field__label-wrapper">
+      <div
+        v-if="label"
+        class="editable-field__label-wrapper"
+      >
         <wt-icon
           v-if="icon"
           :color="color"
           :icon="icon"
         />
-        <wt-label
-          v-if="label"
-        >
+        <wt-label>
           {{ label }}
         </wt-label>
       </div>

diff --git a/src/modules/cases/modules/deadlines/components/case-deadline-list.vue b/src/modules/cases/modules/deadlines/components/case-deadline-list.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="case-deadline-list">
+    <span class="case-deadline-list__title">{{ t('cases.deadlines') }}</span>
+    <div class="case-deadline-list__wrapper">
+      <case-deadline
+        :time="itemInstance?.createdAt"
+        :label="t('cases.createdAt')"
+      />
+      <case-deadline
+        :time-difference="itemInstance?.timing?.differenceInReaction"
+        :time="itemInstance?.plannedReactionAt"
+        :label="t('cases.reactionTime')"
+      />
+      <case-deadline
+        :time="itemInstance?.timing?.reactedAt"
+        :label="t('cases.actualReactionTime')"
+      />
+
+      <case-deadline
+        :time-difference="itemInstance?.timing?.differenceInResolve"
+        :time="itemInstance?.plannedResolveAt"
+        :label="t('cases.resolutionTime')"
+      />
+
+      <case-deadline
+        :time="itemInstance?.timing?.resolvedAt"
+        :label="t('cases.actualResolutionTime')"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/store';
+import { useI18n } from 'vue-i18n';
+import CaseDeadline from './case-deadline.vue';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+});
+
+const {
+  id,
+  itemInstance,
+  setItemProp,
+} = useCardStore(props.namespace);
+</script>
+
+<style lang="scss" scoped>
+.case-deadline-list {
+  width: 100%;
+
+  &__title {
+    display: block;
+    @extend %typo-heading-4;
+    padding: var(--spacing-xs);
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-xs);
+    gap: var(--spacing-xs);
+  }
+}
+</style>