@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.
Files changed (81) hide show
  1. package/.eslintrc.js +184 -0
  2. package/.prettierrc +8 -6
  3. package/package.json +9 -21
  4. package/src/App.vue +79 -78
  5. package/src/assets/theme.js +3 -3
  6. package/src/components/addNewButton/AddNewButton.stories.js +2 -2
  7. package/src/components/addNewButton/index.vue +48 -51
  8. package/src/components/banner/actionBanner/index.vue +54 -55
  9. package/src/components/banner/banner/banner.stories.js +5 -5
  10. package/src/components/banner/banner/index.vue +159 -159
  11. package/src/components/banner/infoBanner/index.vue +41 -53
  12. package/src/components/buttons/buttonIcon/index.vue +125 -122
  13. package/src/components/buttons/closeButton/CloseButton.stories.js +3 -3
  14. package/src/components/buttons/closeButton/index.vue +49 -49
  15. package/src/components/buttons/mainButton/index.vue +108 -108
  16. package/src/components/card/index.vue +70 -70
  17. package/src/components/collapsableInfoText/index.vue +96 -94
  18. package/src/components/deleteIcon/DeleteIcon.stories.js +4 -4
  19. package/src/components/deleteIcon/index.vue +54 -54
  20. package/src/components/draggableInputHandle/index.vue +37 -37
  21. package/src/components/dropdown/Dropdown.stories.js +9 -10
  22. package/src/components/dropdown/index.vue +106 -106
  23. package/src/components/errorMessage/index.vue +52 -52
  24. package/src/components/filter/filterSettings.vue +428 -422
  25. package/src/components/filter/index.vue +135 -135
  26. package/src/components/filter/parentDropdown.vue +73 -73
  27. package/src/components/icon/Icons.stories.js +7 -7
  28. package/src/components/icon/iconCollection.vue +53 -53
  29. package/src/components/icon/index.vue +122 -122
  30. package/src/components/iconWrapper/index.vue +156 -156
  31. package/src/components/infoCard/index.vue +30 -32
  32. package/src/components/infoText/index.vue +142 -137
  33. package/src/components/inputs/checkbox/Checkbox.stories.js +8 -8
  34. package/src/components/inputs/checkbox/index.vue +190 -180
  35. package/src/components/inputs/inputNumber/InputNumber.stories.js +41 -41
  36. package/src/components/inputs/inputNumber/index.vue +696 -696
  37. package/src/components/inputs/inputNumberQuestion/index.vue +185 -182
  38. package/src/components/inputs/inputText/InputText.stories.js +22 -22
  39. package/src/components/inputs/inputText/index.vue +337 -336
  40. package/src/components/inputs/radioButton/RadioButton.stories.js +16 -16
  41. package/src/components/inputs/radioButton/index.vue +222 -219
  42. package/src/components/inputs/searchInput/SearchInput.stories.js +8 -8
  43. package/src/components/inputs/searchInput/index.vue +127 -126
  44. package/src/components/inputs/select/index.vue +792 -791
  45. package/src/components/inputs/select/option/index.vue +124 -124
  46. package/src/components/inputs/select/select.stories.js +31 -32
  47. package/src/components/inputs/slider/index.vue +99 -99
  48. package/src/components/inputs/switchField/index.vue +220 -222
  49. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +57 -57
  50. package/src/components/inputs/textAreaInput/index.vue +171 -173
  51. package/src/components/inputs/toggle/Toggle.stories.js +14 -14
  52. package/src/components/inputs/toggle/index.vue +214 -217
  53. package/src/components/label/index.vue +82 -82
  54. package/src/components/markerItem/index.vue +68 -66
  55. package/src/components/modals/actionModal/index.vue +54 -54
  56. package/src/components/modals/infoModal/index.vue +39 -36
  57. package/src/components/modals/modal/index.vue +134 -134
  58. package/src/components/modals/modal/modal.stories.js +5 -5
  59. package/src/components/navigationTabs/index.vue +96 -94
  60. package/src/components/pageSubtitle/index.vue +55 -49
  61. package/src/components/pageTitle/index.vue +56 -56
  62. package/src/components/pagination/index.vue +92 -89
  63. package/src/components/progressBar/index.vue +107 -107
  64. package/src/components/projectMarker/index.vue +246 -244
  65. package/src/components/rangeSlider/Slider.vue +491 -465
  66. package/src/components/rangeSlider/index.vue +410 -410
  67. package/src/components/rangeSlider/utils/dom.js +5 -5
  68. package/src/components/selectedOptions/index.vue +119 -119
  69. package/src/components/sideMenu/index.vue +199 -199
  70. package/src/components/spinner/index.vue +57 -57
  71. package/src/components/tableDropdown/index.vue +520 -520
  72. package/src/components/tables/mainTable/index.vue +417 -400
  73. package/src/components/tables/viewTable/index.vue +171 -171
  74. package/src/components/threeDots/index.vue +340 -334
  75. package/src/components/videoThumbnail/index.vue +86 -86
  76. package/src/components/videoThumbnail/videoThumbnail.stories.js +14 -16
  77. package/src/helpers/numberConverter.js +2 -2
  78. package/src/helpers/translateLang.js +9 -9
  79. package/src/mixins/inputValidations.js +5 -5
  80. package/public/favicon.ico +0 -0
  81. package/public/index.html +0 -17
