mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
[Subtask modal] Add multiple employees
This commit is contained in:
Matej Glasnák committed
1 parent
769fce0427
commit
994d3449d3
1 file changed
+88
-26
@@ -12,18 +12,24 @@
|
||||
|
||||
<v-autocomplete v-model="subtask.master_task_id" label="Master task" :class="{error: v$.subtask.master_task_id.$errors.length}" :items="mastertasks" item-title="name" item-value="id" variant="solo" class="modal-input" clearable />
|
||||
|
||||
<v-text-field v-model="subtask.name" @focus="onInputFocus" class="modal-input" label="Názov subtasku" variant="solo" :class="{ error: v$.subtask.name.$errors.length }" :hint="v$.subtask.name.$errors ? errorUtils.parseErrors(v$.subtask.name.$errors) : null"></v-text-field>
|
||||
<v-text-field v-model="subtask.title" @focus="onInputFocus" class="modal-input" label="Názov subtasku" variant="solo"></v-text-field>
|
||||
|
||||
<template v-if="subtask.id">
|
||||
<v-autocomplete v-model="subtask.employee_id" :class="{error: employeeError}" label="Priradený" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input" clearable />
|
||||
<v-autocomplete v-model="subtask.employee_id" label="Priradený" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input" :class="{ error: employeeValidations[0]?.employee }"
|
||||
@update:model-value="employeeValidations[0] ? employeeValidations[0].employee = false : null" />
|
||||
<v-text-field v-model="subtask.duration" class="modal-input" variant="solo" type="number" label="Časový odhad" :class="{ error: employeeValidations[0]?.duration }" append-inner-icon="mdi-clock-outline" @focus="onInputFocus"
|
||||
@update:model-value="employeeValidations[0] ? employeeValidations[0].duration = false : null" />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<v-autocomplete v-for="(employee, index) in [...subtask.employees, null]" v-model="subtask.employees[index]" :key="`employee-${index}`" :class="{error: employeeError}" label="Priradený" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input" clearable />
|
||||
<div v-for="(employee, index) in subtask.employees" :key="`employee-${index}`" class="multiple-employee-select">
|
||||
<v-autocomplete v-model="employee.id" label="Priradený" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input employee" :class="{ error: employeeValidations[index]?.employee }"
|
||||
@update:model-value="employeeValidations[index] ? employeeValidations[index].employee = false : null" />
|
||||
<v-text-field v-model="employee.duration" class="modal-input duration" variant="solo" type="number" label="Časový odhad" append-inner-icon="mdi-clock-outline" :class="{ error: employeeValidations[index]?.duration }" @focus="onInputFocus"
|
||||
@update:model-value="employeeValidations[index] ? employeeValidations[index].duration = false : null" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-text-field v-model="subtask.duration" @focus="onInputFocus" class="modal-input" variant="solo" type="number" label="Časový odhad" :class="{ error: v$.subtask.duration.$errors.length }" :hint="v$.subtask.duration.$errors ? errorUtils.parseErrors(v$.subtask.duration.$errors) : null" append-inner-icon="mdi-clock-outline"></v-text-field>
|
||||
|
||||
<div class="w-100 modal-input">
|
||||
<QuillEditor ref="description" v-model="subtask.description" placeholder="Popis" theme="snow" class="rich-text-editor" @input="subtask.description = $event.srcElement.innerHTML" />
|
||||
</div>
|
||||
@@ -78,11 +84,9 @@ import SelectsMixin from "../master-task/_mixins/selects.mixin"
|
||||
import * as FileSaver from "file-saver"
|
||||
import tmUtils from "@/plugins/tm@_utils/tm.utils"
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css"
|
||||
import ZAutocomplete from "@/plugins/tm@_components/z-autocomplete.vue"
|
||||
|
||||
import ZTaskReadonlyInfo from "./_components/z-task-readonly-info.vue"
|
||||
import { mapGetters } from "vuex"
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
emits: ["close", "refresh"],
|
||||
@@ -91,8 +95,7 @@ export default {
|
||||
components: {
|
||||
ZTaskReadonlyInfo,
|
||||
ZFilesUpload,
|
||||
QuillEditor,
|
||||
// ZAutocomplete
|
||||
QuillEditor
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -103,9 +106,9 @@ export default {
|
||||
subtask: null,
|
||||
errorUtils,
|
||||
v$: useVuelidate(),
|
||||
employeeValidations: [],
|
||||
preventInputFocus: false,
|
||||
showDatePicker: false,
|
||||
employeeError: false,
|
||||
selectedNewDate: []
|
||||
}
|
||||
},
|
||||
@@ -121,8 +124,7 @@ export default {
|
||||
return {
|
||||
subtask: {
|
||||
master_task_id: { required },
|
||||
duration: { required },
|
||||
name: { required }
|
||||
// title: { required }
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -152,7 +154,7 @@ export default {
|
||||
const data = await this.$axios.get_auth_data(`v1/subtasks/${subtask.id}`)
|
||||
this.subtask = this._enrichTask(data)
|
||||
} else {
|
||||
this.subtask = { master_task: mastertask, employees: [], timeblocks: [] }
|
||||
this.subtask = { master_task: mastertask, employees: [{}] }
|
||||
}
|
||||
|
||||
this.editMode = editMode || !this.subtask.id
|
||||
@@ -167,13 +169,9 @@ export default {
|
||||
},
|
||||
|
||||
async save() {
|
||||
if (!this.subtask.employee_id && !this.subtask.employees.length)
|
||||
this.employeeError = true
|
||||
const employeesValid = await this._validateEmployees()
|
||||
|
||||
if (!(await this.v$.$validate()))
|
||||
return
|
||||
|
||||
if (!this.subtask.employee_id && !this.subtask.employees.length)
|
||||
if (!(await this.v$.$validate()) || !employeesValid)
|
||||
return
|
||||
|
||||
this.subtask.description = this.$refs['description'].getHTML()
|
||||
@@ -181,14 +179,19 @@ export default {
|
||||
try {
|
||||
if (this.subtask?.id) {
|
||||
const { subtask } = await this.$axios.put_auth(`v1/subtasks/${this.subtask.id}`, this.subtask)
|
||||
|
||||
this.$store.commit('tm/update_subtask', subtask)
|
||||
this.$events.emit("on-subtask-edited", this.subtask)
|
||||
} else {
|
||||
const { subtask } = await this.$axios.post_auth(`v1/mastertasks/${this.subtask.master_task_id}/subtasks`, this.subtask)
|
||||
this.subtask.id = subtask.id
|
||||
this.$store.commit('tm/update_subtask', subtask)
|
||||
const { subtasks } = await this.$axios.post_auth(`v1/mastertasks/${this.subtask.master_task_id}/subtasks`, this.subtask)
|
||||
this.subtask.id = subtasks[0].id
|
||||
|
||||
subtasks.forEach(subtask => {
|
||||
this.$store.commit('tm/update_subtask', subtask)
|
||||
this.$events.emit("on-subtask-edited", this.subtask)
|
||||
})
|
||||
}
|
||||
|
||||
this.$events.emit("on-subtask-edited", this.subtask)
|
||||
this.closeModal()
|
||||
} catch (error) {
|
||||
this.$toast.error(error)
|
||||
@@ -221,6 +224,45 @@ export default {
|
||||
this.subtask = subtask
|
||||
},
|
||||
|
||||
_validateEmployees() {
|
||||
return new Promise((resolve) => {
|
||||
this.employeeValidations = []
|
||||
|
||||
if (this.subtask.id) {
|
||||
if (this.subtask.employee && this.subtask.duration)
|
||||
return
|
||||
|
||||
this.employeeValidations[0] = {}
|
||||
|
||||
if (!this.subtask.employee_id)
|
||||
this.employeeValidations[0].employee = true
|
||||
|
||||
if (!this.subtask.duration)
|
||||
this.employeeValidations[0].duration = true
|
||||
} else {
|
||||
this.subtask.employees.forEach((employee, index) => {
|
||||
if (index == this.subtask.employees.length - 1 && index > 0)
|
||||
return // Skip the last which is allways empty
|
||||
|
||||
if (employee.id && employee.duration)
|
||||
return
|
||||
|
||||
this.employeeValidations[index] = {}
|
||||
|
||||
if (!employee.id)
|
||||
this.employeeValidations[index].employee = true
|
||||
|
||||
if (!employee.duration)
|
||||
this.employeeValidations[index].duration = true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const isError = this.employeeValidations.some(employee => employee.duration || employee.employee)
|
||||
resolve(!isError)
|
||||
})
|
||||
},
|
||||
|
||||
_enrichTask(subtask) {
|
||||
return {
|
||||
...subtask,
|
||||
@@ -233,15 +275,22 @@ export default {
|
||||
|
||||
watch: {
|
||||
'subtask.employee_id'(value, oldValue) {
|
||||
this.employeeError = false
|
||||
if (!value || !oldValue) return
|
||||
|
||||
this.subtask.timeblocks = []
|
||||
this.subtask._employee = this.enrichedEmployees.find((employee) => employee.id == this.subtask.employee_id)
|
||||
},
|
||||
|
||||
'subtask.employees'() {
|
||||
this.employeeError = false
|
||||
'subtask.employees': {
|
||||
handler() {
|
||||
if (!this.subtask?.employees)
|
||||
return
|
||||
|
||||
const lastEmployee = this.subtask.employees[this.subtask.employees.length - 1]
|
||||
if (lastEmployee.id || lastEmployee.duration)
|
||||
this.subtask.employees.push({})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
'subtask.master_task_id'(value) {
|
||||
@@ -275,4 +324,17 @@ export default {
|
||||
@media screen and (max-width: 522px)
|
||||
.files
|
||||
margin-top: 104px !important
|
||||
|
||||
.multiple-employee-select
|
||||
width: 100%
|
||||
|
||||
.modal-input
|
||||
display: inline-block
|
||||
|
||||
.employee
|
||||
width: 70% !important
|
||||
|
||||
.duration
|
||||
width: 25% !important
|
||||
margin-left: 5%
|
||||
</style>
|
||||
Reference in new issue
Block a user