From 18b8d365aec3d7d46b1a77e47414e299bf8e6b52 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 12:14:20 -0800
Subject: [PATCH] 14.08 Mixin - Combine Duplicated Code on Add  Edit Task into
 Mixin

---
 src/components/Tasks/Modals/AddTask.vue  | 26 ++++-------------------
 src/components/Tasks/Modals/EditTask.vue | 26 ++++-------------------
 src/mixins/mixin-add-edit-task.js        | 27 ++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 44 deletions(-)
 create mode 100644 src/mixins/mixin-add-edit-task.js

diff --git a/src/components/Tasks/Modals/AddTask.vue b/src/components/Tasks/Modals/AddTask.vue
index 058c53f..1498a49 100644
--- a/src/components/Tasks/Modals/AddTask.vue
+++ b/src/components/Tasks/Modals/AddTask.vue
@@ -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 = ''
     }
   }
 }
diff --git a/src/components/Tasks/Modals/EditTask.vue b/src/components/Tasks/Modals/EditTask.vue
index d82ba44..81e99fc 100644
--- a/src/components/Tasks/Modals/EditTask.vue
+++ b/src/components/Tasks/Modals/EditTask.vue
@@ -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 () {
diff --git a/src/mixins/mixin-add-edit-task.js b/src/mixins/mixin-add-edit-task.js
new file mode 100644
index 0000000..485496e
--- /dev/null
+++ b/src/mixins/mixin-add-edit-task.js
@@ -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 = ''
+    }
+  }
+}