From 79596ab375b796711ff910f1aacdff54e1698db1 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 29 Nov 2019 14:00:33 +0100
Subject: [PATCH] updated story

---
 .../SearchInput/SearchInput.story.js          |  14 +-
 webapp/components/SearchInput/SearchInput.vue | 457 ++++++++++--------
 2 files changed, 260 insertions(+), 211 deletions(-)

diff --git a/webapp/components/SearchInput/SearchInput.story.js b/webapp/components/SearchInput/SearchInput.story.js
index c65241b30..9a2a4f2ae 100644
--- a/webapp/components/SearchInput/SearchInput.story.js
+++ b/webapp/components/SearchInput/SearchInput.story.js
@@ -6,9 +6,10 @@ import helpers from '~/storybook/helpers'
 helpers.init()
 
 export const results = [
+    /*
     {
 	heading: 'Contributions'
-    },
+    },*/
   {
     id: 'de100841-2336-4b01-a574-f1bd2c0b262a',
     searchType: 'Contributions',
@@ -65,12 +66,14 @@ export const results = [
       slug: 'louie',
     },
   },
-    {
+/*    {
 	heading: 'Users'
-    },
+    },*/
   {
     id: 'u1',
     searchType: 'Users',
+    avatar:
+      'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     name: 'Peter Lustig',
     label: 'Peter Lustig',
     slug: 'peter-lustig',
@@ -78,7 +81,8 @@ export const results = [
   {
     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
     searchType: 'Users',
-    firstType: false,
+    avatar:
+      'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     name: 'Herbert Schultz',
     label: 'Herbert Schultz',
     slug: 'herbert-schultz',
@@ -86,6 +90,8 @@ export const results = [
   {
     id: 'u2',
     searchType: 'Users',
+    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',
diff --git a/webapp/components/SearchInput/SearchInput.vue b/webapp/components/SearchInput/SearchInput.vue
index 0d73485c3..8d914e328 100644
--- a/webapp/components/SearchInput/SearchInput.vue
+++ b/webapp/components/SearchInput/SearchInput.vue
@@ -36,30 +36,43 @@
           @input.native="handleInput"
           @click.capture.native="isOpen = true"
         >
-          <template slot="option" slot-scope="{ option }">
-              <ds-flex v-if="option.heading" class="search-option-heading">
-		  <ds-flex-item class="search-option-heading">
-		      <ds-text>{{ option.heading }}</ds-text>
+            <template slot="option" slot-scope="{ option }">
+		<ds-flex v-if="option.heading" class="search-option-heading">
+		  <ds-flex-item>
+		      <ds-heading soft size="h5">{{ option.heading }}</ds-heading>
 		  </ds-flex-item>
-            </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>
-              <ds-flex-item class="search-option-meta" width="280px">
-                <ds-flex>
-                  <ds-flex-item>
-                    <ds-text size="small" color="softer" class="search-meta">
-                      <span style="text-align: right;">
-                        <b>{{ option.commentsCount }}</b>
-                        <base-icon name="comments" />
-                      </span>
-                      <span style="width: 36px; display: inline-block; text-align: right;">
-                        <b>{{ option.shoutedCount }}</b>
-                        <base-icon name="bullhorn" />
-                      </span>
-                    </ds-text>
-                  </ds-flex-item>
+		</ds-flex>
+		<ds-flex v-else-if="option.searchType === 'Users'">
+		    <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>
+			    </ds-text>
+			</div>
+			<ds-text align="left" size="small" color="soft">
+			    @{{ option.slug | truncate(70) }}
+			</ds-text>
+		    </ds-flex-item>
+		</ds-flex>
+		<ds-flex v-else>
+		    <ds-flex-item class="search-option-label">
+			<ds-text>{{ option.label | truncate(70) }}</ds-text>
+		    </ds-flex-item>
+		    <ds-flex-item class="search-option-meta" width="280px">
+			<ds-flex>
+			    <ds-flex-item>
+				<ds-text size="small" color="softer" class="search-meta">
+				    <span style="text-align: right;">
+					<b>{{ option.commentsCount }}</b>
+					<base-icon name="comments" />
+				    </span>
+				    <span style="width: 36px; display: inline-block; text-align: right;">
+					<b>{{ option.shoutedCount }}</b>
+					<base-icon name="bullhorn" />
+				    </span>
+				</ds-text>
+			    </ds-flex-item>
                   <ds-flex-item>
                     <ds-text size="small" color="softer" align="right">
                       {{ option.author.name | truncate(32) }} -
@@ -70,11 +83,6 @@
                 </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>
@@ -83,201 +91,236 @@
 </template>
 
 <script>
-import { isEmpty } from 'lodash'
+ import { isEmpty } from 'lodash'
 
-export default {
-  name: 'SearchInput',
-  props: {
-    id: {
-      type: String,
-      default: 'nav-search',
-    },
-    value: {
-      type: String,
-      default: '',
-    },
-    results: {
-      type: Array,
-      default: () => [],
-    },
-    delay: {
-      type: Number,
-      default: 300,
-    },
-    pending: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      searchProcess: null,
-      isOpen: false,
-      lastSearchTerm: '',
-      unprocessedSearchInput: '',
-      searchValue: '',
-    }
-  },
-  computed: {
-    // #: Unused at the moment?
-    isActive() {
-      return !isEmpty(this.lastSearchTerm)
-    },
-    emptyText() {
-      return this.isActive && !this.pending ? this.$t('search.failed') : this.$t('search.hint')
-    },
-  },
-  methods: {
-    async query(value) {
-      if (isEmpty(value) || value.length < 3) {
-        this.clear()
-        return
-      }
-      this.$emit('search', value)
-    },
-    handleInput(e) {
-      clearTimeout(this.searchProcess)
-      const value = e.target ? e.target.value.trim() : ''
-      this.isOpen = true
-      this.unprocessedSearchInput = value
-      this.searchProcess = setTimeout(() => {
-        this.lastSearchTerm = value
-        this.query(value)
-      }, this.delay)
-    },
-    onSelect(item) {
-      this.isOpen = false
-      this.$emit('select', item)
-      this.$nextTick(() => {
-        this.searchValue = this.lastSearchTerm
-      })
-    },
-    onFocus(e) {
-      clearTimeout(this.searchProcess)
-      this.isOpen = true
-    },
-    onBlur(e) {
-      this.searchValue = this.lastSearchTerm
-      // this.$nextTick(() => {
-      //   this.searchValue = this.lastSearchTerm
-      // })
-      this.isOpen = false
-      clearTimeout(this.searchProcess)
-    },
-    onDelete(e) {
-      clearTimeout(this.searchProcess)
-      const value = e.target ? e.target.value.trim() : ''
-      if (isEmpty(value)) {
-        this.clear()
-      } else {
-        this.handleInput(e)
-      }
-    },
-    /**
-     * TODO: on enter we should go to a dedicated seach page!?
-     */
-    onEnter(e) {
-      // this.isOpen = false
-      clearTimeout(this.searchProcess)
-      if (!this.pending) {
-        // this.lastSearchTerm = this.unprocessedSearchInput
-        this.query(this.unprocessedSearchInput)
-      }
-    },
-    clear() {
-      this.$emit('clear')
-      clearTimeout(this.searchProcess)
-      this.isOpen = false
-      this.unprocessedSearchInput = ''
-      this.lastSearchTerm = ''
-      this.searchValue = ''
-    },
-  },
-}
+ export default {
+     name: 'SearchInput',
+     props: {
+	 id: {
+	     type: String,
+	     default: 'nav-search',
+	 },
+	 value: {
+	     type: String,
+	     default: '',
+	 },
+	 results: {
+	     type: Array,
+	     default: () => [],
+	 },
+	 delay: {
+	     type: Number,
+	     default: 300,
+	 },
+	 pending: {
+	     type: Boolean,
+	     default: false,
+	 },
+     },
+     data() {
+	 return {
+	     searchProcess: null,
+	     isOpen: false,
+	     lastSearchTerm: '',
+	     unprocessedSearchInput: '',
+	     searchValue: '',
+	 }
+     },
+     computed: {
+	 // #: Unused at the moment?
+	 isActive() {
+	     return !isEmpty(this.lastSearchTerm)
+	 },
+	 emptyText() {
+	     return this.isActive && !this.pending ? this.$t('search.failed') : this.$t('search.hint')
+	 },
+     },
+     methods: {
+	 async query(value) {
+	     if (isEmpty(value) || value.length < 3) {
+		 this.clear()
+		 return
+	     }
+	     this.$emit('search', value)
+	 },
+	 handleInput(e) {
+	     clearTimeout(this.searchProcess)
+	     const value = e.target ? e.target.value.trim() : ''
+	     this.isOpen = true
+	     this.unprocessedSearchInput = value
+	     this.searchProcess = setTimeout(() => {
+		 this.lastSearchTerm = value
+		 this.query(value)
+	     }, this.delay)
+	 },
+	 onSelect(item) {
+	     this.isOpen = false
+	     console.log('onSelect', item)
+	     this.$emit('select', item)
+	     this.$nextTick(() => {
+		 this.searchValue = this.lastSearchTerm
+	     })
+	 },
+	 onFocus(e) {
+	     clearTimeout(this.searchProcess)
+	     this.isOpen = true
+	 },
+	 onBlur(e) {
+	     this.searchValue = this.lastSearchTerm
+	     // this.$nextTick(() => {
+	     //   this.searchValue = this.lastSearchTerm
+	     // })
+	     this.isOpen = false
+	     clearTimeout(this.searchProcess)
+	 },
+	 onDelete(e) {
+	     clearTimeout(this.searchProcess)
+	     const value = e.target ? e.target.value.trim() : ''
+	     if (isEmpty(value)) {
+		 this.clear()
+	     } else {
+		 this.handleInput(e)
+	     }
+	 },
+	 /**
+	  * TODO: on enter we should go to a dedicated search page!?
+	  */
+	 onEnter(e) {
+	     // this.isOpen = false
+	     clearTimeout(this.searchProcess)
+	     if (!this.pending) {
+		 // this.lastSearchTerm = this.unprocessedSearchInput
+		 this.query(this.unprocessedSearchInput)
+	     }
+	 },
+	 clear() {
+	     this.$emit('clear')
+	     clearTimeout(this.searchProcess)
+	     this.isOpen = false
+	     this.unprocessedSearchInput = ''
+	     this.lastSearchTerm = ''
+	     this.searchValue = ''
+	 },
+     },
+ }
 </script>
 
 <style lang="scss">
-.search {
-  display: flex;
-  align-self: center;
-  width: 100%;
-  position: relative;
+ .search {
+     display: flex;
+     align-self: center;
+     width: 100%;
+     position: relative;
 
-  $padding-left: $space-x-small;
+     $padding-left: $space-x-small;
 
-  .search-option-label {
-    align-self: center;
-    padding-left: $padding-left;
-  }
+     .search-option-label {
+	 align-self: center;
+	 padding-left: $padding-left;
+     }
 
-  .search-option-meta {
-    align-self: center;
+     .search-option-meta {
+	 align-self: center;
 
-    .ds-flex {
-      flex-direction: column;
-    }
-  }
+	 .ds-flex {
+	     flex-direction: column;
+	 }
+     }
 
-  &,
-  .ds-select-dropdown {
-    transition: box-shadow 100ms;
-    max-height: 70vh;
-  }
+     &,
+     .ds-select-dropdown {
+	 transition: box-shadow 100ms;
+	 max-height: 70vh;
+     }
 
-  &.is-open {
-    .ds-select-dropdown {
-      box-shadow: $box-shadow-x-large;
-    }
-  }
+     &.is-open {
+	 .ds-select-dropdown {
+	     box-shadow: $box-shadow-x-large;
+	 }
+     }
 
-  .ds-select-dropdown-message {
-    opacity: 0.5;
-    padding-left: $padding-left;
-  }
+     .ds-select-dropdown-message {
+	 opacity: 0.5;
+	 padding-left: $padding-left;
+     }
 
-  .search-clear-btn {
-    right: 0;
-    z-index: 10;
-    position: absolute;
-    height: 100%;
-    width: 36px;
-    cursor: pointer;
-  }
+     .search-clear-btn {
+	 right: 0;
+	 z-index: 10;
+	 position: absolute;
+	 height: 100%;
+	 width: 36px;
+	 cursor: pointer;
+     }
 
-  .search-meta {
-    float: right;
-    padding-top: 2px;
-    white-space: nowrap;
-    word-wrap: none;
+     .search-meta {
+	 float: right;
+	 padding-top: 2px;
+	 white-space: nowrap;
+	 word-wrap: none;
 
-    .base-icon {
-      vertical-align: sub;
-    }
-  }
+	 .base-icon {
+	     vertical-align: sub;
+	 }
+     }
 
-  .ds-select {
-    z-index: $z-index-dropdown + 1;
-  }
+     .ds-select {
+	 z-index: $z-index-dropdown + 1;
+     }
 
-  .ds-select-option-hover {
-    .ds-text-size-small,
-    .ds-text-size-small-x {
-      color: $text-color-soft;
-    }
-  }
+     .ds-select-option-hover {
+	 .ds-text-size-small,
+	 .ds-text-size-small-x {
+	     color: $text-color-soft;
+	 }
+     }
 
-  .field {
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
+     .field {
+	 width: 100%;
+	 display: flex;
+	 align-items: center;
+     }
 
-  .control {
-    width: 100%;
-  }
-  .search-option-heading {
-      font-weight: bold;
-      cursor: default;
-  }
-}
+     .control {
+	 width: 100%;
+     }
+     .search-option-heading {
+	 font-weight: bold;
+	 cursor: default;
+	 background-color:white;
+	 padding: 0;
+     }
+     .avatar {
+	 display: inline-block;
+	 float: left;
+	 margin-right: 4px;
+	 height: 100%;
+	 vertical-align: middle;
+     }
+     .userinfo {
+	 display: flex;
+	 align-items: center;
+
+	 > .ds-text {
+	     display: flex;
+	     align-items: center;
+	     margin-left: $space-xx-small;
+	 }
+     }
+     .user {
+	 white-space: nowrap;
+	 position: relative;
+	 display: flex;
+	 align-items: center;
+
+	 &:hover,
+	 &.active {
+	     z-index: 999;
+	 }
+     }
+     .username {
+	 color: #17b53f;
+     }
+
+ }
 </style>