upend/webui/src/components/AttributeView.svelte

<script lang="ts">
  import UpLink from "./display/UpLink.svelte";
  import type { Component, UpType, Widget } from "../lib/types";
  import EntryList from "./widgets/EntryList.svelte";
  import type { UpEntry } from "upend";
  import Icon from "./utils/Icon.svelte";
  import IconButton from "./utils/IconButton.svelte";
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
  import { i18n } from "../i18n";

  export let entries: UpEntry[];
  export let type: UpType | undefined = undefined;
  export let widgets: Widget[] | undefined = undefined;
  export let title: string | undefined = undefined;
  export let editable = false;
  export let reverse = false;
  export let initialWidget: string | undefined = undefined;

  let currentWidget: string | undefined;

  function switchWidget(widget: string) {
    currentWidget = widget;
    dispatch("widgetSwitched", currentWidget);
  }

  let availableWidgets: Widget[] = [];
  $: {
    availableWidgets = [
      {
        name: "entrylist",
        icon: "table",
        components: [
          {
            component: EntryList,
          },
        ],
      },
    ];

    if (type?.widgetInfo.length > 0) {
      availableWidgets = [...type.widgetInfo, ...availableWidgets];
    }

    if (widgets?.length) {
      availableWidgets = [...widgets, ...availableWidgets];
    }

    if (availableWidgets.map((w) => w.name).includes(initialWidget)) {
      currentWidget = initialWidget;
    } else {
      currentWidget = availableWidgets[0].name;
    }
  }

  let components: Component[] = [];
  $: {
    components = availableWidgets.find(
      (w) => w.name === currentWidget
    ).components;
  }
</script>

<section class="attribute-view labelborder">
  <header>
    <h3>
      {#if !title && type?.address}
        <UpLink to={{ entity: type.address }}>
          {#if type.icon}
            <div class="icon">
              <Icon name={type.icon} />
            </div>
          {/if}
          {#if type.name != "HIER"}
            {type.label || type.name || "???"}
          {:else}
            {$i18n.t("Members")}
          {/if}
        </UpLink>
      {:else}
        {title || ""}
      {/if}
    </h3>

    {#if currentWidget && (availableWidgets.length > 1 || editable)}
      <div class="views">
        {#each availableWidgets as widget (widget.name)}
          <IconButton
            name={widget.icon || "question-diamond"}
            active={widget.name === currentWidget}
            --active-color="var(--foreground)"
            on:click={() => switchWidget(widget.name)}
          />
        {/each}
      </div>
    {/if}
  </header>
  <div class="content">
    {#if !reverse}
      {#each components as component}
        <svelte:component
          this={component.component}
          {...(typeof component.props === "function"
            ? component.props(entries)
            : component.props) || {}}
          {entries}
          {editable}
          on:change
        />
      {/each}
    {:else}
      <!-- shut up svelte check -->
      <svelte:component
        this={EntryList}
        columns="entity, attribute"
        {entries}
      />
    {/if}
  </div>
</section>

<style scoped lang="scss">
  @use "./util";

  .icon {
    display: inline-block;
    font-size: 1.25em;
    margin-top: -0.3em;
    position: relative;
    bottom: -2px;
  }

  .views {
    display: flex;
    right: 1ex;
    font-size: 18px;
  }
</style>