[tasks overview] praca s datami

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

@@ -1,72 +1,64 @@
 {
 	"data": {
-		"user": {
+		"id": 1,
-			"id": 1,
+		"name": "Matej",
-			"name": "Matej",
+		"surname": "Glasnak",
-			"surname": "Glasnak",
+		"work_hours_from": "08:00",
-			"work_hours_from": "08:00",
+		"work_hours_to": "19:00",
-			"work_hours_to": "16:00"
-		},
-
 		"unscheduled_time": 123123123,
+		"dates": [
+			{
+				"id": 1,
+				"task_id": 1,
+				"starts_at": "2022-11-28T09:00:00+00:00",
+				"ends_at": "2022-11-29T12:00:00+00:00",
+				"title": "title",
+				"project_code": "CO-2201",
+				"master_task_color": "#121212",
+				"class": "red"
+			},
 
-		"dates": {
+			{
-			"2022-11-13": [
+				"id": 2,
-				{
+				"task_id": 2,
-					"id": 1,
+				"starts_at": "2022-12-01T12:00:00+00:00",
-					"task_id": 1,
+				"ends_at": "2022-12-02T16:00:00+00:00",
-					"starts_at": "2022-11-28T09:00:00+00:00",
+				"title": "title",
-					"ends_at": "2022-11-29T12:00:00+00:00",
+				"project_code": "CO-2201",
-					"title": "title",
+				"master_task_color": "#121212",
-					"project_code": "CO-2201",
+				"style": "bakcground: red"
-					"master_task_color": "#121212",
+			},
-					"class": "red"
-				},
 
-				{
+			{
-					"id": 2,
+				"id": 4,
-					"task_id": 2,
+				"task_id": null,
-					"starts_at": "2022-12-01T12:00:00+00:00",
+				"starts_at": "2022-11-10T16:00:00+00:00",
-					"ends_at": "2022-12-02T16:00:00+00:00",
+				"ends_at": "2022-11-12T18:00:00+00:00",
-					"title": "title",
+				"title": "title",
-					"project_code": "CO-2201",
+				"is_blocker": true,
-					"master_task_color": "#121212",
+				"master_task_color": null
-					"style": "bakcground: red"
+			},
-				},
 
-				{
+			{
-					"id": 4,
+				"id": 5,
-					"task_id": null,
+				"task_id": 1,
-					"starts_at": "2022-11-10T16:00:00+00:00",
+				"starts_at": "2022-11-10T09:00:00+00:00",
-					"ends_at": "2022-11-12T18:00:00+00:00",
+				"ends_at": "2022-11-12T12:00:00+00:00",
-					"title": "title",
+				"title": "title",
-					"is_blocker": true,
+				"project_code": "CO-2201",
-					"master_task_color": null
+				"master_task_color": "#121212"
-				}
+			},
-			],
 
-			"2022-12-10": [
+			{
-				{
+				"id": 6,
-					"id": 5,
+				"task_id": 2,
-					"task_id": 1,
+				"starts_at": "2022-11-10T12:00:00+00:00",
-					"starts_at": "2022-11-10T09:00:00+00:00",
+				"ends_at": "2022-11-12T16:00:00+00:00",
-					"ends_at": "2022-11-12T12:00:00+00:00",
+				"title": "title",
-					"title": "title",
+				"project_code": "CO-2201",
-					"project_code": "CO-2201",
+				"master_task_color": "#121212"
-					"master_task_color": "#121212"
+			}
-				},
+		]
-
-				{
-					"id": 6,
-					"task_id": 2,
-					"starts_at": "2022-11-10T12:00:00+00:00",
-					"ends_at": "2022-11-12T16:00:00+00:00",
-					"title": "title",
-					"project_code": "CO-2201",
-					"master_task_color": "#121212"
-				}
-			]
-		}
 	},
 	"status": 200
 }

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

@@ -4,7 +4,7 @@
   template(v-for="(heading, i) in headings" :key="i")
     .vuecal__flex.vuecal__heading(
       v-if="!heading.hide"
-      :class="{ today: heading.today, clickable: cellHeadingsClickable }"
+      :class="{ today: heading.today, clickable: cellHeadingsClickable, 'yesterday-cell' : new Date(heading.date).toLocaleDateString('sk-SK') == new Date(new Date().setDate(new Date().getDate() - 1)).toLocaleDateString('sk-SK') }"
       :style="weekdayCellStyles"
       @click="view.id === 'week' && selectCell(heading.date, $event)"
       @dblclick="view.id === 'week' && vuecal.dblclickToNavigate && switchToNarrowerView()")

app/src/plugins/tm@dashboard/tasks/_components/a-tasks-filter.vue

@@ -8,7 +8,7 @@
 			variant="outlined"
 		></v-select>
 		<div class="d-flex date-wrapper">
-			<v-btn class="subheader-icon-button prev" variant="outlined"><img :src="require('./_img/icon-prev.svg')" alt=""></v-btn>
+			<v-btn class="subheader-icon-button prev" variant="outlined" @click="prevWeek()"><img :src="require('./_img/icon-prev.svg')" alt=""></v-btn>
 			<v-text-field
 				class="subheader-input disabled"
 				label="Dátum"
@@ -16,7 +16,7 @@
 				variant="outlined"
 				append-inner-icon="mdi-calendar-blank-outline"
 			></v-text-field>
