upend/webui/src/components/InspectGroups.svelte

<script lang="ts">
  import UpObjectDisplay from "./display/UpObject.svelte";
  import Selector from "./utils/Selector.svelte";
  import IconButton from "./utils/IconButton.svelte";
  import type { IValue } from "@upnd/upend/types";
  import api from "../lib/api";
  import { ATTR_IN } from "@upnd/upend/constants";
  import { createEventDispatcher } from "svelte";
  import { i18n } from "../i18n";
  import type { UpObject } from "@upnd/upend";
  import type { Readable } from "svelte/store";
  import LabelBorder from "./utils/LabelBorder.svelte";
  const dispatch = createEventDispatcher();

  export let entity: Readable<UpObject>;

  let adding = false;
  let groupSelector: Selector;

  $: if (adding && groupSelector) groupSelector.focus();

  $: groups = ($entity?.attr[ATTR_IN] || []).map(
    (e) => [e.value.c as string, e.address] as [string, string],
  );

  let groupToAdd: IValue | undefined;
  async function addGroup() {
    if (!groupToAdd) {
      return;
    }
    await api.putEntry([
      {
        entity: $entity.address,
        attribute: ATTR_IN,
        value: {
          t: "Address",
          c: String(groupToAdd.c),
        },
      },
    ]);
    dispatch("change");
    groupToAdd = undefined;
  }

  async function removeGroup(groupAddress: string) {
    if (confirm($i18n.t("Are you sure you want to remove this group?"))) {
      await api.deleteEntry(groupAddress);
      dispatch("change");
    }
  }
</script>

<LabelBorder hide={groups.length === 0}>
  <span slot="header">{$i18n.t("Groups")}</span>

  {#if adding}
    <div class="selector">
      <Selector
        bind:this={groupSelector}
        type="value"
        valueTypes={["Address"]}
        bind:value={groupToAdd}
        on:input={addGroup}
        on:focus={(ev) => {
          if (!ev.detail) adding = false;
        }}
        placeholder={$i18n.t("Choose an entity...")}
      />
    </div>
  {/if}

  <div class="body">
    <div class="group-list">
      {#each groups as [groupAddress, groupEntryAddress]}
        <div
          class="group"
          on:mouseenter={() => dispatch("highlighted", groupAddress)}
          on:mouseleave={() => dispatch("highlighted", undefined)}
        >
          <UpObjectDisplay address={groupAddress} link />
          <IconButton
            subdued
            name="x-circle"
            on:click={() => removeGroup(groupEntryAddress)}
          />
        </div>
      {:else}
        <div class="no-groups">
          {$i18n.t("Object is not in any groups.")}
        </div>
      {/each}
    </div>
    {#if !adding}
      <div class="add-button">
        <IconButton
          outline
          small
          name="folder-plus"
          on:click={() => (adding = true)}
        />
      </div>
    {/if}
  </div>
</LabelBorder>

<style lang="scss">
  .group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.2rem;
    align-items: center;
  }

  .group {
    display: inline-flex;
    align-items: center;
  }

  .body {
    display: flex;
    align-items: start;

    .group-list {
      flex-grow: 1;
    }
  }

  .selector {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .no-groups {
    opacity: 0.66;
  }
</style>