@eturnity/eturnity_reusable_components 7.4.3 → 7.4.4

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 (280) hide show
  1. package/.prettierrc +6 -6
  2. package/.storybook/main.js +8 -8
  3. package/.storybook/preview.js +46 -46
  4. package/README.md +29 -29
  5. package/babel.config.js +4 -4
  6. package/package.json +66 -66
  7. package/postcss.config.js +6 -6
  8. package/public/index.html +17 -17
  9. package/src/App.vue +250 -250
  10. package/src/assets/icons/arrow_down.svg +3 -3
  11. package/src/assets/icons/arrow_up_red.svg +3 -3
  12. package/src/assets/icons/black_spinner.svg +35 -35
  13. package/src/assets/icons/delete_icon.svg +11 -11
  14. package/src/assets/icons/delete_icon_gray.svg +11 -11
  15. package/src/assets/icons/drag_icon.svg +8 -8
  16. package/src/assets/icons/external_icon.svg +6 -6
  17. package/src/assets/icons/language_icon.svg +6 -6
  18. package/src/assets/icons/pdf_icon.svg +6 -6
  19. package/src/assets/icons/plus_button.svg +4 -4
  20. package/src/assets/icons/search_icon_black.svg +3 -3
  21. package/src/assets/icons/subposition_icon.svg +3 -3
  22. package/src/assets/icons/subposition_marker.svg +3 -3
  23. package/src/assets/icons/warning_icon.svg +3 -3
  24. package/src/assets/svgIcons/2d_active.svg +7 -7
  25. package/src/assets/svgIcons/2d_inactive.svg +8 -8
  26. package/src/assets/svgIcons/3d_active.svg +7 -7
  27. package/src/assets/svgIcons/3d_inactive.svg +8 -8
  28. package/src/assets/svgIcons/_readme.md +7 -7
  29. package/src/assets/svgIcons/accept.svg +5 -5
  30. package/src/assets/svgIcons/activate_panels_active.svg +22 -22
  31. package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
  32. package/src/assets/svgIcons/add_icon-1.svg +3 -3
  33. package/src/assets/svgIcons/add_icon.svg +4 -4
  34. package/src/assets/svgIcons/address_book.svg +3 -3
  35. package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
  36. package/src/assets/svgIcons/all_good.svg +3 -3
  37. package/src/assets/svgIcons/angle_active.svg +5 -5
  38. package/src/assets/svgIcons/angle_inactive.svg +4 -4
  39. package/src/assets/svgIcons/area_active.svg +11 -11
  40. package/src/assets/svgIcons/area_inactive.svg +26 -26
  41. package/src/assets/svgIcons/areas_tool.svg +14 -14
  42. package/src/assets/svgIcons/arrow_down.svg +3 -3
  43. package/src/assets/svgIcons/arrow_left.svg +4 -4
  44. package/src/assets/svgIcons/arrow_right.svg +4 -4
  45. package/src/assets/svgIcons/arrow_up.svg +3 -3
  46. package/src/assets/svgIcons/attachment.svg +3 -3
  47. package/src/assets/svgIcons/base_layer.svg +3 -3
  48. package/src/assets/svgIcons/battery.svg +3 -3
  49. package/src/assets/svgIcons/bell.svg +3 -3
  50. package/src/assets/svgIcons/bold.svg +3 -3
  51. package/src/assets/svgIcons/bom.svg +3 -3
  52. package/src/assets/svgIcons/bom_generation.svg +10 -10
  53. package/src/assets/svgIcons/bookmaker.svg +3 -3
  54. package/src/assets/svgIcons/bubble.svg +3 -3
  55. package/src/assets/svgIcons/bug.svg +5 -5
  56. package/src/assets/svgIcons/bullet_list.svg +8 -8
  57. package/src/assets/svgIcons/calendar.svg +7 -7
  58. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  59. package/src/assets/svgIcons/call.svg +3 -3
  60. package/src/assets/svgIcons/camera.svg +3 -3
  61. package/src/assets/svgIcons/car.svg +3 -3
  62. package/src/assets/svgIcons/cart.svg +3 -3
  63. package/src/assets/svgIcons/checkbox.svg +3 -3
  64. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  65. package/src/assets/svgIcons/clickable_info.svg +4 -4
  66. package/src/assets/svgIcons/clip.svg +3 -3
  67. package/src/assets/svgIcons/clock.svg +17 -17
  68. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  69. package/src/assets/svgIcons/co_branding.svg +5 -5
  70. package/src/assets/svgIcons/collapse.svg +4 -4
  71. package/src/assets/svgIcons/collections.svg +3 -3
  72. package/src/assets/svgIcons/component_library.svg +7 -7
  73. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  74. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  75. package/src/assets/svgIcons/context_menu.svg +5 -5
  76. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  77. package/src/assets/svgIcons/cross.svg +4 -4
  78. package/src/assets/svgIcons/current_variant.svg +4 -4
  79. package/src/assets/svgIcons/dashboard.svg +3 -3
  80. package/src/assets/svgIcons/deadline.svg +4 -4
  81. package/src/assets/svgIcons/deal_flow.svg +5 -5
  82. package/src/assets/svgIcons/delete.svg +4 -4
  83. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  84. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  85. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  86. package/src/assets/svgIcons/direction_active.svg +5 -5
  87. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  88. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  89. package/src/assets/svgIcons/dislike.svg +3 -3
  90. package/src/assets/svgIcons/distance_tool.svg +8 -8
  91. package/src/assets/svgIcons/distances_active.svg +9 -9
  92. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  93. package/src/assets/svgIcons/distort_tool.svg +10 -10
  94. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  95. package/src/assets/svgIcons/document.svg +3 -3
  96. package/src/assets/svgIcons/documents.svg +4 -4
  97. package/src/assets/svgIcons/downarrow.svg +3 -3
  98. package/src/assets/svgIcons/download.svg +4 -4
  99. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  100. package/src/assets/svgIcons/draw_tool.svg +3 -3
  101. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  102. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  103. package/src/assets/svgIcons/duplicate.svg +4 -4
  104. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  105. package/src/assets/svgIcons/e_signature.svg +5 -5
  106. package/src/assets/svgIcons/edit_button.svg +3 -3
  107. package/src/assets/svgIcons/email.svg +3 -3
  108. package/src/assets/svgIcons/ems-1.svg +3 -3
  109. package/src/assets/svgIcons/ems.svg +3 -3
  110. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  111. package/src/assets/svgIcons/erase.svg +4 -4
  112. package/src/assets/svgIcons/external_icon.svg +5 -5
  113. package/src/assets/svgIcons/fav_icon.svg +4 -4
  114. package/src/assets/svgIcons/finance.svg +3 -3
  115. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  116. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  117. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  118. package/src/assets/svgIcons/finish-1.svg +4 -4
  119. package/src/assets/svgIcons/finish.svg +3 -3
  120. package/src/assets/svgIcons/flatten.svg +11 -11
  121. package/src/assets/svgIcons/folder.svg +3 -3
  122. package/src/assets/svgIcons/free_technology.svg +5 -5
  123. package/src/assets/svgIcons/heat_calc.svg +7 -7
  124. package/src/assets/svgIcons/house.svg +3 -3
  125. package/src/assets/svgIcons/info.svg +3 -3
  126. package/src/assets/svgIcons/initial_situation.svg +3 -3
  127. package/src/assets/svgIcons/integrations.svg +3 -3
  128. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  129. package/src/assets/svgIcons/intro-tour.svg +3 -3
  130. package/src/assets/svgIcons/inverter-1.svg +5 -5
  131. package/src/assets/svgIcons/inverter.svg +3 -3
  132. package/src/assets/svgIcons/italic.svg +3 -3
  133. package/src/assets/svgIcons/key.svg +3 -3
  134. package/src/assets/svgIcons/layers_close.svg +4 -4
  135. package/src/assets/svgIcons/layers_open.svg +4 -4
  136. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  137. package/src/assets/svgIcons/lead_provider.svg +4 -4
  138. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  139. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  140. package/src/assets/svgIcons/light_bulb.svg +3 -3
  141. package/src/assets/svgIcons/like.svg +3 -3
  142. package/src/assets/svgIcons/line_graph.svg +3 -3
  143. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  144. package/src/assets/svgIcons/location.svg +3 -3
  145. package/src/assets/svgIcons/lock.svg +3 -3
  146. package/src/assets/svgIcons/loop.svg +3 -3
  147. package/src/assets/svgIcons/lunch.svg +4 -4
  148. package/src/assets/svgIcons/magic_tool.svg +6 -6
  149. package/src/assets/svgIcons/map_icon.svg +5 -5
  150. package/src/assets/svgIcons/map_settings.svg +3 -3
  151. package/src/assets/svgIcons/margin_tool.svg +4 -4
  152. package/src/assets/svgIcons/meeting.svg +6 -6
  153. package/src/assets/svgIcons/move_copy.svg +4 -4
  154. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  155. package/src/assets/svgIcons/next.svg +4 -4
  156. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  157. package/src/assets/svgIcons/numbered_list.svg +6 -6
  158. package/src/assets/svgIcons/obstacle_tool.svg +9 -9
  159. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  160. package/src/assets/svgIcons/offset_tool.svg +8 -8
  161. package/src/assets/svgIcons/outline_tool.svg +11 -11
  162. package/src/assets/svgIcons/pan_tool.svg +12 -12
  163. package/src/assets/svgIcons/panels_tool.svg +8 -8
  164. package/src/assets/svgIcons/pen_tool.svg +4 -4
  165. package/src/assets/svgIcons/picker_tool.svg +4 -4
  166. package/src/assets/svgIcons/picture.svg +3 -3
  167. package/src/assets/svgIcons/pin.svg +5 -5
  168. package/src/assets/svgIcons/presentation.svg +3 -3
  169. package/src/assets/svgIcons/previous.svg +4 -4
  170. package/src/assets/svgIcons/profile-1.svg +4 -4
  171. package/src/assets/svgIcons/profile.svg +4 -4
  172. package/src/assets/svgIcons/profitability.svg +3 -3
  173. package/src/assets/svgIcons/project_analysis.svg +4 -4
  174. package/src/assets/svgIcons/project_settings.svg +4 -4
  175. package/src/assets/svgIcons/pv.svg +3 -3
  176. package/src/assets/svgIcons/quotations.svg +6 -6
  177. package/src/assets/svgIcons/redo.svg +6 -6
  178. package/src/assets/svgIcons/resizer.svg +5 -5
  179. package/src/assets/svgIcons/roof_layer.svg +3 -3
  180. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  181. package/src/assets/svgIcons/rotate_view.svg +5 -5
  182. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  183. package/src/assets/svgIcons/run_simulation.svg +3 -3
  184. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  185. package/src/assets/svgIcons/search.svg +3 -3
  186. package/src/assets/svgIcons/security.svg +3 -3
  187. package/src/assets/svgIcons/settings.svg +3 -3
  188. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  189. package/src/assets/svgIcons/smartphone.svg +4 -4
  190. package/src/assets/svgIcons/solar_calc.svg +13 -13
  191. package/src/assets/svgIcons/sorting.svg +4 -4
  192. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  193. package/src/assets/svgIcons/strikethrough.svg +4 -4
  194. package/src/assets/svgIcons/subscriptions.svg +3 -3
  195. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  196. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  197. package/src/assets/svgIcons/subsidies.svg +3 -3
  198. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  199. package/src/assets/svgIcons/suitcase.svg +3 -3
  200. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  201. package/src/assets/svgIcons/transfer.svg +4 -4
  202. package/src/assets/svgIcons/trim_tool.svg +4 -4
  203. package/src/assets/svgIcons/truck.svg +3 -3
  204. package/src/assets/svgIcons/underlined.svg +3 -3
  205. package/src/assets/svgIcons/undo.svg +6 -6
  206. package/src/assets/svgIcons/uparrow.svg +3 -3
  207. package/src/assets/svgIcons/update.svg +3 -3
  208. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  209. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  210. package/src/assets/svgIcons/upload_image.svg +8 -8
  211. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  212. package/src/assets/svgIcons/variants.svg +6 -6
  213. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  214. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  215. package/src/assets/svgIcons/warning.svg +4 -4
  216. package/src/assets/svgIcons/way.svg +5 -5
  217. package/src/assets/svgIcons/wifi.svg +3 -3
  218. package/src/assets/svgIcons/winter.svg +3 -3
  219. package/src/assets/svgIcons/workflow_template.svg +11 -11
  220. package/src/assets/theme.js +38 -38
  221. package/src/components/addNewButton/AddNewButton.stories.js +24 -24
  222. package/src/components/addNewButton/index.vue +62 -62
  223. package/src/components/buttons/buttonIcon/index.vue +142 -142
  224. package/src/components/buttons/closeButton/CloseButton.stories.js +29 -29
  225. package/src/components/buttons/closeButton/index.vue +61 -61
  226. package/src/components/buttons/mainButton/index.vue +107 -107
  227. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  228. package/src/components/deleteIcon/index.vue +61 -61
  229. package/src/components/dropdown/Dropdown.stories.js +54 -54
  230. package/src/components/dropdown/index.vue +118 -118
  231. package/src/components/errorMessage/index.vue +61 -61
  232. package/src/components/filter/filterSettings.vue +650 -650
  233. package/src/components/filter/index.vue +143 -132
  234. package/src/components/filter/parentDropdown.vue +91 -91
  235. package/src/components/icon/Icons.stories.js +41 -41
  236. package/src/components/icon/iconCollection.vue +68 -68
  237. package/src/components/icon/index.vue +116 -116
  238. package/src/components/iconWrapper/index.vue +156 -156
  239. package/src/components/infoCard/index.vue +37 -37
  240. package/src/components/infoText/index.vue +170 -170
  241. package/src/components/inputs/checkbox/Checkbox.stories.js +57 -57
  242. package/src/components/inputs/checkbox/index.vue +187 -187
  243. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  244. package/src/components/inputs/inputNumber/index.vue +710 -710
  245. package/src/components/inputs/inputNumberQuestion/index.vue +215 -215
  246. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  247. package/src/components/inputs/inputText/index.vue +355 -355
  248. package/src/components/inputs/radioButton/RadioButton.stories.js +58 -58
  249. package/src/components/inputs/radioButton/index.vue +267 -267
  250. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  251. package/src/components/inputs/searchInput/index.vue +133 -133
  252. package/src/components/inputs/select/index.vue +596 -596
  253. package/src/components/inputs/select/option/index.vue +111 -111
  254. package/src/components/inputs/select/select.stories.js +59 -59
  255. package/src/components/inputs/slider/index.vue +126 -126
  256. package/src/components/inputs/switchField/index.vue +265 -265
  257. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +135 -135
  258. package/src/components/inputs/textAreaInput/index.vue +206 -206
  259. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  260. package/src/components/inputs/toggle/index.vue +298 -298
  261. package/src/components/modals/modal/index.vue +159 -159
  262. package/src/components/modals/modal/modal.stories.js +31 -31
  263. package/src/components/navigationTabs/index.vue +107 -107
  264. package/src/components/pageSubtitle/index.vue +68 -68
  265. package/src/components/pageTitle/index.vue +68 -68
  266. package/src/components/pagination/index.vue +129 -129
  267. package/src/components/progressBar/index.vue +125 -125
  268. package/src/components/projectMarker/index.vue +291 -291
  269. package/src/components/sideMenu/index.vue +270 -270
  270. package/src/components/spinner/index.vue +71 -71
  271. package/src/components/tableDropdown/index.vue +637 -637
  272. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  273. package/src/components/tables/mainTable/index.vue +446 -446
  274. package/src/components/tables/viewTable/index.vue +195 -195
  275. package/src/components/threeDots/index.vue +384 -384
  276. package/src/components/videoThumbnail/index.vue +107 -107
  277. package/src/components/videoThumbnail/videoThumbnail.stories.js +35 -35
  278. package/src/helpers/numberConverter.js +102 -102
  279. package/src/helpers/translateLang.js +119 -119
  280. package/src/main.js +13 -13