@@ -1,300 +1,306 @@
1
1
  <template>
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
6
- @click.stop
7
- selectWidth="100%"
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
- alignItems="vertical"
9
+ select-height="36px"
10
+ select-width="100%"
11
+ @click.stop
12
12
  >
13
13
  <template #selector>
14
- <option-title>
14
+ <OptionTitle>
15
15
  {{ activeView }}
16
- </option-title>
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
- >{{ item.name }}
25
- <delete-icon @click.stop="$emit('on-view-delete', item)"
26
- /></Option>
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
- </select-component>
29
- </view-container>
30
- <reset-button @click="$emit('on-reset-filters')">
31
- <icon :name="'update'" size="14px" :color="theme.colors.blue" />
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
- </reset-button>
34
- </upper-container>
35
- <column-wrapper
36
- :numCols="filterData.length"
37
- :hasActiveView="!!filterViews && !!filterViews.length"
34
+ </ResetButton>
35
+ </UpperContainer>
36
+ <ColumnWrapper
37
+ :has-active-view="!!filterViews && !!filterViews.length"
38
+ :num-cols="filterData.length"
38
39
  >
39
- <column-container
40
+ <ColumnContainer
40
41
  v-for="(item, idx) in filterData"
41
42
  :key="idx + '_filterdata'"
42
43
  >
43
- <column-title
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
- </column-title>
49
- <row-container v-if="item.type === 'columns'">
50
- <checkbox-container>
51
- <draggable
52
- @change="onDragChange({ data: item.dataOptions })"
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
- ghost-class="ghost"
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
- <checkbox-wrapper>
62
- <drag-container class="drag-container">
63
- <icon :name="'duplicate-1'" size="12px" />
64
- </drag-container>
65
- <checkbox
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
- :isChecked="column.selected"
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
- </checkbox-wrapper>
79
+ </CheckboxWrapper>
79
80
  </template>
80
- </draggable>
81
- </checkbox-container>
82
- </row-container>
83
- <row-container v-if="item.type === 'filter'" showBorder>
84
- <row-wrapper
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
- <select-component
89
+ <SelectComponent
89
90
  v-if="isMultipleSelector(filter.filter_type)"
90
- selectWidth="100%"
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
- :minOptionLength="1"
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
- <option-title> {{ filter.selectedText }} </option-title>
102
+ <OptionTitle> {{ filter.selectedText }} </OptionTitle>
102
103
  </template>
103
104
  <template #dropdown>
104
- <dropdown-checkbox-container
105
+ <DropdownCheckboxContainer
105
106
  v-for="(filterOption, optionIdx) in filter.choices"
106
107
  :key="optionIdx + 'optionIdx'"
107
108
  @click.stop
108
109
  >
109
- <checkbox
110
+ <Checkbox
111
+ :is-checked="filterOption.selected"
110
112
  :label="filterOption.text"
111
- :isChecked="filterOption.selected"
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
- </dropdown-checkbox-container>
123
+ </DropdownCheckboxContainer>
123
124
  </template>
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
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
- :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
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
- <input-number
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
- :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
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
- </grid-container>
169
- </section-container>
170
- <section-container
171
+ </GridContainer>
172
+ </SectionContainer>
173
+ <SectionContainer
171
174
  v-else-if="isDateSelector(filter.filter_type)"
172
175
  @click.stop
173
176
  >
174
- <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
175
- <grid-container>
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
- @focus="onDatepickerFocus(filter.range)"
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
- @focus="onDatepickerFocus(filter.range)"
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
- </grid-container>
221
- </section-container>
222
- <select-component
225
+ </GridContainer>
226
+ </SectionContainer>
227
+ <SelectComponent
223
228
  v-else
