[timeline] delete a complete task

app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue

@@ -66,7 +66,7 @@
 					</div>
 
 					<div class="event-footer d-flex">
-						<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" :class="{'completed': event.completed}" @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>
@@ -81,8 +81,8 @@
 			</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" />
+		<Z-complete-task-modal v-if="showCompleteModal" :visible="showCompleteModal ? true : false" :task="showCompleteModal.task" @completeTask="completeTask" @close="showCompleteModal = null" />
+		<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @deleteTask="deleteTask" @close="showDeleteModal = null" />
 	</div>
 </template>
 
@@ -146,10 +146,6 @@ export default {
 		weekChanged() {
 			const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
 			scrollContainer.scrollLeft = 0
-
-			this.$nextTick(() => {
-				this.scrollToYesterday()
-			})
 		},
 
 		async eventMoved(e) {
@@ -206,6 +202,14 @@ export default {
 			this.focusedEventId = event.task_id
 			// console.log(`Focused: ${event.task_id}`)
 		},
+
+		completeTask(id) {
+			this.$emit('completeTask', id)
+		},
+
+		deleteTask(id) {
+			this.$emit('deleteTask', id)
+		}
 	}
 }
 </script>
@@ -335,6 +339,9 @@ export default {
 					min-height: 40px
 					transition: min-height .4s, height .4s, box-shadow .4s, width .4s, left .4s
 
+					// &:has(.completed)
+					// 	filter: grayscale(.9) !important
+
 					&:has(.non-working-event)
 						background: repeating-linear-gradient(135deg, rgba(215, 215, 215, 1), rgba(215, 215, 215, 1) 1px, rgba(224, 224, 224, 1) 1px, rgba(224, 224, 224, 1) 20px)
 						border: 1px solid rgba(215, 215, 215, 1)
@@ -441,6 +448,9 @@ export default {
 							min-width: fit-content
 							width: fit-content
 
+							&.completed
+								background: #00B3A6
+
 							img
 								width: 18px
 </style>

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -3,7 +3,7 @@
 		<A-task-filter @weekChange="getWeekData" />
 
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
-			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" />
+			<Z-timeline :calData="timelineData" :calConfig="config" :splits="splitDays" @eventMoved="onEventMoved" @completeTask="completeTask" @deleteTask="deleteTask" />
 		</W-loadable>
 
 		<v-snackbar
@@ -144,6 +144,18 @@ export default {
 			// 		}
 			// 	})
 			// }
+		},
+
+		completeTask(id) {
+			this.timelineData.tasks.filter(task => {
+				if (task.id == id) {
+					task.completed = true
+				}
+			})
+		},
+		
+		deleteTask(id) {
+			this.timelineData.tasks.splice(this.timelineData.tasks.findIndex(item => item.id === id), 1)
 		}
 	}
 }