stufflog2/svelte-ui/src/components/GroupEntry.svelte

<script lang="ts">
  import type { GroupResult } from "../models/group";
  import type { ModalData } from "../stores/modal";
  import ItemEntry from "./ItemEntry.svelte";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";
  import ParentEntry from "./ParentEntry.svelte";

  export let group: GroupResult = null;
  export let showAllOptions: boolean = false;

  let mdItemAdd: ModalData;
  let mdGroupEdit: ModalData;
  let mdGroupDelete: ModalData;  

  $: mdItemAdd = {name:"item.add", group};
  $: mdGroupEdit = {name:"group.edit", group};
  $: mdGroupDelete = {name:"group.delete", group};
</script>

<ParentEntry 
  full={showAllOptions} 
  entry={group} 
>
  {#if showAllOptions}
    <OptionRow>
      <Option open={mdItemAdd}>Add Item</Option>
      <Option open={mdGroupEdit}>Edit</Option>
      <Option open={mdGroupDelete}>Delete</Option>
    </OptionRow>
    {#each group.items as item (item.id)}
      <ItemEntry item={item} group={group} />
    {/each}
  {/if}
</ParentEntry>