[search page]

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">
-					<td>{{ subtask.project_code }}</td>
+				<tr v-for="subtask in enrichedtasks" :key="subtask.id">
 					<td>{{ subtask.master_task }}</td>
-					<!-- <td>		
-						<p>{{ subtask.user.name + subtask.user.surname }}</p>				
-						<p class="employee-avatar d-flex justify-center align-center">
-							{{ subtask.user.name.charAt(0) }}
+					<td class="d-flex align-center">
+						<p class="employee-selected-avatar d-flex justify-center align-center">
+							{{ subtask._employeeInitials }}
 						</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 class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon">
-							<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-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 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)">
 						</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>