JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-21 14:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[tm@modals] Refactoring

Browse Source
This commit is contained in:
Matej Glasnák committed 2023-01-31 15:05:26 +01:00
1 parent 96954845a1
commit 0a038b7771
19 files changed
+302 -582
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
+78 -154
View File
@@ -5,7 +5,7 @@
<div class="d-flex justify-space-between align-center modal-header">
<h1>{{ masterTask.id ? 'Upraviť master task' : 'Vytvoriť master task' }}</h1>
<v-icon
@click.stop="close()"
@click.stop="closeModal()"
icon="mdi-close"
size="large"
></v-icon>
@@ -64,7 +64,7 @@
></v-text-field>
<v-select
v-model="selectedTeam"
v-model="teamSelect"
@focus="onInputFocus"
class="modal-input border-select"
label="Tím"
@@ -101,7 +101,17 @@
@option-selected="employeeSelected"
/>
<v-btn class="w-100 mb-5 add-employee-btn" :disabled="!masterTask.team.employees" @click="showAddEmployeeInput = true">
<!-- Kravarik: Tu je original autocomplete, skus to spravit radsej cez tento -->
<!-- <v-autocomplete
ref="employee-select"
v-model="employeeSelect"
:items="employees"
item-value="id"
item-title="_fullName"
class="modal-input"
/> -->
<v-btn class="w-100 mb-5 button secondary" :disabled="!masterTask.team.employees" @click="showAddEmployeeInput = true">
<v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca
</v-btn>
@@ -117,14 +127,14 @@
<Z-files-upload class="mt-15 files" @files-uploaded="filesUploaded"/>
</v-card-actions>
<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
<v-btn class="button primary" @click="save()">VYTVORIŤ</v-btn>
</v-card>
<v-card v-else height="100%" class="d-flex flex-column scrolling">
<div class="d-flex justify-space-between align-center">
<p>{{ masterTask.project_code }}</p>
<v-icon
@click.stop="close()"
@click.stop="closeModal()"
icon="mdi-close"
size="large"
class="pb-5"
@@ -134,7 +144,7 @@
<h1>{{ masterTask.name }}</h1>
<div class="d-flex justify-start">
<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" @click.stop="editMode = !editMode" />
<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="deleteTask()"/>
<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="_delete()"/>
</div>
</div>
@@ -173,7 +183,7 @@
</v-col>
<v-col cols="7">
<v-sheet class="ma-2">
<p :class="`${compareDates ? 'text-black' : 'text-red-darken-4'}`">{{ formattedDeadline }}</p>
<p :class="`${tmUtils.isAfter(masterTask.deadline) ? 'text-black' : 'text-red-darken-4'}`">{{ tmUtils.formatDateTime(masterTask.deadline) }}</p>
</v-sheet>
</v-col>
</v-row>
@@ -269,7 +279,7 @@
</div>
</div>
<div class="d-flex justify-start align-center mt-8">
<v-btn class="z-btn" @click="save()">Ukončiť mastertask</v-btn>
<v-btn class="button primary" @click="save()">Ukončiť mastertask</v-btn>
</div>
<v-table class="mt-7 mb-5">
<tbody class="px-5 py-5">
@@ -308,9 +318,11 @@ import ZFilesUpload from '@/plugins/tm@_components/z-files-upload.vue'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
// import ZAutocomplete from '@/plugins/tm@_components/z-autocomplete.vue'
import VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
import moment from 'moment'
import { QuillEditor } from '@vueup/vue-quill'
import tmUtils from '@/plugins/tm@_utils/tm.utils'
import * as FileSaver from 'file-saver'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
@@ -318,26 +330,29 @@ const atLeastOne = (value) => value.length
export default {
emits: ['close'],
mixins: [VuetifyFixFocusMixin],
components: {
Datepicker,
ZFilesUpload,
ZAutocomplete,
// ZAutocomplete,
QuillEditor
},
data() {
return {
tmUtils,
editMode: false,
visible: false,
errorUtils,
v$: useVuelidate(),
preventInputFocus: false,
teams: null,
employees: null,
selectedTeam: '',
showAddEmployeeInput: false,
masterTask: null
employeeSelect: null,
teamSelect: '',
masterTask: null,
showAddEmployeeInput: false
}
},
@@ -354,47 +369,31 @@ export default {
},
methods: {
// async downloadFile() {
// try {
// const file = await this.$axios.get_auth(`v1/files/${this.file.basename}`, { responseType: 'arraybuffer' })
// const blob = new Blob([file], { type: this.file.mimetype })
// FileSaver.saveAs(blob, this.file.name)
// this.isLoading = false
// } catch(error) {
// this.$toast.error(error)
// }
// },
itemSelected(x) {
console.log(x)
},
async showModal(masterTask, editMode = false) {
this.visible = true
this.masterTask = null
this.visible = true
this.masterTask = null
this.teamSelect = null
this.employeeSelect = null
try {
this.teams = await this.$axios.get_auth_data('v1/teams')
this.employees = await this.$axios.get_auth_data('v1/employees')
} catch (error) {
this.$toast.error(error)
}
const employees = await this.$axios.get_auth_data('v1/employees')
this.employees = tmUtils.enrichEmployeesByFullName(employees)
if (masterTask?.id) {
await this._load(masterTask.id)
this.editMode = editMode || !masterTask?.id
} else {
const masterTask = {
project_code: null,
name: null,
deadline: null,
duration: null,
team: {},
description: null,
employees: [],
files: []
if (masterTask?.id) {
this.masterTask = await this.$axios.get_auth_data(`v1/master-tasks/${masterTask.id}`)
this.teamSelect = this.masterTask.team.id
} else {
this.masterTask = {team: {}, employees: []}
}
setTimeout(() => {
this.masterTask = masterTask
this.editMode = editMode || !this.masterTask.id
})
this.editMode = (editMode || !this.masterTask.id)
} catch (error) {
this.$toast.error(error)
}
},
@@ -404,54 +403,32 @@ export default {
try {
if (this.masterTask.id)
await this._update()
await this.$axios.post_auth(`v1/master-tasks/${this.masterTask.id}`, this.masterTask)
else
await this._create()
await this.$axios.post_auth('v1/mastertasks')
this.close()
this.$router.push({ name: 'Dashboard - Tasks' })
this.closeModal()
// this.$router.push({ name: 'Dashboard - Tasks' })
} catch (error) {
this.$toast(error)
}
},
close() {
closeModal() {
this.visible = false
this.$emit('close', this.masterTask)
},
async _load(masterTaskId) {
try {
this.masterTask = await this.$axios.get_auth_data(`v1/master-tasks/${masterTaskId}`)
} catch (error) {
this.$toast.error(error)
}
},
async _delete() {
// Kravarik: Tu sa ma volat delete-master-task-modal, ak taka funkcionalita vlastne je
async _create() {
try {
await this.$axios.post_auth('v1/mastertasks')
} catch (error) {
this.$toast.error(error)
}
},
async _update() {
try {
await this.$axios.post_auth(`v1/master-tasks/${this.masterTask.id}`)
} catch (error) {
this.$toast.error(error)
}
},
async deleteTask(masterTaskId) {
try {
await this.$axios.delete(`v1/master-tasks/${masterTaskId}`)
this.close()
} catch (error) {
this.$toast.error(error)
}
// try {
// await this.$axios.delete(`v1/master-tasks/${this.masterTask.id}`)
// this.closeModal()
// } catch (error) {
// this.$toast.error(error)
// }
},
employeeSelected(selectedOption) {
@@ -460,27 +437,12 @@ export default {
this.showAddEmployeeInput = false
},
// Vuetify input was automatically focus after date input was clicked. This will prevent this unwanted behavior
onDateFocus($event) {
if ($event == undefined) {
this.preventInputFocus = true
}
},
onInputFocus($event) {
if (this.preventInputFocus) {
$event.target.blur()
this.preventInputFocus = false
}
},
filesUploaded(files) {
this.masterTask.files = files
}
},
computed: {
totalHours() {
let hours = 0
@@ -505,57 +467,36 @@ export default {
value: `${employee.name} ${employee.surname}`,
}
})
},
formattedDeadline() {
let deadline = moment(this.masterTask.deadline)
let date = deadline.format('DD.MM.yyyy')
return date
},
compareDates() {
const date1 = moment()
const date2 = moment(this.masterTask.deadline)
return moment(date1).isBefore(date2)
}
},
watch: {
selectedTeam() {
this.masterTask.team = this.teams.find(team => team.id == this.selectedTeam)
teamSelect(value) {
if (!value || !this.masterTask) return
this.masterTask.team = this.teams.find(team => team.id == value)
this.masterTask.employees = this.masterTask.team.employees
},
employeeSelect(value) {
if (!value || !this.masterTask) return
const employee = this.employees.find(employee => employee.id == value)
this.masterTask.employees.push(employee)
this.$nextTick(() => {
this.employeeSelect = null
this.$el.activeElement.blur()
// console.log(this.$refs['employee-select'])
// this.$refs['employee-select'].focused = false
// this.employeeSelect = ''
})
}
}
}
</script>
<style lang="sass" scoped>
.modal-input
width: 100% !important
flex: 0 0 auto
.modal-header
flex: 0 0 auto
.modal-content
flex: 1 1 100%
margin: 10px 0
overflow-y: scroll
.z-btn
height: 50px
width: 100%
flex: 0 0 auto
.remove-input
pointer-events: auto
opacity: 2
position: absolute
left: 92%
top: 25%
.employee-position
position: relative
.employee-select-avatar
background: #6200EE
color: #fff
@@ -568,28 +509,11 @@ export default {
top: 50%
right: 0
transform: translate(-50%, -50%)
.add-employee-btn
color: #6200EE
border: 1px solid #E0E0E0
border-radius: 4px
height: 50px
.scrolling
overflow: hidden !important
.scroll-employees
overflow-x: scroll
.trash-icon
padding: 10px
background: rgba(0, 0, 0, 0.04)
margin-left: 12px
border-radius: 50%
cursor: pointer
.pencil-icon
padding: 10px
background: rgba(0, 0, 0, 0.04)
border-radius: 50%
cursor: pointer
.border-bottom
border-bottom: 1px solid rgba(0,0,0,.1)