@@ -1,650 +1,650 @@
1
- <template>
2
- <container-wrapper>
3
- <upper-container v-if="filterViews && filterViews.length">
4
- <view-container :maxWidth="activeView.length">
5
- <select-component
6
- @click.native.stop
7
- selectWidth="100%"
8
- selectHeight="36px"
9
- fontSize="13px"
10
- :label="$gettext('active_filter')"
11
- alignItems="vertical"
12
- >
13
- <template #selector>
14
- <option-title>
15
- {{ activeView }}
16
- </option-title>
17
- </template>
18
- <template #dropdown>
19
- <Option
20
- v-for="(item, idx) in filterViews"
21
- :key="idx + '_view'"
22
- @click.native="$emit('on-view-select', item)"
23
- :value="item.name"
24
- >{{ item.name }}
25
- <delete-icon @click.native.stop="$emit('on-view-delete', item)"
26
- /></Option>
27
- </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" />
32
- <div>{{ $gettext('reset_filters') }}</div>
33
- </reset-button>
34
- </upper-container>
35
- <column-wrapper
36
- :numCols="filterData.length"
37
- :hasActiveView="!!filterViews && !!filterViews.length"
38
- >
39
- <column-container
40
- v-for="(item, idx) in filterData"
41
- :key="idx + '_filterdata'"
42
- >
43
- <column-title
44
- :showBorder="idx + 1 !== filterData.length"
45
- :data-id="`filter_label_project_view_file_manager_${item.type}`"
46
- >
47
- {{ item.columnName }}
48
- </column-title>
49
- <row-container v-if="item.type === 'columns'">
50
- <checkbox-container>
51
- <draggable
52
- @change="onDragChange({ data: item.dataOptions })"
53
- handle=".drag-container"
54
- style="display: contents"
55
- ghost-class="ghost"
56
- :setData="modifyDragItem"
57
- v-model="item.dataOptions"
58
- >
59
- <checkbox-wrapper
60
- v-for="(column, index) in item.dataOptions"
61
- :key="index + 'dataOption'"
62
- >
63
- <drag-container class="drag-container">
64
- <icon :name="'duplicate-1'" size="12px" />
65
- </drag-container>
66
- <checkbox
67
- :label="column.text"
68
- :isChecked="column.selected"
69
- @on-event-handler="
70
- onChange({
71
- dataType: item.type,
72
- value: $event,
73
- choice: column.choice
74
- })
75
- "
76
- size="small"
77
- :isDisabled="column.selected && isCheckboxDisabled"
78
- />
79
- </checkbox-wrapper>
80
- </draggable>
81
- </checkbox-container>
82
- </row-container>
83
- <row-container v-if="item.type === 'filter'" showBorder>
84
- <row-wrapper
85
- v-for="(filter, index) in item.dataOptions"
86
- :key="index + '_field'"
87
- >
88
- <select-component
89
- v-if="isMultipleSelector(filter.filter_type)"
90
- selectWidth="100%"
91
- selectHeight="36px"
92
- fontSize="13px"
93
- :label="filter.label"
94
- :labelDataId="filter.dataId"
95
- alignItems="vertical"
96
- :disabled="!filter.choices.length"
97
- >
98
- <template #selector>
99
- <option-title> {{ filter.selectedText }} </option-title>
100
- </template>
101
- <template #dropdown>
102
- <dropdown-checkbox-container @click.stop>
103
- <checkbox
104
- v-for="(filterOption, optionIdx) in filter.choices"
105
- :key="optionIdx + 'optionIdx'"
106
- :label="filterOption.text"
107
- :isChecked="filterOption.selected"
108
- @on-event-handler="
109
- onChange({
110
- dataType: item.type,
111
- value: $event,
112
- choice: filterOption.choice,
113
- field: filter.field
114
- })
115
- "
116
- size="small"
117
- />
118
- </dropdown-checkbox-container>
119
- </template>
120
- </select-component>
121
- <section-container v-else-if="isRangeSelector(filter.filter_type)">
122
- <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
123
- <grid-container>
124
- <input-number
125
- :placeholder="
126
- filter.unit
127
- ? $gettext('min') + ' (' + filter.unit + ')'
128
- : $gettext('min')
129
- "
130
- :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
131
- :value="filter.range.start"
132
- @input-change="
133
- onChange({
134
- dataType: item.type,
135
- value: $event,
136
- choice: 'start',
137
- field: filter.field
138
- })
139
- "
140
- fontSize="13px"
141
- inputHeight="36px"
142
- :unitName="filter.unit"
143
- />
144
- <input-number
145
- :placeholder="
146
- filter.unit
147
- ? $gettext('max') + ' (' + filter.unit + ')'
148
- : $gettext('max')
149
- "
150
- :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
151
- :value="filter.range.end"
152
- @input-change="
153
- onChange({
154
- dataType: item.type,
155
- value: $event,
156
- choice: 'end',
157
- field: filter.field
158
- })
159
- "
160
- fontSize="13px"
161
- inputHeight="36px"
162
- :unitName="filter.unit"
163
- />
164
- </grid-container>
165
- </section-container>
166
- <section-container
167
- v-else-if="isDateSelector(filter.filter_type)"
168
- @click.stop
169
- >
170
- <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
171
- <grid-container>
172
- <date-picker-input
173
- :placeholder="$gettext('Date from')"
174
- :lang="getDatePickerLanguage()"
175
- type="date"
176
- :value="filter.range.start"
177
- @change="
178
- onChange({
179
- dataType: item.type,
180
- value: $event,
181
- choice: 'start',
182
- field: filter.field
183
- })
184
- "
185
- @focus="onDatepickerFocus(filter.range)"
186
- @close="onDatepickerBlur()"
187
- format="YYYY-MM-DD"
188
- valueType="format"
189
- :disabled-date="disableFutureDates"
190
- />
191
- <date-picker-input
192
- :placeholder="$gettext('Date to')"
193
- :lang="getDatePickerLanguage()"
194
- type="date"
195
- :value="filter.range.end"
196
- @change="
197
- onChange({
198
- dataType: item.type,
199
- value: $event,
200
- choice: 'end',
201
- field: filter.field
202
- })
203
- "
204
- @focus="onDatepickerFocus(filter.range)"
205
- @close="onDatepickerBlur()"
206
- format="YYYY-MM-DD"
207
- valueType="format"
208
- :disabled-date="disablePastDates"
209
- />
210
- </grid-container>
211
- </section-container>
212
- <select-component
213
- v-else
214
- selectWidth="100%"
215
- selectHeight="36px"
216
- fontSize="13px"
217
- :label="filter.label"
218
- alignItems="vertical"
219
- :disabled="!filter.choices.length"
220
- >
221
- <template #selector="{ selectedValue }">
222
- <option-title>
223
- {{
224
- getSelectedValue({
225
- value: selectedValue,
226
- options: filter.choices,
227
- filter
228
- })
229
- }}
230
- </option-title>
231
- </template>
232
- <template #dropdown>
233
- <Option
234
- v-for="(filterOption, filterIdx) in filter.choices"
235
- :key="filterIdx + '_filterIdx'"
236
- :value="filterOption.choice"
237
- >{{ filterOption.text }}</Option
238
- >
239
- </template>
240
- </select-component>
241
- </row-wrapper>
242
- </row-container>
243
- </column-container>
244
- </column-wrapper>
245
- <button-container>
246
- <main-button
247
- v-if="buttonText.apply_view"
248
- type="primary"
249
- :text="buttonText.apply_view"
250
- @click.native="$emit('on-apply-current-view')"
251
- />
252
- <main-button
253
- type="secondary"
254
- v-if="buttonText.save_view"
255
- :text="buttonText.save_view"
256
- @click.native="$emit('on-save-new-view')"
257
- />
258
- <main-button
259
- type="cancel"
260
- v-if="buttonText.cancel"
261
- :text="buttonText.cancel"
262
- @click.native="$emit('on-cancel-view')"
263
- />
264
- </button-container>
265
- </container-wrapper>
266
- </template>
267
-
268
- <script>
269
- import styled from 'vue-styled-components'
270
- import DatePicker from 'vue2-datepicker'
271
- import SelectComponent from '../inputs/select'
272
- import Option from '../inputs/select/option'
273
- import InputNumber from '../inputs/inputNumber'
274
- import MainButton from '../buttons/mainButton'
275
- import Checkbox from '../inputs/checkbox'
276
- import draggable from 'vuedraggable'
277
- import Icon from '../icon'
278
- import DeleteIcon from '../deleteIcon'
279
- import { datePickerLang } from '../../helpers/translateLang'
280
- import theme from '@/assets/theme.js'
281
- import 'vue2-datepicker/index.css'
282
- import 'vue2-datepicker/locale/de'
283
- import 'vue2-datepicker/locale/en'
284
- import 'vue2-datepicker/locale/es'
285
- import 'vue2-datepicker/locale/fr'
286
- import 'vue2-datepicker/locale/it'
287
-
288
- const ContainerWrapper = styled.div`
289
- position: absolute;
290
- margin-top: 4px;
291
- background-color: ${(props) => props.theme.colors.white};
292
- min-width: 100%;
293
- width: max-content;
294
- border: 1px solid ${(props) => props.theme.colors.grey4};
295
- border-radius: 4px;
296
- z-index: 9999;
297
- font-size: 13px;
298
- `
299
-
300
- const ColAttrs = { numCols: Number, hasActiveView: Boolean }
301
- const ColumnWrapper = styled('div', ColAttrs)`
302
- display: grid;
303
- grid-template-columns: repeat(${(props) => props.numCols}, auto);
304
-
305
- ${({ hasActiveView, theme }) =>
306
- hasActiveView &&
307
- `
308
- border-top: 1px solid ${theme.colors.grey4};
309
- `}
310
- `
311
-
312
- const TitleAttrs = { showBorder: Boolean }
313
- const ColumnTitle = styled('div', TitleAttrs)`
314
- font-size: 14px;
315
- font-weight: 700;
316
- color: ${(props) => props.theme.colors.eturnityGrey};
317
- padding: 10px 14px;
318
- ${({ showBorder, theme }) =>
319
- showBorder &&
320
- `
321
- border-right: 1px solid ${theme.colors.grey4};
322
- `}
323
- `
324
-
325
- const ButtonContainer = styled.div`
326
- display: flex;
327
- gap: 10px;
328
- padding: 15px;
329
- `
330
-
331
- const ColumnContainer = styled.div``
332
-
333
- const DragContainer = styled.div`
334
- cursor: grab;
335
-
336
- &:active {
337
- cursor: grabbing;
338
- }
339
- `
340
-
341
- const RowContainer = styled('div', TitleAttrs)`
342
- padding: 10px 14px;
343
- min-width: 300px;
344
-
345
- ${({ showBorder, theme }) =>
346
- showBorder &&
347
- `
348
- border-right: 1px solid ${theme.colors.grey4};
349
- `}
350
-
351
- .ghost {
352
- opacity: 0.5;
353
- background-color: #e5fcb4;
354
- }
355
- `
356
-
357
- const OptionTitle = styled.div`
358
- cursor: pointer !important;
359
- `
360
-
361
- const CheckboxContainer = styled.div`
362
- display: grid;
363
- gap: 6px;
364
- `
365
-
366
- const CheckboxWrapper = styled.div`
367
- display: grid;
368
- grid-template-columns: auto 1fr;
369
- gap: 16px;
370
- padding: 2px;
371
- align-items: center;
372
- `
373
-
374
- const DropdownCheckboxContainer = styled.div`
375
- display: grid;
376
- gap: 6px;
377
- width: 100%;
378
- padding: 12px 10px;
379
- `
380
-
381
- const RowWrapper = styled.div`
382
- margin-bottom: 12px;
383
- `
384
-
385
- const DatePickerInput = styled(DatePicker)`
386
- border: 1px solid ${(props) => props.theme.colors.grey4};
387
- border-radius: 4px;
388
- padding: 7px 12px 7px 7px;
389
- width: 100%;
390
- position: relative;
391
-
392
- &.mx-datepicker {
393
- width: 100% !important;
394
- max-width: 100%;
395
- height: 36px;
396
- align-self: flex-end;
397
- }
398
-
399
- .mx-input-wrapper {
400
- position: unset;
401
-
402
- input {
403
- border: none;
404
- height: auto;
405
- padding: 0;
406
- font-size: 13px;
407
- box-shadow: none;
408
- color: #393939;
409
- vertical-align: bottom;
410
- }
411
-
412
- .mx-input-append {
413
- top: 1px;
414
- }
415
- }
416
-
417
- .mx-input-append {
418
- left: 0;
419
- top: 5px;
420
- height: auto;
421
- cursor: pointer;
422
- }
423
- `
424
-
425
- const LabelAttrs = {
426
- marginTop: Boolean
427
- }
428
- const RowLabel = styled('div', LabelAttrs)`
429
- font-weight: 700;
430
- font-size: 13px;
431
- margin-bottom: 8px;
432
- margin-top: ${(props) => (props.marginTop ? '12px' : '0')};
433
- `
434
-
435
- const SectionContainer = styled.div``
436
-
437
- const GridContainer = styled.div`
438
- display: grid;
439
- grid-template-columns: 1fr 1fr;
440
- grid-gap: 12px;
441
- `
442
-
443
- const ViewContainerAttrs = { maxWidth: Number }
444
- const ViewContainer = styled('div', ViewContainerAttrs)`
445
- max-width: ${(props) =>
446
- props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
447
- `
448
-
449
- const UpperContainer = styled.div`
450
- display: grid;
451
- grid-gap: 20px
452
- grid-template-columns: 1fr 1fr;
453
- padding: 10px 14px;
454
- `
455
-
456
- const ResetButton = styled.div`
457
- display: inline-flex;
458
- gap: 16px;
459
- width: max-content;
460
- margin-top: 20px;
461
- align-self: center;
462
- font-size: 13px;
463
- color: ${(props) => props.theme.colors.blue};
464
- cursor: pointer;
465
- `
466
-
467
- export default {
468
- name: 'filter-settings',
469
- components: {
470
- ContainerWrapper,
471
- ColumnWrapper,
472
- ColumnTitle,
473
- ColumnContainer,
474
- SelectComponent,
475
- RowContainer,
476
- OptionTitle,
477
- Option,
478
- ButtonContainer,
479
- MainButton,
480
- CheckboxContainer,
481
- CheckboxWrapper,
482
- Checkbox,
483
- RowWrapper,
484
- DropdownCheckboxContainer,
485
- draggable,
486
- Icon,
487
- DragContainer,
488
- InputNumber,
489
- DatePickerInput,
490
- RowLabel,
491
- SectionContainer,
492
- GridContainer,
493
- ViewContainer,
494
- DeleteIcon,
495
- UpperContainer,
496
- ResetButton
497
- },
498
- props: {
499
- filterData: {
500
- required: true
501
- },
502
- hasActiveView: {
503
- required: false
504
- },
505
- buttonText: {
506
- required: true
507
- // example:
508
- // {
509
- // 'save_new_view': '$gettext("save_new_view")',
510
- // 'cancel': '$gettext("cancel")',
511
- // 'save_view': '$gettext("save_view")'
512
- // }
513
- },
514
- filterViews: {
515
- required: true
516
- },
517
- activeLanguage: {
518
- required: false
519
- },
520
- settingsTranslations: {
521
- required: false
522
- },
523
- activeView: {
524
- required: false
525
- }
526
- },
527
- data() {
528
- return {
529
- selectedDates: null,
530
- value1: null,
531
- dateStart: null,
532
- dateEnd: null
533
- }
534
- },
535
- methods: {
536
- onChange({ dataType, value, choice, field }) {
537
- if (
538
- dataType === 'columns' &&
539
- this.isCheckboxDisabled &&
540
- value === false
541
- ) {
542
- return
543
- }
544
- const data = { dataType, value, choice, field }
545
- this.$emit('on-filter-change', data)
546
- },
547
- onDatepickerFocus(range) {
548
- this.dateStart = range.start
549
- this.dateEnd = range.end
550
- this.$emit('on-prevent-close', true)
551
- },
552
- onDatepickerBlur() {
553
- this.$emit('on-prevent-close', false)
554
- },
555
- disablePastDates(date) {
556
- const dateString = this.dateStart
557
- if (!dateString) {
558
- return
559
- }
560
- const dateParts = dateString.split('-')
561
-
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])
565
-
566
- const currentDate = new Date(year, month, day)
567
- const selectedDate = new Date(date)
568
-
569
- // Disable dates that are greater than or equal to the current date
570
- return selectedDate <= currentDate
571
- },
572
- disableFutureDates(date) {
573
- const dateString = this.dateEnd
574
- if (!dateString) {
575
- return
576
- }
577
- const dateParts = dateString.split('-')
578
-
579
- const year = parseInt(dateParts[0])
580
- const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
581
- const day = parseInt(dateParts[2])
582
-
583
- const currentDate = new Date(year, month, day)
584
- const selectedDate = new Date(date)
585
-
586
- // Disable dates that are greater than or equal to the current date
587
- return selectedDate >= currentDate
588
- },
589
- getDatePickerLanguage() {
590
- return datePickerLang(this.activeLanguage)
591
- },
592
- onDragChange({ data }) {
593
- this.$emit('on-drag-change', data)
594
- },
595
- modifyDragItem(dataTransfer) {
596
- const isSafari = /^((?!chrome|android).)*safari/i.test(
597
- navigator.userAgent
598
- )
599
- // prevents the dragged element from dragging the whole row as a "ghost"
600
- // Safari fix because this does not work on Safari
601
- let img = new Image()
602
- if (!isSafari) {
603
- dataTransfer.setDragImage(img, 0, 0)
604
- } else {
605
- img.src =
606
- 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
607
- dataTransfer.setDragImage(img, 0, 0)
608
- }
609
- },
610
- getSelectedValue({ value, options, filter }) {
611
- const foundItem = options.find((item) => item.choice === value)
612
- return foundItem ? foundItem.text : value ? value : filter.selectedText
613
- },
614
- isMultipleSelector(type) {
615
- return type === 'multi_select_integer' || type === 'multi_select_string'
616
- },
617
- isRangeSelector(type) {
618
- return type === 'integer_range' || type === 'number_range'
619
- },
620
- isIntegerRange(type) {
621
- return type === 'integer_range'
622
- },
623
- isDateSelector(type) {
624
- return type === 'datetime'
625
- }
626
- },
627
- computed: {
628
- isCheckboxDisabled() {
629
- // if only 1 item left, disable checkbox
630
- let isDisabled = false
631
- let columnsData = this.filterData.filter(
632
- (item) => item.type === 'columns'
633
- )
634
- if (columnsData.length) {
635
- columnsData = columnsData[0]
636
- const filteredColumns = columnsData.dataOptions.filter(
637
- (item) => item.selected
638
- )
639
- if (filteredColumns.length === 1) {
640
- isDisabled = true
641
- }
642
- }
643
- return isDisabled
644
- },
645
- theme() {
646
- return theme
647
- }
648
- }
649
- }
650
- </script>
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.native.stop
7
+ selectWidth="100%"
8
+ selectHeight="36px"
9
+ fontSize="13px"
10
+ :label="$gettext('active_filter')"
11
+ alignItems="vertical"
12
+ >
13
+ <template #selector>
14
+ <option-title>
15
+ {{ activeView }}
16
+ </option-title>
17
+ </template>
18
+ <template #dropdown>
19
+ <Option
20
+ v-for="(item, idx) in filterViews"
21
+ :key="idx + '_view'"
22
+ @click.native="$emit('on-view-select', item)"
23
+ :value="item.name"
24
+ >{{ item.name }}
25
+ <delete-icon @click.native.stop="$emit('on-view-delete', item)"
26
+ /></Option>
27
+ </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" />
32
+ <div>{{ $gettext('reset_filters') }}</div>
33
+ </reset-button>
34
+ </upper-container>
35
+ <column-wrapper
36
+ :numCols="filterData.length"
37
+ :hasActiveView="!!filterViews && !!filterViews.length"
38
+ >
39
+ <column-container
40
+ v-for="(item, idx) in filterData"
41
+ :key="idx + '_filterdata'"
42
+ >
43
+ <column-title
44
+ :showBorder="idx + 1 !== filterData.length"
45
+ :data-id="`filter_label_project_view_file_manager_${item.type}`"
46
+ >
47
+ {{ item.columnName }}
48
+ </column-title>
49
+ <row-container v-if="item.type === 'columns'">
50
+ <checkbox-container>
51
+ <draggable
52
+ @change="onDragChange({ data: item.dataOptions })"
53
+ handle=".drag-container"
54
+ style="display: contents"
55
+ ghost-class="ghost"
56
+ :setData="modifyDragItem"
57
+ v-model="item.dataOptions"
58
+ >
59
+ <checkbox-wrapper
60
+ v-for="(column, index) in item.dataOptions"
61
+ :key="index + 'dataOption'"
62
+ >
63
+ <drag-container class="drag-container">
64
+ <icon :name="'duplicate-1'" size="12px" />
65
+ </drag-container>
66
+ <checkbox
67
+ :label="column.text"
68
+ :isChecked="column.selected"
69
+ @on-event-handler="
70
+ onChange({
71
+ dataType: item.type,
72
+ value: $event,
73
+ choice: column.choice
74
+ })
75
+ "
76
+ size="small"
77
+ :isDisabled="column.selected && isCheckboxDisabled"
78
+ />
79
+ </checkbox-wrapper>
80
+ </draggable>
81
+ </checkbox-container>
82
+ </row-container>
83
+ <row-container v-if="item.type === 'filter'" showBorder>
84
+ <row-wrapper
85
+ v-for="(filter, index) in item.dataOptions"
86
+ :key="index + '_field'"
87
+ >
88
+ <select-component
89
+ v-if="isMultipleSelector(filter.filter_type)"
90
+ selectWidth="100%"
91
+ selectHeight="36px"
92
+ fontSize="13px"
93
+ :label="filter.label"
94
+ :labelDataId="filter.dataId"
95
+ alignItems="vertical"
96
+ :disabled="!filter.choices.length"
97
+ >
98
+ <template #selector>
99
+ <option-title> {{ filter.selectedText }} </option-title>
100
+ </template>
101
+ <template #dropdown>
102
+ <dropdown-checkbox-container @click.stop>
103
+ <checkbox
104
+ v-for="(filterOption, optionIdx) in filter.choices"
105
+ :key="optionIdx + 'optionIdx'"
106
+ :label="filterOption.text"
107
+ :isChecked="filterOption.selected"
108
+ @on-event-handler="
109
+ onChange({
110
+ dataType: item.type,
111
+ value: $event,
112
+ choice: filterOption.choice,
113
+ field: filter.field
114
+ })
115
+ "
116
+ size="small"
117
+ />
118
+ </dropdown-checkbox-container>
119
+ </template>
120
+ </select-component>
121
+ <section-container v-else-if="isRangeSelector(filter.filter_type)">
122
+ <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
123
+ <grid-container>
124
+ <input-number
125
+ :placeholder="
126
+ filter.unit
127
+ ? $gettext('min') + ' (' + filter.unit + ')'
128
+ : $gettext('min')
129
+ "
130
+ :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
131
+ :value="filter.range.start"
132
+ @input-change="
133
+ onChange({
134
+ dataType: item.type,
135
+ value: $event,
136
+ choice: 'start',
137
+ field: filter.field
138
+ })
139
+ "
140
+ fontSize="13px"
141
+ inputHeight="36px"
142
+ :unitName="filter.unit"
143
+ />
144
+ <input-number
145
+ :placeholder="
146
+ filter.unit
147
+ ? $gettext('max') + ' (' + filter.unit + ')'
148
+ : $gettext('max')
149
+ "
150
+ :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
151
+ :value="filter.range.end"
152
+ @input-change="
153
+ onChange({
154
+ dataType: item.type,
155
+ value: $event,
156
+ choice: 'end',
157
+ field: filter.field
158
+ })
159
+ "
160
+ fontSize="13px"
161
+ inputHeight="36px"
162
+ :unitName="filter.unit"
163
+ />
164
+ </grid-container>
165
+ </section-container>
166
+ <section-container
167
+ v-else-if="isDateSelector(filter.filter_type)"
168
+ @click.stop
169
+ >
170
+ <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
171
+ <grid-container>
172
+ <date-picker-input
173
+ :placeholder="$gettext('Date from')"
174
+ :lang="getDatePickerLanguage()"
175
+ type="date"
176
+ :value="filter.range.start"
177
+ @change="
178
+ onChange({
179
+ dataType: item.type,
180
+ value: $event,
181
+ choice: 'start',
182
+ field: filter.field
183
+ })
184
+ "
185
+ @focus="onDatepickerFocus(filter.range)"
186
+ @close="onDatepickerBlur()"
187
+ format="YYYY-MM-DD"
188
+ valueType="format"
189
+ :disabled-date="disableFutureDates"
190
+ />
191
+ <date-picker-input
192
+ :placeholder="$gettext('Date to')"
193
+ :lang="getDatePickerLanguage()"
194
+ type="date"
195
+ :value="filter.range.end"
196
+ @change="
197
+ onChange({
198
+ dataType: item.type,
199
+ value: $event,
200
+ choice: 'end',
201
+ field: filter.field
202
+ })
203
+ "
204
+ @focus="onDatepickerFocus(filter.range)"
205
+ @close="onDatepickerBlur()"
206
+ format="YYYY-MM-DD"
207
+ valueType="format"
208
+ :disabled-date="disablePastDates"
209
+ />
210
+ </grid-container>
211
+ </section-container>
212
+ <select-component
213
+ v-else
214
+ selectWidth="100%"
215
+ selectHeight="36px"
216
+ fontSize="13px"
217
+ :label="filter.label"
218
+ alignItems="vertical"
219
+ :disabled="!filter.choices.length"
220
+ >
221
+ <template #selector="{ selectedValue }">
222
+ <option-title>
223
+ {{
224
+ getSelectedValue({
225
+ value: selectedValue,
226
+ options: filter.choices,
227
+ filter
228
+ })
229
+ }}
230
+ </option-title>
231
+ </template>
232
+ <template #dropdown>
233
+ <Option
234
+ v-for="(filterOption, filterIdx) in filter.choices"
235
+ :key="filterIdx + '_filterIdx'"
236
+ :value="filterOption.choice"
237
+ >{{ filterOption.text }}</Option
238
+ >
239
+ </template>
240
+ </select-component>
241
+ </row-wrapper>
242
+ </row-container>
243
+ </column-container>
244
+ </column-wrapper>
245
+ <button-container>
246
+ <main-button
247
+ v-if="buttonText.apply_view"
248
+ type="primary"
249
+ :text="buttonText.apply_view"
250
+ @click.native="$emit('on-apply-current-view')"
251
+ />
252
+ <main-button
253
+ type="secondary"
254
+ v-if="buttonText.save_view"
255
+ :text="buttonText.save_view"
256
+ @click.native="$emit('on-save-new-view')"
257
+ />
258
+ <main-button
259
+ type="cancel"
260
+ v-if="buttonText.cancel"
261
+ :text="buttonText.cancel"
262
+ @click.native="$emit('on-cancel-view')"
263
+ />
264
+ </button-container>
265
+ </container-wrapper>
266
+ </template>
267
+
268
+ <script>
269
+ import styled from 'vue-styled-components'
270
+ import DatePicker from 'vue2-datepicker'
271
+ import SelectComponent from '../inputs/select'
272
+ import Option from '../inputs/select/option'
273
+ import InputNumber from '../inputs/inputNumber'
274
+ import MainButton from '../buttons/mainButton'
275
+ import Checkbox from '../inputs/checkbox'
276
+ import draggable from 'vuedraggable'
277
+ import Icon from '../icon'
278
+ import DeleteIcon from '../deleteIcon'
279
+ import { datePickerLang } from '../../helpers/translateLang'
280
+ import theme from '@/assets/theme.js'
281
+ import 'vue2-datepicker/index.css'
282
+ import 'vue2-datepicker/locale/de'
283
+ import 'vue2-datepicker/locale/en'
284
+ import 'vue2-datepicker/locale/es'
285
+ import 'vue2-datepicker/locale/fr'
286
+ import 'vue2-datepicker/locale/it'
287
+
288
+ const ContainerWrapper = styled.div`
289
+ position: absolute;
290
+ margin-top: 4px;
291
+ background-color: ${(props) => props.theme.colors.white};
292
+ min-width: 100%;
293
+ width: max-content;
294
+ border: 1px solid ${(props) => props.theme.colors.grey4};
295
+ border-radius: 4px;
296
+ z-index: 9999;
297
+ font-size: 13px;
298
+ `
299
+
300
+ const ColAttrs = { numCols: Number, hasActiveView: Boolean }
301
+ const ColumnWrapper = styled('div', ColAttrs)`
302
+ display: grid;
303
+ grid-template-columns: repeat(${(props) => props.numCols}, auto);
304
+
305
+ ${({ hasActiveView, theme }) =>
306
+ hasActiveView &&
307
+ `
308
+ border-top: 1px solid ${theme.colors.grey4};
309
+ `}
310
+ `
311
+
312
+ const TitleAttrs = { showBorder: Boolean }
313
+ const ColumnTitle = styled('div', TitleAttrs)`
314
+ font-size: 14px;
315
+ font-weight: 700;
316
+ color: ${(props) => props.theme.colors.eturnityGrey};
317
+ padding: 10px 14px;
318
+ ${({ showBorder, theme }) =>
319
+ showBorder &&
320
+ `
321
+ border-right: 1px solid ${theme.colors.grey4};
322
+ `}
323
+ `
324
+
325
+ const ButtonContainer = styled.div`
326
+ display: flex;
327
+ gap: 10px;
328
+ padding: 15px;
329
+ `
330
+
331
+ const ColumnContainer = styled.div``
332
+
333
+ const DragContainer = styled.div`
334
+ cursor: grab;
335
+
336
+ &:active {
337
+ cursor: grabbing;
338
+ }
339
+ `
340
+
341
+ const RowContainer = styled('div', TitleAttrs)`
342
+ padding: 10px 14px;
343
+ min-width: 300px;
344
+
345
+ ${({ showBorder, theme }) =>
346
+ showBorder &&
347
+ `
348
+ border-right: 1px solid ${theme.colors.grey4};
349
+ `}
350
+
351
+ .ghost {
352
+ opacity: 0.5;
353
+ background-color: #e5fcb4;
354
+ }
355
+ `
356
+
357
+ const OptionTitle = styled.div`
358
+ cursor: pointer !important;
359
+ `
360
+
361
+ const CheckboxContainer = styled.div`
362
+ display: grid;
363
+ gap: 6px;
364
+ `
365
+
366
+ const CheckboxWrapper = styled.div`
367
+ display: grid;
368
+ grid-template-columns: auto 1fr;
369
+ gap: 16px;
370
+ padding: 2px;
371
+ align-items: center;
372
+ `
373
+
374
+ const DropdownCheckboxContainer = styled.div`
375
+ display: grid;
376
+ gap: 6px;
377
+ width: 100%;
378
+ padding: 12px 10px;
379
+ `
380
+
381
+ const RowWrapper = styled.div`
382
+ margin-bottom: 12px;
383
+ `
384
+
385
+ const DatePickerInput = styled(DatePicker)`
386
+ border: 1px solid ${(props) => props.theme.colors.grey4};
387
+ border-radius: 4px;
388
+ padding: 7px 12px 7px 7px;
389
+ width: 100%;
390
+ position: relative;
391
+
392
+ &.mx-datepicker {
393
+ width: 100% !important;
394
+ max-width: 100%;
395
+ height: 36px;
396
+ align-self: flex-end;
397
+ }
398
+
399
+ .mx-input-wrapper {
400
+ position: unset;
401
+
402
+ input {
403
+ border: none;
404
+ height: auto;
405
+ padding: 0;
406
+ font-size: 13px;
407
+ box-shadow: none;
408
+ color: #393939;
409
+ vertical-align: bottom;
410
+ }
411
+
412
+ .mx-input-append {
413
+ top: 1px;
414
+ }
415
+ }
416
+
417
+ .mx-input-append {
418
+ left: 0;
419
+ top: 5px;
420
+ height: auto;
421
+ cursor: pointer;
422
+ }
423
+ `
424
+
425
+ const LabelAttrs = {
426
+ marginTop: Boolean
427
+ }
428
+ const RowLabel = styled('div', LabelAttrs)`
429
+ font-weight: 700;
430
+ font-size: 13px;
431
+ margin-bottom: 8px;
432
+ margin-top: ${(props) => (props.marginTop ? '12px' : '0')};
433
+ `
434
+
435
+ const SectionContainer = styled.div``
436
+
437
+ const GridContainer = styled.div`
438
+ display: grid;
439
+ grid-template-columns: 1fr 1fr;
440
+ grid-gap: 12px;
441
+ `
442
+
443
+ const ViewContainerAttrs = { maxWidth: Number }
444
+ const ViewContainer = styled('div', ViewContainerAttrs)`
445
+ max-width: ${(props) =>
446
+ props.maxWidth && props.maxWidth > 300 ? props.maxWidth + 'ch' : '300px'};
447
+ `
448
+
449
+ const UpperContainer = styled.div`
450
+ display: grid;
451
+ grid-gap: 20px
452
+ grid-template-columns: 1fr 1fr;
453
+ padding: 10px 14px;
454
+ `
455
+
456
+ const ResetButton = styled.div`
457
+ display: inline-flex;
458
+ gap: 16px;
459
+ width: max-content;
460
+ margin-top: 20px;
461
+ align-self: center;
462
+ font-size: 13px;
463
+ color: ${(props) => props.theme.colors.blue};
464
+ cursor: pointer;
465
+ `
466
+
467
+ export default {
468
+ name: 'filter-settings',
469
+ components: {
470
+ ContainerWrapper,
471
+ ColumnWrapper,
472
+ ColumnTitle,
473
+ ColumnContainer,
474
+ SelectComponent,
475
+ RowContainer,
476
+ OptionTitle,
477
+ Option,
478
+ ButtonContainer,
479
+ MainButton,
480
+ CheckboxContainer,
481
+ CheckboxWrapper,
482
+ Checkbox,
483
+ RowWrapper,
484
+ DropdownCheckboxContainer,
485
+ draggable,
486
+ Icon,
487
+ DragContainer,
488
+ InputNumber,
489
+ DatePickerInput,
490
+ RowLabel,
491
+ SectionContainer,
492
+ GridContainer,
493
+ ViewContainer,
494
+ DeleteIcon,
495
+ UpperContainer,
496
+ ResetButton
497
+ },
498
+ props: {
499
+ filterData: {
500
+ required: true
501
+ },
502
+ hasActiveView: {
503
+ required: false
504
+ },
505
+ buttonText: {
506
+ required: true
507
+ // example:
508
+ // {
509
+ // 'save_new_view': '$gettext("save_new_view")',
510
+ // 'cancel': '$gettext("cancel")',
511
+ // 'save_view': '$gettext("save_view")'
512
+ // }
513
+ },
514
+ filterViews: {
515
+ required: true
516
+ },
517
+ activeLanguage: {
518
+ required: false
519
+ },
520
+ settingsTranslations: {
521
+ required: false
522
+ },
523
+ activeView: {
524
+ required: false
525
+ }
526
+ },
527
+ data() {
528
+ return {
529
+ selectedDates: null,
530
+ value1: null,
531
+ dateStart: null,
532
+ dateEnd: null
533
+ }
534
+ },
535
+ methods: {
536
+ onChange({ dataType, value, choice, field }) {
537
+ if (
538
+ dataType === 'columns' &&
539
+ this.isCheckboxDisabled &&
540
+ value === false
541
+ ) {
542
+ return
543
+ }
544
+ const data = { dataType, value, choice, field }
545
+ this.$emit('on-filter-change', data)
546
+ },
547
+ onDatepickerFocus(range) {
548
+ this.dateStart = range.start
549
+ this.dateEnd = range.end
550
+ this.$emit('on-prevent-close', true)
551
+ },
552
+ onDatepickerBlur() {
553
+ this.$emit('on-prevent-close', false)
554
+ },
555
+ disablePastDates(date) {
556
+ const dateString = this.dateStart
557
+ if (!dateString) {
558
+ return
559
+ }
560
+ const dateParts = dateString.split('-')
561
+
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])
565
+
566
+ const currentDate = new Date(year, month, day)
567
+ const selectedDate = new Date(date)
568
+
569
+ // Disable dates that are greater than or equal to the current date
570
+ return selectedDate <= currentDate
571
+ },
572
+ disableFutureDates(date) {
573
+ const dateString = this.dateEnd
574
+ if (!dateString) {
575
+ return
576
+ }
577
+ const dateParts = dateString.split('-')
578
+
579
+ const year = parseInt(dateParts[0])
580
+ const month = parseInt(dateParts[1]) - 1 // Subtract 1 since January is month 0
581
+ const day = parseInt(dateParts[2])
582
+
583
+ const currentDate = new Date(year, month, day)
584
+ const selectedDate = new Date(date)
585
+
586
+ // Disable dates that are greater than or equal to the current date
587
+ return selectedDate >= currentDate
588
+ },
589
+ getDatePickerLanguage() {
590
+ return datePickerLang(this.activeLanguage)
591
+ },
592
+ onDragChange({ data }) {
593
+ this.$emit('on-drag-change', data)
594
+ },
595
+ modifyDragItem(dataTransfer) {
596
+ const isSafari = /^((?!chrome|android).)*safari/i.test(
597
+ navigator.userAgent
598
+ )
599
+ // prevents the dragged element from dragging the whole row as a "ghost"
600
+ // Safari fix because this does not work on Safari
601
+ let img = new Image()
602
+ if (!isSafari) {
603
+ dataTransfer.setDragImage(img, 0, 0)
604
+ } else {
605
+ img.src =
606
+ 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
607
+ dataTransfer.setDragImage(img, 0, 0)
608
+ }
609
+ },
610
+ getSelectedValue({ value, options, filter }) {
611
+ const foundItem = options.find((item) => item.choice === value)
612
+ return foundItem ? foundItem.text : value ? value : filter.selectedText
613
+ },
614
+ isMultipleSelector(type) {
615
+ return type === 'multi_select_integer' || type === 'multi_select_string'
616
+ },
617
+ isRangeSelector(type) {
618
+ return type === 'integer_range' || type === 'number_range'
619
+ },
620
+ isIntegerRange(type) {
621
+ return type === 'integer_range'
622
+ },
623
+ isDateSelector(type) {
624
+ return type === 'datetime'
625
+ }
626
+ },
627
+ computed: {
628
+ isCheckboxDisabled() {
629
+ // if only 1 item left, disable checkbox
630
+ let isDisabled = false
631
+ let columnsData = this.filterData.filter(
632
+ (item) => item.type === 'columns'
633
+ )
634
+ if (columnsData.length) {
635
+ columnsData = columnsData[0]
636
+ const filteredColumns = columnsData.dataOptions.filter(
637
+ (item) => item.selected
638
+ )
639
+ if (filteredColumns.length === 1) {
640
+ isDisabled = true
641
+ }
642
+ }
643
+ return isDisabled
644
+ },
645
+ theme() {
646
+ return theme
647
+ }
648
+ }
649
+ }
650
+ </script>