From b977aa53cf93ba8117dcfbd5035220c31efc1462 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 19 Mar 2024 10:26:17 -0400
Subject: [PATCH 1/5] Adds document count to manager ActionBar

This refactors the ActionBar into a presentational component with an accompanying ActionBarContainer to connect it with our stores. It also adds a Storybook for the component.
---
 src/langs/json/en.json                        |   2 +-
 src/pages/app/ActionBar.svelte                | 233 ++++++++++--------
 src/pages/app/ActionBarContainer.svelte       |  35 +++
 src/pages/app/Documents.svelte                |   2 +-
 .../app/stories/ActionBar.stories.svelte      |  50 ++++
 5 files changed, 213 insertions(+), 109 deletions(-)
 create mode 100644 src/pages/app/ActionBarContainer.svelte
 create mode 100644 src/pages/app/stories/ActionBar.stories.svelte

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 7dd7c47a6..f865addc1 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -547,7 +547,7 @@
   "paginator": {
     "page": "Page",
     "of": "of",
-    "document": "{n, plural, one {Document} other {Documents}}",
+    "document": "{n, plural, one {# Document} other {# Documents}}",
     "next": "Next Page",
     "previous": "Previous Page",
     "first": "First Page",
diff --git a/src/pages/app/ActionBar.svelte b/src/pages/app/ActionBar.svelte
index cd9966767..0888e695d 100644
--- a/src/pages/app/ActionBar.svelte
+++ b/src/pages/app/ActionBar.svelte
@@ -1,98 +1,127 @@
-<script>
-  import Checkbox from "@/common/Checkbox.svelte";
-  import Tooltip from "@/common/Tooltip.svelte";
-  import Dropdown from "@/common/Dropdown.svelte";
-  import Paginator from "../../common/Paginator.svelte";
+<script lang="ts">
   import { _ } from "svelte-i18n";
+  import Badge from "../../common/Badge.svelte";
+  import Checkbox from "../../common/Checkbox.svelte";
+  import Flex from "../../common/Flex.svelte";
+  import Tooltip from "../../common/Tooltip.svelte";
+  import Dropdown from "../../common/Dropdown.svelte";
+  import Paginator from "../../common/Paginator.svelte";
 
   // Menus
   import EditMenu from "./menus/EditMenu.svelte";
   import ProjectsMenu from "./menus/ProjectsMenu.svelte";
   import AddonsMenu from "./menus/AddonsMenu.svelte";
 
-  // Stores
-  import { search, searchNext, searchPrev } from "@/search/search.js";
-  import { layout } from "@/manager/layout.js";
-  import { manager, selectAll } from "@/manager/manager.js";
-  import { documents, unselectAll } from "@/manager/documents.js";
-  import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
+  let outerHeight = 1000;
+  let editVisible = false;
+
+  export let loggedIn: boolean;
+
+  export let data: {
+    loading: boolean;
+    documents: Array<any>;
+  };
+
+  export let selection: {
+    checked: boolean;
+    indeterminate: boolean;
+    editable: boolean;
+    onUncheck: () => void;
+    onCheck: () => void;
+  };
+
+  export let pagination: {
+    page: number;
+    totalPages?: number;
+    totalItems?: number;
+    onNext: () => void;
+    onPrev: () => void;
+    has_next: boolean;
+    has_prev: boolean;
+  };
 
   function handleSelectAll({ detail }) {
-    if (!detail.indeterminate) selectAll();
+    if (!detail.indeterminate) selection.onCheck();
   }
-
-  let outerHeight = 1000;
-  let editVisible = false;
 </script>
 
 <div class="barcontainer">
-  {#if !$layout.loading}
-    <div class="bar">
-      {#if $orgsAndUsers.loggedIn}
-        <span class="action check scaledown">
-          {#if $documents.documents.length > 0}
-            <Checkbox
-              on:check={handleSelectAll}
-              on:uncheck={unselectAll}
-              indeterminate={$manager.someSelected}
-              checked={$layout.hasSelection}
-            />
-          {/if}
-        </span>
+  {#if !data.loading}
+    <Flex gap={2} align="center" justify="space-between">
+      <Flex gap={2} align="center">
+        {#if loggedIn}
+          <span class="action check scaledown">
+            {#if data.documents.length > 0}
+              <Checkbox
+                on:check={handleSelectAll}
+                on:uncheck={selection.onUncheck}
+                indeterminate={selection.indeterminate}
+                checked={selection.checked}
+              />
+            {/if}
+          </span>
 
-        {#if $layout.hasSelection && $layout.selectionEditable}
-          <Dropdown
-            name="edit-menu"
-            table={true}
-            fixed={outerHeight > 600}
-            on:active={(e) => (editVisible = e.detail)}
-          >
+          {#if selection.checked && selection.editable}
+            <Dropdown
+              name="edit-menu"
+              table={true}
+              fixed={outerHeight > 600}
+              on:active={(e) => (editVisible = e.detail)}
+            >
+              <span class="action nowrap" slot="title">
+                {$_("actionBar.editMenu")}
+                <span class="dropper">▼</span>
+              </span>
+              <EditMenu visible={editVisible} />
+            </Dropdown>
+          {:else}
+            <span class="action disabled shortpad nowrap">
+              <Tooltip
+                caption={selection.editable
+                  ? $_("actionBar.selectDocs")
+                  : $_("actionBar.noPerms")}
+              >
+                {$_("actionBar.editMenu")}
+                <span class="dropper">▼</span>
+              </Tooltip>
+            </span>
+          {/if}
+          <Dropdown name="projects-menu" table={true} fixed={outerHeight > 600}>
             <span class="action nowrap" slot="title">
-              {$_("actionBar.editMenu")}
+              {$_("actionBar.projectsMenu")}
               <span class="dropper">▼</span>
             </span>
-            <EditMenu visible={editVisible} />
+            <ProjectsMenu />
+          </Dropdown>
+          <Dropdown name="addons-menu" table={true} fixed={outerHeight > 600}>
+            <span class="action nowrap" slot="title">
+              <span>
+                {$_("actionBar.addOnsMenu")}
+                <span class="dropper">▼</span>
+              </span>
+            </span>
+            <AddonsMenu />
           </Dropdown>
-        {:else}
-          <span class="action disabled shortpad nowrap">
-            <Tooltip
-              caption={$layout.selectionEditable
-                ? $_("actionBar.selectDocs")
-                : $_("actionBar.noPerms")}
-            >
-              {$_("actionBar.editMenu")}
-              <span class="dropper">▼</span>
-            </Tooltip>
-          </span>
         {/if}
-        <Dropdown name="projects-menu" table={true} fixed={outerHeight > 600}>
-          <span class="action nowrap" slot="title">
-            {$_("actionBar.projectsMenu")}
-            <span class="dropper">▼</span>
-          </span>
-          <ProjectsMenu />
-        </Dropdown>
-        <Dropdown name="addons-menu" table={true} fixed={outerHeight > 600}>
-          <span class="action nowrap" slot="title">
-            <span class="badge"> {$_("common.new")}! </span>
-            {$_("actionBar.addOnsMenu")}
-            <span class="dropper">▼</span>
-          </span>
-          <AddonsMenu />
-        </Dropdown>
-      {/if}
-
-      <span class="narrowhide">
-        <Paginator
-          page={$search.page}
-          totalPages={$search.results?.numPages}
-          on:next={searchNext}
-          on:previous={searchPrev}
-          has_next={$search.hasNext}
-          has_previous={$search.hasPrev}
-        />
-      </span>
-    </div>
+      </Flex>
+      <Flex gap={2} align="center">
+        {#if pagination.totalItems}
+          <div class="documents">
+            {$_("paginator.document", { values: { n: pagination.totalItems } })}
+          </div>
+        {/if}
+        <span class="narrowhide">
+          <Paginator
+            page={pagination.page}
+            totalPages={pagination.totalPages}
+            on:next={pagination.onNext}
+            on:previous={pagination.onPrev}
+            has_next={pagination.has_next}
+            has_previous={pagination.has_prev}
+          />
+        </span>
+      </Flex>
+    </Flex>
   {/if}
 </div>
 
@@ -101,44 +130,34 @@
 <style lang="scss">
   .barcontainer {
     border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-    padding: 14px 0;
+    padding: 0.75rem 0;
+    color: var(--darkgray);
 
     .nowrap {
       white-space: nowrap;
     }
 
-    .bar {
-      display: table-row;
-
-      .action {
-        font-size: 16px;
-        color: $primary;
-        padding: 0 25px;
-        user-select: none;
-        cursor: pointer;
-        display: table-cell;
-        vertical-align: middle;
-
-        &.check {
-          padding-right: 35px;
-          cursor: inherit;
-          transform: translateY(2px);
-        }
-
-        &.disabled {
-          color: $gray;
-          cursor: inherit;
-        }
+    .action {
+      color: $primary;
+      user-select: none;
+      cursor: pointer;
+      display: inline-block;
+      flex: 0 1 auto;
+      vertical-align: middle;
+      padding: 0 0.125rem;
+
+      &.check {
+        transform: translateY(2px);
+      }
 
-        &:first-child,
-        &.shortpad {
-          padding-left: 8px;
-        }
+      &.disabled {
+        color: $gray;
+        cursor: inherit;
+      }
 
-        &.scaledown {
-          > :global(*) {
-            zoom: 0.8;
-          }
+      &.scaledown {
+        > :global(*) {
+          zoom: 0.8;
         }
       }
     }
diff --git a/src/pages/app/ActionBarContainer.svelte b/src/pages/app/ActionBarContainer.svelte
new file mode 100644
index 000000000..3f02127ff
--- /dev/null
+++ b/src/pages/app/ActionBarContainer.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { search, searchNext, searchPrev } from "../../search/search.js";
+  import { documents, unselectAll } from "../../manager/documents";
+  import { layout } from "../../manager/layout";
+  import { manager, selectAll } from "../../manager/manager";
+  import { orgsAndUsers } from "../../manager/orgsAndUsers";
+  import ActionBar from "./ActionBar.svelte";
+
+  let loggedIn = $orgsAndUsers.loggedIn;
+
+  let data = {
+    loading: $layout.loading,
+    documents: $documents.documents,
+  };
+
+  let selection = {
+    checked: $layout.hasSelection,
+    indeterminate: $manager.someSelected,
+    editable: $layout.selectionEditables,
+    onCheck: selectAll,
+    onUncheck: unselectAll,
+  };
+
+  let pagination = {
+    page: $search.page,
+    totalPages: $search.results?.numPages,
+    totalItems: $search.results?.count,
+    has_next: $search.hasNext,
+    has_prev: $search.hasPrev,
+    onNext: searchNext,
+    onPrev: searchPrev,
+  };
+</script>
+
+<ActionBar {loggedIn} {data} {selection} {pagination} />
diff --git a/src/pages/app/Documents.svelte b/src/pages/app/Documents.svelte
index 405b324a6..e6792d963 100644
--- a/src/pages/app/Documents.svelte
+++ b/src/pages/app/Documents.svelte
@@ -5,7 +5,7 @@
 
   // Components
   import AddonStatus from "../../addons/progress/AddonStatus.svelte";
-  import ActionBar from "./ActionBar.svelte";
+  import ActionBar from "./ActionBarContainer.svelte";
   import Anonymous from "./Anonymous.svelte";
   import AccountNavigation from "./accounts/AccountNavigation.svelte";
   import Button from "@/common/Button.svelte";
diff --git a/src/pages/app/stories/ActionBar.stories.svelte b/src/pages/app/stories/ActionBar.stories.svelte
new file mode 100644
index 000000000..8dfada78d
--- /dev/null
+++ b/src/pages/app/stories/ActionBar.stories.svelte
@@ -0,0 +1,50 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { action } from "@storybook/addon-actions";
+  import ActionBar from "../ActionBar.svelte";
+
+  import documentFixture from "../../viewer/fixtures/document.json";
+
+  export const meta = {
+    title: "App / Action Bar",
+    component: ActionBar,
+    tags: ["autodocs"],
+  };
+
+  const args = {
+    loggedIn: true,
+    data: {
+      loading: false,
+      documents: [documentFixture, documentFixture, documentFixture],
+    },
+    selection: {
+      checked: false,
+      indeterminate: false,
+      editable: true,
+      onUncheck: action("Uncheck"),
+      onCheck: action("Check"),
+    },
+    pagination: {
+      page: 4,
+      totalPages: 12,
+      totalItems: 300,
+      has_next: true,
+      has_prev: true,
+      onNext: action("Next Page"),
+      onPrev: action("Prev Page"),
+    },
+  };
+</script>
+
+<Template let:args>
+  <ActionBar {...args} />
+</Template>
+
+<Story name="Default" {args} />
+<Story
+  name="Not editable"
+  args={{
+    ...args,
+    selection: { ...args.selection, editable: false, checked: true },
+  }}
+/>

From 0c7dce47dd3d627d21eba0ddafb3dd0f0d977e84 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 19 Mar 2024 10:28:06 -0400
Subject: [PATCH 2/5] Removes SCSS from ActionBar

---
 src/pages/app/ActionBar.svelte | 60 ++++++++++++++--------------------
 1 file changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/pages/app/ActionBar.svelte b/src/pages/app/ActionBar.svelte
index 0888e695d..2fed08bdb 100644
--- a/src/pages/app/ActionBar.svelte
+++ b/src/pages/app/ActionBar.svelte
@@ -127,50 +127,38 @@
 
 <svelte:window bind:outerHeight />
 
-<style lang="scss">
+<style>
   .barcontainer {
     border-bottom: 1px solid rgba(0, 0, 0, 0.25);
     padding: 0.75rem 0;
     color: var(--darkgray);
+  }
 
-    .nowrap {
-      white-space: nowrap;
-    }
+  .nowrap {
+    white-space: nowrap;
+  }
 
-    .action {
-      color: $primary;
-      user-select: none;
-      cursor: pointer;
-      display: inline-block;
-      flex: 0 1 auto;
-      vertical-align: middle;
-      padding: 0 0.125rem;
-
-      &.check {
-        transform: translateY(2px);
-      }
-
-      &.disabled {
-        color: $gray;
-        cursor: inherit;
-      }
-
-      &.scaledown {
-        > :global(*) {
-          zoom: 0.8;
-        }
-      }
-    }
+  .action {
+    color: var(--primary);
+    user-select: none;
+    cursor: pointer;
+    display: inline-block;
+    flex: 0 1 auto;
+    vertical-align: middle;
+    padding: 0 0.125rem;
+  }
+
+  .action.check {
+    transform: translateY(2px);
+  }
+
+  .action.disabled {
+    color: var(--gray);
+    cursor: inherit;
   }
 
-  .badge {
-    background-color: $primary;
-    color: $menuBg;
-    font-size: 12px;
-    padding: 0.25em 0.5em;
-    border-radius: 50%;
-    box-sizing: border-box;
-    margin-right: 0.25em;
+  .action.scaledown > :global(*) {
+    zoom: 0.8;
   }
 
   @media only screen and (max-width: 720px) {

From 8000791636b737b4021ae6eb587e1305ae6fae01 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 19 Mar 2024 13:45:53 -0400
Subject: [PATCH 3/5] Debug documents count

---
 src/pages/app/ActionBar.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/app/ActionBar.svelte b/src/pages/app/ActionBar.svelte
index 2fed08bdb..8da57e2ab 100644
--- a/src/pages/app/ActionBar.svelte
+++ b/src/pages/app/ActionBar.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import Badge from "../../common/Badge.svelte";
   import Checkbox from "../../common/Checkbox.svelte";
   import Flex from "../../common/Flex.svelte";
   import Tooltip from "../../common/Tooltip.svelte";
@@ -43,10 +42,15 @@
   function handleSelectAll({ detail }) {
     if (!detail.indeterminate) selection.onCheck();
   }
+
+  $: loading = data.loading;
+  $: {
+    console.log(data);
+  }
 </script>
 
 <div class="barcontainer">
-  {#if !data.loading}
+  {#if !loading}
     <Flex gap={2} align="center" justify="space-between">
       <Flex gap={2} align="center">
         {#if loggedIn}

From 041faf311b7b2aadbc44dfdec2788b44f5c4caf7 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 19 Mar 2024 13:48:24 -0400
Subject: [PATCH 4/5] Make container reactive

---
 src/pages/app/ActionBarContainer.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/app/ActionBarContainer.svelte b/src/pages/app/ActionBarContainer.svelte
index 3f02127ff..bbfd58977 100644
--- a/src/pages/app/ActionBarContainer.svelte
+++ b/src/pages/app/ActionBarContainer.svelte
@@ -6,14 +6,14 @@
   import { orgsAndUsers } from "../../manager/orgsAndUsers";
   import ActionBar from "./ActionBar.svelte";
 
-  let loggedIn = $orgsAndUsers.loggedIn;
+  $: loggedIn = $orgsAndUsers.loggedIn;
 
-  let data = {
+  $: data = {
     loading: $layout.loading,
     documents: $documents.documents,
   };
 
-  let selection = {
+  $: selection = {
     checked: $layout.hasSelection,
     indeterminate: $manager.someSelected,
     editable: $layout.selectionEditables,
@@ -21,7 +21,7 @@
     onUncheck: unselectAll,
   };
 
-  let pagination = {
+  $: pagination = {
     page: $search.page,
     totalPages: $search.results?.numPages,
     totalItems: $search.results?.count,

From 999b84a9a74a4b8608ccef5ced58897ffe89be67 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 19 Mar 2024 13:52:00 -0400
Subject: [PATCH 5/5] Editing fix

---
 src/pages/app/ActionBar.svelte          | 7 +------
 src/pages/app/ActionBarContainer.svelte | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/pages/app/ActionBar.svelte b/src/pages/app/ActionBar.svelte
index 8da57e2ab..32f1a6beb 100644
--- a/src/pages/app/ActionBar.svelte
+++ b/src/pages/app/ActionBar.svelte
@@ -42,15 +42,10 @@
   function handleSelectAll({ detail }) {
     if (!detail.indeterminate) selection.onCheck();
   }
-
-  $: loading = data.loading;
-  $: {
-    console.log(data);
-  }
 </script>
 
 <div class="barcontainer">
-  {#if !loading}
+  {#if !data.loading}
     <Flex gap={2} align="center" justify="space-between">
       <Flex gap={2} align="center">
         {#if loggedIn}
diff --git a/src/pages/app/ActionBarContainer.svelte b/src/pages/app/ActionBarContainer.svelte
index bbfd58977..6ac61b3a1 100644
--- a/src/pages/app/ActionBarContainer.svelte
+++ b/src/pages/app/ActionBarContainer.svelte
@@ -16,7 +16,7 @@
   $: selection = {
     checked: $layout.hasSelection,
     indeterminate: $manager.someSelected,
-    editable: $layout.selectionEditables,
+    editable: $layout.selectionEditable,
     onCheck: selectAll,
     onUncheck: unselectAll,
   };