Refactors ContentLayout from ResultsList

MuckRock · Feb 29, 2024 · a681afe · a681afe
1 parent 924b422
commit a681afe
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 76 deletions.
diff --git a/src/lib/components/ContentLayout.svelte b/src/lib/components/ContentLayout.svelte
@@ -0,0 +1,49 @@
+<div class="container">
+  {#if $$slots.header}
+    <header>
+      <slot name="header" />
+    </header>
+  {/if}
+  <main>
+    <slot />
+  </main>
+  {#if $$slots.footer}
+    <footer>
+      <slot name="footer" />
+    </footer>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    padding: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    position: relative;
+  }
+  header {
+    flex: 1 0 0;
+    width: 100%;
+    position: sticky;
+    top: 0;
+    padding: 0.625rem;
+  }
+  main {
+    flex: 1 0 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 1.25rem;
+  }
+  footer {
+    flex: 1 0 0;
+    width: 100%;
+    position: sticky;
+    bottom: 0;
+    padding: 0.625rem;
+  }
+</style>
diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte
@@ -35,13 +35,11 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    align-self: stretch;
   }
 
   input {
-    opacity: 0;
-    position: fixed;
-    z-index: -10;
+    display: none;
+    visibility: hidden;
   }
 
   span {

diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
@@ -7,15 +7,13 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import type { DocumentResults } from "$lib/api/types";
-  import Search from "../Search.svelte";
-  import PageToolbar from "../common/PageToolbar.svelte";
   import DocumentListItem from "./DocumentListItem.svelte";
   import Flex from "../common/Flex.svelte";
   import Checkbox from "../common/Checkbox.svelte";
-  import { Search24 } from "svelte-octicons";
+  import { Hourglass24, Search24 } from "svelte-octicons";
   import Empty from "../common/Empty.svelte";
 
-  export let results: DocumentResults;
+  export let results: DocumentResults = undefined;
 
   function updateSelection(event: Event, id: string | number) {
     const { checked } = event.target as HTMLInputElement;
@@ -27,61 +25,21 @@
   }
 </script>
 
-<div class="container">
-  <header>
-    <PageToolbar><Search slot="center" /></PageToolbar>
-  </header>
-  <main>
-    {#each results.results as document (document.id)}
-      <Flex gap={0.625} align="center">
-        <Checkbox
-          value={document.id}
-          on:change={(event) => updateSelection(event, document.id)}
-        />
-        <DocumentListItem {document} />
-      </Flex>
-    {:else}
-      <Empty icon={Search24}>
-        <h2>{$_("noDocuments.noSearchResults")}</h2>
-        <p>{$_("noDocuments.queryNoResults")}</p>
-      </Empty>
-    {/each}
-  </main>
-  <footer>
-    <PageToolbar />
-  </footer>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    padding: 0;
-    flex-direction: column;
-    align-items: flex-start;
-    flex: 1 0 0;
-    align-self: stretch;
-    position: relative;
-  }
-  header {
-    flex: 1 0 0;
-    width: 100%;
-    position: sticky;
-    top: 0.5rem;
-    margin: 0.5rem 0;
-  }
-  main {
-    flex: 1 0 0;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0.5rem;
-  }
-  footer {
-    flex: 1 0 0;
-    width: 100%;
-    position: sticky;
-    bottom: 0.5rem;
-    margin: 0.5rem 0;
-  }
-</style>
+{#if !results}
+  <Empty icon={Hourglass24}>Loading…</Empty>
+{:else}
+  {#each results.results as document (document.id)}
+    <Flex gap={0.625} align="center">
+      <Checkbox
+        checked={$selected.includes(document.id)}
+        on:change={(event) => updateSelection(event, document.id)}
+      />
+      <DocumentListItem {document} />
+    </Flex>
+  {:else}
+    <Empty icon={Search24}>
+      <h2>{$_("noDocuments.noSearchResults")}</h2>
+      <p>{$_("noDocuments.queryNoResults")}</p>
+    </Empty>
+  {/each}
+{/if}
diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -23,10 +23,14 @@
   };
 </script>
 
-<Story name="yes results">
+<Story name="With Results">
   <div style="width: 36rem"><ResultsList {results} /></div>
 </Story>
 
-<Story name="no results">
+<Story name="Empty">
   <div style="width: 36rem"><ResultsList results={empty} /></div>
 </Story>
+
+<Story name="Loading">
+  <div style="width: 36rem"><ResultsList /></div>
+</Story>
diff --git a/src/lib/components/stories/MainLayout.stories.svelte b/src/lib/components/stories/MainLayout.stories.svelte
@@ -20,14 +20,16 @@
   import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
 
   import documents from "../../api/fixtures/documents/documents.json";
-  import DocumentListItem from "../documents/DocumentListItem.svelte";
   import Flex from "../common/Flex.svelte";
   import SidebarGroup from "../sidebar/SidebarGroup.svelte";
   import Action from "../common/Action.svelte";
   import Pin from "@/common/Pin.svelte";
   import ResultsList from "../documents/ResultsList.svelte";
+  import ContentLayout from "../ContentLayout.svelte";
+  import PageToolbar from "../common/PageToolbar.svelte";
+  import Search from "../Search.svelte";
 
-  let docList = documents as DocumentResults;
+  let results = documents as DocumentResults;
 
   export const meta = {
     title: "Components / Main Layout",
@@ -72,9 +74,13 @@
         </Flex>
       </SidebarGroup>
     </svelte:fragment>
-    <svelte:fragment slot="content">
-      <ResultsList results={docList} />
-    </svelte:fragment>
+    <ContentLayout slot="content">
+      <PageToolbar slot="header">
+        <Search slot="center" />
+      </PageToolbar>
+      <ResultsList {results} />
+      <PageToolbar slot="footer" />
+    </ContentLayout>
     <svelte:fragment slot="action">
       <Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
       <Flex direction="column">

diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
@@ -20,6 +20,9 @@
   import Action from "$lib/components/common/Action.svelte";
   import Pin from "@/common/Pin.svelte";
   import ResultsList from "@/lib/components/documents/ResultsList.svelte";
+  import ContentLayout from "@/lib/components/ContentLayout.svelte";
+  import PageToolbar from "@/lib/components/common/PageToolbar.svelte";
+  import Search from "@/lib/components/Search.svelte";
 
   export let data;
 
@@ -68,13 +71,17 @@
       </Flex>
     </SidebarGroup>
   </svelte:fragment>
-  <svelte:fragment slot="content">
+  <ContentLayout slot="content">
+    <PageToolbar slot="header">
+      <Search {query} />
+    </PageToolbar>
     {#await searchResults}
-      <p class="loading">Loading ...</p>
+      <ResultsList />
     {:then results}
       <ResultsList {results} />
     {/await}
-  </svelte:fragment>
+    <PageToolbar slot="footer" />
+  </ContentLayout>
   <svelte:fragment slot="action">
     <Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
     <Flex direction="column">