298 lines
8.5 KiB
Vue
298 lines
8.5 KiB
Vue
<template lang="pug">
|
|
.wrapper.cursor-pointer.my-1.relative(
|
|
:style="themeColors",
|
|
:class="cardTheme"
|
|
)
|
|
.card.flex.px-2(
|
|
:class="{'py-6px flex-col': longCard}",
|
|
:style="cardHeight",
|
|
@click="openDescriptionCard"
|
|
)
|
|
.header.flex.justify-between.items-center(:class="{'items-start': longCard}")
|
|
.header-text
|
|
span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
|
|
span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
|
|
.details-count.flex.justify-center.items-center.text-xxs.font-medium(v-if="someDetailsShown") {{ `+${detailsCount}` }}
|
|
.body.flex.text-xxs.font-medium(v-if="longCard")
|
|
.col.mr-22px
|
|
ul
|
|
li.mt-2(v-for="elem in descriptionColumns.leftColumn" :key="elem") {{ elem }}
|
|
.col
|
|
ul
|
|
li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
|
|
calendar-event-description-card.right-0(
|
|
v-if="isOpenDescriptionCard"
|
|
:style="descriptionCardPosition"
|
|
:owner-event="this.ownerEvent"
|
|
:event-types="this.eventTypes"
|
|
:event-time="this.eventTime"
|
|
:event-member="eventMember"
|
|
:description="description"
|
|
@selected-event="transmitEventData"
|
|
@close-description-card="closeDescriptionCard"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import CalendarEventDescriptionCard from "./CalendarEventDescriptionCard.vue";
|
|
export default {
|
|
name: "CalendarEventCard",
|
|
components: { CalendarEventDescriptionCard },
|
|
props: {
|
|
ownerEvent: Object,
|
|
eventTypes: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
pixelsPerHour: 62,
|
|
isActive: false,
|
|
someDetailsShown: true,
|
|
isOpenDescriptionCard: false,
|
|
};
|
|
},
|
|
computed: {
|
|
pixelsPerMinute() {
|
|
return this.pixelsPerHour / 60;
|
|
},
|
|
eventTime() {
|
|
return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
|
|
this.ownerEvent.end
|
|
)}`;
|
|
},
|
|
eventMember() {
|
|
let membersArray = this.ownerEvent.members;
|
|
if (membersArray.length > 1) {
|
|
let primaryMember = membersArray.find(
|
|
(elem) => elem.role === "primary"
|
|
);
|
|
return this.composeFullName(primaryMember.person);
|
|
}
|
|
return this.composeFullName(membersArray[0].person);
|
|
},
|
|
calculateCardHeight() {
|
|
let startTime = this.trimTime(this.ownerEvent.start)
|
|
.split(":")
|
|
.map((elem) => parseInt(elem, 10));
|
|
let endTime = this.trimTime(this.ownerEvent.end)
|
|
.split(":")
|
|
.map((elem) => parseInt(elem, 10));
|
|
return (
|
|
(endTime[0] * 60 + endTime[1] - (startTime[0] * 60 + startTime[1])) *
|
|
this.pixelsPerMinute
|
|
);
|
|
},
|
|
cardHeight() {
|
|
return {
|
|
height: `${this.calculateCardHeight - 8}px`,
|
|
};
|
|
},
|
|
cardTheme() {
|
|
return {
|
|
"active-theme": this.isActive,
|
|
"default-theme": !this.isActive,
|
|
"long-card": this.longCard,
|
|
};
|
|
},
|
|
themeColors() {
|
|
switch (this.ownerEvent.kind) {
|
|
case this.eventTypes[0].label:
|
|
return {
|
|
"--bg-color": "var(--bg-event-green-color-0)",
|
|
"--bg-active": this.eventTypes[0].color,
|
|
"--bg-hover": "var(--bg-event-green-color-1)",
|
|
"--font-color": "var(--font-black-color)",
|
|
"--font-active-color": "var(--default-white)",
|
|
"--count-color": this.eventTypes[0].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:
|
|
return {
|
|
"--bg-color": "var(--bg-event-yellow-color-0)",
|
|
"--bg-active": this.eventTypes[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:
|
|
return {
|
|
"--bg-color": "var(--bg-event-blue-color-0)",
|
|
"--bg-active": this.eventTypes[3].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,
|
|
};
|
|
default:
|
|
return {
|
|
"--bg-color": "var(--default-white)",
|
|
"--bg-active": "var(--btn-blue-color)",
|
|
"--bg-hover": "var(--bg-event-default-hover-color)",
|
|
"--font-color": "var(--font-black-color)",
|
|
"--font-active-color": "var(--default-white)",
|
|
"--border-color": "#b3c3f3",
|
|
"--border-active-color": "var(--btn-blue-color)",
|
|
"--count-color": "var(--btn-blue-color)",
|
|
};
|
|
}
|
|
},
|
|
description() {
|
|
return this.ownerEvent.description
|
|
? this.ownerEvent.description.split(", ")
|
|
: [];
|
|
},
|
|
descriptionColumns() {
|
|
let leftCol = [],
|
|
rightCol = [],
|
|
heightParts = parseInt((this.calculateCardHeight - 8) / 23);
|
|
if (this.ownerEvent.description && heightParts > 1) {
|
|
let n = heightParts;
|
|
for (let i = 0; i < n * 2 - 2; i++) {
|
|
if (!this.description[i]) break;
|
|
i % 2 === 0
|
|
? leftCol.push(this.description[i])
|
|
: rightCol.push(this.description[i]);
|
|
}
|
|
}
|
|
return {
|
|
leftColumn: leftCol,
|
|
rightColumn: rightCol,
|
|
};
|
|
},
|
|
longCard() {
|
|
return parseInt((this.calculateCardHeight - 8) / 23) > 1 ? true : false;
|
|
},
|
|
detailsCount() {
|
|
let columnsLength =
|
|
this.descriptionColumns.leftColumn.length +
|
|
this.descriptionColumns.rightColumn.length,
|
|
remainingDetails = this.description.length - columnsLength;
|
|
if (!remainingDetails) this.changeDetailsShown();
|
|
return remainingDetails;
|
|
},
|
|
descriptionCardPosition() {
|
|
return {
|
|
top: `calc(${this.cardHeight.height} + 8px)`,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
trimTime(time) {
|
|
return time.slice(11, -4);
|
|
},
|
|
composeFullName(object) {
|
|
return `${object.last_name} ${object.first_name} ${object.patronymic}`;
|
|
},
|
|
setActiveTheme() {
|
|
this.isActive = true;
|
|
},
|
|
setDefaultTheme() {
|
|
this.isActive = false;
|
|
},
|
|
changeDetailsShown() {
|
|
this.someDetailsShown = false;
|
|
},
|
|
transmitEventData() {
|
|
this.$emit("selected-event", this.ownerEvent);
|
|
this.hideDescriptionCard();
|
|
},
|
|
hideDescriptionCard() {
|
|
this.isOpenDescriptionCard = false;
|
|
},
|
|
openDescriptionCard() {
|
|
if (!this.isOpenDescriptionCard && !this.isActive) {
|
|
this.isOpenDescriptionCard = true;
|
|
this.setActiveTheme();
|
|
}
|
|
},
|
|
closeDescriptionCard() {
|
|
this.hideDescriptionCard();
|
|
this.setDefaultTheme();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.wrapper
|
|
position: absolute
|
|
z-index: 3
|
|
width: calc(100% - 8px)
|
|
height: 23px
|
|
|
|
.default-theme
|
|
.card
|
|
background-color: var(--bg-color)
|
|
border: 2px solid var(--border-color)
|
|
border-left: 4px solid var(--bg-active)
|
|
.card:hover
|
|
background-color: var(--bg-hover)
|
|
.header-text, .body
|
|
color: var(--font-color)
|
|
.details-count
|
|
background-color: var(--bg-active)
|
|
color: var(--font-active-color)
|
|
li:before
|
|
background-color: var(--font-color)
|
|
|
|
.active-theme
|
|
.card
|
|
background-color: var(--bg-active)
|
|
border: 2px solid var(--border-active-color)
|
|
border-left: 4px solid var(--bg-active)
|
|
.header-text, .body
|
|
color: var(--font-active-color)
|
|
.details-count
|
|
background-color: var(--default-white)
|
|
color: var(--count-color)
|
|
li:before
|
|
background-color: var(--font-active-color)
|
|
|
|
.card
|
|
border-radius: 4px
|
|
min-height: 23px
|
|
|
|
.header
|
|
width: 100%
|
|
|
|
.details-count
|
|
width: 24px
|
|
height: 16px
|
|
border-radius: 16px
|
|
|
|
.col
|
|
max-width: calc(462px/2 - 22px)
|
|
|
|
ul
|
|
list-style-type: none
|
|
margin: 0
|
|
padding: 0
|
|
|
|
li
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
|
|
li:before
|
|
content: ''
|
|
display: inline-block
|
|
height: 8px
|
|
width: 8px
|
|
border-radius: 50%
|
|
background-color : var(--font-black-color)
|
|
margin-right: 4px
|
|
</style>
|