From 994d3449d32fe43225e5f217a12f3346f771d6c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= Date: Mon, 29 May 2023 11:07:20 +0200 Subject: [PATCH 1/4] [Subtask modal] Add multiple employees --- .../plugins/tm@modal/task/z-task-modal.vue | 114 ++++++++++++++---- 1 file changed, 88 insertions(+), 26 deletions(-) diff --git a/app/src/plugins/tm@modal/task/z-task-modal.vue b/app/src/plugins/tm@modal/task/z-task-modal.vue index 5720772..d95f2b1 100644 --- a/app/src/plugins/tm@modal/task/z-task-modal.vue +++ b/app/src/plugins/tm@modal/task/z-task-modal.vue @@ -12,18 +12,24 @@ - + - -
@@ -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% From fcd8199d8677e3c3a5b2e3f33c3f2fe742ce453f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= Date: Thu, 1 Jun 2023 14:07:08 +0200 Subject: [PATCH 2/4] [CHR WIP] CHR10, CHR12, CHR13, CHR14, CHR15, CHR17 - WIP not validated --- app/src/plugins/app/_config/App.vue | 11 +- .../app/_theme/_components/modals.sass | 18 ++- app/src/plugins/app/_theme/global.sass | 2 +- app/src/plugins/app@vendor/vue-cal/cell.vue | 21 +++- app/src/plugins/app@vendor/vue-cal/event.vue | 1 - .../tm@dashboard/_components/z-timeline.vue | 6 +- .../tasks/_components/a-tasks-filter.vue | 22 +++- .../master-task/_mixins/selects.mixin.ts | 1 + .../z-delete-team-member-modal.vue | 94 +++++++++++++++ .../master-task/z-master-task-modal.vue | 100 ++++++++++++++-- .../_components/a-task-timeblocks.vue | 20 +++- .../plugins/tm@modal/task/z-task-modal.vue | 109 ++++++++++++++---- 12 files changed, 353 insertions(+), 52 deletions(-) create mode 100644 app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue diff --git a/app/src/plugins/app/_config/App.vue b/app/src/plugins/app/_config/App.vue index 3f7d31e..ced0bf6 100644 --- a/app/src/plugins/app/_config/App.vue +++ b/app/src/plugins/app/_config/App.vue @@ -16,7 +16,8 @@ - + + \ No newline at end of file diff --git a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue index d23dbee..7033095 100644 --- a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue +++ b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue @@ -12,17 +12,33 @@ - +
+ + - + +
- + + + + @@ -30,7 +46,7 @@ - Pridať zamestnanca + Pridať zamestnanca
@@ -114,6 +130,7 @@ export default { data() { return { + deadline: null, editMode: false, visible: false, errorUtils, @@ -153,15 +170,21 @@ export default { return { mastertask: { project_id: { required }, - team_id: { required }, + employees: { required }, name: { required }, description: { required }, - deadline: { required } + deadline: { required }, + _deadline_time: { required } } } }, mounted() { + this.$events.on('memberDeleted', (filteredMembers) => { + console.log() + //this.mastertask.employees = filteredMembers + }), + this.$events.on('on-mastertask-deleted', (mastertask) => { if (mastertask?.id == this.mastertask?.id) this.closeModal() }) @@ -189,11 +212,30 @@ export default { }, methods: { + removeMemberAlert(member) { + const team = this.mastertask.team + this.$events.emit('show-delete-team-member-modal', { member, team }) + }, + + editDatepicker(type) { + const calendarElement = document.getElementsByClassName('dp__instance_calendar')[0] + const switchBtn = calendarElement.lastChild.querySelectorAll('.dp__button')[0] + if (!calendarElement) return + if (type == 'date') { + calendarElement.lastChild.remove() + } else if (type == 'time') { + switchBtn.click() + //calendarElement.lastChild.remove() + } + }, + async showModal({mastertask, editMode = false}) { this.editMode = null this.visible = true this.mastertask = null - this.$nextTick(() => this.v$.$reset()) + this.$nextTick(() => { + this.v$.$reset() + }) try { if (mastertask?.id) { @@ -206,7 +248,7 @@ export default { // this.mastertask.project_code = project.code } else { - this.mastertask = { employees: [], duration: 0 } + this.mastertask = { employees: [], duration: 0, _deadline_time: '17:00' } } this.editMode = editMode || !this.mastertask.id @@ -226,6 +268,8 @@ export default { if (this.$refs['description']) this.mastertask.description = this.$refs['description'].getHTML() + this._mergeDeadlineTimeDate() + try { this.mastertask.deadline = moment(this.mastertask.deadline).format('YYYY-MM-DD HH:MM:SS') @@ -253,6 +297,15 @@ export default { addTask() { this.$events.emit('show-subtask-modal', { subtask: null, editMode: false, mastertask: this.mastertask }) + }, + + _mergeDeadlineTimeDate() { + const date = new Date(this.mastertask.deadline); + const timeParts = this.mastertask._deadline_time.split(':'); + date.setHours(parseInt(timeParts[0])); + date.setMinutes(parseInt(timeParts[1])); + + this.mastertask.deadline = date } }, @@ -260,6 +313,14 @@ export default { editMode() { this.$nextTick(() => { this.$refs['description']?.setHTML(this.mastertask.description || '') + + if (!this.mastertask) return + + const date = new Date(this.mastertask.deadline) + const hours = date.getHours() + const minutes = date.getMinutes() + + this.mastertask._deadline_time = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`; }) } } @@ -267,6 +328,15 @@ export default { From 7dfac0f1552a914a817f35b1276629433ff4e2e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= Date: Fri, 2 Jun 2023 10:46:55 +0200 Subject: [PATCH 3/4] [Bugfix] Remove team member from master-task modal --- .../app/_theme/_components/modals.sass | 5 --- .../z-delete-team-member-modal.vue | 31 +++++-------------- .../master-task/z-master-task-modal.vue | 23 +++++--------- .../plugins/tm@modal/task/z-task-modal.vue | 14 +-------- 4 files changed, 15 insertions(+), 58 deletions(-) diff --git a/app/src/plugins/app/_theme/_components/modals.sass b/app/src/plugins/app/_theme/_components/modals.sass index 2e65a34..a31a814 100644 --- a/app/src/plugins/app/_theme/_components/modals.sass +++ b/app/src/plugins/app/_theme/_components/modals.sass @@ -15,11 +15,6 @@ .modal-input width: 100% !important flex: 0 0 auto - min-height: 60px - - input, - .v-field - min-height: 60px .modal-content flex: 1 1 100% diff --git a/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue b/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue index 5cce74b..85a1b85 100644 --- a/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue +++ b/app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue @@ -7,7 +7,7 @@ {{ member.name + ' ' + member.surname }} bude odstránený/á z teamu. @@ -34,18 +34,14 @@ export default { return { visible: false, member: null, - allMembers: null, - teamId: null, team: null } }, methods: { async showModal({ member, team }) { - this.member = member - this.allMembers = team.employees - this.teamId = team.id - this.team = team + this.member = member + this.team = team this.visible = true }, @@ -53,32 +49,19 @@ export default { this.visible = false }, - editDatepicker(type) { - const calendarElement = document.getElementsByClassName('dp__instance_calendar')[0] - const switchBtn = calendarElement.lastChild.querySelectorAll('.dp__button')[0] - if (!calendarElement) return - if (type == 'date') { - calendarElement.lastChild.remove() - } else if (type == 'time') { - switchBtn.click() - //calendarElement.lastChild.remove() - } - }, - async deleteMember() { - const filteredMembers = this.allMembers.filter(obj => obj !== this.member) - this.team.employees = filteredMembers + this.team.employees = [...this.team.employees].filter(employee => employee.id !== this.member.id) try { - if (this.teamId) { - const { team } = await this.$axios.put_auth(`v1/teams/${this.teamId}`, this.team) + if (this.team.id) { + const { team } = await this.$axios.put_auth(`v1/teams/${this.team.id}`, this.team) this.$store.commit('tm/update_team', team) } else { const { team } = await this.$axios.post_auth(`v1/teams`, this.team) this.$store.commit('tm/save_team', team) } - this.$events.emit('memberDeleted', { filteredMembers }) + this.$events.emit('master-task:team-member-deleted', { teamId: this.team.id, memberId: this.member.id }) this.closeModal() } catch (error) { this.$toast.error(error) diff --git a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue index 7033095..f67c92f 100644 --- a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue +++ b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue @@ -14,7 +14,7 @@
- { - console.log() - //this.mastertask.employees = filteredMembers + this.$events.on('master-task:team-member-deleted', ({ teamId, memberId }) => { + if (this.mastertask?.team_id != teamId) + return + + this.mastertask.employees = this.mastertask.employees.filter(employee => employee.id != memberId) }), this.$events.on('on-mastertask-deleted', (mastertask) => { @@ -209,6 +211,7 @@ export default { this.$events.off('on-mastertask-deleted') this.$events.off('on-subtask-deleted') this.$events.off('on-subtask-edited') + this.$events.off('master-task:team-member-deleted') }, methods: { @@ -217,18 +220,6 @@ export default { this.$events.emit('show-delete-team-member-modal', { member, team }) }, - editDatepicker(type) { - const calendarElement = document.getElementsByClassName('dp__instance_calendar')[0] - const switchBtn = calendarElement.lastChild.querySelectorAll('.dp__button')[0] - if (!calendarElement) return - if (type == 'date') { - calendarElement.lastChild.remove() - } else if (type == 'time') { - switchBtn.click() - //calendarElement.lastChild.remove() - } - }, - async showModal({mastertask, editMode = false}) { this.editMode = null this.visible = true diff --git a/app/src/plugins/tm@modal/task/z-task-modal.vue b/app/src/plugins/tm@modal/task/z-task-modal.vue index 0a200ab..ded258f 100644 --- a/app/src/plugins/tm@modal/task/z-task-modal.vue +++ b/app/src/plugins/tm@modal/task/z-task-modal.vue @@ -16,7 +16,7 @@
- Date: Fri, 2 Jun 2023 10:47:21 +0200 Subject: [PATCH 4/4] [Bugfix] Remove team member from master-task modal --- app/src/plugins/tm@modal/master-task/z-master-task-modal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue index f67c92f..6067912 100644 --- a/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue +++ b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue @@ -181,7 +181,7 @@ export default { mounted() { this.$events.on('master-task:team-member-deleted', ({ teamId, memberId }) => { - if (this.mastertask?.team_id != teamId) + if (this.mastertask.team_id != teamId) return this.mastertask.employees = this.mastertask.employees.filter(employee => employee.id != memberId)