@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.
Files changed (83) hide show
  1. package/.prettierrc +6 -8
  2. package/package.json +21 -9
  3. package/public/favicon.ico +0 -0
  4. package/public/index.html +17 -0
  5. package/src/App.vue +78 -79
  6. package/src/assets/svgIcons/adjust_roof.svg +6 -0
  7. package/src/assets/svgIcons/copy.svg +10 -0
  8. package/src/assets/theme.js +3 -3
  9. package/src/components/addNewButton/AddNewButton.stories.js +2 -2
  10. package/src/components/addNewButton/index.vue +51 -48
  11. package/src/components/banner/actionBanner/index.vue +55 -54
  12. package/src/components/banner/banner/banner.stories.js +5 -5
  13. package/src/components/banner/banner/index.vue +159 -159
  14. package/src/components/banner/infoBanner/index.vue +53 -41
  15. package/src/components/buttons/buttonIcon/index.vue +122 -125
  16. package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
  17. package/src/components/buttons/closeButton/index.vue +49 -49
  18. package/src/components/buttons/mainButton/index.vue +119 -119
  19. package/src/components/card/index.vue +70 -70
  20. package/src/components/collapsableInfoText/index.vue +94 -96
  21. package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
  22. package/src/components/deleteIcon/index.vue +54 -54
  23. package/src/components/draggableInputHandle/index.vue +37 -37
  24. package/src/components/dropdown/Dropdown.stories.js +10 -9
  25. package/src/components/dropdown/index.vue +106 -106
  26. package/src/components/errorMessage/index.vue +52 -52
  27. package/src/components/filter/filterSettings.vue +433 -439
  28. package/src/components/filter/index.vue +135 -135
  29. package/src/components/filter/parentDropdown.vue +73 -73
  30. package/src/components/icon/Icons.stories.js +7 -7
  31. package/src/components/icon/iconCollection.vue +53 -53
  32. package/src/components/icon/index.vue +121 -121
  33. package/src/components/iconWrapper/index.vue +156 -156
  34. package/src/components/infoCard/index.vue +26 -26
  35. package/src/components/infoText/index.vue +132 -133
  36. package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
  37. package/src/components/inputs/checkbox/index.vue +180 -190
  38. package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
  39. package/src/components/inputs/inputNumber/index.vue +644 -647
  40. package/src/components/inputs/inputNumberQuestion/index.vue +182 -185
  41. package/src/components/inputs/inputText/InputText.stories.js +22 -22
  42. package/src/components/inputs/inputText/index.vue +336 -337
  43. package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
  44. package/src/components/inputs/radioButton/index.vue +219 -221
  45. package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
  46. package/src/components/inputs/searchInput/index.vue +126 -126
  47. package/src/components/inputs/select/index.vue +776 -778
  48. package/src/components/inputs/select/option/index.vue +124 -124
  49. package/src/components/inputs/select/select.stories.js +32 -31
  50. package/src/components/inputs/slider/index.vue +99 -99
  51. package/src/components/inputs/switchField/index.vue +222 -220
  52. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
  53. package/src/components/inputs/textAreaInput/index.vue +173 -171
  54. package/src/components/inputs/toggle/Toggle.stories.js +14 -14
  55. package/src/components/inputs/toggle/index.vue +217 -214
  56. package/src/components/label/index.vue +82 -82
  57. package/src/components/markerItem/index.vue +66 -68
  58. package/src/components/modals/actionModal/index.vue +54 -54
  59. package/src/components/modals/infoModal/index.vue +36 -39
  60. package/src/components/modals/modal/index.vue +134 -134
  61. package/src/components/modals/modal/modal.stories.js +5 -5
  62. package/src/components/navigationTabs/index.vue +94 -96
  63. package/src/components/pageSubtitle/index.vue +49 -55
  64. package/src/components/pageTitle/index.vue +56 -56
  65. package/src/components/pagination/index.vue +89 -92
  66. package/src/components/progressBar/index.vue +107 -107
  67. package/src/components/projectMarker/index.vue +244 -246
  68. package/src/components/rangeSlider/Slider.vue +465 -491
  69. package/src/components/rangeSlider/index.vue +410 -410
  70. package/src/components/rangeSlider/utils/dom.js +5 -5
  71. package/src/components/selectedOptions/index.vue +119 -119
  72. package/src/components/sideMenu/index.vue +199 -199
  73. package/src/components/spinner/index.vue +57 -57
  74. package/src/components/tableDropdown/index.vue +520 -520
  75. package/src/components/tables/mainTable/index.vue +362 -366
  76. package/src/components/tables/viewTable/index.vue +171 -171
  77. package/src/components/threeDots/index.vue +334 -340
  78. package/src/components/videoThumbnail/index.vue +86 -86
  79. package/src/components/videoThumbnail/videoThumbnail.stories.js +16 -14
  80. package/src/helpers/numberConverter.js +2 -2
  81. package/src/helpers/translateLang.js +9 -9
  82. package/src/mixins/inputValidations.js +5 -5
  83. package/.eslintrc.js +0 -184
