From badc388da9f51f80d694bd122ce6990cfcc547cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 30 May 2023 12:37:38 +0200
Subject: [PATCH] Implement mixin for filter menu

---
 .../components/FilterMenu/PostTypeFilter.vue  | 35 +++++--------------
 webapp/mixins/filterMenuMixin.js              | 24 +++++++++++++
 2 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 webapp/mixins/filterMenuMixin.js

diff --git a/webapp/components/FilterMenu/PostTypeFilter.vue b/webapp/components/FilterMenu/PostTypeFilter.vue
index bc6669238..fcd4f161a 100644
--- a/webapp/components/FilterMenu/PostTypeFilter.vue
+++ b/webapp/components/FilterMenu/PostTypeFilter.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import FilterMenuMixin from '~/mixins/filterMenuMixin.js'
 import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
 import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
 
@@ -47,32 +47,15 @@ export default {
     FilterMenuSection,
     LabeledButton,
   },
+  mixins: [FilterMenuMixin],
   data() {
     return {
-      postTypes: ['Article', 'Event'],
+      filterPostTypes: ['Article', 'Event'],
     }
   },
-  computed: {
-    ...mapGetters({
-      filteredPostTypes: 'posts/filteredPostTypes',
-      currentUser: 'auth/user',
-    }),
-    noneSet() {
-      return !this.articleSet && !this.eventSet
-    },
-    articleSet() {
-      return this.filteredPostTypes.includes('Article')
-    },
-    eventSet() {
-      return this.filteredPostTypes.includes('Event')
-    },
-  },
   methods: {
-    ...mapMutations({
-      toggleFilterPostType: 'posts/TOGGLE_POST_TYPE',
-    }),
-    unsetAll() {
-      this.postTypes.forEach((postType) => {
+    unsetAllPostTypeFilters() {
+      this.filterPostTypes.forEach((postType) => {
         if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
       })
     },
@@ -82,17 +65,17 @@ export default {
       } else {
         if (setPostType !== 'All') {
           if (this.filteredPostTypes.includes(setPostType)) {
-            this.unsetAll()
+            this.unsetAllPostTypeFilters()
           } else {
-            // if not set then set and unset all others
+            // if 'setPostType' is not set then set it and unset all others
             this.toggleFilterPostType(setPostType)
-            this.postTypes.forEach((postType) => {
+            this.filterPostTypes.forEach((postType) => {
               if (postType !== setPostType)
                 if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
             })
           }
         } else {
-          this.unsetAll()
+          this.unsetAllPostTypeFilters()
         }
       }
     },
diff --git a/webapp/mixins/filterMenuMixin.js b/webapp/mixins/filterMenuMixin.js
new file mode 100644
index 000000000..47ac5c5c6
--- /dev/null
+++ b/webapp/mixins/filterMenuMixin.js
@@ -0,0 +1,24 @@
+import { mapGetters, mapMutations } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters({
+      filteredPostTypes: 'posts/filteredPostTypes',
+      currentUser: 'auth/user',
+    }),
+    noneSet() {
+      return !this.articleSet && !this.eventSet
+    },
+    articleSet() {
+      return this.filteredPostTypes.includes('Article')
+    },
+    eventSet() {
+      return this.filteredPostTypes.includes('Event')
+    },
+  },
+  methods: {
+    ...mapMutations({
+      toggleFilterPostType: 'posts/TOGGLE_POST_TYPE',
+    }),
+  },
+}