Skip to content
Snippets Groups Projects

Use GlCollapsibleListbox in ci_environments_dropdown.vue

Merged Eugie Limpin requested to merge el-use-collapsible-listbox into master
1 unresolved thread
4 files
+ 56
86
Compare changes
  • Side-by-side
  • Inline
Files
4
<script>
<script>
import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui';
import { GlDropdownDivider, GlDropdownItem, GlCollapsibleListbox } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
import { __, sprintf } from '~/locale';
import { convertEnvironmentScope } from '../utils';
import { convertEnvironmentScope } from '../utils';
export default {
export default {
name: 'CiEnvironmentsDropdown',
name: 'CiEnvironmentsDropdown',
components: {
components: {
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
GlDropdownDivider,
GlSearchBoxByType,
GlDropdownItem,
 
GlCollapsibleListbox,
},
},
props: {
props: {
environments: {
environments: {
@@ -24,6 +23,7 @@ export default {
@@ -24,6 +23,7 @@ export default {
},
},
data() {
data() {
return {
return {
 
selectedEnvironment: '',
searchTerm: '',
searchTerm: '',
};
};
},
},
@@ -33,9 +33,15 @@ export default {
@@ -33,9 +33,15 @@ export default {
},
},
filteredEnvironments() {
filteredEnvironments() {
const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
return this.environments.filter((environment) => {
return environment.toLowerCase().includes(lowerCasedSearchTerm);
return this.environments
});
.filter((environment) => {
 
return environment.toLowerCase().includes(lowerCasedSearchTerm);
 
})
 
.map((environment) => ({
 
value: environment,
 
text: environment,
 
}));
},
},
shouldRenderCreateButton() {
shouldRenderCreateButton() {
return this.searchTerm && !this.environments.includes(this.searchTerm);
return this.searchTerm && !this.environments.includes(this.searchTerm);
@@ -47,44 +53,29 @@ export default {
@@ -47,44 +53,29 @@ export default {
methods: {
methods: {
selectEnvironment(selected) {
selectEnvironment(selected) {
this.$emit('select-environment', selected);
this.$emit('select-environment', selected);
this.clearSearch();
this.selectedEnvironment = selected;
},
convertEnvironmentScopeValue(scope) {
return convertEnvironmentScope(scope);
},
},
createEnvironmentScope() {
createEnvironmentScope() {
this.$emit('create-environment-scope', this.searchTerm);
this.$emit('create-environment-scope', this.searchTerm);
this.selectEnvironment(this.searchTerm);
this.selectEnvironment(this.searchTerm);
},
},
isSelected(env) {
return this.selectedEnvironmentScope === env;
},
clearSearch() {
this.searchTerm = '';
},
},
},
};
};
</script>
</script>
<template>
<template>
<gl-dropdown :text="environmentScopeLabel" @show="clearSearch">
<gl-collapsible-listbox
<gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" />
v-model="selectedEnvironment"
<gl-dropdown-item
searchable
v-for="environment in filteredEnvironments"
:items="filteredEnvironments"
:key="environment"
:toggle-text="environmentScopeLabel"
:is-checked="isSelected(environment)"
@search="searchTerm = $event.trim()"
is-check-item
@select="selectEnvironment"
@click="selectEnvironment(environment)"
>
>
<template v-if="shouldRenderCreateButton" #footer>
{{ convertEnvironmentScopeValue(environment) }}
</gl-dropdown-item>
<gl-dropdown-item v-if="!filteredEnvironments.length" ref="noMatchingResults">{{
__('No matching results')
}}</gl-dropdown-item>
<template v-if="shouldRenderCreateButton">
<gl-dropdown-divider />
<gl-dropdown-divider />
<gl-dropdown-item data-testid="create-wildcard-button" @click="createEnvironmentScope">
<gl-dropdown-item data-testid="create-wildcard-button" @click="createEnvironmentScope">
{{ composedCreateButtonLabel }}
{{ composedCreateButtonLabel }}
</gl-dropdown-item>
</gl-dropdown-item>
</template>
</template>
</gl-dropdown>
</gl-collapsible-listbox>
</template>
</template>
Loading