Asset upload and lazy load story

app/controllers/community_news_controller.rb

@@ -5,7 +5,7 @@ class CommunityNewsController < ApplicationController
 
   def index
     if turbo_frame_request?
-      per_page = params[:number_of_items_per_page].presence || 25
+      per_page = params[:number_of_items_per_page].presence || 12
       unfiltered = current_user.super_user? ? CommunityNews.all : Community_news.published
       filtered = unfiltered.search_by_params(params)
       @community_news = filtered&.includes([ :bookmarks, :primary_asset, :author, :project, author: :facilitator ])

app/controllers/stories_controller.rb

@@ -1,20 +1,24 @@
 class StoriesController < ApplicationController
-  include ExternallyRedirectable
-  include AhoyViewTracking
+  include ExternallyRedirectable, AssetUpdatable, AhoyViewTracking
   before_action :set_story, only: [ :show, :edit, :update, :destroy ]
 
   def index
-    per_page = params[:number_of_items_per_page].presence || 25
-    unpaginated = current_user.super_user? ? Story.all : Story.published
-    filtered = unpaginated.includes(:windows_type, :project, :workshop, :created_by, :bookmarks, :primary_asset)
-                          .search_by_params(params)
-                          .order(created_at: :desc)
-    @stories = filtered.paginate(page: params[:page], per_page: per_page).decorate
-
-    @count_display = if filtered.count == unpaginated.count
-      unpaginated.count
+    if turbo_frame_request?
+      per_page = params[:number_of_items_per_page].presence || 12
+      unpaginated = current_user.super_user? ? Story.all : Story.published
+      filtered = unpaginated.includes(:windows_type, :project, :workshop, :created_by, :bookmarks, :primary_asset)
+                            .search_by_params(params)
+                            .order(created_at: :desc)
+      @stories = filtered.paginate(page: params[:page], per_page: per_page).decorate
+
+      @count_display = if filtered.count == unpaginated.count
+        unpaginated.count
+      else
+        "#{filtered.count}/#{unpaginated.count}"
+      end
+      render :index_lazy
     else
-      "#{filtered.count}/#{unpaginated.count}"
+      render :index
     end
   end
 
@@ -48,6 +52,10 @@ def create
     @story = Story.new(story_params)
 
     if @story.save
+      if params.dig(:library_asset, :new_assets).present?
+        update_asset_owner(@story)
+      end
+
       redirect_to stories_path, notice: "Story was successfully created."
     else
       @story = @story.decorate
@@ -88,16 +96,6 @@ def set_form_variables
                  .order(:first_name, :last_name)
   end
 
-  # def remove_image
-  #   @story = Story.find(params[:id])
-  #   @image = @story.images.find(params[:image_id])
-  #   @image.purge
-  #
-  #   respond_to do |format|
-  #     format.turbo_stream
-  #     format.html { redirect_to edit_story_path(@story), notice: "Asset removed." }
-  #   end
-  # end
 
   private
 
@@ -112,7 +110,8 @@ def story_params
       :windows_type_id, :project_id, :workshop_id, :external_workshop_title,
       :created_by_id, :updated_by_id, :story_idea_id, :spotlighted_facilitator_id,
       primary_asset_attributes: [ :id, :file, :_destroy ],
-      gallery_assets_attributes: [ :id, :file, :_destroy ]
+      gallery_assets_attributes: [ :id, :file, :_destroy ],
+      new_assets: [ :id, :type ]
     )
   end
 end

app/models/asset.rb

@@ -25,7 +25,7 @@ def self.allowed_types_for_owner(owner)
     return TYPES unless owner
 
     case owner.class.name
-    when "Workshop"
+    when "Workshop", "Story"
       TYPES - [ "DownloadableAsset" ]
     else
       TYPES

app/models/story.rb

@@ -41,9 +41,9 @@ class Story < ApplicationRecord
   # SearchCop
   include SearchCop
   search_scope :search do
-    attributes :title
+    attributes :title, :published, facilitator_first: "facilitators.first_name", facilitator_last: "facilitators.last_name"
 
-    scope { join_rich_texts }
+    scope { join_rich_texts.left_joins(created_by: :facilitator) }
     attributes action_text_body: "action_text_rich_texts.plain_text_body"
     options :action_text_body, type: :text, default: true, default_operator: :or
   end
@@ -59,14 +59,12 @@ class Story < ApplicationRecord
   scope :published_search, ->(published_search) { published_search.present? ? published(published_search) : all }
 
   def self.search_by_params(params)
