Use Turbo Frame for picture dialog for

app/controllers/alchemy/admin/pictures_controller.rb

@@ -12,7 +12,7 @@ class PicturesController < Alchemy::Admin::ResourcesController
       before_action :load_resource,
         only: [:show, :edit, :update, :url, :destroy]
 
-      before_action :set_size, only: [:index, :show, :edit_multiple]
+      before_action :set_size, only: [:index, :show, :edit_multiple, :update]
 
       authorize_resource class: Alchemy::Picture
 

app/views/alchemy/admin/pictures/_form.html.erb

@@ -1,14 +1,16 @@
-<%= alchemy_form_for [:admin, @picture] do |f| %>
-  <%= f.input :name %>
-  <%= render "picture_description_field", f: f %>
-  <%= render Alchemy::Admin::TagsAutocomplete.new(additional_class: "input") do %>
-    <%= f.label :tag_list %>
-    <%= f.text_field :tag_list, value: f.object.tag_list.join(",") %>
-    <small class="hint"><%= Alchemy.t('Please seperate the tags with commata') %></small>
+<%= turbo_frame_tag(@picture) do %>
+  <%= alchemy_form_for [:admin, @picture] do |f| %>
+    <%= f.input :name %>
+    <%= render "picture_description_field", f: f %>
+    <%= render Alchemy::Admin::TagsAutocomplete.new(additional_class: "input") do %>
+      <%= f.label :tag_list %>
+      <%= f.text_field :tag_list, value: f.object.tag_list.join(",") %>
+      <small class="hint"><%= Alchemy.t('Please seperate the tags with commata') %></small>
+    <% end %>
+    <%= hidden_field_tag :q, search_filter_params[:q] %>
+    <%= hidden_field_tag :size, @size %>
+    <%= hidden_field_tag :tagged_with, search_filter_params[:tagged_with] %>
+    <%= hidden_field_tag :filter, search_filter_params[:filter] %>
+    <%= f.submit Alchemy.t(:save) %>
   <% end %>
-  <%= hidden_field_tag :q, search_filter_params[:q] %>
-  <%= hidden_field_tag :size, @size %>
-  <%= hidden_field_tag :tagged_with, search_filter_params[:tagged_with] %>
-  <%= hidden_field_tag :filter, search_filter_params[:filter] %>
-  <%= f.submit Alchemy.t(:save) %>
 <% end %>

app/views/alchemy/admin/pictures/index.html.erb

@@ -99,7 +99,7 @@
         $(".selected_item_tools").toggleClass("hidden")
         return false;
       });
-      $('.thumbnail_background').on("click", function(event) {
+      $('#picture_archive').on("click", ".thumbnail_background", function(event) {
         var url = $(this).attr('href');
         var overlay = new Alchemy.ImageOverlay(url);
         overlay.open();

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

@@ -0,0 +1,6 @@
+<alchemy-growl type=<%= @message[:type] %>>
+  <%= @message[:body] %>
+</alchemy-growl>
+<%= turbo_stream.replace("picture_#{@picture.id}") do %>
+  <%= render "picture", picture: @picture %>
+<% end %>

spec/features/admin/picture_library_integration_spec.rb

@@ -100,4 +100,23 @@
       expect(page).to have_field("Description", with: "This is an amazing image.")
     end
   end
+
+  describe "Updating Pictures", :js do
+    let!(:picture) { create(:alchemy_picture) }
+
+    scenario "allows to update a pictures name" do
+      visit alchemy.admin_pictures_path
+      page.find("a.thumbnail_background").click
+      expect(page).to have_field("Name")
+      fill_in "Name", with: "my-amazing-image"
+      click_button "Save"
+      within "#flash_notices" do
+        expect(page).to have_content("Picture updated successfully")
+      end
+      find(".zoomed-picture-background").click
+      within "#picture_#{picture.id} .picture_name" do
+        expect(page).to have_content("my-amazing-image")
+      end
+    end
+  end
 end