WIP Переделаны цвета карточек событий

src/assets/sass/variables.sass

@@ -39,6 +39,11 @@
   --bg-event-blue-color-1: #93cdf6
   --bg-event-default-hover-color: #d9e1f9
   --border-event-default-color: #b3c3f3
+  --bg-event-orange-color: #FFC75B
+  --bg-event-orange-color-0: #ffdd9d
+  --bg-event-orange-color-1: #ffd27c
+  --bg-event-lavender-color: #8ba0ff
+  --bg-event-lavender-color-1: #c0d1ff
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)

src/pages/calendar/TheCalendar.vue

@@ -4,7 +4,7 @@
       :url="url",
       :team-data="employeesData",
       :open-form-create="openFormCreateEvent",
-      :event-types="eventTypes",
+      :event-types="eventStatus",
       @width="changeWidth",
     )
     calendar-schedule(
@@ -14,7 +14,7 @@
       :time-information="timeInformation",
       :events-data="eventsData",
       :sidebar-width="sidebarWidth",
-      :event-types="eventTypes",
+      :event-types="eventStatus",
       :change-form-was-closed="changeFormWasClosed",
       @previous-date="switchPreviousDate",
       @next-date="switchNextDate",
@@ -30,7 +30,7 @@
         :close-form="closeFormCreateEvent",
         :owners-data="employeesData",
         :selected-event-data="selectedEvent",
-        :event-types="eventTypes",
+        :event-types="eventStatus",
         :time-information="timeInformation",
         @clear-selected-event-data="clearSelectedEvent",
         @close-change-form="setChangeFormState"
@@ -40,7 +40,7 @@
       title="Удаление события"
     ) 
       calendar-delete-modal(
-        :event-types="eventTypes",
+        :event-types="eventStatus",
         :owner-event="selectedEvent",
         :close-modal="changeShowModal",
         @update-events="fetchEventsData"
@@ -82,11 +82,49 @@ export default {
       employeesData: [],
       isOpenForm: false,
       changeFormWasClosed: false,
-      eventTypes: [
+      eventStatus: [
-        { id: 1, label: "Встреча", color: "var(--bg-event-green-color)" },
+        {
-        { id: 2, label: "Планерка", color: "var(--bg-event-red-color)" },
+          id: 1,
-        { id: 3, label: "Интервью", color: "var(--bg-event-yellow-color)" },
+          label: "Ожидается прием",
-        { id: 4, label: "Важная работа", color: "var(--bg-event-blue-color)" },
+          value: "EXPECTED",
+          color: "var(--bg-event-yellow-color)",
+        },
+        {
+          id: 2,
+          label: "Идет прием",
+          value: "RECEPTION",
+          color: "var(--bg-event-blue-color)",
+        },
+        {
+          id: 3,
+          label: "Прием завершен",
+          value: "COMPLETED",
+          color: "var(--bg-event-green-color)",
+        },
+        {
+          id: 4,
+          label: "Не пришел",
+          value: "DID_NOT_COME",
+          color: "var(--bg-event-red-color)",
+        },
+        {
+          id: 5,
+          label: "Опаздывает",
+          value: "LATE",
+          color: "var(--bg-event-orange-color)",
+        },
+        {
+          id: 6,
+          label: "Отменил",
+          value: "CANCELED",
+          color: "var(--bg-event-lavender-color)",
+        },
+        {
+          id: 7,
+          label: "Планируется прием",
+          value: "PLANNED",
+          color: "var(--default-white)",
+        },
       ],
     };
   },

src/pages/calendar/components/CalendarEventCard.vue

@@ -101,43 +101,61 @@ export default {
       };
     },
     themeColors() {
-      switch (this.ownerEvent.kind) {
+      switch (this.ownerEvent.status) {
-        case this.eventTypes[0].label:
+        case this.eventTypes[0].value:
-          return {
-            "--bg-color": "var(--bg-event-green-color-0)",
-            "--bg-active": this.eventTypes[0].color,
-            "--bg-hover": "var(--bg-event-green-color-1)",
-            "--font-color": "var(--font-black-color)",
-            "--font-active-color": "var(--default-white)",
-            "--count-color": this.eventTypes[0].color,
-          };
-        case this.eventTypes[1].label:
-          return {
-            "--bg-color": "var(--bg-event-red-color-0)",
-            "--bg-active": this.eventTypes[1].color,
-            "--bg-hover": "var(--bg-event-red-color-1)",
-            "--font-color": "var(--font-black-color)",
-            "--font-active-color": "var(--default-white)",
-            "--count-color": this.eventTypes[1].color,
-          };
-        case this.eventTypes[2].label:
           return {
             "--bg-color": "var(--bg-event-yellow-color-0)",
-            "--bg-active": this.eventTypes[2].color,
+            "--bg-active": this.eventTypes[0].color,
             "--bg-hover": "var(--bg-event-yellow-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--font-black-color)",
             "--count-color": "var(--font-black-color)",
           };
-        case this.eventTypes[3].label:
+        case this.eventTypes[1].value:
           return {
             "--bg-color": "var(--bg-event-blue-color-0)",
-            "--bg-active": this.eventTypes[3].color,
+            "--bg-active": this.eventTypes[1].color,
             "--bg-hover": "var(--bg-event-blue-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[1].color,
+          };
+        case this.eventTypes[2].value:
+          return {
+            "--bg-color": "var(--bg-event-green-color-0)",
+            "--bg-active": this.eventTypes[2].color,
+            "--bg-hover": "var(--bg-event-green-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[2].color,
+          };
+        case this.eventTypes[3].value:
+          return {
+            "--bg-color": "var(--bg-event-red-color-0)",
+            "--bg-active": this.eventTypes[3].color,
+            "--bg-hover": "var(--bg-event-red-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
             "--count-color": this.eventTypes[3].color,
           };
+        case this.eventTypes[4].value:
+          return {
+            "--bg-color": "var(--bg-event-orange-color-0)",
+            "--bg-active": this.eventTypes[4].color,
+            "--bg-hover": "var(--bg-event-orange-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--font-black-color)",
+            "--count-color": "var(--font-black-color)",
+          };
+        case this.eventTypes[5].value:
+          return {
+            "--bg-color": "var(--bg-lavender-color)",
+            "--bg-active": this.eventTypes[5].color,
+            "--bg-hover": "var(--bg-event-lavender-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[5].color,
+          };
         default:
           return {
             "--bg-color": "var(--default-white)",

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -8,8 +8,8 @@
     .flex.justify-between.items-center.mb-2
       .flex
         span.inline-block.font-bold.text-base.mr-3.mt-2px {{ eventTime }}
-        .type.text-xxs.px-14px.py-1(v-if="isCertainType")
+        .type.text-xxs.flex.items-center.justify-center.px-14px(v-if="isCertainType")
-          span.type-text {{ ownerEvent.kind }}
+          span.type-text {{ ownerEvent.status }}
       .right-side.flex.gap-x-4.text-sm(v-if="!disabled")
         .icon-basket.flex.items-center.cursor-pointer(@click="transmitDeleteEvent")
         .icon-edit.flex.items-center.cursor-pointer(@click="transmitEventData")
@@ -50,30 +50,42 @@ export default {
   },
   computed: {
     typeColor() {
-      switch (this.ownerEvent.kind) {
+      switch (this.ownerEvent.status) {
-        case this.eventTypes[0].label:
+        case this.eventTypes[0].value:
-          return {
-            "--bg-color": "var(--bg-event-green-color-0)",
-            "--font-color": this.eventTypes[0].color,
-          };
-        case this.eventTypes[1].label:
-          return {
-            "--bg-color": "var(--bg-event-red-color-0)",
-            "--font-color": this.eventTypes[1].color,
-          };
-        case this.eventTypes[2].label:
           return {
             "--bg-color": "var(--bg-event-yellow-color-0)",
             "--font-color": "var(--font-black-color)",
           };
-        case this.eventTypes[3].label:
+        case this.eventTypes[1].value:
           return {
             "--bg-color": "var(--bg-event-blue-color-0)",
+            "--font-color": this.eventTypes[1].color,
+          };
+        case this.eventTypes[2].value:
+          return {
+            "--bg-color": "var(--bg-event-green-color-0)",
+            "--font-color": this.eventTypes[2].color,
+          };
+        case this.eventTypes[3].value:
+          return {
+            "--bg-color": "var(--bg-event-red-color-0)",
             "--font-color": this.eventTypes[3].color,
           };
+        case this.eventTypes[4].value:
+          return {
+            "--bg-color": "var(--bg-event-orange-color-0)",
+            "--font-color": "var(--font-black-color)",
+          };
+        case this.eventTypes[5].value:
+          return {
+            "--bg-color": "var(--bg-lavender-color)",
+            "--font-color": "var(--font-black-color)",
+          };
         default:
-          this.changeType();
+          return {
-          return {};
+            "--bg-color": "var(--bg-event-default-hover-color)",
+            "--font-color": "var(--btn-blue-color)",
+          };
       }
     },
     eventTime() {

src/pages/calendar/components/CalendarSidebarEvent.vue

@@ -43,7 +43,7 @@ export default {
 .event
   width: 32px
   height: 32px
-  background: var(--bg-event-box-color)
+  background: var(--btn-blue-sec-color)
   border-radius: 4px
 
 .event-type
@@ -58,7 +58,7 @@ export default {
   border-radius: 4px
   width: 169px
   outline: none
-  background-color: var(--bg-event-box-color)
+  background-color: var(--btn-blue-sec-color)
   &::placeholder
     color: var(--font-dark-blue-color)
   &:focus