From 0ac4bcf75fc4fb83f0e4b6da7a3980abf9d9be46 Mon Sep 17 00:00:00 2001
From: drusepth <drusepth@gmail.com>
Date: Fri, 15 Apr 2022 14:47:53 -0700
Subject: [PATCH] wrap up filter bar styling for now

---
 app/helpers/heroicons_helper.rb  |   9 ++
 app/views/content/index.html.erb | 207 ++++++++-----------------------
 2 files changed, 62 insertions(+), 154 deletions(-)
 create mode 100644 app/helpers/heroicons_helper.rb

diff --git a/app/helpers/heroicons_helper.rb b/app/helpers/heroicons_helper.rb
new file mode 100644
index 00000000..e31a9eed
--- /dev/null
+++ b/app/helpers/heroicons_helper.rb
@@ -0,0 +1,9 @@
+module HeroiconsHelper
+  def chevron_down
+    '''
+      <svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+      </svg>
+    '''.html_safe
+  end
+end
\ No newline at end of file
diff --git a/app/views/content/index.html.erb b/app/views/content/index.html.erb
index b8966217..858c68e2 100644
--- a/app/views/content/index.html.erb
+++ b/app/views/content/index.html.erb
@@ -1,3 +1,4 @@
+<!-- header -->
 <div class="bg-white pb-2">
   <div>
     <%= image_tag asset_path("card-headers/#{@content_type_name.downcase.pluralize}.webp"), class: 'h-32 w-full object-cover lg:h-48' %>
@@ -52,7 +53,8 @@
   </div>
 </div>
 
-<div class="bg-white">
+<!--  new filter bar -->
+<div class="bg-white mb-4">
   <!--
     Mobile filter dialog
 
@@ -227,24 +229,10 @@
         <div data-controller="dropdown" class="relative inline-block text-left">
           <div>
             <button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
-              Sort
-              <!-- Heroicon name: solid/chevron-down -->
-              <svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-              </svg>
+              Sort <%= chevron_down %>
             </button>
           </div>
 
-          <!--
-            Dropdown menu, show/hide based on menu state.
-
-            Entering: "transition ease-out duration-100"
-              From: "transform opacity-0 scale-95"
-              To: "transform opacity-100 scale-100"
-            Leaving: "transition ease-in duration-75"
-              From: "transform opacity-100 scale-100"
-              To: "transform opacity-0 scale-95"
-          -->
           <div data-dropdown-target="menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
             <div class="py-1" role="none">
               <!--
@@ -252,11 +240,10 @@
 
                 Selected: "font-medium text-gray-900", Not Selected: "text-gray-500"
               -->
-              <a href="#" class="font-medium text-gray-900 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0"> Most Popular </a>
-
-              <a href="#" class="text-gray-500 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1"> Best Rating </a>
-
-              <a href="#" class="text-gray-500 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2"> Newest </a>
+              <a href="#" data-action="dropdown#toggle" class="font-medium text-gray-900 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">Favorites First</a>
+              <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">Alphabetical</a>
+              <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Recently-edited</a>
+              <a href="#" data-action="dropdown#toggle" class="text-gray-500 block px-4 py-2 text-sm hover:bg-notebook-blue hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">Order created</a>
             </div>
           </div>
         </div>
@@ -267,124 +254,37 @@
         <div class="hidden sm:block">
           <div class="flow-root">
             <div class="-mx-4 flex items-center divide-x divide-gray-200">
-              <div class="px-4 relative inline-block text-left">
-                <button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
-                  <span>Tag</span>
-
-                  <span class="ml-1.5 rounded py-0.5 px-1.5 bg-gray-200 text-xs font-semibold text-gray-700 tabular-nums">1</span>
-                  <!-- Heroicon name: solid/chevron-down -->
-                  <svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                  </svg>
+              <div data-controller="dropdown" class="px-4 relative inline-block text-left">
+                <button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
+                  <span>Tagged</span>
+                  <span class="ml-1.5 rounded py-0.5 px-1.5 bg-gray-100 text-xs font-semibold text-gray-700 tabular-nums">
+                    <%= @filtered_page_tags.try(:count) || 0 %>
+                  </span>
+                  <%= chevron_down %>
                 </button>
 
-                <!--
-                  'Category' dropdown, show/hide based on dropdown state.
-
-                  Entering: "transition ease-out duration-100"
-                    From: "transform opacity-0 scale-95"
-                    To: "transform opacity-100 scale-100"
-                  Leaving: "transition ease-in duration-75"
-                    From: "transform opacity-100 scale-100"
-                    To: "transform opacity-0 scale-95"
-                -->
-                <div class="origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div data-dropdown-target="menu" class="w-64 origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <form class="space-y-4">
-                    <div class="flex items-center">
-                      <input id="filter-category-0" name="category[]" value="new-arrivals" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-category-0" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> All New Arrivals </label>
-                    </div>
+                    <% @page_tags.each do |page_tag| %>
+                      <div class="flex items-center">
+                        <input id="filter-tag-<%= page_tag.id %>" name="tag[]" value="<%= page_tag.slug %>" type="checkbox" class="h-4 w-4 border-gray-300 rounded <%= @content_type_class.text_color %> focus:ring-notebook-blue">
+                        <label for="filter-tag-<%= page_tag.id %>" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"><%= page_tag.tag %></label>
+                      </div>
+                    <% end %>
 
