Merge pull request #12 from poirazis/develop

2.0.3-alpha
poirazis · Nov 28, 2023 · 966c117 · 966c117
2 parents 4d01a16 + a5f9335
commit 966c117
Show file tree

Hide file tree

Showing 9 changed files with 243 additions and 147 deletions.
diff --git a/bb-component-SuperTableCell b/bb-component-SuperTableCell
diff --git a/lib/SuperTableColumn/SuperTableColumn.svelte b/lib/SuperTableColumn/SuperTableColumn.svelte
@@ -54,6 +54,7 @@
         tableDataStore?.registerColumn({ id: id, field: field });
       },
       rowClicked ( id ) { tableState.rowClicked( { "rowID" : id } ) },
+      rowDblClicked ( id ) { tableState.rowDblClicked( { "rowID" : id } ) },
       cancel() { return "Idle"},
       lockWidth () { lockWidth = true },
       goTo ( state ) { return state },
@@ -154,7 +155,7 @@
   class="superTableColumn"
   class:resizing
   class:considerResizing={considerResizing && !resizing}
-  style:flex={ width ? "0 0 auto" : columnOptions.sizing == "fixed" ? "0 0 auto" : "1 1 auto" }
+  style:flex={ width ? "0" : columnOptions.sizing == "fixed" ? "0" : "1" }
   style:width={ width ? width : columnOptions.sizing == "fixed" ? columnOptions.fixedWidth : "auto"}
   style:min-width={ columnOptions.sizing == "flexible" ? columnOptions.minWidth : null}
   style:max-width={ columnOptions.sizing == "flexible" ? columnOptions.maxWidth : null}

diff --git a/lib/SuperTableColumn/parts/SuperColumnBody.svelte b/lib/SuperTableColumn/parts/SuperColumnBody.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte";
   import SuperColumnRow from "./SuperColumnRow.svelte";
+  import Popover from "../../../node_modules/@budibase/bbui/src/Popover/Popover.svelte"
 
   const tableStateStore = getContext("tableStateStore");
   const tableSelectionStore = getContext("tableSelectionStore");
@@ -21,8 +22,7 @@
   }
 
   const synchScrollPosition = ( position ) => { 
-    if (columnBodyAnchor) 
-      if ( position != columnBodyAnchor.scrollTop)
+    if (columnBodyAnchor && position != columnBodyAnchor.scrollTop ) 
       columnBodyAnchor.scrollTop = position 
   }
 
@@ -48,7 +48,8 @@
         isSelected={ $tableSelectionStore[row.rowKey] }
         on:resize={ (event) => tableStateStore.resizeRow(columnOptions.id, index, event.detail.height)}
         on:hovered={() => ($tableHoverStore = index)}
-        on:rowClicked={(e) => columnState.rowClicked( e.detail.rowKey ) }
+        on:rowClicked={ (e) => columnState.rowClicked( e.detail.rowKey ) }
+        on:rowDblClicked={ (e) => columnState.rowDblClicked( e.detail.rowKey ) }
       >
         <slot />
       </SuperColumnRow>

diff --git a/lib/SuperTableColumn/parts/SuperColumnHeader.svelte b/lib/SuperTableColumn/parts/SuperColumnHeader.svelte
@@ -1,89 +1,137 @@
 <script>
-	import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte"
-  import Popover  from "../../../node_modules/@budibase/bbui/src/Popover/Popover.svelte"
-	import { SuperCell } from "../../../bb-component-SuperTableCell/lib/SuperTableCell/index.js"
+  import Icon from "../../../node_modules/@budibase/bbui/src/Icon/Icon.svelte";
+  import Popover from "../../../node_modules/@budibase/bbui/src/Popover/Popover.svelte";
+  import { SuperCell } from "../../../bb-component-SuperTableCell/lib/SuperTableCell/index.js";
 
   export let columnState;
-  export let columnOptions
+  export let columnOptions;
 
-  let headerAnchor 
-  let showFilteringOptions = false  
-  let cellState
-  let filterValue
-  let filterOperator = columnOptions.defaultFilteringOperator
+  let headerAnchor;
+  let showFilteringOptions = false;
+  let cellState;
+  let filterValue;
+  let filterOperator = columnOptions.defaultFilteringOperator;
 
   $: cellOptions = {
     align: columnOptions.align,
     color: columnOptions.color,
     background: columnOptions.background ?? "transparent",
     fontWeight: columnOptions.fontWeight,
     padding: columnOptions.padding,
-  }
+  };
 
