From 0a038b777181a70abb69c2b850992be25fb6a92c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= Date: Tue, 31 Jan 2023 15:05:26 +0100 Subject: [PATCH] [tm@modals] Refactoring --- .../app/_theme/_components/buttons.sass | 18 ++ .../app/_theme/_components/modals.sass | 13 + .../app/_theme/_components/z-cancel-btn.sass | 3 - .../app/_theme/_components/z-default-btn.sass | 4 - app/src/plugins/app/_theme/index.sass | 5 +- app/src/plugins/app/_theme/modals.sass | 17 ++ .../_components/a-reset-password-form.vue | 2 +- app/src/plugins/lib@search/search/search.vue | 1 - app/src/plugins/tm@_utils/tm.utils.ts | 19 ++ .../tm@modal/_mixins/vuetify-fix-focus.ts | 23 ++ .../tm@modal/blocker/z-blocker-modal.vue | 139 +++------- .../master-task/z-master-task-modal.vue | 232 ++++++----------- .../tm@modal/task/z-complete-task-modal.vue | 15 +- .../tm@modal/task/z-delete-task-modal.vue | 12 +- .../tm@modal/task/z-task-add-time-modal.vue | 8 +- .../plugins/tm@modal/task/z-task-modal.vue | 246 ++++-------------- .../tm@modal/team/z-delete-team-modal.vue | 12 +- .../plugins/tm@modal/team/z-team-modal.vue | 113 ++------ .../plugins/tm@profile/profile/my-profile.vue | 2 +- 19 files changed, 302 insertions(+), 582 deletions(-) create mode 100644 app/src/plugins/app/_theme/_components/buttons.sass create mode 100644 app/src/plugins/app/_theme/_components/modals.sass delete mode 100644 app/src/plugins/app/_theme/_components/z-cancel-btn.sass delete mode 100644 app/src/plugins/app/_theme/_components/z-default-btn.sass create mode 100644 app/src/plugins/app/_theme/modals.sass create mode 100644 app/src/plugins/tm@_utils/tm.utils.ts create mode 100644 app/src/plugins/tm@modal/_mixins/vuetify-fix-focus.ts diff --git a/app/src/plugins/app/_theme/_components/buttons.sass b/app/src/plugins/app/_theme/_components/buttons.sass new file mode 100644 index 0000000..5597018 --- /dev/null +++ b/app/src/plugins/app/_theme/_components/buttons.sass @@ -0,0 +1,18 @@ +.button.primary + background: #7f39fb !important + border-radius: 4px !important + color: #fff !important + height: 50px + width: 100% + flex: 0 0 auto + +.button.secondary + color: #6200EE + border: 1px solid #E0E0E0 + border-radius: 4px + height: 50px + width: 203px + +.button.cancel + border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important + color: #7f39fb !important \ No newline at end of file diff --git a/app/src/plugins/app/_theme/_components/modals.sass b/app/src/plugins/app/_theme/_components/modals.sass new file mode 100644 index 0000000..0c80d0f --- /dev/null +++ b/app/src/plugins/app/_theme/_components/modals.sass @@ -0,0 +1,13 @@ +.modal-header + .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 \ No newline at end of file diff --git a/app/src/plugins/app/_theme/_components/z-cancel-btn.sass b/app/src/plugins/app/_theme/_components/z-cancel-btn.sass deleted file mode 100644 index 6729a38..0000000 --- a/app/src/plugins/app/_theme/_components/z-cancel-btn.sass +++ /dev/null @@ -1,3 +0,0 @@ -.cancel-btn - border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important - color: #7f39fb !important \ No newline at end of file diff --git a/app/src/plugins/app/_theme/_components/z-default-btn.sass b/app/src/plugins/app/_theme/_components/z-default-btn.sass deleted file mode 100644 index 3b84a60..0000000 --- a/app/src/plugins/app/_theme/_components/z-default-btn.sass +++ /dev/null @@ -1,4 +0,0 @@ -.z-btn - background: #7f39fb !important - border-radius: 4px !important - color: #fff !important \ No newline at end of file diff --git a/app/src/plugins/app/_theme/index.sass b/app/src/plugins/app/_theme/index.sass index 2631e0f..a99f3f1 100644 --- a/app/src/plugins/app/_theme/index.sass +++ b/app/src/plugins/app/_theme/index.sass @@ -1,13 +1,14 @@ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap') @import './vuetify/v-dialog' -@import './_components/z-default-btn' -@import './_components/z-cancel-btn' +@import './_components/buttons' @import './date-picker' @import './global' @import '@/plugins/lib@auth/_theme/auth.theme' +@import './modals' + * font-family: 'Roboto', sans-serif diff --git a/app/src/plugins/app/_theme/modals.sass b/app/src/plugins/app/_theme/modals.sass new file mode 100644 index 0000000..136bd51 --- /dev/null +++ b/app/src/plugins/app/_theme/modals.sass @@ -0,0 +1,17 @@ +.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% \ No newline at end of file diff --git a/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue b/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue index 21229f1..b5515ff 100644 --- a/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue +++ b/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue @@ -43,7 +43,7 @@ export default { methods: { async submit() { - if (!(await this.v$.$validate())) return console.log(this.v$) + if (!(await this.v$.$validate())) return try { await this.$axios.post_data('v1/auth/reset', this.form) diff --git a/app/src/plugins/lib@search/search/search.vue b/app/src/plugins/lib@search/search/search.vue index fe5982e..9d71c2e 100644 --- a/app/src/plugins/lib@search/search/search.vue +++ b/app/src/plugins/lib@search/search/search.vue @@ -24,7 +24,6 @@ export default { created() { try { this.searchResults = this.$axios.get_auth_data('v1/search') - console.log(this.searchResults) } catch (error) { this.$toast.error(error) } diff --git a/app/src/plugins/tm@_utils/tm.utils.ts b/app/src/plugins/tm@_utils/tm.utils.ts new file mode 100644 index 0000000..2fad043 --- /dev/null +++ b/app/src/plugins/tm@_utils/tm.utils.ts @@ -0,0 +1,19 @@ +import moment from 'moment' + +export default { + enrichEmployeesByFullName(employees) { + return employees.map(employee => ({...employee, _fullName: `${ employee.name } ${ employee.surname }`})) + }, + + formatDateTime(date) { + return moment(date).format('DD.MM.yyyy, HH:mm') + }, + + isBefore(date, compareTo = null) { + return moment(date).isBefore(moment(compareTo)) + }, + + isAfter(date, compareTo = null) { + return moment(date).isAfter(moment(compareTo)) + } +} \ No newline at end of file diff --git a/app/src/plugins/tm@modal/_mixins/vuetify-fix-focus.ts b/app/src/plugins/tm@modal/_mixins/vuetify-fix-focus.ts new file mode 100644 index 0000000..cadcb57 --- /dev/null +++ b/app/src/plugins/tm@modal/_mixins/vuetify-fix-focus.ts @@ -0,0 +1,23 @@ +export default { + // Mixin to fix autofocus on v-input in modals where date selects are used + data() { + return { + preventInputFocus: false + } + }, + + methods: { + onDateFocus($event) { + if ($event == undefined) { + this.preventInputFocus = true + } + }, + + onInputFocus($event) { + if (this.preventInputFocus) { + $event.target.blur() + this.preventInputFocus = false + } + } + } +} \ No newline at end of file diff --git a/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue b/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue index 5879ce9..7805a7b 100644 --- a/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue +++ b/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue @@ -5,7 +5,7 @@

