@poirazis/supercomponents-shared 0.0.1

package/src/lib/SuperTableCells/CellJSON.svelte

@@ -0,0 +1,297 @@
+<script>
+  import { createEventDispatcher, getContext, onMount } from "svelte";
+  import fsm from "svelte-fsm";
+  const dispatch = createEventDispatcher();
+  const { processStringSync } = getContext("sdk");
+  const context = getContext("context");
+
+  export let value = null;
+  export let formattedValue;
+  export let cellOptions = {
+    role: "formInput",
+    initialState: "Editing",
+    debounce: 250,
+    multiline: true,
+  };
+  export let autofocus;
+
+  let timer;
+  let originalValue;
+  let localValue = null;
+  let isValidJson = true;
+
+  let editor;
+  let lastEdit;
+
+  // Validate JSON string or object
+  const validateJson = (input) => {
+    if (input === null || input === undefined || input === "") return true; // Allow empty/null/undefined
+    try {
+      if (typeof input === "string") {
+        JSON.parse(input);
+      } else {
+        // If it's an object, ensure it can be stringified and parsed
+        JSON.parse(JSON.stringify(input));
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  // Convert value to JSON string for internal use
+  $: normalizedValue =
+    value && validateJson(value) && typeof value !== "string"
+      ? JSON.stringify(value)
+      : value;
+
+  // Format JSON for display
+  $: displayValue = (() => {
+    if (!normalizedValue || normalizedValue === "") return "";
+    if (!validateJson(normalizedValue)) return "Invalid JSON";
+    return cellOptions.multiline
+      ? JSON.stringify(JSON.parse(normalizedValue), null, 2)
+      : JSON.stringify(JSON.parse(normalizedValue));
+  })();
+
+  export let cellState = fsm(cellOptions?.initialState ?? "View", {
+    "*": {
+      goTo(state) {
+        return state;
+      },
+      reset() {
+        localValue = normalizedValue;
+        lastEdit = undefined;
+        isValidJson = true;
+      },
+    },
+    Loading: {},
+    View: {
+      _enter() {
+        localValue = normalizedValue;
+        isValidJson = validateJson(value);
+      },
+      focus() {
+        if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
+        else return "Flashing";
+      },
+    },
+    Flashing: {
+      _enter() {
+        this.returnToView.debounce(230);
+      },
+      returnToView() {
+        return "View";
+      },
+    },
+    Disabled: {},
+    Focused: {},
+    Error: {
+      _enter() {
+        this.check.debounce(230);
+      },
+      check() {
+        return "View";
+      },
+    },
+    Readonly: {
+      _enter() {
+        this.check.debounce(230);
+      },
+      check() {
+        return "View";
+      },
+    },
+    Editing: {
+      _enter() {
+        originalValue = normalizedValue;
+        localValue = normalizedValue;
+        isValidJson = validateJson(value);
+        dispatch("enteredit");
+      },
+      _exit() {
+        originalValue = undefined;
+        dispatch("exitedit");
+        dispatch("focusout");
+      },
+      clear() {
+        if (cellOptions.debounce) dispatch("change", null);
+        value = null;
+        localValue = null;
+        isValidJson = true;
+      },
+      focusout(e) {
+        this.submit();
+      },
+      submit() {
+        if (isDirty && isValidJson) {
+          dispatch("change", localValue);
+        }
+        return "View";
+      },
+      cancel() {
+        value = originalValue;
+        dispatch("cancel");
+        return "View";
+      },
+      handleKeyboard(e) {
+        if (e.key == "Enter" && !cellOptions.multiline) this.submit();
+        if (e.key == "Escape") this.cancel();
+      },
+    },
+  });
+
+  $: cellState.reset(normalizedValue);
+  $: inEdit = $cellState == "Editing";
+  $: isDirty = lastEdit && originalValue !== localValue;
+  $: formattedValue =
+    !formattedValue && cellOptions?.template
+      ? processStringSync(cellOptions.template, { value: normalizedValue })
+      : formattedValue;
+
+  $: placeholder =
+    cellOptions.readonly || cellOptions.disabled
+      ? ""
+      : cellOptions.placeholder || "";
+
+  const debounce = (e) => {
+    const newValue = e.target.value;
+    isValidJson = validateJson(newValue);
+    localValue = newValue;
+    lastEdit = new Date();
+    if (cellOptions?.debounce && isValidJson) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        dispatch("change", localValue);
+      }, cellOptions.debounce ?? 0);
+    }
+  };
+
+  const focus = (node) => {
+    node?.focus();
+  };
+
+  onMount(() => {
+    if (autofocus)
+      setTimeout(() => {
+        cellState.focus();
+      }, 50);
+  });
+</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 multirow"
+  class:inEdit
+  class:isDirty={isDirty && cellOptions.showDirty}
+  class:focused={inEdit}
+  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 || !isValidJson}
+  class:multirow={cellOptions.multiline}
+  style:color={cellOptions.color}
+  style:background={cellOptions.background}
+  style:font-weight={cellOptions.fontWeight}
+>
+  {#if cellOptions.icon && !cellOptions.multiline}
+    <i class={cellOptions.icon + " icon"}></i>
+  {/if}
+
+  {#if inEdit}
+    {#if cellOptions.multiline}
+      <textarea
+        bind:this={editor}
+        tabindex="0"
+        class="editor"
+        class:with-icon={cellOptions.icon}
+        class:placeholder={!value && !formattedValue && !localValue}
+        value={displayValue}
+        placeholder={cellOptions?.placeholder ?? ""}
+        style:text-align={cellOptions.align == "center"
+          ? "center"
+          : cellOptions.align == "flex-end"
+            ? "right"
+            : "left"}
+        style:padding-right={cellOptions.align != "flex-start"
+          ? "2rem"
+          : "0.75rem"}
+        style:white-space="pre-wrap"
+        style:overflow-wrap="break-word"
+        style:min-height="8rem"
+        style:overflow-y="auto"
+        style:resize="vertical"
+        on:input={debounce}
+        on:focusout={cellState.focusout}
+        on:keydown={cellState.handleKeyboard}
+        use:focus
+      />
+    {:else}
+      <input
+        bind:this={editor}
+        tabindex="0"
+        class="editor"
+        class:with-icon={cellOptions.icon}
+        class:placeholder={!value && !formattedValue && !localValue}
+        value={localValue ?? ""}
+        placeholder={cellOptions?.placeholder ?? ""}
+        style:text-align={cellOptions.align == "center"
+          ? "center"
+          : cellOptions.align == "flex-end"
+            ? "right"
+            : "left"}
+        style:padding-right={cellOptions.align != "flex-start"
+          ? "2rem"
+          : "0.75rem"}
+        on:input={debounce}
+        on:focusout={cellState.focusout}
+        on:keydown={cellState.handleKeyboard}
+        use:focus
+      />
+    {/if}
+    {#if localValue && cellOptions?.clearIcon !== false}
+      <i
+        class="ri-close-line clearIcon"
+        on:mousedown|self|preventDefault={cellState.clear}
+      />
+    {/if}
+  {:else}
+    <div
+      class="value"
+      class:multiline={cellOptions.multiline}
+      tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
+      class:with-icon={cellOptions.icon}
+      class:placeholder={!value}
+      style:justify-content={cellOptions.align}
+      on:focusin={cellState.focus}
+    >
+      <span>
+        {displayValue}
+      </span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .superCell .value.multiline {
+    white-space: pre-wrap !important;
+    text-overflow: unset !important;
+    overflow: auto !important;
+    font-family: monospace;
+  }
+  .superCell .value.multiline span {
+    white-space: pre-wrap !important;
+    text-overflow: unset !important;
+    overflow: visible !important;
+    height: 8rem;
+    width: 100%;
+  }
+  .superCell .editor {
+    width: 100%;
+    box-sizing: border-box;
+  }
+</style>

package/src/lib/SuperTableCells/CellLink.svelte

@@ -0,0 +1,274 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte";
+  import fsm from "svelte-fsm";
+  import SuperPopover from "../SuperPopover/SuperPopover.svelte";
+  import CellLinkPickerSelect from "./CellLinkPickerSelect.svelte";
+  import CellLinkPickerTree from "./CellLinkPickerTree.svelte";
+  const dispatch = createEventDispatcher();
+  const { API } = getContext("sdk");
+
+  export let value;
+  export let fieldSchema;
+  export let cellOptions;
+  export let simpleView = true;
+  export let filter = [];
+  export let limit = 100;
+
+  // In case of a self referencing relationship, the current row cannot be the parent of itself
+  export let ownId;
+
+  let originalValue = JSON.stringify(value);
+  let anchor;
+  let popup;
+  let search;
+  let pickerApi;
+
+  export let cellState = fsm(cellOptions.initialState ?? "View", {
+    "*": {
+      goTo(state) {
+        return state;
+      },
+    },
+    View: {
+      _enter() {},
+      focus() {
+        if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
+      },
+    },
+    Hovered: {
+      cancel: () => {
+        return "View";
+      },
+    },
+    Focused: {
+      unfocus() {
+        return "View";
+      },
+    },
+    Error: { check: "View" },
+    Editing: {
+      _enter() {
+        originalValue = JSON.stringify(localValue);
+        editorState.open();
+        dispatch("enteredit");
+      },
+      _exit() {
+        editorState.close();
+        dispatch("exitedit");
+      },
+      focusout(e) {
+        if (popup?.contains(e?.relatedTarget)) return;
+        this.submit();
+      },
+
+      clear() {
+        localValue = [];
+      },
+      submit() {
+        if (isDirty)
+          dispatch(
+            "change",
+            returnSingle && localValue ? localValue[0] : localValue
+          );
+
+        return "View";
+      },
+      cancel() {
+        return "View";
+      },
+    },
+  });
+
+  const editorState = fsm("Closed", {
+    Open: {
+      close() {
+        return "Closed";
+      },
+      toggle() {
+        return "Closed";
+      },
+    },
+    Closed: {
+      open() {
+        return "Open";
+      },
+      toggle() {
+        return "Open";
+      },
+    },
+  });
+
+  $: multi = !fieldSchema?.type?.includes("_single");
+  $: isUser = fieldSchema?.type?.includes("bb_reference");
+  $: pills = cellOptions.relViewMode == "pills" && !isUser;
+  $: valueIcon =
+    fieldSchema.type == "link" ? "ri-edit-box-line" : "ri-user-line";
+  $: links = cellOptions.relViewMode == "links" && !isUser;
+
+  $: localValue = enrichValue(value);
+  $: inEdit = $cellState == "Editing";
+  $: isDirty = inEdit && originalValue != JSON.stringify(localValue);
+  $: simpleView = cellOptions.relViewMode == "text";
+  $: inline = cellOptions.role == "inlineInput";
+  $: multirow =
+    cellOptions.controlType == "expanded" && (localValue?.length > 1 || inEdit);
+  $: singleSelect =
+    fieldSchema?.relationshipType == "one-to-many" ||
+    fieldSchema?.relationshipType == "self" ||
+    !multi;
+
+  $: returnSingle = isUser && !multi;
+  $: placeholder =
+    cellOptions.disabled || cellOptions.readonly
+      ? ""
+      : cellOptions.placeholder || "";
+
+  const handleKeyboard = (e) => {
+    if (e.key == "Escape" && $editorState == "Open") {
+      editorState.close();
+    } else if (e.key == "Escape") {
+      cellState.cancel();
+    } else if (e.keyCode == 32 && $cellState == "Editing") {
+      editorState.toggle();
+    } else if (e.key == "Tab" && $editorState == "Open") {
+      cellState.focusout();
+    } else if ($editorState == "Open") {
+      pickerApi?.focus();
+    }
+  };
+
+  const handleChange = (e) => {
+    localValue = e.detail;
+
+    if (singleSelect) {
+      editorState.close();
+    }
+  };
+
+  const enrichValue = (x) => {
+    if (fieldSchema.relationshipType == "self" && x) {
+      API.fetchRow(fieldSchema.tableId, x).then((row) => {
+        localValue = [
+          { _id: row.id, primaryDisplay: row.name ?? Object.values(row)[0] },
+        ];
+      });
+      return [];
+    } else if (multi) {
+      return value ? [...value] : [];
+    } else {
+      return value ? [value] : [];
+    }
+  };
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="superCell"
+  tabindex={cellOptions?.disabled ? "-1" : "0"}
+  bind:this={anchor}
+  class:isDirty={isDirty && cellOptions.showDirty}
+  class:inEdit
+  class:inline
+  class:multirow
+  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}
+  on:mousedown={editorState.toggle}
+  on:focusin={cellState.focus}
+  on:keydown|self={handleKeyboard}
+  on:focusout={cellState.focusout}
+>
+  {#if cellOptions?.icon}
+    <i class={cellOptions.icon + " icon"}></i>
+  {/if}
+
+  <div
+    class="value"
+    class:with-icon={cellOptions?.icon}
+    class:placeholder={localValue?.length < 1}
+  >
+    {#if localValue?.length < 1 && placeholder}
+      <span> {placeholder} </span>
+    {:else}
+      <div class="items" class:pills class:links class:isUser>
+        {#each localValue as val, idx}
+          {#if idx < 5}
+            <div
+              class="item"
+              on:click={links
+                ? () => {
+                    dispatch("linkClick", val);
+                  }
+                : null}
+            >
+              <i class={valueIcon} />
+              <span>{val.primaryDisplay}</span>
+            </div>
+          {/if}
+        {/each}
+
+        {#if localValue.length > 5}
+          <span class="item-count">
+            {localValue.length}
+          </span>
+        {/if}
+      </div>
+    {/if}
+
+    {#if inEdit && localValue?.length}
+      <i
+        class="ri-close-line clearIcon"
+        style:right={"28px"}
+        on:mousedown|preventDefault={cellState.clear}
+      ></i>
+    {/if}
+    {#if !cellOptions.readonly && (cellOptions.role == "formInput" || inEdit)}
+      <i class="ri-arrow-down-s-line controlIcon"></i>
+    {/if}
+  </div>
+</div>
+
+{#if inEdit}
+  <SuperPopover
+    {anchor}
+    useAnchorWidth
+    bind:popup
+    open={$editorState == "Open"}
+  >
+    {#if fieldSchema.recursiveTable || ownId}
+      <CellLinkPickerTree
+        {fieldSchema}
+        filter={filter ?? []}
+        {search}
+        {limit}
+        joinColumn={cellOptions.joinColumn}
+        value={localValue}
+        {ownId}
+        multi={fieldSchema.relationshipType == "many-to-many" ||
+          fieldSchema.relationshipType == "many-to-one"}
+        on:change={handleChange}
+      />
+    {:else}
+      <CellLinkPickerSelect
+        bind:api={pickerApi}
+        {fieldSchema}
+        filter={filter ?? []}
+        {singleSelect}
+        value={localValue}
+        {search}
+        wide={cellOptions.wide && !singleSelect}
+        on:change={handleChange}
+        on:close={() => {
+          cellState.focusout();
+        }}
+      />
+    {/if}
+  </SuperPopover>
+{/if}