Commit 7fc090b7 authored by George Tsiolis's avatar George Tsiolis

Move RecentSearchesDropdownContent vue component

parent 88870c87
<script>
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import FilteredSearchTokenizer from '../filtered_search_tokenizer'; import FilteredSearchTokenizer from '../filtered_search_tokenizer';
export default { export default {
name: 'RecentSearchesDropdownContent', name: 'RecentSearchesDropdownContent',
props: { props: {
items: { items: {
type: Array, type: Array,
...@@ -19,7 +19,6 @@ export default { ...@@ -19,7 +19,6 @@ export default {
required: true, required: true,
}, },
}, },
computed: { computed: {
processedItems() { processedItems() {
return this.items.map((item) => { return this.items.map((item) => {
...@@ -42,7 +41,6 @@ export default { ...@@ -42,7 +41,6 @@ export default {
return this.items.length > 0; return this.items.length > 0;
}, },
}, },
methods: { methods: {
onItemActivated(text) { onItemActivated(text) {
eventHub.$emit('recentSearchesItemSelected', text); eventHub.$emit('recentSearchesItemSelected', text);
...@@ -54,8 +52,9 @@ export default { ...@@ -54,8 +52,9 @@ export default {
eventHub.$emit('requestClearRecentSearches'); eventHub.$emit('requestClearRecentSearches');
}, },
}, },
};
template: ` </script>
<template>
<div> <div>
<div <div
v-if="!isLocalStorageAvailable" v-if="!isLocalStorageAvailable"
...@@ -65,16 +64,20 @@ export default { ...@@ -65,16 +64,20 @@ export default {
<ul v-else-if="hasItems"> <ul v-else-if="hasItems">
<li <li
v-for="(item, index) in processedItems" v-for="(item, index) in processedItems"
:key="index"> :key="`processed-items-${index}`"
>
<button <button
type="button" type="button"
class="filtered-search-history-dropdown-item" class="filtered-search-history-dropdown-item"
@click="onItemActivated(item.text)"> @click="onItemActivated(item.text)">
<span> <span>
<span <span
v-for="(token, tokenIndex) in item.tokens" class="filtered-search-history-dropdown-token"
class="filtered-search-history-dropdown-token"> v-for="(token, index) in item.tokens"
<span class="name">{{ token.prefix }}</span><span class="value">{{ token.suffix }}</span> :key="`dropdown-token-${index}`"
>
<span class="name">{{ token.prefix }}</span>
<span class="value">{{ token.suffix }}</span>
</span> </span>
</span> </span>
<span class="filtered-search-history-dropdown-search-token"> <span class="filtered-search-history-dropdown-search-token">
...@@ -98,5 +101,4 @@ export default { ...@@ -98,5 +101,4 @@ export default {
You don't have any recent searches You don't have any recent searches
</div> </div>
</div> </div>
`, </template>
};
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 { ...@@ -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: `
......
---
title: Move RecentSearchesDropdownContent vue component
merge_request: 16951
author: George Tsiolis
type: performance
...@@ -39,8 +39,8 @@ describe 'Recent searches', :js do ...@@ -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
......
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) => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment