Merge pull request #16 from chonla/main

feat: Auto color when all capabilities in block are checked
oddsteam · Oct 24, 2024 · 84c7dc8 · 84c7dc8
2 parents 434e200 + e9d6af0
commit 84c7dc8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 10 deletions.
diff --git a/cdmm/app/helpers/cdmm_helper.rb b/cdmm/app/helpers/cdmm_helper.rb
@@ -9,6 +9,16 @@ def get_data_at(table, row_index, col_index)
         end
     end
 
+    def cell_key(table, row_index, col_index)
+        "cell_#{row_index}_#{col_index}"
+    end
+
+    def all_checked?(table, row_index, col_index)
+        data = get_data_at(table, row_index, col_index)
+        unselected_caps = data.select { |cap| cap[:value] == "unchecked" }
+        unselected_caps.count == 0
+    end
+
     def label_to_key(label)
         label.gsub(/::/, '__')
             .gsub(/([A-Z]+)([A-Z][a-z])/, '\1_\2')

diff --git a/cdmm/app/javascript/controllers/checklist_ui_controller.js b/cdmm/app/javascript/controllers/checklist_ui_controller.js
@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="checklist-ui"
+export default class extends Controller {
+  static values = { itemCount: Number, completeClasses: String }
+
+  connect() {
+  }
+
+  refresh(event) {
+    const uncheckedChecklists = this.element.querySelectorAll("input[type='hidden'][value='unchecked']");
+    if (uncheckedChecklists.length === 0) {
+      this.element.classList.add(this.completeClassesValue);
+    } else {
+      this.element.classList.remove(this.completeClassesValue);
+    }
+  }
+
+}
diff --git a/cdmm/app/views/cdmm/_capability_list.html.erb b/cdmm/app/views/cdmm/_capability_list.html.erb
@@ -0,0 +1,7 @@
+<td data-controller="checklist-ui" data-checklist-ui-complete-classes-value="bg-green-100" data-checklist-ui-item-count-value="<%= get_data_at(table, row_index, col_index).count %>" data-action="capability:toggled->checklist-ui#refresh" class="relative border-gray-300 border border-l-0 border-t-0 p-2 text-xs md:text-sm align-top <%= all_checked?(table, row_index, col_index) ? "bg-green-100" : "" %>">
+    <div class="flex flex-col gap-y-4 items-start">
+    <% get_data_at(table, row_index, col_index).each_with_index do |data, data_index| %>
+    <%= render :partial => "capability_item", :locals => { key: data[:key], label: data[:label], description: data[:description], value: data[:value] } %>
+    <% end %>
+    </div>
+</td>
diff --git a/cdmm/app/views/cdmm/_form_table.html.erb b/cdmm/app/views/cdmm/_form_table.html.erb
@@ -13,13 +13,7 @@
             <tr>
                 <td class="sticky left-0 border-gray-300 bg-slate-100 border border-t-0 p-2 text-center text-xs md:text-sm font-bold z-10"><%= row_header %></td>
                 <% table[:col_headers].each_with_index do |col_header, col_index| %>
-                    <td class="relative border-gray-300 border border-l-0 border-t-0 p-2 text-xs md:text-sm align-top">
-                        <div class="flex flex-col gap-y-4 items-start">
-                        <% get_data_at(table, row_index, col_index).each_with_index do |data, data_index| %>
-                        <%= render :partial => "capability_item", :locals => { key: data[:key], label: data[:label], description: data[:description], value: data[:value] } %>
-                        <% end %>
-                        </div>
-                    </td>
+                    <%= render :partial => "capability_list", :locals => { table: table, row_index: row_index, col_index: col_index } %>
                 <% end %>
             </tr>
             <% end %>

diff --git a/cdmm/app/views/shared/_tristate_checkbox.html.erb b/cdmm/app/views/shared/_tristate_checkbox.html.erb
@@ -2,18 +2,18 @@
     <input name="<%= input_name %>" type="hidden" value="unchecked" data-tristate-checkbox-target="value">
     <div data-tristate-checkbox-target="unchecked">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-full h-full text-slate-300">
-            <rect x="1" y="1" width="22" height="22" rx="4" ry="4" fill="none" stroke-width="2" stroke="currentColor" />
+            <rect x="1" y="1" width="22" height="22" rx="4" ry="4" fill="#fff" stroke-width="2" stroke="currentColor" />
         </svg>
     </div>
     <div data-tristate-checkbox-target="checked">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-full h-full text-blue-500">
-            <rect x="1" y="1" width="22" height="22" rx="4" ry="4" fill="none" stroke-width="2" stroke="currentColor" />
+            <rect x="1" y="1" width="22" height="22" rx="4" ry="4" fill="#fff" stroke-width="2" stroke="currentColor" />
             <path d="M6 14l4 4l8 -12" fill="none" stroke-width="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
     </div>
     <div data-tristate-checkbox-target="inapplicable">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-full h-full text-red-500">
-            <rect x="1" y="1" width="22" height="22" rx="4" ry="4" fill="none" stroke-width="2" stroke="currentColor" />
+            <rect x="1" y="1" width="22" height="22" rx="4" ry="4" fill="#fff" stroke-width="2" stroke="currentColor" />
             <path d="M6 6l12 12M18 6l-12 12" fill="none" stroke-width="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
     </div>