From 4ac2b31f4225abd2b136ed75a841fe5e9c4a5127 Mon Sep 17 00:00:00 2001
From: fayazara <fayazara@gmail.com>
Date: Wed, 14 Dec 2022 15:13:30 +0530
Subject: [PATCH] Review changes

---
 .../dashboard/i18n/locale/en/search.json      |  6 +-
 .../dashboard/search/components/ReadMore.vue  | 55 +++++++++++++++++++
 .../search/components/SearchHeader.vue        |  7 ++-
 .../components/SearchResultContactsList.vue   |  5 ++
 .../SearchResultConversationsList.vue         |  5 ++
 .../components/SearchResultMessageItem.vue    |  4 +-
 .../components/SearchResultMessagesList.vue   |  5 ++
 .../search/components/SearchResultSection.vue | 17 ++++--
 .../search/components/SearchView.vue          |  4 ++
 9 files changed, 98 insertions(+), 10 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/search/components/ReadMore.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/search.json b/app/javascript/dashboard/i18n/locale/en/search.json
index efcfcf86c..64be70bda 100644
--- a/app/javascript/dashboard/i18n/locale/en/search.json
+++ b/app/javascript/dashboard/i18n/locale/en/search.json
@@ -11,7 +11,9 @@
             "CONVERSATIONS": "CONVERSATIONS",
             "MESSAGES": "MESSAGES"
         },
-        "EMPTY_STATE": "No results found for this query",
-        "PLACEHOLDER_KEYBINDING": "/ to focus"
+        "EMPTY_STATE": "No %{item} found for query '%{query}'",
+        "PLACEHOLDER_KEYBINDING": "/ to focus",
+        "INPUT_PLACEHOLDER": "Search message content, contact name, email or phone or conversations",
+        "BOT_LABEL": "Bot"
     }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/ReadMore.vue b/app/javascript/dashboard/routes/dashboard/search/components/ReadMore.vue
new file mode 100644
index 000000000..3b8aaa6a6
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/search/components/ReadMore.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="read-more">
+    <div ref="content" :class="{ content: applyReadMore }">
+      <slot />
+      <woot-button
+        size="tiny"
+        variant="smooth"
+        color-scheme="primary"
+        class="read-more-button"
+      >
+        Read more
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    applyReadMore: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  max-height: 100px;
+  overflow: hidden;
+  position: relative;
+}
+
+.content::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
+  z-index: 4;
+}
+
+.read-more-button {
+  max-width: max-content;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 5;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/SearchHeader.vue b/app/javascript/dashboard/routes/dashboard/search/components/SearchHeader.vue
index e34eaf617..ef7990f74 100644
--- a/app/javascript/dashboard/routes/dashboard/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/search/components/SearchHeader.vue
@@ -8,7 +8,7 @@
       <input
         ref="searchInput"
         type="search"
-        placeholder="Search message content, contact name, email or phone or conversations"
+        :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
         :value="searchQuery"
         @input="debounceSearch"
       />
@@ -43,7 +43,10 @@ export default {
       }, 500);
     },
     focusSearch(e) {
-      if (e.key === '/') this.$refs.searchInput.focus();
+      if (e.key === '/') {
+        e.preventDefault();
+        this.$refs.searchInput.focus();
+      }
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultContactsList.vue
index 791cc30e0..55247ff53 100644
--- a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultContactsList.vue
@@ -2,6 +2,7 @@
   <search-result-section
     :title="$t('SEARCH.SECTION.CONTACTS')"
     :empty="!contacts.length"
+    :query="query"
   >
     <ul class="search-list">
       <li v-for="contact in contacts" :key="contact.id">
@@ -24,6 +25,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultConversationsList.vue
index 42af4d3b6..e7c97d507 100644
--- a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultConversationsList.vue
@@ -2,6 +2,7 @@
   <search-result-section
     :title="$t('SEARCH.SECTION.CONVERSATIONS')"
     :empty="!conversations.length"
+    :query="query"
   >
     <ul class="search-list">
       <li v-for="conversation in conversations" :key="conversation.id">
@@ -24,6 +25,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessageItem.vue b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessageItem.vue
index 7ac51962f..cb57cfe04 100644
--- a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessageItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessageItem.vue
@@ -39,12 +39,12 @@ export default {
     getThumbnail() {
       return this.message.sender && this.message.sender.thumbnail
         ? this.message.sender.thumbnail
-        : '';
+        : this.$t('SEARCH.BOT_LABEL');
     },
     getName() {
       return this.message && this.message.sender && this.message.sender.name
         ? this.message.sender.name
-        : '';
+        : this.$t('SEARCH.BOT_LABEL');
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessagesList.vue
index a74fa0520..482e7e6b7 100644
--- a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessagesList.vue
@@ -2,6 +2,7 @@
   <search-result-section
     :title="$t('SEARCH.SECTION.MESSAGES')"
     :empty="!messages.length"
+    :query="query"
   >
     <ul class="search-list">
       <li v-for="message in messages" :key="message.id">
@@ -24,6 +25,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultSection.vue b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultSection.vue
index 68fe7827e..1011f824d 100644
--- a/app/javascript/dashboard/routes/dashboard/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/routes/dashboard/search/components/SearchResultSection.vue
@@ -5,9 +5,9 @@
     </div>
     <slot />
     <div v-if="empty" class="empty">
-      <fluent-icon icon="info" size="32px" class="icon" />
+      <fluent-icon icon="info" size="24px" class="icon" />
       <p class="empty-state__text">
-        {{ $t('SEARCH.EMPTY_STATE') }}
+        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
       </p>
     </div>
   </section>
@@ -24,6 +24,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    query: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    titleCase() {
+      return this.title.toLowerCase();
+    },
   },
 };
 </script>
@@ -43,13 +52,13 @@ export default {
   z-index: 50;
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-color: #dbdbdb;
+  border-color: var(--s-100);
   border-style: solid;
   border-left: 0;
   border-right: 0;
   p {
     font-size: var(--font-size-small);
-    color: var(--b-600);
+    color: var(--s-500);
     margin: 0;
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/search/components/SearchView.vue b/app/javascript/dashboard/routes/dashboard/search/components/SearchView.vue
index 2889af125..6b339e034 100644
--- a/app/javascript/dashboard/routes/dashboard/search/components/SearchView.vue
+++ b/app/javascript/dashboard/routes/dashboard/search/components/SearchView.vue
@@ -11,14 +11,17 @@
           <search-result-contacts-list
             v-if="filterContacts"
             :contacts="contacts"
+            :query="query"
           />
           <search-result-messages-list
             v-if="filterMessages"
             :messages="messages"
+            :query="query"
           />
           <search-result-conversations-list
             v-if="filterConversations"
             :conversations="conversations"
+            :query="query"
           />
         </div>
       </div>
@@ -122,6 +125,7 @@ export default {
   },
   methods: {
     search(q) {
+      this.query = q;
       this.$store.dispatch('conversationSearch/fullSearch', { q });
     },
   },