@raketa-cloud/admin 0.0.97 → 0.0.99

package/src/views/pages/history/index.ejs

@@ -0,0 +1,87 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <div>
+      <h1 class="heading-1">Pages / History of changes</h1>
+      <span class="body-2 opacity-50"><%=  %></span>
+    </div>
+
+    <div class="actions-toolbar">
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}` %>" class="btn-text">Back</a>
+      <button type="button" data-toggle-sidebar="1" class="p-2.5 rounded hover:bg-neutral-200 transition-all duration-300 ease-in-out dark:hover:bg-neutral-700">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <%- render_partial('../_shared/history_table.ejs', {
+    changes,
+    resource,
+    _context,
+    render_partial,
+    skipPagination: false,
+    toolbarPath: '../_shared/_history_toolbar.ejs'
+  }) %>
+
+</div>
+
+<div data-sidebar="1" class="search-sidebar <%= Object.keys(_context.query).some(k => k.startsWith('f:')) ? '' : 'hidden' %>">
+  <span class="heading-2">Search by</span>
+
+  <form action="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/history` %>" method="GET" class="form mt-4">
+    <input type="hidden" name="order_direction" value="<%= _context.query.order_direction %>" />
+    <input type="hidden" name="order_by" value="<%= _context.query.order_by %>" />
+
+    <div class="mb-4">
+      <label for="date_from" class="font-semibold hover:cursor-pointer body-3">From</label>
+      <input type="date" name="f:date_from" value="<%= _context.query["f:date_from"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <label for="date_to" class="font-semibold hover:cursor-pointer body-3">To</label>
+      <input type="date" name="f:date_to" value="<%= _context.query["f:date_to"] %>" />
+    </div>
+
+    <div class="mb-4">
+      <%- f.field('f:operator', {
+          as: 'select',
+          options: editors.map(editor => [editor.id, editor.name]),
+          label: "Editor",
+          include_blank: 'All Editors',
+          value: _context.query["f:operator"]
+        }) %>
+    </div>
+
+    <div class="mb-4">
+      <label for="" class="font-semibold hover:cursor-pointer body-3">Changes</label>
+      <div class="checkbox-group mb-4">
+        <% Object.entries(history.changeTypes(_context.resourceConfig.pageType)).forEach(([key, {label}])=> { %>
+        <div class="flex items-center gap-1">
+          <% if (utils.includedInCollection(key, _context.query["f:change_type"])) { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' checked value="<%= key %>" class="hover:cursor-pointer">
+          <% } else { %>
+          <input type="checkbox" name="f:change_type" id='change-<%= key %>' value="<%= key %>" class="hover:cursor-pointer">
+          <% } %>
+          <label for='change-<%= key %>' class="body-2 hover:cursor-pointer">
+            <%= label %>
+          </label>
+        </div>
+        <% }); %>
+      </div>
+    </div>
+
+    <div class="btn-toolbar">
+      <button type="submit" class="btn-primary">Search</button>
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/history` %>" class="btn-text">Clear search</a>
+    </div>
+  </form>
+</div>
+
+<script>
+  const sidebar = document.querySelector("[data-sidebar]");
+  const searchToggle = document.querySelector('[data-toggle-sidebar]');
+  searchToggle.addEventListener('click', () => {
+    sidebar.classList.toggle('hidden');
+  });
+</script>

package/src/views/pages/index.ejs

@@ -139,7 +139,7 @@
       <div class="checkbox-group mb-4">
         <% tags.forEach((item,idx)=> { %>
         <div class="flex items-center gap-1">
-          <% if (Array.from(_context.query["f:tags"] || []).includes(item.id)) { %>
+          <% if (utils.includedInCollection(item.id, _context.query["f:tags"])) { %>
           <input type="checkbox" name="f:tags" id='tag-<%= item.id %>' checked value="<%= item.id %>" class="hover:cursor-pointer">
           <% } else { %>
           <input type="checkbox" name="f:tags" id='tag-<%= item.id %>' value="<%= item.id %>" class="hover:cursor-pointer">

package/src/views/pages/show.ejs

@@ -219,57 +219,17 @@
       History of changes
     </h4>
 
-    <table class="data-grid">
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Date of change</th>
-          <th>Published by</th>
-          <th>&nbsp;</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <% const maxVersion = Math.max(...changes.map((ch) => ch.version)); %>
-        <% changes.forEach((change, idx)=> { %>
-        <tr class="border-b border-mono-25">
-          <td class="py-4 pl-2">
-            <div class="flex items-center gap-2">
-              <%= [change.title, change.description].filter(Boolean).join(": ") %>
-
-              <% if (change.source === "revert") { %>
-              <img src="/static/_assets/revert.svg" alt="Revert version" class="size-4">
-              <% } %>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                </svg>
-
-                <time data-pretty-datetime datetime="<%= change.insertedAt %>"><%= change.insertedAt %></time>
-              </div>
-            </div>
-          </td>
-
-          <td class="whitespace-nowrap">
-            <div class="body-3 text-raketa-foreground/50">
-              <div class="flex items-center gap-1" title="<%= change.operatorMeta.name %>">
-                <img src="<%= change.operatorMeta.avatar %>" class="size-4 rounded-full">
-                <%= change.operatorMeta.name %>
-              </div>
-            </div>
-          </td>
-
-          <td>
-            <%- render_partial('./_shared/_history_toolbar.ejs', { maxVersion, change }) %>
-          </td>
-        </tr>
-        <% }); %>
-      </tbody>
-    </table>
+    <%- render_partial('./_shared/history_table.ejs', {
+      changes,
+      resource,
+      _context,
+      render_partial,
+      skipPagination: true,
+      toolbarPath: './_shared/_history_toolbar.ejs'
+    }) %>
+
+    <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/history` %>" class="btn-text ml-2 my-8">
+      Full page history
+    </a>
   </div>
 </div>