diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue | 58 |
1 files changed, 37 insertions, 21 deletions
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue index fd45ac52647..15a5ce85046 100644 --- a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue +++ b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue @@ -1,6 +1,7 @@ <script> import { debounce } from 'lodash'; import { GlLoadingIcon, GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui'; +import { __, n__, sprintf } from '~/locale'; import ProjectListItem from './project_list_item.vue'; const SEARCH_INPUT_TIMEOUT_MS = 500; @@ -24,28 +25,23 @@ export default { }, showNoResultsMessage: { type: Boolean, - required: false, - default: false, + required: true, }, showMinimumSearchQueryMessage: { type: Boolean, - required: false, - default: false, + required: true, }, showLoadingIndicator: { type: Boolean, - required: false, - default: false, + required: true, }, showSearchErrorMessage: { type: Boolean, - required: false, - default: false, + required: true, }, totalResults: { type: Number, - required: false, - default: 0, + required: true, }, }, data() { @@ -53,6 +49,20 @@ export default { searchQuery: '', }; }, + computed: { + legendText() { + const count = this.projectSearchResults.length; + const total = this.totalResults; + + if (total > 0) { + return sprintf(__('Showing %{count} of %{total} projects'), { count, total }); + } + + return sprintf(n__('Showing %{count} project', 'Showing %{count} projects', count), { + count, + }); + }, + }, methods: { projectClicked(project) { this.$emit('projectClicked', project); @@ -87,17 +97,23 @@ export default { :total-items="totalResults" @bottomReached="bottomReached" > - <div v-if="!showLoadingIndicator" slot="items" class="d-flex flex-column"> - <project-list-item - v-for="project in projectSearchResults" - :key="project.id" - :selected="isSelected(project)" - :project="project" - :matcher="searchQuery" - class="js-project-list-item" - @click="projectClicked(project)" - /> - </div> + <template v-if="!showLoadingIndicator" #items> + <div class="d-flex flex-column"> + <project-list-item + v-for="project in projectSearchResults" + :key="project.id" + :selected="isSelected(project)" + :project="project" + :matcher="searchQuery" + class="js-project-list-item" + @click="projectClicked(project)" + /> + </div> + </template> + + <template #default> + {{ legendText }} + </template> </gl-infinite-scroll> <div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message"> {{ __('Sorry, no projects matched your search') }} |