Implement order by start date for events

webapp/components/FilterMenu/OrderByFilter.vue

@@ -1,28 +1,23 @@
 <template>
-  <filter-menu-section
-    v-if="noneSetInPostTypeFilter || articleSetInPostTypeFilter"
-    class="order-by-filter"
-    :title="$t('filter-menu.creationDate')"
-    :divider="false"
-  >
+  <filter-menu-section class="order-by-filter" :title="sectionTitle" :divider="false">
     <template #filter-list>
       <li class="item">
         <labeled-button
           icon="sort-amount-asc"
-          :label="$t('filter-menu.order.newest.label')"
-          :filled="orderBy === 'createdAt_desc'"
-          :title="$t('filter-menu.order.newest.hint')"
-          @click="toggleOrder('createdAt_desc')"
+          :label="buttonLable('desc')"
+          :filled="orderBy === orderedDesc"
+          :title="buttonTitle('desc')"
+          @click="setOrder(orderedDesc)"
           data-test="newest-button"
         />
       </li>
       <li class="item">
         <labeled-button
           icon="sort-amount-desc"
-          :label="$t('filter-menu.order.oldest.label')"
-          :filled="orderBy === 'createdAt_asc'"
-          :title="$t('filter-menu.order.oldest.hint')"
-          @click="toggleOrder('createdAt_asc')"
+          :label="buttonLable('asc')"
+          :filled="orderBy === orderedAsc"
+          :title="buttonTitle('asc')"
+          @click="setOrder(orderedAsc)"
           data-test="oldest-button"
         />
       </li>
@@ -31,7 +26,6 @@
 </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'
@@ -44,14 +38,67 @@ export default {
   },
   mixins: [FilterMenuMixin],
   computed: {
-    ...mapGetters({
-      orderBy: 'posts/orderBy',
-    }),
+    orderedAsc() {
+      return this.orderedByCreationDate ? 'createdAt_asc' : 'eventStart_desc'
+    },
+    orderedDesc() {
+      return this.orderedByCreationDate ? 'createdAt_desc' : 'eventStart_asc'
+    },
+    sectionTitle() {
+      return this.orderedByCreationDate
+        ? this.$t('filter-menu.creationDate')
+        : this.$t('filter-menu.startDate')
+    },
   },
   methods: {
-    ...mapMutations({
-      toggleOrder: 'posts/TOGGLE_ORDER',
-    }),
+    buttonLable(buttonType) {
+      let title
+      switch (buttonType) {
+        case 'asc':
+          if (this.orderedByCreationDate) {
+            title = this.$t('filter-menu.order.oldest.label')
+          } else {
+            title = this.$t('filter-menu.order.last.label')
+          }
+          break
+        case 'desc':
+          if (this.orderedByCreationDate) {
+            title = this.$t('filter-menu.order.newest.label')
+          } else {
+            title = this.$t('filter-menu.order.next.label')
+          }
+          break
+
+        default:
+          title = ''
+          break
+      }
+      return title
+    },
+    buttonTitle(buttonType) {
+      let title
+      switch (buttonType) {
+        case 'asc':
+          if (this.orderedByCreationDate) {
+            title = this.$t('filter-menu.order.oldest.hint')
+          } else {
+            title = this.$t('filter-menu.order.last.hint')
+          }
+          break
+        case 'desc':
+          if (this.orderedByCreationDate) {
+            title = this.$t('filter-menu.order.newest.hint')
+          } else {
+            title = this.$t('filter-menu.order.next.hint')
+          }
+          break
+
+        default:
+          title = ''
+          break
+      }
+      return title
+    },
   },
 }
 </script>

webapp/components/FilterMenu/PostTypeFilter.vue

@@ -48,37 +48,5 @@ export default {
     LabeledButton,
   },
   mixins: [FilterMenuMixin],
-  data() {
-    return {
-      filterPostTypes: ['Article', 'Event'],
-    }
-  },
-  methods: {
-    unsetAllPostTypeFilters() {
-      this.filterPostTypes.forEach((postType) => {
-        if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
-      })
-    },
-    setUnsetPostTypeFilter(setPostType) {
-      if (this.noneSetInPostTypeFilter) {
-        if (setPostType !== 'All') this.toggleFilterPostType(setPostType)
-      } else {
-        if (setPostType !== 'All') {
-          if (this.filteredPostTypes.includes(setPostType)) {
-            this.unsetAllPostTypeFilters()
-          } else {
-            // if 'setPostType' is not set then set it and unset all others
-            this.toggleFilterPostType(setPostType)
-            this.filterPostTypes.forEach((postType) => {
-              if (postType !== setPostType)
-                if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
-            })
-          }
-        } else {
-          this.unsetAllPostTypeFilters()
-        }
-      }
-    },
-  },
 }
 </script>

