diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-08 21:08:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-08 21:08:32 +0300 |
commit | 2ac48330152821211934d8aee396679d5895c5fe (patch) | |
tree | 4fa11de67f08298313bc73958980b55aed814ae2 /app/assets/javascripts/search | |
parent | 1ec1bec4ee7ef7cb2e6faa7af625950f6d7aa290 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/search')
-rw-r--r-- | app/assets/javascripts/search/confidential_filter/constants.js | 28 | ||||
-rw-r--r-- | app/assets/javascripts/search/confidential_filter/index.js | 39 | ||||
-rw-r--r-- | app/assets/javascripts/search/dropdown_filter/components/dropdown_filter.vue (renamed from app/assets/javascripts/search/components/dropdown_filter.vue) | 69 | ||||
-rw-r--r-- | app/assets/javascripts/search/dropdown_filter/constants/confidential_filter_data.js | 36 | ||||
-rw-r--r-- | app/assets/javascripts/search/dropdown_filter/constants/state_filter_data.js | 42 | ||||
-rw-r--r-- | app/assets/javascripts/search/dropdown_filter/index.js | 38 | ||||
-rw-r--r-- | app/assets/javascripts/search/index.js | 9 | ||||
-rw-r--r-- | app/assets/javascripts/search/state_filter/constants.js | 39 | ||||
-rw-r--r-- | app/assets/javascripts/search/state_filter/index.js | 39 | ||||
-rw-r--r-- | app/assets/javascripts/search/store/index.js | 12 | ||||
-rw-r--r-- | app/assets/javascripts/search/store/state.js | 4 |
11 files changed, 170 insertions, 185 deletions
diff --git a/app/assets/javascripts/search/confidential_filter/constants.js b/app/assets/javascripts/search/confidential_filter/constants.js deleted file mode 100644 index 4665ce6a5d1..00000000000 --- a/app/assets/javascripts/search/confidential_filter/constants.js +++ /dev/null @@ -1,28 +0,0 @@ -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 deleted file mode 100644 index bec772be0dd..00000000000 --- a/app/assets/javascripts/search/confidential_filter/index.js +++ /dev/null @@ -1,39 +0,0 @@ -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/components/dropdown_filter.vue b/app/assets/javascripts/search/dropdown_filter/components/dropdown_filter.vue index cd9237026f2..b6e2dd46358 100644 --- a/app/assets/javascripts/search/components/dropdown_filter.vue +++ b/app/assets/javascripts/search/dropdown_filter/components/dropdown_filter.vue @@ -1,4 +1,5 @@ <script> +import { mapState } from 'vuex'; import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; import { setUrlParams, visitUrl } from '~/lib/utils/url_utility'; import { sprintf, s__ } from '~/locale'; @@ -11,50 +12,27 @@ export default { GlDropdownDivider, }, props: { - initialFilter: { - type: String, - required: false, - default: null, - }, - filters: { + filterData: { type: Object, required: true, }, - filtersArray: { - type: Array, - required: true, - }, - header: { - type: String, - required: true, + }, + computed: { + ...mapState(['query']), + scope() { + return this.query.scope; }, - param: { - type: String, - required: true, + supportedScopes() { + return Object.values(this.filterData.scopes); }, - scope: { - type: String, - required: true, + initialFilter() { + return this.query[this.filterData.filterParam]; }, - supportedScopes: { - type: Array, - required: true, - }, - }, - computed: { filter() { - return this.initialFilter || this.filters.ANY.value; + return this.initialFilter || this.filterData.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); + filtersArray() { + return this.filterData.filterByScope[this.scope]; }, selectedFilter: { get() { @@ -62,18 +40,29 @@ export default { return this.filter; } - return this.filters.ANY.value; + return this.filterData.filters.ANY.value; }, set(filter) { - visitUrl(setUrlParams({ [this.param]: filter })); + visitUrl(setUrlParams({ [this.filterData.filterParam]: filter })); }, }, + selectedFilterText() { + const f = this.filtersArray.find(({ value }) => value === this.selectedFilter); + if (!f || f === this.filterData.filters.ANY) { + return sprintf(s__('Any %{header}'), { header: this.filterData.header }); + } + + return f.label; + }, + showDropdown() { + return this.supportedScopes.includes(this.scope); + }, }, 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, + filter === this.filterData.filters.ANY, }; }, isFilterSelected(filter) { @@ -94,7 +83,7 @@ export default { menu-class="gl-w-full! gl-pl-0" > <header class="gl-text-center gl-font-weight-bold gl-font-lg"> - {{ header }} + {{ filterData.header }} </header> <gl-dropdown-divider /> <gl-dropdown-item diff --git a/app/assets/javascripts/search/dropdown_filter/constants/confidential_filter_data.js b/app/assets/javascripts/search/dropdown_filter/constants/confidential_filter_data.js new file mode 100644 index 00000000000..b29daca89cb --- /dev/null +++ b/app/assets/javascripts/search/dropdown_filter/constants/confidential_filter_data.js @@ -0,0 +1,36 @@ +import { __ } from '~/locale'; + +const header = __('Confidentiality'); + +const filters = { + ANY: { + label: __('Any'), + value: null, + }, + CONFIDENTIAL: { + label: __('Confidential'), + value: 'yes', + }, + NOT_CONFIDENTIAL: { + label: __('Not confidential'), + value: 'no', + }, +}; + +const scopes = { + ISSUES: 'issues', +}; + +const filterByScope = { + [scopes.ISSUES]: [filters.ANY, filters.CONFIDENTIAL, filters.NOT_CONFIDENTIAL], +}; + +const filterParam = 'confidential'; + +export default { + header, + filters, + scopes, + filterByScope, + filterParam, +}; diff --git a/app/assets/javascripts/search/dropdown_filter/constants/state_filter_data.js b/app/assets/javascripts/search/dropdown_filter/constants/state_filter_data.js new file mode 100644 index 00000000000..0b93aa0be29 --- /dev/null +++ b/app/assets/javascripts/search/dropdown_filter/constants/state_filter_data.js @@ -0,0 +1,42 @@ +import { __ } from '~/locale'; + +const header = __('Status'); + +const filters = { + ANY: { + label: __('Any'), + value: 'all', + }, + OPEN: { + label: __('Open'), + value: 'opened', + }, + CLOSED: { + label: __('Closed'), + value: 'closed', + }, + MERGED: { + label: __('Merged'), + value: 'merged', + }, +}; + +const scopes = { + ISSUES: 'issues', + MERGE_REQUESTS: 'merge_requests', +}; + +const filterByScope = { + [scopes.ISSUES]: [filters.ANY, filters.OPEN, filters.CLOSED], + [scopes.MERGE_REQUESTS]: [filters.ANY, filters.OPEN, filters.MERGED, filters.CLOSED], +}; + +const filterParam = 'state'; + +export default { + header, + filters, + scopes, + filterByScope, + filterParam, +}; diff --git a/app/assets/javascripts/search/dropdown_filter/index.js b/app/assets/javascripts/search/dropdown_filter/index.js new file mode 100644 index 00000000000..e5e0745d990 --- /dev/null +++ b/app/assets/javascripts/search/dropdown_filter/index.js @@ -0,0 +1,38 @@ +import Vue from 'vue'; +import Translate from '~/vue_shared/translate'; +import DropdownFilter from './components/dropdown_filter.vue'; +import stateFilterData from './constants/state_filter_data'; +import confidentialFilterData from './constants/confidential_filter_data'; + +Vue.use(Translate); + +const mountDropdownFilter = (store, { id, filterData }) => { + const el = document.getElementById(id); + + if (!el) return false; + + return new Vue({ + el, + store, + render(createElement) { + return createElement(DropdownFilter, { + props: { + filterData, + }, + }); + }, + }); +}; + +const dropdownFilters = [ + { + id: 'js-search-filter-by-state', + filterData: stateFilterData, + }, + { + id: 'js-search-filter-by-confidential', + filterData: confidentialFilterData, + }, +]; + +export default store => [...dropdownFilters].map(filter => mountDropdownFilter(store, filter)); diff --git a/app/assets/javascripts/search/index.js b/app/assets/javascripts/search/index.js new file mode 100644 index 00000000000..780d3ff0d25 --- /dev/null +++ b/app/assets/javascripts/search/index.js @@ -0,0 +1,9 @@ +import { queryToObject } from '~/lib/utils/url_utility'; +import createStore from './store'; +import initDropdownFilters from './dropdown_filter'; + +export default () => { + const store = createStore({ query: queryToObject(window.location.search) }); + + initDropdownFilters(store); +}; diff --git a/app/assets/javascripts/search/state_filter/constants.js b/app/assets/javascripts/search/state_filter/constants.js deleted file mode 100644 index 00ae1bd9750..00000000000 --- a/app/assets/javascripts/search/state_filter/constants.js +++ /dev/null @@ -1,39 +0,0 @@ -import { __ } from '~/locale'; - -export const FILTER_HEADER = __('Status'); - -export const FILTER_STATES = { - ANY: { - label: __('Any'), - value: 'all', - }, - OPEN: { - label: __('Open'), - value: 'opened', - }, - CLOSED: { - label: __('Closed'), - value: 'closed', - }, - MERGED: { - label: __('Merged'), - value: 'merged', - }, -}; - -export const SCOPES = { - ISSUES: 'issues', - MERGE_REQUESTS: 'merge_requests', -}; - -export const FILTER_STATES_BY_SCOPE = { - [SCOPES.ISSUES]: [FILTER_STATES.ANY, FILTER_STATES.OPEN, FILTER_STATES.CLOSED], - [SCOPES.MERGE_REQUESTS]: [ - FILTER_STATES.ANY, - FILTER_STATES.OPEN, - FILTER_STATES.MERGED, - 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 deleted file mode 100644 index 2c12885c40b..00000000000 --- a/app/assets/javascripts/search/state_filter/index.js +++ /dev/null @@ -1,39 +0,0 @@ -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-state'); - - 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/store/index.js b/app/assets/javascripts/search/store/index.js new file mode 100644 index 00000000000..10cfb647a92 --- /dev/null +++ b/app/assets/javascripts/search/store/index.js @@ -0,0 +1,12 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import createState from './state'; + +Vue.use(Vuex); + +export const getStoreConfig = ({ query }) => ({ + state: createState({ query }), +}); + +const createStore = config => new Vuex.Store(getStoreConfig(config)); +export default createStore; diff --git a/app/assets/javascripts/search/store/state.js b/app/assets/javascripts/search/store/state.js new file mode 100644 index 00000000000..9115a613767 --- /dev/null +++ b/app/assets/javascripts/search/store/state.js @@ -0,0 +1,4 @@ +const createState = ({ query }) => ({ + query, +}); +export default createState; |