Enabled editing the title of a collection via Stimulus

app/components/collections/title/component.html.erb

@@ -0,0 +1,19 @@
+<span contenteditable="<%= @editable %>"
+      class="relative peer <%= css_classes %>"
+      data-controller="editable-title"
+      data-editable-title-url-value="<%= @path %>"
+      data-action="<%= actions %>"
+  >
+  <%= @title %>
+</span>
+<% if @editable %>
+  <span class="
+    inline-block
+    ml-2
+    invisible
+    peer-focus:invisible!
+    peer-hover:visible"
+  >
+    <%= heroicon 'pencil', options: { class: 'w-4 h-4 text-midnight-800' } %>
+  </span>
+<% end %>

app/components/collections/title/component.rb

@@ -0,0 +1,26 @@
+module Collections::Title
+  class Component < ApplicationComponent
+    include ButtonHelper
+
+    option :path
+    option :title
+    option :editable
+
+    def css_classes
+      if @editable
+        'hover:underline
+        focus:outline-none
+        focus:border
+        focus:rounded-md
+        focus:px-2'
+      end
+    end
+
+    def actions
+      if @editable
+        'blur->editable-title#update
+        keydown.enter->editable-title#update'
+      end
+    end
+  end
+end

app/controllers/collections_controller.rb

@@ -5,7 +5,7 @@ class CollectionsController < ApplicationController
   include Filterable
 
   load_resource only: %i[discard undiscard new_transition create_transition confirm_destroy]
-  load_and_authorize_resource only: %i[show new destroy]
+  load_and_authorize_resource only: %i[show new destroy update]
 
   before_action :require_user, only: %i[index create_collection new_transition create_transition]
   before_action :ensure_valid_config
@@ -54,6 +54,14 @@ def new
     end
   end
 
+  def update
+    if @collection.update(update_collection_params)
+      render json: @collection
+    else
+      render json: { errors: @collection.errors.full_messages }, status: :unprocessable_entity
+    end
+  end
+
   # Create a new collection from an interpolation of a saved scenario
   #
   # GET /collections/new_transition
@@ -63,6 +71,7 @@ def new_transition
   end
 
   def show
+    @editable = @collection.user == current_user
     respond_to do |format|
       format.html { render layout: 'application' }
     end
@@ -176,6 +185,10 @@ def ensure_valid_config
       notice: 'Missing collections.uri setting in config.yml'
   end
 
+  def update_collection_params
+    params.require(:collection).permit(:title)
+  end
+
   def create_collection_params
     params.require(:collection).permit(:title, :version, saved_scenario_ids: [])
   end

app/controllers/saved_scenarios_controller.rb

@@ -168,32 +168,32 @@ def undiscard
 
   private
 
-    def user_saved_scenarios
-      current_user
-        .saved_scenarios
-        .available
-        .includes(:featured_scenario, :users)
-        .order("updated_at DESC")
-    end
+  def user_saved_scenarios
+    current_user
+      .saved_scenarios
+      .available
+      .includes(:featured_scenario, :users)
+      .order("updated_at DESC")
+  end
 
-    # Use callbacks to share common setup or constraints between actions.
-    def set_saved_scenario
-      @saved_scenario = SavedScenario.find(params[:id])
-    end
+  # Use callbacks to share common setup or constraints between actions.
+  def set_saved_scenario
+    @saved_scenario = SavedScenario.find(params[:id])
+  end
 
-    # Only allow a list of trusted parameters through.
-    def saved_scenario_params
-      params.require(:saved_scenario).permit(
-        :scenario_id, :scenario_id_history, :title,
-        :description, :area_code, :end_year, :private,
-        :created_at, :updated_at, :discarded_at
-      )
-    end
+  # Only allow a list of trusted parameters through.
+  def saved_scenario_params
+    params.require(:saved_scenario).permit(
+      :scenario_id, :scenario_id_history, :title,
+      :description, :area_code, :end_year, :private,
+      :created_at, :updated_at, :discarded_at
+    )
+  end
 
