mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
113 lines
2.8 KiB
Vue
113 lines
2.8 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 align-center">
|
|
<!-- TODO office365: Only for office365 events -->
|
|
<template v-if="true">
|
|
<img class="pencil-icon" :src="eye" alt="pencil-icon" @click.stop="editTask(subtask, false)">
|
|
<img class="office-icon" :src="office365" alt="office-icon" />
|
|
</template>
|
|
|
|
<template v-else>
|
|
<img class="pencil-icon" :src="eye" 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="bin" alt="trash-icon" @click.stop="deleteTask(subtask)">
|
|
</template>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
import { mapGetters } from 'vuex'
|
|
import { bin, eye, office365 } from '@/plugins/app/_img'
|
|
|
|
export default {
|
|
props: {
|
|
subtasks: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
bin,
|
|
eye,
|
|
office365
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters('tm', ['mastertasks'])
|
|
},
|
|
|
|
methods: {
|
|
editTask(subtask, editMode) {
|
|
this.$events.emit('show-subtask-modal', {subtask, editMode})
|
|
},
|
|
|
|
deleteTask(subtask) {
|
|
// TODO office365: Only for office365 events
|
|
this.$events.emit('show-unable-to-edit-office-task-modal', { mode: 'delete' })
|
|
// this.$events.emit('show-delete-task-modal', {subtask})
|
|
},
|
|
|
|
getDeadline(subtask) {
|
|
if (subtask?.deadline)
|
|
return moment(subtask.deadline).format('DD.MM.yyyy')
|
|
|
|
return moment(subtask.master_task_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))
|
|
|
|
.office-icon
|
|
height: 20px
|
|
margin-left: 12px
|
|
|
|
@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> |