plutonium 0.14.1 → 0.15.0.pre.rc2

data/app/views/resource/_resource_table.html.erb

@@ -1,92 +1,322 @@
-<%# locals: (collection:) -%>
+<%= render build_collection %>
 
-<%
-  resource_class = collection.resource_class
-  resources = collection.records.to_a
-  record_actions = collection.actions.collection_record_actions
-  search_object = collection.search_object
-  fields = collection.fields
-  pager = collection.pager
-  collection_actions = @collection.actions.collection_actions.permitted_for(current_policy)
-  table_rounding = search_object.scope_definitions.present? ? :bottom : :all
--%>
+<%#
 
-<%= render_component :table_toolbar, resource_class:, search_object:, actions: collection_actions %>
+    <div class="space-y-2 mb-4 mt-6">
+        <!-- Search Bar -->
+        <div class="p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 space-y-2">
+            <div class="relative">
+                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+                    </svg>
+                </div>
+                <input type="text" id="table-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for items" oninput="searchTable()">
+            </div>
+            <div class="flex flex-wrap items-center gap-4">
+                <span class="text-sm font-medium text-gray-900 dark:text-white">Filters:</span>
 
-<% if search_object.scope_definitions.present?  %>
-  <%
-    name = name.to_s
-    current_scope = resource_query_params[:scope]
-  %>
-  <%= render_component :block, rounded: :top do %>
-    <ul class="text-sm font-medium flex flex-wrap -mb-px">
-        <li class="me-2">
-          <% if current_scope.blank? %>
-            <a class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 rounded-t-lg active dark:text-primary-500 dark:border-primary-500" aria-current="page" href="?<%= search_object.build_url(scope: nil) %>">All</a>
-          <% else %>
-            <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 dark:text-gray-500" href="<%= search_object.build_url(scope: nil) %>">All</a>
-          <% end %>
-        </li>
+                <select id="category-filter" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    <option selected value="">All Categories</option>
+                    <option value="technology">Technology</option>
+                    <option value="science">Science</option>
+                    <option value="health">Health</option>
+                </select>
 
-        <% search_object.scope_definitions.each do |name, definition| %>
-          <li class="me-2">
-            <% if name == current_scope %>
-              <a class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 rounded-t-lg active dark:text-primary-500 dark:border-primary-500" aria-current="page" href="?<%= search_object.build_url(scope: name) %>"><%= name.humanize %></a>
-            <% else %>
-              <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 dark:text-gray-500" href="<%= search_object.build_url(scope: name) %>"><%= name.humanize %></a>
-            <% end %>
-          </li>
-        <% end %>
-    </ul>
-  <% end %>
-<% end %>
+                <div class="flex items-center space-x-2">
+                    <input type="date" id="start-date" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    <span class="text-gray-500 dark:text-gray-400">to</span>
+                    <input type="date" id="end-date" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                </div>
 
