[timeline] overlapovanie taskov s rovnakou dlzkou, zaciatkom a koncom casu

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",
+				"starts_at": "2022-12-19T08:01:00+00:00",
-				"ends_at": "2022-12-12T09:00: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",
+				"starts_at": "2022-12-19T08:30:00+00:00",
-				"ends_at": "2022-12-12T09:00: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",
+				"starts_at": "2022-12-19T10:30:00+00:00",
-				"ends_at": "2022-12-12T10:45: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",
+				"starts_at": "2022-12-19T08:00:00+00:00",
-				"ends_at": "2022-12-12T10: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",
+				"starts_at": "2022-12-20T09:00:00+00:00",
-				"ends_at": "2022-12-13T11: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",
+				"starts_at": "2022-12-20T09:00:00+00:00",
-				"ends_at": "2022-12-13T12: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",
+				"starts_at": "2022-12-21T12:00:00+00:00",
-				"ends_at": "2022-12-14T16:00:00+00:00",
+				"ends_at": "2022-12-21T16:00:00+00:00",
 				"title": "Task 7",
 				"project_code": "CO-2201",
 				"master_task_color": "#E7DBF8"

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 }")

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 =

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
+  }
 }