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

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

@@ -5,17 +5,45 @@
 		"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,
 				"task_id": 1,
-				"starts_at": "2022-12-06T08:30:00+00:00",
+				"starts_at": "2022-12-06T08:01:00+00:00",
-				"ends_at": "2022-12-06T09:30:00+00:00",
+				"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"
 			},
 
 			{
@@ -25,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"
 			},
 
 			{
@@ -36,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"
 			},
 
 			{
@@ -47,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"
 			},
 
 			{
@@ -58,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

@@ -34,3 +34,4 @@ th
 
 input[type="time"]::-webkit-calendar-picker-indicator
 	display: none
+	border: 1px solid #E5E5E5 !important

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/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,7 +30,8 @@ export default {
   props: {
     transitionDirection: { type: String, default: 'right' },
     weekDays: { type: Array, default: () => [] },
-    switchToNarrowerView: { type: Function, default: () => {} }
+    switchToNarrowerView: { type: Function, default: () => {} },
+    unscheduledTime: { type: Array, default: [] }
   },
 
   methods: {
@@ -43,6 +44,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 +58,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 +70,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' ? {

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 }">
@@ -35,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" 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 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>
@@ -45,7 +58,7 @@
 						</div>
 					</div>
 
-					<div class="event-footer d-flex">
+					<div class="event-footer d-flex" v-if="event.end.getTime() - event.start.getTime() >= 3600000">
 						<v-btn rounded class="event-footer-button me-2" @click="completeTask(event.id)"><img :src="require('./_img/checkmark.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click="editTask(event.id)"><img :src="require('./_img/pencil.svg')" alt=""></v-btn>
 						<v-btn rounded class="event-footer-button me-2" @click="deleteTask(event.id)"><img :src="require('./_img/bin.svg')" alt=""></v-btn>
@@ -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,11 @@ export default {
 			scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
 		},
 
+		correctTimecolumnMargin() {
+			const heightOfDayHeader = document.getElementsByClassName('vuecal__heading')[0].clientHeight
+			document.getElementsByClassName('vuecal__time-column')[0].style.marginTop = `${heightOfDayHeader}px`
+		},
+
 		getHeadingDate(value) {
 			const date = new Date(value)
 
@@ -124,7 +147,9 @@ export default {
 		},
 
 		taskClicked(task) {
-			console.log("task", task)
+			if (task.end.getTime() - task.start.getTime() <= 3600000) {
+				console.log("task", task)
+			}
 		},
 
 		completeTask(id) {
@@ -176,6 +201,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
@@ -201,7 +253,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),
@@ -256,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

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