Merge pull request #25 from davidus27/minor-refactor

Minor refactor
davidus27 · Jul 8, 2023 · 9095d4b · 9095d4b
2 parents c6fbd25 + 977a1e8
commit 9095d4b
Show file tree

Hide file tree

Showing 26 changed files with 2,783 additions and 1,659 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,7 +5,7 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "type": "chrome",
+            "type": "msedge",
             "request": "launch",
             "name": "Launch Edge against localhost",
             "url": "http://localhost:8080",

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.svelte b/src/App.svelte
@@ -3,19 +3,16 @@
   import { Button } from "attractions";
   import { ArrowLeftIcon, XIcon } from "svelte-feather-icons";
 
-  import Footer from "./components/Footer.svelte";
   import Header from "./components/Header.svelte";
-  import Processing from "./components/Processing.svelte";
+  import Checkout from "./components/Checkout.svelte";
   import Starter from "./components/Starter.svelte";
   import Review from "./components/Review.svelte";
 
-  let files = [];
   let breadcrumbsPath = [{ href: "/", text: "Home" }];
 
-  const views = [Starter, Processing, Review];
-  // const views = [Starter, Review];
-
+  const views = [Starter, Checkout, Review];
 
+  // breadcrumbs path defined
   const path = [
     { href: "/", text: "Home" },
     { href: "/checkout", text: "Checkout" },
@@ -57,31 +54,12 @@
     updateView(null);
   };
 
-
-
-  const saveAlert = (e: any) => {
-    if (files.length == 0) {
-      return;
-    }
-    if(!e) e = window.event;
-    //e.cancelBubble is supported by IE - this will kill the bubbling process.
-    e.cancelBubble = true;
-    //This is displayed on the dialog box.
-    e.returnValue = 'Are you sure you want to leave? All the progress will be removed'; 
-    //e.stopPropagation works in Firefox.
-    if (e.stopPropagation) {
-        e.stopPropagation();
-        e.preventDefault();
-    }
-  }
-  // window.onbeforeunload = saveAlert; 
   window.onbeforeprint = undefined;
 
   let props = {
-    files,
+    // files,
     moveNext,
   };
-
 </script>
 
 <main>
@@ -104,9 +82,7 @@
   <!-- <Footer /> -->
 </main>
 
-
 <style>
-
   main {
     text-align: center;
     padding: 1em;
@@ -115,13 +91,13 @@
   }
 
   /* set viewport to the flexbox */
