From f9678a7512af7e283ceff0bb828f922cbce37a9a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Sun, 17 Nov 2019 00:01:44 +0100
Subject: [PATCH] Simple Implementation In Stroybook Of SearchInput By the way,
 I added *~ to .gitignore, which are the backups of emacs editor. See the
 Storybook of SearchInput. Problems: * I found no way to separate the heading
 of the search results from the first item. Do we have to write a complete new
 component for this? * The incoming data must by sorted by type before passed
 to the component. I added keys searchType and firstType, to identify the type
 (post/user) (may be as a locale) and to know when I have to place the
 heading.

---
 webapp/components/SearchInput/SearchInput.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/webapp/components/SearchInput/SearchInput.vue b/webapp/components/SearchInput/SearchInput.vue
index 61e1a8649..81958d636 100644
--- a/webapp/components/SearchInput/SearchInput.vue
+++ b/webapp/components/SearchInput/SearchInput.vue
@@ -37,7 +37,10 @@
           @click.capture.native="isOpen = true"
         >
           <template slot="option" slot-scope="{ option }">
-            <ds-flex>
+            <ds-flex v-if="option.firstType" class="search-option-heading">
+              <ds-text>{{ option.searchType }}</ds-text>
+            </ds-flex>
+            <ds-flex v-if="option.searchType === 'Contributions'">
               <ds-flex-item class="search-option-label">
                 <ds-text>{{ option.label | truncate(70) }}</ds-text>
               </ds-flex-item>
@@ -65,6 +68,11 @@
                 </ds-flex>
               </ds-flex-item>
             </ds-flex>
+            <ds-flex v-if="option.searchType === 'Users'">
+              <ds-flex-item class="search-option-label">
+                <ds-text>{{ option.label | truncate(70) }}</ds-text>
+              </ds-flex-item>
+            </ds-flex>
           </template>
         </ds-select>
       </div>
@@ -265,5 +273,9 @@ export default {
   .control {
     width: 100%;
   }
+  .search-option-heading {
+    font-weight: bold;
+    margin-bottom: 1em;
+  }
 }
 </style>