upend/ui/src/components/widgets/Table.svelte

<script lang="ts">
  import filesize from "filesize";
  import { format, fromUnixTime } from "date-fns";
  import type { OrderedListing } from "upend/types";
  import Ellipsis from "../Ellipsis.svelte";
  import Address from "../Address.svelte";
  import { createEventDispatcher, getContext } from "svelte";
  import type { AttributeChange } from "../../types/base";
  import { useParams } from "svelte-navigator";
  import type { Writable } from "svelte/store";
  const dispatch = createEventDispatcher();
  const params = useParams();

  export let columns = "attribute, value";
  export let header = true;

  export let attributes: OrderedListing;
  export let editable = false;

  // Display
  $: showEntity = columns.includes("entity");
  $: showAttribute = columns.includes("attribute");
  $: showValue = columns.includes("value");

  // Editing
  let newEntryAttribute = "'";
  let newEntryValue = "";

  async function addEntry() {
    dispatch("change", {
      type: "create",
      attribute: newEntryAttribute,
      value: newEntryValue,
    } as AttributeChange);
    newEntryAttribute = "";
    newEntryValue = "";
  }
  async function removeEntry(addr: string) {
    if (confirm("Are you sure you want to remove the attribute?")) {
      dispatch("change", { type: "delete", addr } as AttributeChange);
    }
  }
  async function updateEntry(addr: string, attribute: string, value: string) {
    dispatch("change", {
      type: "update",
      addr,
      value,
    } as AttributeChange);
    dispatch("change", {
      type: "delete",
      addr,
    } as AttributeChange);
    dispatch("change", {
      type: "create",
      attribute,
      value,
    } as AttributeChange);
  }

  // Sorting
  let sortKeys: { [key: string]: string } = {};
  $: sortedAttributes = attributes
    .concat()
    .sort(([_, aEntry], [__, bEntry]) => {
      if (
        sortKeys[aEntry.value.c] === undefined ||
        sortKeys[bEntry.value.c] === undefined
      ) {
        if (sortKeys[aEntry.value.c] && !sortKeys[bEntry.value.c]) {
          return -1;
        } else if (!sortKeys[aEntry.value.c] && sortKeys[bEntry.value.c]) {
          return 1;
        } else {
          return aEntry.value.c.localeCompare(bEntry.value.c);
        }
      } else {
        return sortKeys[aEntry.value.c].localeCompare(sortKeys[bEntry.value.c]);
      }
    })
    .sort(([_, aEntry], [__, bEntry]) => {
      return aEntry.attribute.localeCompare(bEntry.attribute);
    })
    .sort(([_, aEntry], [__, bEntry]) => {
      if (
        sortKeys[aEntry.entity] === undefined ||
        sortKeys[bEntry.entity] === undefined
      ) {
        if (sortKeys[aEntry.entity] && !sortKeys[bEntry.entity]) {
          return -1;
        } else if (!sortKeys[aEntry.entity] && sortKeys[bEntry.entity]) {
          return 1;
        } else {
          return aEntry.entity.localeCompare(bEntry.entity);
        }
      } else {
        return sortKeys[aEntry.entity].localeCompare(sortKeys[bEntry.entity]);
      }
    });

  // Navigation highlights
  const { index } = getContext("browse") as { index: Writable<number> };
  $: addresses = $params.addresses.split(",");

  // Formatting & Display
  const ATTRIBUTE_LABELS: { [key: string]: string } = {
    FILE_MIME: "MIME type",
    FILE_MTIME: "Last modified",
    FILE_SIZE: "File size",
  };

  const VALUE_FORMATTERS: { [key: string]: (val: string) => string } = {
    FILE_MTIME: (val) => format(fromUnixTime(parseInt(val, 10)), "PPpp"),
    FILE_SIZE: (val) => filesize(parseInt(val, 10), { base: 2 }),
  };

  function formatAttribute(attribute: string) {
    return ATTRIBUTE_LABELS[attribute];
  }

  function formatValue(value: string, attribute: string): string | undefined {
    const handler = VALUE_FORMATTERS[attribute];
    if (handler) {
      return handler(value);
    }
  }

  // Optimizations
  let resolve = [];
