From e2fe3cd89455ff9acac38cca395c43b013ce8d88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Kalu=C5=BEa?= Date: Wed, 21 Dec 2022 11:34:10 +0100 Subject: [PATCH] [timeline] overlapovanie rovnakych taskov, spravne zarovnavanie --- app/public/mock/v1/overview/tasks.GET.json | 10 +++++++ app/src/plugins/app@vendor/vue-cal/cell.vue | 1 + app/src/plugins/app@vendor/vue-cal/event.vue | 26 ++++++++++--------- .../tasks/_components/z-timeline.vue | 7 +++-- 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/app/public/mock/v1/overview/tasks.GET.json b/app/public/mock/v1/overview/tasks.GET.json index 7d4a1ca..22c8c75 100644 --- a/app/public/mock/v1/overview/tasks.GET.json +++ b/app/public/mock/v1/overview/tasks.GET.json @@ -154,6 +154,16 @@ "title": "Task 11", "project_code": "CO-2201", "master_task_color": "#57e0f2" + }, + + { + "id": 12, + "task_id": 9, + "starts_at": "2022-12-20T09:00:00+00:00", + "ends_at": "2022-12-20T12:00:00+00:00", + "title": "Task 12", + "project_code": "CO-2201", + "master_task_color": "#57e0f2" } ] }, diff --git a/app/src/plugins/app@vendor/vue-cal/cell.vue b/app/src/plugins/app@vendor/vue-cal/cell.vue index 1e2b90c..4b60faa 100644 --- a/app/src/plugins/app@vendor/vue-cal/cell.vue +++ b/app/src/plugins/app@vendor/vue-cal/cell.vue @@ -49,6 +49,7 @@ transition-group.vuecal__cell( :all-day="allDay" :cell-events="splitsCount ? split.events : events" :cellOverlaps="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || [])" + :allOverlaps="((splitsCount ? split.overlaps : cellOverlaps) || [])" :event-position="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || []).position" :overlaps-streak="splitsCount ? split.overlapsStreak : cellOverlapsStreak") template(#event="{ event, view }") diff --git a/app/src/plugins/app@vendor/vue-cal/event.vue b/app/src/plugins/app@vendor/vue-cal/event.vue index 9d62a0f..02bf705 100644 --- a/app/src/plugins/app@vendor/vue-cal/event.vue +++ b/app/src/plugins/app@vendor/vue-cal/event.vue @@ -41,6 +41,7 @@ export default { event: { type: Object, default: () => ({}) }, cellEvents: { type: Array, default: () => [] }, cellOverlaps: { type: Object, default: () => ({}) }, + allOverlaps: { type: Object, default: () => ({}) }, // If multiple simultaneous events, the events are placed from left to right from the // one starting first to the last. (See utils/event.js > checkCellOverlappingEvents) eventPosition: { type: Number, default: 0 }, @@ -225,14 +226,6 @@ export default { }, computed: { - overlaps() { - return this.cellOverlaps.overlaps - }, - - sameOverlaps() { - return this.cellOverlaps.sameOverlaps - }, - eventDimensions() { const { startTimeMinutes, endTimeMinutes } = this.segment || this.event; @@ -270,20 +263,29 @@ export default { // let left = (100 - ((this.overlaps.length + 1) * 10 )) * this.eventPosition let width = 100 - this.eventPosition * 10; - let left = (10 * this.eventPosition) / 2; + let left = 5 * this.eventPosition; let zIdnex = (this.eventPosition + 1) * 10; let background = this.event.master_task_color; if (Array.isArray(this.cellOverlaps.sameOverlaps) && this.cellOverlaps.sameOverlaps.length) { - width = 46 - left = 50 * this.eventPosition + const sameOverlapsLength = this.cellOverlaps.sameOverlaps.length + 1 + const parentNotSameOverlaps = this.cellOverlaps.overlaps.filter(x => { + if (!this.cellOverlaps.sameOverlaps.includes(x) && this.allOverlaps[this.event._eid].position > this.allOverlaps[x].position) + return x + }) + width = ((100 / sameOverlapsLength) - 5) + left = (100 / sameOverlapsLength * (this.eventPosition - parentNotSameOverlaps.length)) + (5 * (this.eventPosition - parentNotSameOverlaps.length) / sameOverlapsLength) + if (parentNotSameOverlaps.length) { + width = width - (parentNotSameOverlaps.length * (10 / sameOverlapsLength)) + left = left + (5 * parentNotSameOverlaps.length - ((10 * parentNotSameOverlaps.length / sameOverlapsLength) * (this.eventPosition - parentNotSameOverlaps.length))) + } zIdnex = 10 } if (this.vuecal.minEventWidth && width < this.vuecal.minEventWidth) { width = this.vuecal.minEventWidth; left = - ((100 - this.vuecal.minEventWidth) / this.overlaps.length) * + ((100 - this.vuecal.minEventWidth) / this.cellOverlaps.overlaps.length) * this.eventPosition; } diff --git a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue b/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue index 5b4a9a4..540a96f 100644 --- a/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue +++ b/app/src/plugins/tm@dashboard/tasks/_components/z-timeline.vue @@ -176,8 +176,9 @@ export default { }, taskClicked(task) { + console.log("task", task) if (task.end.getTime() - task.start.getTime() <= 3600000) { - console.log("task", task) + console.log("ShortTask") } }, @@ -310,11 +311,13 @@ export default { text-align: left background: rgba(248, 248, 248, 1) min-height: 40px - transition: min-height .4s, height .4s, box-shadow .4s + transition: min-height .4s, height .4s, box-shadow .4s, width .4s, left .4s &.vuecal__event--focus z-index: 100 !important min-height: 250px !important + width: 100% !important + left: 0 !important &:not(.vuecal__event--focus) &:has(.short-event)