{{ blocker.id ? 'Upraviť' : 'Vytvoriť'}} blocker

@@ -26,7 +26,7 @@ variant="solo" >
@@ -66,22 +66,26 @@ /> - {{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}} + {{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}} - - \ No newline at end of file + \ 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 f50a0e0..0cb536c 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 @@ -5,7 +5,7 @@

{{ masterTask.id ? 'Upraviť master task' : 'Vytvoriť master task' }}

@@ -64,7 +64,7 @@ > - + + + + Pridať zamestnanca @@ -117,14 +127,14 @@ - VYTVORIŤ + VYTVORIŤ

{{ masterTask.project_code }}

{{ masterTask.name }}
pencil-icon - trash-icon + trash-icon
@@ -173,7 +183,7 @@ -

{{ formattedDeadline }}

+

{{ tmUtils.formatDateTime(masterTask.deadline) }}

 @@ -269,7 +279,7 @@
- Ukončiť mastertask + Ukončiť mastertask
@@ -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 = '' + }) } } } + \ No newline at end of file diff --git a/app/src/plugins/tm@profile/profile/my-profile.vue b/app/src/plugins/tm@profile/profile/my-profile.vue index aec5e13..7ddb45d 100644 --- a/app/src/plugins/tm@profile/profile/my-profile.vue +++ b/app/src/plugins/tm@profile/profile/my-profile.vue @@ -58,7 +58,7 @@ >
- ULOŽIŤ ZMENY + ULOŽIŤ ZMENY