Merge pull request #13 from chonla/main

feat: Auto-save, Add default title

cdmm/app/controllers/cdmm_controller.rb

@@ -1,12 +1,35 @@
 class CdmmController < ApplicationController
+    # Viewing
+    # if form_key is empty, it will create a draft version and show the default data
+    # if form_key is in the database, it will populate data and show them
+    # if form_key is not in the database, show not_found
+
+    # Saving with form_key will always success too
+    # if form_key is not in the database, it will show not found
+    # if form_key is in the database, it will update the data and change draft to published.
+    # once form data is published, it will never be changed back to draft
+
+    # Purging
+    # draft form will be purged regularly
+
     def index
-        @table = evaluation_table
+        form_key = generate_unique_form_key
+        # Auto create a draft
+        ev = Evaluation.new(evaluation_params.merge(form_key: form_key))
+        ev.form_status = :draft
+        if ev.save
+            redirect_to evaluation_show_path(ev.form_key), notice: 'Draft evaluation was successfully created.'
+        else
+            # Handle errors (e.g., re-render the form with errors)
+            render_internal_server_error
+        end
     end
 
     def show()
         @form = Evaluation.find_by(form_key: params[:form_key])
         if @form
-            @table = evaluation_table(@form)
+            form_key = params[:form_key]
+            @table = evaluation_table(@form, form_key)
         else
             render_not_found
         end
@@ -26,9 +49,21 @@ def save()
                 return # Prevent further execution
             end
         end
-
+        ev.form_status = :published
         if ev.save
-            redirect_to evaluation_show_path(ev.form_key), notice: 'Evaluation was successfully created.'
+            @table = evaluation_table(ev, form_key)
+            respond_to do |format|
+                format.turbo_stream {
+                  render turbo_stream:
+                  turbo_stream
+                    .replace("evaluation_form",
+                    partial: "form_table",
+                    locals: { table: @table })
+                }
+                format.html {
+                    redirect_to evaluation_show_path(ev.form_key), notice: 'Evaluation was successfully created.'
+                }
+              end          
         else
             # Handle errors (e.g., re-render the form with errors)
             render_internal_server_error
@@ -41,8 +76,12 @@ def load_form_value(cell, form_data)
         cell[:value] = form_data[cell[:key]]
     end
 
