From 558795a8b791bc50c6cfab381929edb90694f721 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Mon, 14 Nov 2022 18:39:48 +0300 Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D1=81?= =?UTF-8?q?=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F,=20=D0=B7=D0=B0?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=D0=B0=20=D1=81=D0=B5=D0=BB=D0=B5?= =?UTF-8?q?=D0=BA=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/BaseAddingNetwork.vue | 6 +- src/components/base/BaseCustomSelect.vue | 118 +++++++++++++ src/components/base/BaseOptions.vue | 31 ++++ ...dBaseSelect.vue => BaseSelectNetworks.vue} | 54 +----- src/pages/calendar/TheCalendar.vue | 2 - .../calendar/components/CalendarEventCard.vue | 6 +- .../components/CalendarFormAddEvent.vue | 167 +++++++++--------- 7 files changed, 240 insertions(+), 144 deletions(-) create mode 100644 src/components/base/BaseCustomSelect.vue create mode 100644 src/components/base/BaseOptions.vue rename src/components/base/{OldBaseSelect.vue => BaseSelectNetworks.vue} (56%) diff --git a/src/components/base/BaseAddingNetwork.vue b/src/components/base/BaseAddingNetwork.vue index 24704f6..8c5049a 100644 --- a/src/components/base/BaseAddingNetwork.vue +++ b/src/components/base/BaseAddingNetwork.vue @@ -1,16 +1,16 @@ + + diff --git a/src/components/base/BaseOptions.vue b/src/components/base/BaseOptions.vue new file mode 100644 index 0000000..0d4787b --- /dev/null +++ b/src/components/base/BaseOptions.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/components/base/OldBaseSelect.vue b/src/components/base/BaseSelectNetworks.vue similarity index 56% rename from src/components/base/OldBaseSelect.vue rename to src/components/base/BaseSelectNetworks.vue index 89feefa..2de527b 100644 --- a/src/components/base/OldBaseSelect.vue +++ b/src/components/base/BaseSelectNetworks.vue @@ -1,27 +1,9 @@ diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue index 2835f80..70c60a2 100644 --- a/src/pages/calendar/TheCalendar.vue +++ b/src/pages/calendar/TheCalendar.vue @@ -32,13 +32,11 @@ import { fetchWrapper } from "../../shared/fetchWrapper.js"; import * as moment from "moment/moment"; import CalendarSchedule from "./components/CalendarSchedule.vue"; import CalendarSidebar from "./components/CalendarSidebar.vue"; -import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue"; export default { name: "TheCalendar", components: { CalendarSchedule, CalendarSidebar, - CalendarFormAddEvent, }, data() { return { diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue index dc7091c..118cc5b 100644 --- a/src/pages/calendar/components/CalendarEventCard.vue +++ b/src/pages/calendar/components/CalendarEventCard.vue @@ -23,9 +23,9 @@ calendar-event-description-card.right-0( v-if="isOpenDescriptionCard" :style="descriptionCardPosition" - :owner-event="this.ownerEvent" - :event-types="this.eventTypes" - :event-time="this.eventTime" + :owner-event="ownerEvent" + :event-types="eventTypes" + :event-time="eventTime" :event-member="eventMember" :description="description" @selected-event="transmitEventData" diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue index afb458a..a611f65 100644 --- a/src/pages/calendar/components/CalendarFormAddEvent.vue +++ b/src/pages/calendar/components/CalendarFormAddEvent.vue @@ -7,42 +7,25 @@ .flex.flex-col.gap-y-8 .flex.flex-col.gap-y-2 span.text-xs.opacity-40.font-bold.leading-3 Вид события - base-select.select( + base-custom-select.select( v-model="kind" :items="kindEvents" placeholder="Вид события" - :style="{width: '570px'}" ) .flex.flex-col(class="gap-y-1.5") span.text-sm Сотрудник - base-select.select( - v-if="!selectedEventData.employees", + base-custom-select.select( :items="ownersList", v-model="employees.employee", placeholder="Выберите сотрудника" - ) - base-select.select( - v-else, - v-model="employees.employee", - :items="ownersList", - :placeholder="employeeName" - placeholderOpacity ) .flex.flex-col(class="gap-y-1.5") span.text-sm Клиент - base-select.select( - v-if="!selectedEventData.members", + base-custom-select.select( :items="membersList", v-model="members.person", placeholder="Выберите клиента", ) - base-select.select( - v-else, - v-model="members.person", - :items="membersList", - :placeholder="memberName", - placeholderOpacity - ) .flex.flex-col.gap-y-8 .flex.gap-x-4 .flex.gap-x-2 @@ -70,10 +53,10 @@ @click="sendEventData" ) Создать событие base-button.update-button.text-base.font-semibold( - v-else, - :size="40", - :disabled="disabledUpdateButton", - @click="updateEventData", + v-else, + :size="40", + :disabled="disabledUpdateButton", + @click="updateEventData", ) Сохранить @@ -83,6 +66,7 @@ import BaseInputTime from "@/components/base/BaseInputTime.vue"; import BaseInput from "@/components/base/BaseInput.vue"; import BaseInputDate from "@/components/base/BaseInputDate.vue"; 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"; export default { @@ -93,6 +77,7 @@ export default { BaseInput, BaseInputDate, BaseInputTime, + BaseCustomSelect, }, props: { closeForm: Function, @@ -189,41 +174,14 @@ export default { } return []; }, - memberName() { - if (this.selectedEventData.members) { - let foundMember = {}; - if (this.selectedEventData.members.length > 1) { - foundMember = this.selectedEventData.members.find( - ({ role }) => role === this.MEMBER_TYPE - ); - } else foundMember = this.selectedEventData.members[0]; - let { - person: { last_name, first_name, patronymic }, - } = foundMember; - return this.trimMemberName(last_name, first_name, patronymic); - } - return ""; - }, - employeeName() { - if (this.selectedEventData.employees) { - let foundEmployee = this.selectedEventData.employees.find( - ({ role }) => role === this.EMPLOYEE_TYPE - ); - let { - employee: { last_name, first_name, patronymic }, - } = foundEmployee; - return this.trimOwnerName(last_name, first_name, patronymic); - } - return ""; - }, disabledCreateButton() { if ( this.eventDate && this.startTime && this.endTime && - this.members.person && - this.employees.employee && - this.kind + this.members.person.label && + this.employees.employee.label && + this.kind.label ) { return false; } @@ -236,7 +194,7 @@ export default { this.eventDate === start.format("YYYY-MM-DD") && this.startTime === start.format("HH:mm") && this.endTime === end.format("HH:mm") && - this.kind === this.selectedEventData.kind + this.kind.label === this.selectedEventData.kind ) { return true; } @@ -254,23 +212,69 @@ export default { }, eventEmployee() { if (this.selectedEventData.employees) { - return this.selectedEventData.employees; + let foundEmployee = this.selectedEventData.employees.find( + ({ role }) => role === this.EMPLOYEE_TYPE + ); + let { + employee: { id, last_name, first_name, patronymic }, + ...rest + } = foundEmployee; + return { + employee: { + id: id, + label: this.trimOwnerName(last_name, first_name, patronymic), + }, + id: rest.id, + role: rest.role, + }; } return { - employee: null, + employee: { + id: null, + label: "", + }, role: this.EMPLOYEE_TYPE, }; }, eventMember() { - return this.selectedEventData.members - ? this.selectedEventData.members - : { - person: null, - role: this.MEMBER_TYPE, - }; + if (this.selectedEventData.members) { + let foundMember = {}; + if (this.selectedEventData.members.length > 1) { + foundMember = this.selectedEventData.members.find( + ({ role }) => role === this.MEMBER_TYPE + ); + } else foundMember = this.selectedEventData.members[0]; + let { + person: { id, last_name, first_name, patronymic }, + ...rest + } = foundMember; + return { + person: { + id: id, + label: this.trimMemberName(last_name, first_name, patronymic), + }, + id: rest.id, + role: rest.role, + }; + } + return { + person: { + id: null, + label: "", + }, + role: this.MEMBER_TYPE, + }; }, eventKind() { - return this.selectedEventData.kind ? this.selectedEventData.kind : ""; + return this.selectedEventData.kind + ? { + label: this.selectedEventData.kind, + id: null, + } + : { + label: "", + id: null, + }; }, eventId() { return this.selectedEventData.id ? this.selectedEventData.id : ""; @@ -287,23 +291,11 @@ export default { this.eventData = { start: this.mergeDate(this.eventDate, this.startTime), end: this.mergeDate(this.eventDate, this.endTime), - kind: this.kind, + kind: this.kind.label, employees: [ - this.findPerson( - this.ownersData, - this.ownersList, - this.employees, - "employee" - ), - ], - members: [ - this.findPerson( - this.membersData, - this.membersList, - this.members, - "person" - ), + this.findPerson(this.ownersData, this.employees, "employee"), ], + members: [this.findPerson(this.membersData, this.members, "person")], }; this.postCreateEvent(this.eventData); this.clearForm(); @@ -313,7 +305,11 @@ export default { this.eventData = { start: this.mergeDate(this.eventDate, this.startTime), end: this.mergeDate(this.eventDate, this.endTime), - kind: this.kind, + kind: this.kind.label, + employees: [ + this.findPerson(this.ownersData, this.employees, "employee"), + ], + members: [this.findPerson(this.membersData, this.members, "person")], }; this.postUpdateEvent(this.id, this.eventData); this.clearForm(); @@ -327,12 +323,9 @@ export default { mergeDate(eventDate, time) { return moment(`${eventDate} ${time}`).format("YYYY-MM-DDTHH:mm:ss"); }, - findPerson(requestedList, serializedList, object, field) { - let foundId = serializedList.find( - ({ label }) => label === object[field] - ).id; - let foundPerson = requestedList.find(({ id }) => id === foundId); - return { + findPerson(requestedList, object, field) { + let foundPerson = requestedList.find(({ id }) => id === object[field].id); + let returnedData = { [field]: { id: foundPerson.id, last_name: foundPerson.last_name, @@ -342,6 +335,8 @@ export default { }, role: object.role, }; + if (object.id) returnedData.id = object.id; + return returnedData; }, postCreateEvent(event) { fetchWrapper