224
- selectWidth="100%"
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
- <option-title>
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
- </option-title>
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
- </select-component>
252
- </row-wrapper>
253
- </row-container>
254
- </column-container>
255
- </column-wrapper>
256
- <button-container>
257
- <main-button
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
- <main-button
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
- <main-button
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
- <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" />
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
- </reset-button>
280
- </reset-container>
281
- </button-container>
282
- </container-wrapper>
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
- display: grid;
314
- grid-template-columns: repeat(${(props) => props.numCols}, auto);
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
- ${({ hasActiveView, theme }) =>
317
- hasActiveView &&
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
- font-size: 14px;
326
- font-weight: 700;
327
- color: ${(props) => props.theme.colors.eturnityGrey};
328
- padding: 10px 14px;
329
- ${({ showBorder, theme }) =>
330
- showBorder &&
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
- display: flex;
338
- gap: 10px;
339
- padding: 15px;
340
- `
342
+ const ButtonContainer = styled.div`
343
+ display: flex;
344
+ gap: 10px;
345
+ padding: 15px;
346
+ `
341
347
 
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
- `
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
- cursor: grab;
360
+ const DragContainer = styled.div`
361
+ cursor: grab;
356
362
 
357
- &:active {
358
- cursor: grabbing;
359
- }
360
- `
363
+ &:active {
364
+ cursor: grabbing;
365
+ }
366
+ `
361
367
 
362
- const RowContainer = styled('div', TitleAttrs)`
363
- padding: 10px 14px;
364
- min-width: 300px;
368
+ const RowContainer = styled('div', TitleAttrs)`
369
+ padding: 10px 14px;
370
+ min-width: 300px;
365
371
 
366
- ${({ showBorder, theme }) =>
367
- showBorder &&
368
- `
372
+ ${({ showBorder, theme }) =>
373
+ showBorder &&
374
+ `
369
375
  border-right: 1px solid ${theme.colors.grey4};
370
376
  `}
371
377
 
372
- .ghost {
373
- opacity: 0.5;
374
- background-color: #e5fcb4;
375
- }
376
- `
378
+ .ghost {
379
+ opacity: 0.5;
380
+ background-color: #e5fcb4;
381
+ }
382
+ `
377
383
 
378
- const OptionTitle = styled.div`
379
- cursor: pointer !important;
380
- `
384
+ const OptionTitle = styled.div`
385
+ cursor: pointer !important;
386
+ `
381
387
 
382
- const CheckboxContainer = styled.div`
383
- display: grid;
384
- gap: 6px;
385
- `
388
+ const CheckboxContainer = styled.div`
389
+ display: grid;
390
+ gap: 6px;
391
+ `
386
392
 
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
- `
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
- display: grid;
397
- gap: 6px;
398
- width: 100%;
399
- padding: 7px 10px;
400
- background: ${(props) => props.theme.colors.grey5};
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
- margin-bottom: 12px;
405
- `
409
+ const RowWrapper = styled.div`
410
+ margin-bottom: 12px;
411
+ `
406
412
 
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
- `
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
- display: grid;
421
- grid-template-columns: 1fr 1fr;
422
- grid-gap: 12px;
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
- max-width: ${(props) =>
428
- props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
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
- 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
- `
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
- 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
- // }
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
- filterViews: {
498
- required: true
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
- activeLanguage: {
501
- required: false
502
- },
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
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
- onDatepickerFocus(range) {
531
- this.dateStart = range.start
532
- this.dateEnd = range.end
533
- this.$emit('on-prevent-close', true)
534
- },
535
- onDatepickerBlur() {
536
- this.$emit('on-prevent-close', false)
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
- disablePastDates(date) {
539
- const dateString = this.dateStart
540
- if (!dateString) {
541
- return
542
- }
543
- const dateParts = dateString.split('-')
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
- 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])
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
- const currentDate = new Date(year, month, day)
550
- const selectedDate = new Date(date)
577
+ const currentDate = new Date(year, month, day)
578
+ const selectedDate = new Date(date)
551
579
 
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('-')
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
- 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])
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
- const currentDate = new Date(year, month, day)
567
- const selectedDate = new Date(date)
594
+ const currentDate = new Date(year, month, day)
595
+ const selectedDate = new Date(date)
568
596
 
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
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
- if (filteredColumns.length === 1) {
623
- isDisabled = true
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
- return isDisabled
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>