From 5a9063a04b5a81de31566ad641728ca06fe96927 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Wed, 13 Nov 2024 17:12:14 +0000
Subject: Adds some validation and further work on the form

---
 app/models/pdfresource.rb                    |  3 +
 app/views/pdfresources/_form.html.erb        | 83 ++++++++++++++-----------
 app/views/pdfresources/_pdfresource.html.erb | 93 +++++++++++++++-------------
 app/views/pdfresources/edit.html.erb         |  2 +-
 app/views/pdfresources/index.html.erb        |  2 +-
 5 files changed, 102 insertions(+), 81 deletions(-)

(limited to 'app')

diff --git a/app/models/pdfresource.rb b/app/models/pdfresource.rb
index 6131034..6614f66 100644
--- a/app/models/pdfresource.rb
+++ b/app/models/pdfresource.rb
@@ -1,4 +1,7 @@
 class Pdfresource < ApplicationRecord
   has_many_attached :pdfs
   has_many_attached :thumbnails
+  validates :feature_slot,
+            numericality: { only_integer: true, greater_than_or_equal_to: 1, less_than_or_equal_to: 3, allow_nil: true },
+            allow_nil: true
 end
diff --git a/app/views/pdfresources/_form.html.erb b/app/views/pdfresources/_form.html.erb
index 39c8314..86b1ca5 100644
--- a/app/views/pdfresources/_form.html.erb
+++ b/app/views/pdfresources/_form.html.erb
@@ -12,61 +12,74 @@
   <% end %>
 
   <div class="my-5">
-    <%= form.label :name, class: "font-bold"  %>
+    <%= form.label :name, class: "font-bold" %>
     <%= form.text_field :name, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
-  
+
   <div class="my-5">
-    <%= form.label :description, class: "font-bold"  %>
+    <%= form.label :description, class: "font-bold" %>
     <%= form.textarea :description, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
     <p class="text-sm text-gray-700">Go to two with the description here. THIS WILL BE RICH TEXT.</p>
   </div>
 
   <div class="my-5">
-    <%= form.label :card_description, class: "font-bold"  %>
+    <%= form.label :card_description, class: "font-bold" %>
     <%= form.textarea :card_description, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-    <p class="text-sm text-gray-700">This is a much shorter description that is used inside the "card" boxes on the listings page.</p>
+    <p class="text-sm text-gray-700">This is a much shorter description that is used inside the "card" boxes on the
+      listings page.</p>
   </div>
 
   <div class="my-5">
-    <%= form.label :pdfs, "Resource PDFs", class: "font-bold"  %>
+    <%= form.label :pdfs, "Resource PDFs", class: "font-bold" %>
     <%= form.file_field :pdfs, multiple: true, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-    <p class="text-sm text-gray-700">You can upload up to 10 PDFs per resource.</p>
+    <p class="text-sm text-gray-700">You can upload up to 10 PDFs per resource. The original files were:
+      <% pdfresource.pdfs.each do |pdf| %>
+        <span class="text-red-500">
+          <%= pdf.filename %>
+        </span>
+      <% end %>
+    </p>
   </div>
 
   <div class="my-5">
-    <%= form.label :thumbnails, class: "font-bold"  %>
+    <%= form.label :thumbnails, class: "font-bold" %>
     <%= form.file_field :thumbnails, multiple: true, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-    <p class="text-sm text-gray-700">You can upload up to 10 thumbnails per resource.</p>
-  </div>
+    <p class="text-sm text-gray-700">You can upload up to 10 thumbnails per resource. The original files were:
+      <% pdfresource.thumbnails.each do |thumbnail| %>
+      <span class="text-red-500">
+        <%= thumbnail.filename %>
+      </span>
+      <% end.to_sentence %>
+</p>
+</div>
 
-  <div class="my-5">
-    <%= form.label :price, class: "font-bold"  %>
-    <%= form.number_field :price, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-    <p class="text-sm text-gray-700">This is what we will sell it for!</p>
-  </div>
-  
-  <div class="my-5">
-    <%= form.label :stripe_product_id, "Stripe Product ID", class: "font-bold" %>
-    <%= form.text_field :stripe_product_id, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
+<div class="my-5">
+  <%= form.label :price, class: "font-bold" %>
+  <%= form.number_field :price, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+  <p class="text-sm text-gray-700">This is what we will sell it for!</p>
+</div>
 
-  <div class="my-5">
-    <%= form.label :age_range, class: "font-bold"  %>
-    <%= form.text_field :age_range, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
+<div class="my-5">
+  <%= form.label :stripe_product_id, "Stripe Product ID", class: "font-bold" %>
+  <%= form.text_field :stripe_product_id, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+</div>
 
