more component cleanup

This commit is contained in:
Dennis Tang 2018-05-11 14:12:25 +02:00
parent 3daa298d9a
commit 29ed911d83
3 changed files with 24 additions and 27 deletions

View file

@ -7,12 +7,6 @@ import gkeDropdownMixin from './gke_dropdown_mixin';
export default { export default {
name: 'GkeMachineTypeDropdown', name: 'GkeMachineTypeDropdown',
mixins: [gkeDropdownMixin], mixins: [gkeDropdownMixin],
data() {
return {
searchPlaceholderText: s__('ClusterIntegration|Search machine types'),
noSearchResultsText: s__('ClusterIntegration|No machine types matched your search'),
};
},
computed: { computed: {
...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']), ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']),
...mapState({ items: 'machineTypes' }), ...mapState({ items: 'machineTypes' }),
@ -87,18 +81,23 @@ export default {
<div class="dropdown-menu dropdown-select"> <div class="dropdown-menu dropdown-select">
<dropdown-search-input <dropdown-search-input
v-model="searchQuery" v-model="searchQuery"
:placeholder-text="searchPlaceholderText" :placeholder-text="s__('ClusterIntegration|Search machine types')"
/> />
<div class="dropdown-content"> <div class="dropdown-content">
<ul> <ul>
<li v-show="!results.length"> <li v-show="!results.length">
<span class="menu-item">{{ noSearchResultsText }}</span> <span class="menu-item">
{{ s__('ClusterIntegration|No machine types matched your search') }}
</span>
</li> </li>
<li <li
v-for="result in results" v-for="result in results"
:key="result.id" :key="result.id"
> >
<button @click.prevent="setItem(result.name)"> <button
type="button"
@click.prevent="setItem(result.name)"
>
{{ result.name }} {{ result.name }}
</button> </button>
</li> </li>

View file

@ -14,12 +14,6 @@ export default {
required: true, required: true,
}, },
}, },
data() {
return {
searchPlaceholderText: s__('ClusterIntegration|Search projects'),
noSearchResultsText: s__('ClusterIntegration|No projects matched your search'),
};
},
computed: { computed: {
...mapState(['selectedProject']), ...mapState(['selectedProject']),
...mapState({ items: 'projects' }), ...mapState({ items: 'projects' }),
@ -116,18 +110,23 @@ export default {
<div class="dropdown-menu dropdown-select"> <div class="dropdown-menu dropdown-select">
<dropdown-search-input <dropdown-search-input
v-model="searchQuery" v-model="searchQuery"
:placeholder-text="searchPlaceholderText" :placeholder-text="s__('ClusterIntegration|Search projects')"
/> />
<div class="dropdown-content"> <div class="dropdown-content">
<ul> <ul>
<li v-show="!results.length"> <li v-show="!results.length">
<span class="menu-item">{{ noSearchResultsText }}</span> <span class="menu-item">
{{ s__('ClusterIntegration|No projects matched your search') }}
</span>
</li> </li>
<li <li
v-for="result in results" v-for="result in results"
:key="result.project_number" :key="result.project_number"
> >
<button @click.prevent="setItem(result)"> <button
type="button"
@click.prevent="setItem(result)"
>
{{ result.name }} {{ result.name }}
</button> </button>
</li> </li>

View file

@ -7,12 +7,6 @@ import gkeDropdownMixin from './gke_dropdown_mixin';
export default { export default {
name: 'GkeZoneDropdown', name: 'GkeZoneDropdown',
mixins: [gkeDropdownMixin], mixins: [gkeDropdownMixin],
data() {
return {
searchPlaceholderText: s__('ClusterIntegration|Search zones'),
noSearchResultsText: s__('ClusterIntegration|No zones matched your search'),
};
},
computed: { computed: {
...mapState(['selectedProject', 'selectedZone']), ...mapState(['selectedProject', 'selectedZone']),
...mapState({ items: 'zones' }), ...mapState({ items: 'zones' }),
@ -68,18 +62,23 @@ export default {
<div class="dropdown-menu dropdown-select"> <div class="dropdown-menu dropdown-select">
<dropdown-search-input <dropdown-search-input
v-model="searchQuery" v-model="searchQuery"
:placeholder-text="searchPlaceholderText" :placeholder-text="s__('ClusterIntegration|Search zones')"
/> />
<div class="dropdown-content"> <div class="dropdown-content">
<ul> <ul>
<li v-show="!results.length"> <li v-show="!results.length">
<span class="menu-item">{{ noSearchResultsText }}</span> <span class="menu-item">
{{ s__('ClusterIntegration|No zones matched your search') }}
</span>
</li> </li>
<li <li
v-for="result in results" v-for="result in results"
:key="result.id" :key="result.id"
> >
<button @click.prevent="setItem(result.name)"> <button
type="button"
@click.prevent="setItem(result.name)"
>
{{ result.name }} {{ result.name }}
</button> </button>
</li> </li>