Merge pull request #34 from poirazis:develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTableColumn",
-  "version": "2.0.34-alpha",
+  "version": "2.0.38-alpha",
   "description": "Customizable columns for the SuperTable Component",
   "author": "Michael Poirazi",
   "license": "MIT",
@@ -17,16 +17,16 @@
     "svelte-legos": "^0.2.5"
   },
   "devDependencies": {
-    "@budibase/backend-core": "^2.31.3",
-    "@budibase/bbui": "^2.31.3",
+    "@budibase/backend-core": "^2.32.17",
+    "@budibase/bbui": "^2.32.17",
     "@budibase/shared-core": "2.11.30",
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.41",
-    "rollup": "^2.79.1",
+    "postcss": "^8.4.47",
+    "rollup": "^2.79.2",
     "rollup-plugin-copy2": "^0.3.1",
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-postcss": "^4.0.2",

schema.json

@@ -15,7 +15,7 @@
         "type": "text",
         "key": "field",
         "label": "Field",
-        "hidden": true
+        "hidden": false
       },
       {
         "type": "select",

src/Component.svelte

@@ -5,11 +5,10 @@
   import SuperTableColumn from "../../bb_super_components_shared/src/lib/SuperTableColumn/SuperTableColumn.svelte";
   import { defaultOperatorMap } from "../../bb_super_components_shared/src/lib/SuperTable/constants";
 
-  const { styleable, builderStore, screenStore } = getContext("sdk");
+  const { styleable, builderStore, screenStore, memo } = getContext("sdk");
   const component = getContext("component");
-  const tableOptions = getContext("stbSettings");
+  const stbSettings = getContext("stbSettings");
   const stbState = getContext("stbState");
-  const stbData = getContext("stbData");
 
   export let field;
   export let columnType;
@@ -43,21 +42,26 @@
 
   let id = $component.id;
   let order, isLast, isFirst;
-  let columnOptions = {};
-  let localField = $tableOptions ? field : "reset_this_column";
+  let localField = $stbSettings ? field : "reset_this_column";
+  let columnOptions = memo({});
+  let optionOverrides = memo($$props);
 
+  $: optionOverrides.set($$props);
   $: inBuilder = $builderStore?.inBuilder;
+  $: schema = $stbSettings?.data?.schema;
 
   // We nned to know the position of the Super Columns amonsgt other siblings
   // to adjust various properties
   $: getOrderAmongstSiblings($screenStore);
+  $: enrichColumnnOptions($stbSettings, field, $optionOverrides);
 
-  $: columnOptions = $tableOptions
-    ? {
+  const enrichColumnnOptions = () => {
+    if (field && schema && schema[field]) {
+      let schema = $stbSettings?.data?.schema;
+      let type = schema[field].type;
+      columnOptions.set({
         name: field,
-        schema:
-          columnType == "auto" ? $stbData?.schema[field] : { type: columnType },
-        type: columnType,
+        schema: columnType == "auto" ? schema[field] : { type: columnType },
         align: align,
         displayName: header ? header : field,
         asComponent: $builderStore.inBuilder,
@@ -66,35 +70,32 @@
         fontWeight: fontWeight,
         header: header ?? "",
         headerAlign: align,
-        headerHeight: $tableOptions?.headerHeight,
+        headerHeight: $stbSettings?.headerHeight,
         template: valueTemplate,
         canEdit:
-          canEdit == "inherit" ? $tableOptions?.features.canEdit : canEdit,
-        highlighters: $tableOptions?.appearance?.highlighters,
+          canEdit == "inherit" ? $stbSettings?.features.canEdit : canEdit,
+        highlighters: $stbSettings?.appearance?.highlighters,
         canFilter:
-          canFilter == "inherit" ? $tableOptions.features.canFilter : canFilter,
+          canFilter == "inherit" ? $stbSettings.features.canFilter : canFilter,
         canResize:
-          canResize == "inherit" ? $tableOptions.features.canResize : canResize,
-        defaultFilteringOperator: field
-          ? defaultOperatorMap[$stbData?.schema[field]?.type]
-          : undefined,
-        canSort:
-          canSort == "inherit" ? $tableOptions.features.canSort : canSort,
+          canResize == "inherit" ? $stbSettings.features.canResize : canResize,
+        defaultFilteringOperator: field ? defaultOperatorMap[type] : undefined,
+        canSort: canSort == "inherit" ? $stbSettings.features.canSort : canSort,
         isSorted:
-          $tableOptions?.sortedColum == field
-            ? $tableOptions?.sortedDirection
+          $stbSettings?.sortedColum == field
+            ? $stbSettings?.sortedDirection
             : null,
-        sizing: sizing || $tableOptions?.sizing,
-        minWidth: minWidth || $tableOptions?.columnMinWidth,
-        maxWidth: maxWidth || $tableOptions?.columnMaxWidth,
-        fixedWidth: fixedWidth | $tableOptions?.columnFixedWidth,
-        showHeader: $tableOptions?.showHeader,
-        showFooter: $tableOptions?.showFooter,
+        sizing: sizing || $stbSettings?.sizing,
+        minWidth: minWidth || $stbSettings?.columnMinWidth,
+        maxWidth: maxWidth || $stbSettings?.columnMaxWidth,
+        fixedWidth: fixedWidth | $stbSettings?.columnFixedWidth,
+        showHeader: $stbSettings?.showHeader,
+        showFooter: $stbSettings?.showFooter,
         order: order,
         isFirst: isFirst,
         isLast: isLast,
         superColumn: true,
-        cellPadding: $tableOptions?.appearance.cellPadding,
+        cellPadding: $stbSettings?.appearance.cellPadding,
         optionsSource: columnType != "auto" ? optionsSource : "schema",
         customOptions,
         useOptionColors,
@@ -106,18 +107,19 @@
           labelColumn,
           valueColumn,
         },
-      }
-    : {};
+      });
+    }
+  };
 
   // When the Super Columns is used as a Component, the sizing variables need to be applied to the wrapping div and not the
   // SuperColumn itself.
   $: $component.styles = {
     ...$component.styles,
     normal: {
       ...$component.styles.normal,
-      display: inBuilder ? "block" : "contents",
+      display: inBuilder ? "flex" : "contents",
       flex:
-        $tableOptions?.columnSizing == "flexible" && sizing == "flexible"
+        $stbSettings?.columnSizing == "flexible" && sizing == "flexible"
           ? flexFactor + " 1 auto"
           : "0 1 auto",
       width:
@@ -137,9 +139,9 @@
   }
 
   function getOrderAmongstSiblings() {
-    if (!tableOptions) return;
+    if (!stbSettings) return;
 
-    let parentTableID = $tableOptions.componentID;
+    let parentTableID = $stbSettings.componentID;
     let parentTableObj = findComponentById(
       $screenStore.activeScreen.props,
       parentTableID
@@ -150,13 +152,18 @@
   }
 
   const isValid = () => {
-    let validFields = Object.keys($stbData?.schema ?? {});
+    let validFields = Object.keys(schema ?? {});
     return field && validFields.includes(field);
   };
+
+  $: redraw($component.children);
+  const redraw = () => {
+    stbState?.refresh();
+  };
 </script>
 
 <div use:styleable={$component.styles}>
-  {#if !tableOptions && inBuilder}
+  {#if !stbSettings && inBuilder}
     <p class="error-message">
       <i
         class="ri-error-warning-line"
@@ -166,12 +173,11 @@
     </p>
   {:else if !isValid(field) && inBuilder}
     <div style:margin={"0.5rem 1rem"}>
-      <FieldSelect bind:value={localField} schema={$stbData?.schema ?? {}} />
+      <FieldSelect bind:value={localField} {schema} />
     </div>
   {:else if isValid(field)}
     <SuperTableColumn
-      columnOptions={{ ...columnOptions, hasChildren: $component.children }}
-      {stbState}
+      columnOptions={{ ...$columnOptions, hasChildren: $component.children }}
     >
       <slot />
     </SuperTableColumn>