Move RecentSearchesDropdownContent vue component
This commit is contained in:
parent
88870c871e
commit
7fc090b751
6 changed files with 114 additions and 108 deletions
|
@ -1,102 +0,0 @@
|
||||||
import eventHub from '../event_hub';
|
|
||||||
import FilteredSearchTokenizer from '../filtered_search_tokenizer';
|
|
||||||
|
|
||||||
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 }
|
|
||||||
= 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>
|
|
||||||
`,
|
|
||||||
};
|
|
|
@ -0,0 +1,104 @@
|
||||||
|
<script>
|
||||||
|
import eventHub from '../event_hub';
|
||||||
|
import FilteredSearchTokenizer from '../filtered_search_tokenizer';
|
||||||
|
|
||||||
|
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 }
|
||||||
|
= 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');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<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="`processed-items-${index}`"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="filtered-search-history-dropdown-item"
|
||||||
|
@click="onItemActivated(item.text)">
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="filtered-search-history-dropdown-token"
|
||||||
|
v-for="(token, index) in item.tokens"
|
||||||
|
:key="`dropdown-token-${index}`"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</template>
|
|
@ -1,5 +1,5 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import RecentSearchesDropdownContent from './components/recent_searches_dropdown_content';
|
import RecentSearchesDropdownContent from './components/recent_searches_dropdown_content.vue';
|
||||||
import eventHub from './event_hub';
|
import eventHub from './event_hub';
|
||||||
|
|
||||||
class RecentSearchesRoot {
|
class RecentSearchesRoot {
|
||||||
|
@ -33,7 +33,7 @@ class RecentSearchesRoot {
|
||||||
this.vm = new Vue({
|
this.vm = new Vue({
|
||||||
el: this.wrapperElement,
|
el: this.wrapperElement,
|
||||||
components: {
|
components: {
|
||||||
'recent-searches-dropdown-content': RecentSearchesDropdownContent,
|
RecentSearchesDropdownContent,
|
||||||
},
|
},
|
||||||
data() { return state; },
|
data() { return state; },
|
||||||
template: `
|
template: `
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Move RecentSearchesDropdownContent vue component
|
||||||
|
merge_request: 16951
|
||||||
|
author: George Tsiolis
|
||||||
|
type: performance
|
|
@ -39,8 +39,8 @@ describe 'Recent searches', :js do
|
||||||
|
|
||||||
items = all('.filtered-search-history-dropdown-item', visible: false, count: 2)
|
items = all('.filtered-search-history-dropdown-item', visible: false, count: 2)
|
||||||
|
|
||||||
expect(items[0].text).to eq('label:~qux garply')
|
expect(items[0].text).to eq('label: ~qux garply')
|
||||||
expect(items[1].text).to eq('label:~foo bar')
|
expect(items[1].text).to eq('label: ~foo bar')
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'saved recent searches are restored last on the list' do
|
it 'saved recent searches are restored last on the list' do
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import eventHub from '~/filtered_search/event_hub';
|
import eventHub from '~/filtered_search/event_hub';
|
||||||
import RecentSearchesDropdownContent from '~/filtered_search/components/recent_searches_dropdown_content';
|
import RecentSearchesDropdownContent from '~/filtered_search/components/recent_searches_dropdown_content.vue';
|
||||||
|
|
||||||
import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
|
import FilteredSearchTokenKeys from '~/filtered_search/filtered_search_token_keys';
|
||||||
|
|
||||||
const createComponent = (propsData) => {
|
const createComponent = (propsData) => {
|
||||||
|
|
Loading…
Reference in a new issue