use mixin for comps

Author: ctf0

src/resources/assets/js/components/menu-comp.vue

@@ -3,21 +3,21 @@
 <script>
 import draggable from 'vuedraggable'
 import MenuChild from './menu-comp_childs.vue'
+import menu from './mixins/menu'
 
 export default {
     components: {draggable, MenuChild},
-    props: ['getMenuPages', 'delPage', 'delChild', 'locale'],
+    mixins: [menu],
+    props: ['getMenuPages', 'delPage'],
     data() {
         return {
             pages: [],
             allPages: [],
-            saveList: [],
-            isDragging: false
+            saveList: []
         }
     },
     created() {
         this.getPages()
-        this.eventsListeners()
     },
     methods: {
         getPages() {
@@ -44,12 +44,6 @@ export default {
                 }
             })
         },
-        getTitle(title) {
-            let locale = this.locale
-            let v = Object.keys(title).indexOf(locale)
-
-            return title.hasOwnProperty(locale) ? Object.values(title)[v] : Object.values(title)[0].concat(` "${Object.keys(title)[0]}"`)
-        },
 
         // operations
         checkFrom(item) {
@@ -91,21 +85,6 @@ export default {
                 e.moved.element.created_at = null
             }
         },
-        classObj(item) {
-            if (this.checkFrom(item)) {
-                return 'is-warning'
-            }
-            if (item.created_at == null) {
-                return 'is-danger'
-            }
-        },
-        arrowObj(item) {
-            if (this.hasChilds(item)) {
-                return 'fa-caret-down'
-            }
-
-            return 'fa-caret-right'
-        },
 
         // nests
         dragStart() {
@@ -116,9 +95,6 @@ export default {
             this.isDragging = false
             EventHub.fire('parentDragEnd')
         },
-        hasChilds(item) {
-            return item.nests && item.nests.length > 0
-        },
         loop(item) {
             let childs = []
 

src/resources/assets/js/components/menu-comp_childs.vue

@@ -38,19 +38,13 @@
 
 <script>
 import draggable from 'vuedraggable'
+import menu from './mixins/menu'
 
 export default {
     components: {draggable},
     name: 'menu-child',
-    props: ['pages', 'allPages', 'locale', 'delChild', 'childs'],
-    data() {
-        return {
-            isDragging: false
-        }
-    },
-    created() {
-        this.eventsListeners()
-    },
+    mixins: [menu],
+    props: ['pages', 'allPages', 'childs'],
     methods: {
         deleteChild(item) {
             $.post(this.delChild, {
@@ -72,12 +66,6 @@ export default {
                 }
             })
         },
-        getTitle(title) {
-            let locale = this.locale
-            let v = Object.keys(title).indexOf(locale)
-
-            return title.hasOwnProperty(locale) ? Object.values(title)[v] : Object.values(title)[0].concat(` "${Object.keys(title)[0]}"`)
-        },
 
         // operations
         checkFrom(item) {
@@ -113,20 +101,6 @@ export default {
                 EventHub.fire('updatePagesHierarchy')
             }
         },
-        classObj(item) {
-            if (this.checkFrom(item)) {
-                return 'is-warning'
-            }
-            if (item.created_at == null) {
-                return 'is-danger'
-            }
-        },
-        arrowObj(item) {
-            if (this.hasChilds(item)) {
-                return 'fa-caret-down'
-            }
-            return 'fa-caret-right'
-        },
 
         // nests
         dragStart() {
@@ -136,9 +110,6 @@ export default {
         dragEnd() {
             this.isDragging = false
             EventHub.fire('childDragEnd')
-        },
-        hasChilds(item) {
-            return item.nests && item.nests.length > 0
         }
     }
 }

src/resources/assets/js/components/mixins/menu.js

@@ -0,0 +1,37 @@
+export default {
+    props: ['locale', 'delChild'],
+    data() {
+        return {
+            isDragging: false
+        }
+    },
+    created() {
+        this.eventsListeners()
+    },
+    methods: {
+        getTitle(title) {
+            let locale = this.locale
+            let v = Object.keys(title).indexOf(locale)
+
+            return title.hasOwnProperty(locale) ? Object.values(title)[v] : Object.values(title)[0].concat(` "${Object.keys(title)[0]}"`)
+        },
+        classObj(item) {
+            if (this.checkFrom(item)) {
+                return 'is-warning'
+            }
+            if (item.created_at == null) {
+                return 'is-danger'
+            }
+        },
+        arrowObj(item) {
+            if (this.hasChilds(item)) {
+                return 'fa-caret-down'
+            }
+
+            return 'fa-caret-right'
+        },
+        hasChilds(item) {
+            return item.nests && item.nests.length > 0
+        }
+    }
+}