-    # Only allow a list of trusted parameters through.
-    def saved_scenario_update_params
-      params.require(:saved_scenario).permit(
-        :title, :description
-      )
-    end
+  # Only allow a list of trusted parameters through.
+  def saved_scenario_update_params
+    params.require(:saved_scenario).permit(
+      :title, :description
+    )
+  end
 end

app/javascript/controllers/editable_title_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static values = { url: String };
+
+  connect() {
+    this.originalText = this.element.innerText.trim();
+    this.element.setAttribute("spellcheck", "false");
+  }
+
+  async update(event) {
+    if (event.type === "keydown" && event.key === "Enter") {
+      event.preventDefault();
+      this.element.blur();
+      return;
+    }
+
+    const newTitle = this.element.innerText.trim();
+
+    if (newTitle === "" || newTitle === this.originalText) {
+      this.element.innerText = this.originalText;
+      return;
+    }
+
+    try {
+      const response = await fetch(this.urlValue, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector("[name='csrf-token']").content
+        },
+        body: JSON.stringify({ collection: { title: newTitle } })
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to update title");
+      }
+
+      this.originalText = newTitle;
+    } catch (error) {
+      alert("Error updating title");
+      this.element.innerText = this.originalText;
+    }
+  }
+}

app/views/collections/show.html.erb

@@ -1,4 +1,10 @@
-<%- content_for :menu_title, @collection.title %>
+<%- content_for :menu_title do %>
+  <%= render(Collections::Title::Component.new(
+    path: collection_path(@collection),
+    title: @collection.title,
+    editable: @editable
+  ))%>
+<% end %>
 <%- content_for :title, "#{@collection.title} - #{t('collections.title')} - #{t('meta.title')}" %>
 <%= render(partial: "collections/show/block_right_menu", locals: { collection: @collection })%>
 

config/routes.rb

@@ -96,7 +96,7 @@
     end
   end
 
-  resources :collections, only: %i[index show new destroy] do
+  resources :collections, only: %i[index show new destroy update] do
     collection do
       get :list
       post :list

spec/controllers/collections_controller_spec.rb

@@ -238,4 +238,63 @@
       end
     end
   end
+
+  describe 'PUT update' do
+    let(:user) { create(:user) }
+    let(:other_user) { create(:user) }
+    let(:collection) { create(:collection, title: 'Old title', user: user) }
+    let(:new_title) { 'New title' }
+
+    before do
+      sign_in user
+    end
+
+    context 'with a valid title' do
+      before do
+        put :update, params: { id: collection.id, collection: { title: new_title } }, format: :json
+      end
+
+      it 'updates the title of the collection' do
+        expect(collection.reload.title).to eq(new_title)
+      end
+
+      it 'returns the updated collection as JSON' do
+        expect(response).to have_http_status(:ok)
+        json_response = JSON.parse(response.body)
+        expect(json_response['title']).to eq(new_title)
+      end
+    end
+
+    context 'with an invalid title' do
+      before do
+        put :update, params: { id: collection.id, collection: { title: '' } }, format: :json
+      end
+
+      it 'does not update the title of the collection' do
+        expect(collection.reload.title).to eq('Old title')
+      end
+
+      it 'returns an error JSON response' do
+        expect(response).to have_http_status(:unprocessable_entity)
+        json_response = JSON.parse(response.body)
+        expect(json_response['errors']).to include("Title can't be blank")
+      end
+    end
+
+    context 'when the user does not own the collection or have update permissions' do
+      before do
+        sign_out user
+        sign_in other_user
+        put :update, params: { id: collection.id, collection: { title: new_title } }, format: :json
+      end
+
+      it 'does not update the title of the collection' do
+        expect(collection.reload.title).to eq('Old title')
+      end
+
+      it 'cannot find the unowned collection' do
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+  end
 end