@poirazis/supercomponents-shared 1.0.39 → 1.0.40

package/src/lib/SuperTable/SuperTable.svelte

@@ -59,7 +59,7 @@
   export let inBuilder;
 
   // Properties
-  export let datasource;
+  export let dataSource;
   export let idColumn = "_id";
   export let sortColumn;
   export let sortOrder;
@@ -131,34 +131,16 @@
   export let afterEdit;
   export let onRefresh;
 
-  const dataSourceStore = memo(datasource);
-  const columnsStore = writable([]);
+  const dataSourceStore = memo(dataSource);
+  const columnsStore = memo(columnList);
+  const stbRowMetadata = writable([]);
   const filterStore = memo(filter);
 
-  $: dataSourceStore.set(datasource);
+  $: dataSourceStore.set(dataSource);
 
   $: filterStore.set(filter);
-  $: stbData = createFetch($dataSourceStore);
   $: stbSchema.set($stbData?.definition?.schema);
 
-  // Memoize schema changes - only update when schema actually changes
-  let previousSchema = null;
-
-  $: {
-    const newSchema = $stbData?.definition?.schema;
-
-    // Check if schema has actually changed
-    const schemaChanged =
-      JSON.stringify(newSchema) !== JSON.stringify(previousSchema);
-
-    if (schemaChanged) {
-      memoizedSchema.set(newSchema);
-      previousSchema = newSchema;
-      // Reset columnsStore only when schema changes
-      columnsStore.set(columnList || []);
-    }
-  }
-
   // Update columnsStore when columnList changes
   $: columnsStore.set(columnList || []);
 
@@ -189,12 +171,18 @@
   let _limit = limit;
   let start = 0;
   let end = 0;
+  let initializing = true;
+  let initTimer;
+
+  let stbData = writable({ rows: [], count: 0, definition: {} });
 
   // Scrolling width lock variables
   let scrollLockTimeout;
   let isScrolling = false;
   let tableWidth = 0;
 
+  let loadedId = null;
+
   // Keep track of the applied query extentions when filtering
   let stbColumnFilters = new Set();
   let queryExtensions = {};
@@ -208,7 +196,7 @@
 
   const stbSettings = memo({});
   const stbSchema = memo({});
-  const memoizedSchema = memo({});
+
   // Create Stores
   const stbScrollPos = memo(0);
   const stbScrollOffset = memo(0);
@@ -277,7 +265,7 @@
       canResize,
     },
     data: {
-      datasource,
+      dataSource,
       idColumn,
       filter,
       sortColumn,
@@ -322,57 +310,19 @@
     },
   });
 
-  $: stbRowMetadata = derivedMemo(
-    [stbData, stbSettings],
-    ([$stbData, $stbSettings]) => {
-      if (!$stbData?.loaded) return [];
-      return (
-        $stbData?.rows?.map((row) => ({
-          height: rowHeight
-            ? toNumber(
-                processStringSync(rowHeight, {
-                  ...$context,
-                  [comp_id]: { row },
-                })
-              ) || $stbSettings.appearance.rowHeight
-            : $stbSettings.appearance.rowHeight,
-          bgcolor: rowBGColorTemplate
-            ? processStringSync(rowBGColorTemplate, {
-                ...$context,
-                [comp_id]: { row },
-              })
-            : undefined,
-          color: rowColorTemplate
-            ? processStringSync(rowColorTemplate, {
-                ...$context,
-                [comp_id]: { row },
-              })
-            : undefined,
-          disabled: rowDisabledTemplate
-            ? processStringSync(rowDisabledTemplate, {
-                ...$context,
-                [comp_id]: { row },
-              })
-            : undefined,
-        })) || [{}]
-      );
-    }
-  );
-
-  $: cumulativeHeights = derivedMemo(
-    [stbRowMetadata, stbSettings],
-    ([$meta, $settings]) => {
-      const defaultRowHeight = $settings.appearance?.rowHeight || 36;
-      return $meta.map((_, i) =>
-        $meta
-          .slice(0, i + 1)
-          .reduce(
-            (sum, meta) => sum + Math.max(meta.height || defaultRowHeight, 0),
-            0
-          )
-      );
-    }
-  );
+  const createFetch = (datasource) => {
+    return fetchData({
+      API,
+      datasource,
+      options: {
+        query,
+        sortColumn,
+        sortOrder,
+        limit,
+        paginate: false,
+      },
+    });
+  };
 
   // The Super Table API
   const tableAPI = {
@@ -534,7 +484,7 @@
     executeRowButtonAction: async (index, action) => {
       let cmd = enrichButtonActions(
         action,
-        tableAPI.enrichContext($stbData.rows[index])
+        tableAPI.enrichContext($stbData?.rows[index])
       );
       await cmd?.();
     },
@@ -544,7 +494,7 @@
     executeCellOnClickAction: async (index, column, value, id) => {
       let cmd = enrichButtonActions(
         onCellClick,
-        tableAPI.enrichContext($stbData.rows[index])
+        tableAPI.enrichContext($stbData?.rows[index])
       );
       await cmd?.({ column, value, id });
     },
@@ -567,7 +517,7 @@
       await tick();
       let cmd = enrichButtonActions(
         onRowSelect,
-        tableAPI.enrichContext($stbData.rows[index])
+        tableAPI.enrichContext($stbData?.rows[index])
       );
       await cmd?.();
     },
