headmin 0.4.2 → 0.5.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 (117) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -1
  3. data/Gemfile.lock +1 -1
  4. data/app/assets/javascripts/headmin/controllers/date_range_controller.js +12 -6
  5. data/app/assets/javascripts/headmin/controllers/filter_controller.js +61 -11
  6. data/app/assets/javascripts/headmin/controllers/filter_row_controller.js +50 -0
  7. data/app/assets/javascripts/headmin/controllers/flatpickr_controller.js +2 -6
  8. data/app/assets/javascripts/headmin/controllers/popup_controller.js +3 -1
  9. data/app/assets/javascripts/headmin/controllers/table_actions_controller.js +16 -21
  10. data/app/assets/javascripts/headmin/index.js +2 -0
  11. data/app/assets/javascripts/headmin.js +119 -38
  12. data/app/assets/stylesheets/headmin/filter.scss +74 -0
  13. data/app/assets/stylesheets/headmin/general.scss +0 -1
  14. data/app/assets/stylesheets/headmin/layout/body.scss +5 -0
  15. data/app/assets/stylesheets/headmin/popup.scss +0 -1
  16. data/app/assets/stylesheets/headmin.css +67 -2
  17. data/app/controllers/concerns/headmin/filterable.rb +27 -0
  18. data/app/models/headmin/filter/base.rb +238 -0
  19. data/app/models/headmin/filter/base_view.rb +64 -0
  20. data/app/models/headmin/filter/boolean.rb +15 -0
  21. data/app/models/headmin/filter/boolean_view.rb +61 -0
  22. data/app/models/headmin/filter/button_view.rb +25 -0
  23. data/app/models/headmin/filter/conditional_view.rb +16 -0
  24. data/app/models/headmin/filter/date.rb +19 -0
  25. data/app/models/headmin/filter/date_view.rb +52 -0
  26. data/app/models/headmin/filter/flatpickr_view.rb +54 -0
  27. data/app/models/headmin/filter/menu_item_view.rb +6 -0
  28. data/app/models/headmin/filter/money.rb +13 -0
  29. data/app/models/headmin/filter/number.rb +27 -0
  30. data/app/models/headmin/filter/number_view.rb +54 -0
  31. data/app/models/headmin/filter/operator_view.rb +30 -0
  32. data/app/models/headmin/filter/options_view.rb +61 -0
  33. data/app/models/headmin/filter/row_view.rb +13 -0
  34. data/app/models/headmin/filter/search.rb +18 -0
  35. data/app/models/headmin/filter/search_view.rb +31 -0
  36. data/app/models/headmin/filter/text.rb +25 -0
  37. data/app/models/headmin/filter/text_view.rb +53 -0
  38. data/app/models/headmin/filters.rb +29 -0
  39. data/app/models/headmin/form/datetime_range_view.rb +25 -0
  40. data/app/models/headmin/form/datetime_view.rb +45 -0
  41. data/app/models/headmin/form/flatpickr_range_view.rb +4 -15
  42. data/app/models/headmin/form/flatpickr_view.rb +3 -12
  43. data/app/models/view_model.rb +1 -1
  44. data/app/views/examples/admin.html.erb +13 -13
  45. data/app/views/examples/auth.html.erb +1 -1
  46. data/app/views/headmin/_filters.html.erb +6 -6
  47. data/app/views/headmin/_form.html.erb +2 -2
  48. data/app/views/headmin/_index.html.erb +1 -1
  49. data/app/views/headmin/_pagination.html.erb +1 -1
  50. data/app/views/headmin/_popup.html.erb +2 -2
  51. data/app/views/headmin/_table.html.erb +1 -1
  52. data/app/views/headmin/dropdown/_devise.html.erb +8 -8
  53. data/app/views/headmin/dropdown/_locale.html.erb +4 -4
  54. data/app/views/headmin/filters/_base.html.erb +95 -0
  55. data/app/views/headmin/filters/_boolean.html.erb +23 -0
  56. data/app/views/headmin/filters/_date.html.erb +14 -38
  57. data/app/views/headmin/filters/_flatpickr.html.erb +15 -48
  58. data/app/views/headmin/filters/_number.html.erb +23 -0
  59. data/app/views/headmin/filters/_options.html.erb +24 -0
  60. data/app/views/headmin/filters/_search.html.erb +14 -12
  61. data/app/views/headmin/filters/_text.html.erb +23 -0
  62. data/app/views/headmin/filters/filter/_button.html.erb +9 -10
  63. data/app/views/headmin/filters/filter/_conditional.html.erb +18 -0
  64. data/app/views/headmin/filters/filter/_menu_item.html.erb +5 -2
  65. data/app/views/headmin/filters/filter/_null_select.html.erb +8 -0
  66. data/app/views/headmin/filters/filter/_operator.html.erb +16 -0
  67. data/app/views/headmin/filters/filter/_row.html.erb +11 -0
  68. data/app/views/headmin/forms/_blocks.html.erb +1 -1
  69. data/app/views/headmin/forms/_date_range.html.erb +3 -3
  70. data/app/views/headmin/forms/_datetime.html.erb +41 -0
  71. data/app/views/headmin/forms/_datetime_range.html.erb +40 -0
  72. data/app/views/headmin/forms/_file.html.erb +3 -3
  73. data/app/views/headmin/forms/_flatpickr.html.erb +1 -1
  74. data/app/views/headmin/forms/_flatpickr_range.html.erb +3 -4
  75. data/app/views/headmin/forms/_label.html.erb +1 -1
  76. data/app/views/headmin/forms/_repeater.html.erb +12 -12
  77. data/app/views/headmin/forms/fields/_base.html.erb +1 -1
  78. data/app/views/headmin/forms/fields/_file.html.erb +2 -2
  79. data/app/views/headmin/forms/fields/_files.html.erb +2 -2
  80. data/app/views/headmin/forms/fields/_group.html.erb +5 -5
  81. data/app/views/headmin/forms/fields/_list.html.erb +4 -4
  82. data/app/views/headmin/forms/fields/_text.html.erb +2 -2
  83. data/app/views/headmin/layout/_footer.html.erb +1 -1
  84. data/app/views/headmin/layout/_main.html.erb +1 -1
  85. data/app/views/headmin/nav/_dropdown.html.erb +3 -3
  86. data/app/views/headmin/nav/_item.html.erb +2 -2
  87. data/app/views/headmin/nav/item/_devise.html.erb +8 -8
  88. data/app/views/headmin/nav/item/_locale.html.erb +4 -4
  89. data/app/views/headmin/table/_actions.html.erb +3 -6
  90. data/app/views/headmin/table/actions/_export.html.erb +1 -1
  91. data/app/views/headmin/table/body/_row.html.erb +3 -3
  92. data/app/views/headmin/table/foot/_id.html.erb +1 -1
  93. data/app/views/headmin/views/devise/confirmations/_new.html.erb +1 -1
  94. data/app/views/headmin/views/devise/passwords/_edit.html.erb +2 -2
  95. data/app/views/headmin/views/devise/passwords/_new.html.erb +1 -1
  96. data/app/views/headmin/views/devise/registrations/_edit.html.erb +4 -4
  97. data/app/views/headmin/views/devise/registrations/_new.html.erb +3 -3
  98. data/app/views/headmin/views/devise/sessions/_new.html.erb +3 -3
  99. data/app/views/headmin/views/devise/unlocks/_new.html.erb +1 -1
  100. data/config/locales/en.yml +4 -0
  101. data/config/locales/headmin/dropdown/en.yml +6 -0
  102. data/config/locales/headmin/dropdown/nl.yml +6 -0
  103. data/config/locales/headmin/filters/en.yml +26 -1
  104. data/config/locales/headmin/filters/nl.yml +26 -1
  105. data/config/locales/headmin/layout/en.yml +0 -9
  106. data/config/locales/headmin/layout/nl.yml +0 -9
  107. data/config/locales/headmin/nav/en.yml +7 -0
  108. data/config/locales/headmin/nav/nl.yml +7 -0
  109. data/config/locales/nl.yml +4 -0
  110. data/lib/generators/templates/views/layouts/auth.html.erb +1 -1
  111. data/lib/headmin/version.rb +1 -1
  112. data/package.json +1 -1
  113. metadata +42 -6
  114. data/app/controllers/concerns/headmin/filter.rb +0 -5
  115. data/app/controllers/concerns/headmin/searchable.rb +0 -15
  116. data/app/views/headmin/filters/_select.html.erb +0 -45
  117. data/app/views/headmin/filters/filter/_template.html.erb +0 -13
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c2df34e0f6abc35cd855cab3059a40f7716b336df77abdbd4ea9609fc3cf6e5e
4
- data.tar.gz: 2c2c5953560f608e6d479bcb7de506ce8da701be8d56b5fbf72cfcaf3a9478ad
3
+ metadata.gz: b4995d965477ea5691025ac2ca92fb211c13acc44f1068f402e013c1ec47cb08
4
+ data.tar.gz: dc1f5842c477771e2b9b9890e8b99e03af6c96daf6451ce8a09628c0dded3f3a
5
5
  SHA512:
