From 6e49007ffbb424fdd9e9c4c02925b890db801562 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Wed, 24 Apr 2024 12:44:42 -0400
Subject: [PATCH] Attempting a different document loading strategy for projects

---
 src/lib/api/projects.ts                       |  5 +-
 src/lib/api/types.d.ts                        |  1 +
 .../app/projects/[id]-[slug]/+page.svelte     | 66 +++++++++++++++----
 src/routes/app/projects/[id]-[slug]/+page.ts  |  6 +-
 4 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/src/lib/api/projects.ts b/src/lib/api/projects.ts
index 7869bf5d0..84b88c50a 100644
--- a/src/lib/api/projects.ts
+++ b/src/lib/api/projects.ts
@@ -1,5 +1,6 @@
 // api methods for projects
-import type { Project, ProjectResults, ProjectMembershipList } from "./types";
+import type { Page } from "@/api/types";
+import type { Project, ProjectResults, Document } from "./types";
 
 import { error, type NumericRange } from "@sveltejs/kit";
 
@@ -134,7 +135,7 @@ export async function pinProject(
 export async function documents(
   id: number | string,
   fetch = globalThis.fetch,
-): Promise<ProjectMembershipList> {
+): Promise<Page<{ document: Document; edit_access: boolean }>> {
   const endpoint = new URL(`projects/${id}/documents/`, BASE_API_URL);
   const expand = ["user", "organization", "document"];
 
diff --git a/src/lib/api/types.d.ts b/src/lib/api/types.d.ts
index 8ac1a6c18..54c1221ab 100644
--- a/src/lib/api/types.d.ts
+++ b/src/lib/api/types.d.ts
@@ -166,6 +166,7 @@ export interface SearchOptions {
   cursor?: string;
   expand?: string;
   version?: number | string;
+  project?: number | string;
 }
 
 export interface OEmbed {
diff --git a/src/routes/app/projects/[id]-[slug]/+page.svelte b/src/routes/app/projects/[id]-[slug]/+page.svelte
index 5c68bbeef..4e33c268c 100644
--- a/src/routes/app/projects/[id]-[slug]/+page.svelte
+++ b/src/routes/app/projects/[id]-[slug]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import {
-    File24,
     Hourglass24,
     Pencil16,
     People16,
@@ -15,13 +14,28 @@
   import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
   import Empty from "@/lib/components/common/Empty.svelte";
   import Error from "@/lib/components/common/Error.svelte";
-  import DocumentListItem from "@/lib/components/documents/DocumentListItem.svelte";
   import { projectSearchUrl } from "@/lib/utils/search";
+  import Search from "@/lib/components/inputs/Search.svelte";
+  import ResultsList, {
+    selected,
+    total,
+    visible,
+  } from "@/lib/components/documents/ResultsList.svelte";
+  import PageToolbar from "@/lib/components/common/PageToolbar.svelte";
 
   export let data;
 
   $: project = data.project;
-  $: documents = data.documents;
+  $: documentSearch = data.documents;
+  $: query = data.query;
+
+  function selectAll(e) {
+    if (e.target.checked) {
+      $selected = [...$visible];
+    } else {
+      $selected = [];
+    }
+  }
 </script>
 
 <MainLayout>
@@ -33,21 +47,45 @@
   </svelte:fragment>
 
   <ContentLayout slot="content">
-    {#await documents}
+    <PageToolbar slot="header">
+      <Search name="q" {query} slot="center" />
+    </PageToolbar>
+    {#await documentSearch}
       <Empty icon={Hourglass24}>Loading project documents…</Empty>
-    {:then projectItems}
-      <div>
-        {#each projectItems.results as { document }}
-          {#if typeof document !== "number"}
-            <DocumentListItem {document} />
-          {/if}
-        {:else}
-          <Empty icon={File24}>This project has no documents.</Empty>
-        {/each}
-      </div>
+    {:then documentSearchResults}
+      <ResultsList
+        results={documentSearchResults.results}
+        next={documentSearchResults.next}
+        count={documentSearchResults.count}
+        auto
+      />
     {:catch}
       <Error>Error loading project documents</Error>
     {/await}
+    <PageToolbar slot="footer">
+      <label slot="left" class="select-all">
+        <input
+          type="checkbox"
+          name="select_all"
+          checked={$selected.length === $visible.size}
+          indeterminate={$selected.length > 0 &&
+            $selected.length < $visible.size}
+          on:change={selectAll}
+        />
+        {#if $selected.length > 0}
+          {$selected.length.toLocaleString()} selected
+        {:else}
+          Select all
+        {/if}
+      </label>
+
+      <svelte:fragment slot="right">
+        {#if $visible && $total}
+          Showing {$visible.size.toLocaleString()} of {$total.toLocaleString()}
+          results
+        {/if}
+      </svelte:fragment>
+    </PageToolbar>
   </ContentLayout>
 
   <svelte:fragment slot="action">
diff --git a/src/routes/app/projects/[id]-[slug]/+page.ts b/src/routes/app/projects/[id]-[slug]/+page.ts
index a0ec4862b..b8ba2b18a 100644
--- a/src/routes/app/projects/[id]-[slug]/+page.ts
+++ b/src/routes/app/projects/[id]-[slug]/+page.ts
@@ -1,4 +1,5 @@
 import * as projectApi from "$lib/api/projects";
+import { search } from "$lib/api/documents";
 import { breadcrumbTrail } from "$lib/utils/navigation";
 
 export async function load({ params, url, parent, fetch }) {
@@ -7,10 +8,13 @@ export async function load({ params, url, parent, fetch }) {
   const breadcrumbs = await breadcrumbTrail(parent, [
     { href: url.pathname, title: project.title },
   ]);
-  const documents = projectApi.documents(id, fetch);
+  const query = url.searchParams.get("q");
+  const cursor = url.searchParams.get("cursor");
+  const documents = search(query, { cursor, project: project.id });
   return {
     breadcrumbs,
     project,
     documents,
+    query,
   };
 }