[Modals] Refactoring

This commit is contained in:
Matej Glasnák committed 2023-01-31 15:27:44 +01:00
1 parent 0a038b7771
commit aaafb6534c
6 files changed
+38 -49

No files matched your search

@@ -1,4 +1,6 @@
.modal-header .modal-header
flex: 0 0 auto
.trash-icon .trash-icon
padding: 10px padding: 10px
background: rgba(0, 0, 0, 0.04) background: rgba(0, 0, 0, 0.04)
@@ -11,3 +13,20 @@
background: rgba(0, 0, 0, 0.04) background: rgba(0, 0, 0, 0.04)
border-radius: 50% border-radius: 50%
cursor: pointer cursor: pointer
.modal-input
width: 100% !important
flex: 0 0 auto
.modal-content
flex: 1 1 100%
margin: 10px 0
overflow-y: scroll
.remove-input
pointer-events: auto
opacity: 2
position: absolute
left: 92%
top: 25%
+2 -2
View File
@@ -1,13 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap') @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap')
@import './vuetify/v-dialog' @import './vuetify/v-dialog'
@import './_components/buttons'
@import './date-picker' @import './date-picker'
@import './global' @import './global'
@import '@/plugins/lib@auth/_theme/auth.theme' @import '@/plugins/lib@auth/_theme/auth.theme'
@import './modals' @import './_components/buttons'
@import './_components/modals'
* *
font-family: 'Roboto', sans-serif font-family: 'Roboto', sans-serif
-17
View File
@@ -1,17 +0,0 @@
.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
.remove-input
pointer-events: auto
opacity: 2
position: absolute
left: 92%
top: 25%
@@ -101,17 +101,7 @@
@option-selected="employeeSelected" @option-selected="employeeSelected"
/> />
<!-- Kravarik: Tu je original autocomplete, skus to spravit radsej cez tento --> <v-btn class="w-100 mb-5 button secondary" :disabled="!masterTask.team?.id" @click="showAddEmployeeInput = true">
<!-- <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-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca
</v-btn> </v-btn>
@@ -318,7 +308,7 @@ import ZFilesUpload from '@/plugins/tm@_components/z-files-upload.vue'
import useVuelidate from '@vuelidate/core' import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators' import { required } from '@vuelidate/validators'
import errorUtils from '@/plugins/lib@auth/_utils/error.utils' 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 VuetifyFixFocusMixin from '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
import moment from 'moment' import moment from 'moment'
import { QuillEditor } from '@vueup/vue-quill' import { QuillEditor } from '@vueup/vue-quill'
@@ -335,7 +325,7 @@ export default {
components: { components: {
Datepicker, Datepicker,
ZFilesUpload, ZFilesUpload,
// ZAutocomplete, ZAutocomplete,
QuillEditor QuillEditor
}, },
+12 -16
View File
@@ -19,7 +19,7 @@
<!-- Toto treba fixnut --> <!-- Toto treba fixnut -->
<v-select <v-select
v-model="selectedMasterTaskId" v-model="masterTaskIdSelect"
@focus="onInputFocus" @focus="onInputFocus"
class="modal-input border-select" class="modal-input border-select"
label="MasterTask" label="MasterTask"
@@ -30,7 +30,7 @@
></v-select> ></v-select>
<v-select <v-select
v-model="selectedEmployeeId" v-model="employeeIdSelect"
@focus="onInputFocus" @focus="onInputFocus"
class="modal-input border-select" class="modal-input border-select"
label="Priradený" label="Priradený"
@@ -354,8 +354,8 @@ export default {
v$: useVuelidate(), v$: useVuelidate(),
preventInputFocus: false, preventInputFocus: false,
masterTasks: [], masterTasks: [],
selectedMasterTaskId: null, masterTaskIdSelect: null,
selectedEmployeeId: null employeeIdSelect: null
} }
}, },
@@ -371,9 +371,9 @@ export default {
validations() { validations() {
return { return {
task: { task: {
project_code: { required }, // project_code: { required },
date: { required }, date: { required },
team: { required }, // team: { required },
duration: { required }, duration: { required },
employee: { required }, employee: { required },
}, },
@@ -396,8 +396,8 @@ export default {
if (task?.id) { if (task?.id) {
const t = await this.$axios.get_auth_data(`v1/tasks/${task.id}`) const t = await this.$axios.get_auth_data(`v1/tasks/${task.id}`)
this.selectedEmployeeId = t.employee.id this.employeeIdSelect = t.employee.id
this.selectedMasterTaskId = t.master_task.id this.masterTaskIdSelect = t.master_task.id
this.task = t this.task = t
} else { } else {
this.task = {master_task: {}} this.task = {master_task: {}}
@@ -442,20 +442,16 @@ export default {
}, },
watch: { watch: {
selectedMasterTaskId(value) { masterTaskIdSelect(value) {
if (!value || !this.task) return if (!value || !this.task) return
this.task.master_task = this.masterTasks.find( this.task.master_task = this.masterTasks.find(masterTask => masterTask.id == value)
(masterTask) => masterTask.id == value
)
}, },
selectedEmployeeId(value) { employeeIdSelect(value) {
if (!value || !this.task) return if (!value || !this.task) return
this.task.employee = this.task.master_task.employees.find( this.task.employee = this.task.master_task.employees.find(employee => employee.id == value)
(employee) => employee.id == value
)
}, },
}, },
} }
@@ -1,5 +1,5 @@
<template> <template>
<div> <div ref="loadingContainer">
<div v-if="!content"></div> <div v-if="!content"></div>
<div v-else-if="content.error">{{ content.error }}</div> <div v-else-if="content.error">{{ content.error }}</div>
<div v-else-if="(typeof content == 'array' && !array.length) || (typeof content == 'object' && !Object.values(content).length)">{{ emptyMessage }}</div> <div v-else-if="(typeof content == 'array' && !array.length) || (typeof content == 'object' && !Object.values(content).length)">{{ emptyMessage }}</div>
@@ -32,6 +32,7 @@ export default {
methods: { methods: {
async _startLoading() { async _startLoading() {
// Kravarik: toto hadze tie warny v konzole. Fixnut
this.loader = await this.$loading.show() this.loader = await this.$loading.show()
}, },