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
|
<script>
import DateRange from '~/analytics/shared/components/daterange.vue';
import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
import { DATE_RANGE_LIMIT, PROJECTS_PER_PAGE } from '~/analytics/shared/constants';
import FilterBar from './filter_bar.vue';
export default {
name: 'ValueStreamFilters',
components: {
DateRange,
ProjectsDropdownFilter,
FilterBar,
},
props: {
selectedProjects: {
type: Array,
required: false,
default: () => [],
},
hasProjectFilter: {
type: Boolean,
required: false,
default: true,
},
hasDateRangeFilter: {
type: Boolean,
required: false,
default: true,
},
groupId: {
type: Number,
required: true,
},
groupPath: {
type: String,
required: true,
},
startDate: {
type: Date,
required: false,
default: null,
},
endDate: {
type: Date,
required: false,
default: null,
},
},
computed: {
projectsQueryParams() {
return {
first: PROJECTS_PER_PAGE,
includeSubgroups: true,
};
},
},
multiProjectSelect: true,
maxDateRange: DATE_RANGE_LIMIT,
};
</script>
<template>
<div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom">
<filter-bar
class="js-filter-bar filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
:group-path="groupPath"
/>
<div
v-if="hasDateRangeFilter || hasProjectFilter"
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
>
<projects-dropdown-filter
v-if="hasProjectFilter"
:key="groupId"
class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
:group-id="groupId"
:group-namespace="groupPath"
:query-params="projectsQueryParams"
:multi-select="$options.multiProjectSelect"
:default-projects="selectedProjects"
@selected="$emit('selectProject', $event)"
/>
<date-range
v-if="hasDateRangeFilter"
:start-date="startDate"
:end-date="endDate"
:max-date-range="$options.maxDateRange"
:include-selected-date="true"
class="js-daterange-picker"
@change="$emit('setDateRange', $event)"
/>
</div>
</div>
</template>
|
