Implement or move sort by date filter in filter menu

webapp/components/Dropdown.vue

@@ -33,6 +33,7 @@ export default {
   data() {
     return {
       isPopoverOpen: false,
+      developperNoAutoClosing: true, // Wolle // stops automatic closing of menu for developper purposes: default is 'false'
     }
   },
   computed: {
@@ -113,6 +114,7 @@ export default {
       }
     },
     popoveMouseLeave() {
+      if (this.developperNoAutoClosing) return
       if (this.disabled) {
         return
       }

webapp/components/FilterMenu/DateSortFilter.vue

@@ -0,0 +1,56 @@
+<template>
+  <filter-menu-section :divider="false" class="date-sort-filter">
+    <template #filter-list>
+      <!-- Wolle 👇🏼 translations & click
+      <labeled-button
+        icon="user-plus"
+        :label="$t('filter-menu.following')"
+        :filled="filteredByUsersFollowed"
+        :title="$t('contribution.filterFollow')"
+        @click="toggleFilteredByFollowed(currentUser.id)"
+      /> -->
+      <li class="item">
+        <labeled-button
+          icon="sort-amount-asc"
+          :label="'Newest first'"
+          :filled="orderBy === 'createdAt_desc'"
+          :title="'Sort posts by the newest first'"
+          @click="toggleOrder('createdAt_desc')"
+        />
+      </li>
+      <li class="item">
+        <labeled-button
+          icon="sort-amount-desc"
+          :label="'Oldest first'"
+          :filled="orderBy === 'createdAt_asc'"
+          :title="'Sort posts by the oldest first'"
+          @click="toggleOrder('createdAt_asc')"
+        />
+      </li>
+    </template>
+  </filter-menu-section>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import FilterMenuSection from '~/components/FilterMenu/FilterMenuSection'
+import LabeledButton from '~/components/_new/generic/LabeledButton/LabeledButton'
+
+export default {
+  name: 'DateSortFilter',
+  components: {
+    FilterMenuSection,
+    LabeledButton,
+  },
+  computed: {
+    ...mapGetters({
+      orderBy: 'posts/orderBy',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      toggleOrder: 'posts/TOGGLE_ORDER',
+    }),
+  },
+}
+</script>

webapp/components/FilterMenu/FilterMenu.vue

@@ -15,6 +15,10 @@
         <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
         <following-filter />
       </div>
+      <div class="filter-menu-options">
+        <h2 class="title">{{ 'Sorted by …' }}</h2> <!-- Wolle -->
+        <date-sort-filter />
+      </div>
     </template>
   </dropdown>
 </template>
@@ -23,11 +27,13 @@
 import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import FollowingFilter from './FollowingFilter'
+import DateSortFilter from './DateSortFilter'
 
 export default {
   components: {
     Dropdown,
     FollowingFilter,
+    DateSortFilter,
   },
   props: {
     placement: { type: String },

webapp/components/FilterMenu/FilterMenuSection.vue

@@ -38,7 +38,10 @@ export default {
   }
 
   > .sidebar {
-    flex-basis: 12%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-basis: 80%;
+    flex-grow: 1;
     max-width: $size-width-filter-sidebar;
   }
 
@@ -55,21 +58,21 @@ export default {
     flex-grow: 1;
 
     > .item {
-      width: 12.5%;
+      width: 50%;
       padding: 0 $space-x-small;
       margin-bottom: $space-small;
       text-align: center;
 
       @media only screen and (max-width: 800px) {
-        width: 16%;
+        width: 50%;
       }
 
       @media only screen and (max-width: 630px) {
-        width: 25%;
+        width: 40%;
       }
 
       @media only screen and (max-width: 440px) {
-        width: 50%;
+        width: 30%;
       }
     }
   }

webapp/pages/index.spec.js

@@ -24,20 +24,21 @@ describe('PostIndex', () => {
     store = new Vuex.Store({
       getters: {
         'posts/filter': () => ({}),
-        'posts/orderOptions': () => () => [
-          {
-            key: 'store.posts.orderBy.oldest.label',
-            label: 'store.posts.orderBy.oldest.label',
-            icon: 'sort-amount-asc',
-            value: 'createdAt_asc',
-          },
-          {
-            key: 'store.posts.orderBy.newest.label',
-            label: 'store.posts.orderBy.newest.label',
-            icon: 'sort-amount-desc',
-            value: 'createdAt_desc',
-          },
-        ],
+        // Wolle
+        // 'posts/orderOptions': () => () => [
+        //   {
+        //     key: 'store.posts.orderBy.oldest.label',
+        //     label: 'store.posts.orderBy.oldest.label',
+        //     icon: 'sort-amount-asc',
+        //     value: 'createdAt_asc',
+        //   },
+        //   {
+        //     key: 'store.posts.orderBy.newest.label',
+        //     label: 'store.posts.orderBy.newest.label',
+        //     icon: 'sort-amount-desc',
+        //     value: 'createdAt_desc',
+        //   },
+        // ],
         'posts/selectedOrder': () => () => 'createdAt_desc',
         'posts/orderIcon': () => 'sort-amount-desc',
         'posts/orderBy': () => 'createdAt_desc',
@@ -119,10 +120,10 @@ describe('PostIndex', () => {
         })
       })
 
-      it('calls store when using order by menu', () => {
-        wrapper.findAll('li').at(0).trigger('click')
-        expect(mutations['posts/SELECT_ORDER']).toHaveBeenCalledWith({}, 'createdAt_asc')
-      })
+      // Wolle it('calls store when using order by menu', () => {
+      //   wrapper.findAll('li').at(0).trigger('click')
+      //   expect(mutations['posts/SELECT_ORDER']).toHaveBeenCalledWith({}, 'createdAt_asc')
+      // })
     })
   })
 })

webapp/pages/index.vue

@@ -97,7 +97,8 @@ import HcEmpty from '~/components/Empty/Empty'
 import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
-import { mapGetters, mapMutations } from 'vuex'
+// Wolle import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters } from 'vuex'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import UpdateQuery from '~/components/utils/UpdateQuery'
 import links from '~/constants/links.js'
@@ -129,24 +130,24 @@ export default {
   computed: {
     ...mapGetters({
       postsFilter: 'posts/filter',
-      orderOptions: 'posts/orderOptions',
+      // Wolle care for the store !!! orderOptions: 'posts/orderOptions',
       orderBy: 'posts/orderBy',
-      selectedOrder: 'posts/selectedOrder',
-      sortingIcon: 'posts/orderIcon',
+      // Wolle selectedOrder: 'posts/selectedOrder',
+      // Wolle sortingIcon: 'posts/orderIcon',
     }),
-    selected: {
-      get() {
-        return this.selectedOrder(this)
-      },
-      set({ value }) {
-        this.offset = 0
-        this.posts = []
-        this.selectOrder(value)
-      },
-    },
-    sortingOptions() {
-      return this.orderOptions(this)
-    },
+    // Wolle selected: {
+    //   get() {
+    //     return this.selectedOrder(this)
+    //   },
+    //   set({ value }) {
+    //     this.offset = 0
+    //     this.posts = []
+    //     this.selectOrder(value)
+    //   },
+    // },
+    // Wolle sortingOptions() {
+    //   return this.orderOptions(this)
+    // },
     finalFilters() {
       let filter = this.postsFilter
       if (this.hashtag) {
@@ -163,9 +164,9 @@ export default {
   },
   watchQuery: ['hashtag'],
   methods: {
-    ...mapMutations({
-      selectOrder: 'posts/SELECT_ORDER',
-    }),
+    // Wolle ...mapMutations({
+    //   selectOrder: 'posts/SELECT_ORDER',
+    // }),
     clearSearch() {
       this.$router.push({ path: '/' })
       this.hashtag = null

webapp/store/posts.js

@@ -7,25 +7,26 @@ import clone from 'lodash/clone'
 
 const defaultFilter = {}
 
-const orderOptions = {
-  createdAt_asc: {
-    value: 'createdAt_asc',
-    key: 'store.posts.orderBy.oldest.label',
-    icon: 'sort-amount-asc',
-  },
-  createdAt_desc: {
-    value: 'createdAt_desc',
-    key: 'store.posts.orderBy.newest.label',
-    icon: 'sort-amount-desc',
-  },
-}
+// Wolle const orderOptions = {
+//   createdAt_asc: {
+//     value: 'createdAt_asc',
+//     key: 'store.posts.orderBy.oldest.label',
+//     icon: 'sort-amount-asc',
+//   },
+//   createdAt_desc: {
+//     value: 'createdAt_desc',
+//     key: 'store.posts.orderBy.newest.label',
+//     icon: 'sort-amount-desc',
+//   },
+// }
 
 export const state = () => {
   return {
     filter: {
       ...defaultFilter,
     },
-    order: orderOptions.createdAt_desc,
+    // Wolle order: orderOptions.createdAt_desc,
+    order: 'createdAt_desc',
   }
 }
 
@@ -76,8 +77,9 @@ export const mutations = {
     if (isEmpty(get(filter, 'emotions_some.emotion_in'))) delete filter.emotions_some
     state.filter = filter
   },
-  SELECT_ORDER(state, value) {
-    state.order = orderOptions[value]
+  TOGGLE_ORDER(state, value) {
+    // Wolle state.order = orderOptions[value]
+    state.order = value
   },
 }
 
@@ -100,21 +102,22 @@ export const getters = {
   filteredByEmotions(state) {
     return get(state.filter, 'emotions_some.emotion_in') || []
   },
-  orderOptions: (state) => ({ $t }) =>
-    Object.values(orderOptions).map((option) => {
-      return {
-        ...option,
-        label: $t(option.key),
-      }
-    }),
+  // Wolle orderOptions: (state) => ({ $t }) =>
+  //   Object.values(orderOptions).map((option) => {
+  //     return {
+  //       ...option,
+  //       label: $t(option.key),
+  //     }
+  //   }),
   selectedOrder: (state) => ({ $t }) => {
     return {
       ...state.order,
       label: $t(state.order.key),
     }
   },
   orderBy(state) {
-    return state.order.value
+    // return state.order.value
+    return state.order
   },
   orderIcon(state) {
     return state.order.icon