search query extended to categories, sorting of results, first graphical display

webapp/components/generic/SearchableInput/SearchableInput.vue

@@ -109,6 +109,7 @@ export default {
           path: '/search/search-results',
           query: { item: this.unprocessedSearchInput },
         })
+        this.clear()
       } else {
         this.$router.replace({
           path: '/search/search-results',

webapp/graphql/Search.js

@@ -1,15 +1,17 @@
 import gql from 'graphql-tag'
-import { userFragment, postFragment } from './Fragments'
+import { userFragment, postFragment, tagsCategoriesAndPinnedFragment } from './Fragments'
 
 export const findResourcesQuery = gql`
   ${userFragment}
   ${postFragment}
+  ${tagsCategoriesAndPinnedFragment}
 
   query($query: String!) {
     findResources(query: $query, limit: 5) {
       __typename
       ... on Post {
         ...post
+        ...tagsCategoriesAndPinned
         commentsCount
         shoutedCount
         author {

webapp/pages/search/search-results.vue

@@ -3,69 +3,111 @@
     <div>
       <ds-flex>
         <ds-flex-item>
-          <ds-placeholder>
+          <ds-tag color="primary" size="x-large" round>{{ searchResults.length }}</ds-tag>
-            <ds-button @click="closeSearch" size="x-large" icon="close" right>close</ds-button>
+          Results for:
-          </ds-placeholder>
+          <b>{{ value }}</b>
         </ds-flex-item>
         <ds-flex-item width="2">
-          <ds-placeholder>
+          <ds-button
-            <ds-tag color="primary" size="x-large" round>{{ searchResults.length }}</ds-tag>
+            @click="postOnly = !postOnly"
-            Results for:
+            :secondary="postOnly"
-            <b>{{ value }}</b>
+            size="x-large"
-          </ds-placeholder>
+            align="right"
-        </ds-flex-item>
+          >
-        <ds-flex-item width="3">
+            <ds-tag color="primary" size="x-large" round>{{ posts.length }}</ds-tag>
-          <ds-placeholder>
+            Beiträge
-            <ds-button
+          </ds-button>
-              @click="postOnly = !postOnly"
+          <ds-button
-              :secondary="postOnly"
+            @click="userOnly = !userOnly"
-              size="x-large"
+            :secondary="userOnly"
-              icon="pencil"
+            size="x-large"
-              align="right"
+            align="right"
-            >
+          >
-              Beiträge
+            <ds-tag color="primary" size="x-large" round>{{ users.length }}</ds-tag>
-            </ds-button>
+            User
-            <ds-button
+          </ds-button>
-              @click="userOnly = !userOnly"
+          <ds-button @click="closeSearch" size="x-large" icon="close" right>close</ds-button>
-              :secondary="userOnly"
-              size="x-large"
-              icon="user"
-              align="right"
-            >
-              User
-            </ds-button>
-          </ds-placeholder>
         </ds-flex-item>
       </ds-flex>
     </div>
     <ds-space />
-    <ds-space
+
-      v-for="(searchResults, index) in searchResults"
+    <ds-space v-if="searchResults.length === 0">no Result</ds-space>
-      :key="searchResults.key"
+
-      v-bind:class="{
+    <!--
-        isUser: searchResults.__typename === 'User',
+    <ds-space v-for="(posts) in posts" :key="posts.key" class="Post searchresults">
-        isPost: searchResults.__typename === 'Post',
+      <div v-show="postOnly">
-      }"
+        
-    >
+          {{ posts }}
-      <div v-if="searchResults.__typename === 'User'" v-show="userOnly">
-        <b>{{ index + 1 }}</b>
-        -
-        <b>{{ searchResults.__typename }}</b>
-        - {{ searchResults }}
-      </div>
-      <div v-if="searchResults.__typename === 'Post'" v-show="postOnly">
-        <b>{{ index + 1 }}</b>
-        -
-        <b>{{ searchResults.__typename }}</b>
-        - {{ searchResults }}
       </div>
     </ds-space>
+-->
+    <div>
+      <ds-space />
+
+
+    <ds-text size="x-large" v-show="userOnly">Menschen</ds-text>
+    <ds-grid gap="x-small" v-show="userOnly">
+      <ds-grid-item v-for="users in users" :key="users.key" class="User searchresults">
+        <div>
+          <ds-placeholder>
+            <ds-avatar size="large" :title="users.name" :image="users.avatar" />
+            {{ users.name }}
+            <div>
+              <ds-chip>Beiträge</ds-chip>
+              <ds-chip>Kommentare</ds-chip>
+            </div>
+          </ds-placeholder>
+        </div>
+      </ds-grid-item>
+    </ds-grid>
+   <ds-space />
+    <ds-space />
+      <ds-text size="x-large" v-show="postOnly">Beiträge</ds-text>
+      <ds-list ordered v-show="postOnly">
+        <ds-list-item v-for="posts in posts" :key="posts.key" class="Post searchresults">
+          <div>
+            <b>{{ posts.title }}</b>
+
+            <div v-html="posts.content"></div>
+            <div>
+              <ds-text size="small">
+                <i>
+                  {{ posts.author.name }}-
+                  <hc-relative-date-time :date-time="posts.createdAt" />
+                </i>
+              </ds-text>
+            </div>
+            <div>
+              <div class="categories">
+                <ds-space margin="xx-small" />
+                <hc-category
+                  v-for="category in posts.categories"
+                  :key="category.id"
+                  :icon="category.icon"
+                  :name="$t(`contribution.category.name.${category.slug}`)"
+                />
+                <!-- Post language -->
+                <ds-tag v-if="posts.language" class="category-tag language">
+                  <base-icon name="globe" />
+                  {{ posts.language.toUpperCase() }}
+                </ds-tag>
+              </div>
+            </div>
+          </div>
+        </ds-list-item>
+      </ds-list>
+    </div>
+ 
+
   </ds-container>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { findResourcesQuery } from '~/graphql/Search.js'
+import HcRelativeDateTime from '~/components/RelativeDateTime'
+import HcCategory from '~/components/Category'
 
 export default {
   layout: 'default',
@@ -74,14 +116,19 @@ export default {
       title: 'SearchResults',
     }
   },
+  components: {
+    HcRelativeDateTime,
+    HcCategory,
+  },
   data() {
     return {
       loading: true,
-      request: '',
       value: '',
-      selected: '',
+
       pending: false,
       searchResults: [],
+      users: [],
+      posts: [],
       userOnly: true,
       postOnly: true,
     }
@@ -104,6 +151,8 @@ export default {
 
   watch: {
     searchValue: function(val) {
+      this.users = []
+      this.posts = []
       this.value = val
       this.query(this.value)
     },
@@ -120,6 +169,16 @@ export default {
             query: value,
           },
         })
+        for (var i = 0; i < findResources.length; i++) {
+          if (findResources[i].__typename === 'User') {
+            this.users.push(findResources[i])
+          }
+          if (findResources[i].__typename === 'Post') {
+            this.posts.push(findResources[i])
+          }
+        }
+        // console.log('users', this.users)
+        // console.log('posts', this.posts)
         this.searchResults = findResources
       } catch (error) {
         this.searchResults = []