[Refactoring] Architecture

app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue

@@ -0,0 +1,66 @@
+<template>
+	<v-table>
+		<thead>
+			<tr>
+				<th class="text-left">Kód projektu</th>
+				<th class="text-left">Názov</th>
+				<th class="text-left">Trvanie</th>
+				<th class="text-left">Akcia</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			<tr v-for="task in tasks" :key="task.id">
+				<td>{{ task.project_code }}</td>
+				<td>{{ task.title }}</td>
+				<td>{{ task.duration / 1000 / 60 / 60 }} h</td>
+				<td class="task-action">
+					<div class="d-flex justify-start">
+						<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon">
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon">
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</v-table>
+</template>
+
+<script>
+export default {
+	props: {
+		tasks: {
+			type: Array,
+			required: true
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.task-action
+	.trash-icon
+		height: 25px
+		background: rgba(0, 0, 0, 0.04)
+		margin-left: 12px
+		border-radius: 50%
+		cursor: pointer
+	.pencil-icon
+		height: 25px
+		background: rgba(0, 0, 0, 0.04)
+		border-radius: 50%
+		cursor: pointer
+
+v-table, th, td
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+
+@media screen and (max-width: 496px)
+	.task-action
+		div
+			display: flex
+			flex-direction: column
+
+			.pencil-icon, .trash-icon
+				border-radius: 50%
+				margin: 6px
+</style>