Implement showing of only ended events on newsfeed

webapp/components/FilterMenu/EventsByFilter.vue

@@ -0,0 +1,47 @@
+<template>
+  <filter-menu-section class="order-by-filter" :title="sectionTitle" :divider="false">
+    <template #filter-list>
+      <li class="item">
+        <labeled-button
+          icon="check"
+          :label="$t('filter-menu.ended.all.label')"
+          :filled="eventsEnded === ''"
+          :title="$t('filter-menu.ended.all.hint')"
+          @click="setEventsEnded('')"
+          data-test="all-button"
+        />
+      </li>
+      <li class="item">
+        <labeled-button
+          icon="calendar"
+          :label="$t('filter-menu.ended.onlyEnded.label')"
+          :filled="eventsEnded === 'eventStart_gte'"
+          :title="$t('filter-menu.ended.onlyEnded.hint')"
+          @click="setEventsEnded('eventStart_gte')"
+          data-test="not-ended-button"
+        />
+      </li>
+    </template>
+  </filter-menu-section>
+</template>
+
+<script>
+import FilterMenuMixin from '~/mixins/filterMenuMixin.js'
+import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+
+export default {
+  name: 'EventsByFilter',
+  components: {
+    FilterMenuSection,
+    LabeledButton,
+  },
+  mixins: [FilterMenuMixin],
+  computed: {
+    sectionTitle() {
+      // return $t('filter-menu.eventsEnded')
+      return null
+    },
+  },
+}
+</script>

webapp/components/FilterMenu/FilterMenuComponent.vue

@@ -6,6 +6,10 @@
       <post-type-filter />
       <categories-filter v-if="categoriesActive" @showFilterMenu="$emit('showFilterMenu')" />
     </div>
+    <div v-if="eventSetInPostTypeFilter" class="filter-menu-options">
+      <h2 class="title">{{ $t('filter-menu.eventsBy') }}</h2>
+      <events-by-filter />
+    </div>
     <div class="filter-menu-options">
       <h2 class="title">{{ $t('filter-menu.order-by') }}</h2>
       <order-by-filter />
@@ -14,6 +18,8 @@
 </template>
 
 <script>
+import EventsByFilter from './EventsByFilter'
+import FilterMenuMixin from '~/mixins/filterMenuMixin.js'
 import PostTypeFilter from './PostTypeFilter'
 import FollowingFilter from './FollowingFilter'
 import OrderByFilter from './OrderByFilter'
