@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.prettierrc +6 -8
- package/package.json +21 -9
- package/public/favicon.ico +0 -0
- package/public/index.html +17 -0
- package/src/App.vue +78 -79
- package/src/assets/svgIcons/adjust_roof.svg +6 -0
- package/src/assets/svgIcons/copy.svg +10 -0
- package/src/assets/theme.js +3 -3
- package/src/components/addNewButton/AddNewButton.stories.js +2 -2
- package/src/components/addNewButton/index.vue +51 -48
- package/src/components/banner/actionBanner/index.vue +55 -54
- package/src/components/banner/banner/banner.stories.js +5 -5
- package/src/components/banner/banner/index.vue +159 -159
- package/src/components/banner/infoBanner/index.vue +53 -41
- package/src/components/buttons/buttonIcon/index.vue +122 -125
- package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
- package/src/components/buttons/closeButton/index.vue +49 -49
- package/src/components/buttons/mainButton/index.vue +119 -119
- package/src/components/card/index.vue +70 -70
- package/src/components/collapsableInfoText/index.vue +94 -96
- package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
- package/src/components/deleteIcon/index.vue +54 -54
- package/src/components/draggableInputHandle/index.vue +37 -37
- package/src/components/dropdown/Dropdown.stories.js +10 -9
- package/src/components/dropdown/index.vue +106 -106
- package/src/components/errorMessage/index.vue +52 -52
- package/src/components/filter/filterSettings.vue +433 -439
- package/src/components/filter/index.vue +135 -135
- package/src/components/filter/parentDropdown.vue +73 -73
- package/src/components/icon/Icons.stories.js +7 -7
- package/src/components/icon/iconCollection.vue +53 -53
- package/src/components/icon/index.vue +121 -121
- package/src/components/iconWrapper/index.vue +156 -156
- package/src/components/infoCard/index.vue +26 -26
- package/src/components/infoText/index.vue +132 -133
- package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
- package/src/components/inputs/checkbox/index.vue +180 -190
- package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
- package/src/components/inputs/inputNumber/index.vue +644 -647
- package/src/components/inputs/inputNumberQuestion/index.vue +182 -185
- package/src/components/inputs/inputText/InputText.stories.js +22 -22
- package/src/components/inputs/inputText/index.vue +336 -337
- package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
- package/src/components/inputs/radioButton/index.vue +219 -221
- package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
- package/src/components/inputs/searchInput/index.vue +126 -126
- package/src/components/inputs/select/index.vue +776 -778
- package/src/components/inputs/select/option/index.vue +124 -124
- package/src/components/inputs/select/select.stories.js +32 -31
- package/src/components/inputs/slider/index.vue +99 -99
- package/src/components/inputs/switchField/index.vue +222 -220
- package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
- package/src/components/inputs/textAreaInput/index.vue +173 -171
- package/src/components/inputs/toggle/Toggle.stories.js +14 -14
- package/src/components/inputs/toggle/index.vue +217 -214
- package/src/components/label/index.vue +82 -82
- package/src/components/markerItem/index.vue +66 -68
- package/src/components/modals/actionModal/index.vue +54 -54
- package/src/components/modals/infoModal/index.vue +36 -39
- package/src/components/modals/modal/index.vue +134 -134
- package/src/components/modals/modal/modal.stories.js +5 -5
- package/src/components/navigationTabs/index.vue +94 -96
- package/src/components/pageSubtitle/index.vue +49 -55
- package/src/components/pageTitle/index.vue +56 -56
- package/src/components/pagination/index.vue +89 -92
- package/src/components/progressBar/index.vue +107 -107
- package/src/components/projectMarker/index.vue +244 -246
- package/src/components/rangeSlider/Slider.vue +465 -491
- package/src/components/rangeSlider/index.vue +410 -410
- package/src/components/rangeSlider/utils/dom.js +5 -5
- package/src/components/selectedOptions/index.vue +119 -119
- package/src/components/sideMenu/index.vue +199 -199
- package/src/components/spinner/index.vue +57 -57
- package/src/components/tableDropdown/index.vue +520 -520
- package/src/components/tables/mainTable/index.vue +362 -366
- package/src/components/tables/viewTable/index.vue +171 -171
- package/src/components/threeDots/index.vue +334 -340
- package/src/components/videoThumbnail/index.vue +86 -86
- package/src/components/videoThumbnail/videoThumbnail.stories.js +16 -14
- package/src/helpers/numberConverter.js +2 -2
- package/src/helpers/translateLang.js +9 -9
- package/src/mixins/inputValidations.js +5 -5
- package/.eslintrc.js +0 -184
@@ -1,639 +1,633 @@
|
|
1
1
|
<template>
|
2
|
-
<
|
3
|
-
<
|
4
|
-
<
|
5
|
-
<
|
6
|
-
align-items="vertical"
|
7
|
-
font-size="13px"
|
8
|
-
:label="$gettext('active_filter')"
|
9
|
-
select-height="36px"
|
10
|
-
select-width="100%"
|
2
|
+
<container-wrapper @click="$emit('on-container-click')">
|
3
|
+
<upper-container v-if="filterViews && filterViews.length">
|
4
|
+
<view-container :maxWidth="activeView.length">
|
5
|
+
<select-component
|
11
6
|
@click.stop
|
7
|
+
selectWidth="100%"
|
8
|
+
selectHeight="36px"
|
9
|
+
fontSize="13px"
|
10
|
+
:label="$gettext('active_filter')"
|
11
|
+
alignItems="vertical"
|
12
12
|
>
|
13
13
|
<template #selector>
|
14
|
-
<
|
14
|
+
<option-title>
|
15
15
|
{{ activeView }}
|
16
|
-
</
|
16
|
+
</option-title>
|
17
17
|
</template>
|
18
18
|
<template #dropdown>
|
19
19
|
<Option
|
20
20
|
v-for="(item, idx) in filterViews"
|
21
21
|
:key="idx + '_view'"
|
22
|
-
:value="item.name"
|
23
22
|
@click="$emit('on-view-select', item)"
|
24
|
-
|
25
|
-
{{ item.name }}
|
26
|
-
<
|
27
|
-
|
23
|
+
:value="item.name"
|
24
|
+
>{{ item.name }}
|
25
|
+
<delete-icon @click.stop="$emit('on-view-delete', item)"
|
26
|
+
/></Option>
|
28
27
|
</template>
|
29
|
-
</
|
30
|
-
</
|
31
|
-
<
|
32
|
-
<
|
28
|
+
</select-component>
|
29
|
+
</view-container>
|
30
|
+
<reset-button @click="$emit('on-reset-filters')">
|
31
|
+
<icon :name="'update'" size="14px" :color="theme.colors.blue" />
|
33
32
|
<div>{{ $gettext('reset_filters') }}</div>
|
34
|
-
</
|
35
|
-
</
|
36
|
-
<
|
37
|
-
:
|
38
|
-
:
|
33
|
+
</reset-button>
|
34
|
+
</upper-container>
|
35
|
+
<column-wrapper
|
36
|
+
:numCols="filterData.length"
|
37
|
+
:hasActiveView="!!filterViews && !!filterViews.length"
|
39
38
|
>
|
40
|
-
<
|
39
|
+
<column-container
|
41
40
|
v-for="(item, idx) in filterData"
|
42
41
|
:key="idx + '_filterdata'"
|
43
42
|
>
|
44
|
-
<
|
43
|
+
<column-title
|
44
|
+
:showBorder="idx + 1 !== filterData.length"
|
45
45
|
:data-id="`filter_label_project_view_file_manager_${item.type}`"
|
46
|
-
:show-border="idx + 1 !== filterData.length"
|
47
46
|
>
|
48
47
|
{{ item.columnName }}
|
49
|
-
</
|
50
|
-
<
|
51
|
-
<
|
52
|
-
<
|
53
|
-
|
54
|
-
ghost-class="ghost"
|
48
|
+
</column-title>
|
49
|
+
<row-container v-if="item.type === 'columns'">
|
50
|
+
<checkbox-container>
|
51
|
+
<draggable
|
52
|
+
@change="onDragChange({ data: item.dataOptions })"
|
55
53
|
handle=".drag-container"
|
56
|
-
item-key="choice"
|
57
|
-
:set-data="modifyDragItem"
|
58
54
|
style="display: contents"
|
59
|
-
|
55
|
+
ghost-class="ghost"
|
56
|
+
:setData="modifyDragItem"
|
57
|
+
v-model="item.dataOptions"
|
58
|
+
itemKey="choice"
|
60
59
|
>
|
61
60
|
<template #item="{ element: column }">
|
62
|
-
<
|
63
|
-
<
|
64
|
-
<
|
65
|
-
</
|
66
|
-
<
|
67
|
-
:is-checked="column.selected"
|
68
|
-
:is-disabled="column.selected && isCheckboxDisabled"
|
61
|
+
<checkbox-wrapper>
|
62
|
+
<drag-container class="drag-container">
|
63
|
+
<icon :name="'duplicate-1'" size="12px" />
|
64
|
+
</drag-container>
|
65
|
+
<checkbox
|
69
66
|
:label="column.text"
|
70
|
-
|
67
|
+
:isChecked="column.selected"
|
71
68
|
@on-event-handler="
|
72
69
|
onChange({
|
73
70
|
dataType: item.type,
|
74
71
|
value: $event,
|
75
|
-
choice: column.choice
|
72
|
+
choice: column.choice
|
76
73
|
})
|
77
74
|
"
|
75
|
+
size="small"
|
76
|
+
:isDisabled="column.selected && isCheckboxDisabled"
|
78
77
|
/>
|
79
|
-
</
|
78
|
+
</checkbox-wrapper>
|
80
79
|
</template>
|
81
|
-
</
|
82
|
-
</
|
83
|
-
</
|
84
|
-
<
|
85
|
-
<
|
80
|
+
</draggable>
|
81
|
+
</checkbox-container>
|
82
|
+
</row-container>
|
83
|
+
<row-container v-if="item.type === 'filter'" showBorder>
|
84
|
+
<row-wrapper
|
86
85
|
v-for="(filter, index) in item.dataOptions"
|
87
86
|
:key="index + '_field'"
|
88
87
|
>
|
89
|
-
<
|
88
|
+
<select-component
|
90
89
|
v-if="isMultipleSelector(filter.filter_type)"
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
:is-searchable="filter.choices.length > 7"
|
90
|
+
selectWidth="100%"
|
91
|
+
selectHeight="36px"
|
92
|
+
fontSize="13px"
|
95
93
|
:label="filter.label"
|
96
|
-
:
|
97
|
-
:
|
98
|
-
|
99
|
-
|
94
|
+
:labelDataId="filter.dataId"
|
95
|
+
:isSearchable="filter.choices.length > 7"
|
96
|
+
alignItems="vertical"
|
97
|
+
:disabled="!filter.choices.length"
|
98
|
+
:minOptionLength="1"
|
100
99
|
>
|
101
100
|
<template #selector>
|
102
|
-
<
|
101
|
+
<option-title> {{ filter.selectedText }} </option-title>
|
103
102
|
</template>
|
104
103
|
<template #dropdown>
|
105
|
-
<
|
104
|
+
<dropdown-checkbox-container
|
106
105
|
v-for="(filterOption, optionIdx) in filter.choices"
|
107
106
|
:key="optionIdx + 'optionIdx'"
|
108
107
|
@click.stop
|
109
108
|
>
|
110
|
-
<
|
111
|
-
:is-checked="filterOption.selected"
|
109
|
+
<checkbox
|
112
110
|
:label="filterOption.text"
|
113
|
-
|
111
|
+
:isChecked="filterOption.selected"
|
114
112
|
@on-event-handler="
|
115
113
|
onChange({
|
116
114
|
dataType: item.type,
|
117
115
|
value: $event,
|
118
116
|
choice: filterOption.choice,
|
119
|
-
field: filter.field
|
117
|
+
field: filter.field
|
120
118
|
})
|
121
119
|
"
|
120
|
+
size="small"
|
122
121
|
/>
|
123
|
-
</
|
122
|
+
</dropdown-checkbox-container>
|
124
123
|
</template>
|
125
|
-
</
|
126
|
-
<
|
127
|
-
<
|
128
|
-
|
129
|
-
|
130
|
-
<GridContainer>
|
131
|
-
<InputNumber
|
132
|
-
font-size="13px"
|
133
|
-
input-height="36px"
|
134
|
-
:number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
|
124
|
+
</select-component>
|
125
|
+
<section-container v-else-if="isRangeSelector(filter.filter_type)">
|
126
|
+
<row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
|
127
|
+
<grid-container>
|
128
|
+
<input-number
|
135
129
|
:placeholder="
|
136
130
|
filter.unit
|
137
131
|
? $gettext('min') + ' (' + filter.unit + ')'
|
138
132
|
: $gettext('min')
|
139
133
|
"
|
140
|
-
:
|
134
|
+
:numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
|
141
135
|
:value="filter.range.start"
|
142
136
|
@input-change="
|
143
137
|
onChange({
|
144
138
|
dataType: item.type,
|
145
139
|
value: $event,
|
146
140
|
choice: 'start',
|
147
|
-
field: filter.field
|
141
|
+
field: filter.field
|
148
142
|
})
|
149
143
|
"
|
144
|
+
fontSize="13px"
|
145
|
+
inputHeight="36px"
|
146
|
+
:unitName="filter.unit"
|
150
147
|
/>
|
151
|
-
<
|
152
|
-
font-size="13px"
|
153
|
-
input-height="36px"
|
154
|
-
:number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
|
148
|
+
<input-number
|
155
149
|
:placeholder="
|
156
150
|
filter.unit
|
157
151
|
? $gettext('max') + ' (' + filter.unit + ')'
|
158
152
|
: $gettext('max')
|
159
153
|
"
|
160
|
-
:
|
154
|
+
:numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
|
161
155
|
:value="filter.range.end"
|
162
156
|
@input-change="
|
163
157
|
onChange({
|
164
158
|
dataType: item.type,
|
165
159
|
value: $event,
|
166
160
|
choice: 'end',
|
167
|
-
field: filter.field
|
161
|
+
field: filter.field
|
168
162
|
})
|
169
163
|
"
|
164
|
+
fontSize="13px"
|
165
|
+
inputHeight="36px"
|
166
|
+
:unitName="filter.unit"
|
170
167
|
/>
|
171
|
-
</
|
172
|
-
</
|
173
|
-
<
|
168
|
+
</grid-container>
|
169
|
+
</section-container>
|
170
|
+
<section-container
|
174
171
|
v-else-if="isDateSelector(filter.filter_type)"
|
175
172
|
@click.stop
|
176
173
|
>
|
177
|
-
<
|
178
|
-
|
179
|
-
</RowLabel>
|
180
|
-
<GridContainer>
|
174
|
+
<row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
|
175
|
+
<grid-container>
|
181
176
|
<VueDatePicker
|
182
|
-
|
177
|
+
text-input
|
178
|
+
:placeholder="$gettext('Date from')"
|
179
|
+
:locale="getDatePickerLanguage()"
|
180
|
+
:model-value="filter.range.start"
|
181
|
+
:enable-time-picker="false"
|
183
182
|
:clearable="true"
|
183
|
+
:auto-apply="true"
|
184
184
|
:disabled-dates="disableFutureDates"
|
185
|
-
:enable-time-picker="false"
|
186
185
|
format="yyyy-MM-dd"
|
187
|
-
:locale="getDatePickerLanguage()"
|
188
186
|
model-type="format"
|
189
|
-
:model-value="filter.range.start"
|
190
|
-
:placeholder="$gettext('Date from')"
|
191
|
-
text-input
|
192
|
-
@close="onDatepickerBlur()"
|
193
187
|
@focus="onDatepickerFocus(filter.range)"
|
188
|
+
@close="onDatepickerBlur()"
|
194
189
|
@update:model-value="
|
195
190
|
onChange({
|
196
191
|
dataType: item.type,
|
197
192
|
value: $event,
|
198
193
|
choice: 'start',
|
199
|
-
field: filter.field
|
194
|
+
field: filter.field
|
200
195
|
})
|
201
196
|
"
|
202
197
|
/>
|
203
198
|
<VueDatePicker
|
204
|
-
|
199
|
+
text-input
|
200
|
+
:placeholder="$gettext('Date to')"
|
201
|
+
:locale="getDatePickerLanguage()"
|
202
|
+
:model-value="filter.range.end"
|
203
|
+
:enable-time-picker="false"
|
205
204
|
:clearable="true"
|
205
|
+
:auto-apply="true"
|
206
206
|
:disabled-dates="disablePastDates"
|
207
|
-
:enable-time-picker="false"
|
208
207
|
format="yyyy-MM-dd"
|
209
|
-
:locale="getDatePickerLanguage()"
|
210
208
|
model-type="format"
|
211
|
-
:model-value="filter.range.end"
|
212
|
-
:placeholder="$gettext('Date to')"
|
213
|
-
text-input
|
214
|
-
@close="onDatepickerBlur()"
|
215
209
|
@focus="onDatepickerFocus(filter.range)"
|
210
|
+
@close="onDatepickerBlur()"
|
216
211
|
@update:model-value="
|
217
212
|
onChange({
|
218
213
|
dataType: item.type,
|
219
214
|
value: $event,
|
220
215
|
choice: 'end',
|
221
|
-
field: filter.field
|
216
|
+
field: filter.field
|
222
217
|
})
|
223
218
|
"
|
224
219
|
/>
|
225
|
-
</
|
226
|
-
</
|
227
|
-
<
|
220
|
+
</grid-container>
|
221
|
+
</section-container>
|
222
|
+
<select-component
|
228
223
|
v-else
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
:is-searchable="filter.choices.length > 7"
|
224
|
+
selectWidth="100%"
|
225
|
+
selectHeight="36px"
|
226
|
+
fontSize="13px"
|
233
227
|
:label="filter.label"
|
234
|
-
|
235
|
-
|
228
|
+
alignItems="vertical"
|
229
|
+
:isSearchable="filter.choices.length > 7"
|
230
|
+
:disabled="!filter.choices.length"
|
236
231
|
>
|
237
232
|
<template #selector="{ selectedValue }">
|
238
|
-
<
|
233
|
+
<option-title>
|
239
234
|
{{
|
240
235
|
getSelectedValue({
|
241
236
|
value: selectedValue,
|
242
237
|
options: filter.choices,
|
243
|
-
filter
|
238
|
+
filter
|
244
239
|
})
|
245
240
|
}}
|
246
|
-
</
|
241
|
+
</option-title>
|
247
242
|
</template>
|
248
243
|
<template #dropdown>
|
249
244
|
<Option
|
250
245
|
v-for="(filterOption, filterIdx) in filter.choices"
|
251
246
|
:key="filterIdx + '_filterIdx'"
|
252
247
|
:value="filterOption.choice"
|
248
|
+
>{{ filterOption.text }}</Option
|
253
249
|
>
|
254
|
-
{{ filterOption.text }}
|
255
|
-
</Option>
|
256
250
|
</template>
|
257
|
-
</
|
258
|
-
</
|
259
|
-
</
|
260
|
-
</
|
261
|
-
</
|
262
|
-
<
|
263
|
-
<
|
251
|
+
</select-component>
|
252
|
+
</row-wrapper>
|
253
|
+
</row-container>
|
254
|
+
</column-container>
|
255
|
+
</column-wrapper>
|
256
|
+
<button-container>
|
257
|
+
<main-button
|
264
258
|
v-if="buttonText.apply_view"
|
265
|
-
:text="buttonText.apply_view"
|
266
259
|
type="primary"
|
260
|
+
:text="buttonText.apply_view"
|
267
261
|
@click="$emit('on-apply-current-view')"
|
268
262
|
/>
|
269
|
-
<
|
263
|
+
<main-button
|
264
|
+
type="secondary"
|
270
265
|
v-if="buttonText.save_view"
|
271
266
|
:text="buttonText.save_view"
|
272
|
-
type="secondary"
|
273
267
|
@click="$emit('on-save-new-view')"
|
274
268
|
/>
|
275
|
-
<
|
269
|
+
<main-button
|
270
|
+
type="cancel"
|
276
271
|
v-if="buttonText.cancel"
|
277
272
|
:text="buttonText.cancel"
|
278
|
-
type="cancel"
|
279
273
|
@click="$emit('on-cancel-view')"
|
280
274
|
/>
|
281
|
-
<
|
282
|
-
<
|
283
|
-
<
|
275
|
+
<reset-container v-if="!filterViews || !filterViews.length">
|
276
|
+
<reset-button @click="$emit('on-reset-filters')">
|
277
|
+
<icon :name="'update'" size="14px" :color="theme.colors.blue" />
|
284
278
|
<div>{{ $gettext('reset_filters') }}</div>
|
285
|
-
</
|
286
|
-
</
|
287
|
-
</
|
288
|
-
</
|
279
|
+
</reset-button>
|
280
|
+
</reset-container>
|
281
|
+
</button-container>
|
282
|
+
</container-wrapper>
|
289
283
|
</template>
|
290
284
|
|
291
285
|
<script>
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
286
|
+
import styled from 'vue3-styled-components'
|
287
|
+
import SelectComponent from '../inputs/select'
|
288
|
+
import Option from '../inputs/select/option'
|
289
|
+
import InputNumber from '../inputs/inputNumber'
|
290
|
+
import MainButton from '../buttons/mainButton'
|
291
|
+
import Checkbox from '../inputs/checkbox'
|
292
|
+
import draggable from 'vuedraggable'
|
293
|
+
import Icon from '../icon'
|
294
|
+
import DeleteIcon from '../deleteIcon'
|
295
|
+
import { datePickerLang } from '../../helpers/translateLang'
|
296
|
+
import theme from '@/assets/theme.js'
|
297
|
+
import VueDatePicker from '@vuepic/vue-datepicker'
|
304
298
|
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
299
|
+
const ContainerWrapper = styled.div`
|
300
|
+
position: absolute;
|
301
|
+
margin-top: 4px;
|
302
|
+
background-color: ${(props) => props.theme.colors.white};
|
303
|
+
min-width: 100%;
|
304
|
+
width: max-content;
|
305
|
+
border: 1px solid ${(props) => props.theme.colors.grey4};
|
306
|
+
border-radius: 4px;
|
307
|
+
z-index: 9999;
|
308
|
+
font-size: 13px;
|
309
|
+
`
|
316
310
|
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
311
|
+
const ColAttrs = { numCols: Number, hasActiveView: Boolean }
|
312
|
+
const ColumnWrapper = styled('div', ColAttrs)`
|
313
|
+
display: grid;
|
314
|
+
grid-template-columns: repeat(${(props) => props.numCols}, auto);
|
321
315
|
|
322
|
-
|
323
|
-
|
324
|
-
|
316
|
+
${({ hasActiveView, theme }) =>
|
317
|
+
hasActiveView &&
|
318
|
+
`
|
325
319
|
border-top: 1px solid ${theme.colors.grey4};
|
326
320
|
`}
|
327
|
-
|
321
|
+
`
|
328
322
|
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
323
|
+
const TitleAttrs = { showBorder: Boolean }
|
324
|
+
const ColumnTitle = styled('div', TitleAttrs)`
|
325
|
+
font-size: 14px;
|
326
|
+
font-weight: 700;
|
327
|
+
color: ${(props) => props.theme.colors.eturnityGrey};
|
328
|
+
padding: 10px 14px;
|
329
|
+
${({ showBorder, theme }) =>
|
330
|
+
showBorder &&
|
331
|
+
`
|
338
332
|
border-right: 1px solid ${theme.colors.grey4};
|
339
333
|
`}
|
340
|
-
|
334
|
+
`
|
341
335
|
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
336
|
+
const ButtonContainer = styled.div`
|
337
|
+
display: flex;
|
338
|
+
gap: 10px;
|
339
|
+
padding: 15px;
|
340
|
+
`
|
347
341
|
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
342
|
+
const ResetContainer = styled.div`
|
343
|
+
display: grid;
|
344
|
+
align-content: center;
|
345
|
+
margin-left: auto;
|
346
|
+
div {
|
347
|
+
margin-top: 0;
|
348
|
+
align-self: center;
|
349
|
+
}
|
350
|
+
`
|
357
351
|
|
358
|
-
|
352
|
+
const ColumnContainer = styled.div``
|
359
353
|
|
360
|
-
|
361
|
-
|
354
|
+
const DragContainer = styled.div`
|
355
|
+
cursor: grab;
|
362
356
|
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
357
|
+
&:active {
|
358
|
+
cursor: grabbing;
|
359
|
+
}
|
360
|
+
`
|
367
361
|
|
368
|
-
|
369
|
-
|
370
|
-
|
362
|
+
const RowContainer = styled('div', TitleAttrs)`
|
363
|
+
padding: 10px 14px;
|
364
|
+
min-width: 300px;
|
371
365
|
|
372
|
-
|
373
|
-
|
374
|
-
|
366
|
+
${({ showBorder, theme }) =>
|
367
|
+
showBorder &&
|
368
|
+
`
|
375
369
|
border-right: 1px solid ${theme.colors.grey4};
|
376
370
|
`}
|
377
371
|
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
372
|
+
.ghost {
|
373
|
+
opacity: 0.5;
|
374
|
+
background-color: #e5fcb4;
|
375
|
+
}
|
376
|
+
`
|
383
377
|
|
384
|
-
|
385
|
-
|
386
|
-
|
378
|
+
const OptionTitle = styled.div`
|
379
|
+
cursor: pointer !important;
|
380
|
+
`
|
387
381
|
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
382
|
+
const CheckboxContainer = styled.div`
|
383
|
+
display: grid;
|
384
|
+
gap: 6px;
|
385
|
+
`
|
392
386
|
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
387
|
+
const CheckboxWrapper = styled.div`
|
388
|
+
display: grid;
|
389
|
+
grid-template-columns: auto 1fr;
|
390
|
+
gap: 16px;
|
391
|
+
padding: 2px;
|
392
|
+
align-items: center;
|
393
|
+
`
|
400
394
|
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
395
|
+
const DropdownCheckboxContainer = styled.div`
|
396
|
+
display: grid;
|
397
|
+
gap: 6px;
|
398
|
+
width: 100%;
|
399
|
+
padding: 7px 10px;
|
400
|
+
background: ${(props) => props.theme.colors.grey5};
|
401
|
+
`
|
408
402
|
|
409
|
-
|
410
|
-
|
411
|
-
|
403
|
+
const RowWrapper = styled.div`
|
404
|
+
margin-bottom: 12px;
|
405
|
+
`
|
412
406
|
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
407
|
+
const LabelAttrs = {
|
408
|
+
marginTop: Boolean
|
409
|
+
}
|
410
|
+
const RowLabel = styled('div', LabelAttrs)`
|
411
|
+
font-weight: 700;
|
412
|
+
font-size: 13px;
|
413
|
+
margin-bottom: 8px;
|
414
|
+
margin-top: ${(props) => (props.marginTop ? '12px' : '0')};
|
415
|
+
`
|
422
416
|
|
423
|
-
|
417
|
+
const SectionContainer = styled.div``
|
424
418
|
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
419
|
+
const GridContainer = styled.div`
|
420
|
+
display: grid;
|
421
|
+
grid-template-columns: 1fr 1fr;
|
422
|
+
grid-gap: 12px;
|
423
|
+
`
|
430
424
|
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
425
|
+
const ViewContainerAttrs = { maxWidth: Number }
|
426
|
+
const ViewContainer = styled('div', ViewContainerAttrs)`
|
427
|
+
max-width: ${(props) =>
|
428
|
+
props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
|
429
|
+
`
|
436
430
|
|
437
|
-
|
431
|
+
const UpperContainer = styled.div`
|
438
432
|
display: grid;
|
439
433
|
grid-gap: 20px
|
440
434
|
grid-template-columns: 1fr 1fr;
|
441
435
|
padding: 10px 14px;
|
442
436
|
`
|
443
437
|
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
438
|
+
const ResetButton = styled.div`
|
439
|
+
display: inline-flex;
|
440
|
+
gap: 16px;
|
441
|
+
width: max-content;
|
442
|
+
margin-top: 20px;
|
443
|
+
align-self: center;
|
444
|
+
font-size: 13px;
|
445
|
+
color: ${(props) => props.theme.colors.blue};
|
446
|
+
cursor: pointer;
|
447
|
+
`
|
454
448
|
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
449
|
+
export default {
|
450
|
+
name: 'filter-settings',
|
451
|
+
components: {
|
452
|
+
ContainerWrapper,
|
453
|
+
ColumnWrapper,
|
454
|
+
ColumnTitle,
|
455
|
+
ColumnContainer,
|
456
|
+
SelectComponent,
|
457
|
+
RowContainer,
|
458
|
+
OptionTitle,
|
459
|
+
Option,
|
460
|
+
ButtonContainer,
|
461
|
+
MainButton,
|
462
|
+
CheckboxContainer,
|
463
|
+
CheckboxWrapper,
|
464
|
+
Checkbox,
|
465
|
+
RowWrapper,
|
466
|
+
DropdownCheckboxContainer,
|
467
|
+
draggable,
|
468
|
+
Icon,
|
469
|
+
DragContainer,
|
470
|
+
InputNumber,
|
471
|
+
RowLabel,
|
472
|
+
SectionContainer,
|
473
|
+
GridContainer,
|
474
|
+
ViewContainer,
|
475
|
+
DeleteIcon,
|
476
|
+
UpperContainer,
|
477
|
+
ResetButton,
|
478
|
+
ResetContainer,
|
479
|
+
VueDatePicker
|
480
|
+
},
|
481
|
+
props: {
|
482
|
+
filterData: {
|
483
|
+
required: true
|
484
|
+
},
|
485
|
+
hasActiveView: {
|
486
|
+
required: false
|
487
|
+
},
|
488
|
+
buttonText: {
|
489
|
+
required: true
|
490
|
+
// example:
|
491
|
+
// {
|
492
|
+
// 'save_new_view': '$gettext("save_new_view")',
|
493
|
+
// 'cancel': '$gettext("cancel")',
|
494
|
+
// 'save_view': '$gettext("save_view")'
|
495
|
+
// }
|
496
|
+
},
|
497
|
+
filterViews: {
|
498
|
+
required: true
|
486
499
|
},
|
487
|
-
|
488
|
-
|
489
|
-
required: true,
|
490
|
-
},
|
491
|
-
hasActiveView: {
|
492
|
-
required: false,
|
493
|
-
},
|
494
|
-
buttonText: {
|
495
|
-
required: true,
|
496
|
-
// example:
|
497
|
-
// {
|
498
|
-
// 'save_new_view': '$gettext("save_new_view")',
|
499
|
-
// 'cancel': '$gettext("cancel")',
|
500
|
-
// 'save_view': '$gettext("save_view")'
|
501
|
-
// }
|
502
|
-
},
|
503
|
-
filterViews: {
|
504
|
-
required: true,
|
505
|
-
},
|
506
|
-
activeLanguage: {
|
507
|
-
required: false,
|
508
|
-
},
|
509
|
-
settingsTranslations: {
|
510
|
-
required: false,
|
511
|
-
},
|
512
|
-
activeView: {
|
513
|
-
required: false,
|
514
|
-
},
|
500
|
+
activeLanguage: {
|
501
|
+
required: false
|
515
502
|
},
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
503
|
+
settingsTranslations: {
|
504
|
+
required: false
|
505
|
+
},
|
506
|
+
activeView: {
|
507
|
+
required: false
|
508
|
+
}
|
509
|
+
},
|
510
|
+
data() {
|
511
|
+
return {
|
512
|
+
selectedDates: null,
|
513
|
+
value1: null,
|
514
|
+
dateStart: null,
|
515
|
+
dateEnd: null
|
516
|
+
}
|
517
|
+
},
|
518
|
+
methods: {
|
519
|
+
onChange({ dataType, value, choice, field }) {
|
520
|
+
if (
|
521
|
+
dataType === 'columns' &&
|
522
|
+
this.isCheckboxDisabled &&
|
523
|
+
value === false
|
524
|
+
) {
|
525
|
+
return
|
522
526
|
}
|
527
|
+
const data = { dataType, value, choice, field }
|
528
|
+
this.$emit('on-filter-change', data)
|
523
529
|
},
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
let columnsData = this.filterData.filter(
|
529
|
-
(item) => item.type === 'columns'
|
530
|
-
)
|
531
|
-
if (columnsData.length) {
|
532
|
-
columnsData = columnsData[0]
|
533
|
-
const filteredColumns = columnsData.dataOptions.filter(
|
534
|
-
(item) => item.selected
|
535
|
-
)
|
536
|
-
if (filteredColumns.length === 1) {
|
537
|
-
isDisabled = true
|
538
|
-
}
|
539
|
-
}
|
540
|
-
return isDisabled
|
541
|
-
},
|
542
|
-
theme() {
|
543
|
-
return theme
|
544
|
-
},
|
530
|
+
onDatepickerFocus(range) {
|
531
|
+
this.dateStart = range.start
|
532
|
+
this.dateEnd = range.end
|
533
|
+
this.$emit('on-prevent-close', true)
|
545
534
|
},
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
const data = { dataType, value, choice, field }
|
556
|
-
this.$emit('on-filter-change', data)
|
557
|
-
},
|
558
|
-
onDatepickerFocus(range) {
|
559
|
-
this.dateStart = range.start
|
560
|
-
this.dateEnd = range.end
|
561
|
-
this.$emit('on-prevent-close', true)
|
562
|
-
},
|
563
|
-
onDatepickerBlur() {
|
564
|
-
this.$emit('on-prevent-close', false)
|
565
|
-
},
|
566
|
-
disablePastDates(date) {
|
567
|
-
const dateString = this.dateStart
|
568
|
-
if (!dateString) {
|
569
|
-
return
|
570
|
-
}
|
571
|
-
const dateParts = dateString.split('-')
|
535
|
+
onDatepickerBlur() {
|
536
|
+
this.$emit('on-prevent-close', false)
|
537
|
+
},
|
538
|
+
disablePastDates(date) {
|
539
|
+
const dateString = this.dateStart
|
540
|
+
if (!dateString) {
|
541
|
+
return
|
542
|
+
}
|
543
|
+
const dateParts = dateString.split('-')
|
572
544
|
|
573
|
-
|
574
|
-
|
575
|
-
|
545
|
+
const year = parseInt(dateParts[0])
|
546
|
+
const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
|
547
|
+
const day = parseInt(dateParts[2])
|
576
548
|
|
577
|
-
|
578
|
-
|
549
|
+
const currentDate = new Date(year, month, day)
|
550
|
+
const selectedDate = new Date(date)
|
579
551
|
|
580
|
-
|
581
|
-
|
582
|
-
|
583
|
-
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
552
|
+
// Disable dates that are greater than or equal to the current date
|
553
|
+
return selectedDate <= currentDate
|
554
|
+
},
|
555
|
+
disableFutureDates(date) {
|
556
|
+
const dateString = this.dateEnd
|
557
|
+
if (!dateString) {
|
558
|
+
return
|
559
|
+
}
|
560
|
+
const dateParts = dateString.split('-')
|
589
561
|
|
590
|
-
|
591
|
-
|
592
|
-
|
562
|
+
const year = parseInt(dateParts[0])
|
563
|
+
const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
|
564
|
+
const day = parseInt(dateParts[2])
|
593
565
|
|
594
|
-
|
595
|
-
|
566
|
+
const currentDate = new Date(year, month, day)
|
567
|
+
const selectedDate = new Date(date)
|
596
568
|
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
569
|
+
// Disable dates that are greater than or equal to the current date
|
570
|
+
return selectedDate >= currentDate
|
571
|
+
},
|
572
|
+
getDatePickerLanguage() {
|
573
|
+
return datePickerLang(this.activeLanguage)
|
574
|
+
},
|
575
|
+
onDragChange({ data }) {
|
576
|
+
this.$emit('on-drag-change', data)
|
577
|
+
},
|
578
|
+
modifyDragItem(dataTransfer) {
|
579
|
+
const isSafari = /^((?!chrome|android).)*safari/i.test(
|
580
|
+
navigator.userAgent
|
581
|
+
)
|
582
|
+
// prevents the dragged element from dragging the whole row as a "ghost"
|
583
|
+
// Safari fix because this does not work on Safari
|
584
|
+
let img = new Image()
|
585
|
+
if (!isSafari) {
|
586
|
+
dataTransfer.setDragImage(img, 0, 0)
|
587
|
+
} else {
|
588
|
+
img.src =
|
589
|
+
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
590
|
+
dataTransfer.setDragImage(img, 0, 0)
|
591
|
+
}
|
592
|
+
},
|
593
|
+
getSelectedValue({ value, options, filter }) {
|
594
|
+
const foundItem = options.find((item) => item.choice === value)
|
595
|
+
return foundItem ? foundItem.text : value ? value : filter.selectedText
|
596
|
+
},
|
597
|
+
isMultipleSelector(type) {
|
598
|
+
return type === 'multi_select_integer' || type === 'multi_select_string'
|
599
|
+
},
|
600
|
+
isRangeSelector(type) {
|
601
|
+
return type === 'integer_range' || type === 'number_range'
|
602
|
+
},
|
603
|
+
isIntegerRange(type) {
|
604
|
+
return type === 'integer_range'
|
605
|
+
},
|
606
|
+
isDateSelector(type) {
|
607
|
+
return type === 'datetime'
|
608
|
+
}
|
609
|
+
},
|
610
|
+
computed: {
|
611
|
+
isCheckboxDisabled() {
|
612
|
+
// if only 1 item left, disable checkbox
|
613
|
+
let isDisabled = false
|
614
|
+
let columnsData = this.filterData.filter(
|
615
|
+
(item) => item.type === 'columns'
|
616
|
+
)
|
617
|
+
if (columnsData.length) {
|
618
|
+
columnsData = columnsData[0]
|
619
|
+
const filteredColumns = columnsData.dataOptions.filter(
|
620
|
+
(item) => item.selected
|
609
621
|
)
|
610
|
-
|
611
|
-
|
612
|
-
let img = new Image()
|
613
|
-
if (!isSafari) {
|
614
|
-
dataTransfer.setDragImage(img, 0, 0)
|
615
|
-
} else {
|
616
|
-
img.src =
|
617
|
-
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
618
|
-
dataTransfer.setDragImage(img, 0, 0)
|
622
|
+
if (filteredColumns.length === 1) {
|
623
|
+
isDisabled = true
|
619
624
|
}
|
620
|
-
}
|
621
|
-
|
622
|
-
const foundItem = options.find((item) => item.choice === value)
|
623
|
-
return foundItem ? foundItem.text : value ? value : filter.selectedText
|
624
|
-
},
|
625
|
-
isMultipleSelector(type) {
|
626
|
-
return type === 'multi_select_integer' || type === 'multi_select_string'
|
627
|
-
},
|
628
|
-
isRangeSelector(type) {
|
629
|
-
return type === 'integer_range' || type === 'number_range'
|
630
|
-
},
|
631
|
-
isIntegerRange(type) {
|
632
|
-
return type === 'integer_range'
|
633
|
-
},
|
634
|
-
isDateSelector(type) {
|
635
|
-
return type === 'datetime'
|
636
|
-
},
|
625
|
+
}
|
626
|
+
return isDisabled
|
637
627
|
},
|
628
|
+
theme() {
|
629
|
+
return theme
|
630
|
+
}
|
638
631
|
}
|
632
|
+
}
|
639
633
|
</script>
|