feat: change search component
This commit is contained in:
Muhsin Keloth
+2
-2
@@ -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: {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
+67
@@ -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>
|
||||
Reference in New Issue
Block a user