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
100
101
102
103
104
105
106
107
108
109
|
<script>
import { GlTooltipDirective } from '@gitlab/ui';
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,
},
directives: {
GlTooltip: GlTooltipDirective,
},
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,
};
},
currentDate() {
const now = new Date();
return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
},
},
multiProjectSelect: true,
maxDateRange: DATE_RANGE_LIMIT,
};
</script>
<template>
<div
class="gl-mt-3 gl-py-2 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
>
<filter-bar
data-testid="vsa-filter-bar"
class="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"
>
<div>
<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)"
/>
</div>
<div class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row">
<date-range
v-if="hasDateRangeFilter"
:start-date="startDate"
:end-date="endDate"
:max-date="currentDate"
:max-date-range="$options.maxDateRange"
:include-selected-date="true"
class="js-daterange-picker"
@change="$emit('setDateRange', $event)"
/>
</div>
</div>
</div>
</template>
|
