summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/search/state_filter/components/state_filter.vue
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/search/state_filter/components/state_filter.vue')
-rw-r--r--app/assets/javascripts/search/state_filter/components/state_filter.vue94
1 files changed, 0 insertions, 94 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
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>