diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-23 15:09:58 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-23 15:09:58 +0300 |
commit | a071c2888d62f7a56349e99f5c070407df2e17c1 (patch) | |
tree | 47e5d2cb95920a1e28348c3af5a3d9987c2805c2 /app/assets/javascripts/search | |
parent | 8f2b51af416f4f4451632f6b3c2ada52c52eb44f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/search')
6 files changed, 196 insertions, 107 deletions
diff --git a/app/assets/javascripts/search/components/dropdown_filter.vue b/app/assets/javascripts/search/components/dropdown_filter.vue new file mode 100644 index 00000000000..cd9237026f2 --- /dev/null +++ b/app/assets/javascripts/search/components/dropdown_filter.vue @@ -0,0 +1,111 @@ +<script> +import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; +import { setUrlParams, visitUrl } from '~/lib/utils/url_utility'; +import { sprintf, s__ } from '~/locale'; + +export default { + name: 'DropdownFilter', + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + }, + props: { + initialFilter: { + type: String, + required: false, + default: null, + }, + filters: { + type: Object, + required: true, + }, + filtersArray: { + type: Array, + required: true, + }, + header: { + type: String, + required: true, + }, + param: { + type: String, + required: true, + }, + scope: { + type: String, + required: true, + }, + supportedScopes: { + type: Array, + required: true, + }, + }, + computed: { + filter() { + return this.initialFilter || this.filters.ANY.value; + }, + selectedFilterText() { + const f = this.filtersArray.find(({ value }) => value === this.selectedFilter); + if (!f || f === this.filters.ANY) { + return sprintf(s__('Any %{header}'), { header: this.header }); + } + + return f.label; + }, + showDropdown() { + return this.supportedScopes.includes(this.scope); + }, + selectedFilter: { + get() { + if (this.filtersArray.some(({ value }) => value === this.filter)) { + return this.filter; + } + + return this.filters.ANY.value; + }, + set(filter) { + visitUrl(setUrlParams({ [this.param]: filter })); + }, + }, + }, + methods: { + dropDownItemClass(filter) { + return { + 'gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-pb-2! gl-mb-2': + filter === this.filters.ANY, + }; + }, + isFilterSelected(filter) { + return filter === this.selectedFilter; + }, + handleFilterChange(filter) { + this.selectedFilter = filter; + }, + }, +}; +</script> + +<template> + <gl-dropdown + v-if="showDropdown" + :text="selectedFilterText" + class="col-3 gl-pt-4 gl-pl-0 gl-pr-0 gl-mr-4" + menu-class="gl-w-full! gl-pl-0" + > + <header class="gl-text-center gl-font-weight-bold gl-font-lg"> + {{ header }} + </header> + <gl-dropdown-divider /> + <gl-dropdown-item + v-for="f in filtersArray" + :key="f.value" + :is-check-item="true" + :is-checked="isFilterSelected(f.value)" + :class="dropDownItemClass(f)" + @click="handleFilterChange(f.value)" + > + {{ f.label }} + </gl-dropdown-item> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/search/confidential_filter/constants.js b/app/assets/javascripts/search/confidential_filter/constants.js new file mode 100644 index 00000000000..4665ce6a5d1 --- /dev/null +++ b/app/assets/javascripts/search/confidential_filter/constants.js @@ -0,0 +1,28 @@ +import { __ } from '~/locale'; + +export const FILTER_HEADER = __('Confidentiality'); + +export const FILTER_STATES = { + ANY: { + label: __('Any'), + value: null, + }, + CONFIDENTIAL: { + label: __('Confidential'), + value: 'yes', + }, + NOT_CONFIDENTIAL: { + label: __('Not confidential'), + value: 'no', + }, +}; + +export const SCOPES = { + ISSUES: 'issues', +}; + +export const FILTER_STATES_BY_SCOPE = { + [SCOPES.ISSUES]: [FILTER_STATES.ANY, FILTER_STATES.CONFIDENTIAL, FILTER_STATES.NOT_CONFIDENTIAL], +}; + +export const FILTER_PARAM = 'confidential'; diff --git a/app/assets/javascripts/search/confidential_filter/index.js b/app/assets/javascripts/search/confidential_filter/index.js new file mode 100644 index 00000000000..bec772be0dd --- /dev/null +++ b/app/assets/javascripts/search/confidential_filter/index.js @@ -0,0 +1,39 @@ +import Vue from 'vue'; +import Translate from '~/vue_shared/translate'; +import DropdownFilter from '../components/dropdown_filter.vue'; +import { + FILTER_HEADER, + FILTER_PARAM, + FILTER_STATES_BY_SCOPE, + FILTER_STATES, + SCOPES, +} from './constants'; + +Vue.use(Translate); + +export default () => { + const el = document.getElementById('js-search-filter-by-confidential'); + + if (!el) return false; + + return new Vue({ + el, + data() { + return { ...el.dataset }; + }, + + render(createElement) { + return createElement(DropdownFilter, { + props: { + initialFilter: this.filter, + filtersArray: FILTER_STATES_BY_SCOPE[this.scope], + filters: FILTER_STATES, + header: FILTER_HEADER, + param: FILTER_PARAM, + scope: this.scope, + supportedScopes: Object.values(SCOPES), + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/search/state_filter/components/state_filter.vue b/app/assets/javascripts/search/state_filter/components/state_filter.vue deleted file mode 100644 index f08adaf8c83..00000000000 --- a/app/assets/javascripts/search/state_filter/components/state_filter.vue +++ /dev/null @@ -1,94 +0,0 @@ -<script> -import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; -import { - FILTER_STATES, - SCOPES, - FILTER_STATES_BY_SCOPE, - 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() { - const filter = FILTERS_ARRAY.find(({ value }) => value === this.selectedFilter); - if (!filter || filter === FILTER_STATES.ANY) { - return FILTER_TEXT; - } - - return filter.label; - }, - showDropdown() { - return Object.values(SCOPES).includes(this.scope); - }, - 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, - filtersByScope: FILTER_STATES_BY_SCOPE, -}; -</script> - -<template> - <gl-dropdown v-if="showDropdown" :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.filtersByScope[scope]" - :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 index 2f11cab9044..00ae1bd9750 100644 --- a/app/assets/javascripts/search/state_filter/constants.js +++ b/app/assets/javascripts/search/state_filter/constants.js @@ -2,8 +2,6 @@ import { __ } from '~/locale'; export const FILTER_HEADER = __('Status'); -export const FILTER_TEXT = __('Any Status'); - export const FILTER_STATES = { ANY: { label: __('Any'), @@ -37,3 +35,5 @@ export const FILTER_STATES_BY_SCOPE = { FILTER_STATES.CLOSED, ], }; + +export const FILTER_PARAM = 'state'; diff --git a/app/assets/javascripts/search/state_filter/index.js b/app/assets/javascripts/search/state_filter/index.js index 13708574cfb..2c12885c40b 100644 --- a/app/assets/javascripts/search/state_filter/index.js +++ b/app/assets/javascripts/search/state_filter/index.js @@ -1,6 +1,13 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; -import StateFilter from './components/state_filter.vue'; +import DropdownFilter from '../components/dropdown_filter.vue'; +import { + FILTER_HEADER, + FILTER_PARAM, + FILTER_STATES_BY_SCOPE, + FILTER_STATES, + SCOPES, +} from './constants'; Vue.use(Translate); @@ -11,22 +18,20 @@ export default () => { return new Vue({ el, - components: { - StateFilter, - }, data() { - const { dataset } = this.$options.el; - return { - scope: dataset.scope, - state: dataset.state, - }; + return { ...el.dataset }; }, render(createElement) { - return createElement('state-filter', { + return createElement(DropdownFilter, { props: { + initialFilter: this.filter, + filtersArray: FILTER_STATES_BY_SCOPE[this.scope], + filters: FILTER_STATES, + header: FILTER_HEADER, + param: FILTER_PARAM, scope: this.scope, - state: this.state, + supportedScopes: Object.values(SCOPES), }, }); }, |