[team overview] setup

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>