From 2242c001b4e15451ce3ccb614fb71cfab360a3c7 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 17 Dec 2019 16:56:37 +0100
Subject: [PATCH] SearchInput components created

---
 .../components/SearchInput/SearchHeading.vue  | 16 ++++
 webapp/components/SearchInput/SearchInput.vue | 91 ++++---------------
 webapp/components/SearchInput/SearchPost.vue  | 42 +++++++++
 webapp/components/SearchInput/SearchUser.vue  | 50 ++++++++++
 4 files changed, 127 insertions(+), 72 deletions(-)
 create mode 100644 webapp/components/SearchInput/SearchHeading.vue
 create mode 100644 webapp/components/SearchInput/SearchPost.vue
 create mode 100644 webapp/components/SearchInput/SearchUser.vue

diff --git a/webapp/components/SearchInput/SearchHeading.vue b/webapp/components/SearchInput/SearchHeading.vue
new file mode 100644
index 000000000..e9d5aa662
--- /dev/null
+++ b/webapp/components/SearchInput/SearchHeading.vue
@@ -0,0 +1,16 @@
+<template>
+  <ds-flex-item>
+    <ds-heading soft size="h5">
+      {{ $t(`search.heading.${resourceType}`) }}
+    </ds-heading>
+  </ds-flex-item>
+</template>
+<script>
+export default {
+  name: 'SearchHeading',
+  props: {
+    resourceType: { type: String, required: true },
+  },
+}
+</script>
+<style></style>
diff --git a/webapp/components/SearchInput/SearchInput.vue b/webapp/components/SearchInput/SearchInput.vue
index 44794768c..acddf4791 100644
--- a/webapp/components/SearchInput/SearchInput.vue
+++ b/webapp/components/SearchInput/SearchInput.vue
@@ -38,51 +38,19 @@
         >
           <template slot="option" slot-scope="{ option }">
             <ds-flex v-if="isFirstOfType(option)" class="search-option-heading">
-              <ds-flex-item>
-                <ds-heading soft size="h5">
-                  {{ $t(`search.heading.${option.__typename}`) }}
-                </ds-heading>
-              </ds-flex-item>
+              <search-heading :resource-type="option.__typename" />
             </ds-flex>
-            <ds-flex v-if="option.__typename === 'User'">
-              <ds-flex-item class="search-option" :class="{ 'extra-space': isFirstOfType(option) }">
-                <ds-avatar class="avatar" name="option.name" image="option.avatar" />
-                <div>
-                  <ds-text class="userinfo">
-                    <b class="username">{{ option.name | 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
+              v-if="option.__typename === 'User'"
+              :class="{ 'extra-space': isFirstOfType(option) }"
+            >
+              <search-user :option="option" />
             </ds-flex>
-            <ds-flex v-if="option.__typename === 'Post'">
-		<ds-flex-item class="search-option-label" :class="{'extra-space': isFirstOfType(option)}">
-                <ds-text>{{ option.title | 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 | dateTime('dd.MM.yyyy') }}
-                    </ds-text>
-                  </ds-flex-item>
-                </ds-flex>
-              </ds-flex-item>
+            <ds-flex
+              v-if="option.__typename === 'Post'"
+              :class="{ 'extra-space': isFirstOfType(option) }"
+            >
+              <search-post :option="option" />
             </ds-flex>
           </template>
         </ds-select>
@@ -94,8 +62,16 @@
 <script>
 import { isEmpty } from 'lodash'
 import { findResourcesQuery } from '~/graphql/Search.js'
+import SearchHeading from './SearchHeading.vue'
+import SearchPost from './SearchPost.vue'
+import SearchUser from './SearchUser.vue'
 
 export default {
+  components: {
+    SearchHeading,
+    SearchPost,
+    SearchUser,
+  },
   name: 'SearchInput',
   props: {
     id: {
@@ -298,35 +274,6 @@ export default {
     margin: -8px;
     padding: 8px;
   }
-  .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;
-  }
   .extra-space {
     margin-top: 8px;
     padding-top: 4px;
diff --git a/webapp/components/SearchInput/SearchPost.vue b/webapp/components/SearchInput/SearchPost.vue
new file mode 100644
index 000000000..6ebbd5084
--- /dev/null
+++ b/webapp/components/SearchInput/SearchPost.vue
@@ -0,0 +1,42 @@
+<template>
+  <ds-flex class="post-search-item">
+    <ds-flex-item class="search-option-label">
+      <ds-text>{{ option.title | 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 | dateTime('dd.MM.yyyy') }}
+          </ds-text>
+        </ds-flex-item>
+      </ds-flex>
+    </ds-flex-item>
+  </ds-flex>
+</template>
+<script>
+export default {
+  name: 'SearchPost',
+  props: {
+    option: { type: Object, required: true },
+  },
+}
+</script>
+<style>
+.post-search-item {
+  width: 100%;
+}
+</style>
diff --git a/webapp/components/SearchInput/SearchUser.vue b/webapp/components/SearchInput/SearchUser.vue
new file mode 100644
index 000000000..e50d447e5
--- /dev/null
+++ b/webapp/components/SearchInput/SearchUser.vue
@@ -0,0 +1,50 @@
+<template>
+  <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.name | truncate(70) }}</b>
+      </ds-text>
+    </div>
+    <ds-text align="left" size="small" color="soft">@{{ option.slug | truncate(70) }}</ds-text>
+  </ds-flex-item>
+</template>
+<script>
+export default {
+  name: 'SearchUser',
+  props: {
+    option: { type: Object, required: true },
+  },
+}
+</script>
+<style>
+.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>