135 lines
3.3 KiB
Vue
135 lines
3.3 KiB
Vue
<template lang="pug">
|
|
.calendar-column-wrapper.flex.flex-col
|
|
.header.flex.items-center.justify-between.py-2.px-6.top-0
|
|
.flex.items-center
|
|
base-avatar.mr-2(:size="32", :color="ownerData.color")
|
|
img(
|
|
:src="ownerData.avatar",
|
|
alt="Team member",
|
|
v-if="ownerData.avatar"
|
|
)
|
|
span(v-if="!ownerData.avatar") {{ defaultAvatar }}
|
|
span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
|
|
img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
|
|
column-header-checkbox
|
|
.body.pl-1
|
|
calendar-event-card(
|
|
v-for="event in dayEvents",
|
|
:key="event.id",
|
|
:id="event.id",
|
|
:ownerEvent="event",
|
|
:event-types="eventTypes",
|
|
:style="eventCardPosition(event.start, event.end)",
|
|
:change-form-was-closed="changeFormWasClosed",
|
|
@selected-event="transmitEventData",
|
|
@reset-change-form="transmitResetChangeForm",
|
|
@delete-event="transmitDeleteEvent",
|
|
:schedule-body-ref="scheduleBodyRef"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import ColumnHeaderCheckbox from "./CalendarColumnHeaderCheckbox.vue";
|
|
import BaseAvatar from "@/components/base/BaseAvatar";
|
|
import CalendarEventCard from "./CalendarEventCard.vue";
|
|
export default {
|
|
name: "CalendarColumn",
|
|
components: {
|
|
CalendarEventCard,
|
|
BaseAvatar,
|
|
ColumnHeaderCheckbox,
|
|
},
|
|
props: {
|
|
ownerData: Object,
|
|
dayEvents: Array,
|
|
dayEndTime: Number,
|
|
dayStartTime: Number,
|
|
eventTypes: Array,
|
|
changeFormWasClosed: Boolean,
|
|
scheduleBodyRef: Node,
|
|
},
|
|
data() {
|
|
return {
|
|
pixelsPerHour: 62,
|
|
};
|
|
},
|
|
computed: {
|
|
ownerName() {
|
|
if (this.ownerData.id) {
|
|
return `${this.ownerData.last_name} ${this.ownerData.first_name.slice(
|
|
0,
|
|
1
|
|
)}.${this.ownerData.patronymic.slice(0, 1)}.`;
|
|
}
|
|
return null;
|
|
},
|
|
defaultAvatar() {
|
|
return `${this.ownerData.last_name[0]}${this.ownerData.first_name[0]}`;
|
|
},
|
|
pixelsPerMinute() {
|
|
return this.pixelsPerHour / 60;
|
|
},
|
|
},
|
|
methods: {
|
|
eventCardPosition(startTime, endTime) {
|
|
let start = startTime
|
|
.slice(11, -4)
|
|
.split(":")
|
|
.map((elem) => parseInt(elem, 10));
|
|
let end = endTime.slice(11, -6);
|
|
let position =
|
|
(start[0] - this.dayStartTime) * this.pixelsPerHour +
|
|
start[1] * this.pixelsPerMinute;
|
|
if (
|
|
parseInt(start[0], 10) < this.dayStartTime ||
|
|
parseInt(end, 10) >= this.dayEndTime
|
|
) {
|
|
return {
|
|
top: "0px",
|
|
visibility: "hidden",
|
|
};
|
|
}
|
|
return {
|
|
top: `${position}px`,
|
|
};
|
|
},
|
|
transmitEventData(eventData) {
|
|
this.$emit("selected-event", eventData);
|
|
},
|
|
transmitResetChangeForm() {
|
|
this.$emit("reset-change-form");
|
|
},
|
|
transmitDeleteEvent(eventData) {
|
|
this.$emit("delete-event", eventData);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.calendar-column-wrapper
|
|
border-right: 1px solid var(--border-light-grey-color)
|
|
&:last-child
|
|
border-right: none
|
|
|
|
.header
|
|
position: sticky
|
|
z-index: 5
|
|
background-color: var(--default-white)
|
|
|
|
.body
|
|
position: relative
|
|
z-index: 3
|
|
|
|
.btn
|
|
opacity: 0.5
|
|
padding: 7px 13px !important
|
|
|
|
.icon-wrapper
|
|
width: 24px
|
|
height: 24px
|
|
|
|
.owner-name
|
|
color: var(--font-dark-blue-color)
|
|
</style>
|