Merge pull request #32 from poirazis/develop

v2.0.34-alpha
poirazis · Aug 30, 2024 · 7e62da1 · 7e62da1
2 parents 00034c7 + ef8e339
commit 7e62da1
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 170 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTableColumn",
-  "version": "2.0.28-alpha",
+  "version": "2.0.34-alpha",
   "description": "Customizable columns for the SuperTable Component",
   "author": "Michael Poirazi",
   "license": "MIT",
@@ -12,21 +12,20 @@
   },
   "dependencies": {
     "@crownframework/svelte-error-boundary": "^1.0.3",
-    "lucide-svelte": "^0.293.0",
-    "svelte": "^4.2.18",
+    "svelte": "^4.2.19",
     "svelte-fsm": "^1.2.0",
-    "svelte-legos": "^0.2.3"
+    "svelte-legos": "^0.2.5"
   },
   "devDependencies": {
-    "@budibase/backend-core": "^2.29.27",
-    "@budibase/bbui": "^2.29.27",
+    "@budibase/backend-core": "^2.31.3",
+    "@budibase/bbui": "^2.31.3",
     "@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-terser": "^0.4.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.40",
+    "postcss": "^8.4.41",
     "rollup": "^2.79.1",
     "rollup-plugin-copy2": "^0.3.1",
     "rollup-plugin-polyfill-node": "^0.8.0",

diff --git a/schema.json b/schema.json
@@ -36,12 +36,6 @@
             "barIcon": "MultipleCheck",
             "barTitle": "Option Picker"
           },
-          {
-            "label": "Relationship",
-            "value": "linkSQL",
-            "barIcon": "Link",
-            "barTitle": "Relationship Picker"
-          },
           {
             "label": "Custom",
             "value": "subType",
@@ -165,77 +159,6 @@
               "value": "data"
             },
             "resetsOn": "datasource"
-          },
-          {
-            "type": "boolean",
-            "key": "fullTable",
-            "label": "Super Table",
-            "resetOn": "columnType"
-          },
-          {
-            "type": "columns",
-            "key": "columnList",
-            "label": "Column",
-            "resetsOn": "columnType",
-            "dependsOn": "fullTable"
-          }
-        ]
-      },
-      {
-        "section": true,
-        "name": "Relationship Settings",
-        "dependsOn": { "setting": "columnType", "value": "linkSQL" },
-        "settings": [
-          {
-            "type": "table",
-            "key": "datasource",
-            "label": "Table",
-            "dependsOn": {
-              "setting": "optionsSource",
-              "value": "data"
-            },
-            "resetsOn": "columnType"
-          },
-          {
-            "type": "field",
-            "key": "valueColumn",
-            "label": "Value Column",
-            "dependsOn": {
-              "setting": "optionsSource",
-              "value": "data"
-            },
-            "resetsOn": "datasource"
-          },
-          {
-            "type": "field",
-            "key": "labelColumn",
-            "label": "Label Column",
-            "dependsOn": {
-              "setting": "optionsSource",
-              "value": "data"
-            },
-            "resetsOn": "datasource"
-          },
-          {
-            "type": "field",
-            "key": "colorColumn",
-            "label": "Color Column",
-            "dependsOn": {
-              "setting": "optionsSource",
-              "value": "data"
-            },
-            "resetsOn": "datasource"
-          },
-          {
-            "type": "field",
-            "key": "iconColumn",
-            "label": "Icon Column",
-            "info": "Must contain a remix icon class name",
-            "dependsOn": {
-              "setting": "optionsSource",
-              "value": "data"
-            },
-            "resetsOn": "datasource"
           }
         ]
       },
@@ -293,20 +216,6 @@
         ],
         "defaultValue": "inherit"
       },
-      {
-        "type": "select",
-        "key": "sticky",
-        "label": "Stick",
-        "showInBar": true,
-        "barStyle": "buttons",
-        "options": [
-          { "label": "Off", "value": false, "barIcon": "Cancel" },
-          { "label": "Left", "value": "left", "barIcon": "RailLeft" },
-          { "label": "Right", "value": "right", "barIcon": "RailRight" }
-        ],
-        "defaultValue": false
-      },
-
       {
         "tag": "style",
         "section": true,
@@ -438,6 +347,11 @@
             "label": "row",
             "key": "row",
             "type": "object"
+          },
+          {
+            "label": "index",
+            "key": "index",
+            "type": "number"
           }
         ]
       }

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -5,20 +5,17 @@
   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, componentStore } =
-    getContext("sdk");
+  const { styleable, builderStore, screenStore } = getContext("sdk");
   const component = getContext("component");
   const tableOptions = getContext("stbSettings");
-  const stbState = getContext("tableState");
+  const stbState = getContext("stbState");
   const stbData = getContext("stbData");
 
   export let field;
   export let columnType;
   export let datasource;
   export let valueColumn;
   export let labelColumn;
-  export let fullTable;
-  export let columnList;
   export let optionsSource;
   export let customOptions;
   export let useOptionColors;
@@ -38,85 +35,87 @@
   export let canFilter;
   export let canSort;
 
-  export let icon;
-  export let iconColor;
-
   export let header, align, headerFontColor, headerBackground;
 
   export let rowHorizontalAlign, rowFontColor, rowBackground, fontWeight;
 
   export let footer, footerAlign, footerFontColor, footerBackground;
 
   let id = $component.id;
-  let order, isLast, isFirst, localField;
+  let order, isLast, isFirst;
   let columnOptions = {};
+  let localField = $tableOptions ? field : "reset_this_column";
+
+  $: inBuilder = $builderStore?.inBuilder;
 
   // We nned to know the position of the Super Columns amonsgt other siblings
   // to adjust various properties
   $: getOrderAmongstSiblings($screenStore);
