From 5a5326b850e605a01deecb00a4f44a80b138dd92 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Thu, 15 Dec 2022 20:22:43 +0300 Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=D0=B0=D0=BD=D1=8B=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20?= =?UTF-8?q?=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA=20=D1=81=D0=BE?= =?UTF-8?q?=D0=B1=D1=8B=D1=82=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/sass/variables.sass | 5 ++ src/pages/calendar/TheCalendar.vue | 56 +++++++++++++--- .../calendar/components/CalendarEventCard.vue | 64 ++++++++++++------- .../CalendarEventDescriptionCard.vue | 46 ++++++++----- .../components/CalendarSidebarEvent.vue | 4 +- 5 files changed, 124 insertions(+), 51 deletions(-) diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index e548e32..d70d692 100644 --- a/src/assets/sass/variables.sass +++ b/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) diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue index 7cdb9f6..436e88b 100644 --- a/src/pages/calendar/TheCalendar.vue +++ b/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: [ - { id: 1, label: "Встреча", color: "var(--bg-event-green-color)" }, - { id: 2, label: "Планерка", color: "var(--bg-event-red-color)" }, - { id: 3, label: "Интервью", color: "var(--bg-event-yellow-color)" }, - { id: 4, label: "Важная работа", color: "var(--bg-event-blue-color)" }, + eventStatus: [ + { + id: 1, + label: "Ожидается прием", + 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)", + }, ], }; }, diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue index 3185047..125a542 100644 --- a/src/pages/calendar/components/CalendarEventCard.vue +++ b/src/pages/calendar/components/CalendarEventCard.vue @@ -101,43 +101,61 @@ export default { }; }, themeColors() { - switch (this.ownerEvent.kind) { - case this.eventTypes[0].label: - 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: + switch (this.ownerEvent.status) { + case this.eventTypes[0].value: 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)", diff --git a/src/pages/calendar/components/CalendarEventDescriptionCard.vue b/src/pages/calendar/components/CalendarEventDescriptionCard.vue index 6d55024..773c8b3 100644 --- a/src/pages/calendar/components/CalendarEventDescriptionCard.vue +++ b/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") - span.type-text {{ ownerEvent.kind }} + .type.text-xxs.flex.items-center.justify-center.px-14px(v-if="isCertainType") + 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) { - case this.eventTypes[0].label: - 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: + switch (this.ownerEvent.status) { + case this.eventTypes[0].value: 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() { diff --git a/src/pages/calendar/components/CalendarSidebarEvent.vue b/src/pages/calendar/components/CalendarSidebarEvent.vue index 0678690..a2129d8 100644 --- a/src/pages/calendar/components/CalendarSidebarEvent.vue +++ b/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