Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 2x 2x 2x 2x | <script>
import { GlCollapsibleListbox } from '@gitlab/ui';
import { __ } from '~/locale';
import Tracking from '~/tracking';
import { historyPushState } from '~/lib/utils/common_utils';
import { mergeUrlParams, removeParams } from '~/lib/utils/url_utility';
import { GroupByParamType } from 'ee_else_ce/boards/constants';
const trackingMixin = Tracking.mixin();
const EPIC_KEY = 'epic';
const NO_GROUPING_KEY = 'no_grouping';
const LIST_BOX_ITEMS = [
{
value: NO_GROUPING_KEY,
text: __('No grouping'),
},
{
value: EPIC_KEY,
text: __('Epic'),
},
];
export default {
LIST_BOX_ITEMS,
components: {
GlCollapsibleListbox,
},
mixins: [trackingMixin],
props: {
isSwimlanesOn: {
type: Boolean,
required: true,
},
},
computed: {
dropdownLabel() {
return this.isSwimlanesOn ? LIST_BOX_ITEMS[1].text : __('None');
},
selected() {
return this.isSwimlanesOn ? EPIC_KEY : NO_GROUPING_KEY;
},
},
methods: {
toggleEpicSwimlanes() {
if (this.isSwimlanesOn) {
historyPushState(removeParams(['group_by']), window.location.href, true);
this.$emit('toggleSwimlanes', false);
} else {
historyPushState(
mergeUrlParams({ group_by: GroupByParamType.epic }, window.location.href, {
spreadArrays: true,
}),
);
this.$emit('toggleSwimlanes', true);
}
},
onToggle() {
// Track toggle event
this.track('click_toggle_swimlanes_button', {
label: 'toggle_swimlanes',
property: this.isSwimlanesOn ? 'off' : 'on',
});
// Track if the board has swimlane active
Iif (!this.isSwimlanesOn) {
this.track('click_toggle_swimlanes_button', {
label: 'swimlanes_active',
});
}
this.toggleEpicSwimlanes();
},
},
};
</script>
<template>
<div class="gl-md-display-flex gl-align-items-center gl-ml-3 gl-mb-4 gl-sm-mb-0">
<label
for="swimlane-listbox"
class="gl-white-space-nowrap gl-font-weight-bold gl-line-height-normal gl-m-0"
data-testid="toggle-swimlanes-label"
>
{{ __('Group by') }}
</label>
<gl-collapsible-listbox
id="swimlane-listbox"
toggle-class="gl-ml-3 gl-line-height-normal!"
placement="right"
:items="$options.LIST_BOX_ITEMS"
:toggle-text="dropdownLabel"
:selected="selected"
@select="onToggle"
/>
</div>
</template>
|