-			<v-btn class="subheader-icon-button next" variant="outlined" @click="getWeek(new Date())"><img :src="require('./_img/icon-next.svg')" alt=""></v-btn>
+			<v-btn class="subheader-icon-button next" variant="outlined" @click="nextWeek()"><img :src="require('./_img/icon-next.svg')" alt=""></v-btn>
 		</div>
 		<v-text-field
 			class="subheader-input"
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { startOfWeek, endOfWeek, addDays } from 'date-fns'
+import { startOfWeek, endOfWeek, addDays, subDays } from 'date-fns'
 
 export default {
 	data() {
@@ -36,21 +36,33 @@ export default {
 			employees: ['Foo', 'Bar', 'Fizz', 'Buzz'],
 			selectedDate: "13.11.2022 - 17.11.2022",
 			plannedTime: "35 h",
-			selectedEmployee: 'Bar'
+			selectedEmployee: 'Bar',
+			date: new Date()
 		}
 	},
 
 	created() {
-		this.getWeek(new Date())
+		this.getWeek()
 	},
 
 	methods: {
-		getWeek(date) {
+		getWeek() {
-			const firstDay = addDays(startOfWeek(date), 1)
+			this.firstDay = addDays(startOfWeek(this.date), 1)
-			const lastDay = addDays(endOfWeek(date), 1)
+			this.lastDay = addDays(endOfWeek(this.date), 1)
 			console.log()
 
-			this.$emit('weekChange', {firstDay: firstDay, lastDay: lastDay})
+			this.$emit('weekChange', {firstDay: this.firstDay, lastDay: this.lastDay})
+			this.selectedDate = String(this.firstDay.toLocaleDateString('sk-SK') + ' - ' + this.lastDay.toLocaleDateString('sk-SK'))
+		},
+
+		prevWeek() {
+			this.date = subDays(this.date, 7)
+			this.getWeek()
+		},
+
+		nextWeek() {
+			this.date = addDays(this.date, 7)
+			this.getWeek()
 		}
 	}
 }

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

@@ -4,21 +4,21 @@
 			:hide-view-selector="true"
 			:hide-title-bar="true"
 			:disable-views="['years', 'year', 'month', 'day']"
-			:time-from="8 * 60"
+			:time-from="calConfig.startHour * 60"
-			:time-to="24 * 60"
+			:time-to="calConfig.endHour * 60"
-			:selected-date="new Date()"
+			:selected-date="calConfig.date"
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
-			:events="formatedEvents"
+			:events="calData.dates"
 			:min-event-width="90"
 			:overlaps-per-time-step="true"
 			:time-cell-height="200"
 			:min-cell-width="300"
-			sticky-split-labels
 			@ready="scrollToYesterday"
+			@view-change="weekChanged"
 		>
 			<template v-slot:weekday-heading="{ heading }">
-				<span class="d-flex align-center" :class="{'yesterday-cell' : (getHeadingDate(heading.date) == 'Včera')}">
+				<span class="d-flex align-center">
 					<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2"> 
 					<p>{{ getHeadingDate(heading.date) }}</p>
 				</span>
@@ -49,15 +49,18 @@
 <script>
 export default {
 	props: {
-		events: {
+		calData: {
+			type: Object,
+			required: true
+		},
+		calConfig: {
+			type: Object,
 			required: true
 		}
 	},
 
 	data() {
 		return {
-			formatedEvents: [],
-
 			vueCalConfig: {
 				editing: {
 					title: false,
@@ -70,33 +73,21 @@ export default {
 		}
 	},
 
-	created() {
-		this.formatData()
-	},
-
 	methods: {
+		weekChanged() {
+			const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
+			scrollContainer.scrollLeft = 0
 
-		formatData() {
+			this.$nextTick(() => {
-			Object.keys(this.events.dates).forEach(date => {
+				this.scrollToYesterday()
-				console.log(this.events.dates[date])
-				this.formatedEvents.push(...[...this.events.dates[date]])
 			})
-
-			this.formatedEvents.forEach(event => {
-				// console.log(event.id)
-				event.start = new Date(event.starts_at)
-				event.end = new Date(event.ends_at)
-				delete event.starts_at
-				delete event.ends_at
-			})
-
-			// console.log(this.formatedEvents)
 		},
 
 		scrollToYesterday() {
-			if	(!document.getElementsByClassName('yesterday-cell')) return
+			if (!document.getElementsByClassName('yesterday-cell').length) return
+
 			const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
-			const yesterdayCell = document.getElementsByClassName('yesterday-cell')[0].parentElement.parentElement.parentElement
+			const yesterdayCell = document.getElementsByClassName('yesterday-cell')[0]
 			scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
 		},
 

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

@@ -2,7 +2,7 @@
 	<div>
 		<A-task-filter @weekChange="getWeekData" />
 		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
-			<Z-timeline :events="timelineData" />
+			<Z-timeline :calData="timelineData" :calConfig="config" />
 		</W-loadable>
 
 		<v-snackbar 
@@ -31,20 +31,40 @@ export default {
 			timelineData: null,
 			errorToast: false,
 			dataLoaded: false,
+			config: {
+				date: new Date(),
+				startHour: 8,
+				endHour: 16,
+			}
 		}
 	},
 
 	methods: {
 		async getWeekData(week) {
+			this.config.date = week.firstDay
 			try {
 				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
-				console.log(this.timelineData)
+				this.formatData()
 			} catch(error) {
 				this.timelineData = {}
 				console.error(error)
 				this.errorToast = true
 			}
-		}
+		},
+
+		formatData() {
+			// format events
+			this.timelineData.dates.forEach(event => {
+				event.start = new Date(event.starts_at)
+				event.end = new Date(event.ends_at)
+				delete event.starts_at
+				delete event.ends_at
+			})
+
+			// 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
+		},
 	}
 }
 </script>