Merge pull request #13 from archtika/devel

Add pagination for logs and update deploy action

.github/workflows/deploy.yml

@@ -31,8 +31,9 @@ jobs:
     - name: Deploy to demo server
       run: |
         nix run nixpkgs#nixos-rebuild -- switch \
-          --flake .#${{ github.event.workflow_run.head_branch == 'devel' && 'qs' || 'prod' }} \
+          --flake github:archtika/archtika/${{ github.event.workflow_run.head_branch }}#${{ github.event.workflow_run.head_branch == 'devel' && 'qs' || 'prod' }} \
           --fast \
+          --refresh \
           --build-host ${{ env.SERVER_USER }}@${{ github.event.workflow_run.head_branch == 'devel' && env.QS_SERVER_IP || env.PROD_SERVER_IP }} \
           --target-host ${{ env.SERVER_USER }}@${{ github.event.workflow_run.head_branch == 'devel' && env.QS_SERVER_IP || env.PROD_SERVER_IP }} \
           --use-remote-sudo

nix/dev-vm.nix

@@ -68,9 +68,9 @@
         ];
         locations = {
           "/" = {
-            root = "/var/www/archtika-websites/";
+            root = "/var/www/archtika-websites";
             index = "index.html";
-            tryFiles = "$uri $uri/ $uri.html $uri/index.html index.html =404";
+            tryFiles = "$uri $uri/ $uri.html =404";
             extraConfig = ''
               autoindex on;
             '';

nix/module.nix

@@ -160,14 +160,12 @@ in
             "/previews/" = {
               alias = "/var/www/archtika-websites/previews/";
               index = "index.html";
-              tryFiles = "$uri $uri/ $uri.html $uri/index.html index.html =404";
+              tryFiles = "$uri $uri/ $uri.html =404";
             };
             "/api/" = {
               proxyPass = "http://localhost:${toString cfg.apiPort}/";
               extraConfig = ''
                 default_type  application/json;
-                proxy_hide_header Content-Location;
-                add_header Content-Location /api/$upstream_http_content_location;
                 proxy_set_header Connection "";
                 proxy_http_version 1.1;
               '';
@@ -179,9 +177,9 @@ in
           forceSSL = true;
           locations = {
             "/" = {
-              alias = "/var/www/archtika-websites/$subdomain/";
+              root = "/var/www/archtika-websites/$subdomain";
               index = "index.html";
-              tryFiles = "$uri $uri/ $uri.html $uri/index.html index.html =404";
+              tryFiles = "$uri $uri/ $uri.html =404";
             };
           };
         };

web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts

@@ -6,6 +6,8 @@ export const load: PageServerLoad = async ({ parent, fetch, params, cookies, url
   const userFilter = url.searchParams.get("logs_filter_user");
   const resourceFilter = url.searchParams.get("logs_filter_resource");
   const operationFilter = url.searchParams.get("logs_filter_operation");
+  const currentPage = Number.parseInt(url.searchParams.get("logs_results_page") ?? "1");
+  const resultOffset = currentPage === 1 ? 0 : currentPage * 50;
 
   const searchParams = new URLSearchParams();
 
@@ -23,7 +25,7 @@ export const load: PageServerLoad = async ({ parent, fetch, params, cookies, url
     searchParams.append("operation", `eq.${operationFilter.toUpperCase()}`);
   }
 
-  const constructedFetchUrl = `${baseFetchUrl}&${searchParams.toString()}`;
+  const constructedFetchUrl = `${baseFetchUrl}&${searchParams.toString()}&limit=50&offset=${resultOffset}`;
 
   const changeLogData = await fetch(constructedFetchUrl, {
     method: "GET",

web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte

@@ -42,6 +42,8 @@
     const { user, change_log, media, ...restTables } = tables;
     resources = restTables;
   }
+
+  let logsSection: HTMLElement;
 </script>
 
 <WebsiteEditor
@@ -50,14 +52,14 @@
   title={data.website.title}
   previewContent={data.home.main_content}
 >
-  <section id="logs">
+  <section id="logs" bind:this={logsSection}>
     <hgroup>
       <h2>
         <a href="#logs">Logs</a>
       </h2>
       <p>
-        <strong>{data.resultChangeLogCount}</strong>
+        <strong>{data.resultChangeLogCount.toLocaleString("en", { useGrouping: true })}</strong>
-        <small>results</small>
+        <small>result(s)</small>
       </p>
     </hgroup>
     <details>
@@ -111,6 +113,7 @@
             >
           </select>
         </label>
+        <input type="hidden" name="logs_results_page" value={1} />
         <button type="submit">Submit</button>
       </form>
     </details>
@@ -155,6 +158,106 @@
           {/each}
         </tbody>
       </table>
+      {#snippet commonFilterInputs()}
+        <input
+          type="hidden"
+          name="logs_filter_user"
+          value={$page.url.searchParams.get("logs_filter_user")}
+        />
+        <input
+          type="hidden"
+          name="logs_filter_resource"
+          value={$page.url.searchParams.get("logs_filter_resource")}
+        />
+        <input
+          type="hidden"
+          name="logs_filter_operation"
+          value={$page.url.searchParams.get("logs_filter_operation")}
+        />
+      {/snippet}
+      <div class="pagination">
+        <p>
+          {$page.url.searchParams.get("logs_results_page") ?? 1} / {Math.max(
+            Math.floor(data.resultChangeLogCount / 50),
+            1
+          )}
+        </p>
+        <form method="GET" onsubmit={() => logsSection.scrollIntoView()}>
+          <input type="hidden" name="logs_results_page" value={1} />
+          {@render commonFilterInputs()}
+          <button
+            type="submit"
+            disabled={($page.url.searchParams.get("logs_results_page") ?? "1") === "1"}
+            >First</button
+          >
+        </form>
+        <form method="GET" onsubmit={() => logsSection.scrollIntoView()}>
+          <input
+            type="hidden"
+            name="logs_results_page"
+            value={Math.max(
+              1,
+              Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") - 1
+            )}
+          />
+          {@render commonFilterInputs()}
+          <button
+            type="submit"
+            disabled={($page.url.searchParams.get("logs_results_page") ?? "1") === "1"}
+            >Previous</button
+          >
+        </form>
+        <form method="GET" onsubmit={() => logsSection.scrollIntoView()}>
+          <input
+            type="hidden"
+            name="logs_results_page"
+            value={Math.min(
+              Math.max(Math.floor(data.resultChangeLogCount / 50), 1),
+              Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") + 1
+            )}
+          />
+          {@render commonFilterInputs()}
+          <button
+            type="submit"
+            disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
+              Math.max(Math.floor(data.resultChangeLogCount / 50), 1).toString()}>Next</button
+          >
+        </form>
+        <form method="GET" onsubmit={() => logsSection.scrollIntoView()}>
+          <input
+            type="hidden"
+            name="logs_results_page"
+            value={Math.max(Math.floor(data.resultChangeLogCount / 50), 1)}
+          />
+          {@render commonFilterInputs()}
+          <button
+            type="submit"
+            disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
+              Math.max(Math.floor(data.resultChangeLogCount / 50), 1).toString()}>Last</button
+          >
+        </form>
+      </div>
     </div>
   </section>
 </WebsiteEditor>
+
+<style>
+  .pagination {
+    display: flex;
+    align-items: center;
+    margin-inline: var(--space-2xs);
+    margin-block: var(--space-s);
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    justify-content: end;
+  }
+
+  .pagination > form:first-of-type {
+    margin-inline-start: auto;
+  }
+
+  button[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+</style>

web-app/src/routes/+layout.svelte

@@ -3,20 +3,11 @@
   import { page } from "$app/stores";
   import type { LayoutServerData } from "./$types";
   import type { Snippet } from "svelte";
-  import { beforeNavigate, afterNavigate } from "$app/navigation";
+  import { navigating } from "$app/stores";
   import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
   const { data, children }: { data: LayoutServerData; children: Snippet } = $props();
 
-  let loading = $state(false);
-
-  beforeNavigate(() => {
-    loading = true;
-  });
-  afterNavigate(() => {
-    loading = false;
-  });
-
   const isProjectRoute = $derived($page.url.pathname.startsWith("/website") && !$page.error);
   const routeName = $derived(
     $page.url.pathname === "/"
@@ -25,7 +16,7 @@
   );
 </script>
 
-{#if loading}
+{#if $navigating && ["link", "goto"].includes($navigating.type)}
   <LoadingSpinner />
 {/if}