Row Selection Store and Event hadnler

poirazis · Feb 6, 2023 · d7b4a16 · d7b4a16
1 parent f8966d9
commit d7b4a16
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTable",
-  "version": "1.0.10-alpha",
+  "version": "1.0.11-alpha",
   "description": "A Fully Customizable Budibase Table Component with Superpowers !",
   "author": "Michael Poirazi",
   "license": "MIT",

diff --git a/schema.json b/schema.json
@@ -297,8 +297,8 @@
           "key": "onRowSelect",
           "context": [
             {
-              "label": "RowID",
-              "key": "rowwID"
+              "label": "Triggered By",
+              "key": "rowID"
             },
             {
               "label": "Selected Rows",

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -3,12 +3,12 @@
   import { get } from "svelte/store"
   import { LuceneUtils } from "./frontend-core"
 
-  import { tableDataStore, tableFilterStore, tableStateStore } from "./lib/superTableStores"
+  import { tableDataStore, tableFilterStore, tableStateStore, tableSelectionStore } from "./lib/superTableStores"
   import { sizingMap } from "./lib/superTableThemes"
 
-  import RowSelectColumn from "./lib/RowSelectColumn.svelte";
-  import Scroller from "./lib/Scroller.svelte";
-  import WelcomeWizard from "./lib/WelcomeWizard.svelte";
+  import SuperTableVerticalScroller from "./lib/SuperTableVerticalScroller.svelte";
+  import SuperTableRowSelect from "./lib/SuperTableRowSelect.svelte";
+  import SuperTableWelcome from "./lib/SuperTableWelcome.svelte";
 
   const { styleable, getAction, ActionTypes, builderStore } = getContext("sdk");
   const component = getContext("component");
@@ -31,10 +31,15 @@
   let setSorting, setFiltering, unsetFiltering, sortedColumn, sortedDirection, activeFilters, isFiltered = false
   let loaded = false
   
+  // Initialize Stores
+  let rowMinHeight = size != "custom" ? sizingMap[size].rowMinHeight : 40
+
+  $tableStateStore.rowHeights = new Array(visibleRowCount).fill(rowMinHeight)
+
   $: if ( !$loading ) { loaded = true; $tableDataStore.loaded = true ; }
-  $: $tableDataStore.data = loaded && dataProvider?.rows?.length 
+  $: $tableDataStore.data = loaded 
     ? dataProvider.rows 
-    : new Array(dataProvider?.limit > 20 ? 20 : dataProvider?.limit ?? 12).fill({})
+    : new Array(visibleRowCount).fill({})
   
   $: if ( loaded ) $tableDataStore.dataSource = dataProvider?.datasource ?? {};
   $: if ( loaded ) $tableDataStore.schema = dataProvider?.schema ?? {};
@@ -78,7 +83,7 @@
   $: $tableStateStore.stylingOptions.footerFontColor = footerFontColor ? footerFontColor : "var(--spectrum-table-m-regular-header-text-color, var(--spectrum-alias-label-text-color))"
   $: $tableStateStore.stylingOptions.footerBackground = footerBackground ? footerBackground : "transparent"
 
-  $: $tableStateStore.stylingOptions.dividersColor = dividers != "none" ? dividersColor : "none"
+  $: $tableStateStore.stylingOptions.dividersColor = dividersColor ? dividersColor : "var(--spectrum-table-m-regular-border-color, var(--spectrum-alias-border-color-mid))"
   $: $tableStateStore.stylingOptions.dividers = dividers
 
   // Append Super Table Styling variables
@@ -93,6 +98,7 @@
   setContext("tableDataStore", tableDataStore)
   setContext("tableStateStore", tableStateStore)
   setContext("tableFilterStore", tableFilterStore)
+  setContext("tableSelectionStore", tableSelectionStore)
 
   // Component Function Definitions
   function setDataProviderFiltering( filters ) {
@@ -104,11 +110,20 @@
     } 
   }
 
+  function setDataProviderSorting(column, direction) {
+    if ( loaded && ((column != sortedColumn) || (direction != sortedDirection)) ) 
+    { 
+      setSorting?.({ column: column, order: direction }) 
+      sortedColumn = column
+      sortedDirection = direction
+    }
+  }
+
   // Generate the variable overrides 
   function generateStyling() {
     let styles = {};
     // Table
-    styles["--super-table-body-height"] = (visibleRowCount * ($tableStateStore.rowHeights[0] || sizingMap[size].rowMinHeight )) + "px"
+    styles["--super-table-body-height"] = (visibleRowCount * $tableStateStore.rowHeights[0]) + "px"
 
     // Header
     styles["--spectrum-table-regular-header-text-size"] = $tableStateStore.stylingOptions.headerFontSize + "px"
@@ -132,6 +147,7 @@
 
     // Dividers 
     styles["--super-table-row-bottom-border-size"] = $tableStateStore.stylingOptions.dividers == "horizontal" ||  $tableStateStore.stylingOptions.dividers == "both" ? "1px" : "0px" 
+    styles["--super-table-column-right-border-size"] = $tableStateStore.stylingOptions.dividers == "vertical" ||  $tableStateStore.stylingOptions.dividers == "both" ? "1px" : "0px" 
     styles["--spectrum-table-m-regular-border-color"] = $tableStateStore.stylingOptions.dividersColor
 
     // Footer
@@ -145,15 +161,6 @@
     return styles;
   }
 
-  function setDataProviderSorting(column, direction) {
-    if ( loaded && ((column != sortedColumn) || (direction != sortedDirection)) ) 
-    { 
-      setSorting?.({ column: column, order: direction }) 
-      sortedColumn = column
-      sortedDirection = direction
-    }
-  }
-
   function addNewColumn () {
     let subStore = $tableDataStore.columnStores[0]
     let store = get (subStore)
@@ -162,8 +169,8 @@
 
   function handleRowSelect ( event ) {
     let context = {
-      "rowID" : 1,
-      "selectedRows": $tableDataStore.selectedRows
+      "rowID" : event.detail.rowID,
+      "selectedRows": $tableSelectionStore
     }
     onRowSelect?.( context )
   }
@@ -172,11 +179,11 @@
 <div class="st-master-wrapper" use:styleable={styles}>
 
   {#if !$component.empty}
-    <div class="st-master-control"> {#if rowSelection} <RowSelectColumn /> {/if}</div>
+    <div class="st-master-control"> {#if rowSelection} <SuperTableRowSelect on:selectionChange={handleRowSelect}/> {/if}</div>
     <div class="st-master-columns"> <slot /> </div>
-    <div class="st-master-scroll"> <Scroller /> </div>
+    <div class="st-master-scroll"> <SuperTableVerticalScroller /> </div>
   {:else}
-    <WelcomeWizard />
+    <SuperTableWelcome />
   {/if}
 
 </div>

diff --git a/src/lib/RowSelectColumn.svelte → src/lib/SuperTableRowSelect.svelte b/src/lib/RowSelectColumn.svelte → src/lib/SuperTableRowSelect.svelte
@@ -3,6 +3,7 @@
 
   const tableDataStore = getContext("tableDataStore")
   const tableStateStore = getContext("tableStateStore")
+  const tableSelectionStore = getContext("tableSelectionStore")
   const dispatch = createEventDispatcher();
 
   // Keep scrolling position in synch
@@ -39,13 +40,19 @@
       class="spectrum-Table-row" 
       on:mouseenter={ () => { if ($tableStateStore.hoveredRow !== index ) $tableStateStore.hoveredRow = index }} 
       on:mouseleave={ () => { $tableStateStore.hoveredRow = null } } 
-      class:is-selected={ $tableDataStore.selectedRows.includes(row[$tableDataStore.idColumn]) } 
+      class:is-selected={ $tableSelectionStore.includes(row[$tableDataStore.idColumn]) } 
       class:is-hovered={ $tableStateStore.hoveredRow === index }
       style:min-height={ $tableStateStore.rowHeights[index] + "px" }
       >
       <div class="spectrum-Table-cell">
         <label class="spectrum-Checkbox spectrum-Checkbox--sizeM">
-          <input bind:group={$tableDataStore.selectedRows} value={row[$tableDataStore.idColumn]} type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
+          <input 
+            bind:group={$tableSelectionStore} 
+            value={row[$tableDataStore.idColumn]} 
+            on:change={ () => dispatch ("selectionChange", { "rowID": row[$tableDataStore.idColumn] }) }
+            type="checkbox" 
+            class="spectrum-Checkbox-input" 
+          >
           <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" />

diff --git a/src/lib/Scroller.svelte → src/lib/SuperTableVerticalScroller.svelte b/src/lib/Scroller.svelte → src/lib/SuperTableVerticalScroller.svelte
diff --git a/src/lib/WelcomeWizard.svelte → src/lib/SuperTableWelcome.svelte b/src/lib/WelcomeWizard.svelte → src/lib/SuperTableWelcome.svelte
diff --git a/src/lib/superTableStores.js b/src/lib/superTableStores.js
@@ -6,7 +6,7 @@ const createSuperTableStateStore = () => {
 	const { set, update, subscribe } = writable({
 		controllerID: null,
 		columnRowHeights: [],
-		rowHeights: new Array(12).fill(40),
+		rowHeights: [],
 		hoveredRow: null,
 		hoveredColumn: null,
 		loaded: false,
@@ -92,6 +92,7 @@ const createSuperTableFilterStore = () => {
 	}
 }
 
+
 // The main store holds the data related and Super Table Columns registration and data synchronization
 const createSuperTableDataStore = () => {
 	const { set, update, subscribe } = writable({
@@ -161,6 +162,9 @@ const createSuperTableDataStore = () => {
 	};
 };
 
+
+
 export const tableDataStore = createSuperTableDataStore()
 export const tableStateStore = createSuperTableStateStore()
-export const tableFilterStore = createSuperTableFilterStore()
+export const tableFilterStore = createSuperTableFilterStore()
+export const tableSelectionStore = new writable([])
diff --git a/src/lib/superTableThemes.js b/src/lib/superTableThemes.js
@@ -1,8 +1,8 @@
 // Sizing temaplates for the Adobe Spectrum Table look
 export const sizingMap = {
-	"XS": { "rowHorizontalPadding": 12, "rowVerticalPadding": 4, "rowFontSize": 11, rowMinHeight: 30, "headerFontSize": 10, "checkboxSize": 12 },
-	"S": { "rowHorizontalPadding": 16, "rowVerticalPadding": 7, "rowFontSize": 12, rowMinHeight: 35, "headerFontSize": 11, "checkboxSize": 12 },
-	"M": { "rowHorizontalPadding": 16, "rowVerticalPadding": 11, "rowFontSize": 14, rowMinHeight: 40, "headerFontSize": 11, "checkboxSize": 14 },
-	"L": { "rowHorizontalPadding": 18, "rowVerticalPadding": 13, "rowFontSize": 15, rowMinHeight: 45, "headerFontSize": 12, "checkboxSize": 14 },
-	"XL": { "rowHorizontalPadding": 20, "rowVerticalPadding": 15, "rowFontSize": 17, rowMinHeight: 30, "headerFontSize": 14, "checkboxSize": 15 }
+	"XS": { "rowHorizontalPadding": 12, "rowVerticalPadding": 4, "rowFontSize": 11, "rowMinHeight": 30, "headerFontSize": 10, "checkboxSize": 12 },
+	"S": { "rowHorizontalPadding": 16, "rowVerticalPadding": 7, "rowFontSize": 12, "rowMinHeight": 35, "headerFontSize": 11, "checkboxSize": 12 },
+	"M": { "rowHorizontalPadding": 16, "rowVerticalPadding": 11, "rowFontSize": 14, "rowMinHeight": 40, "headerFontSize": 11, "checkboxSize": 14 },
+	"L": { "rowHorizontalPadding": 18, "rowVerticalPadding": 13, "rowFontSize": 15, "rowMinHeight": 45, "headerFontSize": 12, "checkboxSize": 14 },
+	"XL": { "rowHorizontalPadding": 20, "rowVerticalPadding": 15, "rowFontSize": 17, "rowMinHeight": 30, "headerFontSize": 14, "checkboxSize": 15 }
 }