From c129c3fbae291b51d42d331213a23e3d29331c6e Mon Sep 17 00:00:00 2001 From: roschaefer Date: Thu, 5 Sep 2019 17:22:04 +0200 Subject: [PATCH 1/6] Admin page handles loading and error state --- webapp/graphql/admin/Statistics.js | 15 ++ webapp/locales/de.json | 1 + webapp/locales/en.json | 1 + webapp/pages/admin/index.vue | 227 ++++++++++++++++------------- 4 files changed, 142 insertions(+), 102 deletions(-) create mode 100644 webapp/graphql/admin/Statistics.js diff --git a/webapp/graphql/admin/Statistics.js b/webapp/graphql/admin/Statistics.js new file mode 100644 index 000000000..94c3f91f0 --- /dev/null +++ b/webapp/graphql/admin/Statistics.js @@ -0,0 +1,15 @@ +import gql from 'graphql-tag' + +export const Statistics = gql` + query { + statistics { + countUsers + countPosts + countComments + countNotifications + countInvites + countFollows + countShouts + } + } +` diff --git a/webapp/locales/de.json b/webapp/locales/de.json index 506cefde2..0d283f8af 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -22,6 +22,7 @@ }, "site": { "thanks": "Danke!", + "error-occurred": "Ein Fehler ist aufgetreten.", "made": "Mit ❤ gemacht", "imprint": "Impressum", "data-privacy": "Datenschutz", diff --git a/webapp/locales/en.json b/webapp/locales/en.json index 05d8ac631..b1283c9b2 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -22,6 +22,7 @@ }, "site": { "thanks": "Thanks!", + "error-occurred": "An error occurred.", "made": "Made with ❤", "imprint": "Imprint", "termsAndConditions": "Terms and conditions", diff --git a/webapp/pages/admin/index.vue b/webapp/pages/admin/index.vue index 17d756fbd..b966fd416 100644 --- a/webapp/pages/admin/index.vue +++ b/webapp/pages/admin/index.vue @@ -1,90 +1,134 @@ From c61b03483e51a9047d525462fe8e15ef1ae8bf2d Mon Sep 17 00:00:00 2001 From: roschaefer Date: Thu, 5 Sep 2019 18:14:24 +0200 Subject: [PATCH 2/6] Failed to write a test for admin/index.vue I am not able to properly mock the data for ApolloQuery. However I find it valuable to push this particular piece of dead code. Maybe people find it helpful. --- webapp/pages/admin/index.spec.js | 53 ++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 webapp/pages/admin/index.spec.js diff --git a/webapp/pages/admin/index.spec.js b/webapp/pages/admin/index.spec.js new file mode 100644 index 000000000..68256aa9d --- /dev/null +++ b/webapp/pages/admin/index.spec.js @@ -0,0 +1,53 @@ +import { mount, createLocalVue } from '@vue/test-utils' +import AdminIndexPage from './index.vue' +import Styleguide from '@human-connection/styleguide' +import VueApollo from 'vue-apollo' + +const localVue = createLocalVue() + +localVue.use(Styleguide) +localVue.use(VueApollo) + +describe('admin/index.vue', () => { + let Wrapper + let store + let mocks + + beforeEach(() => { + mocks = { + $t: jest.fn(), + } + }) + + describe('mount', () => { + Wrapper = () => { + return mount(AdminIndexPage, { + store, + mocks, + localVue, + }) + } + + describe('in loading state', () => { + beforeEach(() => { + mocks = { ...mocks, $apolloData: { loading: true } } + }) + + it.skip('shows a loading spinner', () => { + // I don't know how to mock the data that gets passed to + // ApolloQuery component + // What I found: + // https://github.com/Akryum/vue-apollo/issues/656 + // https://github.com/Akryum/vue-apollo/issues/609 + Wrapper() + const calls = mocks.$t.mock.calls + const expected = [['site.error-occurred']] + expect(calls).toEqual(expected) + }) + }) + + describe('in error state', () => { + it.todo('displays an error message') + }) + }) +}) From 0b464bf596f72113ee41b58c55c7772d6b12896b Mon Sep 17 00:00:00 2001 From: roschaefer Date: Fri, 6 Sep 2019 10:22:11 +0200 Subject: [PATCH 3/6] Fix leftover of #1479 --- webapp/pages/profile/_id/_slug.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue index edefe6be0..ae1d6c0e4 100644 --- a/webapp/pages/profile/_id/_slug.vue +++ b/webapp/pages/profile/_id/_slug.vue @@ -388,7 +388,7 @@ export default { resetPostList() { this.offset = 0 this.posts = [] - this.hasMore = false + this.hasMore = true }, async block(user) { await this.$apollo.mutate({ mutation: Block(), variables: { id: user.id } }) From d3ad06a5f01131fdfe6cd899d53f7beeede039f7 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Fri, 6 Sep 2019 12:17:09 +0200 Subject: [PATCH 4/6] Fix preview image craziness - depending on the size of the image, the preview looked really blurry Also, the preview image differed from the image on the PostCard --- webapp/components/TeaserImage/TeaserImage.vue | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue index cb657fe9a..6a3adff7d 100644 --- a/webapp/components/TeaserImage/TeaserImage.vue +++ b/webapp/components/TeaserImage/TeaserImage.vue @@ -75,18 +75,21 @@ export default { return '' }, thumbnail: (file, dataUrl) => { - let thumbnailElement, contributionImage, uploadArea + let thumbnailElement, contributionImage, uploadArea, thumbnailPreview, image if (file.previewElement) { thumbnailElement = document.querySelectorAll('#postdropzone')[0] contributionImage = document.querySelectorAll('.contribution-image')[0] + thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0] if (contributionImage) { uploadArea = document.querySelectorAll('.hc-attachments-upload-area-update-post')[0] uploadArea.removeChild(contributionImage) uploadArea.classList.remove('hc-attachments-upload-area-update-post') } - thumbnailElement.classList.add('image-preview') - thumbnailElement.alt = file.name - thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")' + image = new Image() + image.src = URL.createObjectURL(file) + image.classList.add('thumbnail-preview') + if (thumbnailPreview) return thumbnailElement.replaceChild(image, thumbnailPreview) + thumbnailElement.appendChild(image) } }, }, @@ -99,24 +102,23 @@ export default { background-color: $background-color-softest; } -#postdropzone.image-preview { - background-repeat: no-repeat; - background-size: cover; - background-position: center; - height: auto; - transition: all 0.2s ease-out; - +#postdropzone img { width: 100%; + max-height: 300px; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; } @media only screen and (max-width: 400px) { - #postdropzone.image-preview { + #postdropzone.thumbnail-preview { height: 200px; } } @media only screen and (min-width: 401px) and (max-width: 960px) { - #postdropzone.image-preview { + #postdropzone.thumbnail-preview { height: 300px; } } From daf1ae864c9135bffe96fe899146e4b62f69a2d8 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Fri, 6 Sep 2019 13:08:28 +0200 Subject: [PATCH 5/6] Reuse css from ds-card-image, consistent width - the width of the contribution form is now the same as the post card --- .../ContributionForm/ContributionForm.vue | 14 +++++----- webapp/components/TeaserImage/TeaserImage.vue | 27 +++++-------------- webapp/pages/post/create.vue | 2 +- 3 files changed, 14 insertions(+), 29 deletions(-) diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index 43f9f3d8c..9ff43d236 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -1,14 +1,14 @@