JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-21 14:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(timeline): streamline event display and improve layout consistency across components

Browse Source
This commit is contained in:
Matej Glasnák committed 2025-06-23 01:25:59 +02:00
1 parent b24fefc8d4
commit 1df98087dd
4 files changed
+84 -74
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
+54 -58
View File
@@ -24,58 +24,54 @@
</template> </template>
</div> </div>
<div class="event__footer-wrapper" :style="{ backgroundColor: eventColor.backgroundColor }"> <div class="d-flex align-center event-details event-initials-wrapper">
<div class="event__footer-wrapper__top"> <div class="event-initials d-flex justify-center align-center" :style="{ borderColor: eventColor.color }">
<div class="d-flex align-center event-details event-initials-wrapper"> <small class="text-inherit">{{ props.event.initials }}</small>
<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 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.prevent="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="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.prevent="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
</template>
</div> </div>
<small class="event-initials-date text-inherit">{{ props.event.date?.toLocaleDateString('sk-SK') }}</small>
</div> </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 class="event__office-footer" v-if="isOfficeEvent">
<img :src="office365" alt="" />
</div>
<div class="event__footer d-flex" :style="{ backgroundColor: eventColor.backgroundColor }">
<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.prevent="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="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.prevent="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
</template>
</div> </div>
</div> </div>
</template> </template>
@@ -160,15 +156,15 @@ const isOfficeEvent: ComputedRef<boolean> = computed(() => {
padding: 20px 10px padding: 20px 10px
width: 100% width: 100%
&__footer-wrapper // &__footer-wrapper
position: absolute // position: absolute
bottom: 0 // bottom: 0
left: 0 // left: 0
right: 0 // right: 0
border-top: 1px solid rgba(33, 33, 33, 0.08) // border-top: 1px solid rgba(33, 33, 33, 0.08)
&__top // &__top
padding: 10px 10px 0 10px // padding: 10px 10px 0 10px
&__footer &__footer
flex-flow: row wrap flex-flow: row wrap
app/src/plugins/tm@dashboard/_components/z-timeline.vue
+27 -16
View File
@@ -24,7 +24,10 @@
@event-focus="eventFocused" @event-focus="eventFocused"
> >
<template v-slot:split-label="{ split }"> <template v-slot:split-label="{ split }">
<div class="w-[120px] h-100 d-flex flex-column"> <div
class="h-100 d-flex flex-column"
style="width: 100%; margin-right: 10px; margin-left: 10px"
>
<span v-if="split.date" class="d-flex align-center"> <span v-if="split.date" class="d-flex align-center">
<img <img
v-if="split.isHomeoffice" v-if="split.isHomeoffice"
@@ -52,14 +55,15 @@
class="unscheduled-time d-flex align-center text-left" class="unscheduled-time d-flex align-center text-left"
:class="{ 'vuecal__cell-split--weekend': split.isWeekend }" :class="{ 'vuecal__cell-split--weekend': split.isWeekend }"
> >
<div <div class="unscheduled-time-initials">
class="unscheduled-time-initials d-flex align-center justify-center"
>
<p>{{ split.initials }}</p> <p>{{ split.initials }}</p>
</div> </div>
<div class="text-wrap me-4"> <div class="text-wrap me-4">
<p class="mb-0 mt-0 unscheduled-time-name"> <p class="mb-0 mt-0 unscheduled-time-name">
{{ split.fullname }} {{ split.name }}
</p>
<p class="mb-0 mt-0 unscheduled-time-name">
{{ split.surname }}
</p> </p>
<h1 class="mb-0 mt-0">{{ split.unscheduledTime }} h</h1> <h1 class="mb-0 mt-0">{{ split.unscheduledTime }} h</h1>
<h1 class="mb-0 mt-0" style="font-weight: 400"> <h1 class="mb-0 mt-0" style="font-weight: 400">
@@ -454,12 +458,13 @@ export default {
width: calc( 100% - 20px ) width: calc( 100% - 20px )
.vuecal__cell-split .vuecal__cell-split
margin-right: 20px margin-right: 10px
margin-left: 10px
.day-split-header .day-split-header
height: fit-content height: fit-content
min-height: 100% min-height: 100%
padding-right: 20px // margin-left: 10px
.weekday-label .weekday-label
justify-content: start !important justify-content: start !important
@@ -477,6 +482,15 @@ export default {
border-radius: 24px border-radius: 24px
padding: 10px 10px padding: 10px 10px
margin-top: 10px margin-top: 10px
container-type: inline-size
width: 100%
@container (max-width: 120px)
.unscheduled-time-name
width: 60px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.text-wrap .text-wrap
width: min-content width: min-content
@@ -491,10 +505,14 @@ export default {
line-height: normal line-height: normal
.unscheduled-time-initials .unscheduled-time-initials
width: 30px display: flex
height: 30px align-items: center
justify-content: center
width: 30px !important
height: 30px !important
background: #6200EE background: #6200EE
border-radius: 50% border-radius: 50%
flex-shrink: 0
p p
font-weight: 400 font-weight: 400
@@ -548,17 +566,10 @@ export default {
&.vuecal__event--focus &.vuecal__event--focus
z-index: 100 !important z-index: 100 !important
// min-height: 350px !important
height: fit-content !important height: fit-content !important
width: 100% !important width: 100% !important
left: 0 !important left: 0 !important
.event__footer-wrapper
position: relative
&__top
padding: 10px 0 0 0
&:not(.vuecal__event--focus) &:not(.vuecal__event--focus)
&:has(.micro-event) .event__body &:has(.micro-event) .event__body
padding: 5px !important padding: 5px !important
app/src/plugins/tm@dashboard/tasks/tasks.vue
+2
View File
@@ -99,6 +99,8 @@ export default {
days.push({ days.push({
id: i + 1, id: i + 1,
name: this.filter.employee.name,
surname: this.filter.employee.surname,
fullname: `${this.filter.employee.name} ${this.filter.employee.surname}`, fullname: `${this.filter.employee.name} ${this.filter.employee.surname}`,
initials: this.filter.employee.name.charAt(0).toUpperCase() + this.filter.employee.surname.charAt(0).toUpperCase(), initials: this.filter.employee.name.charAt(0).toUpperCase() + this.filter.employee.surname.charAt(0).toUpperCase(),
unscheduledTime: (unscheduledTime / 60).toFixed(1), unscheduledTime: (unscheduledTime / 60).toFixed(1),
app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts
+1
View File
@@ -60,6 +60,7 @@ export default {
days.push({ days.push({
id: index + 1, id: index + 1,
name: employee.name, name: employee.name,
surname: employee.surname,
employee_id: employee.id, employee_id: employee.id,
date: this.filter.start, date: this.filter.start,
fullname: `${employee.name} ${employee.surname}`, fullname: `${employee.name} ${employee.surname}`,