-  $: if (tableOptions)
-    columnOptions = {
-      name: field,
-      schema:
-        columnType == "auto" ? $stbData?.schema[field] : { type: columnType },
-      type: columnType,
-      align: align,
-      displayName: header ? header : field,
-      asComponent: $builderStore.inBuilder,
-      color: rowFontColor,
-      background: rowBackground,
-      fontWeight: fontWeight,
-      header: header ?? "",
-      headerAlign: align,
-      headerHeight: $tableOptions?.headerHeight,
-      template: valueTemplate,
-      canEdit: canEdit == "inherit" ? $tableOptions?.features.canEdit : canEdit,
-      highlighters: $tableOptions.appearance.highlighters,
-      canFilter:
-        canFilter == "inherit" ? $tableOptions.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,
-      isSorted:
-        $tableOptions?.sortedColum == field
-          ? $tableOptions?.sortedDirection
-          : null,
-      sizing: sizing || $tableOptions?.sizing,
-      minWidth: minWidth || $tableOptions?.columnMinWidth,
-      maxWidth: maxWidth || $tableOptions?.columnMaxWidth,
-      fixedWidth: fixedWidth | $tableOptions?.columnFixedWidth,
-      showHeader: $tableOptions?.showHeader,
-      showFooter: $tableOptions?.showFooter,
-      order: order,
-      isFirst: isFirst,
-      isLast: isLast,
-      superColumn: true,
-      cellPadding: $tableOptions?.appearance.cellPadding,
-      optionsSource: columnType != "auto" ? optionsSource : "schema",
-      customOptions,
-      useOptionColors,
-      useOptionIcons,
-      optionsViewMode,
-      data: {
-        datasource,
-        limit: 10,
-        labelColumn,
-        valueColumn,
-        fullTable,
-        columnList,
-      },
-    };
+
+  $: columnOptions = $tableOptions
+    ? {
+        name: field,
+        schema:
+          columnType == "auto" ? $stbData?.schema[field] : { type: columnType },
+        type: columnType,
+        align: align,
+        displayName: header ? header : field,
+        asComponent: $builderStore.inBuilder,
+        color: rowFontColor,
+        background: rowBackground,
+        fontWeight: fontWeight,
+        header: header ?? "",
+        headerAlign: align,
+        headerHeight: $tableOptions?.headerHeight,
+        template: valueTemplate,
+        canEdit:
+          canEdit == "inherit" ? $tableOptions?.features.canEdit : canEdit,
+        highlighters: $tableOptions?.appearance?.highlighters,
+        canFilter:
+          canFilter == "inherit" ? $tableOptions.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,
+        isSorted:
+          $tableOptions?.sortedColum == field
+            ? $tableOptions?.sortedDirection
+            : null,
+        sizing: sizing || $tableOptions?.sizing,
+        minWidth: minWidth || $tableOptions?.columnMinWidth,
+        maxWidth: maxWidth || $tableOptions?.columnMaxWidth,
+        fixedWidth: fixedWidth | $tableOptions?.columnFixedWidth,
+        showHeader: $tableOptions?.showHeader,
+        showFooter: $tableOptions?.showFooter,
+        order: order,
+        isFirst: isFirst,
+        isLast: isLast,
+        superColumn: true,
+        cellPadding: $tableOptions?.appearance.cellPadding,
+        optionsSource: columnType != "auto" ? optionsSource : "schema",
+        customOptions,
+        useOptionColors,
+        useOptionIcons,
+        optionsViewMode,
+        data: {
+          datasource,
+          limit: 10,
+          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: $builderStore.inBuilder ? "block" : "contents",
+      display: inBuilder ? "block" : "contents",
       flex:
         $tableOptions?.columnSizing == "flexible" && sizing == "flexible"
           ? flexFactor + " 1 auto"
@@ -129,8 +128,8 @@
   };
 
   $: if (
-    $builderStore.inBuilder &&
-    $componentStore.selectedComponentPath?.includes($component.id) &&
+    inBuilder &&
+    $component.selected &&
     localField &&
     localField != field
   ) {
@@ -157,13 +156,19 @@
 </script>
 
 <div use:styleable={$component.styles}>
-  {#if !tableOptions}
-    <p>Super Columns can only be placed inside a Super Table</p>
-  {:else if !isValid(field)}
+  {#if !tableOptions && inBuilder}
+    <p class="error-message">
+      <i
+        class="ri-error-warning-line"
+        style="color: var(--spectrum-global-color-yellow-700)"
+      />
+      Super Columns can only be placed inside a Super Table
+    </p>
+  {:else if !isValid(field) && inBuilder}
     <div style:margin={"0.5rem 1rem"}>
       <FieldSelect bind:value={localField} schema={$stbData?.schema ?? {}} />
     </div>
-  {:else}
+  {:else if isValid(field)}
     <SuperTableColumn
       columnOptions={{ ...columnOptions, hasChildren: $component.children }}
       {stbState}
@@ -172,3 +177,12 @@
     </SuperTableColumn>
   {/if}
 </div>
+
+<style>
+  .error-message {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1.25rem;
+  }
+</style>
diff --git a/src/FieldSelect.svelte b/src/FieldSelect.svelte
@@ -8,11 +8,12 @@
     customOptions: Object.keys(schema),
     controlType: "select",
     optionsViewMode: "text",
-    autocomplete: false,
+    autocomplete: true,
     padding: "0.5rem",
     addNew: false,
     placeholder: "Select Field",
     role: "formInput",
+    debounce: 100,
   };
 </script>