Make filter checkboxes

bonflintstone · Oct 29, 2024 · 290d163 · 290d163
1 parent 138d491
commit 290d163
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/app/javascript/controllers/events_controller.js b/app/javascript/controllers/events_controller.js
@@ -4,10 +4,8 @@ export default class extends Controller {
   static targets = ["event"]
 
   toggleOrganization(event) {
-    const organization = event.target.dataset.organization
-    const hiding = event.target.dataset.hidden !== 'true'
-
-    event.target.dataset.hidden = hiding ? 'true' : 'false'
+    const organization = event.target.value
+    const hiding = !event.target.checked
 
     this.eventTargets
       .filter(({ dataset }) => dataset.organization === organization)

diff --git a/app/views/events/index.html.haml b/app/views/events/index.html.haml
@@ -13,16 +13,15 @@
     %span.font-bold= @refetch_event.created_at.strftime("%d.%m.%Y %H:%M:%S")
 
   %div{ 'data-controller': 'events' }
-    - Event::ORGANIZATIONS.each do |organization|
-      :css
-        .hidable[data-hidden = 'true'] {
-          color: grey;
-        }
-
-        .hidden {
-          display: none;
-        }
-      %button.hidable.rounded.px-1.m-1{ 'data-action': "events#toggleOrganization", 'data-organization': organization, class: organization_color(organization) }= organization
+    .flex.flex-wrap
+      - Event::ORGANIZATIONS.each do |organization|
+        :css
+          .hidden {
+            display: none;
+          }
+        %label.flex.items-center.gap-1.rounded.px-2.py-1.m-1{ class: organization_color(organization) }
+          %input{ type: 'checkbox', checked: 'true', style: 'box-shadow: none', value: organization, 'data-action': "events#toggleOrganization" }
+          = organization
 
     - @events.group_by(&:date).each do |date, events|
       %h3.text-xl.font-bold= l(date, format: "%A %d.%m.%Y")