@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperTableCells/CellLinkPickerTable.svelte

@@ -0,0 +1,91 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  const { fetchData, API } = getContext("sdk");
+
+  export let value = [];
+  export let datasource;
+  export let sortColumn;
+  export let sortOrder;
+  export let filter;
+  export let searchTerm;
+  export let pickerColumns;
+  export let searchColumns = [];
+  export let multi;
+
+  export let picker;
+
+  $: fetch = fetchData({
+    API,
+    datasource,
+    options: {
+      paginate: false,
+      limit: 1,
+    },
+  });
+
+  $: primaryDisplay = $fetch?.definition?.primaryDisplay || "_id";
+
+  $: tableOptions = {
+    idColumn: "_id",
+    superColumnsPos: "first",
+    columnSizing: "flexible",
+    columnMaxWidth: "auto",
+    debounce: 500,
+    visibleRowCount: 7,
+    rowSelectMode: multi ? "multi" : "single",
+    selectionColumn: false,
+    dividers: "horizontal",
+    dividersColor: null,
+    baseFontSize: 12,
+    rowHeight: 32,
+    showFooter: false,
+    showHeader: true,
+    canFilter: true,
+    canSort: true,
+    canEdit: false,
+    canDelete: false,
+    canInsert: false,
+    canResize: false,
+    datasource,
+    filter: {},
+    sortColumn: null,
+    sortOrder: null,
+    limit: 10,
+    paginate: false,
+    autoRefresh: false,
+    autoRefreshRate: 10,
+    columnList: pickerColumns,
+    size: "S",
+    cellPadding: "0.5rem",
+    useOptionColors: true,
+    optionsViewMode: "text",
+    relViewMode: "text",
+    onRowSelect: (arr) => {
+      var val = arr.selectedRows.map((x) => {
+        return { _id: x["_id"], primaryDisplay: x[primaryDisplay] };
+      });
+      dispatch("change", val);
+    },
+  };
+
+  //  <SuperTable on:change {...tableOptions}></SuperTable>
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div bind:this={picker} class="control"></div>
+
+<style>
+  .control {
+    flex: auto;
+    flex-direction: column;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    overflow-x: hidden;
+    padding: 0.25rem;
+  }
+</style>

package/src/lib/SuperTableCells/CellLinkPickerTree.svelte