@@ -1,639 +1,633 @@
1
1
  <template>
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"
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
- <OptionTitle>
14
+ <option-title>
15
15
  {{ activeView }}
16
- </OptionTitle>
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
- <DeleteIcon @click.stop="$emit('on-view-delete', item)" />
27
- </Option>
23
+ :value="item.name"
24
+ >{{ item.name }}
25
+ <delete-icon @click.stop="$emit('on-view-delete', item)"
26
+ /></Option>
28
27
  </template>
29
- </SelectComponent>
30
- </ViewContainer>
31
- <ResetButton @click="$emit('on-reset-filters')">
32
- <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
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
- </ResetButton>
35
- </UpperContainer>
36
- <ColumnWrapper
37
- :has-active-view="!!filterViews && !!filterViews.length"
38
- :num-cols="filterData.length"
33
+ </reset-button>
34
+ </upper-container>
35
+ <column-wrapper
36
+ :numCols="filterData.length"
37
+ :hasActiveView="!!filterViews && !!filterViews.length"
39
38
  >
40
- <ColumnContainer
39
+ <column-container
41
40
  v-for="(item, idx) in filterData"
42
41
  :key="idx + '_filterdata'"
43
42
  >
44
- <ColumnTitle
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
- </ColumnTitle>
50
- <RowContainer v-if="item.type === 'columns'">
51
- <CheckboxContainer>
52
- <Draggable
53
- v-model="item.dataOptions"
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
- @change="onDragChange({ data: item.dataOptions })"
55
+ ghost-class="ghost"
56
+ :setData="modifyDragItem"
57
+ v-model="item.dataOptions"
58
+ itemKey="choice"
60
59
  >
61
60
  <template #item="{ element: column }">
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"
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
- size="small"
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
- </CheckboxWrapper>
78
+ </checkbox-wrapper>
80
79
  </template>
81
- </Draggable>
82
- </CheckboxContainer>
83
- </RowContainer>
84
- <RowContainer v-if="item.type === 'filter'" show-border>
85
- <RowWrapper
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
- <SelectComponent
88
+ <select-component
90
89
  v-if="isMultipleSelector(filter.filter_type)"
91
- align-items="vertical"
92
- :disabled="!filter.choices.length"
93
- font-size="13px"
94
- :is-searchable="filter.choices.length > 7"
90
+ selectWidth="100%"
91
+ selectHeight="36px"
92
+ fontSize="13px"
95
93
  :label="filter.label"
96
- :label-data-id="filter.dataId"
97
- :min-option-length="1"
98
- select-height="36px"
99
- select-width="100%"
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
- <OptionTitle> {{ filter.selectedText }} </OptionTitle>
101
+ <option-title> {{ filter.selectedText }} </option-title>
103
102
  </template>
104
103
  <template #dropdown>
105
- <DropdownCheckboxContainer
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
- <Checkbox
111
- :is-checked="filterOption.selected"
109
+ <checkbox
112
110
  :label="filterOption.text"
113
- size="small"
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
- </DropdownCheckboxContainer>
122
+ </dropdown-checkbox-container>
124
123
  </template>
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"
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
- :unit-name="filter.unit"
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
- <InputNumber
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
- :unit-name="filter.unit"
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
- </GridContainer>
172
- </SectionContainer>
173
- <SectionContainer
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
- <RowLabel :data-id="filter.dataId">
178
- {{ filter.label }}
179
- </RowLabel>
180
- <GridContainer>
174
+ <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
175
+ <grid-container>
181
176
  <VueDatePicker
182
- :auto-apply="true"
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
- :auto-apply="true"
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
- </GridContainer>
226
- </SectionContainer>
227
- <SelectComponent
220
+ </grid-container>
221
+ </section-container>
222
+ <select-component
228
223
  v-else
229
- align-items="vertical"
230
- :disabled="!filter.choices.length"
231
- font-size="13px"
232
- :is-searchable="filter.choices.length > 7"
224
+ selectWidth="100%"
225
+ selectHeight="36px"
226
+ fontSize="13px"
233
227
  :label="filter.label"
234
- select-height="36px"
235
- select-width="100%"
228
+ alignItems="vertical"
229
+ :isSearchable="filter.choices.length > 7"
230
+ :disabled="!filter.choices.length"
236
231
  >
237
232
  <template #selector="{ selectedValue }">
238
- <OptionTitle>
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
- </OptionTitle>
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
- </SelectComponent>
258
- </RowWrapper>
259
- </RowContainer>
260
- </ColumnContainer>
261
- </ColumnWrapper>
262
- <ButtonContainer>
263
- <MainButton
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
- <MainButton
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
- <MainButton
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
- <ResetContainer v-if="!filterViews || !filterViews.length">
282
- <ResetButton @click="$emit('on-reset-filters')">
283
- <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
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
- </ResetButton>
286
- </ResetContainer>
287
- </ButtonContainer>
288
- </ContainerWrapper>
279
+ </reset-button>
280
+ </reset-container>
281
+ </button-container>
282
+ </container-wrapper>
289
283
  </template>
290
284
 
