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

<script lang="ts">
  import filesize from "filesize";
  import { format, formatRelative, fromUnixTime } from "date-fns";
  import Ellipsis from "../utils/Ellipsis.svelte";
  import UpObject from "../display/UpObject.svelte";
  import { createEventDispatcher } from "svelte";
  import type { AttributeChange, AttributeUpdate } from "../../types/base";
  import type { UpEntry, UpListing } from "upend";
  import IconButton from "../utils/IconButton.svelte";
  import Selector from "../utils/Selector.svelte";
  import type { IValue } from "upend/types";
  import Editable from "../utils/Editable.svelte";
  import { query } from "../../lib/entity";
  import { Readable, readable } from "svelte/store";
  import { defaultEntitySort, entityValueSort } from "../../util/sort";
  const dispatch = createEventDispatcher();

  export let columns: string;
  export let header = true;

  export let orderByValue = false;
  export let unfixed = false;

  export let entries: UpEntry[];
  export let editable = false;

  // Display
  $: displayColumns = (columns || "attribute, value")
    .split(",")
    .map((c) => c.trim());

  const ENTITY_COL = "entity";
  const ATTR_COL = "attribute";
  const VALUE_COL = "value";

  // Editing
  let newEntryAttribute = "";
  let newEntryValue: IValue | undefined;

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

  // Labelling
  let labelListing: Readable<UpListing> = readable(undefined);
  $: {
    const addresses = [];
    entries
      .flatMap((e) =>
        e.value.t === "Address" ? [e.entity, e.value.c] : [e.entity]
      )
      .forEach((addr) => {
        if (!addresses.includes(addr)) {
          addresses.push(addr);
        }
      });

    const addressesString = addresses.map((addr) => `"${addr}"`).join(" ");

    labelListing = query(`(matches (in ${addressesString}) "LBL" ? )`).result;
  }

  // Sorting
  let sortedAttributes = entries;

  let sortKeys: { [key: string]: string[] } = {};
  function addSortKeys(key: string, vals: string[], resort = true) {
    if (!sortKeys[key]) {
      sortKeys[key] = [];
    }
    let changed = false;
    vals.forEach((val) => {
      if (!sortKeys[key].includes(val)) {
        changed = true;
        sortKeys[key].push(val);
      }
    });

    if (resort && changed) sortAttributes();
  }

  function sortAttributes() {
    sortedAttributes = orderByValue
      ? entityValueSort(entries, sortKeys)
      : defaultEntitySort(entries, sortKeys);
  }

  $: {
    if ($labelListing) {
      entries.forEach((entry) => {
        addSortKeys(
          entry.entity,
          $labelListing.getObject(entry.entity).identify()
        );

        if (entry.value.t === "Address") {
          addSortKeys(
            entry.value.c,
            $labelListing.getObject(String(entry.value.c)).identify(),
            false
          );
        }
      });
      sortAttributes();
    }
  }

  entries.forEach((entry) => {
    addSortKeys(entry.entity, entry.listing.getObject(entry.entity).identify());
    if (entry.value.t === "Address") {
      addSortKeys(
        entry.value.c,
        entry.listing.getObject(String(entry.value.c)).identify(),
        false
      );
    }
  });

  // Formatting & Display
  // todo - grab from db
  const ATTRIBUTE_LABELS: { [key: string]: string } = {
    FILE_MIME: "MIME type",
    FILE_MTIME: "Last modified",
    FILE_SIZE: "File size",
    ADDED: "Added at",
    LAST_VISITED: "Last visited at",
    LBL: "Label",
    IS: "Type",
  };

  const COLUMN_LABELS: { [key: string]: string } = {
    entity: "Entity",
    attribute: "Attribute",
    value: "Value",
  };

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

  function formatValue(value: string | number, attribute: string): string {
    switch (attribute) {
      case "FILE_MTIME":
        return format(fromUnixTime(parseInt(String(value), 10)), "PPpp");
      case "FILE_SIZE":
        return filesize(parseInt(String(value), 10), { base: 2 });
      case "ADDED":
      case "LAST_VISITED":
        return formatRelative(
          fromUnixTime(parseInt(String(value), 10)),
          new Date()
        );
      default:
        return String(value);
    }
  }
</script>

<table class:unfixed>
  <colgroup>
    {#if editable}
      <col class="action-col" />
    {/if}
    {#each displayColumns as column}
      <col class="{column}-col" />
    {/each}
  </colgroup>

  {#if header}
    <tr>
      {#if editable}
        <th />
      {/if}
      {#each displayColumns as column}
        <th>{COLUMN_LABELS[column] || ATTRIBUTE_LABELS[column] || column}</th>
      {/each}
    </tr>
  {/if}

  {#each sortedAttributes as entry (entry.address)}
    <tr>
      {#if editable}
        <td class="attr-action">
          <IconButton
            name="x-circle"
            on:click={() => removeEntry(entry.address)}
          />
        </td>
      {/if}
      {#each displayColumns as column}
        {#if column == ENTITY_COL}
          <td class="entity">
            <UpObject
              link
              labels={$labelListing
                ?.getObject(String(entry.entity))
                ?.identify() || []}
              address={entry.entity}
              on:resolved={(event) => {
                addSortKeys(entry.entity, event.detail);
              }}
            />
          </td>
        {:else if column == ATTR_COL}
          <td class:formatted={Boolean(formatAttribute(entry.attribute))}>
            <Ellipsis
              value={formatAttribute(entry.attribute) || entry.attribute}
              title={entry.attribute}
            />
          </td>
        {:else if column == VALUE_COL}
          <td class="value">
            <Editable
              {editable}
              attribute={entry.attribute}
              value={entry.value}
              on:edit={(ev) =>
                updateEntry(entry.address, entry.attribute, ev.detail)}
            >
              {#if entry.value.t === "Address"}
                <UpObject
                  link
                  address={String(entry.value.c)}
                  labels={$labelListing
                    ?.getObject(String(entry.value.c))
                    ?.identify() || []}
                  on:resolved={(event) => {
                    addSortKeys(String(entry.value.c), event.detail);
                  }}
                />
              {:else}
                <div
                  class:formatted={Boolean(
                    formatValue(entry.value.c, entry.attribute)
                  )}
                >
                  <Ellipsis
                    value={formatValue(entry.value.c, entry.attribute) ||
                      String(entry.value.c)}
                  />
                </div>
              {/if}
            </Editable>
          </td>
        {:else}
          <td>?</td>
        {/if}
      {/each}
    </tr>
  {/each}

  {#if editable}
    <tr class="add-row">
      <td class="attr-action">
        <IconButton name="plus-circle" on:click={addEntry} />
      </td>
      {#if displayColumns.includes(ATTR_COL)}
        <td>
          <Selector type="attribute" bind:attribute={newEntryAttribute} />
        </td>
      {/if}
      {#if displayColumns.includes(VALUE_COL)}
        <td>
          <Selector type="value" bind:value={newEntryValue} />
        </td>
      {/if}
    </tr>
  {/if}
</table>

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

    &.unfixed {
      table-layout: auto;
    }

    border-spacing: 0.5em 0;

    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);
      }
    }

    .action-col {
      width: 1.5em;
    }

    .attribute-col {
      width: 33%;
    }
  }
</style>