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

<script lang="ts" context="module">
  interface DeletionSideEffect {
    name: string
    op: string  
  }
</script>

<script lang="ts">
  import { goto } from "$app/navigation";
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 { getProjectListContext } from "$lib/components/contexts/ProjectListContext.svelte";
  import { getScopeContext } from "$lib/components/contexts/ScopeContext.svelte";
  import { getSprintListContext } from "$lib/components/contexts/SprintListContext.svelte";
  import type Stat from "$lib/models/stat";
  import { scopePrettyId } from "$lib/utils/prettyIds";

  const {currentModal, closeModal} = getModalContext();
  const {scope, deleteStat} = getScopeContext();
  const {project, reloadProject} = getProjectContext();
  const {reloadProjectList} = getProjectListContext();
  const {reloadSprintList} = getSprintListContext();
  const {reloadItemList} = getItemListContext();
  const {reloadItemLists} = getItemMultiListContext();
  const {page} = getStores();

  let endpoint: string;

  let error: string
  let loading: boolean;
  let show: boolean;
  let noun: string;
  let sideEffects: DeletionSideEffect[];
  let name: string;
  let dangerZone: boolean;
  let dangerZoneConfirm: string;
  let navigate: string;

  $: switch ($currentModal.name) {
    case "scope.delete":
      init("", [{op: "Delete", name: "everything under the scope."}])
      noun = "Scope";
      name = $currentModal.scope.name;
      dangerZone = true;
      navigate = "/";
      break;

    case "item.delete":
      init(`items/${$currentModal.item.id}`, [], $currentModal.item.scopeId)
      noun = "Item";
      name = $currentModal.item.name;
      break;

    case "stat.delete":
      init(`stats/${$currentModal.stat.id}`)
      noun = "Stat";
      name = $currentModal.stat.name;
      dangerZone = true;
      break;

    case "sprint.delete":
      init(`sprints/${$currentModal.sprint.id}`, [], $currentModal.sprint.scopeId)
      noun = "Sprint";
      name = $currentModal.sprint.name;
      break;

    case "requirement.delete":
      init(`projects/${$project.id}/requirements/${$currentModal.requirement.id}`,
        $currentModal.requirement.items.map(i => ({
          op: "Detach item",
          name: i.name,
        })),
      );
      noun = "Requirement";
      name = $currentModal.requirement.name;
      break;

    case "project.delete":
      init(`projects/${$currentModal.project.id}`,
        $currentModal.project.requirements.flatMap(r => ([{
          op: "Delete requirement",
          name: `${r.name} (${r.statusName})`,
        }, ...r.items.map(i => ({
          op: "Detach item",
          name: i.name,
        }))]))
      )
      noun = "Project";
      name = $currentModal.project.name;
      dangerZone = true;
      navigate = `/${scopePrettyId($scope)}`;
      break;

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

  function init(newEndpoint: string, newSideEffects: DeletionSideEffect[] = [], overrideScopeId?: number) {
    let scopeId = $scope.id;
    if (overrideScopeId != null) {
      scopeId = overrideScopeId;
    }

    endpoint = `scopes/${scopeId}/${newEndpoint}`;
    if (endpoint.endsWith("/")) {
      endpoint = endpoint.slice(0, -1);
    }
    sideEffects = newSideEffects;
    show = true;
    error = null;
    dangerZone = false;
    dangerZoneConfirm = "";
    navigate = null;
  }

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

    try {
      const res = await sl3(fetch, $page.stuff.idToken).fetch("DELETE", endpoint);
    
      if (navigate) {
        if (noun === "Project") {
          await reloadProjectList();
        }

        goto(navigate);
      } else {
        // Wait for project reload if it's updating a project
        await reloadProject();

        if (noun === "Stat") {
          reloadItemLists();
          deleteStat((res as {stat: Stat}).stat);
        }

        if (noun === "Sprint") {
          await reloadSprintList();
        }

        if (noun === "Item") {
          reloadItemLists();
          await reloadItemList();
        }
  
        // TODO: History context upsert
      }

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

    } finally {
      loading = false;
    }
  }

  let disabled;
  $: disabled = loading || (!!dangerZone && name !== dangerZoneConfirm)
</script>

<form on:submit|preventDefault={submit}>
  <Modal closable show={show} verb="Delete" noun={noun} disabled={disabled} error={error}>
    <ModalBody>
      <p>Are you sure you want to delete this {noun.toLocaleLowerCase()}?</p>
      {#if sideEffects.length > 0}
        <p>There are side-effects to this deletion.</p>
        <ul>
          {#each sideEffects as sideEffect}
            <li>{sideEffect.op} {sideEffect.name}</li>
          {/each}
        </ul>
      {/if}
      <label for="name">{noun} name</label>
      <input type="text" disabled name="name" value={name} />
      {#if dangerZone}
        <label for="confirm">Re-type name to confirm</label>
        <input type="text" name="confirm" bind:value={dangerZoneConfirm} />
      {/if}
    </ModalBody>
  </Modal>
</form>