-    stories = self.all
-    stories = stories.search(params[:query]) if params[:query].present?
-    stories = stories.sector_names(params[:sector_names]) if params[:sector_names].present?
-    stories = stories.category_names(params[:category_names]) if params[:category_names].present?
-    stories = stories.story_name(params[:story_name]) if params[:story_name].present?
-    stories = stories.published_search(params[:published_search]) if params[:published_search].present?
-    stories = stories.windows_type_name(params[:windows_type_name]) if params[:windows_type_name].present?
-    stories
+    conditions = {}
+    conditions[:title] = params[:title] if params[:title].present?
+    conditions[:query] = params[:query] if params[:query].present?
+    conditions[:published] = params[:published_search] if params[:published_search].present?
+
+    self.search(conditions)
   end
 
   def name

app/views/stories/_form.html.erb

@@ -1,6 +1,10 @@
+<%= render "assets/form", owner: @story %>
+
 <%= simple_form_for(story, html: { multipart: true }) do |f| %>
   <%= render 'shared/errors', resource: story if story.errors.any? %>
 
+  <%= tag.div class: "unpersisted_resource_asset_params" %>
+
   <% story_idea = @story_idea || f.object.story_idea %>
 
   <div class="admin-only bg-blue-100 p-3">
@@ -41,8 +45,6 @@
 
     <%= rhino_editor(f, :body) %>
 
-    <%= render "shared/form_image_fields", f: f, include_primary_asset: true %>
-
     <div class="flex gap-4 mb-6">
       <div class="flex-1">
         <%= f.input :youtube_url,

app/views/stories/_results_skeleton.html.erb

@@ -0,0 +1,68 @@
+<div class="bg-white border border-gray-200 rounded-xl shadow-sm">
+  <table class="min-w-full divide-y divide-gray-200">
+    <thead class="bg-gray-50">
+      <tr>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Title</th>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Windows Type</th>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Workshop</th>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Author</th>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Project</th>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Updated At</th>
+        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody class="divide-y divide-gray-100 animate-pulse">
+      <% 3.times do %>
+        <tr>
+          <!-- Title -->
+          <td class="px-4 py-3">
+            <div class="flex items-center gap-3">
+              <div class="w-5 h-5 bg-gray-200 rounded"></div>
+
+              <!-- bookmark -->
+              <div class="w-24 h-14 bg-gray-200 rounded"></div>
+
+              <!-- image (no border) -->
+              <div class="flex-1 space-y-2">
+                <div class="h-4 bg-gray-200 rounded w-24"></div>
+
+                <!-- badge -->
+                <div class="h-5 bg-gray-300 rounded w-48"></div>
+
+                <!-- title -->
+              </div>
+            </div>
+          </td>
+
+          <td class="px-4 py-3">
+            <div class="h-4 bg-gray-200 rounded w-24"></div>
+          </td>
+
+          <td class="px-4 py-3">
+            <div class="h-4 bg-gray-200 rounded w-32"></div>
+          </td>
+
+          <td class="px-4 py-3">
+            <div class="h-4 bg-gray-200 rounded w-36"></div>
+          </td>
+
+          <td class="px-4 py-3">
+            <div class="h-4 bg-gray-200 rounded w-28"></div>
+          </td>
+
+          <td class="px-4 py-3">
+            <div class="h-4 bg-gray-200 rounded w-24"></div>
+          </td>
+
+          <td class="px-4 py-3">
+            <div class="flex gap-2">
+              <div class="h-8 w-16 bg-gray-200 rounded"></div>
+              <div class="h-8 w-16 bg-gray-200 rounded"></div>
+            </div>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

app/views/stories/_search_boxes.html.erb

@@ -2,26 +2,39 @@
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-lg">
   <%= form_with url: stories_path,
                 method: :get,
-                local: true,
-                class: "grid grid-cols-1 md:grid-cols-5 gap-4 items-end" do |f| %>
-
+                data: {controller: "collection",
+                      turbo_frame: "story_results" },
+                      autocomplete: "off",
+                class: "flex flex-wrap gap-4" do |f| %>
     <div>
-      <%= f.label :story_name, "Title contains",
-                  class: "block text-sm font-medium text-gray-700" %>
+      <%= f.label :title, "Title contains",
+                  class: "text-sm font-medium text-gray-500 mb-1" %>
 
-      <%= f.text_field :story_name,
-                       value: params[:story_name],
+      <%= f.text_field :title,
+                       value: params[:title],
                        placeholder: "e.g. Art, Music…",