-<%= render_component :block, id: "resource-table-container",
-                             scroll: :x,
-                             rounded: table_rounding,
-                             data: {
-                              controller:"scroll-preserver",
-                              action: "scroll->scroll-preserver#scrolled"
-                             } do %>
-  <% unless resources.any? %>
-    <%# empty card %>
-    <div class="col-12">
-      <%=
-        render_component :empty_card, message: "No #{resource_name_plural(resource_class).downcase} match your query" do
-          if current_policy.create?
-            render_component :button, label: "Create #{resource_name(resource_class)}",
-                                        to: resource_url_for(resource_class, action: :new),
-                                        color: :primary
-          end
-        end
-      %>
+                <select id="author-filter" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    <option selected value="">All Authors</option>
+                    <option value="john-doe">John Doe</option>
+                    <option value="jane-smith">Jane Smith</option>
+                </select>
+
+                <button onclick="applyFilters()" class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd"></path>
+                    </svg>
+                    Apply Filters
+                </button>
+
+                <button onclick="clearFilters()" class="inline-flex items-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-4 py-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
+                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                    Clear Filters
+                </button>
+            </div>
+        </div>
+
+        <!-- Scopes and Bulk Actions -->
+        <div class="flex flex-wrap justify-between items-center gap-4 p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
+            <!-- Scopes -->
+            <div class="flex flex-wrap items-center gap-2">
+                <button id="all-scope" onclick="filterTable('all')" class="px-4 py-2 text-sm font-medium text-gray-900 bg-gray-100 border border-gray-200 rounded-lg hover:bg-gray-200 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600">
+                    All
+                </button>
+                <button id="featured-scope" onclick="filterTable('featured')" class="px-4 py-2 text-sm font-medium text-gray-900 bg-gray-100 border border-gray-200 rounded-lg hover:bg-gray-200 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600">
+                    Featured
+                </button>
+                <button id="draft-scope" onclick="filterTable('draft')" class="px-4 py-2 text-sm font-medium text-gray-900 bg-gray-100 border border-gray-200 rounded-lg hover:bg-gray-200 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600">
+                    Draft <span class="ml-1 text-gray-500 dark:text-gray-400">(1)</span>
+                </button>
+                <button id="published-scope" onclick="filterTable('published')" class="px-4 py-2 text-sm font-medium text-gray-900 bg-gray-100 border border-gray-200 rounded-lg hover:bg-gray-200 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600">
+                    Published <span class="ml-1 text-gray-500 dark:text-gray-400">(2)</span>
+                </button>
+            </div>
+
+            <!-- Bulk Actions -->
+            <div class="flex flex-wrap items-center gap-2">
+                <button onclick="bulkAction('delete')" class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                    </svg>
+                    Delete Selected
+                </button>
+                <button onclick="bulkAction('archive')" class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
+                    </svg>
+                    Archive Selected
+                </button>
+                <button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-2 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
+                    <span class="sr-only">Action button</span>
+                    More Actions
+                    <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Table -->
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <caption class="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+              <div class="flex justify-between items-center">
+                  <div>
+                      Manage your blog posts
+                      <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">Manage your blog posts.</p>
+                  </div>
+                  <div class="flex space-x-2">
+                      <button type="button" class="px-4 py-2 text-sm font-medium text-blue-700 hover:text-blue-800 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-700 dark:text-blue-400 dark:hover:text-blue-500">
+                          <span class="flex items-center">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                              </svg>
+                              Select All
+                          </span>
+                      </button>
+                      <button type="button" class="px-4 py-2 text-sm font-medium text-red-700 hover:text-red-800 focus:z-10 focus:outline-none focus:ring-2 focus:ring-red-700 dark:text-red-400 dark:hover:text-red-500">
+                          <span class="flex items-center">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                              </svg>
+                              Deselect All
+                          </span>
+                      </button>
+                  </div>
+              </div>
+          </caption>
+          <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+              <tr>
+                  <th scope="col" class="px-6 py-3">
+                      <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                  </th>
+                  <th scope="col" class="px-6 py-3">Title</th>
+                  <th scope="col" class="px-6 py-3">Slug</th>
+                  <th scope="col" class="px-6 py-3">Is featured</th>
+                  <th scope="col" class="px-6 py-3">Actions</th>
+              </tr>
+          </thead>
+          <tbody>
+              <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                  <td class="px-6 py-4">
+                      <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                  </td>
+                  <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">What is Plutonium?</th>
+                  <td class="px-6 py-4">what-is-plutonium</td>
+                  <td class="px-6 py-4"><span class="text-green-600 dark:text-green-400">✓</span></td>
+                  <td class="px-6 py-4">
+                      <div class="flex items-center space-x-2">
+                          <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 flex items-center">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                              View
+                          </button>
+                          <button type="button" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
+                              Edit
+                          </button>
+                          <button type="button" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                              Delete
+                          </button>
+                          <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
+                              More
+                              <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                              </svg>
+                          </button>
+                          <div id="dropdown" class="z-10 hidden absolute bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+                              <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Duplicate</a>
+                                  </li>
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Archive</a>
+                                  </li>
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Download</a>
+                                  </li>
+                              </ul>
+                          </div>
+                      </div>
+                  </td>
+              </tr>
+              <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                  <td class="px-6 py-4">
+                      <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                  </td>
+                  <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">Top 5 best features of Plutonium</th>
+                  <td class="px-6 py-4">top-5-features</td>
+                  <td class="px-6 py-4"><span class="text-green-600 dark:text-green-400">✓</span></td>
+                  <td class="px-6 py-4">
+                      <div class="flex items-center space-x-2">
+                          <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 flex items-center">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                              View
+                          </button>
+                          <button type="button" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
+                              Edit
+                          </button>
+                          <button type="button" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                              Delete
+                          </button>
+                          <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
+                              More
+                              <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                              </svg>
+                          </button>
+                          <div id="dropdown" class="z-10 hidden absolute bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+                              <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Duplicate</a>
+                                  </li>
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Archive</a>
+                                  </li>
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Download</a>
+                                  </li>
+                              </ul>
+                          </div>
+                      </div>
+                  </td>
+              </tr>
+              <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                  <td class="px-6 py-4">
+                      <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                  </td>
+                  <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">Customizing Plutonium's UI with a theme</th>
+                  <td class="px-6 py-4">theme-guide</td>
+                  <td class="px-6 py-4"><span class="text-green-600 dark:text-green-400">✓</span></td>
+                  <td class="px-6 py-4">
+                      <div class="flex items-center space-x-2">
+                          <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 flex items-center">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+                              View
+                          </button>
+                          <button type="button" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
+                              Edit
+                          </button>
+                          <button type="button" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+                              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                              Delete
+                          </button>
+                          <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
+                              More
+                              <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                              </svg>
+                          </button>
+                          <div id="dropdown" class="z-10 hidden absolute bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+                              <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Duplicate</a>
+                                  </li>
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Archive</a>
+                                  </li>
+                                  <li>
+                                      <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Download</a>
+                                  </li>
+                              </ul>
+                          </div>
+                      </div>
+                  </td>
+              </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- display control -->
+    <div class="flex flex-col md:flex-row justify-between items-center mt-4 text-sm text-gray-500 dark:text-gray-400">
+        <div>
+            Showing 1 to 5 of 50 results
+        </div>
+        <div class="flex items-center space-x-2 mt-2 md:mt-0">
+            <label for="perPage" class="mr-2">Per page</label>
+            <select id="perPage" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                <option selected>5</option>
+                <option>10</option>
+                <option>25</option>
+                <option>50</option>
+            </select>
+        </div>
+    </div>
+
+    <!-- pagination -->
+    <div class="flex justify-center mt-4">
+        <nav aria-label="Page navigation example">
+            <ul class="inline-flex -space-x-px text-sm">
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
+                </li>
+                <li>
+                    <a href="#" aria-current="page" class="flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">1</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">3</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">4</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">...</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">9</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">10</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
+                </li>
+            </ul>
+        </nav>
     </div>
