[Search] Fixed search refresh after action

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

@@ -7,8 +7,9 @@
 					<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)">
+							<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="openEditMasterTaskModal(mastertask, true)">
+							<img class="pencil-icon ml-2" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="eye-icon" @click.stop="openEditMasterTaskModal(mastertask, false)">
+							<img class="trash-icon  ml-2" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteMasterTaskModal(mastertask)">
 						</div>
 					</td>
 				</tr>
@@ -36,8 +37,8 @@ export default {
 			this.$events.emit('show-delete-master-task-modal', { mastertask })
 		},
 
-		openEditMasterTaskModal(mastertask) {
-			this.$events.emit('show-mastertask-modal', { mastertask, editMode: false })
+		openEditMasterTaskModal(mastertask, editMode) {
+			this.$events.emit('show-mastertask-modal', { mastertask, editMode })
 		},
 	}
 }

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

@@ -15,8 +15,9 @@
 						<div class="d-flex justify-start">
 							<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 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="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)">
+							<img class="pencil-icon ml-2" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="openTaskModal(subtask, true)">
+							<img class="pencil-icon ml-2" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="eye-icon" @click.stop="openTaskModal(subtask, false)">
+							<img class="trash-icon  ml-2" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="openDeleteTaskModal(subtask)">
 						</div>
 					</td>
 				</tr>
@@ -61,8 +62,8 @@ export default {
 			this.$events.emit('show-delete-task-modal', { subtask })
 		},
 
-		openTaskModal(subtask) {
-			this.$events.emit('show-subtask-modal', { subtask, editMode: false })
+		openTaskModal(subtask, editMode) {
+			this.$events.emit('show-subtask-modal', { subtask, editMode })
 		},
 
 		async clickCompleteTask(subtask) {

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

@@ -1,9 +1,14 @@
 <template>
-	<form>
-		<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>
+	<div>
+		<p v-if="!this.searchResults" class="px-3 py-3">{{ this.search?.length ? $t('Searching...') : $t('Type something') }}</p>
+		<p v-else-if="this.searchResults.error" class="px-3">{{ this.searchResults.error }}</p>
+
+		<div v-else>
+			<A-search-result-mastertasks :mastertasks="searchResults.mastertasks"/>
+			<A-search-result-subtasks :subtasks="searchResults.subtasks" />
+			<A-search-result-team :teams="searchResults.teams" />
+		</div>
+	</div>
 </template>
 
 <script>
@@ -21,33 +26,52 @@ export default {
 
 	data() {
 		return {
-			searchResults: {},
+			searchResults: null,
 			search: ''
 		}
 	},
 
 	created() {
 		this.$events.on('onSearch', (search) => {
+			if (!search?.length)
+				return
+				
 			this.search = search
+			this.onSearch(search)
 		})
 	},
 
-	watch: {
-		search(newVal) {
-			this.updateSearchResults(newVal)
-		}
+	mounted() {
+		this.$events.on('on-subtask-edited', () => {
+			this.onSearch(this.search, false)
+		})
+
+		this.$events.on('on-subtask-deleted', () => {
+			this.onSearch(this.search, false)
+		})
+
+		this.$events.on('on-mastertask-edited', () => {
+			this.onSearch(this.search, false)
+		})
+
+		this.$events.on('on-mastertask-deleted', () => {
+			this.onSearch(this.search, false)
+		})
 	},
 	
 	methods: {
-		updateSearchResults: debounce(async function (search) {
+		onSearch: debounce(async function (search, reset = true) {
 			try {
+				if (reset)
+					this.searchResults = null
+
 				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)
+				this.searchResults = {error}
 			}
-		}, 500)
+		}, 300)
 	}
 }
 </script>