291
285
  <script>
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'
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
- const ContainerWrapper = styled.div`
306
- position: absolute;
307
- margin-top: 4px;
308
- background-color: ${(props) => props.theme.colors.white};
309
- min-width: 100%;
310
- width: max-content;
311
- border: 1px solid ${(props) => props.theme.colors.grey4};
312
- border-radius: 4px;
313
- z-index: 9999;
314
- font-size: 13px;
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
- const ColAttrs = { numCols: Number, hasActiveView: Boolean }
318
- const ColumnWrapper = styled('div', ColAttrs)`
319
- display: grid;
320
- grid-template-columns: repeat(${(props) => props.numCols}, auto);
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
- ${({ hasActiveView, theme }) =>
323
- hasActiveView &&
324
- `
316
+ ${({ hasActiveView, theme }) =>
317
+ hasActiveView &&
318
+ `
325
319
  border-top: 1px solid ${theme.colors.grey4};
326
320
  `}
327
- `
321
+ `
328
322
 
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
- `
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
- const ButtonContainer = styled.div`
343
- display: flex;
344
- gap: 10px;
345
- padding: 15px;
346
- `
336
+ const ButtonContainer = styled.div`
337
+ display: flex;
338
+ gap: 10px;
339
+ padding: 15px;
340
+ `
347
341
 
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
- `
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
- const ColumnContainer = styled.div``
352
+ const ColumnContainer = styled.div``
359
353
 
360
- const DragContainer = styled.div`
361
- cursor: grab;
354
+ const DragContainer = styled.div`
355
+ cursor: grab;
362
356
 
363
- &:active {
364
- cursor: grabbing;
365
- }
366
- `
357
+ &:active {
358
+ cursor: grabbing;
359
+ }
360
+ `
367
361
 
368
- const RowContainer = styled('div', TitleAttrs)`
369
- padding: 10px 14px;
370
- min-width: 300px;
362
+ const RowContainer = styled('div', TitleAttrs)`
363
+ padding: 10px 14px;
364
+ min-width: 300px;
371
365
 
372
- ${({ showBorder, theme }) =>
373
- showBorder &&
374
- `
366
+ ${({ showBorder, theme }) =>
367
+ showBorder &&
368
+ `
375
369
  border-right: 1px solid ${theme.colors.grey4};
376
370
  `}
377
371
 
378
- .ghost {
379
- opacity: 0.5;
380
- background-color: #e5fcb4;
381
- }
382
- `
372
+ .ghost {
373
+ opacity: 0.5;
374
+ background-color: #e5fcb4;
375
+ }
376
+ `
383
377
 
384
- const OptionTitle = styled.div`
385
- cursor: pointer !important;
386
- `
378
+ const OptionTitle = styled.div`
379
+ cursor: pointer !important;
380
+ `
387
381
 
388
- const CheckboxContainer = styled.div`
389
- display: grid;
390
- gap: 6px;
391
- `
382
+ const CheckboxContainer = styled.div`
383
+ display: grid;
384
+ gap: 6px;
385
+ `
392
386
 
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
- `
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
- 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
- `
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
- const RowWrapper = styled.div`
410
- margin-bottom: 12px;
411
- `
403
+ const RowWrapper = styled.div`
404
+ margin-bottom: 12px;
405
+ `
412
406
 
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
- `
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
- const SectionContainer = styled.div``
417
+ const SectionContainer = styled.div``
424
418
 
425
- const GridContainer = styled.div`
426
- display: grid;
427
- grid-template-columns: 1fr 1fr;
428
- grid-gap: 12px;
429
- `
419
+ const GridContainer = styled.div`
420
+ display: grid;
421
+ grid-template-columns: 1fr 1fr;
422
+ grid-gap: 12px;
423
+ `
430
424
 
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
- `
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
- const UpperContainer = styled.div`
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
- 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
- `
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
- 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,
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
- 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
- },
500
+ activeLanguage: {
501
+ required: false
515
502
  },
516
- data() {
517
- return {
518
- selectedDates: null,
519
- value1: null,
520
- dateStart: null,
521
- dateEnd: null,
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
- 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
- },
530
+ onDatepickerFocus(range) {
531
+ this.dateStart = range.start
532
+ this.dateEnd = range.end
533
+ this.$emit('on-prevent-close', true)
545
534
  },
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('-')
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
- 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])
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
- const currentDate = new Date(year, month, day)
578
- const selectedDate = new Date(date)
549
+ const currentDate = new Date(year, month, day)
550
+ const selectedDate = new Date(date)
579
551
 
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('-')
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
- 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])
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
- const currentDate = new Date(year, month, day)
595
- const selectedDate = new Date(date)
566
+ const currentDate = new Date(year, month, day)
567
+ const selectedDate = new Date(date)
596
568
 
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
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
- // 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)
622
+ if (filteredColumns.length === 1) {
623
+ isDisabled = true
619
624
  }
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
- },
625
+ }
626
+ return isDisabled
637
627
  },
628
+ theme() {
629
+ return theme
630
+ }
638
631
  }
632
+ }
639
633
  </script>