chore: change link dropdown component

2024-05-20 17:05:07 +05:30
parent 6550287f97
commit df0a7a348b
7 changed files with 25 additions and 160 deletions
@@ -19,7 +19,7 @@ const props = defineProps({
    default: '',
  },
  activeFilterId: {
-    type: Number,
+    type: [String, Number],
    default: null,
  },
  showClearFilter: {
@@ -28,10 +28,13 @@ const props = defineProps({
  },
 });

+const emits = defineEmits(['on-search']);
+
 const searchTerm = ref('');

 const onSearch = value => {
  searchTerm.value = value;
+  emits('on-search', value);
 };

 const filteredListItems = computed(() => {
@@ -55,7 +58,7 @@ const isFilterActive = id => {
  >
    <slot name="search">
      <dropdown-search
-        v-if="enableSearch && listItems.length"
+        v-if="enableSearch"
        :input-value="searchTerm"
        :input-placeholder="inputPlaceholder"
        :show-clear-filter="showClearFilter"
@@ -1,23 +1,30 @@
 <template>
-  <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"
+  <div
+    class="flex flex-col justify-between"
+    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
+  >
+    <filter-button
+      right-icon="chevron-down"
+      :button-text="linkIssueTitle"
+      class="justify-between 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
+        <filter-list-dropdown
          v-if="issues"
          v-on-clickaway="toggleDropdown"
-          :items="issues"
-          :selected-id="selectedOption.id"
-          class="flex flex-col w-[240px] overflow-y-auto left-0 md:left-auto md:right-0 top-10"
+          :show-clear-filter="false"
+          :list-items="issues"
+          :active-filter-id="selectedOption.id"
+          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
+          enable-search
+          class="left-0 flex flex-col w-full overflow-y-auto h-fit max-h-[160px] md:left-auto md:right-0 top-10"
          @on-search="onSearch"
          @click="onSelectIssue"
        />
      </template>
-    </search-issue>
-    <div class="flex items-center justify-end w-full gap-2 mt-64">
+    </filter-button>
+    <div class="flex items-center justify-end w-full gap-2">
      <woot-button
        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
        @click.prevent="onClose"
@@ -41,8 +48,8 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
 import LinearAPI from 'dashboard/api/integrations/linear';
-import SearchIssue from './SearchIssue.vue';
-import SearchListDropdown from './SearchListDropdown.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';

 const props = defineProps({
  conversationId: {
@@ -1,28 +0,0 @@
-<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>
@@ -1,26 +0,0 @@
-<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>
@@ -1,35 +0,0 @@
-<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>
-  </button>
-</template>
@@ -1,56 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { picoSearch } from '@scmmishra/pico-search';
-import SearchIssueItem from './SearchIssueItem.vue';
-import SearchBar from './SearchBar.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 isListEmpty = computed(() => {
-  return !filteredItems.value.length;
-});
-</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
-  >
-    <search-bar :input-value="searchTerm" @input="onSearch" />
-
-    <div
-      v-if="isListEmpty"
-      class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
-    >
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.EMPTY_LIST') }}
-    </div>
-    <search-issue-item
-      v-for="item in filteredItems"
-      :key="item.id"
-      :is-active="item.id === selectedId"
-      :button-text="item.name"
-      @click="$emit('click', item)"
-    />
-  </div>
-</template>
@@ -210,7 +210,7 @@
      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
      "CREATE": "Create",
      "LINK": {
-        "SEARCH": "Search linear issues",
+        "SEARCH": "Search issues",
        "SELECT": "Select issue",
        "TITLE": "Link",
        "EMPTY_LIST": "No linear issues found",