@@ -589,7 +539,7 @@
       tableAPI.executeRowButtonAction(null, action);
     },
     selectRow: (index) => {
-      let id = $stbData.rows[index][idColumn] ?? index;
+      let id = $stbData?.rows[index][idColumn] ?? index;
       let disabled = $stbRowMetadata[index]["disabled"];
 
       if (maxSelected != 1) {
@@ -619,8 +569,8 @@
       if ($stbSelected.length) tableAPI.executeRowOnSelectAction(index);
     },
     selectAllRows: () => {
-      if ($stbSelected.length != $stbData.rows.length)
-        $stbSelected = $stbData.rows.map((x) => x[idColumn]);
+      if ($stbSelected.length != $stbData?.rows.length)
+        $stbSelected = $stbData?.rows.map((x) => x[idColumn]);
       else $stbSelected = [];
 
       tableAPI.executeRowOnSelectAction();
@@ -679,8 +629,8 @@
       }
     },
     deleteRow: async (index) => {
-      let id = $stbData.rows[index][idColumn];
-      let row = $stbData.rows[index];
+      let id = $stbData?.rows[index][idColumn];
+      let row = $stbData?.rows[index];
 
       let autoDelete = [
         {
@@ -702,13 +652,13 @@
       let cmd;
       let cmd_after = enrichButtonActions(
         afterDelete,
-        tableAPI.enrichContext($stbData.rows[index])
+        tableAPI.enrichContext($stbData?.rows[index])
       );
 
       if (onDelete?.length) {
         cmd = enrichButtonActions(
           onDelete,
-          tableAPI.enrichContext($stbData.rows[index])
+          tableAPI.enrichContext($stbData?.rows[index])
         );
       } else {
         cmd = enrichButtonActions(autoDelete, {});
@@ -786,7 +736,38 @@
       refresh() {
         stbData?.refresh();
       },
-      enrichRows() {},
+      enrichRows() {
+        if ($stbData?.loading) return;
+
+        $stbRowMetadata = $stbData?.rows?.map((row) => ({
+          height: rowHeight
+            ? toNumber(
+                processStringSync(rowHeight, {
+                  ...$context,
+                  [comp_id]: { row },
+                })
+              ) || $stbSettings.appearance.rowHeight
+            : $stbSettings.appearance.rowHeight,
+          bgcolor: rowBGColorTemplate
+            ? processStringSync(rowBGColorTemplate, {
+                ...$context,
+                [comp_id]: { row },
+              })
+            : undefined,
+          color: rowColorTemplate
+            ? processStringSync(rowColorTemplate, {
+                ...$context,
+                [comp_id]: { row },
+              })
+            : undefined,
+          disabled: rowDisabledTemplate
+            ? processStringSync(rowDisabledTemplate, {
+                ...$context,
+                [comp_id]: { row },
+              })
+            : undefined,
+        })) || [{}];
+      },
       lockColumnWidths() {
         if (isScrolling) return; // Already locked
         isScrolling = true;
@@ -1047,17 +1028,24 @@
         if (timer) clearInterval(timer);
         start = 0;
         end = 0;
+
         $stbScrollPos = 0;
         $stbScrollOffset = 0;
         $stbHorizontalScrollPos = 0;
         $stbSelected = [];
         $columnsStore = [];
+        $stbVisibleRows = [];
         if (_limit != limit) _limit = limit;
+
+        stbData = createFetch($dataSourceStore);
+
+        // If Initialization takes more than 130ms, show loading state
+        initTimer = setTimeout(() => {
+          initializing = true;
+        }, 130);
       },
       synch(fetchState) {
         if (fetchState.loaded) {
-          this.enrichRows();
-          this.calculateBoundaries();
           if (autoRefreshRate && !inBuilder) {
             timer = setInterval(() => {
               if (!$stbData?.loading) stbData?.refresh();
@@ -1070,15 +1058,13 @@
     },
     Idle: {
       _enter() {
-        isEmpty = $stbData.rows.length < 1;
-        // Note: We don't unlock columns here anymore since columns auto-lock themselves
-        // when they are flexible and become unlocked
+        clearTimeout(initTimer);
+        initializing = false;
+        isEmpty = $stbData?.rows.length < 1;
       },
       _exit() {},
       synch(fetchState) {
-        if (fetchState.loading) return;
-        this.enrichRows();
-        this.calculateBoundaries();
+        if (fetchState.loading && !fetchState.loaded) return;
         isEmpty = !$stbData?.rows.length;
       },
       addFilter(filterObj) {
@@ -1120,10 +1106,6 @@
       },
       synch(fetchState) {
         if (fetchState.loaded) {
-          this.enrichRows();
-          this.calculateBoundaries();
-          this.calculateRowBoundaries();
-
           isEmpty = fetchState.rows.length < 1;
         }
       },
@@ -1173,15 +1155,14 @@
     },
   });
 
-  // Virtual List Capabilities reacting to viewport change
-  $: stbState.calculateBoundaries(
-    clientHeight,
-    canInsert,
-    $stbSortColumn,
-    fetchOnScroll,
-    rowHeight,
-    $stbSortColumn,
-    $stbSortOrder
+  // Initialize and Enrich Rows
+  $: stbState.init($dataSourceStore);
+  $: stbState.synch($stbData);
+  $: stbState.enrichRows(
+    $stbData,
+    rowBGColorTemplate,
+    rowColorTemplate,
+    rowHeight
   );
 
   // Scroll to Top when filter changes
@@ -1199,21 +1180,20 @@
   // Data Related
   $: defaultQuery = QueryUtils.buildQuery($filterStore);
   $: query = extendQuery(defaultQuery, queryExtensions);
-
   $: stbData?.update({
     query,
     sortColumn,
     sortOrder,
   });
-  $: stbState.synch($stbData);
+
   $: tableId = $stbData?.definition?.tableId || $stbData?.definition?._id;
 
   // Derived Store with the columns to be rendered
   $: superColumns = derivedMemo(
-    [memoizedSchema, columnsStore, stbSettings],
-    ([$memoizedSchema, $columnsStore, $stbSettings]) => {
+    [stbSchema, columnsStore, stbSettings],
+    ([$stbSchema, $columnsStore, $stbSettings]) => {
       return tableAPI.populateColumns(
-        $memoizedSchema,
+        $stbSchema,
         $columnsStore,
         $stbSettings.showAutoColumns,
         $stbSettings.showSpecialColumns
@@ -1221,6 +1201,25 @@
     }
   );
 
+  $: cumulativeHeights = derivedMemo(stbRowMetadata, ($meta) => {
+    return $meta?.map((_, i) =>
+      $meta
+        .slice(0, i + 1)
+        .reduce((sum, meta) => sum + Math.max(meta.height, 0), 0)
+    );
+  });
+
+  // Virtual List Capabilities reacting to viewport change
+  $: stbState.calculateBoundaries(
+    clientHeight,
+    canInsert,
+    $stbSortColumn,
+    fetchOnScroll,
+    $stbSortColumn,
+    $stbSortOrder,
+    $cumulativeHeights
+  );
+
   // Derived Store with common column settings
   const commonColumnOptions = derivedMemo(stbSettings, ($stbSettings) => {
     return {
@@ -1322,21 +1321,6 @@
   $: showButtonColumnRight = rowMenu == "columnRight" && rowMenuItems?.length;
   $: showButtonColumnLeft = rowMenu == "columnLeft" && rowMenuItems?.length;
 
-  const createFetch = (datasource) => {
-    stbState.init();
-    return fetchData({
-      API,
-      datasource,
-      options: {
-        query,
-        sortColumn,
-        sortOrder,
-        limit,
-        paginate: false,
-      },
-    });
-  };
-
   const extendQuery = (
     defaultQuery: SearchFilters,
     extensions: Record<string, any>
@@ -1389,7 +1373,10 @@
   setContext("stbMenuAnchor", stbMenuAnchor);
   setContext("stbAPI", tableAPI);
   setContext("stbVisibleRows", stbVisibleRows);
-  $: setContext("stbRowMetadata", stbRowMetadata);
+  setContext("stbRowMetadata", stbRowMetadata);
+
+  // Reactive Context
+
   $: setContext("stbData", stbData);
   $: setContext("stbSchema", stbSchema);
   $: setContext("new_row", new_row);
@@ -1422,6 +1409,7 @@
 <div
   class="super-table"
   class:quiet
+  class:initializing
   bind:this={viewport}
   bind:clientWidth={tableWidth}
   bind:clientHeight
@@ -1445,107 +1433,108 @@
   on:touchmove={(e) => stbState.handleTouch(e, "move")}
   on:touchend={(e) => stbState.handleTouch(e, "end")}
 >
-  <Provider {actions} data={dataContext} />
-  {#key columnSizing}
-    {#if $stbState != "Init"}
-      {#if !isEmpty}
-        <ControlSection>
-          <SelectionColumn {hideSelectionColumn} />
-
-          {#if showButtonColumnLeft}
-            <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
-          {/if}
-
-          {#if stickFirstColumn && $superColumns.length > 1}
-            <SuperTableColumn
-              sticky={true}
-              scrollPos={$stbHorizontalScrollPos}
-              columnOptions={{
-                ...$superColumns[0],
-                ...$commonColumnOptions,
-                overflow,
-                isFirst: true,
-                isLast:
-                  $superColumns?.length == 1 &&
-                  !showButtonColumnRight &&
-                  canScroll,
-              }}
-            />
-          {/if}
-        </ControlSection>
+  {#key stbData}
+    <Provider {actions} data={dataContext} />
+
+    <ControlSection>
+      <SelectionColumn {stbData} {hideSelectionColumn} />
+
+      {#if showButtonColumnLeft}
+        <RowButtonsColumn {rowMenuItems} {menuItemsVisible} {rowMenu} />
       {/if}
 
-      <ColumnsSection
-        {stbSettings}
-        {superColumns}
-        {commonColumnOptions}
-        {canScroll}
-        bind:columnsViewport
-      >
-        <slot />
-      </ColumnsSection>
-
-      {#if showButtonColumnRight && !isEmpty}
-        <ControlSection>
-          <RowButtonsColumn
-            {rowMenuItems}
-            {menuItemsVisible}
-            {rowMenu}
-            {canScroll}
-            right={true}
-          />
-        </ControlSection>
+      {#if stickFirstColumn && $superColumns.length > 1}
+        <SuperTableColumn
+          {stbData}
+          sticky={true}
+          scrollPos={$stbHorizontalScrollPos}
+          columnOptions={{
+            ...$superColumns[0],
+            ...$commonColumnOptions,
+            overflow,
+            isFirst: true,
+            isLast:
+              $superColumns?.length == 1 && !showButtonColumnRight && canScroll,
+          }}
+        />
       {/if}
+    </ControlSection>
+
+    <ColumnsSection
+      {stbData}
+      {stbSettings}
+      {superColumns}
+      {commonColumnOptions}
+      {canScroll}
+      bind:columnsViewport
+    >
+      {#key stbData}
+        {#key $stbSchema}
+          {#key columnSizing}
+            <slot />
+          {/key}
+        {/key}
+      {/key}
+    </ColumnsSection>
+
+    {#if showButtonColumnRight && !isEmpty}
+      <ControlSection>
+        <RowButtonsColumn
+          {rowMenuItems}
+          {menuItemsVisible}
+          {rowMenu}
+          {canScroll}
+          right={true}
+        />
+      </ControlSection>
+    {/if}
 
-      <ScrollbarsOverlay
-        anchor={columnsViewport}
-        clientHeight={maxBodyHeight}
-        {scrollHeight}
+    <ScrollbarsOverlay
+      anchor={columnsViewport}
+      clientHeight={maxBodyHeight}
+      {scrollHeight}
+      {highlighted}
+      {isEmpty}
+      bind:horizontalVisible
+      on:positionChange={stbState.calculateRowBoundaries}
+    />
+
+    <EmptyResultSetOverlay
+      {isEmpty}
+      message={$stbSettings.data.emptyMessage}
+      top={$superColumns?.length
+        ? $stbSettings.appearance.headerHeight + 16
+        : 16}
+      bottom={horizontalVisible ? 24 : 16}
+    />
+
+    <RowContextMenu {rowContextMenuItems} />
+
+    {#if $stbSettings.features.canInsert || $stbState == "Filtered"}
+      <AddNewRowOverlay
+        {stbState}
+        {tableAPI}
         {highlighted}
-        {isEmpty}
-        bind:horizontalVisible
-        on:positionChange={stbState.calculateRowBoundaries}
+        {tableActions}
+        footer={$stbSettings.showFooter}
       />
+    {/if}
 
-      <EmptyResultSetOverlay
-        {isEmpty}
-        message={$stbSettings.data.emptyMessage}
-        top={$superColumns?.length
-          ? $stbSettings.appearance.headerHeight + 16
-          : 16}
-        bottom={horizontalVisible ? 24 : 16}
+    {#if $stbSettings.features.canSelect && selectedActions?.length}
+      <SelectedActionsOverlay
+        {stbSettings}
+        {selectedActions}
+        {stbSelected}
+        {tableAPI}
+        {stbState}
+        {highlighted}
+        {entitySingular}
+        {entityPlural}
       />
+    {/if}
 
-      <RowContextMenu {rowContextMenuItems} />
-
-      {#if $stbSettings.features.canInsert || $stbState == "Filtered"}
-        <AddNewRowOverlay
-          {stbState}
-          {tableAPI}
-          {highlighted}
-          {tableActions}
-          footer={$stbSettings.showFooter}
-        />
-      {/if}
-
-      {#if $stbSettings.features.canSelect && selectedActions?.length}
-        <SelectedActionsOverlay
-          {stbSettings}
-          {selectedActions}
-          {stbSelected}
-          {tableAPI}
-          {stbState}
-          {highlighted}
-          {entitySingular}
-          {entityPlural}
-        />
-      {/if}
-
-      {#if $stbData.loading}
-        <LoadingOverlay />
-      {/if}
-    {:else}
-      <CellSkeleton />
+    {#if $stbData.loading && $stbData.loaded}
+      <LoadingOverlay />
     {/if}
   {/key}
 </div>

package/src/lib/SuperTable/controls/ColumnsSection.svelte

@@ -7,6 +7,7 @@
   export let columnsViewport;
   export let showActionColumn;
   export let canScroll;
+  export let stbData;
   let overflow;
 </script>
 
@@ -17,6 +18,7 @@
 
   {#each $superColumns as column, idx (idx)}
     <SuperTableColumn
+      {stbData}
       columnOptions={{
         ...$commonColumnOptions,
         ...column,

package/src/lib/SuperTable/controls/SelectionColumn.svelte

@@ -3,24 +3,24 @@
 
   const stbState = getContext("stbState");
   const stbSettings = getContext("stbSettings");
-  const stbData = getContext("stbData");
   const stbHorizontalScrollPos = getContext("stbHorizontalScrollPos");
   const stbHovered = getContext("stbHovered");
   const stbMenuID = getContext("stbMenuID");
   const stbSelected = getContext("stbSelected");
   const stbAPI = getContext("stbAPI");
-  const rowMetadata = getContext("stbRowMetadata");
   const stbVisibleRows = getContext("stbVisibleRows");
+  const stbRowMetadata = getContext("stbRowMetadata");
 
   export let sticky;
   export let hideSelectionColumn;
+  export let stbData;
 
   $: idColumn = $stbSettings.data.idColumn;
   $: partialSelection =
-    $stbSelected.length && $stbSelected.length != $stbData.rows?.length;
+    $stbSelected.length && $stbSelected.length != $stbData?.rows?.length;
 
   $: fullSelection =
-    $stbSelected.length == $stbData.rows?.length && $stbData.rows?.length > 0;
+    $stbSelected.length == $stbData?.rows?.length && $stbData?.rows?.length > 0;
 
   $: numbering = $stbSettings.appearance.numberingColumn;
   $: checkBoxes = $stbSettings.features.canSelect && !hideSelectionColumn;
@@ -83,8 +83,8 @@
             class:is-selected={selected}
             class:is-hovered={$stbHovered == visibleRow ||
               $stbMenuID == visibleRow}
-            class:is-disabled={$rowMetadata[visibleRow]?.disabled}
-            style:min-height={$rowMetadata[visibleRow]?.height}
+            class:is-disabled={$stbRowMetadata[visibleRow]?.disabled}
+            style:min-height={$stbRowMetadata[visibleRow]?.height}
             on:mouseenter={() => ($stbHovered = visibleRow)}
             on:mouseleave={() => ($stbHovered = null)}
           >