102 lines
2.5 KiB
JavaScript
102 lines
2.5 KiB
JavaScript
import eventHub from '../event_hub';
|
|
|
|
export default {
|
|
name: 'RecentSearchesDropdownContent',
|
|
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
isLocalStorageAvailable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
allowedKeys: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
processedItems() {
|
|
return this.items.map((item) => {
|
|
const { tokens, searchToken }
|
|
= gl.FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
|
|
|
|
const resultantTokens = tokens.map(token => ({
|
|
prefix: `${token.key}:`,
|
|
suffix: `${token.symbol}${token.value}`,
|
|
}));
|
|
|
|
return {
|
|
text: item,
|
|
tokens: resultantTokens,
|
|
searchToken,
|
|
};
|
|
});
|
|
},
|
|
hasItems() {
|
|
return this.items.length > 0;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
onItemActivated(text) {
|
|
eventHub.$emit('recentSearchesItemSelected', text);
|
|
},
|
|
onRequestClearRecentSearches(e) {
|
|
// Stop the dropdown from closing
|
|
e.stopPropagation();
|
|
|
|
eventHub.$emit('requestClearRecentSearches');
|
|
},
|
|
},
|
|
|
|
template: `
|
|
<div>
|
|
<div
|
|
v-if="!isLocalStorageAvailable"
|
|
class="dropdown-info-note">
|
|
This feature requires local storage to be enabled
|
|
</div>
|
|
<ul v-else-if="hasItems">
|
|
<li
|
|
v-for="(item, index) in processedItems"
|
|
:key="index">
|
|
<button
|
|
type="button"
|
|
class="filtered-search-history-dropdown-item"
|
|
@click="onItemActivated(item.text)">
|
|
<span>
|
|
<span
|
|
v-for="(token, tokenIndex) in item.tokens"
|
|
class="filtered-search-history-dropdown-token">
|
|
<span class="name">{{ token.prefix }}</span><span class="value">{{ token.suffix }}</span>
|
|
</span>
|
|
</span>
|
|
<span class="filtered-search-history-dropdown-search-token">
|
|
{{ item.searchToken }}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="filtered-search-history-clear-button"
|
|
@click="onRequestClearRecentSearches($event)">
|
|
Clear recent searches
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
v-else
|
|
class="dropdown-info-note">
|
|
You don't have any recent searches
|
|
</div>
|
|
</div>
|
|
`,
|
|
};
|