@eturnity/eturnity_reusable_components 7.30.3-EPDM-8441.0 → 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 (323) hide show
  1. package/.eslintrc.js +184 -0
  2. package/.prettierrc +9 -7
  3. package/.storybook/main.js +8 -8
  4. package/.storybook/preview.js +46 -46
  5. package/README.md +29 -29
  6. package/babel.config.js +5 -5
  7. package/package.json +50 -62
  8. package/postcss.config.js +6 -6
  9. package/src/App.vue +110 -109
  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/bexio.svg +4 -4
  51. package/src/assets/svgIcons/bold.svg +3 -3
  52. package/src/assets/svgIcons/bom.svg +3 -3
  53. package/src/assets/svgIcons/bom_generation.svg +10 -10
  54. package/src/assets/svgIcons/bookmaker.svg +3 -3
  55. package/src/assets/svgIcons/bubble.svg +3 -3
  56. package/src/assets/svgIcons/bug.svg +5 -5
  57. package/src/assets/svgIcons/bullet_list.svg +8 -8
  58. package/src/assets/svgIcons/calendar.svg +7 -7
  59. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  60. package/src/assets/svgIcons/call.svg +3 -3
  61. package/src/assets/svgIcons/camera.svg +3 -3
  62. package/src/assets/svgIcons/car.svg +3 -3
  63. package/src/assets/svgIcons/cart.svg +3 -3
  64. package/src/assets/svgIcons/charger_icon_white.svg +44 -44
  65. package/src/assets/svgIcons/checkbox.svg +3 -3
  66. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  67. package/src/assets/svgIcons/clickable_info.svg +4 -4
  68. package/src/assets/svgIcons/clip.svg +3 -3
  69. package/src/assets/svgIcons/clock.svg +17 -17
  70. package/src/assets/svgIcons/clock_full.svg +3 -3
  71. package/src/assets/svgIcons/close_for_modals,_tool_tips.svg +4 -4
  72. package/src/assets/svgIcons/co_branding.svg +5 -5
  73. package/src/assets/svgIcons/collapse.svg +4 -4
  74. package/src/assets/svgIcons/collections.svg +3 -3
  75. package/src/assets/svgIcons/component_library.svg +7 -7
  76. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  77. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  78. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  79. package/src/assets/svgIcons/context_menu.svg +5 -5
  80. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  81. package/src/assets/svgIcons/cross.svg +4 -4
  82. package/src/assets/svgIcons/current_variant.svg +4 -4
  83. package/src/assets/svgIcons/dashboard.svg +3 -3
  84. package/src/assets/svgIcons/data_transfer.svg +3 -3
  85. package/src/assets/svgIcons/deadline.svg +4 -4
  86. package/src/assets/svgIcons/deal_flow.svg +5 -5
  87. package/src/assets/svgIcons/delete.svg +4 -4
  88. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  89. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  90. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  91. package/src/assets/svgIcons/direction_active.svg +5 -5
  92. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  93. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  94. package/src/assets/svgIcons/dislike.svg +3 -3
  95. package/src/assets/svgIcons/distance_tool.svg +8 -8
  96. package/src/assets/svgIcons/distances_active.svg +9 -9
  97. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  98. package/src/assets/svgIcons/distort_tool.svg +10 -10
  99. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  100. package/src/assets/svgIcons/document.svg +3 -3
  101. package/src/assets/svgIcons/documents.svg +4 -4
  102. package/src/assets/svgIcons/downarrow.svg +3 -3
  103. package/src/assets/svgIcons/download.svg +4 -4
  104. package/src/assets/svgIcons/drag_icon.svg +8 -8
  105. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  106. package/src/assets/svgIcons/draw_tool.svg +3 -3
  107. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  108. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  109. package/src/assets/svgIcons/duplicate.svg +4 -4
  110. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  111. package/src/assets/svgIcons/e_signature.svg +5 -5
  112. package/src/assets/svgIcons/edit_button.svg +3 -3
  113. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  114. package/src/assets/svgIcons/email.svg +3 -3
  115. package/src/assets/svgIcons/ems-1.svg +3 -3
  116. package/src/assets/svgIcons/ems.svg +3 -3
  117. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  118. package/src/assets/svgIcons/erase.svg +4 -4
  119. package/src/assets/svgIcons/external_icon.svg +5 -5
  120. package/src/assets/svgIcons/fav_icon.svg +4 -4
  121. package/src/assets/svgIcons/finance.svg +3 -3
  122. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  123. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  124. package/src/assets/svgIcons/financing_for_pv.svg +6 -6
  125. package/src/assets/svgIcons/finish-1.svg +4 -4
  126. package/src/assets/svgIcons/finish.svg +3 -3
  127. package/src/assets/svgIcons/flatten.svg +11 -11
  128. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  129. package/src/assets/svgIcons/folder.svg +3 -3
  130. package/src/assets/svgIcons/free_technology.svg +5 -5
  131. package/src/assets/svgIcons/handle.svg +5 -5
  132. package/src/assets/svgIcons/heat_calc.svg +7 -7
  133. package/src/assets/svgIcons/height_equalize.svg +3 -3
  134. package/src/assets/svgIcons/height_snap.svg +3 -3
  135. package/src/assets/svgIcons/house.svg +3 -3
  136. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  137. package/src/assets/svgIcons/house_3d.svg +7 -7
  138. package/src/assets/svgIcons/inclination.svg +2 -2
  139. package/src/assets/svgIcons/info.svg +3 -3
  140. package/src/assets/svgIcons/initial_situation.svg +3 -3
  141. package/src/assets/svgIcons/integrations.svg +3 -3
  142. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  143. package/src/assets/svgIcons/intro-tour.svg +3 -3
  144. package/src/assets/svgIcons/inverter-1.svg +5 -5
  145. package/src/assets/svgIcons/inverter.svg +3 -3
  146. package/src/assets/svgIcons/italic.svg +3 -3
  147. package/src/assets/svgIcons/key.svg +3 -3
  148. package/src/assets/svgIcons/layers_close.svg +4 -4
  149. package/src/assets/svgIcons/layers_open.svg +4 -4
  150. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  151. package/src/assets/svgIcons/lead_provider.svg +4 -4
  152. package/src/assets/svgIcons/length_2d.svg +2 -2
  153. package/src/assets/svgIcons/length_3d.svg +4 -4
  154. package/src/assets/svgIcons/length_calculator.svg +2 -2
  155. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  156. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  157. package/src/assets/svgIcons/light_bulb.svg +3 -3
  158. package/src/assets/svgIcons/like.svg +3 -3
  159. package/src/assets/svgIcons/line_graph.svg +3 -3
  160. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  161. package/src/assets/svgIcons/location.svg +3 -3
  162. package/src/assets/svgIcons/lock.svg +3 -3
  163. package/src/assets/svgIcons/logout.svg +3 -3
  164. package/src/assets/svgIcons/loop.svg +3 -3
  165. package/src/assets/svgIcons/lunch.svg +4 -4
  166. package/src/assets/svgIcons/magic_tool.svg +6 -6
  167. package/src/assets/svgIcons/map_icon.svg +5 -5
  168. package/src/assets/svgIcons/map_settings.svg +3 -3
  169. package/src/assets/svgIcons/margin_tool.svg +4 -4
  170. package/src/assets/svgIcons/meeting.svg +6 -6
  171. package/src/assets/svgIcons/move_copy.svg +4 -4
  172. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  173. package/src/assets/svgIcons/next.svg +4 -4
  174. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  175. package/src/assets/svgIcons/numbered_list.svg +6 -6
  176. package/src/assets/svgIcons/obstacle_tool.svg +9 -9
  177. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  178. package/src/assets/svgIcons/offset_tool.svg +8 -8
  179. package/src/assets/svgIcons/outline_tool.svg +11 -11
  180. package/src/assets/svgIcons/pan_tool.svg +12 -12
  181. package/src/assets/svgIcons/panels_tool.svg +8 -8
  182. package/src/assets/svgIcons/pen_tool.svg +4 -4
  183. package/src/assets/svgIcons/picker_tool.svg +4 -4
  184. package/src/assets/svgIcons/picture.svg +3 -3
  185. package/src/assets/svgIcons/pin.svg +5 -5
  186. package/src/assets/svgIcons/presentation.svg +3 -3
  187. package/src/assets/svgIcons/previous.svg +4 -4
  188. package/src/assets/svgIcons/profile-1.svg +4 -4
  189. package/src/assets/svgIcons/profile.svg +4 -4
  190. package/src/assets/svgIcons/profitability.svg +3 -3
  191. package/src/assets/svgIcons/project_analysis.svg +4 -4
  192. package/src/assets/svgIcons/project_settings.svg +4 -4
  193. package/src/assets/svgIcons/pv.svg +3 -3
  194. package/src/assets/svgIcons/quotations.svg +6 -6
  195. package/src/assets/svgIcons/redo.svg +6 -6
  196. package/src/assets/svgIcons/resizer.svg +5 -5
  197. package/src/assets/svgIcons/roof_layer.svg +3 -3
  198. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  199. package/src/assets/svgIcons/rotate_view.svg +5 -5
  200. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  201. package/src/assets/svgIcons/run_simulation.svg +3 -3
  202. package/src/assets/svgIcons/save.svg +3 -3
  203. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  204. package/src/assets/svgIcons/search.svg +3 -3
  205. package/src/assets/svgIcons/security.svg +3 -3
  206. package/src/assets/svgIcons/settings.svg +3 -3
  207. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  208. package/src/assets/svgIcons/smartphone.svg +4 -4
  209. package/src/assets/svgIcons/solar_calc.svg +13 -13
  210. package/src/assets/svgIcons/sorting.svg +4 -4
  211. package/src/assets/svgIcons/split.svg +12 -12
  212. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  213. package/src/assets/svgIcons/strikethrough.svg +4 -4
  214. package/src/assets/svgIcons/subscriptions.svg +3 -3
  215. package/src/assets/svgIcons/subsidies-1.svg +5 -5
  216. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  217. package/src/assets/svgIcons/subsidies.svg +3 -3
  218. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  219. package/src/assets/svgIcons/suitcase.svg +3 -3
  220. package/src/assets/svgIcons/summer.svg +3 -3
  221. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  222. package/src/assets/svgIcons/transfer.svg +4 -4
  223. package/src/assets/svgIcons/trim_tool.svg +4 -4
  224. package/src/assets/svgIcons/truck.svg +3 -3
  225. package/src/assets/svgIcons/underlined.svg +3 -3
  226. package/src/assets/svgIcons/undo.svg +6 -6
  227. package/src/assets/svgIcons/uparrow.svg +3 -3
  228. package/src/assets/svgIcons/update.svg +3 -3
  229. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  230. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  231. package/src/assets/svgIcons/upload_image.svg +8 -8
  232. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  233. package/src/assets/svgIcons/variants.svg +6 -6
  234. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  235. package/src/assets/svgIcons/virtual_storage.svg +4 -4
  236. package/src/assets/svgIcons/warning.svg +4 -4
  237. package/src/assets/svgIcons/way.svg +5 -5
  238. package/src/assets/svgIcons/wifi.svg +3 -3
  239. package/src/assets/svgIcons/winter.svg +3 -3
  240. package/src/assets/svgIcons/workflow_template.svg +11 -11
  241. package/src/assets/theme.js +41 -41
  242. package/src/components/addNewButton/AddNewButton.stories.js +24 -24
  243. package/src/components/addNewButton/index.vue +61 -64
  244. package/src/components/banner/actionBanner/index.vue +64 -65
  245. package/src/components/banner/banner/banner.stories.js +31 -31
  246. package/src/components/banner/banner/index.vue +188 -188
  247. package/src/components/banner/infoBanner/index.vue +57 -69
  248. package/src/components/buttons/buttonIcon/index.vue +145 -142
  249. package/src/components/buttons/closeButton/CloseButton.stories.js +29 -29
  250. package/src/components/buttons/closeButton/index.vue +61 -61
  251. package/src/components/buttons/mainButton/index.vue +140 -140
  252. package/src/components/card/index.vue +96 -96
  253. package/src/components/collapsableInfoText/index.vue +127 -125
  254. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  255. package/src/components/deleteIcon/index.vue +78 -78
  256. package/src/components/draggableInputHandle/index.vue +46 -46
  257. package/src/components/dropdown/Dropdown.stories.js +53 -54
  258. package/src/components/dropdown/index.vue +138 -138
  259. package/src/components/errorMessage/index.vue +64 -64
  260. package/src/components/filter/filterSettings.vue +639 -633
  261. package/src/components/filter/index.vue +154 -154
  262. package/src/components/filter/parentDropdown.vue +91 -91
  263. package/src/components/icon/Icons.stories.js +41 -41
  264. package/src/components/icon/iconCache.js +23 -23
  265. package/src/components/icon/iconCollection.vue +68 -68
  266. package/src/components/icon/index.vue +140 -140
  267. package/src/components/iconWrapper/index.vue +179 -179
  268. package/src/components/infoCard/index.vue +40 -42
  269. package/src/components/infoText/index.vue +170 -165
  270. package/src/components/inputs/checkbox/Checkbox.stories.js +57 -57
  271. package/src/components/inputs/checkbox/index.vue +224 -214
  272. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  273. package/src/components/inputs/inputNumber/index.vue +784 -784
  274. package/src/components/inputs/inputNumberQuestion/index.vue +218 -215
  275. package/src/components/inputs/inputText/InputText.stories.js +75 -75
  276. package/src/components/inputs/inputText/index.vue +376 -375
  277. package/src/components/inputs/radioButton/RadioButton.stories.js +58 -58
  278. package/src/components/inputs/radioButton/index.vue +273 -270
  279. package/src/components/inputs/searchInput/SearchInput.stories.js +40 -40
  280. package/src/components/inputs/searchInput/index.vue +151 -150
  281. package/src/components/inputs/select/index.vue +907 -1028
  282. package/src/components/inputs/select/option/index.vue +148 -139
  283. package/src/components/inputs/select/select.stories.js +58 -59
  284. package/src/components/inputs/slider/index.vue +126 -126
  285. package/src/components/inputs/switchField/index.vue +254 -256
  286. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  287. package/src/components/inputs/textAreaInput/index.vue +198 -200
  288. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  289. package/src/components/inputs/toggle/index.vue +285 -288
  290. package/src/components/label/index.vue +99 -99
  291. package/src/components/markerItem/index.vue +88 -86
  292. package/src/components/modals/actionModal/index.vue +64 -64
  293. package/src/components/modals/infoModal/index.vue +52 -49
  294. package/src/components/modals/modal/index.vue +188 -188
  295. package/src/components/modals/modal/modal.stories.js +31 -31
  296. package/src/components/navigationTabs/index.vue +114 -112
  297. package/src/components/pageSubtitle/index.vue +67 -61
  298. package/src/components/pageTitle/index.vue +68 -68
  299. package/src/components/pagination/index.vue +148 -145
  300. package/src/components/progressBar/index.vue +125 -125
  301. package/src/components/projectMarker/index.vue +300 -298
  302. package/src/components/rangeSlider/Slider.vue +573 -547
  303. package/src/components/rangeSlider/index.vue +517 -517
  304. package/src/components/rangeSlider/utils/dom.js +49 -49
  305. package/src/components/rangeSlider/utils/fns.js +26 -26
  306. package/src/components/selectedOptions/index.vue +145 -145
  307. package/src/components/sideMenu/index.vue +270 -270
  308. package/src/components/spinner/index.vue +68 -68
  309. package/src/components/tableDropdown/index.vue +638 -638
  310. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  311. package/src/components/tables/mainTable/index.vue +510 -493
  312. package/src/components/tables/viewTable/index.vue +195 -195
  313. package/src/components/tabsHeader/index.vue +83 -83
  314. package/src/components/threeDots/index.vue +413 -407
  315. package/src/components/videoThumbnail/index.vue +103 -103
  316. package/src/components/videoThumbnail/videoThumbnail.stories.js +33 -35
  317. package/src/helpers/currencyMapping.js +28 -28
  318. package/src/helpers/numberConverter.js +103 -103
  319. package/src/helpers/translateLang.js +128 -128
  320. package/src/main.js +6 -6
  321. package/src/mixins/inputValidations.js +97 -97
  322. package/public/favicon.ico +0 -0
  323. package/public/index.html +0 -17