-  <div class="my-5">
-    <%= form.label :curriculum, class: "font-bold"  %>
-    <%= form.text_field :curriculum, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
+<div class="my-5">
+  <%= form.label :age_range, class: "font-bold" %>
+  <%= form.text_field :age_range, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+</div>
 
-  <div class="my-5">
-    <%= form.label :feature_slot, class: "font-bold"  %>
-    <%= form.number_field :feature_slot, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
+<div class="my-5">
+  <%= form.label :curriculum, class: "font-bold" %>
+  <%= form.text_field :curriculum, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+</div>
 
-  <div class="inline">
-    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
-  </div>
+<div class="my-5">
+  <%= form.label :feature_slot, class: "font-bold" %>
+  <%= form.number_field :feature_slot, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+</div>
+
+<div class="inline">
+  <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+</div>
 <% end %>
diff --git a/app/views/pdfresources/_pdfresource.html.erb b/app/views/pdfresources/_pdfresource.html.erb
index 2e0d86c..7a2409e 100644
--- a/app/views/pdfresources/_pdfresource.html.erb
+++ b/app/views/pdfresources/_pdfresource.html.erb
@@ -1,55 +1,60 @@
-<div id="<%= dom_id pdfresource %>" class="w-[400px] p-3 border border-gray-500 bg-pink-300">
-  <p class="my-5">
-      <div>
-        <%= image_tag url_for(pdfresource.thumbnails.first), class: "object-cover"%>
-      </div>
-  </p>
-  
-  <p class="my-5">
-    <strong class="block font-bold mb-1"><%= pdfresource.name %></strong>
-  </p>
-  
-  <p class="my-5">
-    <%= pdfresource.card_description %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Stripe product:</strong>
-    <%= pdfresource.stripe_product_id %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Pdfs:</strong>
-    <% pdfresource.pdfs.each do |pdf| %>
+<div id="<%= dom_id pdfresource %>" class="w-[400px] rounded overflow-hidden shadow-lg border p-5">
+  <div>
+    <%= image_tag url_for(pdfresource.thumbnails.first), size: "500x100", class: "rounded-t-lg" %>
+  </div>
+
+  <div class="ps-2">
+    <p class="my-5">
+      <strong class="block font-bold mb-2"><%= pdfresource.name %></strong>
+    </p>
+
+    <div class="px-6 pt-4 pb-2">
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
+    </div>
+
+    <p class="my-5 text-gray-500 text-base">
+      <%= pdfresource.card_description %>
+    </p>
+
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Stripe product:</strong>
+      <%= pdfresource.stripe_product_id %>
+    </p>
+
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Pdfs:</strong>
+      <% pdfresource.pdfs.each do |pdf| %>
       <div><%= link_to pdf.filename, pdf %></div>
     <% end %>
-  </p>
+    </p>
 
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Price:</strong>
-    <%= pdfresource.price %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Price:</strong>
+      <%= pdfresource.price %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Age range:</strong>
-    <%= pdfresource.age_range %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Age range:</strong>
+      <%= pdfresource.age_range %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Curriculum:</strong>
-    <%= pdfresource.curriculum %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Curriculum:</strong>
+      <%= pdfresource.curriculum %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Feature slot:</strong>
-    <%= pdfresource.feature_slot %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Feature slot:</strong>
+      <%= pdfresource.feature_slot %>
+    </p>
 
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Description:</strong>
-    <%= pdfresource.description %>
-  </p>
+    <p class="my-5">
+      <strong class="block font-medium mb-1">Description:</strong>
+      <%= pdfresource.description %>
+    </p></div>
 
   <p>
     <%= link_to "Show this pdfresource", pdfresource, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
diff --git a/app/views/pdfresources/edit.html.erb b/app/views/pdfresources/edit.html.erb
index 6738cf1..aa8d60e 100644
--- a/app/views/pdfresources/edit.html.erb
+++ b/app/views/pdfresources/edit.html.erb
@@ -1,5 +1,5 @@
 <div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">Editing pdfresource</h1>
+  <h1 class="font-bold text-4xl">Editing <%= @pdfresource.name %> </h1>
 
   <%= render "form", pdfresource: @pdfresource %>
 
diff --git a/app/views/pdfresources/index.html.erb b/app/views/pdfresources/index.html.erb
index 309dcdd..158e505 100644
--- a/app/views/pdfresources/index.html.erb
+++ b/app/views/pdfresources/index.html.erb
@@ -9,7 +9,7 @@
     <h1 class="font-bold text-4xl m-12">Featured Resources</h1>
   </div>
   
-  <div id="pdfresources" class="flex flex-wrap space-x-2 justify-between">
+  <div id="pdfresources" class="flex flex-wrap justify-between">
     <% @pdfresources.where("feature_slot < 4").each do |pdfresource| %>
         <%= render pdfresource %>
     <% end %>
-- 
cgit v1.2.3