From 41742e7138ead91479f62e9ddabac81bc56e7e98 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Apr 2021 16:14:24 +0100
Subject: [PATCH] Use BBUI spectrum table in standard components

---
 packages/bbui/src/Table/CellRenderer.svelte   |   2 +-
 packages/bbui/src/Table/StringRenderer.svelte |   1 -
 packages/bbui/src/Table/Table.svelte          |  29 +-
 .../src/table/AttachmentRenderer.svelte       |  39 ---
 .../src/table/BooleanRenderer.svelte          |  38 ---
 .../src/table/CellRenderer.svelte             |  27 --
 .../src/table/DateTimeRenderer.svelte         |  13 -
 .../src/table/RelationshipRenderer.svelte     |  20 --
 .../src/table/SlotRenderer.svelte             |  11 +
 .../src/table/StringRenderer.svelte           |  13 -
 .../src/table/Table.svelte                    | 283 +++---------------
 11 files changed, 76 insertions(+), 400 deletions(-)
 delete mode 100644 packages/standard-components/src/table/AttachmentRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/BooleanRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/CellRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/DateTimeRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/RelationshipRenderer.svelte
 create mode 100644 packages/standard-components/src/table/SlotRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/StringRenderer.svelte

diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index 89f7e8716d..d0323487e1 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -26,7 +26,7 @@
   $: renderer = customRenderer?.component ?? typeMap[type]
 </script>
 
-{#if renderer && value != null && value !== ''}
+{#if renderer && (customRenderer || (value != null && value !== ''))}
   <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
     <slot />
   </svelte:component>
diff --git a/packages/bbui/src/Table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte
index ae95297dfc..2756839616 100644
--- a/packages/bbui/src/Table/StringRenderer.svelte
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@@ -3,7 +3,6 @@
 </script>
 
 <div>{value}</div>
-<slot />
 
 <style>
   div {
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 77e9eaee03..c0b32e79f7 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -84,22 +84,41 @@
     }
   }
 
+  const getDisplayName = schema => {
+    let name = schema?.displayName
+    if (schema && name === undefined) {
+      name = schema.name
+    }
+    return name || ""
+  }
+
   const getFields = (schema, showAutoColumns) => {
     let columns = []
     let autoColumns = []
     Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
+      if (!field || !fieldSchema) {
+        return
+      }
       schema[field].name = field
       if (!fieldSchema?.autocolumn) {
-        columns.push(field)
+        columns.push(fieldSchema)
       } else if (showAutoColumns) {
-        autoColumns.push(field)
+        autoColumns.push(fieldSchema)
       }
     })
     return columns
       .sort((a, b) => {
-        return a.toLowerCase() < b.toLowerCase() ? a : b
+        const orderA = a.order || Number.MAX_SAFE_INTEGER
+        const orderB = b.order || Number.MAX_SAFE_INTEGER
+        const nameA = getDisplayName(a)
+        const nameB = getDisplayName(b)
+        if (orderA !== orderB) {
+          return orderA < orderB ? orderA : orderB
+        }
+        return nameA < nameB ? a : b
       })
       .concat(autoColumns)
