edit-team-modal + male zmeny

app/src/plugins/app/_components/a-create-team-modal.vue

@@ -42,7 +42,7 @@
 					> -->
 					<v-autocomplete
 						class="modal-input"
-						label="Vyhladat"
+						label="Vyhľadať"
 						variant="outlined"
 						:items="employeesOptions"
 						v-model="selectedEmployee"

app/src/plugins/app/_components/a-delete-team-modal.vue

@@ -46,7 +46,7 @@ export default {
 	computed: {
 		show: {
 			get() {
-				return this.visible;
+				return this.visible
 			},
 
 			set(value) {

app/src/plugins/app/_components/a-edit-team-modal.vue

@@ -0,0 +1,165 @@
+<template>
+	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
+		<!-- <W-loadable :content="employees" class="h-100"> -->
+			<v-card height="100%" class="d-flex flex-column">
+				<div class="d-flex justify-space-between align-center modal-header">
+					<h1>Editovať tím</h1>
+					<v-icon
+						@click.stop="show = false"
+						icon="mdi-close"
+						size="large"
+					></v-icon>
+				</div>
+
+				<v-card-actions class="d-flex flex-column modal-content">
+					<v-text-field
+						class="modal-input"
+						label='teams.name'
+						variant="outlined"
+					></v-text-field>
+
+					<div class="employee-position w-100" v-for="(employee, index) in selectedEmployees" :key="employee.id">
+						<v-text-field
+							class="modal-input"
+							disabled
+							label="Zamestanec"
+							variant="outlined"
+							v-model="selectedEmployees[index].surname"
+						>
+						</v-text-field>
+						<v-icon
+							class="remove-input"
+							@click="removeInput(index)"
+							icon="mdi-close"
+							size="small"
+							></v-icon
+						>
+					</div>
+					<v-autocomplete
+						class="modal-input"
+						label="Vyhľadať"
+						variant="outlined"
+						:items="employeesOptions"
+						v-model="selectedEmployee"
+					></v-autocomplete>
+
+				</v-card-actions>
+				
+				<v-btn class="create-btn" @click="editTeam()">ULOŽIŤ</v-btn>
+			</v-card>
+		<!-- </W-loadable> -->
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	props: [
+		'visible'
+	],
+
+	data() {
+		return {
+			// teams: null,
+			// selectedEmployee: "",
+			// selectedEmployees: [],
+			// currentEmployees: null,
+		}
+	},
+
+	// async created() {
+	// 	try {
+	// 		this.currentEmployees = await this.$axios.get_auth_data("v1/employees");
+	// 	} catch (error) {
+	// 		console.log(error)
+	// 	}
+	// },
+
+	methods: {
+		// removeInput(index) {
+		// 	this.selectedEmployees.splice(index, 1)
+		// },
+
+		// async editTeam(id) {
+		// 	try{
+		// 		this.teams = await this.$axios.get_auth_data(`v1/teams/${id}`)
+		// 		this.$router.push({ name: 'Overview - Teams' })
+		// 		this.show = false
+		// 	} catch (error) {
+		// 		this.$toast.error(error.response.data.error)
+		// 	}
+		// }
+	},
+
+	computed: {
+		// employeesOptions() {
+		// 	const selectedEmployeesIds = this.selectedEmployees.map(
+		// 		(employee) => employee.id
+		// 	);
+		// 	const currentEmployees = this.currentEmployees.filter(
+		// 		(employee) => !selectedEmployeesIds.includes(employee.id)
+		// 	);
+
+		// 	return currentEmployees.map(
+		// 		(employee) => `${employee.name} ${employee.surname}`
+		// 	);
+		// },
+
+		show: {
+			get() {
+				return this.visible;
+			},
+
+			set(value) {
+				if (!value) this.$emit('close')
+			},
+		},
+	},
+
+	// watch: {
+	// 	selectedEmployee() {
+	// 		const selectedEmployee = this.selectedEmployee.split(" ");
+
+	// 		const employee = this.currentEmployees.find(
+	// 			(e) =>
+	// 				e.name == selectedEmployee[0] &&
+	// 				e.surname == selectedEmployee[1]
+	// 		);
+
+	// 		this.currentEmployees.push(JSON.parse(JSON.stringify(employee)));
+	// 		// this.selectedEmployee = ''
+	// 	},
+	// },
+};
+</script>
+
+<style lang="sass" scoped>
+.modal-input
+	width: 100%
+	flex: 0 0 auto
+
+.modal-header
+	flex: 0 0 auto
+
+.modal-content
+	flex: 1 1 100%
+	margin: 10px 0
+	overflow-y: scroll
+
+.create-btn
+	height: 50px
+	width: 100%
+	flex: 0 0 auto
+	background: #7f39fb
+	border-radius: 4px
+	color: #fff
+
+.remove-input
+	pointer-events: auto
+	opacity: 2
+	position: absolute
+	left: 92%
+	top: 25%
+
+.employee-position
+	position: relative
+</style>

app/src/plugins/app/_config/router.ts

@@ -61,12 +61,13 @@ const routes: Array<RouteRecordRaw> = [
 					{
 						path: '/app/overview/unscheduled',
 						name: 'Overview - Unscheduled tasks',
-						component: () => import('@/plugins/tm@overview/tasks-ongoing/tasks-ongoing.vue')
+						component: () => import('@/plugins/tm@overview/tasks-unscheduled/tasks-unscheduled.vue')
+
 					},
 					{
 						path: '/app/overview/ongoing',
 						name: 'Overview - Ongoing tasks',
-						component: () => import('@/plugins/tm@overview/tasks-unscheduled/tasks-unscheduled.vue')
+						component: () => import('@/plugins/tm@overview/tasks-ongoing/tasks-ongoing.vue')
 					},
 					{
 						path: '/app/overview/teams',

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

@@ -8,14 +8,14 @@
 			<div class="d-flex justify-center align-center">
 				<div class="d-flex justify-center align-center pos-col">
 						<img
-							class="search-icon mx-3"
+							class="search-icon"
 							:src="
 								require('@/plugins/app/_layout/app/_img/search-icon.svg')
 							"
 							alt="search-icon"
 						/>
 						<input
-							class="search-input mx-2"
+							class="search-input"
 							type="text"
 							placeholder="Vyhľadávanie"
 						/>
@@ -37,7 +37,7 @@
 								</v-list-item>
 								<v-list-item class="dropdown-hover" @click.stop="dialog=true" >
 									TÍM
-								<A-team-modal :visible="dialog" @close="dialog=false" />
+								<A-create-team-modal :visible="dialog" @close="dialog=false" />
 								</v-list-item>
 								<v-list-item class="dropdown-hover">
 									BLOKER
@@ -56,27 +56,29 @@
 							<div class="text-center">
 								<v-menu open-on-hover>
 									<template v-slot:activator="{ props }">
-										<v-btn
-											class="text-transform"
-											v-if="user"
-											v-bind="props"
-										>
-											{{
-												`${user.user.name} ${user.user.surname}`
-											}}
-											<v-icon
-												class="pl-5"
-												icon="mdi-chevron-down"
-												size="x-small"
-											></v-icon>
-										</v-btn>
+										<div>
+											<v-btn
+												class="text-transform"
+												v-if="user"
+												v-bind="props"
+											>
+												{{
+													`${user.user.name} ${user.user.surname}`
+												}}
+												<v-icon
+													class="pl-5"
+													icon="mdi-chevron-down"
+													size="x-small"
+												></v-icon>
+											</v-btn>
+										</div>
 									</template>
 
 									<v-list class="text-center">
 										<v-list-item class="dropdown-hover">
 											Working hours
 										</v-list-item>
-										<v-list-item>
+										<v-list-item class="dropdown-hover">
 											<v-btn class="logout-btn"
 												>Odhlásiť sa</v-btn
 											>
@@ -92,11 +94,11 @@
 </template>
 
 <script>
-import ATeamModal from '../../../_components/a-team-modal.vue'
+import ACreateTeamModal from '../../../_components/a-create-team-modal.vue'
 
 export default {
 	components: {
-		ATeamModal
+		ACreateTeamModal
 	},
 
 	data() {
@@ -108,7 +110,7 @@ export default {
 
 	async created() {
 		try {
-			this.user = await this.$axios.get_auth_data("v1/auth/info");
+			this.user = await this.$axios.get_auth_data("v1/auth/info")
 		} catch (error) {
 			console.log(error)
 		}
@@ -134,6 +136,7 @@ export default {
 	background: #7f39fb
 	border-radius: 4px
 	color: #fff
+	margin-right: 30px
 
 .logout-btn
 	background: #7f39fb
@@ -145,6 +148,8 @@ export default {
 
 .search-input
 	outline: none
+	margin-left: 10px
+	margin-right: 5px
 
 .search-icon
 	border: 2px solid #e0e0e0
@@ -187,5 +192,4 @@ export default {
 
 	&:hover
 		background: #F2E7FE
-		font-weight: bolder
 </style>

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

@@ -1,12 +1,28 @@
 <template>
 	<ion-menu ref="menu" content-id="main-content">
 		<ion-content>
-			<img class="logo" :src="require('@/plugins/app/_layout/_img/jandl-logo.svg')" alt="jandl-logo" />
+			<img
+				class="logo"
+				:src="require('@/plugins/app/_layout/_img/jandl-logo.svg')"
+				alt="jandl-logo"
+			/>
 
 			<ion-list lines="none" id="labels-list">
-				<ion-item v-for="page in pages" :key="page.pageName" :class="{active: isActive(page.pageName)}"
-					@click="$router.push({name: page.pageName}); closeMenu()">
-					{{ page.title }}<span v-if="page.pageName == 'Overview - Unscheduled tasks'" class="mx-1 unfinished-tasks">13</span>
+				<ion-item
+					v-for="page in pages"
+					:key="page.pageName"
+					:class="{ active: isActive(page.pageName) }"
+					@click="
+						$router.push({ name: page.pageName });
+						closeMenu()
+					"
+				>
+					{{ page.title
+					}}<span
+						v-if="page.pageName == 'Overview - Unscheduled tasks'"
+						class="mx-1 unfinished-tasks"
+						>{{ unscheduledTasksLength }}</span
+					>
 				</ion-item>
 			</ion-list>
 		</ion-content>
@@ -17,39 +33,48 @@
 export default {
 	data() {
 		return {
-			pages: [{
-				title: 'Úlohy',
-				pageName: 'Dashboard - Tasks'
-			},
-			{
-				title: 'Tímove zobrazenie',
-				pageName: 'Dashboard - Teams'
-			},
-			{
-				title: 'Projektové zobrazenie',
-				pageName: 'Dashboard - Projects'
-			},
-			{
-				title: 'Nenaplánované úlohy',
-				pageName: 'Overview - Unscheduled tasks'
-			},
-			{
-				title: 'Ongoing tasky',
-				pageName: 'Overview - Ongoing tasks'
-			},
-			{
-				title: 'Tímy',
-				pageName: 'Overview - Teams'
-			}]
+			unscheduledTasksLength: null,
+			pages: [
+				{
+					title: "Úlohy",
+					pageName: "Dashboard - Tasks",
+				},
+				{
+					title: "Tímove zobrazenie",
+					pageName: "Dashboard - Teams",
+				},
+				{
+					title: "Projektové zobrazenie",
+					pageName: "Dashboard - Projects",
+				},
+				{
+					title: "Nenaplánované úlohy",
+					pageName: "Overview - Unscheduled tasks",
+				},
+				{
+					title: "Ongoing tasky",
+					pageName: "Overview - Ongoing tasks",
+				},
+				{
+					title: "Tímy",
+					pageName: "Overview - Teams",
+				},
+			],
 		}
 	},
 
 	created() {
-		this.eventBus.on('close-menu', () => this.closeMenu())
-		this.eventBus.on('toggle-menu', () => this.toggleMenu())
+		this.eventBus.on("close-menu", () => this.closeMenu())
+		this.eventBus.on("toggle-menu", () => this.toggleMenu())
+		this.unscheduledTasks()
 	},
 
 	methods: {
+		async unscheduledTasks() {
+			let x = await this.$axios.get_auth_data('v1/overview/unscheduled-tasks')
+			this.unscheduledTasksLength = x.length
+		},
+
 		isActive(pageName) {
 			return this.$route.name == pageName
 		},
@@ -60,9 +85,9 @@ export default {
 
 		toggleMenu() {
 			this.$refs.menu.$el.toggle()
-		}
+		},
 	},
-};
+}
 </script>
 
 <style lang="sass" scoped>
@@ -101,7 +126,8 @@ ion-item
 	color: #fff
 	background: #B00020
 	border-radius: 50%
-	padding: 0 4px
 	margin-bottom: 15px
-	width: fit-content
+	height: 25px
+	width: 25px
+	text-align: center
 </style>

app/src/plugins/tm@overview/teams/_components/a-teams-table.vue

@@ -18,7 +18,9 @@
 								require('@/plugins/tm@overview/_img/pencil-icon.svg')
 							"
 							alt="pencil-icon"
+							@click.stop="editTeam=true"
 						/>
+						<A-edit-team-modal :visible="editTeam" @close="editTeam=false" />
 						<img
 							class="trash-icon"
 							:src="
@@ -37,15 +39,18 @@
 
 <script>
 import ADeleteTeamModal from '../../../app/_components/a-delete-team-modal.vue'
+import AEditTeamModal from '../../../app/_components/a-edit-team-modal.vue'
 
 export default {
 	components: {
-		ADeleteTeamModal
+		ADeleteTeamModal,
+		AEditTeamModal
 	},
 
 	data() {
 		return {
-			dialog: false
+			dialog: false,
+			editTeam: false
 		}
 	},