@@ -0,0 +1,226 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte";
+  import { writable } from "svelte/store";
+  import SuperTree from "../SuperTree/SuperTree.svelte";
+  import CellString from "./CellString.svelte";
+  const { API, fetchData, notificationStore } = getContext("sdk");
+
+  const dispatch = createEventDispatcher();
+
+  export let value = [];
+  export let ownId;
+
+  export let fieldSchema;
+  export let joinColumn;
+
+  export let sortColumn;
+  export let sortOrder;
+  export let filter = [];
+  export let limit = 250;
+  export let multi = false;
+  export let quiet;
+  export let search;
+
+  let selectedNodes = new writable([]);
+  let maxNodeSelection = 10;
+  let name = joinColumn || fieldSchema.name;
+  let treeLoaded = false;
+  let appliedFilter = [];
+
+  let tree = {
+    root: true,
+    id: "root",
+    label: "Super Tree",
+    children: [],
+  };
+
+  $: fetch = fetchData({
+    API,
+    datasource: {
+      type: "table",
+      tableId: fieldSchema.tableId,
+    },
+    options: {
+      sortOrder,
+      sortColumn,
+      filter,
+      limit,
+    },
+  });
+
+  $: primaryDisplay = $fetch?.definition?.primaryDisplay;
+  $: idColumn = $fetch?.definition?.primary?.[0] ?? "_id";
+  $: buildRootTree($fetch.rows);
+  $: setSelections(value);
+
+  // Recursion
+  const getChildren = (rows, parent) => {
+    let children = [];
+    rows?.forEach((row) => {
+      if (row[name] == parent[idColumn]) {
+        children.push({
+          id: row[idColumn],
+          disabled: row[idColumn] == ownId,
+          disableChildren: true,
+          label: row[$fetch.definition.primaryDisplay],
+          children: getChildren(rows, row),
+        });
+      }
+    });
+    return children;
+  };
+
+  // Build Tree Structure
+  const buildRootTree = (rows) => {
+    treeLoaded = false;
+    tree.children = [];
+    if (rows?.length) {
+      rows?.forEach((row) => {
+        if (row[name]) {
+          // Skip if it has a parent set
+        } else {
+          tree.children.push({
+            id: row[idColumn],
+            disabled: row[idColumn] == ownId,
+            disableChildren: true,
+            label: row[$fetch.definition.primaryDisplay],
+            children: getChildren(rows, row),
+          });
+        }
+      });
+      tree = tree;
+      treeLoaded = true;
+    }
+  };
+
+  // Handle Node Selection
+  const handleNodeSelect = (e) => {
+    if (e.detail.id == ownId) return;
+
+    if (multi) {
+      let index = $selectedNodes.findIndex((x) => x.id == e.detail.id);
+      if (index > -1) {
+        $selectedNodes.splice(index, 1);
+        $selectedNodes = $selectedNodes;
+      } else if ($selectedNodes.length < maxNodeSelection) {
+        $selectedNodes = [...$selectedNodes, e.detail];
+      } else if (maxNodeSelection == 1) {
+        $selectedNodes = [e.detail];
+      } else {
+        notificationStore.actions.warning(
+          "Cannot select more than " + maxNodeSelection + " items"
+        );
+      }
+    } else {
+      $selectedNodes =
+        $selectedNodes[0]?.id !== e.detail.id
+          ? [{ id: e.detail.id, label: e.detail.label }]
+          : [];
+    }
+
+    if (cellOptions.debounce)
+      dispatch(
+        "change",
+        $selectedNodes.map((x) => {
+          return { _id: x.id, primaryDisplay: x.label };
+        })
+      );
+  };
+
+  const setSelections = () => {
+    if (value && value.length) {
+      $selectedNodes = [];
+      $selectedNodes = value.map((x) => {
+        return { id: x["_id"], label: x["primaryDisplay"] };
+      });
+    }
+  };
+
+  const handleSearch = (e) => {
+    if (e.detail && e.detail != "") {
+      appliedFilter = [
+        ...filter,
+        {
+          field: primaryDisplay,
+          type: "string",
+          operator: "fuzzy",
+          value: e.detail,
+          valueType: "Value",
+        },
+      ];
+    } else {
+      appliedFilter = filter ?? [];
+    }
+
+    fetch?.update({
+      filter: appliedFilter,
+    });
+  };
+
+  let cellOptions = {
+    icon: "ri-search-line",
+    initialState: "Editing",
+    role: "inlineInput",
+    debounce: 50,
+  };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="control">
+  {#if search}
+    <div class="search">
+      <CellString
+        on:change={handleSearch}
+        autofocus
+        {cellOptions}
+        on:exitedit={() => dispatch("focusout", {})}
+      />
+    </div>
+  {/if}
+  <ul
+    class="spectrum-TreeView"
+    style="margin: unset;"
+    class:spectrum-TreeView--quiet={quiet}
+  >
+    {#if $fetch.loaded && $fetch.rows?.length}
+      {#each tree?.children as node, idx (idx)}
+        <SuperTree
+          tree={node}
+          nodeSelection
+          {selectedNodes}
+          on:nodeSelect={handleNodeSelect}
+        />
+      {/each}
+    {:else if $fetch.loading}
+      <li class="spectrum-TreeView-item" class:is-open={true}>
+        <div class="spectrum-TreeView-itemLink">Loading</div>
+      </li>
+    {:else}
+      <li class="spectrum-TreeView-item" class:is-open={true}>
+        <div class="spectrum-TreeView-itemLink">No Matches</div>
+      </li>
+    {/if}
+  </ul>
+</div>
+
+<style>
+  .control {
+    flex: auto;
+    flex-direction: column;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    overflow-x: hidden;
+    gap: 0.25rem;
+    min-height: 260px;
+    max-height: 260px;
+  }
+
+  .search {
+    height: 2rem;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    display: flex;
+    align-items: stretch;
+  }
+</style>

package/src/lib/SuperTableCells/CellNumber.svelte

@@ -0,0 +1,179 @@
+<script>
+  import { createEventDispatcher, getContext, onMount } from "svelte";
+  import fsm from "svelte-fsm";
+
+  const { processStringSync } = getContext("sdk");
+  const context = getContext("context");
+  const dispatch = createEventDispatcher();
+
+  export let value;
+  export let formattedValue;
+  export let cellOptions;
+  export let autofocus;
+
+  let originalValue = value;
+  let inEdit;
+  let localValue = value;
+  let editor;
+
+  $: inEdit = $cellState == "Editing";
+  $: inline = cellOptions.role == "inlineInput";
+  $: isDirty = inEdit && originalValue != localValue;
+  $: formattedValue = cellOptions.template
+    ? processStringSync(cellOptions.template, {
+        ...$context,
+        value: localValue,
+      })
+    : undefined;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
+
+  export let cellState = fsm(cellOptions.initialState ?? "View", {
+    "*": {
+      goTo(state) {
+        return state;
+      },
+    },
+    View: {
+      focus() {
+        if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
+      },
+    },
+    Hovered: {
+      cancel: () => {
+        return "View";
+      },
+    },
+    Focused: {
+      unfocus() {
+        return "View";
+      },
+    },
+    Error: { check: "View" },
+    Editing: {
+      _enter() {
+        originalValue = localValue;
+        editor?.focus();
+        dispatch("enteredit");
+      },
+      _exit() {
+        dispatch("exitedit");
+      },
+      focusout() {
+        if (isDirty && !cellOptions.debounce) dispatch("change", localValue);
+
+        dispatch("focusout");
+        return "View";
+      },
+      clear() {
+        if (cellOptions.debounce) dispatch("change", null);
+        localValue = null;
+      },
+      cancel() {
+        value = originalValue;
+      },
+    },
+  });
+
+  let timer;
+  const debounce = (e) => {
+    // Abort Invalid Keys
+    if (
+      (e.key.length === 1 && e.key !== "." && isNaN(e.key) && !e.ctrlKey) ||
+      e.keyCode == 32 ||
+      (e.key === "." && e.target.value.toString().indexOf(".") > -1)
+    ) {
+      e.preventDefault();
+      return;
+    }
+    if (cellOptions.debounce) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        dispatch("change", localValue);
+      }, cellOptions.debounce ?? 0);
+    }
+  };
+
+  function focus(element) {
+    setTimeout(element?.focus(), 10);
+  }
+
+  onMount(() => {
+    if (autofocus)
+      setTimeout(() => {
+        cellState.focus();
+        editor?.focus();
+      }, 30);
+  });
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="superCell"
+  class:error={cellOptions.error}
+  class:readonly={cellOptions.readonly}
+  class:disabled={cellOptions.disabled}
+  class:inEdit
+  class:isDirty
+  class:inline
+  class:tableCell={cellOptions?.role == "tableCell"}
+  class:formInput={cellOptions?.role == "formInput"}
+  style:color={cellOptions?.color}
+  style:background={inEdit
+    ? "var(--spectrum-global-color-gray-50)"
+    : cellOptions?.background}
+  style:font-weight={cellOptions?.fontWeight}
+  tabIndex={cellOptions.disabled ? "-1" : 0}
+  on:focusin={cellState.focus}
+>
+  {#if cellOptions?.icon}
+    <i class={cellOptions.icon + " icon"}></i>
+  {/if}
+
+  {#if $cellState == "Editing"}
+    <input
+      class="editor"
+      class:placeholder={!localValue}
+      type="text"
+      style:padding-right={"32px"}
+      style:text-align={cellOptions.align == "flex-start"
+        ? "left"
+        : cellOptions.align == "center"
+          ? "center"
+          : "right "}
+      placeholder={cellOptions?.placeholder}
+      bind:value={localValue}
+      on:keydown={(e) => debounce(e)}
+      on:focusout={cellState.focusout}
+      use:focus
+    />
+    <i class="ri-close-line clearIcon" on:mousedown|self={cellState.clear}> </i>
+  {:else}
+    <div
+      class="value"
+      style:padding-right={"12px"}
+      class:placeholder={!value && !formattedValue}
+      style:justify-content={cellOptions.align}
+    >
+      {formattedValue || value || placeholder}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .value {
+    flex: auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    box-sizing: border-box;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>

package/src/lib/SuperTableCells/CellNumberSimple.svelte

@@ -0,0 +1,56 @@
+<script>
+  import { getContext } from "svelte";
+  const { processStringSync } = getContext("sdk");
+
+  export let value = null;
+  export let formattedValue;
+  export let cellOptions = {
+    role: "formInput",
+  };
+
+  $: formattedValue =
+    !formattedValue && cellOptions?.template
+      ? processStringSync(cellOptions.template, {
+          value,
+        })
+      : formattedValue;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="superCell"
+  class:inline={cellOptions.role == "inlineInput"}
+  class:tableCell={cellOptions.role == "tableCell"}
+  class:formInput={cellOptions.role == "formInput"}
+  class:disabled={cellOptions.disabled}
+  class:readonly={cellOptions.readonly}
+  class:error={cellOptions.error}
+  style:color={cellOptions.color}
+  style:background={cellOptions.background}
+  style:font-weight={cellOptions.fontWeight}
+>
+  {#if cellOptions.icon}
+    <i class="{cellOptions.icon} icon"></i>
+  {/if}
+
+  <div
+    class="value"
+    class:with-icon={cellOptions.icon}
+    class:placeholder={!value && !formattedValue}
+    style:justify-content={cellOptions.align}
+    style:text-align={cellOptions.align == "flex-start"
+      ? "left"
+      : cellOptions.align == "center"
+        ? "center"
+        : "right"}
+  >
+    {formattedValue || value || placeholder}
+  </div>
+</div>