6
- metadata.gz: 17a7d48956fb48e286cd0fd2ac043741256c2e573ffb024cc4ae7fffb2e39c54d4db380efb4308f6816649f43e3fde68fabda7d104211cbcdf8f387d6c7d384b
7
- data.tar.gz: 33afd17085196473000927125f9186e5b5703575373cdee9be982e6ca32db31ce09aef1fdf3ebf65b2efb9e31b16595fb6b5076ea65e7872f2ecaf49f260ea12
6
+ metadata.gz: 64e5f636b7551f1348e640a2dc86e2de7169aee2b6decbda14fa9da3ceea4cbff594686fc27ed4c3a59de554491498c2f6fe60feda94f318bafdef5f8066e75e
7
+ data.tar.gz: 05bd1380da40f154c741f1a42be39a466a1f4c4f4860b1e9e1176024e24e61d9d68940b3d62932cb9f0413561e7425842f3d2f523a76e66d4b73cc2eef701369
data/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Headmin Changelog
2
2
 
3
+ ## 0.5
4
+ - FEATURE: Filters now have support for operators and conditionals
5
+ - BREAK: `headmin/filters` now return a form object that is required for each individual form
6
+ - DEPRECATED: `Headmin::Searchable` is replaced with `Headmin::Filterable`.
7
+ - A `filter(params, types)` method is available and accepts an optional types argument.
8
+ - The `search()` method is now deprecated and no longer required
9
+
3
10
  ## 0.4.2
