Merge branch 'main' of https://bitbucket.org/studiotem/jandl-taskmanager-app

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"
 			}
 		]
 	},

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

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

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

@@ -176,8 +176,9 @@ export default {
 		},
 
 		taskClicked(task) {
-			if (task.end.getTime() - task.start.getTime() <= 3600000) {
 			console.log("task", task)
+			if (task.end.getTime() - task.start.getTime() <= 3600000) {
+				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)