diff --git a/app/javascript/controllers/checkbox_toggle_controller.js b/app/javascript/controllers/checkbox_toggle_controller.js new file mode 100644 index 000000000..e4f88dfc6 --- /dev/null +++ b/app/javascript/controllers/checkbox_toggle_controller.js @@ -0,0 +1,32 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = ["selectionEntry", "toggleButton"] + + toggle() { + const shouldShow = this.selectionEntryTargets[0].classList.contains("hidden") + + this.selectionEntryTargets.forEach((el) => { + if (shouldShow) { + el.classList.remove("hidden") + } else { + el.classList.add("hidden") + } + }) + + if (!shouldShow) { + const bulkSelectElement = this.element.closest("[data-controller~='bulk-select']"); + if (bulkSelectElement) { + const bulkSelectController = this.application.getControllerForElementAndIdentifier( + bulkSelectElement, + "bulk-select" + ); + if (bulkSelectController) { + bulkSelectController.deselectAll(); + } + } + } + + this.toggleButtonTarget.classList.toggle("bg-surface", shouldShow) + } +} diff --git a/app/views/entries/_entry_group.html.erb b/app/views/entries/_entry_group.html.erb index 2ee8954c1..7a0d14470 100644 --- a/app/views/entries/_entry_group.html.erb +++ b/app/views/entries/_entry_group.html.erb @@ -4,9 +4,12 @@
<%= check_box_tag "#{date}_entries_selection", - class: ["checkbox checkbox--light", "hidden": entries.size == 0], + class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0], id: "selection_entry_#{date}", - data: { action: "bulk-select#toggleGroupSelection" } %> + data: { + action: "bulk-select#toggleGroupSelection", + checkbox_toggle_target: "selectionEntry" + } %>

<%= tag.span I18n.l(date, format: :long) %> diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb index 9b87c7aff..86dd0e193 100644 --- a/app/views/transactions/_transaction.html.erb +++ b/app/views/transactions/_transaction.html.erb @@ -9,11 +9,12 @@

<%= check_box_tag dom_id(entry, "selection"), disabled: transaction.transfer.present?, - class: "checkbox checkbox--light", + class: "checkbox checkbox--light hidden lg:block", data: { id: entry.id, "bulk-select-target": "row", - action: "bulk-select#toggleRowSelection" + action: "bulk-select#toggleRowSelection", + checkbox_toggle_target: "selectionEntry" } %>
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb index 47eb8ec81..ea9f8b5d9 100644 --- a/app/views/transactions/index.html.erb +++ b/app/views/transactions/index.html.erb @@ -46,7 +46,7 @@ <%= render "summary", totals: @search.totals %>
" data-bulk-select-plural-label-value="<%= t(".transactions") %>" class="flex flex-col bg-container rounded-xl shadow-border-xs p-4"> diff --git a/app/views/transactions/searches/_form.html.erb b/app/views/transactions/searches/_form.html.erb index d11fe5cff..9ca4bb7a7 100644 --- a/app/views/transactions/searches/_form.html.erb +++ b/app/views/transactions/searches/_form.html.erb @@ -30,5 +30,15 @@ <%= render "transactions/searches/menu", form: form %> <% end %> <% end %> + + <%= button_tag type: "button", + id: "toggle-checkboxes-button", + class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover", + data: { + action: "click->checkbox-toggle#toggle", + checkbox_toggle_target: "toggleButton" + } do %> + <%= icon("list-todo") %> + <% end %>
<% end %>