-    def evaluation_table(form_data = nil)
+    def evaluation_table(form_data = nil, form_key = nil)
+        default_table_title = Date.today.strftime("%B %d, %Y")
         table = {
+            :form_key => form_key ? form_key : "",
+            :form_status => :draft,
+            :title => "Untitled - #{default_table_title}",
             :col_headers => [ "Initial", "Managed", "Defined", "Qualitatively Managed", "Optimizing" ],
             :row_headers => [ "Culture & Organization", "Build & Deploy", "Release", "Data Management", "Test & Verification", "Information & Reporting" ],
             :rows => [
@@ -550,7 +589,7 @@ def evaluation_table(form_data = nil)
                 end
             end
         end
-      
+
         table
     end
 
@@ -630,8 +669,10 @@ def evaluation_form
     end
 
     def evaluation_params
+        # Do not put form_status here to prevent status injection.
         params.permit(
             :form_key, # Make sure to permit form_key
+            :title,
             *evaluation_form
         )
     end

cdmm/app/javascript/controllers/auto_submit_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+import { useDebounce } from 'stimulus-use'
+
+// Connects to data-controller="auto-submit"
+export default class extends Controller {
+  static targets = [ 'savingIcon', 'savedIcon' ];
+  static debounces = [ 'submit' ];
+
+  connect() {
+    useDebounce(this, { wait: 2500 });
+    this.savedIconTarget.classList.add('hidden');
+    this.savingIconTarget.classList.add('hidden');
+  }
+
+  dirty(event) {
+    event.preventDefault()
+    this.savingIconTarget.classList.add('hidden');
+    this.savedIconTarget.classList.add('hidden');
+  }
+
+  submit(event) {
+    event.preventDefault()
+    this.savingIconTarget.classList.remove('hidden');
+    this.savedIconTarget.classList.add('hidden');
+    this.element.requestSubmit();
+    this.savingIconTarget.classList.add('hidden');
+    this.savedIconTarget.classList.remove('hidden');
+  }
+}

cdmm/app/javascript/controllers/tristate_checkbox_controller.js

@@ -3,7 +3,7 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="tristate-checkbox"
 export default class extends Controller {
   static targets = [ "unchecked", "checked", "inapplicable", "value" ];
-  static values = { state: String };
+  static values = { state: String, identifier: String };
 
   connect() {
     this.state = this.stateValue || "unchecked";
@@ -21,6 +21,7 @@ export default class extends Controller {
       }
     }
     this.updateView();
+    this.dispatch('toggled', { prefix: this.identifierValue });
   }
 
   updateView() {

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

@@ -1,6 +1,6 @@
 <div class="flex flex-row" data-controller="event-sensor" data-event-sensor-identifier-value="<%= key %>">
     <div class="mr-2">
-        <%= render "shared/tristate_checkbox", state: value, identifier: key, event_sensor: "#{key}:triggered" %>
+        <%= 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>

cdmm/app/views/cdmm/_cdmm_form.html.erb

@@ -0,0 +1,35 @@
+<%= form_with url: evaluation_save_path, method: :post, data: { controller: "auto-submit", action: "capability:toggled@window->auto-submit#dirty capability:toggled@window->auto-submit#submit", turbo_stream: true } do |form|  %>
+    <% if table[:form_key] %>
+    <input type="hidden" name="form_key" value="<%= table[:form_key] %>">
+    <% end %>
+    <div class="flex flex-row justify-between items-center mb-2">
+        <div class="flex flex-col">
+            <div class="flex flex-row justify-start items-center gap-x-2">
+                <h1 class="noto-serif-thai-bold text-xl md:text-2xl lg:text-3xl leading-normal lg:leading-relaxed"><%= table[:title] %></h1>
+                <div data-auto-submit-target="savingIcon" class="h-5 md:h-6 lg:h-8 flex flex-row gap-x-1 items-baseline">
+                    <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" class="text-slate-500" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+                        <g transform="translate(0, -2) matrix(1.01508,0,0,1,0.0940615,0.0723927)">
+                            <path d="M4.38,19.443C2.455,19.443 0.892,17.88 0.892,15.955C0.892,14.03 2.455,12.467 4.38,12.467C4.448,12.467 4.516,12.469 4.583,12.473C4.583,12.471 4.583,12.469 4.583,12.467C4.583,10.265 6.372,8.476 8.574,8.476C8.857,8.476 9.133,8.506 9.399,8.562C9.817,6.205 11.877,4.412 14.353,4.412C17.129,4.412 19.383,6.666 19.383,9.443C19.383,9.556 19.38,9.668 19.372,9.78C21.24,10.505 22.566,12.32 22.566,14.443C22.566,17.202 20.325,19.443 17.566,19.443C17.561,19.443 17.557,19.443 17.553,19.443L4.38,19.443Z" style="fill:none;stroke:currentColor;stroke-width:1.98px;"/>
+                        </g>
+                    </svg>
+                    <span class="text-sm md:text-lg lg:text-lg">Saving...</span>
+                </div>
+                <div data-auto-submit-target="savedIcon" class="h-5 md:h-6 lg:h-8 flex flex-row gap-x-1">
+                    <svg viewBox="0 0 24 24" version="1.1" class="text-blue-600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+                        <g transform="translate(0, -2)">
+                            <g transform="matrix(1.01508,0,0,1,0.0940615,0.0723927)">
+                                <path d="M4.38,19.443C2.455,19.443 0.892,17.88 0.892,15.955C0.892,14.03 2.455,12.467 4.38,12.467C4.448,12.467 4.516,12.469 4.583,12.473C4.583,12.471 4.583,12.469 4.583,12.467C4.583,10.265 6.372,8.476 8.574,8.476C8.857,8.476 9.133,8.506 9.399,8.562C9.817,6.205 11.877,4.412 14.353,4.412C17.129,4.412 19.383,6.666 19.383,9.443C19.383,9.556 19.38,9.668 19.372,9.78C21.24,10.505 22.566,12.32 22.566,14.443C22.566,17.202 20.325,19.443 17.566,19.443C17.561,19.443 17.557,19.443 17.553,19.443L4.38,19.443Z" style="fill:none;stroke:currentColor;stroke-width:1.98px;"/>
+                            </g>
+                            <g transform="matrix(0.897531,0,0,0.856767,1.71728,1.40309)">
+                                <path d="M7,14L9.777,16.777L16.759,9.796" style="fill:none;stroke:currentColor;stroke-width:2.28px;"/>
+                            </g>
+                        </g>
+                    </svg>
+                    <span class="text-sm md:text-lg lg:text-lg">Saved</span>
+                </div>
+            </div>
+            <h4 class="noto-serif-thai-regular text-slate-400 text-sm md:text-lg lg:text-lg leading-loose">Continuous Delivery Maturity Model</h4>
+        </div>
+    </div>
+    <%= render "form_table", table: table %>
+<% end %>

cdmm/app/views/cdmm/_form_table.html.erb

@@ -1,26 +1,28 @@
-<table class="border-separate table-fixed border-spacing-0">
-    <thead class="sticky top-0 z-10">
-        <tr>
-            <th class="border-gray-300 bg-slate-100 border p-2 text-xs md:text-sm sticky left-0 z-20"></th>
-            <% table[:col_headers].each_with_index do |col_header, col_index| %>
-            <th class="border-gray-300 bg-slate-100 border border-l-0 p-2 text-center text-xs md:text-sm font-bold z-10 relative"><%= col_header %></th>
+<%= turbo_frame_tag "evaluation_form", data: { turbo_cache_control: "no-cache" } do %>
+    <table class="border-separate table-fixed border-spacing-0">
+        <thead class="sticky top-0 z-10">
+            <tr>
+                <th class="border-gray-300 bg-slate-100 border p-2 text-xs md:text-sm sticky left-0 z-20"></th>
+                <% table[:col_headers].each_with_index do |col_header, col_index| %>
+                <th class="border-gray-300 bg-slate-100 border border-l-0 p-2 text-center text-xs md:text-sm font-bold z-10 relative"><%= col_header %></th>
+                <% end %>
+            </tr>
+        </thead>
+        <tbody>
+            <% table[:row_headers].each_with_index do |row_header, row_index| %>
+            <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>
+                <% end %>
+            </tr>
             <% end %>
-        </tr>
-    </thead>
-    <tbody>
-        <% table[:row_headers].each_with_index do |row_header, row_index| %>
-        <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>
-            <% end %>
-        </tr>
-        <% end %>
-    </tbody>
-</table>
+        </tbody>
+    </table>
+<% end %>

cdmm/app/views/cdmm/show.html.erb

@@ -1,15 +1,3 @@
 <div class="w-full">
-    <%= form_with url: evaluation_save_path, method: :post, data: { turbo: false } do |form|  %>
-        <input type="hidden" name="form_key" value="<%= params[:form_key] %>">
-        <div class="flex flex-row justify-between items-center">
-            <h1 class="noto-serif-thai-bold text-xl md:text-2xl lg:text-3xl leading-loose">Continuous Delivery Maturity Model</h1>
-            <button class="p-2 border rounded w-8 h-8 bg-slate-700" data-action="click->page-capture#capture">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-full h-full text-slate-100">
-                    <path d="M1 12l0 9l22 0l0 -9" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
-                    <path d="M12 2l0 14M5 10l7 6l7 -6" fill="none" stroke-width="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
-            </button>
-        </div>
-        <%= render "form_table", table: @table %>
-    <% end %>
+    <%= render "cdmm_form", table: @table %>
 </div>

cdmm/app/views/shared/_tristate_checkbox.html.erb

@@ -1,5 +1,5 @@
 <div class="w-5 h-5 overflow-hidden cursor-pointer" data-controller="tristate-checkbox" data-action="click->tristate-checkbox#toggle <%= "#{event_sensor}@window->tristate-checkbox#toggle" if defined?(event_sensor) %>" data-tristate-checkbox-state-value="<%= state %>" data-tristate-checkbox-identifier-value="<%= identifier %>">
-    <input name="<%= identifier %>" type="hidden" value="unchecked" data-tristate-checkbox-target="value">
+    <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" />

cdmm/config/importmap.rb

@@ -2,6 +2,7 @@
 
 pin "application"
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
-pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "stimulus-use" # @0.52.2

cdmm/db/migrate/20241022091416_add_form_status.rb

@@ -0,0 +1,6 @@
+class AddFormStatus < ActiveRecord::Migration[7.2]
+  def change
+    add_column :evaluations, :form_status, :string
+    add_index :evaluations, :form_status, unique: false
+  end
+end