From 24825a070a38c44b66d949c3ba4c94bf7e6c7999 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Sat, 18 May 2024 22:46:32 +0530
Subject: [PATCH] feat: change search component

---
 .../conversation/linear/CreateOrLinkIssue.vue |  4 +-
 .../widgets/conversation/linear/LinkIssue.vue | 86 ++++++++++---------
 .../widgets/conversation/linear/SearchBar.vue | 28 ++++++
 .../conversation/linear/SearchEmptyState.vue  | 15 ++++
 .../conversation/linear/SearchIssue.vue       | 26 ++++++
 .../conversation/linear/SearchIssueItem.vue   | 36 ++++++++
 .../linear/SearchListDropdown.vue             | 67 +++++++++++++++
 lib/linear_queries.rb                         |  1 +
 8 files changed, 221 insertions(+), 42 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchEmptyState.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue

diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index c12ffd0b3..105c62b27 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -39,8 +39,8 @@
 <script setup>
 import { useI18n } from 'dashboard/composables/useI18n';
 import { computed, ref } from 'vue';
-import LinkIssue from './LinkIssue';
-import CreateIssue from './CreateIssue';
+import LinkIssue from './LinkIssue.vue';
+import CreateIssue from './CreateIssue.vue';
 
 defineProps({
   accountId: {
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index b6100472d..511e0057c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -1,32 +1,23 @@
 <template>
-  <div>
-    <div class="multiselect-wrap--small">
-      <multiselect
-        v-model="selectedOptions"
-        class="no-margin !pl-0"
-        :placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
-        :select-label="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SELECT')"
-        label="title"
-        track-by="id"
-        :options="options"
-        :option-height="24"
-        :show-labels="false"
-        :max-height="500"
-        @search-change="handleSearchChange"
-      >
-        <template #noResult>
-          <div class="flex items-center justify-center">
-            {{ emptyText }}
-          </div>
-        </template>
-        <template #noOptions>
-          <div class="flex items-center justify-center">
-            {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.EMPTY_LIST') }}
-          </div>
-        </template>
-      </multiselect>
-    </div>
-    <div class="flex items-center justify-end w-full gap-2 mt-8">
+  <div class="flex flex-col">
+    <search-issue
+      :title="linkIssueTitle"
+      class="w-full bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
+      @click="toggleDropdown"
+    >
+      <template v-if="shouldShowDropdown" #dropdown>
+        <search-list-dropdown
+          v-if="items"
+          v-on-clickaway="toggleDropdown"
+          :items="items"
+          :selected-id="selectedOption.id"
+          class="flex flex-col w-[240px] overflow-y-auto left-0 md:left-auto md:right-0 top-10"
+          @on-search="handleSearchChange"
+          @click="onSelectIssue"
+        />
+      </template>
+    </search-issue>
+    <div class="flex items-center justify-end w-full gap-2 mt-64">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"
         @click.prevent="onClose"
@@ -49,6 +40,8 @@ import LinearAPI from 'dashboard/api/integrations/linear';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { computed, ref } from 'vue';
+import SearchListDropdown from './SearchListDropdown.vue';
+import SearchIssue from './SearchIssue.vue';
 
 const props = defineProps({
   conversationId: {
@@ -57,25 +50,35 @@ const props = defineProps({
   },
 });
 const { t } = useI18n();
+const items = ref([]);
+const shouldShowDropdown = ref(false);
+const toggleDropdown = () => {
+  items.value = [];
+  shouldShowDropdown.value = !shouldShowDropdown.value;
+};
 
-const selectedOptions = ref(null);
-const options = ref([]);
+const selectedOption = ref({
+  id: null,
+  name: '',
+});
 const isFetching = ref(false);
 const isLinking = ref(false);
 const searchQuery = ref('');
 
-const emptyText = computed(() => {
-  if (isFetching.value) {
-    return t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING');
+const linkIssueTitle = computed(() => {
+  if (selectedOption.value.id) {
+    return selectedOption.value.name;
   }
-  if (searchQuery.value) {
-    return '';
-  }
-  return t('INTEGRATION_SETTINGS.LINEAR.LINK.EMPTY_LIST');
+  return t('INTEGRATION_SETTINGS.LINEAR.LINK.SELECT');
 });
 
+const onSelectIssue = item => {
+  selectedOption.value = item;
+  toggleDropdown();
+};
+
 const isSubmitDisabled = computed(() => {
-  return !selectedOptions.value || isLinking.value;
+  return !selectedOption.value.id || isLinking.value;
 });
 
 const emits = defineEmits(['close']);
@@ -90,7 +93,10 @@ const handleSearchChange = async value => {
   try {
     isFetching.value = true;
     const response = await LinearAPI.searchIssues(value);
-    options.value = response.data;
+    items.value = response.data.map(issue => ({
+      id: issue.id,
+      name: `${issue.identifier} ${issue.title}`,
+    }));
   } catch (error) {
     useAlert(t('INTEGRATION_SETTINGS.LINEAR.LINK.ERROR'));
   } finally {
@@ -99,7 +105,7 @@ const handleSearchChange = async value => {
 };
 
 const linkIssue = async () => {
-  const { id: issueId } = selectedOptions.value;
+  const { id: issueId } = selectedOption.value;
   try {
     isLinking.value = true;
     await LinearAPI.link_issue(props.conversationId, issueId);
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue
new file mode 100644
index 000000000..dd1a41920
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue
@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  inputValue: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
+  >
+    <div class="flex items-center w-full gap-2">
+      <fluent-icon
+        icon="search"
+        size="18"
+        class="text-slate-400 dark:text-slate-400"
+      />
+      <input
+        type="text"
+        class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
+        :placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
+        :value="inputValue"
+        @input="$emit('input', $event.target.value)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchEmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchEmptyState.vue
new file mode 100644
index 000000000..ccf9b2b1e
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchEmptyState.vue
@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
+  >
+    {{ message }}
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue
new file mode 100644
index 000000000..0d86127f9
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue
@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <button
+    class="inline-flex relative justify-between p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    @click="$emit('click')"
+  >
+    <span
+      class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
+    >
+      {{ title }}
+    </span>
+    <fluent-icon
+      icon="chevron-down"
+      size="18"
+      class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+    />
+    <slot name="dropdown" />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue
new file mode 100644
index 000000000..3566686e1
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue
@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  buttonText: {
+    type: String,
+    default: '',
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <button
+    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
+    @click.stop="$emit('click')"
+    @mouseenter="$emit('mouseenter')"
+    @mouseleave="$emit('mouseleave')"
+    @focus="$emit('focus')"
+  >
+    <div class="inline-flex items-center gap-3 overflow-hidden">
+      <span
+        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
+      >
+        {{ buttonText }}
+      </span>
+      <fluent-icon
+        v-if="isActive"
+        icon="checkmark"
+        size="18"
+        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
+      />
+    </div>
+    <slot name="dropdown" />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue
new file mode 100644
index 000000000..f4d517d26
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { picoSearch } from '@scmmishra/pico-search';
+import SearchIssueItem from './SearchIssueItem.vue';
+import SearchBar from './SearchBar.vue';
+import SearchEmptyState from './SearchEmptyState.vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  selectedId: {
+    type: String,
+    default: null,
+  },
+});
+const emits = defineEmits(['on-search']);
+
+const searchTerm = ref('');
+
+const onSearch = value => {
+  searchTerm.value = value;
+  emits('on-search', value);
+};
+
+const filteredItems = computed(() => {
+  if (!searchTerm.value) return props.items;
+  return picoSearch(props.items, searchTerm.value, ['name']);
+});
+
+const isDropdownListEmpty = computed(() => {
+  return !filteredItems.value.length;
+});
+
+const isFilterActive = id => {
+  if (!props.selectedId) return false;
+  return id === props.selectedId;
+};
+</script>
+<template>
+  <div
+    class="absolute z-20 w-full bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
+    @click.stop
+  >
+    <slot name="search">
+      <search-bar
+        :input-value="searchTerm"
+        @input="onSearch"
+        @click="$emit('removeFilter')"
+      />
+    </slot>
+    <slot name="listItem">
+      <search-empty-state
+        v-if="isDropdownListEmpty"
+        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
+      />
+      <search-issue-item
+        v-for="item in filteredItems"
+        :key="item.id"
+        :is-active="isFilterActive(item.id)"
+        :button-text="item.name"
+        @click="$emit('click', item)"
+      />
+    </slot>
+  </div>
+</template>
diff --git a/lib/linear_queries.rb b/lib/linear_queries.rb
index 6f46abd6c..d9da707c9 100644
--- a/lib/linear_queries.rb
+++ b/lib/linear_queries.rb
@@ -53,6 +53,7 @@ module LinearQueries
             id
             title
             description
+            identifier
           }
         }
       }