From 761c32ef5e55cc3ce19ab35cdbb2126dccad2fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Kalu=C5=BEa?= Date: Mon, 19 Dec 2022 22:26:31 +0100 Subject: [PATCH] [timeline] overlapovanie taskov s rovnakou dlzkou, zaciatkom a koncom casu --- app/public/mock/v1/overview/tasks.GET.json | 28 +++++++++---------- app/src/plugins/app@vendor/vue-cal/cell.vue | 2 +- app/src/plugins/app@vendor/vue-cal/event.vue | 17 ++++++++++- .../plugins/app@vendor/vue-cal/utils/event.js | 19 +++++++++++-- 4 files changed, 48 insertions(+), 18 deletions(-) diff --git a/app/public/mock/v1/overview/tasks.GET.json b/app/public/mock/v1/overview/tasks.GET.json index c9d8393..e918620 100644 --- a/app/public/mock/v1/overview/tasks.GET.json +++ b/app/public/mock/v1/overview/tasks.GET.json @@ -39,8 +39,8 @@ { "id": 1, "task_id": 1, - "starts_at": "2022-12-12T08:01:00+00:00", - "ends_at": "2022-12-12T09:00:00+00:00", + "starts_at": "2022-12-19T08:01:00+00:00", + "ends_at": "2022-12-19T09:00:00+00:00", "title": "Task 1", "project_code": "CO-2201", "master_task_color": "#E9FFE6" @@ -49,8 +49,8 @@ { "id": 2, "task_id": 2, - "starts_at": "2022-12-12T08:30:00+00:00", - "ends_at": "2022-12-12T09:00:00+00:00", + "starts_at": "2022-12-19T08:30:00+00:00", + "ends_at": "2022-12-19T09:00:00+00:00", "title": "Kratky 30min Lorem ipsum dolor sit amet, consectetur adipiscing e", "project_code": "CO-2201", "master_task_color": "#f27e57" @@ -59,8 +59,8 @@ { "id": 3, "task_id": 3, - "starts_at": "2022-12-12T10:30:00+00:00", - "ends_at": "2022-12-12T10:45:00+00:00", + "starts_at": "2022-12-19T10:30:00+00:00", + "ends_at": "2022-12-19T10:45:00+00:00", "title": "Kratky 15min", "project_code": "CO-2201", "master_task_color": "#57e0f2" @@ -69,8 +69,8 @@ { "id": 4, "task_id": 4, - "starts_at": "2022-12-12T08:00:00+00:00", - "ends_at": "2022-12-12T10:00:00+00:00", + "starts_at": "2022-12-19T08:00:00+00:00", + "ends_at": "2022-12-19T10:00:00+00:00", "title": "Task 2", "project_code": "CO-2201", "master_task_color": "#FDE1FF" @@ -79,8 +79,8 @@ { "id": 5, "task_id": 5, - "starts_at": "2022-12-13T07:00:00+00:00", - "ends_at": "2022-12-13T11:00:00+00:00", + "starts_at": "2022-12-20T09:00:00+00:00", + "ends_at": "2022-12-20T12:00:00+00:00", "title": "Task 5", "is_blocker": true, "master_task_color": null @@ -89,8 +89,8 @@ { "id": 6, "task_id": 6, - "starts_at": "2022-12-13T09:00:00+00:00", - "ends_at": "2022-12-13T12:00:00+00:00", + "starts_at": "2022-12-20T09:00:00+00:00", + "ends_at": "2022-12-20T12:00:00+00:00", "title": "Task 6", "project_code": "CO-2201", "master_task_color": "#E9FFE6" @@ -99,8 +99,8 @@ { "id": 7, "task_id": 7, - "starts_at": "2022-12-14T12:00:00+00:00", - "ends_at": "2022-12-14T16:00:00+00:00", + "starts_at": "2022-12-21T12:00:00+00:00", + "ends_at": "2022-12-21T16:00:00+00:00", "title": "Task 7", "project_code": "CO-2201", "master_task_color": "#E7DBF8" diff --git a/app/src/plugins/app@vendor/vue-cal/cell.vue b/app/src/plugins/app@vendor/vue-cal/cell.vue index 2a09a87..1e2b90c 100644 --- a/app/src/plugins/app@vendor/vue-cal/cell.vue +++ b/app/src/plugins/app@vendor/vue-cal/cell.vue @@ -48,7 +48,7 @@ transition-group.vuecal__cell( :event="event" :all-day="allDay" :cell-events="splitsCount ? split.events : events" - :overlaps="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || []).overlaps" + :cellOverlaps="((splitsCount ? split.overlaps[event._eid] : cellOverlaps[event._eid]) || [])" :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 fadd2e7..9e856f1 100644 --- a/app/src/plugins/app@vendor/vue-cal/event.vue +++ b/app/src/plugins/app@vendor/vue-cal/event.vue @@ -40,7 +40,7 @@ export default { cellFormattedDate: { type: String, default: "" }, event: { type: Object, default: () => ({}) }, cellEvents: { type: Array, default: () => [] }, - overlaps: { type: Array, default: () => [] }, + cellOverlaps: { 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,6 +225,14 @@ export default { }, computed: { + overlaps() { + return this.cellOverlaps.overlaps + }, + + sameOverlaps() { + return this.cellOverlaps.sameOverlaps + }, + eventDimensions() { const { startTimeMinutes, endTimeMinutes } = this.segment || this.event; @@ -260,11 +268,18 @@ export default { return {}; // let width = 100 / Math.min(this.overlaps.length + 1, this.overlapsStreak) // let left = (100 - ((this.overlaps.length + 1) * 10 )) * this.eventPosition + let width = 100 - this.eventPosition * 10; let left = (10 * this.eventPosition) / 2; let zIdnex = (this.eventPosition + 1) * 10; let background = this.event.master_task_color; + if (Array.isArray(this.cellOverlaps.sameOverlaps) && this.cellOverlaps.sameOverlaps.length) { + width = 50 + left = 50 * this.eventPosition + zIdnex = 10 + } + if (this.vuecal.minEventWidth && width < this.vuecal.minEventWidth) { width = this.vuecal.minEventWidth; left = diff --git a/app/src/plugins/app@vendor/vue-cal/utils/event.js b/app/src/plugins/app@vendor/vue-cal/utils/event.js index f09b3eb..0a75f3f 100644 --- a/app/src/plugins/app@vendor/vue-cal/utils/event.js +++ b/app/src/plugins/app@vendor/vue-cal/utils/event.js @@ -324,13 +324,14 @@ export default class EventUtils { // The array is smaller and smaller as we loop. _comparisonArray.shift() - if (!_cellOverlaps[e._eid]) _cellOverlaps[e._eid] = { overlaps: [], start: e.start, position: 0 } + if (!_cellOverlaps[e._eid]) _cellOverlaps[e._eid] = { overlaps: [], start: e.start, position: 0, sameOverlaps: [] } _cellOverlaps[e._eid].position = 0 _comparisonArray.forEach(e2 => { - if (!_cellOverlaps[e2._eid]) _cellOverlaps[e2._eid] = { overlaps: [], start: e2.start, position: 0 } + if (!_cellOverlaps[e2._eid]) _cellOverlaps[e2._eid] = { overlaps: [], start: e2.start, position: 0, sameOverlaps: [] } const eventIsInRange = this.eventInRange(e2, e.start, e.end) + const eventSameOverlap = this.eventSameRange(e2, e) const eventsInSameTimeStep = options.overlapsPerTimeStep ? ud.datesInSameTimeStep(e.start, e2.start, options.timeStep) : 1 // Add to the overlaps array if overlapping. if (!e.background && !e.allDay && !e2.background && !e2.allDay && eventIsInRange && eventsInSameTimeStep) { @@ -340,6 +341,14 @@ export default class EventUtils { _cellOverlaps[e2._eid].overlaps.push(e._eid) _cellOverlaps[e2._eid].overlaps = [...new Set(_cellOverlaps[e2._eid].overlaps)] // Dedupe, most performant way. _cellOverlaps[e2._eid].position++ + + if (eventSameOverlap) { + _cellOverlaps[e._eid].sameOverlaps.push(e2._eid) + _cellOverlaps[e._eid].sameOverlaps = [...new Set(_cellOverlaps[e._eid].sameOverlaps)] // Dedupe, most performant way. + + _cellOverlaps[e2._eid].sameOverlaps.push(e._eid) + _cellOverlaps[e2._eid].sameOverlaps = [...new Set(_cellOverlaps[e2._eid].sameOverlaps)] // Dedupe, most performant way. + } } // Remove from the overlaps array if not overlapping or if 1 of the 2 events is background or all-day long. else { @@ -425,4 +434,10 @@ export default class EventUtils { const endTimestamp = event.end.getTime() return startTimestamp < end.getTime() && endTimestamp > start.getTime() } + + eventSameRange(event1, event2) { + const isSameStart = event1.start.getTime() == event2.start.getTime() + const isSameEnd = event1.end.getTime() == event2.end.getTime() + return isSameStart && isSameEnd + } }