diff options
Diffstat (limited to 'app/assets/javascripts/invite_members/components/group_select.vue')
-rw-r--r-- | app/assets/javascripts/invite_members/components/group_select.vue | 50 |
1 files changed, 44 insertions, 6 deletions
diff --git a/app/assets/javascripts/invite_members/components/group_select.vue b/app/assets/javascripts/invite_members/components/group_select.vue index 4a72e97db8c..2d1e57a1177 100644 --- a/app/assets/javascripts/invite_members/components/group_select.vue +++ b/app/assets/javascripts/invite_members/components/group_select.vue @@ -1,13 +1,20 @@ <script> -import { GlDropdown, GlDropdownItem, GlDropdownText, GlSearchBoxByType } from '@gitlab/ui'; +import { + GlAvatarLabeled, + GlDropdown, + GlDropdownItem, + GlDropdownText, + GlSearchBoxByType, +} from '@gitlab/ui'; import { debounce } from 'lodash'; -import Api from '~/api'; import { s__ } from '~/locale'; -import { SEARCH_DELAY } from '../constants'; +import { getGroups, getDescendentGroups } from '~/rest_api'; +import { SEARCH_DELAY, GROUP_FILTERS } from '../constants'; export default { name: 'GroupSelect', components: { + GlAvatarLabeled, GlDropdown, GlDropdownItem, GlDropdownText, @@ -16,6 +23,18 @@ export default { model: { prop: 'selectedGroup', }, + props: { + groupsFilter: { + type: String, + required: false, + default: GROUP_FILTERS.ALL, + }, + parentGroupId: { + type: Number, + required: false, + default: null, + }, + }, data() { return { isFetching: false, @@ -43,12 +62,13 @@ export default { methods: { retrieveGroups: debounce(function debouncedRetrieveGroups() { this.isFetching = true; - return Api.groups(this.searchTerm, this.$options.defaultFetchOptions) + return this.fetchGroups() .then((response) => { this.groups = response.map((group) => ({ id: group.id, name: group.full_name, path: group.path, + avatarUrl: group.avatar_url, })); this.isFetching = false; }) @@ -61,6 +81,18 @@ export default { this.$emit('input', this.selectedGroup); }, + fetchGroups() { + switch (this.groupsFilter) { + case GROUP_FILTERS.DESCENDANT_GROUPS: + return getDescendentGroups( + this.parentGroupId, + this.searchTerm, + this.$options.defaultFetchOptions, + ); + default: + return getGroups(this.searchTerm, this.$options.defaultFetchOptions); + } + }, }, i18n: { dropdownText: s__('GroupSelect|Select a group'), @@ -82,7 +114,7 @@ export default { menu-class="gl-w-full!" > <gl-search-box-by-type - v-model.trim="searchTerm" + v-model="searchTerm" :is-loading="isFetching" :placeholder="$options.i18n.searchPlaceholder" data-qa-selector="group_select_dropdown_search_field" @@ -93,7 +125,13 @@ export default { :name="group.name" @click="selectGroup(group)" > - {{ group.name }} + <gl-avatar-labeled + :label="group.name" + :src="group.avatarUrl" + :entity-id="group.id" + :entity-name="group.name" + :size="32" + /> </gl-dropdown-item> <gl-dropdown-text v-if="isFetchResultEmpty && !isFetching" data-testid="empty-result-message"> <span class="gl-text-gray-500">{{ $options.i18n.emptySearchResult }}</span> |