stufflog3/frontend/src/lib/modals/ItemAcquireModal.svelte

<script lang="ts">
  import { getStores } from "$app/stores";

  import { sl3 } from "$lib/clients/sl3";
  import Modal from "$lib/components/common/Modal.svelte";
  import ModalBody from "$lib/components/common/ModalBody.svelte";
  import { getItemListContext } from "$lib/components/contexts/ItemListContext.svelte";
  import { getItemMultiListContext } from "$lib/components/contexts/ItemMultiListContext.svelte";
  import { getModalContext } from "$lib/components/contexts/ModalContext.svelte";
  import { getProjectContext } from "$lib/components/contexts/ProjectContext.svelte";
  import { getSprintListContext } from "$lib/components/contexts/SprintListContext.svelte";
  import AcquiredTimeInput from "$lib/components/controls/AcquiredTimeInput.svelte";
  import StatInput from "$lib/components/controls/StatInput.svelte";
  import type Item from "$lib/models/item";
  import type { ItemInput } from "$lib/models/item";

  const {currentModal, closeModal} = getModalContext();
  const {reloadProject} = getProjectContext();
  const {reloadItemList} = getItemListContext();
  const {reloadSprintList} = getSprintListContext();
  const {reloadItemLists} = getItemMultiListContext();
  const {page} = getStores();

  let item: Partial<ItemInput>
  let itemId: number
  let scopeId: number
  let requirementId: number
  let openedDate: Date

  let error: string
  let loading: boolean
  let show: boolean

  $: switch ($currentModal.name) {
    case "item.acquire":
      init($currentModal.item)
      break;

    default:
      loading = false;
      error = null;
      show = false;
  }

  function init(unaquiredItem: Item) {
    openedDate = new Date();

    item = {
      acquiredTime: "",
      description: unaquiredItem.description,
      stats: unaquiredItem.stats.map(s => ({statId: s.id, acquired: s.required, required: s.required})),
    }

    show = true;
    scopeId = unaquiredItem.scopeId;
    itemId = unaquiredItem.id;
    requirementId = unaquiredItem.requirementId;
  }

  async function submit() {
    error = null;
    loading = true;

    try {
      await sl3(fetch, $page.stuff.idToken).updateItem(scopeId, itemId, {
        ...item,
        acquiredTime: new Date(item.acquiredTime).toISOString(),
      });
    
      // Wait for project reload if it's updating a project
      if (requirementId != null) {
        await reloadProject();
      }

      reloadItemLists();
      await reloadItemList();
      await reloadSprintList();

      closeModal();
    } catch(err) {
      if (err.statusCode != null) {
        error = err.statusMessage;
      } else {
        error = err
      }

    } finally {
      loading = false;
    }
  }
</script>

<form on:submit|preventDefault={submit}>
  <Modal closable show={show} verb="Acquire" noun="Item" disabled={loading} error={error}>
    <ModalBody>
      <label for="acquiredTime">Acquired</label>
      <AcquiredTimeInput forced openDate={openedDate} bind:value={item.acquiredTime} />
      <label for="description">Description</label>
      <textarea name="description" bind:value={item.description} />
      <label for="stats">Stats</label>
      <StatInput overrideScopeId={scopeId} showAcquired hideUnseen noToggle bind:value={item.stats} />
    </ModalBody>
  </Modal>
</form>