[search page]

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

@@ -93,7 +93,13 @@ export default {
 		createBlocker() {
 			this.$events.emit('show-blocker-modal', {})
 		}
-	}
+	},
+
+	watch: {
+		'$route' (to, from) {
+			this.search = ''
+		}
+	},
 }
 </script>
 

app/src/plugins/lib@search/search/_components/a-search-result-mastertasks.vue

@@ -0,0 +1,61 @@
+<template>
+	<div v-if="Array.isArray(mastertasks) && mastertasks.length">
+		<h1 class="px-3 py-3">Mastertasks</h1>
+		<v-table>
+			<tbody>
+				<tr v-for="mastertask in mastertasks" :key="mastertask.id">
+					<td>{{ mastertask.name }}</td>
+					<td class="task-action">
+						<div class="d-flex justify-start">
+							<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="openEditMasterTaskModal(mastertask)">
+							<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteMasterTaskModal(mastertask)">
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</v-table>
+	</div>
+	<div v-else class="px-3 py-3">
+		<h1>Mastertasks</h1>
+		<p>No mastertasks match the search</p>
+	</div>
+</template>
+  
+<script>
+
+export default {
+	props: {
+		mastertasks: {
+			type: Array,
+			required: true
+		}
+	},
+
+	methods: {
+		openDeleteMasterTaskModal(mastertask) {
+			this.$events.emit('show-delete-master-task-modal', { mastertask })
+		},
+
+		openEditMasterTaskModal(mastertask) {
+			this.$events.emit('show-mastertask-modal', { mastertask, editMode: false })
+		},
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+v-table, th, td
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+.employee-avatar
+	background: #6200EE
+	color: #fff
+	border-radius: 50%
+	padding: 13px
+	font-size: 11.5px
+	height: 24px
+	width: 24px
+
+.task-action
+
+</style>

app/src/plugins/lib@search/search/_components/a-search-result-subtasks.vue

@@ -1,31 +1,36 @@
 <template>
-	<div>
+	<div v-if="Array.isArray(subtasks) && subtasks.length">
 		<h1 class="px-3 py-3">Tasks</h1>
 		<v-table>
 			<tbody>
-				<tr v-for="subtask in subtasks" :key="subtask.id">
+				<tr v-for="subtask in enrichedtasks" :key="subtask.id">
-					<td>{{ subtask.project_code }}</td>
 					<td>{{ subtask.master_task }}</td>
-					<!-- <td>		
+					<td class="d-flex align-center">
-						<p>{{ subtask.user.name + subtask.user.surname }}</p>				
+						<p class="employee-selected-avatar d-flex justify-center align-center">
-						<p class="employee-avatar d-flex justify-center align-center">
+							{{ subtask._employeeInitials }}
-							{{ subtask.user.name.charAt(0) }}
 						</p>
-					</td> -->
+						<p class="ml-2">{{ subtask._employeeFullName }}</p>
+					</td>
 					<td class="task-action">
 						<div class="d-flex justify-start">
-							<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon">
+							<img v-if="subtask.is_finished" class="pencil-icon is-finished" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)">
-							<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon">
+							<img v-if="!subtask.is_finished" class="pencil-icon" :src="require('@/plugins/app/_img/icons/checkmark.svg')" alt="checkmark-icon" @click.stop="clickCompleteTask(subtask)">
-							<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon">
+							<img class="pencil-icon ml-2" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="openTaskModal(subtask)">
+							<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteTaskModal(subtask)">
 						</div>
 					</td>
 				</tr>
 			</tbody>
 		</v-table>
 	</div>
+	<div v-else class="px-3 py-3">
+		<h1>Subtasks</h1>
+		<p>No subtasks match the search</p>
+	</div>
 </template>
   
 <script>
+import { mapGetters } from 'vuex'
 
 export default {
 	props: {
@@ -34,6 +39,36 @@ export default {
 			required: true
 		}
 	},
+
+	computed: {
+		...mapGetters('tm', ['enrichedEmployees']),
+
+		enrichedtasks() {
+			return this.subtasks.map(subtask => {
+				const employee = this.enrichedEmployees.find(employee => employee.id == subtask.employee_id)
+
+				return {
+					...subtask,
+					_employeeInitials: employee._initials,
+					_employeeFullName: employee._fullName
+				}
+			})
+		}
+	},
+
+	methods: {
+		openDeleteTaskModal(subtask) {
+			this.$events.emit('show-delete-task-modal', { subtask })
+		},
+
+		openTaskModal(subtask) {
+			this.$events.emit('show-subtask-modal', { subtask, editMode: false })
+		},
+
+		async clickCompleteTask(subtask) {
+			this.$events.emit('show-complete-task-modal', { subtask })
+		}
+	}
 }
 </script>
 

app/src/plugins/lib@search/search/_components/a-search-result-team.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div v-if="Array.isArray(teams) && teams.length">
 		<h1 class="px-3 py-3">Teams</h1>
 		<v-table>
 			<tbody>
@@ -15,6 +15,10 @@
 			</tbody>
 		</v-table>
 	</div>
+	<div v-else class="px-3 py-3">
+		<h1>Teams</h1>
+		<p>No teams match the search</p>
+	</div>
 </template>
   
 <script>
@@ -24,6 +28,16 @@ export default {
 			type: Array,
 			required: true
 		}
+	},
+
+	methods: {
+		editTeam(team) {
+			this.$events.emit('show-team-modal', {team})
+		},
+
+		deleteTeam(team) {
+			this.$events.emit('show-delete-team-modal', {team})
+		}
 	}
 }
 </script>

