Merge pull request #2867 from tvdeyen/turbo-frame-legacy-page-urls

Convert legacy page urls panel into Turbo Frame

app/assets/stylesheets/alchemy/base.scss

@@ -166,3 +166,7 @@ a img {
   margin-top: 0;
   margin-bottom: 0;
 }
+
+.p-0 {
+  padding: 0 !important;
+}

app/assets/stylesheets/alchemy/forms.scss

@@ -87,48 +87,48 @@ form {
       }
     }
 
-    &.field_with_errors {
-      input[type="text"],
-      input[type="email"],
-      input[type="password"],
-      textarea,
-      .select2-choices {
-        @extend %field-with-error;
-      }
+    &.language_locale small.error {
+      @include form-hint(
+        $background-color: $error_background_color,
+        $border-color: $error_border_color
+      );
+      text-align: left;
+    }
+  }
 
-      .select2-choice,
-      .select2-choices {
-        border-color: $error_border_color;
-        color: $error_text_color;
-        margin-bottom: 4px;
+  .field_with_errors {
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    textarea,
+    .select2-choices {
+      @extend %field-with-error;
+    }
 
-        input[type="text"] {
-          box-shadow: none;
-        }
-      }
+    .select2-choice,
+    .select2-choices {
+      border-color: $error_border_color;
+      color: $error_text_color;
+      margin-bottom: 4px;
 
-      label {
-        color: $error_text_color;
+      input[type="text"] {
+        box-shadow: none;
       }
     }
 
-    small.error {
+    label {
       color: $error_text_color;
-      display: block;
-      margin-left: $form-left-width;
-      line-height: 1.5em;
-      clear: both;
-      text-align: right;
-      margin-bottom: 0.25em;
     }
+  }
 
-    &.language_locale small.error {
-      @include form-hint(
-        $background-color: $error_background_color,
-        $border-color: $error_border_color
-      );
-      text-align: left;
-    }
+  small.error {
+    color: $error_text_color;
+    display: block;
+    margin-left: $form-left-width;
+    line-height: 1.5em;
+    clear: both;
+    text-align: right;
+    margin-bottom: 0.25em;
   }
 
   .input-addon {

app/assets/stylesheets/alchemy/tables.scss

@@ -11,8 +11,29 @@ table {
   }
 }
 
+.table {
+  display: flex;
+  flex-direction: column;
+  row-gap: $default-padding;
+
+  .row,
+  header {
+    display: flex;
+  }
+
+  .col {
+    flex: 1;
+  }
+
+  .tools {
+    flex: 0;
+    white-space: nowrap;
+  }
+}
+
 .list td,
-.list th {
+.list th,
+.table .col {
   padding: 2 * $default-padding 3 * $default-padding;
   vertical-align: top;
   line-height: 22px;
@@ -42,27 +63,35 @@ table {
   }
 }
 
-th {
+th,
+.table header .col {
   white-space: nowrap;
   text-align: left;
   vertical-align: top;
   border-bottom: 1px solid $medium-gray;
   font-weight: bold;
 }
 
-tr.even td {
+tr.even td,
+.table .row.even .col {
   background-color: $table-row-even-background-color;
 }
 
-tr.odd td {
+tr.odd td,
+.table .row.odd .col {
   background-color: $table-row-odd-background-color;
 }
 
-.list tr .tools {
-  width: 40px;
+.list tr .tools,
+.table .row .col.tools {
   padding: $default-padding 2 * $default-padding;
   white-space: nowrap;
   @extend .disable-user-select;
+  background-color: transparent;
+}
+
+.list tr .tools {
+  width: 40px;
 
   &.long {
     width: 60px;
@@ -81,12 +110,14 @@ td.heading {
   margin: 2px 0;
 }
 
-.list tr:hover td {
+.list tr:hover td,
+.table .row:hover .col {
   background-color: $table-row-hover-color;
 }
 
 td,
-th {
+th,
+.table .col {
   &.center,
   &.boolean {
     text-align: center;
@@ -97,7 +128,8 @@ th {
   }
 }
 
-td {
+td,
+.table .col {
   &.file_name {
     white-space: nowrap;
   }

app/controllers/alchemy/admin/legacy_page_urls_controller.rb

@@ -9,22 +9,26 @@ def new
     end
 
     def create
-      @legacy_page_url = @page.legacy_urls.build(legacy_page_url_params)
-      @legacy_page_url.save
+      @legacy_page_url = @page.legacy_urls.create(legacy_page_url_params)
+      @message = message_for_resource_action
+    end
+
+    def show
     end
 
     def update
       @legacy_page_url = LegacyPageUrl.find(params[:id])
       if @legacy_page_url.update(legacy_page_url_params)
+        @message = message_for_resource_action
         render :update
       else
         render :edit
       end
     end
 
     def destroy
-      @legacy_page_url = LegacyPageUrl.find(params[:id])
-      @legacy_page_url.destroy
+      @page.legacy_urls.destroy(@legacy_page_url)
+      @message = message_for_resource_action
     end
 
     private
@@ -33,6 +37,10 @@ def load_page
       @page = Page.find(params[:page_id])
     end
 
+    def load_resource
+      @legacy_page_url = LegacyPageUrl.find(params[:id])
+    end
+
     def legacy_page_url_params
       params.require(:legacy_page_url).permit(:urlname)
     end

app/views/alchemy/admin/legacy_page_urls/_legacy_page_url.html.erb

@@ -1,17 +1,16 @@
-<tr class="even" id="<%= dom_id(legacy_page_url) %>">
-  <td class="name"><%= legacy_page_url.urlname %></td>
-  <td class="tools">
+<%= turbo_frame_tag(legacy_page_url, class: ["row", cycle("even", "odd")]) do %>
+  <div class="col name"><%= legacy_page_url.urlname %></div>
+  <div class="col tools">
     <sl-tooltip content="<%= Alchemy.t(:edit) %>">
-      <%= link_to_dialog render_icon(:edit),
+      <%= link_to render_icon(:edit),
         edit_admin_legacy_page_url_path(legacy_page_url, page_id: @page.id),
-        {size: '400x125', title: Alchemy.t('Edit link')},
-        class: "icon_button" %>
+        class: "icon_button", data: { turbo_frame: dom_id(legacy_page_url)} %>
     </sl-tooltip>
     <sl-tooltip content="<%= Alchemy.t(:remove) %>">
-      <%= link_to_confirm_dialog render_icon(:minus),
-        Alchemy.t('Are you sure?'),
+      <%= link_to render_icon(:minus),
         admin_legacy_page_url_path(legacy_page_url, page_id: @page.id),
-        class: "icon_button" %>
+        class: "icon_button",
+        data: { turbo_method: :delete, turbo_confirm: Alchemy.t('Are you sure?') } %>
     </sl-tooltip>
-  </td>
-</tr>
+  </div>
+<% end %>

app/views/alchemy/admin/legacy_page_urls/_new.html.erb

@@ -1,20 +1,18 @@
-<%= alchemy_form_for [:admin, @legacy_page_url ||= @page.legacy_urls.build],
-  id: 'new_legacy_page_url' do |f| %>
-  <% if @legacy_page_url.errors.any? %>
-    <%= render_message :error do %>
-      <%= @legacy_page_url.errors.full_messages.join %>
+<%= turbo_frame_tag "new_legacy_page_url" do %>
+  <%= alchemy_form_for [:admin, legacy_page_url] do |f| %>
+    <% if legacy_page_url.errors.any? %>
+      <%= render_message :error do %>
+        <%= legacy_page_url.errors.full_messages.join %>
+      <% end %>
     <% end %>
-  <% end %>
-  <%= hidden_field_tag :page_id, @page.id %>
-  <div class="inline-input">
-    <div class="left-column">
-      <%= f.text_field :urlname, placeholder: Alchemy::LegacyPageUrl.human_attribute_name(:urlname) %>
-    </div>
-    <div class="right-column">
-      <button class="with_icon">
-        <%= render_icon(:plus) %>
-        <%= Alchemy.t(:add) %>
-      </button>
+    <%= hidden_field_tag :page_id, @page.id %>
+    <div class="inline-input">
+      <div class="left-column">
+        <%= f.text_field :urlname, placeholder: Alchemy::LegacyPageUrl.human_attribute_name(:urlname) %>
+      </div>
+      <div class="right-column">
+        <button><%= Alchemy.t(:add) %></button>
+      </div>
     </div>
-  </div>
+  <% end %>
 <% end %>

app/views/alchemy/admin/legacy_page_urls/_table.html.erb

@@ -0,0 +1,16 @@
+<div class="table">
+  <% if legacy_page_urls.any? %>
+    <header>
+      <div class="col name">
+        <%= Alchemy::LegacyPageUrl.human_attribute_name(:urlname) %>
+      </div>
+    </header>
+    <%= render partial: 'alchemy/admin/legacy_page_urls/legacy_page_url',
+      collection: legacy_page_urls %>
+  <% else %>
+    <div class="row even">
+      <div class="col"><%= Alchemy.t('No page links for this page found') %></div>
+      <div class="col tools"></div>
+    </div>
+  <% end %>
+</div>

app/views/alchemy/admin/legacy_page_urls/_update.turbo_stream.erb

@@ -0,0 +1,12 @@
+<%= turbo_stream.update "legacy_urls_label" do %>
+  <%= render "label", count: @page.legacy_urls.size %>
+<% end %>
+<%= turbo_stream.update "legacy_page_urls" do %>
+  <%= render "table", legacy_page_urls: @page.legacy_urls %>
+<% end %>
+<%= turbo_stream.update "new_legacy_page_url" do %>
+  <%= render 'new', legacy_page_url: @page.legacy_urls.build %>
+<% end %>
+<alchemy-growl>
+  <%= @message %>
+</alchemy-growl>

app/views/alchemy/admin/legacy_page_urls/create.turbo_stream.erb

@@ -0,0 +1,8 @@
+<% if @legacy_page_url.valid? %>
+  <%= render "update" %>
+<% else %>
+  <%= turbo_stream.update "new_legacy_page_url" do %>
+    <%= render 'new',
+      legacy_page_url: @legacy_page_url %>
+  <% end %>
+<% end %>

app/views/alchemy/admin/legacy_page_urls/destroy.turbo_stream.erb

@@ -0,0 +1 @@
+<%= render "update" %>

app/views/alchemy/admin/legacy_page_urls/edit.html.erb

@@ -0,0 +1,27 @@
+<%= turbo_frame_tag(@legacy_page_url, class: "row") do %>
+  <div class="col p-0">
+    <%= form_for [:admin, @legacy_page_url] do |f| %>
+      <%= content_tag :div, class: @legacy_page_url.errors.any? ? "field_with_errors" : nil do %>
+        <%= f.text_field :urlname, placeholder: Alchemy::LegacyPageUrl.human_attribute_name(:urlname), autofocus: true %>
+        <% if @legacy_page_url.errors.any? %>
+          <small class="error">
+            <%= @legacy_page_url.errors.full_messages_for(:urlname).join %>
+          </small>
+        <% end %>
+      <% end %>
+      <%= hidden_field_tag :page_id, @legacy_page_url.page_id %>
+    <% end %>
+  </div>
+  <div class="col tools">
+    <sl-tooltip content="<%= Alchemy.t(:save) %>">
+      <%= button_tag type: "submit", form: dom_id(@legacy_page_url, :edit), class: "icon_button" do %>
+        <%= render_icon :check %>
+      <% end %>
+    </sl-tooltip>
+    <sl-tooltip content="<%= Alchemy.t(:cancel) %>">
+      <%= link_to admin_legacy_page_url_path(@legacy_page_url, page_id: @legacy_page_url.page_id), class: "icon_button" do %>
+        <%= render_icon :close %>
+      <% end %>
+    </sl-tooltip>
+  </div>
+<% end %>

app/views/alchemy/admin/legacy_page_urls/show.html.erb

@@ -0,0 +1 @@
+<%= render "legacy_page_url", legacy_page_url: @legacy_page_url %>

app/views/alchemy/admin/legacy_page_urls/update.turbo_stream.erb

@@ -0,0 +1 @@
+<%= render "update" %>