insert error tag below edit of row if form is invalid

puzzle · Feb 23, 2024 · 2bf2ad9 · 2bf2ad9
1 parent fe5e7d6
commit 2bf2ad9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 21 deletions.
diff --git a/app/views/skills/_row.html.haml b/app/views/skills/_row.html.haml
@@ -0,0 +1,21 @@
+= form_with(model: @skill) do |f|
+  .row.border.border-top.table-light.table-hover.table-row{"data-controller" => "table"}
+    .col-2.d-flex.align-items-center
+      = f.text_field :title, class: "form-control", value: @skill.title
+    .col-1.bg-light.d-flex.align-items-center
+      [email protected]
+    .col-3.d-flex.align-items-center
+      = f.collection_select :category_id, Category.all_parents { |category| category.title}, :id, :title, {:selected => @skill.category.parent.id}, class: "form-select w-100", data: {action: "change->table#adjustChildren", table_target: "parentSelect"}
+    .col-2.bg-light.d-flex.align-items-center
+      = f.collection_select :category_id, @skill.category.parent.children, :id, :title, {:selected => @skill.category.id}, class: "form-select w-100", data: {table_target: "childSelect"}
+    .col-1.d-flex.align-items-center
+      =f.check_box :default_set, class: "form-check-input", checked: @skill.default_set
+    .col-1.bg-light.d-flex.align-items-center
+      = f.select :radar, Settings.radar, {:selected => @skill.radar}, class: "form-select radar-select"
+    .col-1.d-flex.align-items-center
+      = f.select :portfolio, Settings.portfolio, {:selected => @skill.portfolio}, class: "form-select portfolio-select"
+    .col-1
+      %div.h-100.d-flex.justify-content-center.align-items-center
+        = image_submit_tag("/assets/floppy2-fill.svg")
+        = link_to skills_path, class: "ms-3" do
+          %img.pointer.save-button{:src=> "/assets/x.svg",:height=>"16"}
diff --git a/app/views/skills/edit.html.haml b/app/views/skills/edit.html.haml
@@ -1,24 +1,4 @@
 %div
   %h1.font-bold.text-2xl.mb-3 Editing Skill
   %turbo-frame{id: "#{dom_id @skill}"}
-    = form_with(model: @skill) do |f|
-      .row.border.border-top.table-light.table-hover.table-row{"data-controller" => "table"}
-        .col-2.d-flex.align-items-center
-          = f.text_field :title, class: "form-control", value: @skill.title
-        .col-1.bg-light.d-flex.align-items-center
-          [email protected]
-        .col-3.d-flex.align-items-center
-          = f.collection_select :category_id, Category.all_parents { |category| category.title}, :id, :title, {:selected => @skill.category.parent.id}, class: "form-select w-100", data: {action: "change->table#adjustChildren", table_target: "parentSelect"}
-        .col-2.bg-light.d-flex.align-items-center
-          = f.collection_select :category_id, @skill.category.parent.children, :id, :title, {:selected => @skill.category.id}, class: "form-select w-100", data: {table_target: "childSelect"}
-        .col-1.d-flex.align-items-center
-          =f.check_box :default_set, class: "form-check-input", checked: @skill.default_set
-        .col-1.bg-light.d-flex.align-items-center
-          = f.select :radar, Settings.radar, {:selected => @skill.radar}, class: "form-select radar-select"
-        .col-1.d-flex.align-items-center
-          = f.select :portfolio, Settings.portfolio, {:selected => @skill.portfolio}, class: "form-select portfolio-select"
-        .col-1
-          %div.h-100.d-flex.justify-content-center.align-items-center
-            = image_submit_tag("/assets/floppy2-fill.svg")
-            = link_to skills_path, class: "ms-3" do
-              %img.pointer.save-button{:src=> "/assets/x.svg",:height=>"16"}
+    = render "skills/row", skill: @skill
diff --git a/app/views/skills/edit.turbo_stream.erb b/app/views/skills/edit.turbo_stream.erb
@@ -0,0 +1,12 @@
+<%= turbo_stream.update "#{dom_id @skill}" do %>
+  <%= render "row", skill: @skill %>
+  <% if @skill.errors.any? %>
+    <div class="alert alert-danger mt-2">
+      <ul class="mb-0">
+        <% @skill.errors.full_messages.each do |error| %>
+          <li><%= error %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+<% end %>