+      .map(column => column.name)
   }
 
   const onScroll = event => {
@@ -170,9 +189,7 @@
                   class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
                   on:click={() => sortBy(field)}>
                   <div class="spectrum-Table-headCell-content">
-                    <div class="title">
-                      {schema[field]?.displayName || schema[field]?.name}
-                    </div>
+                    <div class="title">{getDisplayName(schema[field])}</div>
                     {#if schema[field]?.autocolumn}
                       <svg
                         class="spectrum-Icon spectrum-Table-autoIcon"
diff --git a/packages/standard-components/src/table/AttachmentRenderer.svelte b/packages/standard-components/src/table/AttachmentRenderer.svelte
deleted file mode 100644
index 45bd97a849..0000000000
--- a/packages/standard-components/src/table/AttachmentRenderer.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-  export let value
-
-  const displayLimit = 5
-  $: attachments = value?.slice(0, displayLimit) ?? []
-  $: leftover = (value?.length ?? 0) - attachments.length
-</script>
-
-{#each attachments as attachment}
-  {#if attachment.type.startsWith('image')}
-    <img src={attachment.url} alt={attachment.extension} />
-  {:else}
-    <div class="file">{attachment.extension}</div>
-  {/if}
-{/each}
-{#if leftover}
-  <div>+{leftover} more</div>
-{/if}
-
-<style>
-  img {
-    height: 32px;
-    max-width: 64px;
-  }
-  .file {
-    height: 32px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0 8px;
-    color: var(--spectrum-global-color-gray-800);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 2px;
-    text-transform: uppercase;
-    font-weight: 500;
-    font-size: 11px;
-  }
-</style>
diff --git a/packages/standard-components/src/table/BooleanRenderer.svelte b/packages/standard-components/src/table/BooleanRenderer.svelte
deleted file mode 100644
index a71e28cb91..0000000000
--- a/packages/standard-components/src/table/BooleanRenderer.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  import "@spectrum-css/checkbox/dist/index-vars.css"
-
-  export let value
-</script>
-
-<label
-  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
-  <input
-    type="checkbox"
-    class="spectrum-Checkbox-input"
-    id="checkbox-1"
-    disabled
-    checked={!!value} />
-  <span class="spectrum-Checkbox-box">
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
-      focusable="false"
-      aria-hidden="true">
-      <use xlink:href="#spectrum-css-icon-Checkmark100" />
-    </svg>
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
-      focusable="false"
-      aria-hidden="true">
-      <use xlink:href="#spectrum-css-icon-Dash100" />
-    </svg>
-  </span>
-</label>
-
-<style>
-  .spectrum-Checkbox {
-    min-height: 0;
-  }
-  .spectrum-Checkbox-box {
-    margin: 0;
-  }
-</style>
diff --git a/packages/standard-components/src/table/CellRenderer.svelte b/packages/standard-components/src/table/CellRenderer.svelte
deleted file mode 100644
index 0c14ec2aa5..0000000000
--- a/packages/standard-components/src/table/CellRenderer.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import StringRenderer from "./StringRenderer.svelte"
-  import BooleanRenderer from "./BooleanRenderer.svelte"
-  import DateTimeRenderer from "./DateTimeRenderer.svelte"
-  import RelationshipRenderer from "./RelationshipRenderer.svelte"
-  import AttachmentRenderer from "./AttachmentRenderer.svelte"
-
-  export let schema
-  export let value
-
-  const plainTypes = ["string", "options", "number", "longform"]
-  $: type = schema?.type ?? "string"
-</script>
-
-{#if value != null && value !== ''}
-  {#if plainTypes.includes(type)}
-    <StringRenderer {value} />
-  {:else if type === 'boolean'}
-    <BooleanRenderer {value} />
-  {:else if type === 'datetime'}
-    <DateTimeRenderer {value} />
-  {:else if type === 'link'}
-    <RelationshipRenderer {value} />
-  {:else if type === 'attachment'}
-    <AttachmentRenderer {value} />
-  {/if}
-{/if}
diff --git a/packages/standard-components/src/table/DateTimeRenderer.svelte b/packages/standard-components/src/table/DateTimeRenderer.svelte
deleted file mode 100644
index 169adab163..0000000000
--- a/packages/standard-components/src/table/DateTimeRenderer.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import dayjs from "dayjs"
-
-  export let value
-</script>
-
-<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
-
-<style>
-  div {
-    width: 200px;
-  }
-</style>
diff --git a/packages/standard-components/src/table/RelationshipRenderer.svelte b/packages/standard-components/src/table/RelationshipRenderer.svelte
deleted file mode 100644
index 6c04000fa7..0000000000
--- a/packages/standard-components/src/table/RelationshipRenderer.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import "@spectrum-css/label/dist/index-vars.css"
-
-  export let value
-
-  const displayLimit = 5
-  $: relationships = value?.slice(0, displayLimit) ?? []
-  $: leftover = (value?.length ?? 0) - relationships.length
-</script>
-
-{#each relationships as relationship}
-  {#if relationship?.primaryDisplay}
-    <span class="spectrum-Label spectrum-Label--grey">
-      {relationship.primaryDisplay}
-    </span>
-  {/if}
-{/each}
-{#if leftover}
-  <div>+{leftover} more</div>
-{/if}
diff --git a/packages/standard-components/src/table/SlotRenderer.svelte b/packages/standard-components/src/table/SlotRenderer.svelte
new file mode 100644
index 0000000000..dc24f4249c
--- /dev/null
+++ b/packages/standard-components/src/table/SlotRenderer.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let row
+
+  const { Provider } = getContext("sdk")
+</script>
+
+<Provider data={row}>
+  <slot />
+</Provider>
diff --git a/packages/standard-components/src/table/StringRenderer.svelte b/packages/standard-components/src/table/StringRenderer.svelte
deleted file mode 100644
index 2756839616..0000000000
--- a/packages/standard-components/src/table/StringRenderer.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  export let value
-</script>
-
-<div>{value}</div>
-
-<style>
-  div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 150px;
-  }
-</style>
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index 8065b520e9..b213c3c397 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { fade } from "svelte/transition"
   import "@spectrum-css/table/dist/index-vars.css"
   import { getContext } from "svelte"
-  import CellRenderer from "./CellRenderer.svelte"
+  import { Table } from "@budibase/bbui"
+  import SlotRenderer from "./SlotRenderer.svelte"
 
   export let theme
   export let size
@@ -14,70 +14,21 @@
 
   const component = getContext("component")
   const { styleable, Provider } = getContext("sdk")
-
-  // Config
-  const rowHeight = 55
-  const headerHeight = 36
-  const rowPreload = 5
-  const maxRows = 100
-
-  // Sorting state
-  let sortColumn
-  let sortOrder
+  const customColumnKey = `custom-${Math.random()}`
+  const customRenderers = [
+    {
+      column: customColumnKey,
+      component: SlotRenderer,
+    },
+  ]
 
   // Table state
-  $: loaded = dataProvider?.loaded ?? false
-  $: rows = dataProvider?.rows ?? []
-  $: visibleRowCount = loaded
-    ? Math.min(rows.length, rowCount || maxRows, maxRows)
-    : Math.min(8, rowCount || maxRows)
-  $: scroll = rows.length > visibleRowCount
-  $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
-  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
-  $: schema = dataProvider?.schema ?? {}
-  $: fields = getFields(schema, columns, showAutoColumns)
-
-  // Scrolling state
-  let timeout
-  let nextScrollTop = 0
-  let scrollTop = 0
-  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
-  $: lastVisibleRow = calculateLastVisibleRow(
-    firstVisibleRow,
-    visibleRowCount,
-    rows.length
-  )
-
-  const getContentStyle = (visibleRows, useFixedHeight) => {
-    if (!useFixedHeight) {
-      return ""
-    }
-    return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
-  }
-
-  const sortRows = (rows, sortColumn, sortOrder) => {
-    if (!sortColumn || !sortOrder) {
-      return rows
-    }
-    return rows.slice().sort((a, b) => {
-      const colA = a[sortColumn]
-      const colB = b[sortColumn]
-      if (sortOrder === "Descending") {
-        return colA > colB ? -1 : 1
-      } else {
-        return colA > colB ? 1 : -1
-      }
-    })
-  }
-
-  const sortBy = field => {
-    if (field === sortColumn) {
-      sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
-    } else {
-      sortColumn = field
-      sortOrder = "Descending"
-    }
-  }
+  $: hasChildren = $component.children
+  $: loading = dataProvider?.loading ?? false
+  $: data = dataProvider?.rows || []
+  $: fullSchema = dataProvider?.schema ?? {}
+  $: fields = getFields(fullSchema, columns, showAutoColumns)
+  $: schema = getFilteredSchema(fullSchema, fields, hasChildren)
 
   const getFields = (schema, customColumns, showAutoColumns) => {
     // Check for an invalid column selection
@@ -106,185 +57,33 @@
     return columns.concat(autoColumns)
   }
 
-  const onScroll = event => {
-    nextScrollTop = event.target.scrollTop
-    if (timeout) {
-      return
+  const getFilteredSchema = (schema, fields, hasChildren) => {
+    let newSchema = {}
+    if (hasChildren) {
+      newSchema[customColumnKey] = { displayName: null, order: 0 }
     }
-    timeout = setTimeout(() => {
-      scrollTop = nextScrollTop
-      timeout = null
-    }, 50)
-  }
-
-  const calculateFirstVisibleRow = scrollTop => {
-    return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
-  }
-
-  const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
-    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
+    fields.forEach(field => {
+      newSchema[field] = schema[field]
+    })
+    return newSchema
   }
 </script>
 
-{#if !loaded}
-  <div class="content" style={contentStyle} />
-{:else}
-  <div use:styleable={$component.styles}>
-    <div
-      on:scroll={onScroll}
-      lang="en"
-      dir="ltr"
-      class:quiet
-      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
-      class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-      <div class="content" style={contentStyle}>
-        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
-          <thead class="spectrum-Table-head">
-            <tr>
-              {#if $component.children}
-                <th class="spectrum-Table-headCell">
-                  <div class="spectrum-Table-headCell-content" />
-                </th>
-              {/if}
-              {#each fields as field}
-                <th
-                  class="spectrum-Table-headCell is-sortable"
-                  class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
-                  class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-                  on:click={() => sortBy(field)}>
-                  <div class="spectrum-Table-headCell-content">
-                    <div class="title">{schema[field]?.name}</div>
-                    <svg
-                      class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                      class:visible={sortColumn === field}
-                      focusable="false"
-                      aria-hidden="true">
-                      <use xlink:href="#spectrum-css-icon-Arrow100" />
-                    </svg>
-                  </div>
-                </th>
-              {/each}
-            </tr>
-          </thead>
-          <tbody class="spectrum-Table-body">
-            {#each sortedRows as row, idx}
-              <tr
-                class="spectrum-Table-row"
-                class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
-                {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                  {#if $component.children}
-                    <td
-                      class="spectrum-Table-cell spectrum-Table-cell--divider">
-                      <div class="spectrum-Table-cell-content">
-                        <Provider data={row}>
-                          <slot />
-                        </Provider>
-                      </div>
-                    </td>
-                  {/if}
-                  {#each fields as field}
-                    <td class="spectrum-Table-cell">
-                      <div class="spectrum-Table-cell-content">
-                        <CellRenderer
-                          schema={schema[field]}
-                          value={row[field]} />
-                      </div>
-                    </td>
-                  {/each}
-                {/if}
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  .spectrum {
-    position: relative;
-    overflow: auto;
-    border: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  .spectrum.quiet {
-    border: none !important;
-  }
-  table {
-    width: 100%;
-  }
-
-  .spectrum-Table-sortedIcon {
-    opacity: 0;
-    display: block !important;
-  }
-  .spectrum-Table-sortedIcon.visible {
-    opacity: 1;
-  }
-  .spectrum,
-  th {
-    border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  th {
-    vertical-align: middle;
-    height: var(--header-height);
-    position: sticky;
-    top: 0;
-    background-color: var(--spectrum-global-color-gray-100);
-    z-index: 2;
-  }
-  .spectrum-Table-headCell-content {
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    user-select: none;
-  }
-  .spectrum-Table-headCell-content .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  tbody {
-    z-index: 1;
-  }
-  tbody tr {
-    height: var(--row-height);
-  }
-  tbody tr.hidden {
-    height: calc(var(--row-height) + 1px);
-  }
-  tbody tr.offset {
-    background-color: red;
-    display: block;
-  }
-  td {
-    padding-top: 0;
-    padding-bottom: 0;
-    border-bottom: none !important;
-    border-left: none !important;
-    border-right: none !important;
-    border-top: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  tr:first-child td {
-    border-top: none !important;
-  }
-  .spectrum:not(.quiet) td.spectrum-Table-cell--divider {
-    width: 1px;
-    border-right: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  .spectrum-Table-cell-content {
-    height: var(--row-height);
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 4px;
-  }
-</style>
+<div
+  lang="en"
+  dir="ltr"
+  use:styleable={$component.styles}
+  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+  <Table
+    {data}
+    {schema}
+    {loading}
+    {quiet}
+    {customRenderers}
+    allowSelectRows={false}
+    allowEditRows={false}
+    allowEditColumns={false}
+    showAutoColumns={true}>
+    <slot />
+  </Table>
+</div>