From 371e83404c4867da48ce55f61fcf3ba06eb3aeca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 8 Apr 2021 15:58:23 +0200 Subject: [PATCH 01/40] Implement progress bar again, first step --- webapp/components/CommentForm/CommentForm.vue | 2 +- .../components/DonationInfo/DonationInfo.vue | 15 ++- webapp/components/ProgressBar/ProgressBar.vue | 62 +++++----- webapp/constants/donations.js | 2 + webapp/constants/newsfeed.js | 1 + webapp/pages/index.vue | 114 +++++++++++------- 6 files changed, 120 insertions(+), 76 deletions(-) create mode 100644 webapp/constants/donations.js create mode 100644 webapp/constants/newsfeed.js diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue index 4bdb95f90..5f6a2420d 100644 --- a/webapp/components/CommentForm/CommentForm.vue +++ b/webapp/components/CommentForm/CommentForm.vue @@ -23,7 +23,7 @@ diff --git a/webapp/components/ProgressBar/ProgressBar.vue b/webapp/components/ProgressBar/ProgressBar.vue index 4216042a7..4eee12af7 100644 --- a/webapp/components/ProgressBar/ProgressBar.vue +++ b/webapp/components/ProgressBar/ProgressBar.vue @@ -1,10 +1,17 @@ @@ -39,7 +46,7 @@ export default { .progress-bar { position: relative; height: 100%; - width: 240px; + width: 150px; margin-right: $space-x-small; // @media (max-width: 680px) { @@ -56,16 +63,16 @@ export default { // Wolle // position: absolute; // top: -2px; - // left: $space-xx-small; + margin-left: $space-xxx-small; // margin: 0; - // @media (max-width: 546px) { - // top: $space-xx-small; - // } + @media (max-width: 546px) { + top: $space-xx-small; + } - // @media (max-width: 350px) { - // font-size: $font-size-small; - // } + @media (max-width: 350px) { + font-size: $font-size-small; + } } .progress-bar__goal { @@ -92,10 +99,10 @@ export default { // Wolle // position: absolute; // top: 50px; - // left: $space-xx-small; + margin-left: $space-xxx-small; - // @media (max-width: 350px) { - // font-size: $font-size-small; - // } + @media (max-width: 350px) { + font-size: $font-size-small; + } } diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue index 5e39dc96a..96e2532f1 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -1,17 +1,19 @@ + + + + diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue index 94d950689..bc7804343 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 9100867ab..f4397701f 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 eb65e485c..644efa868 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 96e2532f1..4d2168fa4 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 4d1e6e097..39a1567b4 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 9aed0a351..b74798c84 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 From 245be52ac8d9e41998da10cf2d1a752bbefc0c0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Mon, 12 Apr 2021 15:52:15 +0200 Subject: [PATCH 04/40] Translate order by - Cleanup the store. - Fix tests. --- .../components/FilterMenu/DateSortFilter.vue | 16 +++-------- webapp/components/FilterMenu/FilterMenu.vue | 2 +- webapp/locales/de.json | 27 +++++++++---------- webapp/locales/en.json | 27 +++++++++---------- webapp/locales/es.json | 26 +++++++++--------- webapp/locales/fr.json | 26 +++++++++--------- webapp/locales/it.json | 24 ++++++++--------- webapp/locales/pt.json | 26 +++++++++--------- webapp/locales/ru.json | 26 +++++++++--------- webapp/pages/index.spec.js | 4 +-- webapp/store/posts.js | 18 ++++++------- 11 files changed, 101 insertions(+), 121 deletions(-) diff --git a/webapp/components/FilterMenu/DateSortFilter.vue b/webapp/components/FilterMenu/DateSortFilter.vue index f43fc99cc..2bba02ec9 100644 --- a/webapp/components/FilterMenu/DateSortFilter.vue +++ b/webapp/components/FilterMenu/DateSortFilter.vue @@ -1,29 +1,21 @@ diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js index 79deb3b80..740bf535c 100644 --- a/webapp/pages/index.spec.js +++ b/webapp/pages/index.spec.js @@ -24,23 +24,6 @@ describe('PostIndex', () => { store = new Vuex.Store({ getters: { 'posts/filter': () => ({}), - // 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', 'auth/user': () => { return { id: 'u23' } @@ -119,11 +102,6 @@ describe('PostIndex', () => { localVue, }) }) - - // 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 4d2168fa4..7041f0fa5 100644 --- a/webapp/pages/index.vue +++ b/webapp/pages/index.vue @@ -97,7 +97,6 @@ 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' -// Wolle import { mapGetters, mapMutations } from 'vuex' import { mapGetters } from 'vuex' import { filterPosts } from '~/graphql/PostQuery.js' import UpdateQuery from '~/components/utils/UpdateQuery' @@ -130,24 +129,8 @@ export default { computed: { ...mapGetters({ postsFilter: 'posts/filter', - // Wolle care for the store !!! orderOptions: 'posts/orderOptions', orderBy: 'posts/orderBy', - // Wolle selectedOrder: 'posts/selectedOrder', - // Wolle sortingIcon: 'posts/orderIcon', }), - // 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) { @@ -164,9 +147,6 @@ export default { }, watchQuery: ['hashtag'], methods: { - // 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 b9efe1870..5d9891eff 100644 --- a/webapp/store/posts.js +++ b/webapp/store/posts.js @@ -7,25 +7,11 @@ import clone from 'lodash/clone' const defaultFilter = {} -// 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, }, - // Wolle order: orderOptions.createdAt_desc, order: 'createdAt_desc', } } @@ -78,7 +64,6 @@ export const mutations = { state.filter = filter }, TOGGLE_ORDER(state, value) { - // Wolle state.order = orderOptions[value] state.order = value }, } @@ -102,24 +87,7 @@ export const getters = { filteredByEmotions(state) { return get(state.filter, 'emotions_some.emotion_in') || [] }, - // Wolle orderOptions: (state) => ({ $t }) => - // Object.values(orderOptions).map((option) => { - // return { - // ...option, - // label: $t(option.key), - // } - // }), - // Wolle selectedOrder: (state) => ({ $t }) => { - // return { - // ...state.order, - // label: $t(state.order.key), - // } - // }, orderBy(state) { - // return state.order.value return state.order }, - // Wolle orderIcon(state) { - // return state.order.icon - // }, } diff --git a/webapp/store/posts.spec.js b/webapp/store/posts.spec.js index b74798c84..ed728bdd8 100644 --- a/webapp/store/posts.spec.js +++ b/webapp/store/posts.spec.js @@ -80,35 +80,9 @@ describe('getters', () => { }) }) - // 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 = { - // 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') From c2cf89447b47ee2b753037b67828119a0de6c8cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Tue, 13 Apr 2021 10:16:51 +0200 Subject: [PATCH 06/40] Rename newsfeed sorting to ordered by - Fix a test. --- webapp/components/FilterMenu/FilterMenu.vue | 6 +++--- .../FilterMenu/{DateSortFilter.vue => OrderByFilter.vue} | 4 ++-- webapp/pages/index.spec.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) rename webapp/components/FilterMenu/{DateSortFilter.vue => OrderByFilter.vue} (92%) diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue index 9b12aa5f2..4a13b3e01 100644 --- a/webapp/components/FilterMenu/FilterMenu.vue +++ b/webapp/components/FilterMenu/FilterMenu.vue @@ -17,7 +17,7 @@

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

- +
@@ -27,13 +27,13 @@ import Dropdown from '~/components/Dropdown' import { mapGetters } from 'vuex' import FollowingFilter from './FollowingFilter' -import DateSortFilter from './DateSortFilter' +import OrderByFilter from './OrderByFilter' export default { components: { Dropdown, FollowingFilter, - DateSortFilter, + OrderByFilter, }, props: { placement: { type: String }, diff --git a/webapp/components/FilterMenu/DateSortFilter.vue b/webapp/components/FilterMenu/OrderByFilter.vue similarity index 92% rename from webapp/components/FilterMenu/DateSortFilter.vue rename to webapp/components/FilterMenu/OrderByFilter.vue index 2bba02ec9..dcc01fa58 100644 --- a/webapp/components/FilterMenu/DateSortFilter.vue +++ b/webapp/components/FilterMenu/OrderByFilter.vue @@ -1,5 +1,5 @@