@@ -21,11 +27,13 @@ import CategoriesFilter from './CategoriesFilter'
 
 export default {
   components: {
+    EventsByFilter,
     FollowingFilter,
     OrderByFilter,
     CategoriesFilter,
     PostTypeFilter,
   },
+  mixins: [FilterMenuMixin],
   data() {
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,

webapp/locales/de.json

@@ -385,7 +385,19 @@
     "creationDate": "Erstellungszeitpunkt",
     "deleteFilter": "Filter löschen",
     "emotions": "Emotionen",
+    "ended": {
+      "all": {
+        "hint": "Zeige alle, auch beendete",
+        "label": "Alle"
+      },
+      "onlyEnded": {
+        "hint": "Zeige nur noch nicht beendete",
+        "label": "Nicht beendete"
+      }
+    },
     "event": "Veranstaltung",
+    "eventsBy": "Veranstaltungen – zeige ...",
+    "eventsEnded": "Beendet",
     "filter-by": "Filtern nach ...",
     "following": "Nutzer denen ich folge",
     "languages": "Sprachen",

webapp/locales/en.json

@@ -385,7 +385,19 @@
     "creationDate": "Creation date",
     "deleteFilter": "Delete filter",
     "emotions": "Emotions",
+    "ended": {
+      "all": {
+        "hint": "Show all, also ended",
+        "label": "All"
+      },
+      "onlyEnded": {
+        "hint": "Show only not ended",
+        "label": "Not ended"
+      }
+    },
     "event": "Event",
+    "eventsBy": "Events – show ...",
+    "eventsEnded": "Ended",
     "filter-by": "Filter by ...",
     "following": "Users I follow",
     "languages": "Languages",

webapp/mixins/filterMenuMixin.js

@@ -14,6 +14,7 @@ export default {
     ...mapGetters({
       currentUser: 'auth/user',
       filteredPostTypes: 'posts/filteredPostTypes',
+      eventsEnded: 'posts/eventsEnded',
       orderBy: 'posts/orderBy',
     }),
     noneSetInPostTypeFilter() {
@@ -32,15 +33,19 @@ export default {
   methods: {
     ...mapMutations({
       toggleFilterPostType: 'posts/TOGGLE_POST_TYPE',
+      toggleEventsEnded: 'posts/TOGGLE_EVENTS_ENDED',
       toggleOrder: 'posts/TOGGLE_ORDER',
     }),
     unsetAllPostTypeFilters() {
+      const beforeEventSetInPostTypeFilter = this.eventSetInPostTypeFilter
       this.filterPostTypes.forEach((postType) => {
         if (this.filteredPostTypes.includes(postType)) this.toggleFilterPostType(postType)
       })
+      this.adjustEventsEnded(beforeEventSetInPostTypeFilter)
       this.adjustOrder()
     },
     setUnsetPostTypeFilter(setPostType) {
+      const beforeEventSetInPostTypeFilter = this.eventSetInPostTypeFilter
       if (this.noneSetInPostTypeFilter) {
         if (setPostType !== 'All') this.toggleFilterPostType(setPostType)
       } else {
@@ -59,11 +64,24 @@ export default {
           this.unsetAllPostTypeFilters()
         }
       }
+      this.adjustEventsEnded(beforeEventSetInPostTypeFilter)
       this.adjustOrder()
     },
+    setEventsEnded(newEventsEnded) {
+      this.toggleEventsEnded(newEventsEnded)
+    },
     setOrder(newOrder) {
       this.toggleOrder(newOrder)
     },
+    adjustEventsEnded(beforeEventSetInPostTypeFilter) {
+      if (this.eventSetInPostTypeFilter !== beforeEventSetInPostTypeFilter) {
+        if (this.eventSetInPostTypeFilter) {
+          this.setEventsEnded('eventStart_gte')
+        } else {
+          this.setEventsEnded('')
+        }
+      }
+    },
     adjustOrder() {
       if (this.orderedByCreationDate) {
         if (!this.orderByTypes.creationDate.includes(this.orderBy)) {

webapp/pages/index.vue

@@ -197,11 +197,10 @@ export default {
     },
     finalFilters() {
       let filter = this.postsFilter
-      if (this.hashtag) {
-        filter = {
-          ...filter,
-          tags_some: { id: this.hashtag },
-        }
+      filter = {
+        ...filter,
+        tags_some: this.hashtag ? { id: this.hashtag } : undefined,
+        eventStart_gte: this.eventsEnded === 'eventStart_gte' ? new Date() : undefined,
       }
       return filter
     },

webapp/store/posts.js

@@ -13,6 +13,7 @@ export const state = () => {
       ...defaultFilter,
     },
     order: 'createdAt_desc',
+    eventsEnded: '',
   }
 }
 
@@ -84,6 +85,9 @@ export const mutations = {
   TOGGLE_ORDER(state, value) {
     state.order = value
   },
+  TOGGLE_EVENTS_ENDED(state, value) {
+    state.eventsEnded = value
+  },
 }
 
 export const getters = {
@@ -111,6 +115,9 @@ export const getters = {
   filteredByEmotions(state) {
     return get(state.filter, 'emotions_some.emotion_in') || []
   },
+  eventsEnded(state) {
+    return state.eventsEnded
+  },
   orderBy(state) {
     return state.order
   },