Merge pull request #24 from poirazis/develop

2.0.18-alpha
poirazis · Mar 13, 2024 · 676d729 · 676d729
2 parents 3fe8dff + b7b3f06
commit 676d729
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 121 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.17-alpha",
+  "version": "2.0.18-alpha",
   "description": "Customizable columns for the SuperTable Component",
   "author": "Michael Poirazi",
   "license": "MIT",

diff --git a/schema.json b/schema.json
@@ -27,7 +27,7 @@
           {"label" : "Schema", "value": "auto", "barIcon" : "Data", "barTitle" : "Schema" },
           {"label" : "Options", "value": "options", "barIcon": "MultipleCheck", "barTitle" : "Option Picker" },
           {"label" : "Relationship", "value": "linkSQL", "barIcon" : "Link" , "barTitle" : "Relationship Picker" },
-          {"label" : "Custom", "value": "subType", "barIcon" : "Settings" , "barTitle" : "Custom Sub Type" },
+          {"label" : "Custom", "value": "subType", "barIcon" : "Brackets" , "barTitle" : "JSON" },
           {"label" : "Container", "value": "container", "barIcon" : "RectSelect", "barTitle" : "Container" }
         ],
         "defaultValue" : "auto"

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -1,44 +1,45 @@
 <script>
   import { getContext } from "svelte";
-  import { findComponentById } from "../lib/builderHelpers" 
-  import FieldSelect from "./FieldSelect.svelte"
+  import { findComponentById } from "../lib/builderHelpers";
+  import FieldSelect from "./FieldSelect.svelte";
   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, componentStore } =
+    getContext("sdk");
   const component = getContext("component");
-  const tableOptions = getContext("stbSettings")
-  const stbState = getContext("tableState")
-  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
-  export let useOptionIcons
-  export let optionsViewMode
-
-  export let valueTemplate
-
-  export let sizing
-  export let flexFactor
-  export let minWidth
-  export let maxWidth
-  export let fixedWidth
-
-  export let canResize
-  export let canEdit
-  export let canFilter
-  export let canSort
-
-  export let icon
-  export let iconColor
+  const tableOptions = getContext("stbSettings");
+  const stbState = getContext("tableState");
+  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;
+  export let useOptionIcons;
+  export let optionsViewMode;
+
+  export let valueTemplate;
+
+  export let sizing;
+  export let flexFactor;
+  export let minWidth;
+  export let maxWidth;
+  export let fixedWidth;
+
+  export let canResize;
+  export let canEdit;
+  export let canFilter;
+  export let canSort;
+
+  export let icon;
+  export let iconColor;
 
   export let header, headerAlign, headerFontColor, headerBackground;
 
@@ -47,110 +48,127 @@
   export let footer, footerAlign, footerFontColor, footerBackground;
 
   let id = $component.id;
-  let order, isLast, isFirst, localField
+  let order, isLast, isFirst, localField;
+  let columnOptions = {};
 
   // We nned to know the position of the Super Columns amonsgt other siblings
   // to adjust various properties
-  $: getOrderAmongstSiblings( $screenStore )
-  $: columnOptions = {
-    name: field,
-    schema: columnType == "auto" ? $stbData?.schema[field] : { type: columnType },
-    type: columnType,
-    align: rowHorizontalAlign,
-    displayName: header ? header : field, 
-    asComponent: $builderStore.inBuilder,
-    color: rowFontColor,
-    background: rowBackground,
-    fontWeight: fontWeight,
-    header: header ?? "",
-    headerAlign: headerAlign,
-    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
-    }
-  }
-
-  // When the Super Columns is used as a Component, the sizing variables need to be applied to the wrapping div and not the 
+  $: getOrderAmongstSiblings($screenStore);
+  $: if (tableOptions)
+    columnOptions = {
+      name: field,
+      schema:
+        columnType == "auto" ? $stbData?.schema[field] : { type: columnType },
+      type: columnType,
+      align: rowHorizontalAlign,
+      displayName: header ? header : field,
+      asComponent: $builderStore.inBuilder,
+      color: rowFontColor,
+      background: rowBackground,
+      fontWeight: fontWeight,
+      header: header ?? "",
+      headerAlign: headerAlign,
+      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,
+      },
+    };
+
+  // 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",
-      "flex": $tableOptions?.columnSizing == "flexible" && sizing == "flexible" ? flexFactor + " 1 auto" : "0 1 auto",
-      "width" : columnOptions.sizing == "fixed" ? columnOptions.fixedWidth : "auto",
-      "min-width" : columnOptions.minWidth,
-      "max-width" : columnOptions.maxWidth,
-    }
+      display: $builderStore.inBuilder ? "block" : "contents",
+      flex:
+        $tableOptions?.columnSizing == "flexible" && sizing == "flexible"
+          ? flexFactor + " 1 auto"
+          : "0 1 auto",
+      width:
+        columnOptions.sizing == "fixed" ? columnOptions.fixedWidth : "auto",
+      "min-width": columnOptions.minWidth,
+      "max-width": columnOptions.maxWidth,
+    },
+  };
+
+  $: if (
+    $builderStore.inBuilder &&
+    $componentStore.selectedComponentPath?.includes($component.id) &&
+    localField &&
+    localField != field
+  ) {
+    builderStore.actions.updateProp("field", localField);
   }
 
-  $:  if (
-      $builderStore.inBuilder &&
-      $componentStore.selectedComponentPath?.includes($component.id) &&
-      localField && 
-      localField != field
-    ) {
-        builderStore.actions.updateProp("field", localField)
-    }
-
-  function getOrderAmongstSiblings ( ) {
-    if (!tableOptions ) return;
+  function getOrderAmongstSiblings() {
+    if (!tableOptions) return;
 
     let parentTableID = $tableOptions.componentID;
-    let parentTableObj = findComponentById ( $screenStore.activeScreen.props, parentTableID )
-    order = parentTableObj?._children?.findIndex ( v => v._id == id )
-    isLast = order == parentTableObj?._children?.length - 1
-    isFirst = order == 0  
+    let parentTableObj = findComponentById(
+      $screenStore.activeScreen.props,
+      parentTableID
+    );
+    order = parentTableObj?._children?.findIndex((v) => v._id == id);
+    isLast = order == parentTableObj?._children?.length - 1;
+    isFirst = order == 0;
   }
 
   const isValid = () => {
-    let validFields = Object.keys($stbData?.schema ?? {} )
-    return field && validFields.includes(field)
-  }
-
+    let validFields = Object.keys($stbData?.schema ?? {});
+    return field && validFields.includes(field);
+  };
 </script>
 
-<div use:styleable={$component.styles}> 
+<div use:styleable={$component.styles}>
   {#if !tableOptions}
-    <p> Super Columns can only be placed inside a Super Table </p>
+    <p>Super Columns can only be placed inside a Super Table</p>
   {:else if !isValid(field)}
-    <div style:margin={"0.5rem 1rem"} >
-      <FieldSelect bind:value={localField} schema={$stbData?.schema ?? {} } />
+    <div style:margin={"0.5rem 1rem"}>
+      <FieldSelect bind:value={localField} schema={$stbData?.schema ?? {}} />
     </div>
   {:else}
-    <SuperTableColumn 
-      {columnOptions} 
-      {stbState}> 
-        <slot /> 
+    <SuperTableColumn
+      columnOptions={{ ...columnOptions, hasChildren: $component.children }}
+      {stbState}
+    >
+      <slot />
     </SuperTableColumn>
   {/if}
-</div>
+</div>