-  #viewport {
+  /* #viewport {
     height:100vh; 
     margin:0;
     min-height:50px;
     display:flex; 
     flex-direction:column;
-  }
+  } */
 
   /* make buttons horizontally alligned */
   .buttons {

diff --git a/src/components/Processing.svelte → src/components/Checkout.svelte b/src/components/Processing.svelte → src/components/Checkout.svelte
@@ -1,48 +1,44 @@
 <script lang="ts">
   import { Button } from "attractions";
-  import { PdfViewer, DocumentFilters } from "../pdf";
+  import { PdfViewer, DocumentFilters } from "../core";
   import Filter from "./Filter.svelte";
+  import { formData } from "../stores/filterStore";
+  import { files } from "../stores/filesStore";
 
-
-  export let moveNext: any
-  export let files: Array<File>;
-  let formData: DocumentFilters;
+  export let moveNext: any;
+  // export let files: Array<File>;
+  // let formData: DocumentFilters;
 
   const handleDocuments = async () => {
-    console.log("handleDocuments: ", formData);
-    moveNext({
-      "formData": formData,
-    });
+    console.log("handleDocuments: ", $formData);
+    moveNext();
   };
 
   let pageCount: number;
   // get pages count from pdf
   const getPageCounts = async () => {
-    const pdfViewerObj = new PdfViewer(files);
+    const pdfViewerObj = new PdfViewer($files);
     await pdfViewerObj.prepareForRender();
     return pdfViewerObj.getPageCounts();
   };
 
   getPageCounts().then((counts) => {
     pageCount = counts[0];
   });
-
 </script>
 
 <div>
-  <Filter bind:formData bind:pageCount />
+  <Filter bind:pageCount />
 
   <div class="process-btn">
     <Button danger filled on:click={handleDocuments}>Process</Button>
   </div>
 </div>
 
-
 <style>
-
   /* move submit-btn to the relative right side of the screen */
   .process-btn {
-    float:right;
+    float: right;
     /* add some padding */
     padding: 20px;
   }

diff --git a/src/components/Divider.svelte b/src/components/Divider.svelte
@@ -1,11 +1,10 @@
-<script lang="ts" >
+<script lang="ts">
     export let selected: string;
 </script>
 
-
 <div class="strike">
     <span>
-        <select class="select" bind:value={selected} >
+        <select class="select" bind:value={selected}>
             <option value="AND">AND</option>
             <option value="OR">OR</option>
         </select>
@@ -14,12 +13,12 @@
 
 <style>
     .select {
-        border-radius:36px;
-        display:inline-block;
-        overflow:hidden;
+        border-radius: 36px;
+        display: inline-block;
+        overflow: hidden;
         margin-bottom: 0px;
     }
-    
+
     .strike {
         /* add padding */
         padding-top: 1em;
@@ -28,14 +27,14 @@
         display: block;
         text-align: center;
         overflow: hidden;
-        white-space: nowrap; 
+        white-space: nowrap;
     }
 
     .strike > span {
         position: relative;
         display: inline-block;
     }
-	
+
     .strike > span:before,
     .strike > span:after {
         content: "";
@@ -55,5 +54,4 @@
         left: 100%;
         margin-left: 15px;
     }
-
-</style>
+</style>
diff --git a/src/components/Filter.svelte b/src/components/Filter.svelte
@@ -1,38 +1,21 @@
 <script lang="ts">
   import {
-    Button,
     FormField,
     Switch,
     Autocomplete,
     Headline,
     Subhead,
     Divider,
     H2,
-    Card
   } from "attractions";
-  import type { DocumentFilters } from "../pdf";
+  // import type { DocumentFilters } from "../core";
   import MyDivider from "./Divider.svelte";
-
   import PageRange from "./PageRange.svelte";
 
-  import { PlusIcon } from "svelte-feather-icons";
-
-  export let formData: DocumentFilters = {
-    keywords: {
-      words: [],
-      logicOperator: "OR"
-    },
-    checks: {
-      logicOperator: "AND",
-      hasHighlights: false,
-      hasImages: false,
-      hasLinks: false,
-    },
-    textRange: ""
-  };
-
-  async function* getOptions(text: string) {
-    yield [
+  import { formData } from "../stores/filterStore";
+
+  function getOptions(text: string) {
+    return [
       { name: text, details: "Optional" },
       { name: `it highlights the match: ${text}` },
     ];
@@ -43,27 +26,39 @@
 
 <div class="filter">
   <Headline>Checkout</Headline>
-  <Subhead style="padding-bottom: 1em;" >New document(s) will only contain pages complying with these rules:</Subhead>
-
+  <Subhead style="padding-bottom: 1em;"
+    >New document(s) will only contain pages complying with these rules:</Subhead
+  >
   <Divider />
+
+  <!-- First filter -->
   <H2>1. Keywords</H2>
   <div class="keywords-form">
-    <FormField 
+    <FormField
       name="Pages containing specified keywords:"
       help="Enter one or more keywords to search for in the document. The final document will contain pages containing those keywords."
     >
-      <Autocomplete class="pages-contains" {getOptions} bind:selection={formData.keywords.words} />
+      <Autocomplete
+        class="pages-contains"
+        {getOptions}
+        bind:selection={$formData.keywords.words}
+      />
     </FormField>
   </div>
 
-  <MyDivider bind:selected={formData.keywords.logicOperator} />
+  <MyDivider bind:selected={$formData.keywords.logicOperator} />
+
+  <!-- Second filters -->
   <H2 style="padding-bottom: 2em">2. Checks</H2>
 
   <FormField
     name="Pages containing highlights:"
     help="New document will include pages containing highlighted text"
   >
-    <Switch class="highlight-switch" bind:value={formData.checks.hasHighlights} />
+    <Switch
+      class="highlight-switch"
+      bind:value={$formData.checks.hasHighlights}
+    />
   </FormField>
 
   <div class="or"><Subhead>OR...</Subhead></div>
@@ -72,7 +67,7 @@
     name="Pages containing links:"
     help="New document will include pages containing links."
   >
-    <Switch class="links-switch" bind:value={formData.checks.hasLinks} />
+    <Switch class="links-switch" bind:value={$formData.checks.hasLinks} />
   </FormField>
 
   <div class="or"><Subhead>OR...</Subhead></div>
@@ -81,14 +76,14 @@
     name="Pages containing images:"
     help="New document will include pages containing images."
   >
-    <Switch class="images-switch" bind:value={formData.checks.hasImages} />
+    <Switch class="images-switch" bind:value={$formData.checks.hasImages} />
   </FormField>
 
-  <MyDivider bind:selected={formData.checks.logicOperator} />
-
+  <MyDivider bind:selected={$formData.checks.logicOperator} />
 
+  <!-- Third filter -->
   <H2>3. Page ranges</H2>
-  <PageRange bind:textRange={formData.textRange} bind:pageCount />
+  <PageRange bind:textRange={$formData.textRange} bind:pageCount />
 </div>
 
 <style>
@@ -106,7 +101,7 @@
     /* add a space at the top */
     padding-top: 2em;
   }
-  
+
   .or {
     padding-bottom: 2em;
   }

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -32,34 +32,30 @@
 </script>
 
 <div class="footer">
-
   {#if showButton}
     <div class="scroll-top-btn">
       <Button filled on:click={scrollToTop}>
         <ArrowUpCircleIcon size="25" />&nbsp; scroll to the top
       </Button>
     </div>
-
   {/if}
 
-
   <Divider text="End of site" />
   <div>
     <H3>This site was made with love ❤️</H3>
   </div>
 </div>
 
-<style>
 
+<style>
   /* set footer div to the responsive end of the page */
   .footer {
-    min-height:50px;
+    min-height: 50px;
     margin-top: auto;
   }
 
   /* center scroll-top-btn to the center dynamically */
   .scroll-top-btn {
     float: center;
   }
-
 </style>