stufflog/svelte-ui/src/routes/ItemPage.svelte

<script>
  import {onMount} from "svelte";
  import {get} from "svelte/store";

  import items from "../stores/items";
  import modal from "../stores/modal";

  import Boi from "../components/Boi.svelte";
  import AddBoi from "../components/AddBoi.svelte";
  import Link from "../components/Link.svelte";
  import ItemTable from "../components/tables/ItemTable.svelte";

  let activeItems = [];
  let inactiveItems = [];

  onMount(() => {
    items.listItems().catch(err => {
      console.warn("Item fetch failed:", err)
    })
  })

  function openModal(modalName, id) {
    const list = get(items)
    const item = list.find(i => i.id === id)

    modal.open(modalName, {item})
  }

  $: activeItems = $items.filter(i => i.active)
  $: inactiveItems = $items.filter(i => !i.active)
</script>

<div class="page">
  <AddBoi top on:click={() => modal.open("item.create")}>Item</AddBoi>
  <Boi header="Active Items" icon="cubes">
    <ItemTable items={activeItems} />
  </Boi>
  <Boi header="Archived Items" icon="archive">
    <ItemTable items={inactiveItems} />
  </Boi>
</div>

<style>
  div.page {
    width: 100ch;
    max-width: 90%;
    margin: auto;
  }
</style>