app/src/plugins/lib@search/search/search.vue

@@ -1,19 +1,22 @@
 <template>
 	<form>
-		<A-search-result-team v-if="searchResults?.teams" :teams="searchResults.teams" />
+		<A-search-result-mastertasks v-if="searchResults?.mastertasks" :mastertasks="searchResults.mastertasks"/>
 		<A-search-result-subtasks v-if="searchResults?.subtasks" :subtasks="searchResults.subtasks" />
+		<A-search-result-team v-if="searchResults?.teams" :teams="searchResults.teams" />
 	</form>
 </template>
 
 <script>
-import { debounce } 		from 'lodash-es'
+import { debounce } 				from 'lodash-es'
-import ASearchResultTeam 	from '@/plugins/lib@search/search/_components/a-search-result-team.vue'
+import ASearchResultTeam 			from '@/plugins/lib@search/search/_components/a-search-result-team.vue'
-import ASearchResultSubtasks from '@/plugins/lib@search/search/_components/a-search-result-subtasks.vue'
+import ASearchResultSubtasks 		from '@/plugins/lib@search/search/_components/a-search-result-subtasks.vue'
+import ASearchResultMastertasks 	from '@/plugins/lib@search/search/_components/a-search-result-mastertasks.vue'
 
 export default {
 	components: {
 		ASearchResultTeam,
-		ASearchResultSubtasks
+		ASearchResultSubtasks,
+		ASearchResultMastertasks
 	},
 
 	data() {
@@ -40,6 +43,7 @@ export default {
 			try {
 				const { mastertasks, subtasks, teams} = await this.$axios.get_auth(`v1/search?q=${search}`)
 				this.searchResults = {mastertasks: mastertasks.data, subtasks: subtasks.data, teams: teams.data}
+				console.log(this.searchResults)
 			} catch (error) {
 				this.$toast.error(error)
 			}

app/src/plugins/tm@modal/blocker/z-blocker-modal.vue

@@ -35,13 +35,13 @@
 </template>
 
 <script>
-import Datepicker from "@vuepic/vue-datepicker"
+import Datepicker 			from "@vuepic/vue-datepicker"
-import useVuelidate from "@vuelidate/core"
+import useVuelidate 		from "@vuelidate/core"
-import { required } from "@vuelidate/validators"
+import { required } 		from "@vuelidate/validators"
-import errorUtils from "@/plugins/lib@auth/_utils/error.utils"
+import errorUtils 			from "@/plugins/lib@auth/_utils/error.utils"
 import VuetifyFixFocusMixin from "@/plugins/tm@modal/_mixins/vuetify-fix-focus"
-import { mapGetters } from "vuex"
+import { mapGetters } 		from "vuex"
-import moment from "moment"
+import moment 				from "moment"
 // import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
 
 export default {