[task overview] blocker

app/public/mock/v1/overview/tasks.GET.json

@@ -43,8 +43,7 @@
 				"ends_at": "2022-12-06T09:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
-				"master_task_color": "#121212",
+				"master_task_color": "#E9FFE6"
-				"class": "red"
 			},
 
 			{
@@ -54,8 +53,7 @@
 				"ends_at": "2022-12-06T10:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
-				"master_task_color": "#121212",
+				"master_task_color": "#FDE1FF"
-				"class": "green"
 			},
 
 			{
@@ -65,8 +63,7 @@
 				"ends_at": "2022-12-06T11:00:00+00:00",
 				"title": "title",
 				"is_blocker": true,
-				"master_task_color": null,
+				"master_task_color": null
-				"class": "blue"
 			},
 
 			{
@@ -76,8 +73,7 @@
 				"ends_at": "2022-12-07T12:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
-				"master_task_color": "#121212",
+				"master_task_color": "#E9FFE6"
-				"class": "yellow"
 			},
 
 			{
@@ -87,8 +83,7 @@
 				"ends_at": "2022-12-07T16:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
-				"master_task_color": "#121212",
+				"master_task_color": "#E7DBF8"
-				"class": "green"
 			}
 		]
 	},

app/src/plugins/app/_theme/global.sass

@@ -31,6 +31,3 @@ th
 
 .border-select .v-input__control
 	border: 1px solid #E5E5E5 !important
-
-.min-h-100
-	min-height: 100%

app/src/plugins/app@vendor/vue-cal/event.vue

@@ -224,6 +224,7 @@ export default {
       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 (this.vuecal.minEventWidth && width < this.vuecal.minEventWidth) {
         width = this.vuecal.minEventWidth
@@ -233,6 +234,7 @@ export default {
       const { top, height } = this.eventDimensions
 
       return {
+        "background": background,
         "z-index": `${zIdnex}`,
         top: `${top}px`,
         height: `${height}px`,
@@ -247,6 +249,7 @@ export default {
 
       return {
         [this.event.class]: !!this.event.class,
+        'event-blocker': this.event.is_blocker,
         'vuecal__event--focus': this.event.focused,
         'vuecal__event--resizing': this.event.resizing,
         'vuecal__event--background': this.event.background,

app/src/plugins/app@vendor/vue-cal/weekdays-headings.vue

@@ -34,10 +34,6 @@ export default {
     unscheduledTime: { type: Array, default: [] }
   },
 
-  // created() {
-  //   console.log(this.weekDays)
-  // },
-
   methods: {
     selectCell (date, DOMEvent) {
       if (date.getTime() !== this.view.selectedDate.getTime()) {
@@ -86,8 +82,6 @@ export default {
           } : {})
         }
       })
-
-      console.log(headings)
       return headings
     },
     cellWidth () {

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

@@ -48,9 +48,9 @@
 			<template v-slot:event="{ event }">
 				<div class="event-content-wrapper w-100 h-100 d-flex flex-column justify-space-between">
 					<div>
-						<small v-if="event.project_code && (event.end.getTime() - event.start.getTime() >= 7200000)" class="project-code">{{ event.project_code }}</small>
+						<small v-if="event.project_code && (event.end.getTime() - event.start.getTime() >= 7200000) && !event.is_blocker" class="project-code">{{ event.project_code }}</small>
 						<h3>{{ event.title }}</h3>
-						<div v-if="event.end.getTime() - event.start.getTime() >= 7200000" class="d-flex align-center">
+						<div v-if="event.end.getTime() - event.start.getTime() >= 7200000" class="d-flex align-center event-details">
 							<div class="event-initials d-flex justify-center align-center">
 								<small>{{ getUserInitials(event) }}</small>
 							</div>
@@ -125,8 +125,6 @@ export default {
 
 		correctTimecolumnMargin() {
 			const heightOfDayHeader = document.getElementsByClassName('vuecal__heading')[0].clientHeight
-			console.log(heightOfDayHeader)
-			console.log(document.getElementsByClassName('vuecal__time-column')[0].style)
 			document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
 		},
 
@@ -310,15 +308,18 @@ export default {
 				&:focus
 					z-index: 100 !important
 
-				&.red
+				&.event-blocker
-					background: #FFC9C9 !important
+					background: #B00020 !important
 
-				&.green
+					h3,
-					background: #E9FFE5 !important
+					.event-details *
+						color: white !important
+
+					.event-details .event-initials
+						border: 1px solid white
+
+					.event-footer
+						border-top: 1px solid rgba(255, 255, 255, 0.19)
 
-				&.blue
-					background: #DADEF8 !important
 
-				&.yellow
-					background: #F6ECD3 !important
 </style>

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

@@ -69,8 +69,6 @@ export default {
 				time.surname = this.timelineData.surname
 			})
 
-			console.log(this.timelineData.unscheduled_times)
-
 			// format working hours
 			this.config.startHour = Number(this.timelineData.work_hours_from.split(':')[0]) - 1
 			this.config.endHour = Number(this.timelineData.work_hours_to.split(':')[0]) + 1