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

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

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