mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 22:39:34 +00:00
183 lines
7.1 KiB
Vue
183 lines
7.1 KiB
Vue
<template>
|
|
<div class="event" :class="{ 'event--office': isOfficeEvent }">
|
|
<div v-if="props.event.type == 'non-working-hours'" class="custom-event-body non-working-event colWidth h-100 d-flex flex-column justify-center">
|
|
<div class="d-flex justify-center align-center">
|
|
<v-icon icon="mdi-cancel" color="black"></v-icon>
|
|
<h3 class="mb-0 ms-2">{{ props.event.title }}</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="['subtask', 'blocker', 'adhoc', 'vacation', 'free_day', 'office365', 'office365_blocker'].includes(event.type)" class="custom-event-body colWidth h-100 d-flex flex-column justify-space-between" :class="subtaskCssClass" :style="{ backgroundColor: eventColor.backgroundColor, color: eventColor.color }">
|
|
<div class="event-content" :class="{ 'is-blocker': props.event.isBlocker }">
|
|
<template v-if="['subtask', 'office365'].includes(event.type)">
|
|
<small v-if="props.event.subtask.project_code" class="project-code" :style="{ color: eventColor.color }">{{ props.event.subtask.project_code }}</small>
|
|
<h3 class="text-inherit">{{ props.event.subtask.title ?? props.event.subtask.master_task?.name ?? props.event.subtask.master_task }}</h3>
|
|
</template>
|
|
<template v-else>
|
|
<v-tooltip :text="event.blocker?.approved ? 'Schválený' : 'Neschválený'" location="bottom">
|
|
<template v-slot:activator="{ props: activatorProps }">
|
|
<div v-bind="activatorProps">
|
|
<h3 class="text-inherit">{{ props.event?.blocker?.approved ? props.event?.blocker?.name : props.event?.blocker?.name + '*' }}</h3>
|
|
</div>
|
|
</template>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<div class="d-flex align-center event-details event-initials-wrapper">
|
|
<div class="event-initials d-flex justify-center align-center" :style="{ borderColor: eventColor.color }">
|
|
<small class="text-inherit">{{ props.event.initials }}</small>
|
|
</div>
|
|
<small class="event-initials-date text-inherit">{{ props.event.date?.toLocaleDateString('sk-SK') }}</small>
|
|
</div>
|
|
|
|
<div v-if="['subtask'].includes(event.type)" class="d-flex align-center">
|
|
<v-icon icon="mdi-skull-outline" size="small" />
|
|
<small v-if="props.event?.subtask.deadline" class="ml-1">{{ deadline }}</small>
|
|
<v-tooltip v-else text="Deadline z Mastertasku" location="bottom">
|
|
<template v-slot:activator="{ props }">
|
|
<small class="cursor-pointer ml-1" v-if="!props.event?.subtask?.deadline" v-bind="props">{{ deadline }}*</small>
|
|
</template>
|
|
</v-tooltip>
|
|
</div>
|
|
|
|
<div v-if="['office365'].includes(event.type)" class="d-flex align-center mt-1">
|
|
<v-icon icon="mdi-pin-outline" size="small" />
|
|
<small v-if="props.event?.subtask.office365_location" :style="{ color: eventColor.color }" class="ml-1">{{ props.event?.subtask.office365_location }}</small>
|
|
<v-tooltip v-else text="Miesto" location="bottom">
|
|
<template v-slot:activator="{ props }">
|
|
<small class="cursor-pointer ml-1" :style="{ color: eventColor.color }" v-if="!props.event?.subtask?.office365_location" v-bind="props">{{ office365_location }}*</small>
|
|
</template>
|
|
</v-tooltip>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="event__office-footer" v-if="isOfficeEvent">
|
|
<img :src="office365" alt="" />
|
|
</div>
|
|
|
|
<div class="event__footer d-flex">
|
|
<template v-if="isOfficeEvent">
|
|
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
|
|
</template>
|
|
|
|
<template v-else-if="event.type == 'adhoc'">
|
|
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
|
|
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('delete-blocker', props.event)"><img :src="bin" alt="" /></v-btn>
|
|
</template>
|
|
|
|
<template v-else-if="props.event.type == 'subtask'">
|
|
<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event.subtask?.is_finished }" @click.stop="emits('complete-task', props.event)"><img :src="checkmarkDouble" alt="" /></v-btn>
|
|
<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event._timeblock_is_finished }" @click.stop="emits('toggle-timeblock-is-finished', props.event)"><img :src="checkmark" alt="" /></v-btn>
|
|
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
|
|
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { bin, checkmarkDouble, checkmark, eye, pencil, office365 } from '@/plugins/app/_img'
|
|
import { computed, ComputedRef, defineProps, defineEmits, getCurrentInstance } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
event: any
|
|
}>()
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'edit-blocker', event: any): void,
|
|
(e: 'delete-blocker', event: any): void,
|
|
(e: 'complete-task', event: any): void,
|
|
(e: 'toggle-timeblock-is-finished', event: any): void,
|
|
(e: 'edit-task', event: any): void,
|
|
(e: 'delete-timeblock-in-task', event: any): void
|
|
}>()
|
|
|
|
const deadline: ComputedRef<string | undefined> = computed(() => {
|
|
if (!props.event.subtask)
|
|
return undefined
|
|
|
|
if (props.event.subtask.deadline)
|
|
return props.event.subtask.deadline
|
|
|
|
return props.event.subtask.master_task_deadline
|
|
})
|
|
|
|
const eventLength: ComputedRef<number> = computed(() => props.event.end.getTime() - props.event.start.getTime())
|
|
|
|
const eventColor: ComputedRef<{ color: string, backgroundColor: string }> = computed(() => {
|
|
if (props.event.type === 'office365_blocker' || props.event.type === 'office365') {
|
|
return {
|
|
color: '#ffffff',
|
|
backgroundColor: '#326cb8'
|
|
}
|
|
} else if (props.event._timeblock_is_finished || props.event.subtask?.is_finished) {
|
|
return {
|
|
color: '#000000',
|
|
backgroundColor: '#dedfe0'
|
|
}
|
|
}
|
|
|
|
return {
|
|
color: '#000000',
|
|
backgroundColor: props.event.color || props.event.subtask?.color
|
|
}
|
|
})
|
|
|
|
const subtaskCssClass: ComputedRef<string> = computed(() => {
|
|
const classes = []
|
|
if (eventLength.value <= 9000000) classes.push('short-event')
|
|
if (eventLength.value <= 5400000) classes.push('mini-event')
|
|
if (eventLength.value <= 3600000) classes.push('micro-event')
|
|
if (!props.event?.blocker?.approved && props.event?.isBlocker) classes.push('not-approved')
|
|
return classes.join(' ')
|
|
})
|
|
|
|
const isOfficeEvent: ComputedRef<boolean> = computed(() => {
|
|
return props.event.type === 'office365'
|
|
})
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.text-inherit
|
|
color: inherit !important
|
|
|
|
.event
|
|
height: 100%
|
|
|
|
&__office-footer
|
|
padding: 5px 15px
|
|
|
|
img
|
|
height: 19px
|
|
user-select: none
|
|
|
|
.custom-event-body
|
|
padding: 20px 10px
|
|
width: 100%
|
|
|
|
&__footer
|
|
flex-flow: row wrap
|
|
justify-content: center
|
|
alight-items: center
|
|
padding-top: 15px
|
|
border-top: 1px solid rgba(33, 33, 33, 0.08)
|
|
|
|
&__button
|
|
box-shadow: none !important
|
|
margin-bottom: 8px
|
|
padding: 9px !important
|
|
min-height: fit-content
|
|
height: fit-content
|
|
min-width: fit-content
|
|
width: fit-content
|
|
|
|
&.completed
|
|
background: #06dece
|
|
|
|
img
|
|
width: 18px
|
|
</style>
|