-                       class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
+                                 focus:ring-blue-500 focus:border-blue-500",
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
+    <div class="flex-grow min-w-[200px]">
+      <%= f.label :query, "Keywords",
+                  class: "text-sm font-medium text-gray-500 mb-1" %>
+
+      <%= f.text_field :query,
+                       value: params[:query],
+                       class: "w-full bg-white border border-gray-300 rounded-lg px-3 py-2
+                                 focus:ring-blue-500 focus:border-blue-500" %>
+    </div>
+
     <% if current_user.super_user? %>
       <!-- PUBLISHED -->
       <div class="min-w-[150px] admin-only bg-blue-100 p-2 rounded-md">
         <label for="published" class="block text-xs font-semibold uppercase text-gray-600 tracking-wide mb-1">
           Published
         </label>
+
         <%= select_tag :published_search,
                        options_for_select(
                          [["All", ""], ["Published", "true"], ["Hidden", "false"]],
@@ -33,11 +46,8 @@
     <% end %>
 
     <!-- Clear -->
-    <div>
-      <%= link_to "Clear",
+    <div><%= link_to "Clear",
                   stories_path,
-                  class: "btn btn-utility-outline whitespace-nowrap" %>
-    </div>
-
+                  class: "btn btn-utility-outline whitespace-nowrap" %></div>
   <% end %>
 </div>

app/views/stories/_story_results.html.erb

@@ -0,0 +1,87 @@
+<% if @stories.any? %>
+  <div class="overflow-x-auto bg-white border border-gray-200 rounded-xl shadow-sm">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-gray-50">
+        <tr>
+          <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Title</th>
+          <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Windows Type</th>
+          <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Workshop</th>
+          <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Author</th>
+          <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Project</th>
+          <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Updated At</th>
+          <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Actions</th>
+        </tr>
+      </thead>
+
+      <tbody class="divide-y divide-gray-100">
+        <% @stories.each do |story| %>
+          <tr class="hover:bg-gray-50">
+            <td class="px-4 py-2 text-sm text-gray-800 flex items-center gap-2">
+              <!-- BOOKMARK -->
+              <span class="pointer-events-auto"><%= render "bookmarks/editable_bookmark_icon", resource: story %></span>
+
+              <%= render "assets/display_image",
+                               resource: story,
+                               width: 24, height: 14,
+                               variant: :index,
+                               link_to_object: true,
+                               file: story.display_image %>
+
+              <!-- TITLE + BADGES -->
+              <span class="inline-flex items-center gap-2">
+                <%= link_to title_with_badges(story, show_hidden_badge: current_user.super_user?).html_safe,
+                                  story_path(story),
+                                  target: story.external_link? ? "_blank" : "", rel: "noopener noreferrer",
+                                  class: "font-bold hover:text-indigo-800 hover:underline" %>
+              </span>
+            </td>
+
+            <td class="px-4 py-2 text-sm text-gray-800"><%= story.windows_type&.short_name %></td>
+
+            <td class="px-4 py-2 text-sm text-gray-800">
+              <span title="<%= story.workshop&.title %>"><%= story.workshop&.title&.truncate(30) %></span>
+            </td>
+
+            <td class="px-4 py-2 text-sm text-gray-800"><%= story.created_by.name %></td>
+
+            <td class="px-4 py-2 text-sm text-gray-800">
+              <span title="<%= story.project&.name %>"><%= story.project&.name&.truncate(30) %></span>
+            </td>
+
+            <td class="px-4 py-2 text-sm text-gray-500"><%= story.updated_at.strftime("%b %d, %Y") %></td>
+
+            <td class="px-4 py-2 text-sm text-gray-500">
+              <%= link_to "View",
+                                story_path(story, no_redirect: true),
+                                target: story.external_link? ? "_blank" : "", rel: "noopener noreferrer",
+                                class: "btn btn-secondary-outline" %>
+
+              <% if current_user.super_user? %>
+                <%= link_to "Edit", edit_story_path(story),
+                                  data: {turbo_frame: "_top"},
+                                  class: "admin-only bg-blue-100 btn btn-secondary-outline" %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <!-- Pagination -->
+  <div class="mt-6 flex justify-center">
+    <div class="pagination mt-6"><%= tailwind_paginate @stories %></div>
+  </div>
+<% else %>
+  <div class="text-center py-16 bg-white rounded-xl border border-gray-200 shadow-sm">
+    <h2 class="text-gray-600 text-lg mb-2">No stories found</h2>
+
+    <% if current_user.super_user? %>
+      <div class="admin-only bg-blue-100 p-3">
+        <%= link_to "Create a story",
+                            new_story_path,
+                            data: {turbo_frame: "_top"},
+                            class: "btn btn-primary" %>
+      </div>
+    <% end %>
+  </div>
+<% end %>