diff options
Diffstat (limited to 'app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue')
-rw-r--r-- | app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue b/app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue new file mode 100644 index 00000000000..b820ca837bc --- /dev/null +++ b/app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue @@ -0,0 +1,91 @@ +<script> +import Vue from 'vue'; +import { GlFormCheckboxGroup, GlFormCheckbox } from '@gitlab/ui'; +import { mapState, mapActions, mapGetters } from 'vuex'; +import { intersection } from 'lodash'; +import Tracking from '~/tracking'; +import { NAV_LINK_COUNT_DEFAULT_CLASSES, LABEL_DEFAULT_CLASSES } from '../../constants'; +import { formatSearchResultCount } from '../../../store/utils'; + +export const TRACKING_LABEL_SET = 'set'; +export const TRACKING_LABEL_CHECKBOX = 'checkbox'; + +export default { + name: 'CheckboxFilter', + components: { + GlFormCheckboxGroup, + GlFormCheckbox, + }, + props: { + filtersData: { + type: Object, + required: true, + }, + trackingNamespace: { + type: String, + required: true, + }, + }, + computed: { + ...mapState(['query', 'useNewNavigation']), + ...mapGetters(['queryLanguageFilters']), + dataFilters() { + return Object.values(this.filtersData?.filters || []); + }, + flatDataFilterValues() { + return this.dataFilters.map(({ value }) => value); + }, + selectedFilter: { + get() { + return intersection(this.flatDataFilterValues, this.queryLanguageFilters); + }, + async set(value) { + this.setQuery({ key: this.filtersData?.filterParam, value }); + + await Vue.nextTick(); + this.trackSelectCheckbox(); + }, + }, + labelCountClasses() { + return [...NAV_LINK_COUNT_DEFAULT_CLASSES, 'gl-text-gray-500']; + }, + }, + methods: { + ...mapActions(['setQuery']), + getFormattedCount(count) { + return formatSearchResultCount(count); + }, + trackSelectCheckbox() { + Tracking.event(this.trackingNamespace, TRACKING_LABEL_CHECKBOX, { + label: TRACKING_LABEL_SET, + property: this.selectedFilter, + }); + }, + }, + NAV_LINK_COUNT_DEFAULT_CLASSES, + LABEL_DEFAULT_CLASSES, +}; +</script> + +<template> + <gl-form-checkbox-group v-model="selectedFilter"> + <gl-form-checkbox + v-for="f in dataFilters" + :key="f.label" + :value="f.label" + class="gl-flex-grow-1 gl-display-inline-flex gl-justify-content-space-between gl-w-full" + :class="$options.LABEL_DEFAULT_CLASSES" + > + <span + class="gl-flex-grow-1 gl-display-inline-flex gl-justify-content-space-between gl-w-full" + > + <span data-testid="label"> + {{ f.label }} + </span> + <span v-if="f.count" :class="labelCountClasses" data-testid="labelCount"> + {{ getFormattedCount(f.count) }} + </span> + </span> + </gl-form-checkbox> + </gl-form-checkbox-group> +</template> |