[Task modal, subtask modal] BE

app/src/plugins/tm@modal/master-task/_components/a-tasks-table.vue

@@ -0,0 +1,71 @@
+<template>
+	<v-table class="mt-7 mb-5">
+		<tbody class="px-5 py-5">
+			<tr v-for="task in enrichedtasks" :key="task.id">
+				<td class="w-25">{{ task.project_code }}</td>
+				<td class="d-flex align-center">
+					<p class="employee-selected-avatar d-flex justify-center align-center">
+						{{ task._employeeInitials }}
+					</p>
+					<p class="ml-2">{{ task._employeeFullName }}</p>
+				</td>
+				<td class="task-action">
+					<div class="d-flex justify-start">
+						<img class="pencil-icon" :src="require('@/plugins/tm@dashboard/_components/_img/checkmark.svg')" alt="checkmark-icon" :style="{opacity: 0.3}">
+						<img class="pencil-icon ml-2" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" @click.stop="openEditTaskModal(task)">
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="openDeleteTaskModal(task)">
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</v-table>
+</template>
+
+<script>
+export default {
+	props: {
+		tasks: {
+			type: Array,
+			required: true
+		},
+
+		employees: {
+			type: Array,
+			required: true
+		}
+	},
+
+	computed: {
+		enrichedtasks() {
+			return this.tasks.map(task => {
+				const employee = this.employees.find(employee => employee.id == task.employee_id)
+
+				return {
+					...task,
+					_employeeInitials: employee.name.charAt(0) + employee.surname.charAt(0),
+					_employeeFullName: `${employee.name} ${employee.surname}`
+				}
+			})
+		}
+	},
+
+	methods: {
+		openDeleteTaskModal(task) {
+			this.$events.emit('show-delete-task-modal', { task })
+		},
+
+		openEditTaskModal(task) {
+			this.$events.emit('show-task-modal', { task, editMode: false })
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+v-table, tbody
+	border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+	border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+td:not(:last-child)
+	border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+</style>