diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-04 00:08:18 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-04 00:08:18 +0300 |
commit | 692f4b734f1976b690dccb5458c198b5205c51b5 (patch) | |
tree | c6af56b7127850615b9dc5626cefbe665fd96ea9 /app/assets/javascripts/search | |
parent | 592223823c8ebf6e32d98e4b12620ba8ff043cca (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/search')
3 files changed, 145 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/state_filter/components/state_filter.vue b/app/assets/javascripts/search/state_filter/components/state_filter.vue new file mode 100644 index 00000000000..5245c23843e --- /dev/null +++ b/app/assets/javascripts/search/state_filter/components/state_filter.vue @@ -0,0 +1,91 @@ +<script> +import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; +import { FILTER_STATES, FILTER_HEADER, FILTER_TEXT } from '../constants'; +import { setUrlParams, visitUrl } from '~/lib/utils/url_utility'; + +const FILTERS_ARRAY = Object.values(FILTER_STATES); + +export default { + name: 'StateFilter', + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + }, + props: { + scope: { + type: String, + required: true, + }, + state: { + type: String, + required: false, + default: FILTER_STATES.ANY.value, + validator: v => FILTERS_ARRAY.some(({ value }) => value === v), + }, + }, + computed: { + selectedFilterText() { + let filterText = FILTER_TEXT; + if (this.selectedFilter === FILTER_STATES.CLOSED.value) { + filterText = FILTER_STATES.CLOSED.label; + } else if (this.selectedFilter === FILTER_STATES.OPEN.value) { + filterText = FILTER_STATES.OPEN.label; + } + return filterText; + }, + selectedFilter: { + get() { + if (FILTERS_ARRAY.some(({ value }) => value === this.state)) { + return this.state; + } + + return FILTER_STATES.ANY.value; + }, + set(state) { + visitUrl(setUrlParams({ state })); + }, + }, + }, + methods: { + dropDownItemClass(filter) { + return { + 'gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-pb-2! gl-mb-2': + filter === FILTER_STATES.ANY, + }; + }, + isFilterSelected(filter) { + return filter === this.selectedFilter; + }, + handleFilterChange(state) { + this.selectedFilter = state; + }, + }, + filterStates: FILTER_STATES, + filterHeader: FILTER_HEADER, + filtersArray: FILTERS_ARRAY, +}; +</script> + +<template> + <gl-dropdown + v-if="scope === 'issues'" + :text="selectedFilterText" + class="col-sm-3 gl-pt-4 gl-pl-0" + > + <header class="gl-text-center gl-font-weight-bold gl-font-lg"> + {{ $options.filterHeader }} + </header> + <gl-dropdown-divider /> + <gl-dropdown-item + v-for="filter in $options.filtersArray" + :key="filter.value" + :is-check-item="true" + :is-checked="isFilterSelected(filter.value)" + :class="dropDownItemClass(filter)" + @click="handleFilterChange(filter.value)" + > + {{ filter.label }} + </gl-dropdown-item> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/search/state_filter/constants.js b/app/assets/javascripts/search/state_filter/constants.js new file mode 100644 index 00000000000..25728486360 --- /dev/null +++ b/app/assets/javascripts/search/state_filter/constants.js @@ -0,0 +1,20 @@ +import { __ } from '~/locale'; + +export const FILTER_HEADER = __('Status'); + +export const FILTER_TEXT = __('Any Status'); + +export const FILTER_STATES = { + ANY: { + label: __('Any'), + value: 'all', + }, + OPEN: { + label: __('Open'), + value: 'opened', + }, + CLOSED: { + label: __('Closed'), + value: 'closed', + }, +}; diff --git a/app/assets/javascripts/search/state_filter/index.js b/app/assets/javascripts/search/state_filter/index.js new file mode 100644 index 00000000000..13708574cfb --- /dev/null +++ b/app/assets/javascripts/search/state_filter/index.js @@ -0,0 +1,34 @@ +import Vue from 'vue'; +import Translate from '~/vue_shared/translate'; +import StateFilter from './components/state_filter.vue'; + +Vue.use(Translate); + +export default () => { + const el = document.getElementById('js-search-filter-by-state'); + + if (!el) return false; + + return new Vue({ + el, + components: { + StateFilter, + }, + data() { + const { dataset } = this.$options.el; + return { + scope: dataset.scope, + state: dataset.state, + }; + }, + + render(createElement) { + return createElement('state-filter', { + props: { + scope: this.scope, + state: this.state, + }, + }); + }, + }); +}; |