mirror of
https://github.com/we-promise/sure.git
synced 2026-04-19 12:04:08 +00:00
fix: Add multi-select toggle also in activities page. Make JS controller compatible also in this view.
This commit is contained in:
@@ -4,9 +4,12 @@
|
||||
<div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-secondary">
|
||||
<div class="flex pl-0.5 items-center gap-4">
|
||||
<%= 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"
|
||||
} %>
|
||||
|
||||
<p class="uppercase space-x-1.5">
|
||||
<%= tag.span I18n.l(date, format: :long) %>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<%= turbo_frame_tag dom_id(account, "entries") do %>
|
||||
<div class="bg-container p-5 shadow-border-xs rounded-xl">
|
||||
<div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="checkbox-toggle">
|
||||
<div class="flex items-center justify-between mb-4" data-testid="activity-menu">
|
||||
<%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %>
|
||||
|
||||
@@ -46,8 +46,17 @@
|
||||
"data-auto-submit-form-target": "auto" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% 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 %>
|
||||
<%= helpers.icon("list-todo") %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if activity_dates.empty? %>
|
||||
@@ -66,8 +75,11 @@
|
||||
<div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
|
||||
<div class="pl-0.5 col-span-8 flex items-center gap-4">
|
||||
<%= check_box_tag "selection_entry",
|
||||
class: "checkbox checkbox--light",
|
||||
data: { action: "bulk-select#togglePageSelection" } %>
|
||||
class: "checkbox checkbox--light hidden lg:block",
|
||||
data: {
|
||||
action: "bulk-select#togglePageSelection",
|
||||
checkbox_toggle_target: "selectionEntry"
|
||||
} %>
|
||||
<%= tag.p t("accounts.show.activity.date") %>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ export default class extends Controller {
|
||||
})
|
||||
|
||||
if (!shouldShow) {
|
||||
const bulkSelectElement = this.element.closest("[data-controller~='bulk-select']");
|
||||
const bulkSelectElement = document.querySelector("[data-controller~='bulk-select']");
|
||||
if (bulkSelectElement) {
|
||||
const bulkSelectController = this.application.getControllerForElementAndIdentifier(
|
||||
bulkSelectElement,
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
<% else %>
|
||||
<%= tag.div id: dom_id(@account, "entries_bulk_select"),
|
||||
data: {
|
||||
controller: "bulk-select",
|
||||
controller: "bulk-select checkbox-toggle",
|
||||
bulk_select_singular_label_value: t(".entry"),
|
||||
bulk_select_plural_label_value: t(".entries")
|
||||
} do %>
|
||||
@@ -66,8 +66,11 @@
|
||||
<div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
|
||||
<div class="pl-0.5 col-span-8 flex items-center gap-4">
|
||||
<%= check_box_tag "selection_entry",
|
||||
class: "checkbox checkbox--light",
|
||||
data: { action: "bulk-select#togglePageSelection" } %>
|
||||
class: "checkbox checkbox--light checkbox checkbox--light hidden lg:block",
|
||||
data: {
|
||||
action: "bulk-select#togglePageSelection",
|
||||
checkbox_toggle_target: "selectionEntry"
|
||||
} %>
|
||||
<p><%= t(".date") %></p>
|
||||
</div>
|
||||
<%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-container-inset border-primary shadow-border-xs px-4 text-sm text-primary w-[420px] py-1.5">
|
||||
<div class="fixed bottom-30 md:bottom-6 z-10 flex items-center justify-between rounded-xl bg-container-inset border-primary shadow-border-xs px-4 text-sm text-primary md:w-[420px] w-[90%] py-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %>
|
||||
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
<div class="p-4 grid grid-cols-12 items-center text-primary text-sm font-medium">
|
||||
<div class="col-span-8 flex items-center gap-4">
|
||||
<%= check_box_tag dom_id(entry, "selection"),
|
||||
class: "checkbox checkbox--light",
|
||||
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
|
||||
class: "checkbox checkbox--light hidden lg:block",
|
||||
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection", checkbox_toggle_target: "selectionEntry" } %>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<%= render DS::FilledIcon.new(icon: icon, size: "sm", hex_color: color, rounded: true) %>
|
||||
|
||||
Reference in New Issue
Block a user