From 72e4d0abbcb9abab07f3fd12876453eb1de5da4c Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 10 Dec 2019 00:09:30 +0100 Subject: [PATCH] Basic Search Is Working For Users And Posts The story of SearchInput.vue throws errors because of line 81, dateTime. What must be included to fix this? The search results shown by the frontend are sometimes differnt from the response of the backend. It shows no results found though there are results incoming. Tests are not implemented yet. --- .../src/middleware/permissionsMiddleware.js | 2 +- backend/src/schema/resolvers/searches.js | 2 +- backend/src/schema/types/type/Search.gql | 2 +- .../SearchInput/SearchInput.story.js | 38 +- webapp/components/SearchInput/SearchInput.vue | 606 +++++++++--------- webapp/layouts/default.vue | 24 +- webapp/locales/de.json | 6 +- webapp/locales/en.json | 6 +- webapp/store/search.js | 30 +- 9 files changed, 371 insertions(+), 345 deletions(-) diff --git a/backend/src/middleware/permissionsMiddleware.js b/backend/src/middleware/permissionsMiddleware.js index 7e09bc1df..57f6c7d0c 100644 --- a/backend/src/middleware/permissionsMiddleware.js +++ b/backend/src/middleware/permissionsMiddleware.js @@ -85,7 +85,7 @@ export default shield( '*': deny, findPosts: allow, findUsers: allow, - findAnything: allow, + findResources: allow, embed: allow, Category: allow, Tag: allow, diff --git a/backend/src/schema/resolvers/searches.js b/backend/src/schema/resolvers/searches.js index 2c6896186..8fb418718 100644 --- a/backend/src/schema/resolvers/searches.js +++ b/backend/src/schema/resolvers/searches.js @@ -11,7 +11,7 @@ export default { }, }, Query: { - findAnything: async (_parent, args, context, _resolveInfo) => { + findResources: async (_parent, args, context, _resolveInfo) => { const query = args.query const filter = {} const limit = args.limit diff --git a/backend/src/schema/types/type/Search.gql b/backend/src/schema/types/type/Search.gql index 08aa2a142..2c22fa61f 100644 --- a/backend/src/schema/types/type/Search.gql +++ b/backend/src/schema/types/type/Search.gql @@ -1,5 +1,5 @@ union SearchResult = Post | User type Query { - findAnything(query: String!, limit: Int = 5): [SearchResult]! + findResources(query: String!, limit: Int = 5): [SearchResult]! } diff --git a/webapp/components/SearchInput/SearchInput.story.js b/webapp/components/SearchInput/SearchInput.story.js index e833c817e..0ae47e24f 100644 --- a/webapp/components/SearchInput/SearchInput.story.js +++ b/webapp/components/SearchInput/SearchInput.story.js @@ -6,16 +6,14 @@ import helpers from '~/storybook/helpers' helpers.init() export const results = [ - { - heading: 'Contributions' - }, { id: 'de100841-2336-4b01-a574-f1bd2c0b262a', - searchType: 'Contributions', + __typename: 'Post', slug: 'user-post-by-jenny', - label: 'User Post by Jenny', + title: 'User Post by Jenny', value: 'User Post by Jenny', shoutedCount: 0, + commentCount: 4, createdAt: '2019-11-13T03:03:16.155Z', author: { id: 'u3', @@ -25,11 +23,12 @@ export const results = [ }, { id: 'f48f00a0-c412-432f-8334-4276a4e15d1c', - searchType: 'Contributions', + __typename: 'Post', slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos', - label: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.', + title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.', value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.', shoutedCount: 0, + commentCount: 0, createdAt: '2019-11-13T03:00:45.478Z', author: { id: 'u6', @@ -39,11 +38,12 @@ export const results = [ }, { id: 'p7', - searchType: 'Contributions', + __typename: 'Post', slug: 'this-is-post-7', - label: 'This is post #7', + title: 'This is post #7', value: 'This is post #7', shoutedCount: 1, + commentCount: 1, createdAt: '2019-11-13T03:00:23.098Z', author: { id: 'u6', @@ -53,11 +53,12 @@ export const results = [ }, { id: 'p12', - searchType: 'Contributions', + __typename: 'Post', slug: 'this-is-post-12', - label: 'This is post #12', + title: 'This is post #12', value: 'This is post #12', shoutedCount: 0, + commentCount: 12, createdAt: '2019-11-13T03:00:23.098Z', author: { id: 'u6', @@ -65,43 +66,36 @@ export const results = [ slug: 'louie', }, }, - { - heading: 'Users' - }, { id: 'u1', - searchType: 'Users', + __typename: 'User', avatar: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg', name: 'Peter Lustig', - label: 'Peter Lustig', slug: 'peter-lustig', }, { id: 'cdbca762-0632-4564-b646-415a0c42d8b8', - searchType: 'Users', + __typename: 'User', avatar: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg', name: 'Herbert Schultz', - label: 'Herbert Schultz', slug: 'herbert-schultz', }, { id: 'u2', - searchType: 'Users', + __typename: 'User', avatar: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg', name: 'Bob der Baumeister', - label: 'Bob der Baumeister', slug: 'bob-der-baumeister', }, { id: '7b654f72-f4da-4315-8bed-39de0859754b', - searchType: 'Users', + __typename: 'User', avatar: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg', name: 'Tonya Mohr', - label: 'Tonya Mohr', slug: 'tonya-mohr', }, ] diff --git a/webapp/components/SearchInput/SearchInput.vue b/webapp/components/SearchInput/SearchInput.vue index 7a6f07eb0..01da32537 100644 --- a/webapp/components/SearchInput/SearchInput.vue +++ b/webapp/components/SearchInput/SearchInput.vue @@ -1,309 +1,315 @@ diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue index 115d3ac49..55fde8296 100644 --- a/webapp/layouts/default.vue +++ b/webapp/layouts/default.vue @@ -28,7 +28,7 @@ :results="quickSearchResults" @clear="quickSearchClear" @search="value => quickSearch({ value })" - @select="goToPost" + @select="goToResource" /> @@ -140,12 +140,24 @@ export default { quickSearchClear: 'search/quickClear', quickSearch: 'search/quickSearch', }), - goToPost(item) { + goToResource(item) { this.$nextTick(() => { - this.$router.push({ - name: 'post-id-slug', - params: { id: item.id, slug: item.slug }, - }) + switch (item.__typename) { + case 'Post': + this.$router.push({ + name: 'post-id-slug', + params: { id: item.id, slug: item.slug }, + }) + break + case 'User': + this.$router.push({ + name: 'profile-id-slug', + params: { id: item.id, slug: item.slug }, + }) + break + default: + break + } }) }, toggleMobileMenuView() { diff --git a/webapp/locales/de.json b/webapp/locales/de.json index d0008f102..377156162 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -513,7 +513,11 @@ "search": { "placeholder": "Suchen", "hint": "Wonach suchst Du?", - "failed": "Nichts gefunden" + "failed": "Nichts gefunden", + "heading": { + "Post": "Beiträge", + "User": "Benutzer" + } }, "components": { "password-reset": { diff --git a/webapp/locales/en.json b/webapp/locales/en.json index d1b815668..a670f27bc 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -197,7 +197,11 @@ "search": { "placeholder": "Search", "hint": "What are you searching for?", - "failed": "Nothing found" + "failed": "Nothing found", + "heading": { + "Post": "Posts", + "User": "Users" + } }, "settings": { "name": "Settings", diff --git a/webapp/store/search.js b/webapp/store/search.js index a65e020cb..ffa6d4045 100644 --- a/webapp/store/search.js +++ b/webapp/store/search.js @@ -46,29 +46,35 @@ export const actions = { await this.app.apolloProvider.defaultClient .query({ query: gql` - query findPosts($query: String!, $filter: _PostFilter) { - findPosts(query: $query, limit: 10, filter: $filter) { - id - slug - label: title - value: title - shoutedCount - createdAt - author { + query findResources($query: String!) { + findResources(query: $query, limit: 5) { + __typename + ... on Post { + id + title + slug + commentsCount + shoutedCount + createdAt + author { + name + } + } + ... on User { id name slug + avatar } } } `, variables: { - query: value.replace(/\s/g, '~ ') + '~', - filter: {}, + query: value, }, }) .then(res => { - commit('SET_QUICK_RESULTS', res.data.findPosts || []) + commit('SET_QUICK_RESULTS', res.data.findResources || []) }) .catch(() => { commit('SET_QUICK_RESULTS', [])