From 16d8a42d9b4f90e8a1c22da0637f95adb25b4e8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Mon, 12 Apr 2021 15:09:28 +0200 Subject: [PATCH] Implement or move sort by date filter in filter menu --- webapp/components/Dropdown.vue | 2 + .../components/FilterMenu/DateSortFilter.vue | 56 +++++++++++++++++++ webapp/components/FilterMenu/FilterMenu.vue | 6 ++ .../FilterMenu/FilterMenuSection.vue | 13 +++-- webapp/pages/index.spec.js | 37 ++++++------ webapp/pages/index.vue | 41 +++++++------- webapp/store/posts.js | 49 ++++++++-------- webapp/store/posts.spec.js | 56 ++++++++++--------- 8 files changed, 167 insertions(+), 93 deletions(-) create mode 100644 webapp/components/FilterMenu/DateSortFilter.vue diff --git a/webapp/components/Dropdown.vue b/webapp/components/Dropdown.vue index 6a5d07083e..9df50cb3f4 100644 --- a/webapp/components/Dropdown.vue +++ b/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 } diff --git a/webapp/components/FilterMenu/DateSortFilter.vue b/webapp/components/FilterMenu/DateSortFilter.vue new file mode 100644 index 0000000000..f43fc99cc5 --- /dev/null +++ b/webapp/components/FilterMenu/DateSortFilter.vue @@ -0,0 +1,56 @@ + + + diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue index 94d9506896..bc7804343e 100644 --- a/webapp/components/FilterMenu/FilterMenu.vue +++ b/webapp/components/FilterMenu/FilterMenu.vue @@ -15,6 +15,10 @@

{{ $t('filter-menu.filter-by') }}

+
+

{{ 'Sorted by …' }}

+ +
@@ -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 }, diff --git a/webapp/components/FilterMenu/FilterMenuSection.vue b/webapp/components/FilterMenu/FilterMenuSection.vue index 9100867abc..f4397701ff 100644 --- a/webapp/components/FilterMenu/FilterMenuSection.vue +++ b/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%; } } } diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js index eb65e485c1..644efa868f 100644 --- a/webapp/pages/index.spec.js +++ b/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') + // }) }) }) }) diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 96e2532f12..4d2168fa4e 100644 --- a/webapp/pages/index.vue +++ b/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 diff --git a/webapp/store/posts.js b/webapp/store/posts.js index 4d1e6e0979..39a1567b4c 100644 --- a/webapp/store/posts.js +++ b/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,13 +102,13 @@ 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, @@ -114,7 +116,8 @@ export const getters = { } }, orderBy(state) { - return state.order.value + // return state.order.value + return state.order }, orderIcon(state) { return state.order.icon diff --git a/webapp/store/posts.spec.js b/webapp/store/posts.spec.js index 9aed0a351c..b74798c848 100644 --- a/webapp/store/posts.spec.js +++ b/webapp/store/posts.spec.js @@ -80,35 +80,36 @@ describe('getters', () => { }) }) - describe('orderByOptions', () => { - it('returns all options regardless of current state', () => { - const $t = jest.fn((t) => t) - expect(getters.orderOptions()({ $t })).toEqual([ - { - 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 describe('orderByOptions', () => { + // it('returns all options regardless of current state', () => { + // const $t = jest.fn((t) => t) + // expect(getters.orderOptions()({ $t })).toEqual([ + // { + // 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', + // }, + // ]) + // }) + // }) describe('orderBy', () => { it('returns value for graphql query', () => { state = { - order: { - key: 'store.posts.orderBy.newest.label', - label: 'store.posts.orderBy.newest.label', - icon: 'sort-amount-desc', - value: 'createdAt_desc', - }, + // Wolle order: { + // key: 'store.posts.orderBy.newest.label', + // label: 'store.posts.orderBy.newest.label', + // icon: 'sort-amount-desc', + // value: 'createdAt_desc', + // }, + order: 'createdAt_desc', } expect(getters.orderBy(state)).toEqual('createdAt_desc') }) @@ -255,13 +256,14 @@ describe('mutations', () => { }) }) - describe('SELECT_ORDER', () => { + describe('TOGGLE_ORDER', () => { beforeEach(() => { testMutation = (key) => { - mutations.SELECT_ORDER(state, key) + mutations.TOGGLE_ORDER(state, key) return getters.orderBy(state) } }) + it('switches the currently selected order', () => { state = { // does not matter