diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue index 6f7348c..db8a966 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-status="eventStatus", + :event-statuses="eventStatuses", @width="changeWidth", ) calendar-schedule( @@ -14,7 +14,7 @@ :time-information="timeInformation", :events-data="eventsData", :sidebar-width="sidebarWidth", - :event-status="eventStatus", + :event-statuses="eventStatuses", :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-status="eventStatus", + :event-statuses="eventStatuses", :time-information="timeInformation", @clear-selected-event-data="clearSelectedEvent", @close-change-form="setChangeFormState" @@ -40,7 +40,7 @@ title="Удаление события" ) calendar-delete-modal( - :event-types="eventStatus", + :event-statuses="eventStatuses", :owner-event="selectedEvent", :close-modal="changeShowModal", @update-events="fetchEventsData" @@ -82,7 +82,7 @@ export default { employeesData: [], isOpenForm: false, changeFormWasClosed: false, - eventStatus: [ + eventStatuses: [ { id: 0, label: "Планируется прием", diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue index 37c5aa6..0bd1acf 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-status="eventStatus", + :event-statuses="eventStatuses", :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, - eventStatus: Array, + eventStatuses: Array, changeFormWasClosed: Boolean, scheduleBodyRef: Node, url: String, diff --git a/src/pages/calendar/components/CalendarDeleteModal.vue b/src/pages/calendar/components/CalendarDeleteModal.vue index 1c2c36b..b121e4e 100644 --- a/src/pages/calendar/components/CalendarDeleteModal.vue +++ b/src/pages/calendar/components/CalendarDeleteModal.vue @@ -4,7 +4,7 @@ .card-container calendar-event-description-card( disabled, - :event-types="eventTypes", + :event-statuses="eventStatuses", :owner-event="ownerEvent" ) .flex.gap-x-3.mt-6.font-semibold @@ -35,7 +35,7 @@ export default { }, props: { ownerEvent: Object, - eventTypes: { + eventStatuses: { type: Array, default() { return []; diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue index a47d35b..305816d 100644 --- a/src/pages/calendar/components/CalendarEventCard.vue +++ b/src/pages/calendar/components/CalendarEventCard.vue @@ -21,11 +21,11 @@ .col ul li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }} - transition(name="description") + transition(name="description") calendar-event-description-card( v-if="isOpenDescriptionCard", :owner-event="ownerEvent", - :event-status="eventStatus", + :event-statuses="eventStatuses", @selected-event="transmitEventData", @close-description-card="closeDescriptionCard", @delete-event="transmitDeleteEvent", @@ -41,7 +41,7 @@ export default { props: { changeFormWasClosed: Boolean, ownerEvent: Object, - eventStatus: { + eventStatuses: { type: Array, default() { return []; @@ -102,59 +102,59 @@ export default { }, themeColors() { switch (this.ownerEvent.status) { - case this.eventStatus[1].value: + case this.eventStatuses[1].value: return { "--bg-color": "var(--bg-event-grey-color-0)", - "--bg-active": this.eventStatus[1].color, + "--bg-active": this.eventStatuses[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.eventStatus[1].color, + "--count-color": this.eventStatuses[1].color, }; - case this.eventStatus[2].value: + case this.eventStatuses[2].value: return { "--bg-color": "var(--bg-event-yellow-color-0)", - "--bg-active": this.eventStatus[2].color, + "--bg-active": this.eventStatuses[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.eventStatus[3].value: + case this.eventStatuses[3].value: return { "--bg-color": "var(--bg-event-orange-color-0)", - "--bg-active": this.eventStatus[3].color, + "--bg-active": this.eventStatuses[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: + case this.eventStatuses[4].value: return { "--bg-color": "var(--bg-event-blue-color-0)", - "--bg-active": this.eventStatus[4].color, + "--bg-active": this.eventStatuses[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.eventStatus[4].color, + "--count-color": this.eventStatuses[4].color, }; - case this.eventStatus[5].value: + case this.eventStatuses[5].value: return { "--bg-color": "var(--bg-event-green-color-0)", - "--bg-active": this.eventStatus[5].color, + "--bg-active": this.eventStatuses[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, + "--count-color": this.eventStatuses[5].color, }; - case this.eventStatus[6].value: + case this.eventStatuses[6].value: return { "--bg-color": "var(--bg-event-red-color-0)", - "--bg-active": this.eventStatus[6].color, + "--bg-active": this.eventStatuses[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, + "--count-color": this.eventStatuses[6].color, }; default: return { diff --git a/src/pages/calendar/components/CalendarEventDescriptionCard.vue b/src/pages/calendar/components/CalendarEventDescriptionCard.vue index ae565cb..492d095 100644 --- a/src/pages/calendar/components/CalendarEventDescriptionCard.vue +++ b/src/pages/calendar/components/CalendarEventDescriptionCard.vue @@ -31,7 +31,7 @@ export default { name: "CalendarEventDescriptionCard", props: { ownerEvent: Object, - eventStatus: { + eventStatuses: { type: Array, default() { return []; @@ -57,35 +57,35 @@ export default { }, typeColor() { switch (this.ownerEvent.status) { - case this.eventStatus[1].value: + case this.eventStatuses[1].value: return { "--bg-color": "var(--bg-event-grey-color-0)", - "--font-color": this.eventStatus[1].color, + "--font-color": this.eventStatuses[1].color, }; - case this.eventStatus[2].value: + case this.eventStatuses[2].value: return { "--bg-color": "var(--bg-event-yellow-color-0)", "--font-color": "var(--font-black-color)", }; - case this.eventStatus[3].value: + case this.eventStatuses[3].value: return { "--bg-color": "var(--bg-event-orange-color-0)", "--font-color": "var(--font-black-color)", }; - case this.eventStatus[4].value: + case this.eventStatuses[4].value: return { "--bg-color": "var(--bg-event-blue-color-0)", - "--font-color": this.eventStatus[4].color, + "--font-color": this.eventStatuses[4].color, }; - case this.eventStatus[5].value: + case this.eventStatuses[5].value: return { "--bg-color": "var(--bg-event-green-color-0)", - "--font-color": this.eventStatus[5].color, + "--font-color": this.eventStatuses[5].color, }; - case this.eventStatus[6].value: + case this.eventStatuses[6].value: return { "--bg-color": "var(--bg-event-red-color-0)", - "--font-color": this.eventStatus[6].color, + "--font-color": this.eventStatuses[6].color, }; default: return { diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue index f42c675..d53d640 100644 --- a/src/pages/calendar/components/CalendarFormAddEvent.vue +++ b/src/pages/calendar/components/CalendarFormAddEvent.vue @@ -3,26 +3,33 @@ v-click-outside="clearForm" ) .flex.justify-between - span.title.text-xl.font-bold {{!selectedEventData.id ? "Назначение события" : "Изменение события"}} + span.title.text-xl.font-bold {{!selectedEventData.id ? "Запись на прием" : "Изменение записи"}} .flex.pt-2 .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm") .flex.flex-col.gap-y-8 .flex.flex-col.gap-y-2 - span.text-xs.opacity-40.font-bold.leading-3 Вид события + span.text-xxs.opacity-40.font-bold.leading-3 Статус приема base-custom-select.select( - v-model="kind", - :items="eventStatus", - placeholder="Вид события" + v-if="selectedEventData.id" + v-model="status", + :items="eventStatuses", + placeholder="Статус приема" + ) + base-input( + v-else, + disabled, + v-model:value="status.label" ) .flex.flex-col(class="gap-y-1.5") - span.text-sm Сотрудник + span.text-xxs.opacity-40.font-bold Сотрудник base-custom-select.select( :items="ownersList", v-model="employees.employee", placeholder="Выберите сотрудника" ) + .flex.flex-col(class="gap-y-1.5") - span.text-sm Клиент + span.text-xxs.opacity-40.font-bold Клиент base-custom-select.select( :items="membersList", v-model="members.person", @@ -32,18 +39,18 @@ .flex.gap-x-4 .flex.gap-x-2 .flex.flex-col(class="gap-y-1.5") - span.text-xs.opacity-40.font-bold.leading-3 Дата + span.text-xxs.opacity-40.font-bold.leading-3.font-bold Дата base-input-date.select(v-model:value="eventDate") .flex.gap-x-2.items-center .flex.flex-col(class="gap-y-1.5") - span.text-xs.opacity-40.font-bold.leading-3 Начало + span.text-xxs.opacity-40.font-bold.leading-3.font-bold Начало base-input-time.item-input.text-base.select( v-model:value="startTime", :width-input="72" ) span.mt-4 — .flex.flex-col(class="gap-y-1.5") - span.text-xs.opacity-40.font-bold.leading-3 Конец + span.text-xxs.opacity-40.font-bold.leading-3.font-bold Конец base-input-time.item-input.text-base.select( v-model:value="endTime", :width-input="72" @@ -73,6 +80,7 @@ import BaseSelect from "@/components/base/BaseSelect.vue"; import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue"; import BaseButton from "@/components/base/BaseButton"; import * as moment from "moment/moment"; +import { statusesDictionary } from "../utils/statusesDictionary.js"; export default { name: "FormChangeEvent", components: { @@ -99,7 +107,7 @@ export default { return {}; }, }, - eventStatus: { + eventStatuses: { type: Array, default() { return []; @@ -116,13 +124,14 @@ export default { return { EMPLOYEE_TYPE: "owner", MEMBER_TYPE: "primary", + EVENT_KIND: "Прием", eventData: {}, startTime: "", endTime: "", members: {}, employees: {}, eventDate: "", - kind: "", + status: {}, id: null, ifClearedForm: true, membersData: [], @@ -170,7 +179,7 @@ export default { this.endTime && this.members.person.label && this.employees.employee.label && - this.kind.label + this.status.label ) { return false; } @@ -183,7 +192,7 @@ export default { this.eventDate === start.format("YYYY-MM-DD") && this.startTime === start.format("HH:mm") && this.endTime === end.format("HH:mm") && - this.kind.label === this.selectedEventData.kind && + this.status.label === this.selectedEventData.status && this.employees.employee.id === this.personId(this.selectedEventData.employees, "employee") && this.members.person.id === @@ -258,14 +267,14 @@ export default { role: this.MEMBER_TYPE, }; }, - eventKind() { - return this.selectedEventData.kind + eventStatus() { + return this.selectedEventData.status ? { - label: this.selectedEventData.kind, + label: statusesDictionary[this.selectedEventData.status], id: null, } : { - label: "", + label: statusesDictionary["PLANNED"], id: null, }; }, @@ -274,6 +283,11 @@ export default { }, }, methods: { + findStatus(value) { + return Object.keys(statusesDictionary).find( + (key) => statusesDictionary[key] === value + ); + }, checkTimeLimits(eventTime, scheduleTime, timeType) { if (timeType === "start") return ( @@ -354,7 +368,8 @@ export default { this.eventData = { start: this.mergeDate(this.eventDate, this.startTime), end: this.mergeDate(this.eventDate, this.endTime), - kind: this.kind.label, + status: this.findStatus(this.status.label), + kind: this.EVENT_KIND, employees: [ this.findPerson(this.ownersData, this.employees, "employee"), ], @@ -375,7 +390,7 @@ export default { this.eventData = { start: this.mergeDate(this.eventDate, this.startTime), end: this.mergeDate(this.eventDate, this.endTime), - kind: this.kind.label, + status: this.findStatus(this.status.label), employees: [ this.findPerson(this.ownersData, this.employees, "employee"), ], @@ -498,7 +513,7 @@ export default { handler(newDate) { if (newDate) { this.id = this.eventId; - this.kind = this.eventKind; + this.status = this.eventStatus; this.employees = this.eventEmployee; this.members = this.eventMember; } @@ -561,7 +576,7 @@ export default { .select height: 40px - border: 2px solid var(--border-light-grey-color) + border: 1.5px solid var(--border-light-grey-color) border-radius: 4px .update-button diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue index 71ffc34..82d1f49 100644 --- a/src/pages/calendar/components/CalendarSchedule.vue +++ b/src/pages/calendar/components/CalendarSchedule.vue @@ -25,7 +25,7 @@ :day-start-time="validateStartTime", :day-end-time="validateEndTime", :style="columnSize", - :event-status="eventStatus", + :event-statuses="eventStatuses", :change-form-was-closed="changeFormWasClosed", @selected-event="transmitEventData", @reset-change-form="transmitResetChangeForm", @@ -97,7 +97,7 @@ export default { return []; }, }, - eventStatus: { + eventStatuses: { type: Array, default() { return []; diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue index c65fbfa..8f785f0 100644 --- a/src/pages/calendar/components/CalendarSidebar.vue +++ b/src/pages/calendar/components/CalendarSidebar.vue @@ -19,7 +19,7 @@ @click="openFormCreate", v-else ) Создать событие - calendar-sidebar-event(:is-open="isOpen", :event-status="eventStatus") + calendar-sidebar-event(:is-open="isOpen", :event-statuses="eventStatuses") calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url") .button-wrapper.flex.justify-center.mb-23px base-button( @@ -47,7 +47,7 @@ export default { props: { teamData: Array, openFormCreate: Function, - eventStatus: Array, + eventStatuses: Array, url: String, }, data() { diff --git a/src/pages/calendar/components/CalendarSidebarEvent.vue b/src/pages/calendar/components/CalendarSidebarEvent.vue index a3b40f3..cb82654 100644 --- a/src/pages/calendar/components/CalendarSidebarEvent.vue +++ b/src/pages/calendar/components/CalendarSidebarEvent.vue @@ -3,7 +3,7 @@ .flex.flex-col.items-center(v-if="!isOpen") base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary) .flex.flex-col.gap-y-2.items-center.mt-4 - .event.flex.items-center.justify-center(v-for="event in eventStatus" :key="event.id") + .event.flex.items-center.justify-center(v-for="event in eventStatuses" :key="event.id") .event-type(:style="{ background: event.color }") .flex.flex-col.gap-y-4.w-full(v-else) .flex.items-center.justify-between @@ -16,7 +16,7 @@ secondary ) .flex.flex-col.gap-y-2 - .relative.flex.items-center.gap-x-3.h-8(v-for="event in eventStatus") + .relative.flex.items-center.gap-x-3.h-8(v-for="event in eventStatuses") input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs( :placeholder="event.label" :key="event.id" @@ -34,7 +34,7 @@ export default { }, props: { isOpen: Boolean, - eventStatus: Array, + eventStatuses: Array, }, };