From a62c8608c96579130a73e6274604419fe90c7505 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 28 Jul 2020 17:43:29 +0100
Subject: [PATCH 1/5] initial table sorting algo

---
 .../standard-components/src/DataMap.svelte    | 31 -----------
 .../standard-components/src/DataTable.svelte  | 54 +++++++++++++++++--
 packages/standard-components/src/index.js     |  1 -
 3 files changed, 50 insertions(+), 36 deletions(-)
 delete mode 100644 packages/standard-components/src/DataMap.svelte

diff --git a/packages/standard-components/src/DataMap.svelte b/packages/standard-components/src/DataMap.svelte
deleted file mode 100644
index 9cbb3c97c2..0000000000
--- a/packages/standard-components/src/DataMap.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-  import { GoogleMap } from "@beyonk/svelte-googlemaps"
-
-  // export let _bb
-  // export let onLoad
-  // export let _instanceId
-  // export let model
-
-  // let mapComponent
-  // let headers = []
-  // let store = _bb.store
-
-  // $: data = $store[model._id] || []
-
-  // async function fetchData() {
-  //   const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
-  //   const response = await _bb.api.get(FETCH_RECORDS_URL)
-  //   if (response.status === 200) {
-  //     const json = await response.json()
-
-  //     store.update(state => {
-  //       state[model._id] = json
-  //       return state
-  //     });
-  //   } else {
-  //     throw new Error("Failed to fetch records.", response)
-  //   }
-  // }
-</script>
-
-<GoogleMap apiKey={'AIzaSyCPJ_eiSIbhRMmKBiVYXgh4HFHmbC4ZL5U'} />
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 0d75b1e4e8..9c9c256bb2 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -12,6 +12,8 @@
 
   let headers = []
   let store = _bb.store
+  let sort = {}
+  let sorted = []
 
   $: cssVariables = {
     backgroundColor,
@@ -20,6 +22,31 @@
     borderColor,
   }
 
+  $: data = $store[model] || []
+  $: sorted = data
+  $: {
+    let result = [...sorted]
+
+    if (!sort.column) sorted = result
+
+    console.log(sort);
+
+    if (sort.direction === "ASC") {
+      result.sort((a, b) =>  {
+        console.log(a[sort.column], b[sort.column])
+        return String(a[sort.column]).localeCompare(String(b[sort.column]))
+      }
+      )
+    }
+
+    if (sort.direction === "DESC") {
+      result.reverse()
+    }
+
+    sorted = result
+  }
+  $: if (model) fetchData()
+
   const shouldDisplayField = name => {
     if (name.startsWith("_")) return false
     // always 'record'
@@ -48,8 +75,20 @@
     }
   }
 
