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

[Complete task modal] Added complete task modal

Browse Source
This commit is contained in:
Matej Glasnák committed 2022-12-13 00:07:20 +01:00
1 parent 1d1f1a1d14
commit a3beddf1e9
5 files changed
+123 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue
+25 -13
View File
@@ -13,11 +13,12 @@
:unscheduledTime="calData.unscheduled_times"
:overlaps-per-time-step="false"
:showTimeInCells="false"
:time-cell-height="100"
:time-cell-height="70"
:min-cell-width="300"
@ready="onReady()"
@view-change="weekChanged"
@event-drop="eventMoved"
@event-focus="eventFocused"
>
<template v-slot:weekday-heading="{ heading }">
<div class="w-100 h-100 d-flex flex-column">
@@ -48,9 +49,9 @@
<template v-slot:event="{ event }">
<div class="event-content-wrapper w-100 h-100 d-flex flex-column justify-space-between">
<div>
<small v-if="event.project_code && (event.end.getTime() - event.start.getTime() >= 7200000) && !event.is_blocker" class="project-code">{{ event.project_code }}</small>
<small v-if="(event.project_code && (event.end.getTime() - event.start.getTime() >= 7200000) && !event.is_blocker)" class="project-code">{{ event.project_code }}</small>
<h3>{{ event.title }}</h3>
<div v-if="event.end.getTime() - event.start.getTime() >= 7200000" class="d-flex align-center event-details">
<div v-if="(event.end.getTime() - event.start.getTime() >= 7200000) || focusedEventId == event.task_id" class="d-flex align-center event-details">
<div class="event-initials d-flex justify-center align-center">
<small>{{ getUserInitials(event) }}</small>
</div>
@@ -58,19 +59,30 @@
</div>
</div>
<div class="event-footer d-flex" v-if="event.end.getTime() - event.start.getTime() >= 3600000">
<v-btn rounded class="event-footer-button me-2" @click="completeTask(event.id)"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
<v-btn rounded class="event-footer-button me-2" @click="editTask(event.id)"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
<v-btn rounded class="event-footer-button me-2" @click="deleteTask(event.id)"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
<div class="event-footer d-flex" v-if="(event.end.getTime() - event.start.getTime() >= 3600000) || focusedEventId == event.task_id">
<v-btn rounded class="event-footer-button me-2" @click="this.showCompleteModal = {task: event}"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
<v-btn rounded class="event-footer-button me-2" @click="editTask(event.id)" :style="{opacity: 0.3}"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
<v-btn rounded class="event-footer-button me-2" @click="this.showDeleteModal = {task: event}"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
</div>
</div>
</template>
</Vue-cal>
<Z-complete-task-modal v-if="showCompleteModal" :visible="showCompleteModal ? true : false" :task="showCompleteModal.task" @close="showCompleteModal = null" />
<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @close="showDeleteModal = null" />
</div>
</template>
<script>
import ZCompleteTaskModal from '@/plugins/tm@modal/task/z-complete-task-modal.vue'
import ZDeleteTaskModal from '@/plugins/tm@modal/task/z-delete-task-modal.vue'
export default {
components: {
ZCompleteTaskModal,
ZDeleteTaskModal
},
props: {
calData: {
type: Object,
@@ -99,6 +111,9 @@ export default {
create: false
}
},
focusedEventId: null,
showCompleteModal: null,
showDeleteModal: null
}
},
@@ -158,16 +173,12 @@ export default {
}
},
completeTask(id) {
console.log('complete', id)
},
editTask(id) {
console.log('edit', id)
},
deleteTask(id) {
console.log('delete', id)
eventFocused(event) {
this.focusedEventId = event.task_id
}
}
}
@@ -313,6 +324,7 @@ export default {
// &:hover,
&:focus
z-index: 100 !important
min-height: 200px !important
&.event-blocker
background: #B00020 !important