-  <% else %>
-    <%# table %>
-    <%= render_component :table, rows: resources do |table| %>
-      <% table.with_actions do |resource| %>
-        <% record_actions.permitted_for(policy(resource)).values.each do |action| %>
-          <%= table_action_button resource, action %>
-        <% end %>
-      <% end %>
 
-      <% fields.each do |name, field| %>
-        <%#
-          TODO:
-          For now, we are hacking around the need to call #with before #label
-          This proves there's an issue with the rendering api.
-          While I think of an elegant solution, this works for now.
-        %>
-        <% field.with(record: resources[0]) %>
-        <% table.column(name:, label: field.label, search_object: search_object) do |resource| %>
-          <% field.with(record: resource) %>
-          <%= render field %>
-        <% end %>
-      <% end %>
-    <% end %>
-    <%# pagination %>
-    <% if pager.present? %>
-      <%= render_component :pagination, pager: pager %>
-    <% end %>
-  <% end %>
-<% end %>
+ %>

data/app/views/resource/edit.html.erb

@@ -1,5 +1 @@
-<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: @form.record %>
-
-<%= render_component :dyna_frame_content do %>
-  <%= render "resource_form", form: @form %>
-<% end %>
+<%= render current_definition.edit_page_class.new %>

data/app/views/resource/index.html.erb

@@ -1,5 +1 @@
-<%= render_component :breadcrumbs, resource_class:, parent: current_parent %>
-
-<%= render_component :dyna_frame_content do %>
-  <%= render "resource_table", collection: @collection %>
-<% end %>
+<%= render current_definition.index_page_class.new %>

data/app/views/resource/new.html.erb

@@ -1,5 +1 @@
-<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: @form.record %>
-
-<%= render_component :dyna_frame_content do %>
-  <%= render "resource_form", form: @form %>
-<% end %>
+<%= render current_definition.new_page_class.new %>

data/app/views/resource/show.html.erb

@@ -1,5 +1 @@
-<%= render_component :breadcrumbs, resource_class:, parent: current_parent, resource: @detail.record %>
-
-<%= render_component :dyna_frame_content do %>
-  <%= render "resource_details", details: @detail %>
-<% end %>
+<%= render current_definition.show_page_class.new %>

data/config/initializers/pagy.rb

@@ -2,3 +2,4 @@ require "pagy"
 require "pagy/extras/overflow"
 require "pagy/extras/trim"
 require "pagy/extras/headers"
+require "pagy/extras/limit"

data/config/initializers/rabl.rb

@@ -30,32 +30,39 @@ Rabl.configure do |config|
   # config.camelize_keys = :upper # Defaults to false
 end
 
-# Monkey Patch Rabl source lookup to make it compatible with Rails view lookup
+# Extend Rabl source lookup to make it compatible with Rails view lookup
 module Rabl
   module Sources
-    private
+    module RailsViewLookupExtension
+      private
 
-    # Returns the rabl template path for Rails
-    def fetch_rails_source(file, _options = {})
-      # use Rails template resolution mechanism if possible (find_template)
-      source_format = request_format if defined?(request_format)
+      # Returns the rabl template path for Rails
+      def fetch_rails_source(file, options = {})
+        # use Rails template resolution mechanism if possible (find_template)
+        source_format = request_format if defined?(request_format)
 
