bloker-modal

app/src/plugins/app/_components/a-bloker-modal.vue

@@ -0,0 +1,175 @@
+<template>
+	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
+		<W-loadable :content="employees" class="h-100">
+			<v-card v-if="employees" height="100%" class="d-flex flex-column">
+				<div class="d-flex justify-space-between align-center modal-header">
+					<h1>Vytvoriť bloker</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="Názov blokeru"
+						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]._fullName"
+						>
+						</v-text-field>
+						<v-icon
+							class="remove-input"
+							@click.stop="removeInput(index)"
+							icon="mdi-close"
+							size="small"
+						></v-icon
+						>
+					</div>
+
+					<W-autocomplete :options="employeesOptions" class="modal-input" @option-selected="employeeSelected" />
+
+				</v-card-actions>
+
+				<v-btn class="z-btn" @click="createBloker()">VYTVORIŤ</v-btn>
+			</v-card>
+		</W-loadable>
+	</v-dialog>
+</template>
+
+<script>
+import WAutocomplete from './w-autocomplete.vue'
+
+export default {
+	components: {
+		WAutocomplete
+	},
+
+	props: [
+		'visible'
+	],
+
+	data() {
+		return {
+			selectedEmployee: "",
+			selectedEmployees: [],
+			employees: null,
+			menu: [],
+			foos: [
+				{ id: 1, date: new Date() },
+				{ id: 2, date: new Date() },
+			]	
+		}
+	},
+
+	async created() {
+		try {
+			this.employees = await this.$axios.get_auth_data('v1/employees')
+		} catch (error) {
+			console.log(error)
+		}
+	},
+
+	methods: {
+		removeInput(index) {
+			this.selectedEmployees.splice(index, 1)
+		},
+
+		employeeSelected(selectedOption) {
+			const employee 		= this.employees.find(empl => empl.id == selectedOption.key)
+			employee._fullName 	= `${employee.name} ${employee.surname}`
+
+			this.selectedEmployees.push(employee)
+		},
+
+		async createBloker() {
+			try{
+				await this.$axios.post_auth('v1/blockers')
+				this.$router.push({ name: 'Dashboard - Tasks' })
+				this.show = false
+			} catch (error) {
+				this.$toast.error(error.response.data.error)
+			}
+		}
+	},
+
+	computed: {
+		employeesOptions() {
+			const selectedEmployeesIds = this.selectedEmployees.map(
+				(employee) => employee.id
+			)
+			const employees = this.employees.filter(
+				(employee) => !selectedEmployeesIds.includes(employee.id)
+			)
+
+			return employees.map(employee => {
+				return {
+					key: employee.id,
+					value: `${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.employees.find(
+				(e) =>
+					e.name == selectedEmployee[0] &&
+					e.surname == selectedEmployee[1]
+			)
+
+			this.selectedEmployees.push(JSON.parse(JSON.stringify(employee)))
+		},
+	},
+}
+</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
+
+.z-btn
+	height: 50px
+	width: 100%
+	flex: 0 0 auto
+
+.remove-input
+	pointer-events: auto
+	opacity: 2
+	position: absolute
+	left: 92%
+	top: 25%
+
+.employee-position
+	position: relative
+</style>

app/src/plugins/app/_config/main.ts

@@ -68,7 +68,9 @@ const options: Options = {
 
 			'GET v1/employees': true,
 			'GET v1/search': true,
-			'POST v1/tasks': true
+			'POST v1/tasks': true,
+
+			'POST v1/blockers': true
 		}
 	}
 }

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

@@ -20,7 +20,7 @@
 						<v-list-item class="cursor-pointer hover-background">MASTER TASK</v-list-item>
 						<v-list-item class="cursor-pointer hover-background">SUB TASK</v-list-item>
 						<v-list-item class="cursor-pointer hover-background" @click="createTeamDialog = true">TÍM</v-list-item>
-						<v-list-item class="cursor-pointer hover-background">BLOKER</v-list-item>
+						<v-list-item class="cursor-pointer hover-background" @click="createBlokerDialog = true">BLOKER</v-list-item>
 					</v-list>
 				</v-menu>
 
@@ -50,22 +50,26 @@
 			</div>
 		</div>
 
+		<A-bloker-modal :visible="createBlokerDialog" @close="createBlokerDialog = false" />
 		<A-team-modal :visible="createTeamDialog" @close="createTeamDialog = false" />
 	</v-app-bar>
 </template>
 
 <script>
 import ATeamModal 	from '@/plugins/app/_components/a-team-modal.vue'
+import ABlokerModal from  '@/plugins/app/_components/a-bloker-modal.vue'
 
 export default {
 	components: {
-		ATeamModal
+		ATeamModal,
+		ABlokerModal
 	},
 
 	data() {
 		return {
 			user: null,
-			createTeamDialog: false
+			createTeamDialog: false,
+			createBlokerDialog: false
 		}
 	},