diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens')
3 files changed, 147 insertions, 11 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue index ae5d3965de1..b3b3d5c88c6 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue @@ -1,6 +1,6 @@ <script> import { GlAvatar, GlFilteredSearchSuggestion } from '@gitlab/ui'; - +import { compact } from 'lodash'; import createFlash from '~/flash'; import { __ } from '~/locale'; @@ -59,8 +59,10 @@ export default { .then((res) => { // We'd want to avoid doing this check but // users.json and /groups/:id/members & /projects/:id/users - // return response differently. - this.authors = Array.isArray(res) ? res : res.data; + // return response differently + + // TODO: rm when completed https://gitlab.com/gitlab-org/gitlab/-/issues/345756 + this.authors = Array.isArray(res) ? compact(res) : compact(res.data); }) .catch(() => createFlash({ diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue index c1d1bc7da91..aff93ebc9c0 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue @@ -1,16 +1,21 @@ <script> -import { GlFilteredSearchSuggestion } from '@gitlab/ui'; +import { GlDropdownDivider, GlDropdownSectionHeader, GlFilteredSearchSuggestion } from '@gitlab/ui'; import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { __ } from '~/locale'; import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue'; +import { formatDate } from '~/lib/utils/datetime_utility'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { DEFAULT_ITERATIONS } from '../constants'; export default { components: { BaseToken, + GlDropdownDivider, + GlDropdownSectionHeader, GlFilteredSearchSuggestion, }, + mixins: [glFeatureFlagMixin()], props: { active: { type: Boolean, @@ -40,6 +45,27 @@ export default { getActiveIteration(iterations, data) { return iterations.find((iteration) => this.getValue(iteration) === data); }, + groupIterationsByCadence(iterations) { + const cadences = []; + iterations.forEach((iteration) => { + if (!iteration.iterationCadence) { + return; + } + const { title } = iteration.iterationCadence; + const cadenceIteration = { + id: iteration.id, + title: iteration.title, + period: this.getIterationPeriod(iteration), + }; + const cadence = cadences.find((cad) => cad.title === title); + if (cadence) { + cadence.iterations.push(cadenceIteration); + } else { + cadences.push({ title, iterations: [cadenceIteration] }); + } + }); + return cadences; + }, fetchIterations(searchTerm) { this.loading = true; this.config @@ -57,6 +83,16 @@ export default { getValue(iteration) { return String(getIdFromGraphQLId(iteration.id)); }, + /** + * TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/344619 + * This method also exists as a utility function in ee/../iterations/utils.js + * Remove the duplication when iteration token is moved to EE. + */ + getIterationPeriod({ startDate, dueDate }) { + const start = formatDate(startDate, 'mmm d, yyyy', true); + const due = formatDate(dueDate, 'mmm d, yyyy', true); + return `${start} - ${due}`; + }, }, }; </script> @@ -77,13 +113,26 @@ export default { {{ activeTokenValue ? activeTokenValue.title : inputValue }} </template> <template #suggestions-list="{ suggestions }"> - <gl-filtered-search-suggestion - v-for="iteration in suggestions" - :key="iteration.id" - :value="getValue(iteration)" - > - {{ iteration.title }} - </gl-filtered-search-suggestion> + <template v-for="(cadence, index) in groupIterationsByCadence(suggestions)"> + <gl-dropdown-divider v-if="index !== 0" :key="index" /> + <gl-dropdown-section-header + :key="cadence.title" + class="gl-overflow-hidden" + :title="cadence.title" + > + {{ cadence.title }} + </gl-dropdown-section-header> + <gl-filtered-search-suggestion + v-for="iteration in cadence.iterations" + :key="iteration.id" + :value="getValue(iteration)" + > + {{ iteration.title }} + <div v-if="glFeatures.iterationCadences" class="gl-text-gray-400"> + {{ iteration.period }} + </div> + </gl-filtered-search-suggestion> + </template> </template> </base-token> </template> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue new file mode 100644 index 00000000000..f353cc3a765 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/release_token.vue @@ -0,0 +1,85 @@ +<script> +import { GlFilteredSearchSuggestion } from '@gitlab/ui'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; +import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue'; +import { DEFAULT_NONE_ANY } from '../constants'; + +export default { + components: { + BaseToken, + GlFilteredSearchSuggestion, + }, + props: { + active: { + type: Boolean, + required: true, + }, + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + releases: this.config.initialReleases || [], + loading: false, + }; + }, + computed: { + defaultReleases() { + return this.config.defaultReleases || DEFAULT_NONE_ANY; + }, + }, + methods: { + getActiveRelease(releases, data) { + return releases.find((release) => release.tag.toLowerCase() === data.toLowerCase()); + }, + fetchReleases(searchTerm) { + this.loading = true; + this.config + .fetchReleases(searchTerm) + .then((response) => { + this.releases = response; + }) + .catch(() => { + createFlash({ message: __('There was a problem fetching releases.') }); + }) + .finally(() => { + this.loading = false; + }); + }, + }, +}; +</script> + +<template> + <base-token + :active="active" + :config="config" + :value="value" + :default-suggestions="defaultReleases" + :suggestions="releases" + :suggestions-loading="loading" + :get-active-token-value="getActiveRelease" + @fetch-suggestions="fetchReleases" + v-on="$listeners" + > + <template #view="{ viewTokenProps: { inputValue, activeTokenValue } }"> + {{ activeTokenValue ? activeTokenValue.tag : inputValue }} + </template> + <template #suggestions-list="{ suggestions }"> + <gl-filtered-search-suggestion + v-for="release in suggestions" + :key="release.id" + :value="release.tag" + > + {{ release.tag }} + </gl-filtered-search-suggestion> + </template> + </base-token> +</template> |