diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-21 02:50:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-04-21 02:50:22 +0300 |
commit | 9dc93a4519d9d5d7be48ff274127136236a3adb3 (patch) | |
tree | 70467ae3692a0e35e5ea56bcb803eb512a10bedb /app/assets/javascripts/tags | |
parent | 4b0f34b6d759d6299322b3a54453e930c6121ff0 (diff) |
Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43
Diffstat (limited to 'app/assets/javascripts/tags')
-rw-r--r-- | app/assets/javascripts/tags/components/sort_dropdown.vue | 77 | ||||
-rw-r--r-- | app/assets/javascripts/tags/index.js | 24 |
2 files changed, 101 insertions, 0 deletions
diff --git a/app/assets/javascripts/tags/components/sort_dropdown.vue b/app/assets/javascripts/tags/components/sort_dropdown.vue new file mode 100644 index 00000000000..036ce2cca78 --- /dev/null +++ b/app/assets/javascripts/tags/components/sort_dropdown.vue @@ -0,0 +1,77 @@ +<script> +import { GlDropdown, GlDropdownItem, GlSearchBoxByClick } from '@gitlab/ui'; +import { mergeUrlParams, visitUrl, getParameterValues } from '~/lib/utils/url_utility'; +import { s__ } from '~/locale'; + +export default { + i18n: { + searchPlaceholder: s__('TagsPage|Filter by tag name'), + }, + components: { + GlDropdown, + GlDropdownItem, + GlSearchBoxByClick, + }, + inject: ['sortOptions', 'filterTagsPath'], + data() { + return { + selectedKey: 'updated_desc', + searchTerm: '', + }; + }, + computed: { + selectedSortMethod() { + return this.sortOptions[this.selectedKey]; + }, + }, + created() { + const sortValue = getParameterValues('sort'); + const searchValue = getParameterValues('search'); + + if (sortValue.length > 0) { + [this.selectedKey] = sortValue; + } + + if (searchValue.length > 0) { + [this.searchTerm] = searchValue; + } + }, + methods: { + isSortMethodSelected(sortKey) { + return sortKey === this.selectedKey; + }, + visitUrlFromOption(sortKey) { + this.selectedKey = sortKey; + const urlParams = {}; + + urlParams.search = this.searchTerm.length > 0 ? this.searchTerm : null; + urlParams.sort = sortKey; + + const newUrl = mergeUrlParams(urlParams, this.filterTagsPath); + visitUrl(newUrl); + }, + }, +}; +</script> +<template> + <div class="gl-display-flex gl-pr-3"> + <gl-search-box-by-click + v-model="searchTerm" + :placeholder="$options.i18n.searchPlaceholder" + class="gl-pr-3" + data-testid="tag-search" + @submit="visitUrlFromOption(selectedKey)" + /> + <gl-dropdown :text="selectedSortMethod" right data-testid="tags-dropdown"> + <gl-dropdown-item + v-for="(value, key) in sortOptions" + :key="key" + :is-checked="isSortMethodSelected(key)" + is-check-item + @click="visitUrlFromOption(key)" + > + {{ value }} + </gl-dropdown-item> + </gl-dropdown> + </div> +</template> diff --git a/app/assets/javascripts/tags/index.js b/app/assets/javascripts/tags/index.js new file mode 100644 index 00000000000..68510f3fe3a --- /dev/null +++ b/app/assets/javascripts/tags/index.js @@ -0,0 +1,24 @@ +import Vue from 'vue'; +import SortDropdown from './components/sort_dropdown.vue'; + +const mountDropdownApp = (el) => { + const { sortOptions, filterTagsPath } = el.dataset; + + return new Vue({ + el, + name: 'SortTagsDropdownApp', + components: { + SortDropdown, + }, + provide: { + sortOptions: JSON.parse(sortOptions), + filterTagsPath, + }, + render: (createElement) => createElement(SortDropdown), + }); +}; + +export default () => { + const el = document.getElementById('js-tags-sort-dropdown'); + return el ? mountDropdownApp(el) : null; +}; |