1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<script>
import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
import FilteredSortContainerRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
export default {
name: 'SearchAndSortBar',
components: {
FilteredSortContainerRoot,
},
props: {
// Search
namespace: {
type: String,
required: true,
},
searchInputPlaceholder: {
type: String,
required: true,
},
recentSearchesStorageKey: {
type: String,
required: false,
default: '',
},
initialFilterValue: {
type: Array,
required: false,
default: () => [],
},
// Sort
initialSortBy: {
type: String,
required: false,
default: '',
validator: (value) => value === '' || /(_desc)|(_asc)/gi.test(value),
},
sortOptions: {
type: Array,
default: () => [],
required: false,
},
},
emits: ['onFilter', 'onSort'],
methods: {
onFilter(searchTerms) {
const searchQuery = searchTerms.reduce((terms, searchTerm) => {
if (searchTerm.type !== FILTERED_SEARCH_TERM) {
return '';
}
return `${terms} ${searchTerm.value.data}`;
}, '');
this.$emit('onFilter', searchQuery.trim() || null);
},
onSort(value) {
this.$emit('onSort', value);
},
},
};
</script>
<template>
<filtered-sort-container-root
:namespace="namespace"
:tokens="[] /* eslint-disable-line @gitlab/vue-no-new-non-primitive-in-template */"
:search-input-placeholder="searchInputPlaceholder"
:sort-options="sortOptions"
:initial-sort-by="initialSortBy"
class="gl-flex-grow-1"
@onFilter="onFilter"
@onSort="onSort"
/>
</template>
|
