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.

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,

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

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]!
 }

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',
   },
 ]

webapp/components/SearchInput/SearchInput.vue

@@ -37,17 +37,19 @@
           @click.capture.native="isOpen = true"
         >
           <template slot="option" slot-scope="{ option }">
-			<ds-flex v-if="option.heading" class="search-option-heading">
+            <ds-flex v-if="isFirstOfType(option)" class="search-option-heading">
               <ds-flex-item>
-				<ds-heading soft size="h5">{{ option.heading }}</ds-heading>
+                <ds-heading soft size="h5">
+                  {{ $t(`search.heading.${option.__typename}`) }}
+                </ds-heading>
               </ds-flex-item>
             </ds-flex>
-			<ds-flex v-else-if="option.searchType === 'Users'">
+            <ds-flex v-else-if="option.__typename === 'User'">
               <ds-flex-item class="search-option">
                 <ds-avatar class="avatar" name="option.name" image="option.avatar" />
                 <div>
                   <ds-text class="userinfo">
-					<b class="username">{{ option.label | truncate(70) }}</b>
+                    <b class="username">{{ option.name | truncate(70) }}</b>
                   </ds-text>
                 </div>
                 <ds-text align="left" size="small" color="soft">
@@ -57,7 +59,7 @@
             </ds-flex>
             <ds-flex v-else>
               <ds-flex-item class="search-option-label">
-				<ds-text>{{ option.label | truncate(70) }}</ds-text>
+                <ds-text>{{ option.title | truncate(70) }}</ds-text>
               </ds-flex-item>
               <ds-flex-item class="search-option-meta" width="280px">
                 <ds-flex>
@@ -76,8 +78,7 @@
                   <ds-flex-item>
                     <ds-text size="small" color="softer" align="right">
                       {{ option.author.name | truncate(32) }} -
-					    {{ option.createdAt }}
+                      {{ option.createdAt | dateTime('dd.MM.yyyy') }}
-					    <!-- removed  | dateTime('dd.MM.yyyy') -->
                     </ds-text>
                   </ds-flex-item>
                 </ds-flex>
@@ -91,8 +92,8 @@
 </template>
 
 <script>
- import { isEmpty } from 'lodash'
+import { isEmpty } from 'lodash'
- export default {
+export default {
   name: 'SearchInput',
   props: {
     id: {
@@ -154,7 +155,6 @@
     },
     onSelect(item) {
       this.isOpen = false
-	     console.log('onSelect', item)
       this.$emit('select', item)
       this.$nextTick(() => {
         this.searchValue = this.lastSearchTerm
@@ -200,12 +200,18 @@
       this.lastSearchTerm = ''
       this.searchValue = ''
     },
+    isFirstOfType(option) {
+      return (
+        this.results.findIndex(o => o === option) ===
+        this.results.findIndex(o => o.__typename === option.__typename)
+      )
     },
- }
+  },
+}
 </script>
 
 <style lang="scss">
- .search {
+.search {
   display: flex;
   align-self: center;
   width: 100%;
@@ -272,7 +278,7 @@
   .search-option-heading {
     font-weight: bold;
     cursor: default;
-	 background-color:white;
+    background-color: white;
     margin: -8px;
     padding: 8px;
   }
@@ -305,5 +311,5 @@
   .username {
     color: #17b53f;
   }
- }
+}
 </style>

webapp/layouts/default.vue

@@ -28,7 +28,7 @@
                   :results="quickSearchResults"
                   @clear="quickSearchClear"
                   @search="value => quickSearch({ value })"
-                  @select="goToPost"
+                  @select="goToResource"
                 />
               </div>
             </ds-flex-item>
@@ -140,12 +140,24 @@ export default {
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
     }),
-    goToPost(item) {
+    goToResource(item) {
       this.$nextTick(() => {
+        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() {

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": {

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",

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) {
+          query findResources($query: String!) {
-            findPosts(query: $query, limit: 10, filter: $filter) {
+            findResources(query: $query, limit: 5) {
+              __typename
+              ... on Post {
                 id
+                title
                 slug
-              label: title
+                commentsCount
-              value: title
                 shoutedCount
                 createdAt
                 author {
+                  name
+                }
+              }
+              ... on User {
                 id
                 name
                 slug
+                avatar
               }
             }
           }
         `,
         variables: {
-          query: value.replace(/\s/g, '~ ') + '~',
+          query: value,
-          filter: {},
         },
       })
       .then(res => {
-        commit('SET_QUICK_RESULTS', res.data.findPosts || [])
+        commit('SET_QUICK_RESULTS', res.data.findResources || [])
       })
       .catch(() => {
         commit('SET_QUICK_RESULTS', [])