Merge pull request #25 from chonla/main

feat: Dim label if checkbox is inapplicable

cdmm/app/javascript/controllers/checkbox_label_ui_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="checkbox-label-ui"
+export default class extends Controller {
+  static targets = [ 'label' ];
+
+  connect() {
+  }
+
+  refresh(event) {
+    const checkedClasses = this.labelTarget.getAttribute("data-checkbox-label-ui-checked-classes-value").split(" ");
+    const uncheckedClasses = this.labelTarget.getAttribute("data-checkbox-label-ui-unchecked-classes-value").split(" ");
+    const inapplicableClasses = this.labelTarget.getAttribute("data-checkbox-label-ui-inapplicable-classes-value").split(" ");
+    this.labelTarget.classList.remove(...checkedClasses);
+    this.labelTarget.classList.remove(...uncheckedClasses);
+    this.labelTarget.classList.remove(...inapplicableClasses);
+    switch (event.detail.state) {
+      case 'checked':
+        this.labelTarget.classList.add(...checkedClasses);
+        break;
+      case 'unchecked':
+        this.labelTarget.classList.add(...uncheckedClasses);
+        break;
+      case 'inapplicable':
+        this.labelTarget.classList.add(...inapplicableClasses);
+        break;
+    }
+  }
+}

cdmm/app/javascript/controllers/tristate_checkbox_controller.js

@@ -21,7 +21,7 @@ export default class extends Controller {
       }
     }
     this.updateView();
-    this.dispatch('toggled', { prefix: this.identifierValue });
+    this.dispatch('toggled', { detail: { state: this.state }, prefix: this.identifierValue });
   }
 
   updateView() {

cdmm/app/views/cdmm/_capability_item.html.erb

@@ -1,9 +1,14 @@
-<div class="flex flex-row" data-controller="event-sensor" data-event-sensor-identifier-value="<%= key %>">
+<div class="flex flex-row" data-controller="event-sensor checkbox-label-ui" data-event-sensor-identifier-value="<%= key %>" data-action="capability:toggled->checkbox-label-ui#refresh">
     <div class="mr-2">
         <%= render "shared/tristate_checkbox", state: value, input_name: key, event_sensor: "#{key}:triggered", identifier: "capability" %>
     </div>
     <div>
-        <label data-action="click->event-sensor#invoke" for="<%= key %>" class="leading-4 font-semibold text-slate-600 inline-flex text-xs md:text-sm select-none cursor-pointer hover:underline"><%= label %></label>
+        <label data-action="click->event-sensor#invoke" for="<%= key %>" 
+            data-checkbox-label-ui-target="label"
+            data-checkbox-label-ui-checked-classes-value="text-slate-600" 
+            data-checkbox-label-ui-unchecked-classes-value="text-slate-600" 
+            data-checkbox-label-ui-inapplicable-classes-value="line-through text-slate-400" 
+            class="<%= value == "inapplicable" ? "line-through text-slate-400" : "text-slate-600" %> leading-4 font-semibold inline-flex text-xs md:text-sm select-none cursor-pointer hover:underline"><%= label %></label>
         <p class="text-xs text-slate-400 inline-flex select-none"><%= description %></p>
     </div>
 </div>