webapp/locales/de.json

@@ -380,7 +380,7 @@
     "all": "Alle",
     "article": "Beitrag",
     "categories": "Themen",
-    "creationDate": "Erstellungsdatum",
+    "creationDate": "Erstellungszeitpunkt",
     "deleteFilter": "Filter löschen",
     "emotions": "Emotionen",
     "event": "Veranstaltung",
@@ -389,10 +389,18 @@
     "languages": "Sprachen",
     "my-groups": "Meinen Gruppen",
     "order": {
+      "last": {
+        "hint": "Sortiere die Letzten nach vorn",
+        "label": "Letzte zuerst"
+      },
       "newest": {
         "hint": "Sortiere die Neuesten nach vorn",
         "label": "Neueste zuerst"
       },
+      "next": {
+        "hint": "Sortiere die Nächsten nach vorn",
+        "label": "Nächste zuerst"
+      },
       "oldest": {
         "hint": "Sortiere die Ältesten nach vorn",
         "label": "Älteste zuerst"
@@ -403,7 +411,8 @@
     "save": {
       "error": "Themen konnten nicht gespeichert werden!",
       "success": "Themen gespeichert!"
-    }
+    },
+    "startDate": "Anfangszeitpunkt"
   },
   "followButton": {
     "follow": "Folgen",

webapp/locales/en.json

@@ -389,10 +389,18 @@
     "languages": "Languages",
     "my-groups": "My groups",
     "order": {
+      "last": {
+        "hint": "Sort posts by the last first",
+        "label": "Last first"
+      },
       "newest": {
         "hint": "Sort posts by the newest first",
         "label": "Newest first"
       },
+      "next": {
+        "hint": "Sort posts by the next first",
+        "label": "Next first"
+      },
       "oldest": {
         "hint": "Sort posts by the oldest first",
         "label": "Oldest first"
@@ -403,7 +411,8 @@
     "save": {
       "error": "Failed saving topic settings!",
       "success": "Topics saved!"
-    }
+    },
+    "startDate": "Start date"
   },
   "followButton": {
     "follow": "Follow",

webapp/mixins/filterMenuMixin.js

@@ -1,10 +1,20 @@
 import { mapGetters, mapMutations } from 'vuex'
 
 export default {
+  data() {
+    return {
+      filterPostTypes: ['Article', 'Event'],
+      orderByTypes: {
+        creationDate: ['createdAt_asc', 'createdAt_desc'],
+        startDate: ['eventStart_asc', 'eventStart_desc'],
+      },
+    }
+  },
   computed: {
     ...mapGetters({
-      filteredPostTypes: 'posts/filteredPostTypes',
       currentUser: 'auth/user',
+      filteredPostTypes: 'posts/filteredPostTypes',
+      orderBy: 'posts/orderBy',
     }),
     noneSetInPostTypeFilter() {
       return !this.articleSetInPostTypeFilter && !this.eventSetInPostTypeFilter
@@ -15,10 +25,55 @@ export default {
     eventSetInPostTypeFilter() {
       return this.filteredPostTypes.includes('Event')
     },
+    orderedByCreationDate() {
+      return this.noneSetInPostTypeFilter || this.articleSetInPostTypeFilter
+    },
   },
   methods: {
     ...mapMutations({
       toggleFilterPostType: 'posts/TOGGLE_POST_TYPE',
+      toggleOrder: 'posts/TOGGLE_ORDER',
     }),
+    unsetAllPostTypeFilters() {
+      this.filterPostTypes.forEach((postType) => {
+        if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
+      })
+      this.adjustOrder()
+    },
+    setUnsetPostTypeFilter(setPostType) {
+      if (this.noneSetInPostTypeFilter) {
+        if (setPostType !== 'All') this.toggleFilterPostType(setPostType)
+      } else {
+        if (setPostType !== 'All') {
+          if (this.filteredPostTypes.includes(setPostType)) {
+            this.unsetAllPostTypeFilters()
+          } else {
+            // if 'setPostType' is not set then set it and unset all others
+            this.toggleFilterPostType(setPostType)
+            this.filterPostTypes.forEach((postType) => {
+              if (postType !== setPostType)
+                if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
+            })
+          }
+        } else {
+          this.unsetAllPostTypeFilters()
+        }
+      }
+      this.adjustOrder()
+    },
+    setOrder(newOrder) {
+      this.toggleOrder(newOrder)
+    },
+    adjustOrder() {
+      if (this.orderedByCreationDate) {
+        if (!this.orderByTypes.creationDate.includes(this.orderBy)) {
+          this.setOrder('createdAt_desc')
+        }
+      } else {
+        if (!this.orderByTypes.startDate.includes(this.orderBy)) {
+          this.setOrder('eventStart_asc')
+        }
+      }
+    },
   },
 }