[task overview] header

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

@@ -5,7 +5,36 @@
 		"surname": "Glasnak",
 		"work_hours_from": "08:00",
 		"work_hours_to": "19:00",
-		"unscheduled_time": 123123123,
+		"unscheduled_times": [
+			{
+				"id": 1,
+				"time": 10
+			},
+			{
+				"id": 1,
+				"time": 20
+			},
+			{
+				"id": 1,
+				"time": 30
+			},
+			{
+				"id": 1,
+				"time": 40
+			},
+			{
+				"id": 1,
+				"time": 50
+			},
+			{
+				"id": 1,
+				"time": 60
+			},
+			{
+				"id": 1,
+				"time": 70
+			}
+		],
 		"dates": [
 			{
 				"id": 1,

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

@@ -32,4 +32,5 @@ th
 .border-select .v-input__control
 	border: 1px solid #E5E5E5 !important
 
-	
+.min-h-100
+	min-height: 100%

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

@@ -46,7 +46,7 @@
                 </div>
               </div>
               <div class="vuecal__flex vuecal__cells vuecal__scrollable-body" :class="`${view.id}-view`" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :column="!!cellOrSplitMinWidth">
-                <weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
+                <weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''" :unscheduledTime="unscheduledTime">
                   <template #weekday-heading="{ heading, view }" v-if="$slots['weekday-heading']">
                     <slot name="weekday-heading" :heading="heading" :view="view"></slot>
                   </template>
@@ -185,6 +185,7 @@ export default {
     // This prevents drag creation by mistake when you want to navigate.
     dragToCreateThreshold: { type: Number, default: 15 },
     editableEvents: { type: [Boolean, Object], default: false },
+    unscheduledTime: { type: Array, default: [] },
     events: { type: Array, default: () => [] },
     eventsCountOnYearView: { type: Boolean, default: false },
     eventsOnMonthView: { type: [Boolean, String], default: false },

app/src/plugins/app@vendor/vue-cal/styles.scss

@@ -1,7 +1,7 @@
 $time-column-width: 3em;
 $week-numbers-width: 3em;
 $time-column-width-12: 4em; // twelve-hour clock shows am/pm.
-$weekdays-headings-height: 2.8em;
+$weekdays-headings-height: 4em;
 $weekdays-headings-height-with-splits: 3.4em;
 $splits-headers-height: 1.5em;
 

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

@@ -30,9 +30,14 @@ export default {
   props: {
     transitionDirection: { type: String, default: 'right' },
     weekDays: { type: Array, default: () => [] },
-    switchToNarrowerView: { type: Function, default: () => {} }
+    switchToNarrowerView: { type: Function, default: () => {} },
+    unscheduledTime: { type: Array, default: [] }
   },
 
+  // created() {
+  //   console.log(this.weekDays)
+  // },
+
   methods: {
     selectCell (date, DOMEvent) {
       if (date.getTime() !== this.view.selectedDate.getTime()) {
@@ -43,6 +48,9 @@ export default {
     cleanupHeading: heading => ({
       label: heading.full,
       date: heading.date,
+      unscheduledTime: heading.unscheduledTime,
+      name: heading.name,
+      initials: heading.initials,
       ...(heading.today ? { today: heading.today } : {})
     })
   },
@@ -54,6 +62,10 @@ export default {
       let todayFound = false
       const headings = this.weekDays.map((cell, i) => {
         const date = this.utils.date.addDays(this.view.startDate, this.vuecal.startWeekOnSunday ? i - 1 : i)
+        let unscheduledTime = this.unscheduledTime[i].time ? this.unscheduledTime[i].time : 0
+        unscheduledTime = Math.floor(unscheduledTime / 60) + "," + String(unscheduledTime % 60)[0]
+        const name = this.unscheduledTime[i].name + " " + this.unscheduledTime[i].surname
+        const initials = this.unscheduledTime[i].name.charAt(0).toUpperCase() + this.unscheduledTime[i].surname.charAt(0).toUpperCase()
 
         return {
           hide: cell.hide,
@@ -62,6 +74,9 @@ export default {
           // week days when does not fit on screen or with small/xsmall options.
           small: cell.short || cell.label.substr(0, 3),
           xsmall: cell.short || cell.label.substr(0, 1),
+          unscheduledTime: unscheduledTime,
+          name: name,
+          initials: initials,
 
           // Only for week view.
           ...(this.view.id === 'week' ? {
@@ -71,6 +86,8 @@ export default {
           } : {})
         }
       })
+
+      console.log(headings)
       return headings
     },
     cellWidth () {

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

@@ -10,19 +10,32 @@
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
 			:events="calData.dates"
+			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
 			:time-cell-height="200"
 			:min-cell-width="300"
-			@ready="scrollToYesterday"
+			@ready="onReady()"
 			@view-change="weekChanged"
 			@event-drop="eventMoved"
 		>
 			<template v-slot:weekday-heading="{ heading }">
-				<span class="d-flex align-center">
+				<div class="w-100 h-100 d-flex flex-column">
-					<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2"> 
+					<span class="d-flex align-center">
-					<p>{{ getHeadingDate(heading.date) }}</p>
+						<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2"> 
-				</span>
+						<p>{{ getHeadingDate(heading.date) }}</p>
+					</span>
+
+					<div class="unscheduled-time d-flex align-center text-left">
+						<div class="unscheduled-time-initials d-flex align-center justify-center me-4">
+							<p>{{heading.initials}}</p>
+						</div>
+						<div>
+							<p class="mb-0 mt-0 unscheduled-time-name">{{heading.name}}</p>
+							<h1 class="mb-0 mt-0">{{heading.unscheduledTime}} h</h1>
+						</div>
+					</div>
+				</div>
 			</template>
 
 			<template v-slot:time-cell="{ hours, minutes }">
@@ -97,6 +110,11 @@ export default {
 			this.$emit('eventMoved', e)
 		},
 
+		onReady() {
+			this.scrollToYesterday()
+			this.correctTimecolumnMargin()
+		},
+
 		scrollToYesterday() {
 			if (!document.getElementsByClassName('yesterday-cell').length) return
 
@@ -105,6 +123,13 @@ export default {
 			scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
 		},
 
+		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`
+		},
+
 		getHeadingDate(value) {
 			const date = new Date(value)
 
@@ -178,6 +203,33 @@ export default {
 			.vuecal__cell:before
 				border: none
 
+			.vuecal__heading
+				height: fit-content
+				min-height: 100%
+				padding-right: 20px
+
+				.unscheduled-time
+					background: rgba(0, 0, 0, 0.04)
+					border-radius: 24px
+					padding: 10px 15px
+					margin-top: 10px
+
+					.unscheduled-time-name
+						font-weight: 400
+						font-size: 15px
+
+					.unscheduled-time-initials
+						width: 50px
+						height: 50px
+						background: #6200EE
+						border-radius: 50%
+
+						p
+							font-weight: 400
+							font-size: 20px
+							color: white
+						
+
 			.vuecal__cells.week-view
 				border-left: 1px solid rgba(0, 0, 0, .1)
 				padding-left: 20px
@@ -203,7 +255,7 @@ export default {
 				flex-wrap: nowrap !important
 
 			.vuecal__cell
-				padding: 10px 10px 10px 0px 
+				padding: 10px 20px 10px 0px 
 
 			.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
 			.vuecal__cell--current:not(.vuecal__cell--today),

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

@@ -64,6 +64,13 @@ export default {
 				delete event.ends_at
 			})
 
+			this.timelineData.unscheduled_times.forEach(time => {
+				time.name = this.timelineData.name
+				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