</script>

<table>
  <colgroup>
    {#if editable}
      <col class="attr-action-col" />
    {/if}
    {#if showEntity}
      <col class="entity-col" />
    {/if}
    {#if showAttribute}
      <col class="attr-col" />
    {/if}
    {#if showValue}
      <col class="val-col" />
    {/if}
  </colgroup>

  {#if header}
    <tr>
      {#if editable}
        <th />
      {/if}
      {#if showEntity}
        <th>Entity</th>
      {/if}
      {#if showAttribute}
        <th>Attribute</th>
      {/if}
      {#if showValue}
        <th>Value</th>
      {/if}
    </tr>
  {/if}

  {#each sortedAttributes as [id, entry] (id)}
    <tr
      class:left-active={entry.entity == addresses[$index - 1] ||
        entry.value.c == addresses[$index - 1]}
      class:right-active={entry.value.c == addresses[$index + 1] ||
        entry.entity == addresses[$index + 1]}
    >
      {#if editable}
        <td class="attr-action">
          <sl-icon-button name="x-circle" on:click={removeEntry(id)} />
        </td>
      {/if}

      {#if showEntity}
        <td class="entity">
          <Address
            link
            address={entry.entity}
            on:resolved={(event) => {
              sortKeys[entry.entity] = event.detail[0];
            }}
          />
        </td>
      {/if}

      {#if showAttribute}
        <td class:formatted={Boolean(formatAttribute(entry.attribute))}>
          <Ellipsis
            value={formatAttribute(entry.attribute) || entry.attribute}
          />
        </td>
      {/if}

      {#if showValue}
        <td class="value">
          <text-input
            {editable}
            value={entry.value.c}
            on:edit={(val) => updateEntry(id, entry.attribute, val)}
          >
            {#if entry.value.t === "Address"}
              <Address
                link
                address={entry.value.c}
                resolve={Boolean(resolve[id]) || true}
                on:resolved={(event) => {
                  sortKeys[entry.value.c] = event.detail[0];
                }}
              />
            {:else}
              <div
                class:formatted={Boolean(
                  formatValue(entry.value.c, entry.attribute)
                )}
              >
                <Ellipsis
                  value={formatValue(entry.value.c, entry.attribute) ||
                    entry.value.c}
                />
              </div>
            {/if}
          </text-input>
        </td>
      {/if}
    </tr>
  {/each}

  {#if editable}
    <tr>
      <td class="attr-action">
        <sl-icon-button name="plus-circle" on:click={addEntry} />
      </td>
      {#if showAttribute}
        <td>
          <sl-input
            on:sl-input={(ev) => (newEntryAttribute = ev.target.value)}
            size="small"
          />
        </td>
      {/if}
      {#if showValue}
        <td>
          <sl-input
            on:sl-input={(ev) => (newEntryValue = ev.target.value)}
            size="small"
          />
        </td>
      {/if}
    </tr>
  {/if}
</table>

<style lang="scss" scoped>
  table {
    width: 100%;
    table-layout: fixed;

    border-spacing: 0.5em 0;

    tr {
      $active-color: hsl(22, 70%, 40%);
      &.left-active {
        td:first-child {
          background: linear-gradient(
            90deg,
            $active-color 0%,
            transparent 100%
          );
        }
      }

      &.right-active {
        td:last-child {
          background: linear-gradient(
            90deg,
            transparent 0%,
            $active-color 100%
          );
        }
      }
    }

    th {
      text-align: left;
    }

    td {
      font-family: var(--monospace-font);
      line-break: anywhere;

      border-radius: 4px;
      padding: 2px;

      &.attr-action {
        max-width: 1em;
      }

      &.formatted,
      .formatted {
        font-family: var(--default-font);
      }
    }

    .attr-action-col {
      width: 1.5em;
    }

    .attr-col {
      width: 33%;
    }

    sl-icon-button {
      &::part(base) {
        padding: 2px;
      }
    }
  }
</style>