Improve variation and variation idea views and promotion flow

app/controllers/workshop_variations_controller.rb

@@ -102,16 +102,15 @@ def update
   # end
 
   def set_form_variables
-    @workshop = @workshop_variation.workshop || params[:workshop_id].present? &&
-      Workshop.where(id: params[:workshop_id]).last
-    @workshop_variation_idea = params[:workshop_variation_idea_id].present? &&
-      WorkshopVariationIdea.find_by(id: params[:workshop_variation_idea_id])
+    @workshop = @workshop_variation.workshop || (Workshop.find_by(id: params[:workshop_id]) if params[:workshop_id].present?)
+    @workshop_variation_idea = WorkshopVariationIdea.find_by(id: params[:workshop_variation_idea_id]) if params[:workshop_variation_idea_id].present?
   end
 
   def workshop_variation_params
     params.require(:workshop_variation).permit(
       [ :name, :rhino_body, :published, :publicly_visible, :position, :youtube_url, :created_by_id,
-        :organization_id, :workshop_id, :workshop_variation_idea_id, :author_credit_preference
+        :organization_id, :workshop_id, :workshop_variation_idea_id, :author_credit_preference,
+        :windows_type_id
       ]
     )
   end

app/models/workshop_variation.rb

@@ -37,13 +37,13 @@ def self.search_by_params(params)
   has_many :assets, as: :owner, dependent: :destroy
 
   validates :name, presence: true, uniqueness: { scope: :workshop_id, case_sensitive: false }
+  validates :windows_type_id, presence: true
+  validates :author_credit_preference, presence: true
   validates :rhino_body, presence: true
 
   accepts_nested_attributes_for :primary_asset, allow_destroy: true, reject_if: :all_blank
   accepts_nested_attributes_for :gallery_assets, allow_destroy: true, reject_if: :all_blank
 
-  delegate :windows_type, to: :workshop
-
   # Scopes
   # See Publishable, Trendable
 

app/services/workshop_variation_from_idea_service.rb

