Files
jandl-taskmanager-app/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
T
2024-01-25 14:50:59 +01:00

91 lines
2.5 KiB
Vue

<template>
<v-table>
<thead>
<tr>
<th class="text-left">Kód projektu</th>
<th class="text-left">Názov</th>
<th class="text-left">Deadline</th>
<th class="text-left">Trvanie</th>
<th class="text-left">Akcia</th>
</tr>
</thead>
<tbody>
<tr class="cursor-pointer" v-for="subtask in subtasks" :key="subtask.id" @click.stop="editTask(subtask, false)">
<td>{{ subtask.project_code }}</td>
<td>{{ subtask.title ?? subtask.master_task }}</td>
<td v-if="subtask?.deadline">{{ getDeadline(subtask) }}</td>
<v-tooltip text="Deadline z Mastertasku" location="end">
<template v-slot:activator="{ props }">
<td v-if="!subtask.deadline" v-bind="props">{{ getDeadline(subtask) }}*</td>
</template>
</v-tooltip>
<td>{{ subtask.spent_time }} h</td>
<td class="task-action">
<div class="d-flex justify-start">
<img class="pencil-icon" :src="require('@/plugins/app/_img/icons/eye.svg')" alt="pencil-icon" @click.stop="editTask(subtask, false)">
<!-- <img class="pencil-icon" :src="require('@/plugins/app/_img/icons/pencil.svg')" alt="pencil-icon" @click.stop="editTask(subtask, true)"> -->
<img class="trash-icon" :src="require('@/plugins/app/_img/icons/bin.svg')" alt="trash-icon" @click.stop="deleteTask(subtask)">
</div>
</td>
</tr>
</tbody>
</v-table>
</template>
<script>
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
props: {
subtasks: {
type: Array,
required: true
}
},
computed: {
...mapGetters('tm', ['mastertasks'])
},
methods: {
editTask(subtask, editMode) {
this.$events.emit('show-subtask-modal', {subtask, editMode})
},
deleteTask(subtask) {
this.$events.emit('show-delete-task-modal', {subtask})
},
getDeadline(subtask) {
// FIX: Subtask ma vzdy vracat aj subtask.master_task_deadline
if(subtask.deadline) return moment(subtask.deadline).format('DD.MM.yyyy')
else if(!this.mastertasks) return ''
const masterTask = this.mastertasks.find((mt) => mt.id === subtask.master_task_id)
return moment(masterTask).format('DD.MM.yyyy') ? moment(masterTask.deadline).format('DD.MM.yyyy') : ''
}
}
}
</script>
<style lang="sass" scoped>
v-table, th, td
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
@media screen and (max-width: 379px)
.task-action
div
display: flex
flex-direction: column
.pencil-icon, .trash-icon
border-radius: 50%
margin: 6px
padding: 6px
tbody
tr:hover
background: rgba(0,0,0,.1)
</style>