Tutorials/Quasar_Todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

14.08 Mixin - Combine Duplicated Code on Add Edit Task into Mixin

Browse Source
This commit is contained in:
Fredrick W Warren 2021-02-11 12:14:20 -08:00
parent 15199bbb42
commit 18b8d365ae
3 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Tasks/Modals/AddTask.vue
View File

@ -30,21 +30,13 @@
<script>
import { mapActions } from 'vuex'
import ModalHeader from './Shared/ModalHeader.vue'
import ModalTaskName from './Shared/ModalTaskName.vue'
import ModalDueDate from './Shared/ModalDueDate.vue'
import ModalDueTime from './Shared/ModalDueTime.vue'
import ModalButtons from './Shared/ModalButtons.vue'
import mixinAddEditTask from 'src/mixins/mixin-add-edit-task'
export default {
name: 'AddTask',
components: {
ModalHeader,
ModalTaskName,
ModalDueDate,
ModalDueTime,
ModalButtons
},
mixins: [
mixinAddEditTask
],
data () {
return {
taskToSubmit: {
@ -57,19 +49,9 @@ export default {
},
methods: {
...mapActions('tasks', ['addTask']),
submitForm () {
this.$refs.modalTaskName.$refs.name.validate()
if (!this.$refs.modalTaskName.$refs.name.hasError) {
this.submitTask()
}
},
submitTask () {
this.addTask(this.taskToSubmit)
this.$emit('close')
},
clearDueDate () {
this.taskToSubmit.dueDate = ''
this.taskToSubmit.dueTime = ''
}
}
}

26
src/components/Tasks/Modals/EditTask.vue
View File

@ -30,21 +30,13 @@
<script>
import { mapActions } from 'vuex'
import ModalHeader from './Shared/ModalHeader.vue'
import ModalTaskName from './Shared/ModalTaskName.vue'
import ModalDueDate from './Shared/ModalDueDate.vue'
import ModalDueTime from './Shared/ModalDueTime.vue'
import ModalButtons from './Shared/ModalButtons.vue'
import mixinAddEditTask from 'src/mixins/mixin-add-edit-task'
export default {
name: 'AddTask',
components: {
ModalHeader,
ModalTaskName,
ModalDueDate,
ModalDueTime,
ModalButtons
},
mixins: [
mixinAddEditTask
],
props: [
'task',
'id'
@ -56,22 +48,12 @@ export default {
},
methods: {
...mapActions('tasks', ['updateTask']),
submitForm () {
this.$refs.modalTaskName.$refs.name.validate()
if (!this.$refs.modalTaskName.$refs.name.hasError) {
this.submitTask()
}
},
submitTask () {
this.updateTask({
id: this.id,
updates: this.taskToSubmit
})
this.$emit('close')
},
clearDueDate () {
this.taskToSubmit.dueDate = ''
this.taskToSubmit.dueTime = ''
}
},
mounted () {

27
src/mixins/mixin-add-edit-task.js Normal file
View File

@ -0,0 +1,27 @@
import ModalHeader from 'src/components/Tasks/Modals/Shared/ModalHeader.vue'
import ModalTaskName from 'src/components/Tasks/Modals/Shared/ModalTaskName.vue'
import ModalDueDate from 'src/components/Tasks/Modals/Shared/ModalDueDate.vue'
import ModalDueTime from 'src/components/Tasks/Modals/Shared/ModalDueTime.vue'
import ModalButtons from 'src/components/Tasks/Modals/Shared/ModalButtons.vue'
export default {
components: {
ModalHeader,
ModalTaskName,
ModalDueDate,
ModalDueTime,
ModalButtons
},
methods: {
submitForm () {
this.$refs.modalTaskName.$refs.name.validate()
if (!this.$refs.modalTaskName.$refs.name.hasError) {
this.submitTask()
}
},
clearDueDate () {
this.taskToSubmit.dueDate = ''
this.taskToSubmit.dueTime = ''
}
}
}