mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
[Blockers] Added blockers in tasks view
This commit is contained in:
Matej Glasnák committed
1 parent
04c42c2762
commit
6654c32da7
9 files changed
+260
-97
No files matched your search
@@ -57,30 +57,43 @@
|
||||
</template>
|
||||
|
||||
<template v-slot:event="{ event }">
|
||||
<!-- <div v-if="!event.nonWorking" @click.stop="editTask(event.id)" class="w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}"> -->
|
||||
<div v-if="!event.nonWorking" class="custom-event-body w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}" :style="{backgroundColor: event.subtask.color}">
|
||||
<div class="event-content">
|
||||
<small v-if="(event.subtask.project_code && !event.is_blocker)" class="project-code">{{ event.subtask.project_code }}</small>
|
||||
<h3>{{ event.subtask.master_task?.name || event.subtask.master_task }}</h3>
|
||||
<div v-if="event.type == 'non-working-hours'" class="custom-event-body non-working-event w-100 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">{{ event.title }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="custom-event-body w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLenght(event) <= 9000000, 'mini-event' : getEventLenght(event) <= 5400000, 'micro-event' : getEventLenght(event) <= 3600000}" :style="{backgroundColor: event.color || event.subtask.color}">
|
||||
<div class="event-content" :class="event.type || 'subtask'">
|
||||
<template v-if="event.type == 'blocker'">
|
||||
<h3>{{ event.blocker.name }}</h3>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<small v-if="event.subtask.project_code" class="project-code">{{ event.subtask.project_code }}</small>
|
||||
<h3>{{ event.subtask.master_task?.name || event.subtask.master_task }}</h3>
|
||||
</template>
|
||||
|
||||
<div class="d-flex align-center event-details event-initials-wrapper">
|
||||
<div class="event-initials d-flex justify-center align-center">
|
||||
<small>{{ event.initials }}</small>
|
||||
</div>
|
||||
<small class="event-initials-date">{{ event.start.toLocaleDateString('sk-SK') }}</small>
|
||||
<small class="event-initials-date">{{ event.date.toLocaleDateString('sk-SK') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-footer d-flex">
|
||||
<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.subtask.is_finished}" @click.stop="completeTask(event)"><img :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt=""></v-btn>
|
||||
<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event)"><img :src="require('@/plugins/app/_img/icons/eye.svg')" alt=""></v-btn>
|
||||
<v-btn rounded class="event-footer-button me-2" @click.stop="deleteTask(event)"><img :src="require('@/plugins/app/_img/icons/bin.svg')" alt=""></v-btn>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="event.type == 'blocker'">
|
||||
<v-btn rounded class="event-footer-button me-2" @click.stop="editBlocker(event)"><img :src="require('@/plugins/app/_img/icons/pencil.svg')" alt=""></v-btn>
|
||||
<v-btn rounded class="event-footer-button me-2" @click.stop="deleteBlocker(event)"><img :src="require('@/plugins/app/_img/icons/bin.svg')" alt=""></v-btn>
|
||||
</template>
|
||||
|
||||
<div v-else class="custom-event-body non-working-event w-100 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">{{ event.title }}</h3>
|
||||
<template v-else>
|
||||
<v-btn rounded class="event-footer-button me-2" :class="{'completed': event.subtask?.is_finished}" @click.stop="completeTask(event)"><img :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt=""></v-btn>
|
||||
<v-btn rounded class="event-footer-button me-2" @click.stop="editTask(event)"><img :src="require('@/plugins/app/_img/icons/eye.svg')" alt=""></v-btn>
|
||||
<v-btn rounded class="event-footer-button me-2" @click.stop="deleteTask(event)"><img :src="require('@/plugins/app/_img/icons/bin.svg')" alt=""></v-btn>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -196,7 +209,7 @@ export default {
|
||||
},
|
||||
|
||||
taskClicked(subtask) {
|
||||
if (subtask.nonWorking) return
|
||||
if (subtask.type == 'non-working-hours') return
|
||||
// console.log("task", task)
|
||||
if (subtask.end.getTime() - subtask.start.getTime() <= 3600000) {
|
||||
// console.log("ShortTask")
|
||||
@@ -212,13 +225,21 @@ export default {
|
||||
this.$events.emit('show-complete-task-modal', { subtask })
|
||||
},
|
||||
|
||||
editTask(subtask, editMode) {
|
||||
this.$events.emit('show-subtask-modal', {subtask, editMode})
|
||||
editTask({subtask}) {
|
||||
this.$events.emit('show-subtask-modal', {subtask})
|
||||
},
|
||||
|
||||
deleteTask(subtask) {
|
||||
deleteTask({ subtask }) {
|
||||
this.$events.emit('show-delete-task-modal', {subtask})
|
||||
}
|
||||
},
|
||||
|
||||
editBlocker({ blocker }) {
|
||||
this.$events.emit('show-blocker-modal', {blocker})
|
||||
},
|
||||
|
||||
deleteBlocker({ blocker }) {
|
||||
this.$events.emit('show-delete-blocker-modal', {blocker})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -363,6 +384,17 @@ export default {
|
||||
.custom-event-body
|
||||
padding: 20px 10px
|
||||
|
||||
.event-content
|
||||
&.blocker
|
||||
*
|
||||
color: #ffffff !important
|
||||
|
||||
.event-details .event-initials
|
||||
border: 1px solid white
|
||||
|
||||
.event-footer
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.19)
|
||||
|
||||
&:has(.completed)
|
||||
background: rgb(251, 251, 251) !important
|
||||
border: 1px solid #cccccc !important
|
||||
@@ -378,12 +410,11 @@ export default {
|
||||
left: 0 !important
|
||||
|
||||
&:not(.vuecal__event--focus)
|
||||
&:has(.short-event)
|
||||
padding: 10px !important
|
||||
|
||||
&:has(.micro-event)
|
||||
padding: 5px 10px !important
|
||||
&:has(.micro-event) .custom-event-body
|
||||
padding: 5px !important
|
||||
|
||||
&:has(.short-event) .custom-event-body:not(.micro-event)
|
||||
padding: 10px 5px !important
|
||||
.short-event
|
||||
.project-code
|
||||
display: none !important
|
||||
@@ -420,19 +451,6 @@ export default {
|
||||
.event-footer
|
||||
display: none !important
|
||||
|
||||
&.event-blocker
|
||||
background: #B00020 !important
|
||||
|
||||
h3,
|
||||
.event-details *
|
||||
color: white !important
|
||||
|
||||
.event-details .event-initials
|
||||
border: 1px solid white
|
||||
|
||||
.event-footer
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.19)
|
||||
|
||||
.project-code
|
||||
margin: 0 0 20px
|
||||
display: block
|
||||
|
||||
Reference in new issue
Block a user