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