4
11
  - FEATURE: New field type "files" to allow simple gallery creation
5
12
  - FIX: Fields hash with duplicate keys no longer mix up
@@ -22,7 +29,7 @@
22
29
  - BREAK: `headmin/forms/actions` and all of its child components have been removed
23
30
  - BREAK: `$font-weight-medium` has been removed from headmin overrides variables. We don't want to introduce new variable names that look like they are part of Bootstrap.
24
31
  - BREAK: `headmin/forms/date_range` has a different way of setting attribute specific values. We now have a `:start` and `:end` attribute that accept all possible input options for their respective inputs. Both have a required `:attribute` parameter now.
25
-
32
+ - BREAK: filter concern (controllers) has been renamed to filterable
26
33
  ```erb
27
34
  # Old
28
35
  <%= render "headmin/forms/date_range", form: form, start_attribute: :start_date, end_attribute: :end_date %>
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- headmin (0.4.1)
4
+ headmin (0.4.2)
5
5
  closure_tree (~> 7.4)
6
6
  inline_svg (~> 1.7)
7
7
  redcarpet (~> 3.5)
@@ -1,10 +1,6 @@
1
1
  import { Controller } from '@hotwired/stimulus'
2
2
 
3
3
  export default class extends Controller {
4
- static get targets () {
5
- return ['dateInput', 'startDateInput', 'endDateInput']
6
- }
7
-
8
4
  update (event) {
9
5
  const flatpickr = event.target._flatpickr
10
6
  const startDate = flatpickr.selectedDates[0]
@@ -15,11 +11,21 @@ export default class extends Controller {
15
11
  }
16
12
 
17
13
  setStartDateInputValue (value) {
18
- this.startDateInputTarget.value = value
14
+ const startDateInput = this.startDateInput()
15
+ startDateInput.value = value
19
16
  }
20
17
 
21
18
  setEndDateInputValue (value) {
22
- this.endDateInputTarget.value = value
19
+ const endDateInput = this.endDateInput()
20
+ endDateInput.value = value
21
+ }
22
+
23
+ startDateInput () {
24
+ return this.element.nextElementSibling
25
+ }
26
+
27
+ endDateInput () {
28
+ return this.startDateInput().nextElementSibling
23
29
  }
24
30
 
25
31
  formatDate (date) {
@@ -2,7 +2,13 @@ import { Controller } from '@hotwired/stimulus'
2
2
 
3
3
  export default class extends Controller {
4
4
  static get targets () {
5
- return ['button', 'popup']
5
+ return ['button', 'popup', 'conditional', 'operator', 'value', 'hidden', 'wrapper', 'template', 'row']
6
+ }
7
+
8
+ static get values () {
9
+ return {
10
+ name: String
11
+ }
6
12
  }
7
13
 
8
14
  // Attaches controller logic to the element itself
@@ -10,16 +16,7 @@ export default class extends Controller {
10
16
  connect () {
11
17
  this.element.controller = this
12
18
 
13
- // Clicked outside popup
14
- document.addEventListener('click', (event) => {
15
- this.handleOutsideClick(event)
16
- })
17
- }
18
-
19
- handleOutsideClick (event) {
20
- if (!this.isClickedInside(event)) {
21
- this.close()
22
- }
19
+ this.updateHiddenValue()
23
20
  }
24
21
 
25
22
  toggle (event) {
@@ -41,6 +38,38 @@ export default class extends Controller {
41
38
  this.popupTarget.classList.add('closed')
42
39
  }
43
40
 
41
+ add (event) {
42
+ event.preventDefault()
43
+ const html = this.getTemplateHTML()
44
+ this.wrapperTarget.insertAdjacentHTML('beforeend', html)
45
+ }
46
+
47
+ remove (event) {
48
+ event.preventDefault()
49
+ const inputGroup = event.currentTarget.closest('[data-filter-target="row"]')
50
+ // Check if there is a previous element (the conditional select). If no element (first inputGroup), take the next element.
51
+ const conditional = inputGroup.previousElementSibling != null ? inputGroup.previousElementSibling : inputGroup.nextElementSibling
52
+
53
+ inputGroup.remove()
54
+ // If there is only one inputGroup, the conditional is null, so do not attempt to remove it
55
+ if (conditional != null) conditional.remove()
56
+
57
+ // After we remove the UI, run update to also remove filter from the hidden input
58
+ this.updateHiddenValue()
59
+
60
+ // Check if there are still inputs left, else remove filter
61
+ if (this.valueTargets.length === 0) {
62
+ this.removeFilter()
63
+ }
64
+ }
65
+
66
+ removeFilter () {
67
+ const form = this.buttonTarget.closest('form')
68
+ this.buttonTarget.remove()
69
+ this.popupTarget.remove()
70
+ form.submit()
71
+ }
72
+
44
73
  isClickedInside (event) {
45
74
  if (!event) {
46
75
  return false
@@ -50,4 +79,25 @@ export default class extends Controller {
50
79
  const inAddButton = event.target.dataset.action === 'click->filters#add'
51
80
  return (inPopup || inButton || inAddButton)
52
81
  }
82
+
83
+ updateHiddenValue () {
84
+ this.hiddenTarget.value = this.buildInstructionString()
85
+ }
86
+
87
+ buildInstructionString () {
88
+ let string = ''
89
+ for (const row of this.rowTargets) {
90
+ const conditional = row.previousElementSibling ? row.previousElementSibling.querySelector('[data-filter-target="conditional"]').value : null
91
+ const operator = row.querySelector('[data-filter-target="operator"]').value
92
+ const value = row.querySelector('[data-filter-target="value"]').value
93
+ string += `${conditional || ''}${operator}:${value}`
94
+ }
95
+
96
+ return string
97
+ }
98
+
99
+ getTemplateHTML () {
100
+ const template = this.templateTarget
101
+ return template.innerHTML
102
+ }
53
103
  }
@@ -0,0 +1,50 @@
1
+ import { Controller } from '@hotwired/stimulus'
2
+
3
+ export default class extends Controller {
4
+ static get targets () {
5
+ return ['original', 'operator', 'null']
6
+ }
7
+
8
+ connect () {
9
+ this.operatorTarget.addEventListener('change', () => this.handleOperatorChange())
10
+ this.handleOperatorChange()
11
+ }
12
+
13
+ handleOperatorChange () {
14
+ if (this.operatorTarget.value === 'is_null' || this.operatorTarget.value === 'is_not_null') {
15
+ this.toggleNullInput()
16
+ } else {
17
+ this.toggleOriginalInput()
18
+ }
19
+ }
20
+
21
+ toggleNullInput () {
22
+ this.hideOriginal()
23
+ this.showNull()
24
+ }
25
+
26
+ toggleOriginalInput () {
27
+ this.showOriginal()
28
+ this.hideNull()
29
+ }
30
+
31
+ hideOriginal () {
32
+ this.originalTarget.style.display = 'none'
33
+ this.originalTarget.setAttribute('data-filter-target', 'value_original')
34
+ }
35
+
36
+ showOriginal () {
37
+ this.originalTarget.style.display = 'block'
38
+ this.originalTarget.setAttribute('data-filter-target', 'value')
39
+ }
40
+
41
+ hideNull () {
42
+ this.nullTarget.style.display = 'none'
43
+ this.nullTarget.setAttribute('data-filter-target', 'value_null')
44
+ }
45
+
46
+ showNull () {
47
+ this.nullTarget.style.display = 'block'
48
+ this.nullTarget.setAttribute('data-filter-target', 'value')
49
+ }
50
+ }
@@ -4,17 +4,13 @@ import { Dutch } from 'flatpickr/dist/esm/l10n/nl.js'
4
4
  import I18n from '../config/i18n'
5
5
 
6
6
  export default class extends Controller {
7
- static get targets () {
8
- return ['input']
9
- }
10
-
11
7
  connect () {
12
8
  const options = { ...this.defaultOptions(), ...this.options() }
13
- flatpickr(this.inputTarget, options)
9
+ flatpickr(this.element, options)
14
10
  }
15
11
 
16
12
  options () {
17
- return JSON.parse(this.inputTarget.getAttribute('data-flatpickr'))
13
+ return JSON.parse(this.element.getAttribute('data-flatpickr'))
18
14
  }
19
15
 
20
16
  defaultOptions () {
@@ -19,6 +19,9 @@ export default class extends Controller {
19
19
  }
20
20
 
21
21
  handleOutsideClick (event) {
22
+ const itemRemoved = !document.body.contains(event.target) // Ignore items that were removed from DOM (else this triggers a close)
23
+ if (itemRemoved) return
24
+
22
25
  const inPopup = event.target.closest('[data-popup-target="popup"]') !== null
23
26
  const inButton = event.target.closest('[data-popup-target="button"]') !== null
24
27
  const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)')
@@ -53,7 +56,6 @@ export default class extends Controller {
53
56
  close (event) {
54
57
  const button = event.target.closest('[data-popup-target="button"]')
55
58
  const popup = this.popupById(button.dataset.popupId)
56
-
57
59
  this.closePopup(popup)
58
60
  }
59
61
 
@@ -2,12 +2,12 @@ import { Controller } from '@hotwired/stimulus'
2
2
 
3
3
  export default class extends Controller {
4
4
  static get targets () {
5
- return ['wrapper', 'form', 'select', 'method', 'button', 'idInputTemplate', 'id', 'counter']
5
+ return ['wrapper', 'form', 'select', 'method', 'button', 'idInput', 'counter']
6
6
  }
7
7
 
8
8
  connect () {
9
9
  this.wrapperTarget.addEventListener('idSelectionChanged', (event) => {
10
- this.updateIdFields(event.detail.ids)
10
+ this.updateIdInput(event.detail.ids)
11
11
  this.updateCounter(event.detail.count)
12
12
  this.toggleCounter(event.detail.count)
13
13
  })
@@ -21,17 +21,24 @@ export default class extends Controller {
21
21
  this.enableButton()
22
22
  }
23
23
 
24
- updateIdFields (ids) {
25
- this.removeIds()
26
- if (ids instanceof Array) {
27
- ids.forEach((id) => {
28
- this.addId(id)
29
- })
24
+ updateIdInput (ids) {
25
+ if (ids == null) {
26
+ this.disableIdInput()
27
+ this.idInputTarget.value = ''
30
28
  } else {
31
- this.addId('')
29
+ this.enableIdInput()
30
+ this.idInputTarget.value = `in:${ids.join(',')}`
32
31
  }
33
32
  }
34
33
 
34
+ disableIdInput () {
35
+ this.idInputTarget.removeAttribute('name')
36
+ }
37
+
38
+ enableIdInput () {
39
+ this.idInputTarget.setAttribute('name', 'id')
40
+ }
41
+
35
42
  updateCounter (count) {
36
43
  let htmlString = ''
37
44
  switch (count) {
@@ -94,16 +101,4 @@ export default class extends Controller {
94
101
  enableButton () {
95
102
  this.buttonTarget.removeAttribute('disabled')
96
103
  }
97
-
98
- addId (id) {
99
- const template = this.idInputTemplateTarget
100
- const input = template.innerHTML.replace(/ID/g, id)
101
- this.formTarget.insertAdjacentHTML('afterbegin', input)
102
- }
103
-
104
- removeIds () {
105
- this.idTargets.forEach((input) => {
106
- this.formTarget.removeChild(input)
107
- })
108
- }
109
104
  }
@@ -6,6 +6,7 @@ import DateRangeController from './controllers/date_range_controller'
6
6
  import DropzoneController from './controllers/dropzone_controller'
7
7
  import FilePreviewController from './controllers/file_preview_controller'
8
8
  import FilterController from './controllers/filter_controller'
9
+ import FilterRowController from './controllers/filter_row_controller'
9
10
  import FiltersController from './controllers/filters_controller'
10
11
  import FlatpickrController from './controllers/flatpickr_controller'
11
12
  import HelloController from './controllers/hello_controller'
@@ -26,6 +27,7 @@ export class Headmin {
26
27
  Stimulus.register('dropzone', DropzoneController)
27
28
  Stimulus.register('file-preview', FilePreviewController)
28
29
  Stimulus.register('filter', FilterController)
30
+ Stimulus.register('filter-row', FilterRowController)
29
31
  Stimulus.register('filters', FiltersController)
30
32
  Stimulus.register('flatpickr', FlatpickrController)
31
33
  Stimulus.register('hello', HelloController)
@@ -7457,9 +7457,6 @@ var blocks_controller_default = class extends Controller {
7457
7457
 
7458
7458
  // app/assets/javascripts/headmin/controllers/date_range_controller.js
7459
7459
  var date_range_controller_default = class extends Controller {
7460
- static get targets() {
7461
- return ["dateInput", "startDateInput", "endDateInput"];
7462
- }
7463
7460
  update(event) {
7464
7461
  const flatpickr2 = event.target._flatpickr;
7465
7462
  const startDate = flatpickr2.selectedDates[0];
@@ -7468,10 +7465,18 @@ var date_range_controller_default = class extends Controller {
7468
7465
  this.setEndDateInputValue(this.formatDate(endDate));
7469
7466
  }
7470
7467
  setStartDateInputValue(value) {
7471
- this.startDateInputTarget.value = value;
7468
+ const startDateInput = this.startDateInput();
7469
+ startDateInput.value = value;
7472
7470
  }
7473
7471
  setEndDateInputValue(value) {
7474
- this.endDateInputTarget.value = value;
7472
+ const endDateInput = this.endDateInput();
7473
+ endDateInput.value = value;
7474
+ }
7475
+ startDateInput() {
7476
+ return this.element.nextElementSibling;
7477
+ }
7478
+ endDateInput() {
7479
+ return this.startDateInput().nextElementSibling;
7475
7480
  }
7476
7481
  formatDate(date) {
7477
7482
  if (date instanceof Date) {
@@ -7704,18 +7709,16 @@ var file_preview_controller_default = class extends Controller {
7704
7709
  // app/assets/javascripts/headmin/controllers/filter_controller.js
7705
7710
  var filter_controller_default = class extends Controller {
7706
7711
  static get targets() {
7707
- return ["button", "popup"];
7712
+ return ["button", "popup", "conditional", "operator", "value", "hidden", "wrapper", "template", "row"];
7713
+ }
7714
+ static get values() {
7715
+ return {
7716
+ name: String
7717
+ };
7708
7718
  }
7709
7719
  connect() {
7710
7720
  this.element.controller = this;
7711
- document.addEventListener("click", (event) => {
7712
- this.handleOutsideClick(event);
7713
- });
7714
- }
7715
- handleOutsideClick(event) {
7716
- if (!this.isClickedInside(event)) {
7717
- this.close();
7718
- }
7721
+ this.updateHiddenValue();
7719
7722
  }
7720
7723
  toggle(event) {
7721
7724
  const expanded = this.buttonTarget.getAttribute("aria-expanded") === "true";
@@ -7733,6 +7736,29 @@ var filter_controller_default = class extends Controller {
7733
7736
  this.buttonTarget.setAttribute("aria-expanded", "false");
7734
7737
  this.popupTarget.classList.add("closed");
7735
7738
  }
7739
+ add(event) {
7740
+ event.preventDefault();
7741
+ const html = this.getTemplateHTML();
7742
+ this.wrapperTarget.insertAdjacentHTML("beforeend", html);
7743
+ }
7744
+ remove(event) {
7745
+ event.preventDefault();
7746
+ const inputGroup = event.currentTarget.closest('[data-filter-target="row"]');
7747
+ const conditional = inputGroup.previousElementSibling != null ? inputGroup.previousElementSibling : inputGroup.nextElementSibling;
7748
+ inputGroup.remove();
7749
+ if (conditional != null)
7750
+ conditional.remove();
7751
+ this.updateHiddenValue();
7752
+ if (this.valueTargets.length === 0) {
7753
+ this.removeFilter();
7754
+ }
7755
+ }
7756
+ removeFilter() {
7757
+ const form = this.buttonTarget.closest("form");
7758
+ this.buttonTarget.remove();
7759
+ this.popupTarget.remove();
7760
+ form.submit();
7761
+ }
7736
7762
  isClickedInside(event) {
7737
7763
  if (!event) {
7738
7764
  return false;
@@ -7742,6 +7768,65 @@ var filter_controller_default = class extends Controller {
7742
7768
  const inAddButton = event.target.dataset.action === "click->filters#add";
7743
7769
  return inPopup || inButton || inAddButton;
7744
7770
  }
7771
+ updateHiddenValue() {
7772
+ this.hiddenTarget.value = this.buildInstructionString();
7773
+ }
7774
+ buildInstructionString() {
7775
+ let string = "";
7776
+ for (const row of this.rowTargets) {
7777
+ const conditional = row.previousElementSibling ? row.previousElementSibling.querySelector('[data-filter-target="conditional"]').value : null;
7778
+ const operator = row.querySelector('[data-filter-target="operator"]').value;
7779
+ const value = row.querySelector('[data-filter-target="value"]').value;
7780
+ string += `${conditional || ""}${operator}:${value}`;
7781
+ }
7782
+ return string;
7783
+ }
7784
+ getTemplateHTML() {
7785
+ const template = this.templateTarget;
7786
+ return template.innerHTML;
7787
+ }
7788
+ };
7789
+
7790
+ // app/assets/javascripts/headmin/controllers/filter_row_controller.js
7791
+ var filter_row_controller_default = class extends Controller {
7792
+ static get targets() {
7793
+ return ["original", "operator", "null"];
7794
+ }
7795
+ connect() {
7796
+ this.operatorTarget.addEventListener("change", () => this.handleOperatorChange());
7797
+ this.handleOperatorChange();
7798
+ }
7799
+ handleOperatorChange() {
7800
+ if (this.operatorTarget.value === "is_null" || this.operatorTarget.value === "is_not_null") {
7801
+ this.toggleNullInput();
7802
+ } else {
7803
+ this.toggleOriginalInput();
7804
+ }
7805
+ }
7806
+ toggleNullInput() {
7807
+ this.hideOriginal();
7808
+ this.showNull();
7809
+ }
7810
+ toggleOriginalInput() {
7811
+ this.showOriginal();
7812
+ this.hideNull();
7813
+ }
7814
+ hideOriginal() {
7815
+ this.originalTarget.style.display = "none";
7816
+ this.originalTarget.setAttribute("data-filter-target", "value_original");
7817
+ }
7818
+ showOriginal() {
7819
+ this.originalTarget.style.display = "block";
7820
+ this.originalTarget.setAttribute("data-filter-target", "value");
7821
+ }
7822
+ hideNull() {
7823
+ this.nullTarget.style.display = "none";
7824
+ this.nullTarget.setAttribute("data-filter-target", "value_null");
7825
+ }
7826
+ showNull() {
7827
+ this.nullTarget.style.display = "block";
7828
+ this.nullTarget.setAttribute("data-filter-target", "value");
7829
+ }
7745
7830
  };
7746
7831
 
7747
7832
  // app/assets/javascripts/headmin/controllers/filters_controller.js
@@ -9975,15 +10060,12 @@ var i18n_default = class {
9975
10060
 
9976
10061
  // app/assets/javascripts/headmin/controllers/flatpickr_controller.js
9977
10062
  var flatpickr_controller_default = class extends Controller {
9978
- static get targets() {
9979
- return ["input"];
9980
- }
9981
10063
  connect() {
9982
10064
  const options = { ...this.defaultOptions(), ...this.options() };
9983
- esm_default(this.inputTarget, options);
10065
+ esm_default(this.element, options);
9984
10066
  }
9985
10067
  options() {
9986
- return JSON.parse(this.inputTarget.getAttribute("data-flatpickr"));
10068
+ return JSON.parse(this.element.getAttribute("data-flatpickr"));
9987
10069
  }
9988
10070
  defaultOptions() {
9989
10071
  return {
@@ -15081,6 +15163,9 @@ var popup_controller_default = class extends Controller {
15081
15163
  });
15082
15164
  }
15083
15165
  handleOutsideClick(event) {
15166
+ const itemRemoved = !document.body.contains(event.target);
15167
+ if (itemRemoved)
15168
+ return;
15084
15169
  const inPopup = event.target.closest('[data-popup-target="popup"]') !== null;
15085
15170
  const inButton = event.target.closest('[data-popup-target="button"]') !== null;
15086
15171
  const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)');
@@ -15305,11 +15390,11 @@ var select_controller_default = class extends Controller {
15305
15390
  // app/assets/javascripts/headmin/controllers/table_actions_controller.js
15306
15391
  var table_actions_controller_default = class extends Controller {
15307
15392
  static get targets() {
15308
- return ["wrapper", "form", "select", "method", "button", "idInputTemplate", "id", "counter"];
15393
+ return ["wrapper", "form", "select", "method", "button", "idInput", "counter"];
15309
15394
  }
15310
15395
  connect() {
15311
15396
  this.wrapperTarget.addEventListener("idSelectionChanged", (event) => {
15312
- this.updateIdFields(event.detail.ids);
15397
+ this.updateIdInput(event.detail.ids);
15313
15398
  this.updateCounter(event.detail.count);
15314
15399
  this.toggleCounter(event.detail.count);
15315
15400
  });
@@ -15321,16 +15406,21 @@ var table_actions_controller_default = class extends Controller {
15321
15406
  this.updateFormDataAttributes();
15322
15407
  this.enableButton();
15323
15408
  }
15324
- updateIdFields(ids) {
15325
- this.removeIds();
15326
- if (ids instanceof Array) {
15327
- ids.forEach((id) => {
15328
- this.addId(id);
15329
- });
15409
+ updateIdInput(ids) {
15410
+ if (ids == null) {
15411
+ this.disableIdInput();
15412
+ this.idInputTarget.value = "";
15330
15413
  } else {
15331
- this.addId("");
15414
+ this.enableIdInput();
15415
+ this.idInputTarget.value = `in:${ids.join(",")}`;
15332
15416
  }
15333
15417
  }
15418
+ disableIdInput() {
15419
+ this.idInputTarget.removeAttribute("name");
15420
+ }
15421
+ enableIdInput() {
15422
+ this.idInputTarget.setAttribute("name", "id");
15423
+ }
15334
15424
  updateCounter(count) {
15335
15425
  let htmlString = "";
15336
15426
  switch (count) {
@@ -15385,16 +15475,6 @@ var table_actions_controller_default = class extends Controller {
15385
15475
  enableButton() {
15386
15476
  this.buttonTarget.removeAttribute("disabled");
15387
15477
  }
15388
- addId(id) {
15389
- const template = this.idInputTemplateTarget;
15390
- const input = template.innerHTML.replace(/ID/g, id);
15391
- this.formTarget.insertAdjacentHTML("afterbegin", input);
15392
- }
15393
- removeIds() {
15394
- this.idTargets.forEach((input) => {
15395
- this.formTarget.removeChild(input);
15396
- });
15397
- }
15398
15478
  };
15399
15479
 
15400
15480
  // app/assets/javascripts/headmin/controllers/table_controller.js
@@ -15510,6 +15590,7 @@ var Headmin = class {
15510
15590
  Stimulus.register("dropzone", dropzone_controller_default);
15511
15591
  Stimulus.register("file-preview", file_preview_controller_default);
15512
15592
  Stimulus.register("filter", filter_controller_default);
15593
+ Stimulus.register("filter-row", filter_row_controller_default);
15513
15594
  Stimulus.register("filters", filters_controller_default);
15514
15595
  Stimulus.register("flatpickr", flatpickr_controller_default);
15515
15596
  Stimulus.register("hello", hello_controller_default);
@@ -23,11 +23,85 @@
23
23
  }
24
24
  }
25
25
 
26
+ .h-filter-row {
27
+ padding: 0.5rem 0 0.5rem 0;
28
+ position: relative;
29
+ flex-wrap: unset;
30
+ display: flex;
31
+ gap: 10px;
32
+
33
+ &:first-child {
34
+ padding-top: 0
35
+ }
36
+
37
+ &:hover {
38
+ .h-filter-add-input, .h-filter-remove-input {
39
+ display: block;
40
+ }
41
+ }
42
+
43
+ input, select:not(.h-filter-operator) {
44
+ min-width: 200px;
45
+ }
46
+ }
47
+
48
+ .h-filter-operator {
49
+ width: 62px;
50
+ }
51
+
52
+ .h-filter-conditional {
53
+ position: relative;
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+
58
+ select {
59
+ width: 50px;
60
+ }
61
+
62
+ &::before {
63
+ content: '';
64
+ position: absolute;
65
+ top: calc(50% - 1px);
66
+ left: 0;
67
+ width: calc(50% - 35px);
68
+ height: 1px;
69
+ background: $popover-border-color;
70
+ }
71
+
72
+ &::after {
73
+ content: '';
74
+ position: absolute;
75
+ top: calc(50% - 1px);
76
+ left: calc(50% + 35px);
77
+ width: calc(50% - 35px);
78
+ height: 1px;
79
+ background: $popover-border-color;
80
+ }
81
+ }
82
+
26
83
  .h-filter-remove {
27
84
  border-left: 1px solid $gray-300;
28
85
  padding-left: 8px;
29
86
  margin-left: 2px;
87
+
30
88
  i::before {
31
89
  font-size: 0.8em;
32
90
  }
91
+ }
92
+
93
+ .h-filter-add-input {
94
+ position: absolute !important;
95
+ top: calc(100% - 12px);
96
+ left: calc(50% - 17px);
97
+ z-index: 9;
98
+ display: none;
99
+ }
100
+
101
+ .h-filter-remove-input {
102
+ position: absolute !important;
103
+ top: calc(50% - 15px);
104
+ left: calc(100% - 4px);
105
+ z-index: 9;
106
+ display: none;
33
107
  }
@@ -1,6 +1,5 @@
1
1
  html {
2
2
  height: 100%;
3
- background: red;
4
3
  }
5
4
 
6
5
  .list-group-item {