-                    <div class="flex items-center">
-                      <input id="filter-category-1" name="category[]" value="tees" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-category-1" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Tees </label>
-                    </div>
-
-                    <div class="flex items-center">
-                      <input id="filter-category-2" name="category[]" value="objects" type="checkbox" checked class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-category-2" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Objects </label>
-                    </div>
+                    <% if @page_tags.any? %>
+                      <div class="flex text-right">
+                        <button data-action="dropdown#toggle" class="bg-notebook-blue hover:bg-blue-500 text-white rounded w-full px-2 py-1">Submit</button>
+                      </div>
+                    <% else %>
+                      <div class="bg-blue-50 p-4">
+                        Add tags to your <%= @content_type_name %> pages to be able to filter them here. 
+                      </div>
+                    <% end %>
                   </form>
                 </div>
               </div>
 
-              <div class="px-4 relative inline-block text-left">
-                <button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
-                  <span>Color</span>
-                  <!-- Heroicon name: solid/chevron-down -->
-                  <svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                  </svg>
-                </button>
-
-                <!--
-                  'Color' dropdown, show/hide based on dropdown state.
-
-                  Entering: "transition ease-out duration-100"
-                    From: "transform opacity-0 scale-95"
-                    To: "transform opacity-100 scale-100"
-                  Leaving: "transition ease-in duration-75"
-                    From: "transform opacity-100 scale-100"
-                    To: "transform opacity-0 scale-95"
-                -->
-                <div class="origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <form class="space-y-4">
-                    <div class="flex items-center">
-                      <input id="filter-color-0" name="color[]" value="white" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-color-0" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> White </label>
-                    </div>
-
-                    <div class="flex items-center">
-                      <input id="filter-color-1" name="color[]" value="beige" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-color-1" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Beige </label>
-                    </div>
-
-                    <div class="flex items-center">
-                      <input id="filter-color-2" name="color[]" value="blue" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-color-2" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> Blue </label>
-                    </div>
-                  </form>
-                </div>
-              </div>
-
-              <div class="px-4 relative inline-block text-left">
-                <button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" aria-expanded="false">
-                  <span>Sizes</span>
-                  <!-- Heroicon name: solid/chevron-down -->
-                  <svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                  </svg>
-                </button>
-
-                <!--
-                  'Sizes' dropdown, show/hide based on dropdown state.
-
-                  Entering: "transition ease-out duration-100"
-                    From: "transform opacity-0 scale-95"
-                    To: "transform opacity-100 scale-100"
-                  Leaving: "transition ease-in duration-75"
-                    From: "transform opacity-100 scale-100"
-                    To: "transform opacity-0 scale-95"
-                -->
-                <div class="origin-top-right absolute right-0 mt-2 bg-white rounded-md shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <form class="space-y-4">
-                    <div class="flex items-center">
-                      <input id="filter-sizes-0" name="sizes[]" value="s" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-sizes-0" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> S </label>
-                    </div>
-
-                    <div class="flex items-center">
-                      <input id="filter-sizes-1" name="sizes[]" value="m" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-sizes-1" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> M </label>
-                    </div>
-
-                    <div class="flex items-center">
-                      <input id="filter-sizes-2" name="sizes[]" value="l" type="checkbox" class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500">
-                      <label for="filter-sizes-2" class="ml-3 pr-6 text-sm font-medium text-gray-900 whitespace-nowrap"> L </label>
-                    </div>
-                  </form>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -392,37 +292,36 @@
     </div>
 
     <!-- Active filters -->
-    <div class="bg-gray-100">
-      <div class="max-w-7xl mx-auto py-3 px-4 sm:flex sm:items-center sm:px-6 lg:px-8">
-        <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
-          Filters
-          <span class="sr-only">, active</span>
-        </h3>
+    <% if @filtered_page_tags %>
+      <div class="bg-gray-100">
+        <div class="max-w-7xl mx-auto py-3 px-4 sm:flex sm:items-center sm:px-6 lg:px-8">
+          <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+            Showing only <%= @content_type_name.pluralize %> with tags
+            <span class="sr-only">, active</span>
+          </h3>
 
-        <div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:block sm:ml-4"></div>
+          <div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:block sm:ml-4"></div>
 
-        <div class="mt-2 sm:mt-0 sm:ml-4">
-          <div class="-m-1 flex flex-wrap items-center">
-            <span class="m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-sm font-medium bg-white text-gray-900">
-              <span>Objects</span>
-              <button type="button" class="flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500">
-                <span class="sr-only">Remove filter for Objects</span>
-                <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-                  <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
-                </svg>
-              </button>
-            </span>
+          <div class="mt-2 sm:mt-0 sm:ml-4">
+            <div class="-m-1 flex flex-wrap items-center">
+              <span class="m-1 inline-flex rounded-full border border-gray-200 items-center py-1.5 pl-3 pr-2 text-sm font-medium bg-white text-gray-900">
+                <span>Objects</span>
+                <button type="button" class="flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500">
+                  <span class="sr-only">Remove filter for Objects</span>
+                  <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                    <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
+                  </svg>
+                </button>
+              </span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    <% end %>
   </section>
 </div>
 
-<div class="bg-blue-50">
-  list filter bar
-  <%= render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
-</div>
+<%# render partial: 'content/components/list_filter_bar', locals: { content_type: @content_type_class } %>
 
 <%# to be made into new card list partial? %>
 <div class="flex flex-wrap mb-32 container mx-auto">