-  const handleValueChange = ( e ) => {
-    filterValue = e.detail
-    if ( filterValue != undefined && filterValue != "" && filterValue.length != [] ) {
-      columnState.filter( buildFilter( filterOperator, filterValue ) )
+  const handleValueChange = (e) => {
+    filterValue = e.detail;
+    if (
+      filterValue != undefined &&
+      filterValue != "" &&
+      filterValue.length != []
+    ) {
+      columnState.filter(buildFilter(filterOperator, filterValue));
     } else {
-      columnState.clear()
+      columnState.clear();
     }
-  }
+  };
 
-  const buildFilter = ( operator , value ) => {
+  const buildFilter = (operator, value) => {
     return {
       field: columnOptions.name,
       operator: operator,
       value: columnOptions.schema.type == "number" ? Number(value) : value,
       valueType: "Value",
-    }
-  }
+    };
+  };
 
-  const handleKeyboard = ( e ) => {
+  const handleKeyboard = (e) => {
     if (e.key == "Enter") {
-     columnState.filter ( filterOperator, filterValue )
+      columnState.filter(filterOperator, filterValue);
     }
     if (e.key == "Escape") {
       columnState.cancel();
     }
-  }
+  };
 </script>
 
 {#if columnOptions.showHeader}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-  <div 
+  <div
     bind:this={headerAnchor}
-    class="spectrum-Table-headCell" 
-    class:enterting={ $columnState == "Entering" } 
-    class:filtered={ $columnState == "Filtered" }
+    class="spectrum-Table-headCell"
+    class:enterting={$columnState == "Entering"}
+    class:filtered={$columnState == "Filtered"}
     tabindex="0"
     on:keydown={handleKeyboard}
   >
-
-    {#if $columnState == "Idle" || $columnState == "Ascending" || $columnState == "Descending" }
-
-      {#if columnOptions.canFilter && columnOptions.defaultFilteringOperator }
-        <div class="actionIcon">
-          <Icon on:click={columnState.filter} size="S" hoverable name="Search" color={ "var(--spectrum-global-color-gray-500)" } />
+    {#if $columnState == "Idle" || $columnState == "Ascending" || $columnState == "Descending"}
+      {#if columnOptions.canFilter && columnOptions.defaultFilteringOperator}
+        <div class="actionIcon" on:click={columnState.filter}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-search"
+          >
+            <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+          </svg>
         </div>
       {/if}
 
-
-      <div class="headerLabel" style:justify-content={columnOptions?.headerAlign} >
-        <div class="innerText" class:sortable={columnOptions.canSort} on:click={columnState.sort}>
+      <div
+        class="headerLabel"
+        style:justify-content={columnOptions?.headerAlign}
+      >
+        <div
+          class="innerText"
+          class:sortable={columnOptions.canSort}
+          on:click={columnState.sort}
+        >
           {columnOptions.displayName}
         </div>
       </div>
 
-      {#if columnOptions.isSorted }
+      {#if columnOptions.isSorted}
         <div class="actionIcon sort">
-          <Icon size="XS" name= { columnOptions.isSorted == "Descending" ? "SortOrderDown" : "SortOrderUp"}/>
+          <Icon
+            size="XS"
+            name={columnOptions.isSorted == "Descending"
+              ? "SortOrderDown"
+              : "SortOrderUp"}
+          />
         </div>
       {/if}
-
-    {:else if $columnState == "Entering" || $columnState == "Filtered" }
-      <div class="actionIcon" on:click={ (e) => { e.preventDefault(); e.stopPropagation(); showFilteringOptions = !showFilteringOptions }} >
-        <Icon size="XS" hoverable name="Settings" color={ $columnState == "Filtered" ? "var(--spectrum-global-color-blue-500)" : null }  />
+    {:else if $columnState == "Entering" || $columnState == "Filtered"}
+      <div
+        class="actionIcon"
+        on:click={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          showFilteringOptions = !showFilteringOptions;
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-settings-2"
+          ><path d="M20 7h-9" /><path d="M14 17H5" /><circle
+            cx="17"
+            cy="17"
+            r="3"
+          /><circle cx="7" cy="7" r="3" /></svg
+        >
       </div>
 
       <SuperCell
@@ -97,33 +145,51 @@
         lockState
         unstyled
         on:change={handleValueChange}
-        on:blur={ () => 
-          setTimeout( 
-          () => { if (!showFilteringOptions && !filterValue ) columnState.cancel() }, 100 )
-          }
+        on:blur={() =>
+          setTimeout(() => {
+            if (!showFilteringOptions && !filterValue) columnState.cancel();
+          }, 100)}
       />
 
       <div class="actionIcon">
-        <Icon size="XS" hoverable name="Close" color={ "var(--spectrum-global-color-red-500)" }  on:click={ () => { filterValue = undefined; columnState.cancel() } } />
+        <Icon
+          size="XS"
+          hoverable
+          name="Close"
+          color={"var(--spectrum-global-color-red-500)"}
+          on:click={() => {
+            filterValue = undefined;
+            columnState.cancel();
+          }}
+        />
       </div>
-    {:else if $columnState == "Loading" }
-      <p> ... </p>
+    {:else if $columnState == "Loading"}
+      <p>...</p>
     {/if}
 
-
-    <Popover anchor={headerAnchor} align="left" dismissible open={showFilteringOptions} on:close={ () => { showFilteringOptions = false; } }>
+    <Popover
+      anchor={headerAnchor}
+      align="left"
+      dismissible
+      open={showFilteringOptions}
+      on:close={() => {
+        showFilteringOptions = false;
+      }}
+    >
       <ul class="spectrum-Menu" role="menu">
-        {#each columnOptions.filteringOperators as option }
-          <li class="spectrum-Menu-item" 
-            class:selected={ option.value == filterOperator }
-            role="menuitem" tabindex="0" 
-            on:click|stopPropagation={() => { 
-              filterOperator = option.value; 
-              showFilteringOptions = false; 
-              columnState.filter( buildFilter( filterOperator, filterValue ) )
-            } }
+        {#each columnOptions.filteringOperators as option}
+          <li
+            class="spectrum-Menu-item"
+            class:selected={option.value == filterOperator}
+            role="menuitem"
+            tabindex="0"
+            on:click|stopPropagation={() => {
+              filterOperator = option.value;
+              showFilteringOptions = false;
+              columnState.filter(buildFilter(filterOperator, filterValue));
+            }}
           >
-              <span class="spectrum-Menu-itemLabel">{option.label}</span>
+            <span class="spectrum-Menu-itemLabel">{option.label}</span>
           </li>
         {/each}
       </ul>
@@ -146,15 +212,21 @@
     background-color: var(--super-table-header-bg-color);
   }
   .enterting {
-    gap: 0.5rem;
-    background-color: var(--spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50));
+    gap: 0rem;
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
   }
   .filtered {
     gap: 0rem;
     color: var(--spectrum-global-color-gray-800);
     border: 1px solid var(--spectrum-global-color-gray-500);
     font-weight: 700;
-    background-color: var(--spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-100));
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-100)
+    );
   }
 
   .headerLabel {
@@ -180,8 +252,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(--spectrum-global-color-gray-400);
   }
 
+  .actionIcon:hover {
+    color: var(--spectrum-global-color-blue-500);
+    cursor: pointer;
+  }
+
+  .actionIcon:hover > svg {
+    stroke-width: 2;
+  }
   .selected {
     color: var(--primaryColor);
     background-color: var(--spectrum-global-color-gray-75);

diff --git a/lib/SuperTableColumn/parts/SuperColumnRow.svelte b/lib/SuperTableColumn/parts/SuperColumnRow.svelte
@@ -49,14 +49,16 @@
 	on:mouseenter={ () => dispatch("hovered") } 
 	on:mouseleave={ () => dispatch("unHovered") }
 	on:click={ () => dispatch("rowClicked", { rowKey : row?.rowKey }) }
+	on:dblclick={ () => dispatch("rowDblClicked", { rowKey : row?.rowKey }) } 
+	on:contextmenu|preventDefault={ () => dispatch("contextmenu", { rowKey : row?.rowKey }) }
 	>
 	{#if !columnOptions.hasChildren }
 		<SuperTableCell 
 			rowKey={ row?.rowKey }
 			valueTemplate={ columnOptions?.template }
 			value= { row?.rowValue }
 			editable={ columnOptions?.canEdit }
-			fieldSchema={ columnOptions?.schema ?? {} }
+			fieldSchema={ columnOptions.type && columnOptions.type != "auto" ? {...columnOptions?.schema, type: columnOptions.type } : columnOptions?.schema }
 			submitOn = { $tableOptionStore?.submitOn }
 			{isHovered} 
 			{columnOptions}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTableColumn",
-  "version": "2.0.2-alpha",
+  "version": "2.0.3-alpha",
   "description": "Customizable columns for the SuperTable Component",
   "author": "Michael Poirazi",
   "license": "MIT",
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@crownframework/svelte-error-boundary": "^1.0.3",
+    "lucide-svelte": "^0.293.0",
     "svelte": "^3.59.0",
     "svelte-fsm": "^1.2.0",
     "svelte-legos": "^0.2.1"

diff --git a/schema.json b/schema.json
@@ -22,16 +22,17 @@
       {
         "type": "field",
         "key": "field",
-        "label": "Field",
+        "label": "Column",
         "required": true
       },
       {
         "type": "select",
         "key": "columnType",
-        "label" : "Field Type",
+        "label" : "Column Type",
         "options" : [
           {"label" : "Auto", "value": "auto" },
-          {"label" : "Relationship", "value": "link" }
+          {"label" : "Relationship", "value": "link" },
+          {"label" : "Options", "value": "array" }
         ],
         "defaultValue" : "auto"
       },