mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-22 06:49:35 +00:00
[Task modal, subtask modal] BE
This commit is contained in:
Matej Glasnák committed
1 parent
37331335ce
commit
1024f73ab5
12 files changed
+477
-489
No files matched your search
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<v-row no-gutters class="align-center">
|
||||
<v-col cols="5">
|
||||
<v-sheet class="pa-2 ma-2">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon icon="mdi-drag-vertical" size="large"></v-icon>
|
||||
<p class="mx-3">Status</p>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<v-sheet class="ma-2">
|
||||
<p v-if="masterTask.is_finished" class="status-badge px-4 py-2 rounded-pill">Ukončený</p>
|
||||
<p v-if="!masterTask.is_finished" class="status-badge px-4 py-2 rounded-pill">Neukončený</p>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="align-center">
|
||||
<v-col cols="5">
|
||||
<v-sheet class="pa-2 ma-2">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon icon="mdi-calendar-week" size="large"></v-icon>
|
||||
<p class="mx-3">Deadline</p>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<v-sheet class="ma-2">
|
||||
<p :class="`${tmUtils.isAfter(masterTask.deadline) ? 'text-black' : 'text-red-darken-4'}`">{{ tmUtils.formatDateTime(masterTask.deadline) }}</p>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="5">
|
||||
<v-sheet class="pa-2 ma-2 pt-0">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon icon="mdi-account-multiple-outline" size="large"></v-icon>
|
||||
<p class="mx-3">Tím</p>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<v-sheet class="d-flex flex-wrap flex-column">
|
||||
<p class="task-badge px-4 py-2 rounded-pill flex-shrink-0">{{ masterTask.team?.name }}</p>
|
||||
<div class="d-flex align-center flex-shrink-0 mt-2 task-badge px-4 py-2 rounded-pill" v-for="(employee, index) in masterTask.employees" :key="employee.id">
|
||||
<p class="employee-selected-avatar d-flex justify-center align-center">
|
||||
{{ employee.name.charAt(0) + employee.surname.charAt(0) }}
|
||||
</p>
|
||||
<p class="ml-2" v-html="`${masterTask.employees[index].name} ${masterTask.employees[index].surname}`" />
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="align-center">
|
||||
<v-col cols="5">
|
||||
<v-sheet class="pa-2 ma-2">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon icon="mdi-clock-time-three-outline" size="large"></v-icon>
|
||||
<p class="mx-3">Naplánovaný čas</p>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<v-sheet class="ma-2">
|
||||
<p>{{ masterTask?.duration?.toFixed(2) }} h</p>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="align-center">
|
||||
<v-col cols="5">
|
||||
<v-sheet class="pa-2 ma-2">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon icon="mdi-timer-outline" size="large"></v-icon>
|
||||
<p class="mx-3">Odpracovaný čas</p>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<v-sheet class="ma-2">
|
||||
<p :class="masterTask.time_worked > masterTask.duration ? 'text-red-darken-4' : 'text-black'">{{ masterTask.time_worked?.toFixed(2) }} h</p>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="align-center border-bottom">
|
||||
<v-col cols="5">
|
||||
<v-sheet class="pa-2 ma-2">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon icon="mdi-clock-time-three-outline" size="large"></v-icon>
|
||||
<p class="mx-3">Zostávajúci čas</p>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
<v-col cols="7">
|
||||
<v-sheet class="ma-2">
|
||||
<p :class="masterTask.time_worked > masterTask.duration ? 'text-red-darken-4' : 'text-black'">{{ (masterTask.duration - masterTask.time_worked)?.toFixed(2) }} h</p>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="px-5 py-5 border-bottom">
|
||||
<p>Popis zadania</p>
|
||||
<section v-html="masterTask.description" class="description-detail px-2 py-2 w-100 rounded mt-2" />
|
||||
<p class="mt-5">Prílohy</p>
|
||||
<div class="w-100 d-flex align-center">
|
||||
<div v-for="(file, index) in masterTask.files" :key="file.id" class="d-flex align-center flex-wrap" :class="[index === 0 ? 'ml-0' : 'ml-2']">
|
||||
<v-chip class="mt-2">
|
||||
<p @click="downloadFile(index)" class="cursor-pointer">{{ file.name }}</p>
|
||||
<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmUtils from '@/plugins/tm@_utils/tm.utils'
|
||||
import * as FileSaver from 'file-saver'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
masterTask: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tmUtils
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async downloadFile(id) {
|
||||
try {
|
||||
const file = await this.$axios.get_auth_data(`v1/mastertasks/${this.masterTask.id}`, { responseType: 'arraybuffer' })
|
||||
FileSaver.saveAs(file.files[id].path, file.files[id].name)
|
||||
} catch(error) {
|
||||
this.$toast.error(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="sass" scoped>
|
||||
@media screen and (max-width: 522px)
|
||||
.files
|
||||
margin-top: 104px !important
|
||||
</style>
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user