From 4fe6387ad8472e1a18440adc3f11203f0d48d02f Mon Sep 17 00:00:00 2001
From: Chonlasith Jucksriporn <chonlasith@gmail.com>
Date: Mon, 28 Oct 2024 16:58:46 +0700
Subject: [PATCH] feat: Dim label if checkbox is inapplicable

---
 .../checkbox_label_ui_controller.js           | 29 +++++++++++++++++++
 .../tristate_checkbox_controller.js           |  2 +-
 cdmm/app/views/cdmm/_capability_item.html.erb |  9 ++++--
 3 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 cdmm/app/javascript/controllers/checkbox_label_ui_controller.js

diff --git a/cdmm/app/javascript/controllers/checkbox_label_ui_controller.js b/cdmm/app/javascript/controllers/checkbox_label_ui_controller.js
new file mode 100644
index 0000000..3c8708d
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/cdmm/app/javascript/controllers/tristate_checkbox_controller.js b/cdmm/app/javascript/controllers/tristate_checkbox_controller.js
index 82ddfa4..25885da 100644
--- a/cdmm/app/javascript/controllers/tristate_checkbox_controller.js
+++ b/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() {
diff --git a/cdmm/app/views/cdmm/_capability_item.html.erb b/cdmm/app/views/cdmm/_capability_item.html.erb
index fbeda01..3cd231e 100644
--- a/cdmm/app/views/cdmm/_capability_item.html.erb
+++ b/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>
\ No newline at end of file