admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Наладила update/create событий

Browse Source
This commit is contained in:
Daria Golova
2022-12-16 15:57:15 +03:00
parent 3230a0b0e6
commit c080c5b1d3
9 changed files with 83 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/calendar/TheCalendar.vue
View File

@@ -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: "Планируется прием",

4
src/pages/calendar/components/CalendarColumn.vue
View File

@@ -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,

4
src/pages/calendar/components/CalendarDeleteModal.vue
View File

@@ -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 [];

38
src/pages/calendar/components/CalendarEventCard.vue
View File

@@ -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 {

22
src/pages/calendar/components/CalendarEventDescriptionCard.vue
View File

@@ -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 {

59
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -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

4
src/pages/calendar/components/CalendarSchedule.vue
View File

@@ -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 [];

4
src/pages/calendar/components/CalendarSidebar.vue
View File

@@ -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() {

6
src/pages/calendar/components/CalendarSidebarEvent.vue
View File

@@ -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,
},
};
</script>