[task overview] nacitanie dat z json

app/package.json

@@ -17,6 +17,7 @@
 		"axios": "^1.1.3",
 		"axios-auth-refresh": "^3.3.4",
 		"core-js": "^3.8.3",
+		"date-fns": "^2.29.3",
 		"mitt": "^2.1.0",
 		"moment": "^2.29.4",
 		"node-polyfill-webpack-plugin": "^2.0.1",

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

@@ -11,47 +11,59 @@
 		"unscheduled_time": 123123123,
 
 		"dates": {
-			"2022-11-10": [
+			"2022-11-13": [
 				{
 					"id": 1,
-					"is_finished": false,
+					"task_id": 1,
-					"starts_at": "2022-11-10T09:00:00+00:00",
+					"starts_at": "2022-11-28T09:00:00+00:00",
-					"ends_at": "2022-11-12T12:00:00+00:00",
+					"ends_at": "2022-11-29T12:00:00+00:00",
-					"files": []
+					"title": "title",
+					"project_code": "CO-2201",
+					"master_task_color": "#121212",
+					"class": "red"
 				},
 
 				{
 					"id": 2,
-					"is_finished": false,
+					"task_id": 2,
-					"starts_at": "2022-11-10T12:00:00+00:00",
+					"starts_at": "2022-12-01T12:00:00+00:00",
-					"ends_at": "2022-11-12T16:00:00+00:00",
+					"ends_at": "2022-12-02T16:00:00+00:00",
-					"files": []
+					"title": "title",
+					"project_code": "CO-2201",
+					"master_task_color": "#121212",
+					"style": "bakcground: red"
 				},
 
 				{
 					"id": 4,
-					"is_finished": false,
+					"task_id": null,
 					"starts_at": "2022-11-10T16:00:00+00:00",
 					"ends_at": "2022-11-12T18:00:00+00:00",
-					"is_blocker": true
+					"title": "title",
+					"is_blocker": true,
+					"master_task_color": null
 				}
 			],
 
 			"2022-12-10": [
 				{
-					"id": 1,
+					"id": 5,
-					"is_finished": false,
+					"task_id": 1,
 					"starts_at": "2022-11-10T09:00:00+00:00",
 					"ends_at": "2022-11-12T12:00:00+00:00",
-					"files": []
+					"title": "title",
+					"project_code": "CO-2201",
+					"master_task_color": "#121212"
 				},
 
 				{
-					"id": 2,
+					"id": 6,
-					"is_finished": false,
+					"task_id": 2,
 					"starts_at": "2022-11-10T12:00:00+00:00",
 					"ends_at": "2022-11-12T16:00:00+00:00",
-					"files": []
+					"title": "title",
+					"project_code": "CO-2201",
+					"master_task_color": "#121212"
 				}
 			]
 		}

app/src/plugins/app/_layout/app/_components/a-header.vue

@@ -85,6 +85,7 @@ export default {
 	box-shadow: none !important
 	border-bottom: 1px solid rgba(0, 0, 0, 0.2)
 	padding: 25px 15px
+	flex: 0 0 auto
 
 	.menu-icon
 		display: none

app/src/plugins/app/_layout/app/app.layout.vue

@@ -27,10 +27,16 @@ export default {
 <style lang="sass" scoped>
 .main-content
 	overflow-y: scroll
+	flex: 1 1 100%
+
+	#main-content
+		height: fit-content
 
 .split-pane-right-side
 	width: 100vw
 	max-width: 100vw
+	display: flex
+	flex-direction: column 
 
 @media (min-width: 992px)
 	.split-pane-right-side

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

@@ -45,7 +45,7 @@
                   <slot name="week-number-cell" :week="getWeekNumber(i - 1)">{{ getWeekNumber(i - 1) }}</slot>
                 </div>
               </div>
-              <div class="vuecal__flex vuecal__cells" :class="`${view.id}-view`" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :column="!!cellOrSplitMinWidth">
+              <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` : ''">
                   <template #weekday-heading="{ heading, view }" v-if="$slots['weekday-heading']">
                     <slot name="weekday-heading" :heading="heading" :view="view"></slot>

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

@@ -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"><img :src="require('./_img/icon-next.svg')" alt=""></v-btn>
+			<v-btn class="subheader-icon-button next" variant="outlined" @click="getWeek(new Date())"><img :src="require('./_img/icon-next.svg')" alt=""></v-btn>
 		</div>
 		<v-text-field
 			class="subheader-input"
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { startOfWeek, endOfWeek, addDays } from 'date-fns'
+
 export default {
 	data() {
 		return {
@@ -37,6 +39,20 @@ export default {
 			selectedEmployee: 'Bar'
 		}
 	},
+
+	created() {
+		this.getWeek(new Date())
+	},
+
+	methods: {
+		getWeek(date) {
+			const firstDay = addDays(startOfWeek(date), 1)
+			const lastDay = addDays(endOfWeek(date), 1)
+			console.log()
+
+			this.$emit('weekChange', {firstDay: firstDay, lastDay: lastDay})
+		}
+	}
 }
 </script>
 
@@ -84,6 +100,10 @@ export default {
 		order: 3
 
 @media (max-width: 600px)
+	.subheader
+		gap: 15px
+		padding: 20px !important
+
 	.subheader-input
 		max-width: 100% !important
 		min-width: 100%
@@ -97,5 +117,6 @@ export default {
 			order: 3
 			margin: 0
 			flex: 1 1 calc( 50% - 5px )
+			height: 40px
 
 </style>

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

@@ -6,19 +6,19 @@
 			:disable-views="['years', 'year', 'month', 'day']"
 			:time-from="8 * 60"
 			:time-to="24 * 60"
-			:hide-weekends="true"
 			:selected-date="new Date()"
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
-			:events="events"
+			:events="formatedEvents"
 			:min-event-width="90"
 			:overlaps-per-time-step="true"
 			:time-cell-height="200"
 			:min-cell-width="300"
 			sticky-split-labels
+			@ready="scrollToYesterday"
 		>
 			<template v-slot:weekday-heading="{ heading }">
-				<span class="d-flex align-center">
+				<span class="d-flex align-center" :class="{'yesterday-cell' : (getHeadingDate(heading.date) == 'Včera')}">
 					<img v-if="getHeadingDate(heading.date) == 'Dnes'" :src="require('./_img/home-icon.svg')" class="mr-2"> 
 					<p>{{ getHeadingDate(heading.date) }}</p>
 				</span>
@@ -47,58 +47,16 @@
 </template>
  
 <script>
-// import VueCal from 'vue-cal'
-// import 'vue-cal/dist/vuecal.css'
-
 export default {
-	components: { 
+	props: {
-		// VueCal,
+		events: {
+			required: true
+		}
 	},
 
 	data() {
 		return {
-			events: [
+			formatedEvents: [],
-				{
-					start: '2022-11-28 8:00',
-					end: '2022-11-28 13:30',
-					title: 'Running Marathon',
-					content: '<i class="icon material-icons">directions_run</i>',
-					class: 'red',
-					id: 1
-				},
-				{
-					start: '2022-11-28 9:00',
-					end: '2022-11-28 11:00',
-					title: 'Drink water!',
-					content: '<i class="icon material-icons">local_drink</i>',
-					class: 'green',
-					id: 2
-				},
-				{
-					start: '2022-11-28 10:00',
-					end: '2022-11-28 12:00',
-					title: 'Trip to India',
-					content: '<i class="icon material-icons">flight</i>',
-					class: 'blue',
-					id: 3
-				},
-				{
-					start: '2022-11-28 13:30',
-					end: '2022-11-28 16:00',
-					title: 'Trip to India',
-					content: '<i class="icon material-icons">flight</i>',
-					class: 'blue',
-					id: 3
-				},
-				{
-					start: '2022-11-29 11:00',
-					end: '2022-11-29 13:00',
-					title: 'Trip to India',
-					content: '<i class="icon material-icons">flight</i>',
-					class: 'yellow',
-					id: 3
-				}
-			],
 
 			vueCalConfig: {
 				editing: {
@@ -109,11 +67,39 @@ export default {
 					create: false 
 				}
 			},
-
 		}
 	},
 
+	created() {
+		this.formatData()
+	},
+
 	methods: {
+
+		formatData() {
+			Object.keys(this.events.dates).forEach(date => {
+				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
+			const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
+			const yesterdayCell = document.getElementsByClassName('yesterday-cell')[0].parentElement.parentElement.parentElement
+			scrollContainer.scrollLeft = yesterdayCell.offsetLeft - scrollContainer.offsetLeft - 20
+		},
+
 		getHeadingDate(value) {
 			const date = new Date(value)
 
@@ -136,98 +122,88 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-	.calendar-wrapper
-		width: 100%
-		overflow-x: scroll
-		padding-top: 50px
-
 	.vuecal
-		transform: scale(1)
 		box-shadow: none !important
 
-	::v-deep
+	.calendar-wrapper
+		width: 100%
+		padding-top: 50px
 
-		.vuecal__cells
+		&:deep()
-			-ms-overflow-style: none
-			scrollbar-width: none
 
-			&::-webkit-scrollbar
+			.vuecal__cells
-				display: none
+				-ms-overflow-style: none
+				scrollbar-width: none
+				&::-webkit-scrollbar
+					display: none
 
-		.vuecal__body
+			.vuecal__body
-			max-height: 100%
+				-ms-overflow-style: none
-			overflow-y: scroll
+				scrollbar-width: none
-			position: relative !important
+				&::-webkit-scrollbar
-			-ms-overflow-style: none
+					display: none
-			scrollbar-width: none
 
-			&::-webkit-scrollbar
+			.weekday-label
-				display: none
+				justify-content: start !important 
+				font-size: 24px
+				font-weight: 700
 
-		.weekday-label
+			.vuecal__weekdays-headings,
-			justify-content: start !important 
+			.vuecal__cell:before
-			font-size: 24px
+				border: none
-			font-weight: 700
 
-		.vuecal__weekdays-headings,
+			.vuecal__cells.week-view
-		.vuecal__cell:before
+				border-left: 1px solid rgba(0, 0, 0, .1)
-			border: none
+				padding-left: 20px
 
-		.vuecal__cells.week-view
-			border-left: 1px solid rgba(0, 0, 0, .1)
-			padding-left: 20px
-
-		.vuecal__time-column
-			width: 150px
-			box-shadow: none !important
-		
-			.time-column-line
-				width: 40px
-				height: 0
-				border: 1px solid rgba(33, 33, 33, 0.08)
-				margin-left: 10px
-
-		@media (max-width: 450px) 
 			.vuecal__time-column
-				width: 70px
+				width: 150px
-
+				box-shadow: none !important
+			
 				.time-column-line
-					width: 10px
+					width: 40px
+					height: 0
+					border: 1px solid rgba(33, 33, 33, 0.08)
+					margin-left: 10px
 
-		.vuecal__flex
+			@media (max-width: 450px) 
-			flex-wrap: nowrap !important
+				.vuecal__time-column
+					width: 70px
 
-		.vuecal__cell
+					.time-column-line
-			padding: 10px 10px 10px 0px 
+						width: 10px
 
-		.vuecal__cell--today
+			.vuecal__flex
-			// background-color: rgba(0, 0, 0, .02) !important
+				flex-wrap: nowrap !important
-			background-color: white
 
-		.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
+			.vuecal__cell
-		.vuecal__cell--current:not(.vuecal__cell--today)
+				padding: 10px 10px 10px 0px 
-			background-color: white
 
-		.vuecal__event
+			.vuecal:not(.vuecal--day-view) .vuecal__cell--selected:not(.vuecal__cell--today) ,
-			border-radius: 16px
+			.vuecal__cell--current:not(.vuecal__cell--today),
-			padding: 20px 10px
+			.vuecal__cell--today
-			text-align: left
+				background-color: white
 
-			.vuecal__event-title
+			.vuecal__event
+				border-radius: 16px
+				padding: 20px 10px
 				text-align: left
 
-			&:hover
+				.vuecal__event-title
-				z-index: 10
+					text-align: left
 
-			&.red
+				&:hover
-				background: #FFC9C9 !important
+					z-index: 10
 
-			&.green
+				&.red
-				background: #E9FFE5 !important
+					background: #FFC9C9 !important
 
-			&.blue
+				&.green
-				background: #DADEF8 !important
+					background: #E9FFE5 !important
 
-			&.yellow
+				&.blue
-				background: #F6ECD3 !important
+					background: #DADEF8 !important
+
+				&.yellow
+					background: #F6ECD3 !important
 </style>

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

@@ -1,7 +1,18 @@
 <template>
 	<div>
-		<A-task-filter />
+		<A-task-filter @weekChange="getWeekData" />
-		<Z-timeline />
+		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
+			<Z-timeline :events="timelineData" />
+		</W-loadable>
+
+		<v-snackbar 
+			v-model="errorToast" 
+			:timeout="2000" 
+			color="white"
+			:rounded="true"
+		>
+			Nepodarilo sa nacitat data!
+		</v-snackbar>
 	</div>
 </template>
 
@@ -14,5 +25,33 @@ export default {
 		ATaskFilter,
 		ZTimeline,
 	},
+
+	data() {
+		return {
+			timelineData: null,
+			errorToast: false,
+			dataLoaded: false,
+		}
+	},
+
+	methods: {
+		async getWeekData(week) {
+			try {
+				this.timelineData = await this.$axios.get_auth_data('v1/overview/tasks')
+				console.log(this.timelineData)
+			} catch(error) {
+				this.timelineData = {}
+				console.error(error)
+				this.errorToast = true
+			}
+		}
+	}
 }
-</script>
+</script>
+
+<style lang="sass" scoped>
+.w-loadable
+	text-align: center
+	padding-top: 20px
+	height: 100%
+</style>