[team overview] setup

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

@@ -35,12 +35,12 @@
 				"time": 70
 			}
 		],
-		"dates": [
+		"tasks": [
 			{
 				"id": 1,
 				"task_id": 1,
-				"starts_at": "2022-12-06T08:01:00+00:00",
-				"ends_at": "2022-12-06T09:00:00+00:00",
+				"starts_at": "2022-12-12T08:01:00+00:00",
+				"ends_at": "2022-12-12T09:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#E9FFE6"
@@ -49,8 +49,8 @@
 			{
 				"id": 2,
 				"task_id": 2,
-				"starts_at": "2022-12-06T08:00:00+00:00",
-				"ends_at": "2022-12-06T10:00:00+00:00",
+				"starts_at": "2022-12-12T08:00:00+00:00",
+				"ends_at": "2022-12-12T10:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#FDE1FF"
@@ -59,8 +59,8 @@
 			{
 				"id": 4,
 				"task_id": null,
-				"starts_at": "2022-12-06T07:00:00+00:00",
-				"ends_at": "2022-12-06T11:00:00+00:00",
+				"starts_at": "2022-12-13T07:00:00+00:00",
+				"ends_at": "2022-12-13T11:00:00+00:00",
 				"title": "title",
 				"is_blocker": true,
 				"master_task_color": null
@@ -69,8 +69,8 @@
 			{
 				"id": 5,
 				"task_id": 1,
-				"starts_at": "2022-12-07T09:00:00+00:00",
-				"ends_at": "2022-12-07T12:00:00+00:00",
+				"starts_at": "2022-12-13T09:00:00+00:00",
+				"ends_at": "2022-12-13T12:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#E9FFE6"
@@ -79,8 +79,8 @@
 			{
 				"id": 6,
 				"task_id": 2,
-				"starts_at": "2022-12-07T12:00:00+00:00",
-				"ends_at": "2022-12-07T16:00:00+00:00",
+				"starts_at": "2022-12-14T12:00:00+00:00",
+				"ends_at": "2022-12-14T16:00:00+00:00",
 				"title": "title",
 				"project_code": "CO-2201",
 				"master_task_color": "#E7DBF8"

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, 'yesterday-cell' : new Date(heading.date).toLocaleDateString('sk-SK') == new Date(new Date().setDate(new Date().getDate() - 1)).toLocaleDateString('sk-SK') }"
+      :class="{ today: heading.today, 'today-cell' : 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()")
@@ -58,10 +58,16 @@ 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()
+        let unscheduledTime = null
+        let name = null
+        let initials = null
+        if (this.unscheduledTime[i]?.time) {
+          unscheduledTime = Math.floor(this.unscheduledTime[i].time / 60) + "," + String(this.unscheduledTime[i].time % 60)[0]
+        }
+        if (this.unscheduledTime[i]?.name && this.unscheduledTime[i]?.name) {
+          name = this.unscheduledTime[i].name + " " + this.unscheduledTime[i].surname
+          initials = this.unscheduledTime[i].name.charAt(0).toUpperCase() + this.unscheduledTime[i].surname.charAt(0).toUpperCase()
+        }
 
         return {
           hide: cell.hide,

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

@@ -9,7 +9,7 @@
 			:selected-date="calConfig.date"
 			:onEventClick="taskClicked"
 			:editable-events="vueCalConfig.editing"
-			:events="calData.dates"
+			:events="calData.tasks"
 			:unscheduledTime="calData.unscheduled_times"
 			:overlaps-per-time-step="false"
 			:showTimeInCells="false"
@@ -26,7 +26,7 @@
 						<p>{{ getHeadingDate(heading.date) }}</p>
 					</span>
 
-					<div class="unscheduled-time d-flex align-center text-left">
+					<div v-if="heading.unscheduledTime && heading.initials" 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>
@@ -74,11 +74,17 @@ export default {
 	props: {
 		calData: {
 			type: Object,
-			required: true
+			required: true,
+			default() {
+				return {}
+			}
 		},
 		calConfig: {
 			type: Object,
-			required: true
+			required: true,
+			default() {
+				return {startHour: 8, endHour: 16, date: new Date()}
+			}
 		}
 	},
 
@@ -116,7 +122,7 @@ export default {
 		},
 
 		scrollToYesterday() {
-			if (!document.getElementsByClassName('yesterday-cell').length) return
+			if (!document.getElementsByClassName('yesterday-cell').length || !document.getElementsByClassName('today-cell').length) return
 
 			const scrollContainer = document.getElementsByClassName('vuecal__scrollable-body')[0]
 			const yesterdayCell = document.getElementsByClassName('yesterday-cell')[0]

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

@@ -55,7 +55,7 @@ export default {
 
 		formatData() {
 			// format events
-			this.timelineData.dates.forEach(event => {
+			this.timelineData.tasks.forEach(event => {
 				event.start = new Date(event.starts_at)
 				event.end = new Date(event.ends_at)
 				event.name = this.timelineData.name
@@ -85,7 +85,7 @@ export default {
 			// 	await this.$axios.post_auth_data(`v1/overview/tasks/${event.event.id}`, {start: event.event.start, end: event.event.end})
 			// } catch(error) {
 			// 	this.triggerToast("Nepodarilo sa presunut ulohu!")
-			// 	this.timelineData.dates.filter(e => {
+			// 	this.timelineData.tasks.filter(e => {
 			// 		if (e.id == event.event.id) {
 			// 			e.start = new Date(event.originalEvent.start)
 			// 			e.end = new Date(event.originalEvent.end)

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

@@ -0,0 +1,139 @@
+<template>
+	<v-row class="px-10 py-8 subheader">
+		<v-select
+			v-model="selectedEmployee"
+			class="subheader-input"
+			:items="employees"
+			label="Tím"
+			variant="outlined"
+		></v-select>
+		<div class="d-flex date-wrapper">
+			<v-btn class="subheader-icon-button prev" variant="outlined" @click="prevDay()"><img :src="require('../../tasks/_components/_img/icon-prev.svg')" alt=""></v-btn>
+			<v-text-field
+				class="subheader-input disabled"
+				label="Dátum"
+				v-model="selectedDate"
+				variant="outlined"
+				append-inner-icon="mdi-calendar-blank-outline"
+			></v-text-field>
+			<v-btn class="subheader-icon-button next" variant="outlined" @click="nextDay()"><img :src="require('../../tasks/_components/_img/icon-next.svg')" alt=""></v-btn>
+		</div>
+		<v-text-field
+			class="subheader-input"
+			label="Nenaplánované hodiny"
+			v-model="plannedTime"
+			variant="outlined"
+		></v-text-field>
+	</v-row>
+</template>
+
+<script>
+import { addDays, subDays } from 'date-fns'
+
+export default {
+	data() {
+		return {
+			employees: ['Foo', 'Bar', 'Fizz', 'Buzz'],
+			selectedDate: new Date(),
+			day: new Date(),
+			plannedTime: "35 h",
+			selectedEmployee: 'Bar',
+			date: new Date()
+		}
+	},
+
+	created() {
+		this.getDay()
+	},
+
+	methods: {
+		getDay() {
+			const today = new Date()
+			const yesterday = new Date((new Date()).setDate(today.getDate() - 1))
+			const tomorrow = new Date((new Date()).setDate(today.getDate() + 1))
+
+			if (today.toLocaleDateString('sk-SK') === this.day.toLocaleDateString('sk-SK')) this.selectedDate = "Dnes"
+			else if (yesterday.toLocaleDateString('sk-SK') === this.day.toLocaleDateString('sk-SK')) this.selectedDate = "Včera"
+			else if (tomorrow.toLocaleDateString('sk-SK') === this.day.toLocaleDateString('sk-SK')) this.selectedDate = "Zajtra"
+			else this.selectedDate = String(this.day.toLocaleDateString('sk-SK'))
+
+			this.$emit('dayChanged', this.day)
+		},
+
+		prevDay() {
+			this.day = subDays(this.day, 1)
+			this.getDay()
+		},
+
+		nextDay() {
+			this.day = addDays(this.day, 1)
+			this.getDay()
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.subheader
+	max-width: 100%
+	margin: 0
+	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
+	gap: 25px
+	flex-wrap: wrap
+
+.subheader-icon-button
+	border: 1px solid #ABABAB
+	height: 56px
+	width: 56px
+	min-width: auto !important
+	padding: 0
+	margin: 0
+
+	&.prev
+		margin-right: 10px
+
+	&.next
+		margin-left: 10px
+
+	&:deep(.v-btn__append)
+		margin: 0
+
+.subheader-input
+	max-width: 250px !important
+	min-width: 250px
+
+	&:deep(.v-input__details)
+		display: none
+
+	&.disabled
+		pointer-events: none !important
+
+
+.date-wrapper
+	flex: 0 1 385px
+
+@media (max-width: 1316px)
+	.date-wrapper
+		order: 3
+
+@media (max-width: 600px)
+	.subheader
+		gap: 15px
+		padding: 20px !important
+
+	.subheader-input
+		max-width: 100% !important
+		min-width: 100%
+
+	.date-wrapper
+		flex-wrap: wrap
+		gap: 10px
+		flex: 1 1 100%
+
+		.subheader-icon-button
+			order: 3
+			margin: 0
+			flex: 1 1 calc( 50% - 5px )
+			height: 40px
+
+</style>

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

@@ -1,9 +1,42 @@
 <template>
-	<div></div>
+	<div>
+		<A-team-filter @dayChanged="getDayData" />
+		<W-loadable :content="timelineData" class="w-loadable" empty-message="Nepodarilo sa nacitat data!">
+			<Z-timeline />
+		</W-loadable>
+
+		<v-snackbar 
+			v-model="errorToast" 
+			:timeout="2000" 
+			color="red"
+			:rounded="true"
+		>
+			{{ errorToastMessage }}
+		</v-snackbar>
+	</div>
 </template>
 
 <script>
-export default {
+import ATeamFilter from './_components/a-team-filter.vue'
+import ZTimeline from '../tasks/_components/z-timeline.vue'
 
+export default {
+	components: {
+		ATeamFilter,
+		ZTimeline,
+	},
+
+	data() {
+		return {
+			timelineData: {kokot: "kokot"}
+		}
+	}
 }
 </script>
+
+<style lang="sass" scoped>
+.w-loadable
+	text-align: center
+	padding-top: 20px
+	height: 100%
+</style>