@@ -18,7 +18,7 @@ def call
 
   def attributes_from_idea
     workshop_variation_idea.attributes.slice(
-      "name", "youtube_url", "position", "workshop_id", "author_credit_preference"
+      "name", "youtube_url", "position", "workshop_id", "windows_type_id", "organization_id", "author_credit_preference"
     ).merge(
       created_by_id: user.id,
       workshop_variation_idea_id: workshop_variation_idea.id,

app/views/workshop_variation_ideas/_form.html.erb

@@ -22,43 +22,26 @@
       </div>
     <% end %>
     <%= render 'shared/errors', resource: workshop_variation_idea if workshop_variation_idea.errors.any? %>
-    <!-- Row 1 -->
-    <div class="grid grid-cols-1 md:grid-cols-1 gap-6 mb-6">
+    <!-- Workshop + Organization -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
       <div>
-        <%= f.input :name,
-                    label: "Variation name",
-                    required: true,
-                    disabled: promoted_to_variation,
-                    input_html: { class: "block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 #{('readonly' if promoted_to_variation)}" } %>
-      </div>
-    </div>
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-      <div>
-        <%= f.input :workshop_id,
-          collection: f.object.workshop.present? ? [[ f.object.workshop.title, f.object.workshop.id]] : [],
-          include_blank: true,
-          required: true,
-          input_html: {
-            data: {
-              controller: "remote-select",
-              remote_select_model_value: "workshop"
-            }
-          },
-          prompt: "Search by title",
-          label: "Workshop",
-          label_html: { class: "block text-sm font-medium text-gray-700 mb-1 #{ 'readonly' if promoted_to_variation}" } %>
-      </div>
-      <div>
-        <%= f.input :windows_type_id,
-                    as: :select,
-                    required: true,
-                    label: "Windows audience",
-                    prompt: "Select audience",
-                    collection: @windows_types, label_method: :short_name, value_method: :id,
-                    disabled: promoted_to_variation,
-                    input_html: {
-                      class: "#{'readonly' if promoted_to_variation} block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                    } %>
+        <% if !promoted_to_variation && (params[:admin] == "true" || f.object.new_record?) %>
+          <%= f.input :workshop_id,
+            collection: f.object.workshop.present? ? [[ f.object.workshop.remote_search_label[:label], f.object.workshop.id]] : [],
+            include_blank: true,
+            required: true,
+            input_html: {
+              class: "h-10 rounded-md",
+              data: {
+                controller: "remote-select",
+                remote_select_model_value: "workshop"
+              }
+            },
+            prompt: "Search by title",
+            label: "Workshop" %>
+        <% elsif f.object.workshop_id.present? %>
+          <%= f.hidden_field :workshop_id, value: f.object.workshop_id %>
+        <% end %>
       </div>
       <div>
         <% if current_user.person&.affiliations&.count != 1 %>
@@ -83,6 +66,29 @@
       </div>
     </div>
 
+    <!-- Name + Windows type -->
+    <div class="flex flex-col md:flex-row md:space-x-4 mb-6">
+      <div class="flex-1">
+        <%= f.input :name,
+                    label: "Variation name",
+                    required: true,
+                    disabled: promoted_to_variation,
+                    input_html: { class: "block w-full h-10 rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 #{('readonly' if promoted_to_variation)}" } %>
+      </div>
+      <div class="w-full md:w-1/3">
+        <%= f.input :windows_type_id,
+                    as: :select,
+                    required: true,
+                    label: "Windows audience",
+                    prompt: "Select audience",
+                    collection: @windows_types, label_method: :short_name, value_method: :id,
+                    disabled: promoted_to_variation,
+                    input_html: {
+                      class: "#{'readonly' if promoted_to_variation} w-full h-10 rounded-md border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none"
+                    } %>
+      </div>
+    </div>
+
     <% if promoted_to_variation %>
       <div class="mt-3 mb-6"><%= workshop_variation_idea.rhino_body %></div>
     <% else %>
@@ -103,11 +109,11 @@
                   collection: AuthorCreditable::IDEA_FORM_OPTIONS,
                   include_blank: "Select a preference",
                   selected: f.object.author_credit_preference,
-                  input_html: { class: "block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
+                  input_html: { class: "block w-full h-10 rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
       <%= f.input :youtube_url,
                   as: :text,
                   label: "YouTube link <span class='text-normal text-sm text-gray-400'>(optional)</span>".html_safe,
-                  hint: "If you already have a video on YouTube you’d like to share",
+                  hint: "If you already have a video on YouTube you'd like to share",
                   disabled: promoted_to_variation,
                   input_html: { rows: 1,
                                 class: ("readonly" if promoted_to_variation)
@@ -127,36 +133,11 @@
                     class: ("readonly" if promoted_to_variation)
                   } %>
     </div>
-    <% if allowed_to?(:manage?, WorkshopVariationIdea) || @user %>
-      <div class="flex flex-col md:flex-row md:space-x-4">
-        <div class="flex-1 mb-4 md:mb-0">
-          <% if promoted_to_variation %>
-            <div class="flex items-center space-x-2">
-              <label class="text-gray-700"> Promoted to Story </label>
-              <% f.object. workshop_variations.each do |workshop_variation| %>
-                <%= link_to workshop_variation.title, workshop_variation_path(workshop_variation), class: "btn btn-secondary-outline" %>
-              <% end %>
-            </div>
-          <% elsif allowed_to?(:manage?, WorkshopVariationIdea) && f.object.persisted? %>
-            <div class="admin-only bg-blue-100 p-3">
-              <%= link_to "Promote to Workshop Variation",
-                          new_workshop_variation_path(workshop_variation_idea_id: @workshop_variation_idea.id),
-                          class: "btn btn-secondary-outline ms-2" %>
-            </div>
-          <% end %>
-        </div>
-      </div>
-    <% end %>
     <%= render "shared/form_image_fields", f: f, include_primary_asset: false unless promoted_to_variation %>
     <div class="action-buttons mt-8 flex justify-center gap-3 pt-6">
-      <% if allowed_to?(:destroy?, f.object) && f.object. workshop_variations.none? && !promoted_to_variation %>
-        <span class="admin-only bg-blue-100 p-3">
-          <%= link_to "Promote to Workshop Variation",
-                      new_workshop_variation_path(workshop_variation_idea_id: f.object.id),
-                      class: "btn btn-secondary-outline" %>
-          <%= link_to "Delete", @workshop_variation_idea, class: "btn btn-danger-outline",
-                      data: { turbo_method: :delete, turbo_confirm: "Are you sure you want to delete?" } %>
-        </span>
+      <% if allowed_to?(:destroy?, f.object) && f.object.workshop_variations.none? && !promoted_to_variation %>
+        <%= link_to "Delete", @workshop_variation_idea, class: "admin-only bg-blue-100 btn btn-danger-outline",
+                    data: { turbo_method: :delete, turbo_confirm: "Are you sure you want to delete?" } %>
       <% end %>
       <% cancel_path =
            if params[:workshop_id].present? && @workshop

app/views/workshop_variation_ideas/edit.html.erb

@@ -1,23 +1,46 @@
 <% content_for(:page_bg_class, "admin-only bg-blue-100") %>
 <div class="<%= DomainTheme.bg_class_for(:workshop_variation_ideas) %> border border-gray-200 rounded-xl shadow p-6">
       <div class="flex flex-wrap justify-end gap-2 mb-4">
-        <%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
         <% if @workshop_variation_idea.workshop_variations.any? %>
           <% @workshop_variation_idea.workshop_variations.each do |workshop_variation| %>
             <%= link_to "View Variation", workshop_variation_path(workshop_variation),
                         class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
           <% end %>
-        <% else %>
-          <% if allowed_to?(:manage?, @workshop_variation_idea) && @workshop_variation_idea.persisted? %>
-            <%= link_to "Promote to Workshop Variation",
-                        new_workshop_variation_path(workshop_variation_idea_id: @workshop_variation_idea.id),
-                        class: "admin-only bg-blue-100 btn btn-secondary-outline" %>
-          <% end %>
         <% end %>
+        <%= link_to "Home", root_path, class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
         <%= link_to "View", workshop_variation_idea_path(@workshop_variation_idea),
                     class: "text-sm text-gray-500 hover:text-gray-700 px-2 py-1" %>
       </div>
-      <h1 class="text-2xl font-semibold text-gray-900 mb-6">Edit workshop variation idea</h1>
+      <h1 class="text-2xl font-semibold text-gray-900 mb-4">Edit workshop variation idea: <%= @workshop_variation_idea.name %></h1>
+      <% if @workshop_variation_idea.workshop.present? %>
+        <p class="mb-4">Workshop: <%= link_to("#{@workshop_variation_idea.workshop.title} (#{@workshop_variation_idea.workshop.windows_type&.short_name || 'Combined'})",
+                                            workshop_path(@workshop_variation_idea.workshop), class: "btn btn-secondary-outline") %></p>
+      <% end %>
+
+      <% visible_variations = allowed_to?(:manage?, WorkshopVariation) ? @workshop_variation_idea.workshop_variations : @workshop_variation_idea.workshop_variations.where(published: true) %>
+      <% if visible_variations.any? %>
+        <div class="rounded-lg border border-purple-200 bg-purple-50 p-4 mb-4">
+          <div class="flex items-center gap-2">
+            <i class="fas fa-arrow-up-from-bracket text-purple-600"></i>
+            <span class="text-sm font-medium text-purple-800">
+              Promoted to:
+              <% visible_variations.each do |variation| %>
+                <%= link_to variation.title, workshop_variation_path(variation), class: "underline hover:text-purple-600" %>
+              <% end %>
+            </span>
+          </div>
+        </div>
+      <% elsif @workshop_variation_idea.persisted? && allowed_to?(:manage?, WorkshopVariation) %>
+        <div class="admin-only rounded-lg border border-purple-200 bg-purple-50 p-4 mb-4">
+          <div class="flex items-center gap-2">
+            <i class="fas fa-arrow-up-from-bracket text-purple-600"></i>
+            <span class="text-sm font-medium text-purple-800">This idea has not been promoted yet.</span>
+            <%= link_to "Promote to Workshop Variation",
+                        new_workshop_variation_path(workshop_variation_idea_id: @workshop_variation_idea.id),
+                        class: "btn btn-secondary-outline text-sm" %>
+          </div>
+        </div>
+      <% end %>
 
       <div class="space-y-6">
         <div class="mt-4">

app/views/workshop_variation_ideas/index.html.erb

@@ -1,5 +1,5 @@
 <% content_for(:page_bg_class, "admin-only bg-blue-100") %>
-<div class="<%= DomainTheme.bg_class_for(:workshop_variation_ideas) %> border border-gray-200 rounded-xl shadow p-6">
+<div class="<%= DomainTheme.bg_class_for(:workshop_variation_ideas, intensity: 200) %> border border-gray-200 rounded-xl shadow p-6">
   <div class="space-y-6">
         <!-- Header -->
         <div class="flex items-center justify-between mb-6">
@@ -20,42 +20,75 @@
           <table class="w-full border-collapse border border-gray-200">
             <thead class="bg-gray-100">
             <tr>
-              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700 w-[60px]">Main Image</th>
-              <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700 w-1/6">Name</th>
-              <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700 w-1/4">Workshop</th>
-              <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700 w-1/6">Author</th>
-              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700 w-[60px]">Promoted?</th>
-              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700 w-[80px]">Actions</th>
+              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700 w-[2%]"></th>
+              <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Name</th>
+              <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Description</th>
+              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700">Author</th>
+              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700">Promoted to</th>
+              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700">Updated</th>
+              <th class="px-4 py-2 text-center text-sm font-semibold text-gray-700 w-[2%]">Actions</th>
             </tr>
             </thead>
 
             <tbody class="divide-y divide-gray-200">
             <% @workshop_variation_ideas.each do |workshop_variation_idea| %>
               <tr class="hover:bg-gray-50 transition-colors duration-150">
-                <td>
-                  <div class="p-3">
+                <td class="px-4 py-2">
+                  <div class="w-12 h-9 rounded bg-gray-200 overflow-hidden">
                     <%= render "assets/display_image",
                                resource: workshop_variation_idea,
-                               width: 18, height: 14,
-                               variant: :index,
-                               link_to_object: true,
-                               file: workshop_variation_idea.display_image %>
+                               width: 12, height: 9,
+                               link: false,
+                               link_to_object: false,
+                               file: workshop_variation_idea.display_image,
+                               variant: :gallery %>
                   </div>
                 </td>
-                <td class="px-4 py-2 text-sm text-gray-800"><%= workshop_variation_idea.name %></td>
-                <td class="px-4 py-2 text-sm text-gray-800"><%= workshop_variation_idea.workshop.title %></td>
-                <td class="px-4 py-2 text-sm text-gray-800"><%= workshop_variation_idea.created_by.name %></td>
-                <td class="px-4 py-2 text-sm text-gray-800 text-center">
-                  <% if workshop_variation_idea.workshop_variations.any? %>
-                    <span class='fa fa-check-circle text-green-500'></span>
+                <td class="px-4 py-2" title="<%= workshop_variation_idea.name %>">
+                  <div class="text-sm text-gray-800 font-semibold">
+                    <%= link_to truncate(workshop_variation_idea.name, length: 30),
+                                workshop_variation_idea_path(workshop_variation_idea),
+                                class: "hover:text-blue-600 hover:underline" %>
+                  </div>
+                  <% if workshop_variation_idea.workshop %>
+                    <div class="text-xs text-gray-400">
+                      <%= link_to truncate(strip_tags(workshop_variation_idea.workshop.name), length: 40),
+                                  workshop_path(workshop_variation_idea.workshop),
+                                  class: "hover:text-gray-600" %>
+                    </div>
+                  <% end %>
+                </td>
+                <td class="px-4 py-2 text-sm text-gray-600">
+                  <% plain = workshop_variation_idea.rhino_body.to_plain_text %>
+                  <% if plain.present? %>
+                    <span title="<%= truncate(plain, length: 500) %>">
+                      <i class="fas fa-file-lines text-gray-400"></i>
+                    </span>
+                  <% end %>
+                </td>
+                <td class="px-4 py-2 text-sm text-center">
+                  <% display_name = workshop_variation_idea.author_credit.presence || workshop_variation_idea.created_by&.name %>
+                  <% if workshop_variation_idea.created_by&.person %>
+                    <%= link_to display_name,
+                                person_path(workshop_variation_idea.created_by.person),
+                                class: "text-gray-500 hover:text-gray-700" %>
+                  <% elsif display_name %>
+                    <%= display_name %>
+                  <% end %>
+                </td>
+                <td class="px-4 py-2 text-sm text-center whitespace-nowrap">
+                  <% promoted_variation = workshop_variation_idea.workshop_variations.first %>
+                  <% if promoted_variation %>
+                    <%= link_to "Variation ##{promoted_variation.id}",
+                                workshop_variation_path(promoted_variation),
+                                class: "text-purple-600 hover:text-purple-800 hover:underline" %>
                   <% else %>
-                    <span>--</span>
+                    <span class="text-gray-300">--</span>
                   <% end %>
                 </td>
-
-                <!-- Actions -->
-                <td class="px-4 py-2 flex justify-center gap-2">
-                  <%= link_to 'Edit', edit_workshop_variation_idea_path(workshop_variation_idea), class: "btn btn-secondary-outline" %>
+                <td class="px-4 py-2 text-sm text-gray-500 text-center whitespace-nowrap"><%= workshop_variation_idea.updated_at&.strftime("%m/%d/%y") %></td>
+                <td class="px-4 py-2 text-center whitespace-nowrap">
+                  <%= link_to "View", workshop_variation_idea_path(workshop_variation_idea), class: "btn btn-secondary-outline" %>
                 </td>
               </tr>
             <% end %>