-  $: data = $store[model] || []
-  $: if (model) fetchData()
+  function sortColumn(column) {
+    if (column === sort.column) {
+      sort = {
+        direction: sort.direction === "ASC" ? "DESC" : null,
+        column: sort.direction === "ASC" ? sort.column : null,
+      }
+      return
+    }
+
+    sort = {
+      column,
+      direction: "ASC",
+    }
+  }
 
   onMount(async () => {
     await fetchData()
@@ -60,12 +99,15 @@
   <thead>
     <tr>
       {#each headers as header}
-        <th>{header}</th>
+        <th on:click={() => sortColumn(header)}>
+          {header}
+          {#if sort.column === header}v{/if}
+        </th>
       {/each}
     </tr>
   </thead>
   <tbody>
-    {#each data as row}
+    {#each sorted as row (row._id)}
       <tr>
         {#each headers as header}
           {#if row[header]}
@@ -120,6 +162,10 @@
       display: block;
     }
 
+    th {
+      cursor: pointer;
+    }
+
     /* Hide table headers (but not display: none;, for accessibility) */
     thead tr {
       position: absolute;
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index a0c6ee025d..067b1e9896 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -21,6 +21,5 @@ export { default as datachart } from "./DataChart.svelte"
 export { default as datalist } from "./DataList.svelte"
 export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
-export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"

From 7e80c1b4b9de23e7c8dd6c57e6b79df7c0405bcb Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 28 Jul 2020 19:40:52 +0100
Subject: [PATCH 2/5] improved sorting logic

---
 packages/standard-components/package.json     |  1 +
 .../standard-components/src/DataTable.svelte  | 34 +++++--------------
 2 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 516a888a05..20a19aec74 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -38,6 +38,7 @@
   "gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
+    "fast-sort": "^2.2.0",
     "fusioncharts": "^3.15.1-sr.1",
     "svelte-fusioncharts": "^1.0.0"
   }
diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 9c9c256bb2..dc301598e8 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { cssVars, createClasses } from "./cssVars"
+  import fsort from "fast-sort"
 
   export let _bb
   export let onLoad
@@ -23,28 +24,7 @@
   }
 
   $: data = $store[model] || []
-  $: sorted = data
-  $: {
-    let result = [...sorted]
-
-    if (!sort.column) sorted = result
-
-    console.log(sort);
-
-    if (sort.direction === "ASC") {
-      result.sort((a, b) =>  {
-        console.log(a[sort.column], b[sort.column])
-        return String(a[sort.column]).localeCompare(String(b[sort.column]))
-      }
-      )
-    }
-
-    if (sort.direction === "DESC") {
-      result.reverse()
-    }
-
-    sorted = result
-  }
+  $: sorted = sort.direction ? fsort(data)[sort.direction](sort.column) : data
   $: if (model) fetchData()
 
   const shouldDisplayField = name => {
@@ -78,15 +58,15 @@
   function sortColumn(column) {
     if (column === sort.column) {
       sort = {
-        direction: sort.direction === "ASC" ? "DESC" : null,
-        column: sort.direction === "ASC" ? sort.column : null,
+        direction: sort.direction === "asc" ? "desc" : null,
+        column: sort.direction === "asc" ? sort.column : null,
       }
       return
     }
 
     sort = {
       column,
-      direction: "ASC",
+      direction: "asc",
     }
   }
 
@@ -101,7 +81,9 @@
       {#each headers as header}
         <th on:click={() => sortColumn(header)}>
           {header}
-          {#if sort.column === header}v{/if}
+          {#if sort.column === header}
+            {#if sort.direction === 'asc'}v{:else}^{/if}
+          {/if}
         </th>
       {/each}
     </tr>

From d53afb175b0846dbf1a466e365a3dac4c41c3198 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jul 2020 13:11:29 +0100
Subject: [PATCH 3/5] table sorting for datatable

---
 .../standard-components/src/DataTable.svelte  | 20 +++++++++++++++----
 .../src/icons/ArrowDown.svelte                |  1 +
 .../src/icons/ArrowUp.svelte                  | 10 ++++++++++
 3 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 packages/standard-components/src/icons/ArrowDown.svelte
 create mode 100644 packages/standard-components/src/icons/ArrowUp.svelte

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index dc301598e8..fb02deb1de 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -1,6 +1,8 @@
 <script>
   import { onMount } from "svelte"
   import { cssVars, createClasses } from "./cssVars"
+  import ArrowUp from "./icons/ArrowUp.svelte"
+  import ArrowDown from "./icons/ArrowDown.svelte"
   import fsort from "fast-sort"
 
   export let _bb
@@ -80,10 +82,14 @@
     <tr>
       {#each headers as header}
         <th on:click={() => sortColumn(header)}>
-          {header}
-          {#if sort.column === header}
-            {#if sort.direction === 'asc'}v{:else}^{/if}
-          {/if}
+          <span>
+            {header}
+            {#if sort.column === header}
+              <svelte:component
+                style="height: 1em;"
+                this={sort.direction === 'asc' ? ArrowUp : ArrowDown} />
+            {/if}
+          </span>
         </th>
       {/each}
     </tr>
@@ -119,6 +125,12 @@
     color: var(--color);
     font-weight: bold;
     text-transform: capitalize;
+    cursor: pointer;
+  }
+
+  th span {
+    display: flex;
+    align-items: center;
   }
 
   td,
diff --git a/packages/standard-components/src/icons/ArrowDown.svelte b/packages/standard-components/src/icons/ArrowDown.svelte
new file mode 100644
index 0000000000..e75c43cb3d
--- /dev/null
+++ b/packages/standard-components/src/icons/ArrowDown.svelte
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"/></svg>
\ No newline at end of file
diff --git a/packages/standard-components/src/icons/ArrowUp.svelte b/packages/standard-components/src/icons/ArrowUp.svelte
new file mode 100644
index 0000000000..897c3612d2
--- /dev/null
+++ b/packages/standard-components/src/icons/ArrowUp.svelte
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="18"
+  height="18">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414
+    1.414L13 7.828z" />
+</svg>

From 3efc406463303e774993b5c5152e3e418f84c57c Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jul 2020 13:12:13 +0100
Subject: [PATCH 4/5] icons wrong way round

---
 packages/standard-components/src/DataTable.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index fb02deb1de..7a1fc35c59 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -87,7 +87,7 @@
             {#if sort.column === header}
               <svelte:component
                 style="height: 1em;"
-                this={sort.direction === 'asc' ? ArrowUp : ArrowDown} />
+                this={sort.direction === 'asc' ? ArrowDown : ArrowUp} />
             {/if}
           </span>
         </th>

From 4b8ac1a2700294cbb5b6b98312d2487cce8b08cd Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jul 2020 13:21:32 +0100
Subject: [PATCH 5/5] tidy up :sparkles:

---
 packages/standard-components/src/DataTable.svelte     |  8 ++------
 .../standard-components/src/icons/ArrowDown.svelte    | 11 ++++++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte
index 7a1fc35c59..92523cfda2 100644
--- a/packages/standard-components/src/DataTable.svelte
+++ b/packages/standard-components/src/DataTable.svelte
@@ -86,8 +86,8 @@
             {header}
             {#if sort.column === header}
               <svelte:component
-                style="height: 1em;"
-                this={sort.direction === 'asc' ? ArrowDown : ArrowUp} />
+                this={sort.direction === 'asc' ? ArrowDown : ArrowUp}
+                style="height: 1em;" />
             {/if}
           </span>
         </th>
@@ -156,10 +156,6 @@
       display: block;
     }
 
-    th {
-      cursor: pointer;
-    }
-
     /* Hide table headers (but not display: none;, for accessibility) */
     thead tr {
       position: absolute;
diff --git a/packages/standard-components/src/icons/ArrowDown.svelte b/packages/standard-components/src/icons/ArrowDown.svelte
index e75c43cb3d..ef7e542ea1 100644
--- a/packages/standard-components/src/icons/ArrowDown.svelte
+++ b/packages/standard-components/src/icons/ArrowDown.svelte
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"/></svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="18"
+  height="18">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11
+    16.172V4h2v12.172z" />
+</svg>