Adds menu with customization options

MuckRock · Dec 5, 2024 · a062207 · a062207
1 parent 6af786a
commit a062207
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 28 deletions.
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
@@ -8,7 +8,8 @@
     "edit": "Edit",
     "search": "Search",
     "feedback": "Feedback",
-    "title": "Title"
+    "title": "Title",
+    "customize": "Customize"
   },
   "search": {
     "loading": "Searching…",

diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
@@ -18,6 +18,17 @@
   );
 
   export let total: Writable<number> = writable(0);
+
+  // Allow users to customize the visible fields in document list items
+  const storage = new StorageManager("document-browser");
+  const userDefaultVisible = storage.get<VisibleFields, VisibleFields>(
+    "visibleFields",
+    defaultVisibleFields,
+  );
+  export const visibleFields: Writable<VisibleFields> = writable(
+    Object.assign({}, defaultVisibleFields, userDefaultVisible),
+  );
+  visibleFields.subscribe((val) => storage.set("visibleFields", val));
 </script>
 
 <script lang="ts">
@@ -26,13 +37,17 @@
   import { Search24 } from "svelte-octicons";
 
   import Button from "../common/Button.svelte";
-  import DocumentListItem from "./DocumentListItem.svelte";
+  import DocumentListItem, {
+    defaultVisibleFields,
+    type VisibleFields,
+  } from "./DocumentListItem.svelte";
   import Empty from "../common/Empty.svelte";
   import Flex from "../common/Flex.svelte";
   import NoteHighlights from "./NoteHighlights.svelte";
   import PageHighlights from "./PageHighlights.svelte";
 
   import { getApiResponse } from "$lib/utils/api";
+  import { StorageManager } from "@/lib/utils/storage";
 
   export let results: Document[] = [];
   export let count: Maybe<number> = undefined;
@@ -46,6 +61,9 @@
   let error: string = "";
 
   const embed: boolean = getContext("embed");
+  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
+
+  $: console.log($visibleFields);
 
   // track what's visible so we can compare to $selected
   $: $visible = new Map(results.map((d) => [String(d.id), d]));
@@ -120,7 +138,7 @@
             />
           </label>
         {/if}
-        <DocumentListItem {document} />
+        <DocumentListItem {document} visibleFields={$visibleFields} />
       </Flex>
 
       {#if document.highlights}

diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -32,6 +32,7 @@
     selectedIds,
     total,
     visible,
+    visibleFields,
   } from "$lib/components/documents/ResultsList.svelte";
 
   // Form components
@@ -55,8 +56,10 @@
   import { isSupported } from "$lib/utils/files";
   import { canUploadFiles, getCurrentUser } from "$lib/utils/permissions";
   import { remToPx } from "$lib/utils/layout";
+  import DocumentListToolbar from "./DocumentListToolbar.svelte";
 
   setContext("selected", selected);
+  setContext("visibleFields", visibleFields);
 
   const embed: boolean = getContext("embed");
   const me = getCurrentUser();
@@ -78,7 +81,6 @@
     search: "common.search",
   };
 
-  let headerToolbarWidth: number;
   let footerToolbarWidth: number;
 
   $: BREAKPOINTS = {
@@ -152,19 +154,7 @@
                 </Button>
               </div>
             {/if}
-            <PageToolbar bind:width={headerToolbarWidth}>
-              <Flex slot="right">
-                <div style:flex="1 1 auto">
-                  <Search name="q" {query} placeholder={$_(uiText.search)} />
-                  <p class="help" class:hide={headerToolbarWidth < remToPx(38)}>
-                    {@html $_("search.help")}
-                    <a target="_blank" href="/help/search/">
-                      {$_("search.more")}
-                    </a>
-                  </p>
-                </div>
-              </Flex>
-            </PageToolbar>
+            <DocumentListToolbar {query} />
             {#if $sidebars["action"] === false}
               <div class="toolbar w-auto">
                 <Button
@@ -309,14 +299,4 @@
     min-width: 7rem;
     margin: 0.25rem 0;
   }
-  .help {
-    flex: 1 1 100%;
-    font-size: var(--font-xs);
-    margin: 0.25rem;
-    color: var(--gray-4);
-    text-align: left;
-  }
-  .hide {
-    display: none;
-  }
 </style>
diff --git a/src/lib/components/layouts/DocumentListToolbar.svelte b/src/lib/components/layouts/DocumentListToolbar.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import Flex from "../common/Flex.svelte";
+  import PageToolbar from "../common/PageToolbar.svelte";
+  import Search from "../forms/Search.svelte";
+  import { remToPx } from "$lib/utils/layout";
+  import Dropdown from "../common/Dropdown.svelte";
+  import SidebarItem from "../sidebar/SidebarItem.svelte";
+  import { ChevronDown12, Paintbrush16 } from "svelte-octicons";
+  import Menu from "../common/Menu.svelte";
+  import { type Writable } from "svelte/store";
+  import { getContext } from "svelte";
+  import { type VisibleFields } from "../documents/DocumentListItem.svelte";
+  import FieldLabel from "../common/FieldLabel.svelte";
+
+  export let query: string = "";
+
+  let headerToolbarWidth: number;
+
+  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
+  $: console.log($visibleFields);
+</script>
+
+<PageToolbar bind:width={headerToolbarWidth}>
+  <Flex slot="left">
+    <Dropdown>
+      <SidebarItem slot="anchor">
+        <Paintbrush16 slot="start" />
+        {$_("common.customize")}
+        <ChevronDown12 slot="end" />
+      </SidebarItem>
+      <Menu>
+        <form>
+          {#each Object.entries($visibleFields) as [key, value], index}
+            <label class="visibleField">
+              <input
+                type="checkbox"
+                name={key}
+                bind:checked={$visibleFields[key]}
+              />
+              <FieldLabel>{key}</FieldLabel>
+            </label>
+          {/each}
+        </form>
+      </Menu>
+    </Dropdown>
+  </Flex>
+  <Flex slot="right">
+    <div style:flex="1 1 auto">
+      <Search name="q" {query} placeholder={$_("common.search")} />
+      <p class="help" class:hide={headerToolbarWidth < remToPx(38)}>
+        {@html $_("search.help")}
+        <a target="_blank" href="/help/search/">
+          {$_("search.more")}
+        </a>
+      </p>
+    </div>
+  </Flex>
+</PageToolbar>
+
+<style>
+  .visibleField {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .help {
+    flex: 1 1 100%;
+    font-size: var(--font-xs);
+    margin: 0.25rem;
+    color: var(--gray-4);
+    text-align: left;
+  }
+  .hide {
+    display: none;
+  }
+</style>
diff --git a/src/lib/components/layouts/stories/DocumentBrowser.stories.svelte b/src/lib/components/layouts/stories/DocumentBrowser.stories.svelte
@@ -15,7 +15,7 @@
   };
 
   const args = {
-    documents: Promise.resolve(documentsList),
+    documents: Promise.resolve({ data: documentsList }),
   };
 </script>