@@ -1,633 +1,639 @@
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"
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="$emit('on-view-select', item)"
23
- :value="item.name"
24
- >{{ item.name }}
25
- <delete-icon @click.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
- itemKey="choice"
59
- >
60
- <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
66
- :label="column.text"
67
- :isChecked="column.selected"
68
- @on-event-handler="
69
- onChange({
70
- dataType: item.type,
71
- value: $event,
72
- choice: column.choice
73
- })
74
- "
75
- size="small"
76
- :isDisabled="column.selected && isCheckboxDisabled"
77
- />
78
- </checkbox-wrapper>
79
- </template>
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
- :isSearchable="filter.choices.length > 7"
96
- alignItems="vertical"
97
- :disabled="!filter.choices.length"
98
- :minOptionLength="1"
99
- >
100
- <template #selector>
101
- <option-title> {{ filter.selectedText }} </option-title>
102
- </template>
103
- <template #dropdown>
104
- <dropdown-checkbox-container
105
- v-for="(filterOption, optionIdx) in filter.choices"
106
- :key="optionIdx + 'optionIdx'"
107
- @click.stop
108
- >
109
- <checkbox
110
- :label="filterOption.text"
111
- :isChecked="filterOption.selected"
112
- @on-event-handler="
113
- onChange({
114
- dataType: item.type,
115
- value: $event,
116
- choice: filterOption.choice,
117
- field: filter.field
118
- })
119
- "
120
- size="small"
121
- />
122
- </dropdown-checkbox-container>
123
- </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
129
- :placeholder="
130
- filter.unit
131
- ? $gettext('min') + ' (' + filter.unit + ')'
132
- : $gettext('min')
133
- "
134
- :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
135
- :value="filter.range.start"
136
- @input-change="
137
- onChange({
138
- dataType: item.type,
139
- value: $event,
140
- choice: 'start',
141
- field: filter.field
142
- })
143
- "
144
- fontSize="13px"
145
- inputHeight="36px"
146
- :unitName="filter.unit"
147
- />
148
- <input-number
149
- :placeholder="
150
- filter.unit
151
- ? $gettext('max') + ' (' + filter.unit + ')'
152
- : $gettext('max')
153
- "
154
- :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
155
- :value="filter.range.end"
156
- @input-change="
157
- onChange({
158
- dataType: item.type,
159
- value: $event,
160
- choice: 'end',
161
- field: filter.field
162
- })
163
- "
164
- fontSize="13px"
165
- inputHeight="36px"
166
- :unitName="filter.unit"
167
- />
168
- </grid-container>
169
- </section-container>
170
- <section-container
171
- v-else-if="isDateSelector(filter.filter_type)"
172
- @click.stop
173
- >
174
- <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
175
- <grid-container>
176
- <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
- :auto-apply="true"
184
- :disabled-dates="disableFutureDates"
185
- format="yyyy-MM-dd"
186
- model-type="format"
187
- @focus="onDatepickerFocus(filter.range)"
188
- @close="onDatepickerBlur()"
189
- @update:model-value="
190
- onChange({
191
- dataType: item.type,
192
- value: $event,
193
- choice: 'start',
194
- field: filter.field
195
- })
196
- "
197
- />
198
- <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
- :auto-apply="true"
206
- :disabled-dates="disablePastDates"
207
- format="yyyy-MM-dd"
208
- model-type="format"
209
- @focus="onDatepickerFocus(filter.range)"
210
- @close="onDatepickerBlur()"
211
- @update:model-value="
212
- onChange({
213
- dataType: item.type,
214
- value: $event,
215
- choice: 'end',
216
- field: filter.field
217
- })
218
- "
219
- />
220
- </grid-container>
221
- </section-container>
222
- <select-component
223
- v-else
224
- selectWidth="100%"
225
- selectHeight="36px"
226
- fontSize="13px"
227
- :label="filter.label"
228
- alignItems="vertical"
229
- :isSearchable="filter.choices.length > 7"
230
- :disabled="!filter.choices.length"
231
- >
232
- <template #selector="{ selectedValue }">
233
- <option-title>
234
- {{
235
- getSelectedValue({
236
- value: selectedValue,
237
- options: filter.choices,
238
- filter
239
- })
240
- }}
241
- </option-title>
242
- </template>
243
- <template #dropdown>
244
- <Option
245
- v-for="(filterOption, filterIdx) in filter.choices"
246
- :key="filterIdx + '_filterIdx'"
247
- :value="filterOption.choice"
248
- >{{ filterOption.text }}</Option
249
- >
250
- </template>
251
- </select-component>
252
- </row-wrapper>
253
- </row-container>
254
- </column-container>
255
- </column-wrapper>
256
- <button-container>
257
- <main-button
258
- v-if="buttonText.apply_view"
259
- type="primary"
260
- :text="buttonText.apply_view"
261
- @click="$emit('on-apply-current-view')"
262
- />
263
- <main-button
264
- type="secondary"
265
- v-if="buttonText.save_view"
266
- :text="buttonText.save_view"
267
- @click="$emit('on-save-new-view')"
268
- />
269
- <main-button
270
- type="cancel"
271
- v-if="buttonText.cancel"
272
- :text="buttonText.cancel"
273
- @click="$emit('on-cancel-view')"
274
- />
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" />
278
- <div>{{ $gettext('reset_filters') }}</div>
279
- </reset-button>
280
- </reset-container>
281
- </button-container>
282
- </container-wrapper>
283
- </template>
284
-
285
- <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'
298
-
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: 99999;
308
- font-size: 13px;
309
- `
310
-
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);
315
-
316
- ${({ hasActiveView, theme }) =>
317
- hasActiveView &&
318
- `
319
- border-top: 1px solid ${theme.colors.grey4};
320
- `}
321
- `
322
-
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
- `
332
- border-right: 1px solid ${theme.colors.grey4};
333
- `}
334
- `
335
-
336
- const ButtonContainer = styled.div`
337
- display: flex;
338
- gap: 10px;
339
- padding: 15px;
340
- `
341
-
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
- `
351
-
352
- const ColumnContainer = styled.div``
353
-
354
- const DragContainer = styled.div`
355
- cursor: grab;
356
-
357
- &:active {
358
- cursor: grabbing;
359
- }
360
- `
361
-
362
- const RowContainer = styled('div', TitleAttrs)`
363
- padding: 10px 14px;
364
- min-width: 300px;
365
-
366
- ${({ showBorder, theme }) =>
367
- showBorder &&
368
- `
369
- border-right: 1px solid ${theme.colors.grey4};
370
- `}
371
-
372
- .ghost {
373
- opacity: 0.5;
374
- background-color: #e5fcb4;
375
- }
376
- `
377
-
378
- const OptionTitle = styled.div`
379
- cursor: pointer !important;
380
- `
381
-
382
- const CheckboxContainer = styled.div`
383
- display: grid;
384
- gap: 6px;
385
- `
386
-
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
- `
394
-
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
- `
402
-
403
- const RowWrapper = styled.div`
404
- margin-bottom: 12px;
405
- `
406
-
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
- `
416
-
417
- const SectionContainer = styled.div``
418
-
419
- const GridContainer = styled.div`
420
- display: grid;
421
- grid-template-columns: 1fr 1fr;
422
- grid-gap: 12px;
423
- `
424
-
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
- `
430
-
431
- const UpperContainer = styled.div`
432
- display: grid;
433
- grid-gap: 20px
434
- grid-template-columns: 1fr 1fr;
435
- padding: 10px 14px;
436
- `
437
-
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
- `
448
-
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
499
- },
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
526
- }
527
- const data = { dataType, value, choice, field }
528
- this.$emit('on-filter-change', data)
529
- },
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)
537
- },
538
- disablePastDates(date) {
539
- const dateString = this.dateStart
540
- if (!dateString) {
541
- return
542
- }
543
- const dateParts = dateString.split('-')
544
-
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])
548
-
549
- const currentDate = new Date(year, month, day)
550
- const selectedDate = new Date(date)
551
-
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('-')
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
- 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
621
- )
622
- if (filteredColumns.length === 1) {
623
- isDisabled = true
624
- }
625
- }
626
- return isDisabled
627
- },
628
- theme() {
629
- return theme
630
- }
631
- }
632
- }
633
- </script>
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%"
11
+ @click.stop
12
+ >
13
+ <template #selector>
14
+ <OptionTitle>
15
+ {{ activeView }}
16
+ </OptionTitle>
17
+ </template>
18
+ <template #dropdown>
19
+ <Option
20
+ v-for="(item, idx) in filterViews"
21
+ :key="idx + '_view'"
22
+ :value="item.name"
23
+ @click="$emit('on-view-select', item)"
24
+ >
25
+ {{ item.name }}
26
+ <DeleteIcon @click.stop="$emit('on-view-delete', item)" />
27
+ </Option>
28
+ </template>
29
+ </SelectComponent>
30
+ </ViewContainer>
31
+ <ResetButton @click="$emit('on-reset-filters')">
32
+ <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
33
+ <div>{{ $gettext('reset_filters') }}</div>
34
+ </ResetButton>
35
+ </UpperContainer>
36
+ <ColumnWrapper
37
+ :has-active-view="!!filterViews && !!filterViews.length"
38
+ :num-cols="filterData.length"
39
+ >
40
+ <ColumnContainer
41
+ v-for="(item, idx) in filterData"
42
+ :key="idx + '_filterdata'"
43
+ >
44
+ <ColumnTitle
45
+ :data-id="`filter_label_project_view_file_manager_${item.type}`"
46
+ :show-border="idx + 1 !== filterData.length"
47
+ >
48
+ {{ item.columnName }}
49
+ </ColumnTitle>
50
+ <RowContainer v-if="item.type === 'columns'">
51
+ <CheckboxContainer>
52
+ <Draggable
53
+ v-model="item.dataOptions"
54
+ ghost-class="ghost"
55
+ handle=".drag-container"
56
+ item-key="choice"
57
+ :set-data="modifyDragItem"
58
+ style="display: contents"
59
+ @change="onDragChange({ data: item.dataOptions })"
60
+ >
61
+ <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"
69
+ :label="column.text"
70
+ size="small"
71
+ @on-event-handler="
72
+ onChange({
73
+ dataType: item.type,
74
+ value: $event,
75
+ choice: column.choice,
76
+ })
77
+ "
78
+ />
79
+ </CheckboxWrapper>
80
+ </template>
81
+ </Draggable>
82
+ </CheckboxContainer>
83
+ </RowContainer>
84
+ <RowContainer v-if="item.type === 'filter'" show-border>
85
+ <RowWrapper
86
+ v-for="(filter, index) in item.dataOptions"
87
+ :key="index + '_field'"
88
+ >
89
+ <SelectComponent
90
+ 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"
95
+ :label="filter.label"
96
+ :label-data-id="filter.dataId"
97
+ :min-option-length="1"
98
+ select-height="36px"
99
+ select-width="100%"
100
+ >
101
+ <template #selector>
102
+ <OptionTitle> {{ filter.selectedText }} </OptionTitle>
103
+ </template>
104
+ <template #dropdown>
105
+ <DropdownCheckboxContainer
106
+ v-for="(filterOption, optionIdx) in filter.choices"
107
+ :key="optionIdx + 'optionIdx'"
108
+ @click.stop
109
+ >
110
+ <Checkbox
111
+ :is-checked="filterOption.selected"
112
+ :label="filterOption.text"
113
+ size="small"
114
+ @on-event-handler="
115
+ onChange({
116
+ dataType: item.type,
117
+ value: $event,
118
+ choice: filterOption.choice,
119
+ field: filter.field,
120
+ })
121
+ "
122
+ />
123
+ </DropdownCheckboxContainer>
124
+ </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"
135
+ :placeholder="
136
+ filter.unit
137
+ ? $gettext('min') + ' (' + filter.unit + ')'
138
+ : $gettext('min')
139
+ "
140
+ :unit-name="filter.unit"
141
+ :value="filter.range.start"
142
+ @input-change="
143
+ onChange({
144
+ dataType: item.type,
145
+ value: $event,
146
+ choice: 'start',
147
+ field: filter.field,
148
+ })
149
+ "
150
+ />
151
+ <InputNumber
152
+ font-size="13px"
153
+ input-height="36px"
154
+ :number-precision="isIntegerRange(filter.filter_type) ? 0 : 2"
155
+ :placeholder="
156
+ filter.unit
157
+ ? $gettext('max') + ' (' + filter.unit + ')'
158
+ : $gettext('max')
159
+ "
160
+ :unit-name="filter.unit"
161
+ :value="filter.range.end"
162
+ @input-change="
163
+ onChange({
164
+ dataType: item.type,
165
+ value: $event,
166
+ choice: 'end',
167
+ field: filter.field,
168
+ })
169
+ "
170
+ />
171
+ </GridContainer>
172
+ </SectionContainer>
173
+ <SectionContainer
174
+ v-else-if="isDateSelector(filter.filter_type)"
175
+ @click.stop
176
+ >
177
+ <RowLabel :data-id="filter.dataId">
178
+ {{ filter.label }}
179
+ </RowLabel>
180
+ <GridContainer>
181
+ <VueDatePicker
182
+ :auto-apply="true"
183
+ :clearable="true"
184
+ :disabled-dates="disableFutureDates"
185
+ :enable-time-picker="false"
186
+ format="yyyy-MM-dd"
187
+ :locale="getDatePickerLanguage()"
188
+ model-type="format"
189
+ :model-value="filter.range.start"
190
+ :placeholder="$gettext('Date from')"
191
+ text-input
192
+ @close="onDatepickerBlur()"
193
+ @focus="onDatepickerFocus(filter.range)"
194
+ @update:model-value="
195
+ onChange({
196
+ dataType: item.type,
197
+ value: $event,
198
+ choice: 'start',
199
+ field: filter.field,
200
+ })
201
+ "
202
+ />
203
+ <VueDatePicker
204
+ :auto-apply="true"
205
+ :clearable="true"
206
+ :disabled-dates="disablePastDates"
207
+ :enable-time-picker="false"
208
+ format="yyyy-MM-dd"
209
+ :locale="getDatePickerLanguage()"
210
+ model-type="format"
211
+ :model-value="filter.range.end"
212
+ :placeholder="$gettext('Date to')"
213
+ text-input
214
+ @close="onDatepickerBlur()"
215
+ @focus="onDatepickerFocus(filter.range)"
216
+ @update:model-value="
217
+ onChange({
218
+ dataType: item.type,
219
+ value: $event,
220
+ choice: 'end',
221
+ field: filter.field,
222
+ })
223
+ "
224
+ />
225
+ </GridContainer>
226
+ </SectionContainer>
227
+ <SelectComponent
228
+ v-else
229
+ align-items="vertical"
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%"
236
+ >
237
+ <template #selector="{ selectedValue }">
238
+ <OptionTitle>
239
+ {{
240
+ getSelectedValue({
241
+ value: selectedValue,
242
+ options: filter.choices,
243
+ filter,
244
+ })
245
+ }}
246
+ </OptionTitle>
247
+ </template>
248
+ <template #dropdown>
249
+ <Option
250
+ v-for="(filterOption, filterIdx) in filter.choices"
251
+ :key="filterIdx + '_filterIdx'"
252
+ :value="filterOption.choice"
253
+ >
254
+ {{ filterOption.text }}
255
+ </Option>
256
+ </template>
257
+ </SelectComponent>
258
+ </RowWrapper>
259
+ </RowContainer>
260
+ </ColumnContainer>
261
+ </ColumnWrapper>
262
+ <ButtonContainer>
263
+ <MainButton
264
+ v-if="buttonText.apply_view"
265
+ :text="buttonText.apply_view"
266
+ type="primary"
267
+ @click="$emit('on-apply-current-view')"
268
+ />
269
+ <MainButton
270
+ v-if="buttonText.save_view"
271
+ :text="buttonText.save_view"
272
+ type="secondary"
273
+ @click="$emit('on-save-new-view')"
274
+ />
275
+ <MainButton
276
+ v-if="buttonText.cancel"
277
+ :text="buttonText.cancel"
278
+ type="cancel"
279
+ @click="$emit('on-cancel-view')"
280
+ />
281
+ <ResetContainer v-if="!filterViews || !filterViews.length">
282
+ <ResetButton @click="$emit('on-reset-filters')">
283
+ <Icon :color="theme.colors.blue" :name="'update'" size="14px" />
284
+ <div>{{ $gettext('reset_filters') }}</div>
285
+ </ResetButton>
286
+ </ResetContainer>
287
+ </ButtonContainer>
288
+ </ContainerWrapper>
289
+ </template>
290
+
291
+ <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'
304
+
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: 99999;
314
+ font-size: 13px;
315
+ `
316
+
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);
321
+
322
+ ${({ hasActiveView, theme }) =>
323
+ hasActiveView &&
324
+ `
325
+ border-top: 1px solid ${theme.colors.grey4};
326
+ `}
327
+ `
328
+
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
+ `
338
+ border-right: 1px solid ${theme.colors.grey4};
339
+ `}
340
+ `
341
+
342
+ const ButtonContainer = styled.div`
343
+ display: flex;
344
+ gap: 10px;
345
+ padding: 15px;
346
+ `
347
+
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
+ `
357
+
358
+ const ColumnContainer = styled.div``
359
+
360
+ const DragContainer = styled.div`
361
+ cursor: grab;
362
+
363
+ &:active {
364
+ cursor: grabbing;
365
+ }
366
+ `
367
+
368
+ const RowContainer = styled('div', TitleAttrs)`
369
+ padding: 10px 14px;
370
+ min-width: 300px;
371
+
372
+ ${({ showBorder, theme }) =>
373
+ showBorder &&
374
+ `
375
+ border-right: 1px solid ${theme.colors.grey4};
376
+ `}
377
+
378
+ .ghost {
379
+ opacity: 0.5;
380
+ background-color: #e5fcb4;
381
+ }
382
+ `
383
+
384
+ const OptionTitle = styled.div`
385
+ cursor: pointer !important;
386
+ `
387
+
388
+ const CheckboxContainer = styled.div`
389
+ display: grid;
390
+ gap: 6px;
391
+ `
392
+
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
+ `
400
+
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
+ `
408
+
409
+ const RowWrapper = styled.div`
410
+ margin-bottom: 12px;
411
+ `
412
+
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
+ `
422
+
423
+ const SectionContainer = styled.div``
424
+
425
+ const GridContainer = styled.div`
426
+ display: grid;
427
+ grid-template-columns: 1fr 1fr;
428
+ grid-gap: 12px;
429
+ `
430
+
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
+ `
436
+
437
+ const UpperContainer = styled.div`
438
+ display: grid;
439
+ grid-gap: 20px
440
+ grid-template-columns: 1fr 1fr;
441
+ padding: 10px 14px;
442
+ `
443
+
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
+ `
454
+
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,
486
+ },
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
+ },
515
+ },
516
+ data() {
517
+ return {
518
+ selectedDates: null,
519
+ value1: null,
520
+ dateStart: null,
521
+ dateEnd: null,
522
+ }
523
+ },
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
+ },
545
+ },
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('-')
572
+
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])
576
+
577
+ const currentDate = new Date(year, month, day)
578
+ const selectedDate = new Date(date)
579
+
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('-')
589
+
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])
593
+
594
+ const currentDate = new Date(year, month, day)
595
+ const selectedDate = new Date(date)
596
+
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
609
+ )
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)
619
+ }
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
+ },
637
+ },
638
+ }
639
+ </script>