From 6b68e18be69cbf5e1894e9aa965f7c85c4194eb8 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Sat, 16 Nov 2019 20:59:51 +0100
Subject: [PATCH] Created Folder For SearchInput And Changed Paths

---
 webapp/components/SearchInput/SearchInput.vue | 448 ++++++++----------
 1 file changed, 195 insertions(+), 253 deletions(-)

diff --git a/webapp/components/SearchInput/SearchInput.vue b/webapp/components/SearchInput/SearchInput.vue
index 8d914e328..b1b967355 100644
--- a/webapp/components/SearchInput/SearchInput.vue
+++ b/webapp/components/SearchInput/SearchInput.vue
@@ -36,48 +36,29 @@
           @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>
-		      <ds-heading soft size="h5">{{ option.heading }}</ds-heading>
-		  </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>
+          <template slot="option" slot-scope="{ option }">
+            <ds-flex>
+              <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) }} -
-                      {{ option.createdAt }}
-                      <!-- removed  | dateTime('dd.MM.yyyy') -->
+                      {{ option.createdAt | dateTime('dd.MM.yyyy') }}
                     </ds-text>
                   </ds-flex-item>
                 </ds-flex>
@@ -91,236 +72,197 @@
 </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
-	     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 = ''
-	 },
-     },
- }
+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 = ''
+    },
+  },
+}
 </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;
-	 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;
-     }
-
- }
+  .control {
+    width: 100%;
+  }
+}
 </style>