-      lookup_proc = lambda do |partial|
-        context_scope.lookup_context.find(file, context_scope.lookup_context.prefixes, partial, [],
-          {formats: [source_format]})
-      end
-      template = begin
-        lookup_proc.call(false)
-      rescue
-        nil
-      end
-      template ||= begin
-        lookup_proc.call(true)
-      rescue
-        nil
+        lookup_proc = lambda do |partial|
+          context_scope.lookup_context.find(file, context_scope.lookup_context.prefixes, partial, [],
+            {formats: [source_format]})
+        end
+
+        template = begin
+          lookup_proc.call(false)
+        rescue
+          nil
+        end
+
+        template ||= begin
+          lookup_proc.call(true)
+        rescue
+          nil
+        end
+
+        template&.identifier
       end
-      template&.identifier
     end
+
+    prepend RailsViewLookupExtension
   end
 end
 

data/gemfiles/rails_7.gemfile.lock

@@ -1,7 +1,8 @@
 PATH
   remote: ..
   specs:
-    plutonium (0.12.13)
+    plutonium (0.15.0)
+      action_policy (~> 0.7.0)
       active_interaction (~> 5.3)
       dry-initializer (~> 3.1)
       listen (~> 3.8)
@@ -19,6 +20,8 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
+    action_policy (0.7.0)
+      ruby-next-core (>= 1.0)
     actioncable (7.1.3.4)
       actionpack (= 7.1.3.4)
       activesupport (= 7.1.3.4)
@@ -253,6 +256,7 @@ GEM
     rubocop-performance (1.21.0)
       rubocop (>= 1.48.1, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
+    ruby-next-core (1.0.3)
     ruby-progressbar (1.13.0)
     semantic_range (3.0.0)
     simple_form (5.3.1)

data/lib/generators/pu/core/install/templates/app/controllers/plutonium_controller.rb.tt

@@ -0,0 +1,2 @@
+class PlutoniumController < <%= ApplicationController < ActionController::Base ? "ApplicationController" : "ActionController::Base" %>
+end

data/lib/generators/pu/core/install/templates/app/controllers/resource_controller.rb.tt

@@ -1,3 +1,23 @@
-class ResourceController < ApplicationController
+class ResourceController < PlutoniumController
   include Plutonium::Resource::Controller
+  <%- if !ApplicationController.new.respond_to?(:current_user, true) -%>
+
+  private def current_user
+    raise NotImplementedError, "#{self.class}#current_user must return a non nil value"
+  end
+  helper_method :current_user
+  <%- elsif !ApplicationController._helper_methods.include?(:current_user) -%>
+
+  helper_method :current_user
+  <%- end -%>
+  <%- if !ApplicationController.new.respond_to?(:logout_url, true) -%>
+
+  private def logout_url
+    # return a logout url to render a logout link
+  end
+  helper_method :logout_url
+  <%- elsif !ApplicationController._helper_methods.include?(:logout_url) -%>
+
+  helper_method :logout_url
+  <%- end -%>
 end

data/lib/generators/pu/core/install/templates/app/definitions/resource_definition.rb.tt

@@ -0,0 +1,2 @@
+class ResourceDefinition < Plutonium::Resource::Definition
+end

data/lib/generators/pu/core/install/templates/app/models/resource_record.rb.tt

@@ -1,5 +1,3 @@
 class ResourceRecord < ApplicationRecord
-  include Plutonium::Resource::Record
-
   self.abstract_class = true
 end

data/lib/generators/pu/core/install/templates/config/initializers/plutonium.rb

@@ -4,12 +4,5 @@ Plutonium.configure do |config|
   config.load_defaults 1.0
 
   # config.assets.logo = "logo.png"
-  # Configure plutonium above this
-end
-
-Rails.application.config.to_prepare do
-  # Register components here
-
-  # e.g
-  # Plutonium::Core::Fields::Renderers::Factory.map_type :mapped_collection, to: Fields::Renderers::MappedCollectionRenderer
+  # Configure plutonium above.
 end

data/lib/generators/pu/eject/shell/shell_generator.rb

@@ -16,8 +16,8 @@ module Pu
       def start
         destination_dir = (destination_app == "main_app") ? "app/views/" : "packages/#{destination_app}/app/views"
         [
-          "application/_resource_header.html.erb",
-          "application/_resource_sidebar.html.erb"
+          "plutonium/_resource_header.html.erb",
+          "plutonium/_resource_sidebar.html.erb"
         ].each do |file|
           copy_file Plutonium.root.join("app", "views", file), Rails.root.join(destination_dir, file)
         end