diff --git a/src/assets/icons/close_circle_remove_delete_icon_149506 1 (1).svg b/src/assets/icons/close_circle_remove_delete_icon_149506 1 (1).svg new file mode 100644 index 0000000..35f9ae6 --- /dev/null +++ b/src/assets/icons/close_circle_remove_delete_icon_149506 1 (1).svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index e548e32..a6ce03f 100644 --- a/src/assets/sass/variables.sass +++ b/src/assets/sass/variables.sass @@ -39,6 +39,12 @@ --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: #ffe6b9 + --bg-event-orange-color-1: #ffd27c + --bg-event-grey-color: #87898f + --bg-event-grey-color-0: #d3d4d7 + --bg-event-grey-color-1: #acadb1 --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..6f7348c 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-status="eventStatus", @width="changeWidth", ) calendar-schedule( @@ -14,7 +14,7 @@ :time-information="timeInformation", :events-data="eventsData", :sidebar-width="sidebarWidth", - :event-types="eventTypes", + :event-status="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-status="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: 0, + label: "Планируется прием", + value: "PLANNED", + color: "var(--default-white)", + }, + { + id: 1, + label: "Отменил", + value: "CANCELED", + color: "var(--bg-event-grey-color)", + }, + { + id: 2, + label: "Ожидается прием", + value: "EXPECTED", + color: "var(--bg-event-yellow-color)", + }, + { + id: 3, + label: "Опаздывает", + value: "LATE", + color: "var(--bg-event-orange-color)", + }, + { + id: 4, + label: "Идет прием", + value: "RECEPTION", + color: "var(--bg-event-blue-color)", + }, + { + id: 5, + label: "Прием завершен", + value: "COMPLETED", + color: "var(--bg-event-green-color)", + }, + { + id: 6, + label: "Не пришел", + value: "DID_NOT_COME", + color: "var(--bg-event-red-color)", + }, ], }; }, diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue index 99243c0..37c5aa6 100644 --- a/src/pages/calendar/components/CalendarColumn.vue +++ b/src/pages/calendar/components/CalendarColumn.vue @@ -19,7 +19,7 @@ :key="event.id + index", :id="event.id", :ownerEvent="event", - :event-types="eventTypes", + :event-status="eventStatus", :style="eventCardPosition(event.start, event.end)", :change-form-was-closed="changeFormWasClosed", @selected-event="transmitEventData", @@ -45,7 +45,7 @@ export default { dayEvents: Array, dayEndTime: Number, dayStartTime: Number, - eventTypes: Array, + eventStatus: Array, changeFormWasClosed: Boolean, scheduleBodyRef: Node, url: String, diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue index 3185047..a47d35b 100644 --- a/src/pages/calendar/components/CalendarEventCard.vue +++ b/src/pages/calendar/components/CalendarEventCard.vue @@ -25,7 +25,7 @@ calendar-event-description-card( v-if="isOpenDescriptionCard", :owner-event="ownerEvent", - :event-types="eventTypes", + :event-status="eventStatus", @selected-event="transmitEventData", @close-description-card="closeDescriptionCard", @delete-event="transmitDeleteEvent", @@ -41,7 +41,7 @@ export default { props: { changeFormWasClosed: Boolean, ownerEvent: Object, - eventTypes: { + eventStatus: { type: Array, default() { return []; @@ -101,42 +101,60 @@ export default { }; }, themeColors() { - switch (this.ownerEvent.kind) { - case this.eventTypes[0].label: + switch (this.ownerEvent.status) { + case this.eventStatus[1].value: return { - "--bg-color": "var(--bg-event-green-color-0)", - "--bg-active": this.eventTypes[0].color, - "--bg-hover": "var(--bg-event-green-color-1)", + "--bg-color": "var(--bg-event-grey-color-0)", + "--bg-active": this.eventStatus[1].color, + "--bg-hover": "var(--bg-event-grey-color-1)", "--font-color": "var(--font-black-color)", "--font-active-color": "var(--default-white)", - "--count-color": this.eventTypes[0].color, + "--count-color": this.eventStatus[1].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: + case this.eventStatus[2].value: return { "--bg-color": "var(--bg-event-yellow-color-0)", - "--bg-active": this.eventTypes[2].color, + "--bg-active": this.eventStatus[2].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.eventStatus[3].value: + return { + "--bg-color": "var(--bg-event-orange-color-0)", + "--bg-active": this.eventStatus[3].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.eventStatus[4].value: return { "--bg-color": "var(--bg-event-blue-color-0)", - "--bg-active": this.eventTypes[3].color, + "--bg-active": this.eventStatus[4].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[3].color, + "--count-color": this.eventStatus[4].color, + }; + case this.eventStatus[5].value: + return { + "--bg-color": "var(--bg-event-green-color-0)", + "--bg-active": this.eventStatus[5].color, + "--bg-hover": "var(--bg-event-green-color-1)", + "--font-color": "var(--font-black-color)", + "--font-active-color": "var(--default-white)", + "--count-color": this.eventStatus[5].color, + }; + case this.eventStatus[6].value: + return { + "--bg-color": "var(--bg-event-red-color-0)", + "--bg-active": this.eventStatus[6].color, + "--bg-hover": "var(--bg-event-red-color-1)", + "--font-color": "var(--font-black-color)", + "--font-active-color": "var(--default-white)", + "--count-color": this.eventStatuss[6].color, }; default: return { diff --git a/src/pages/calendar/components/CalendarEventDescriptionCard.vue b/src/pages/calendar/components/CalendarEventDescriptionCard.vue index 6d55024..ae565cb 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-xs.font-medium.flex.items-center.justify-center.px-14px(v-if="isCertainType") + span.type-text {{ 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") @@ -26,11 +26,12 @@ @@ -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 diff --git a/src/pages/calendar/utils/statusesDictionary.js b/src/pages/calendar/utils/statusesDictionary.js new file mode 100644 index 0000000..9538c18 --- /dev/null +++ b/src/pages/calendar/utils/statusesDictionary.js @@ -0,0 +1,9 @@ +export const statusesDictionary = { + PLANNED: "Планируется прием", + EXPECTED: "Ожидается прием", + RECEPTION: "Идет прием", + COMPLETED: "Прием завершен", + DID_NOT_COME: "Не пришел", + LATE: "Опаздывает", + CANCELED: "Отменил", +};