From a2337fde3072045276df2d50177b4a65a434c856 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 20 Feb 2022 18:04:47 +0100
Subject: [PATCH] [ui] add deletion of objects

---
 webui/src/components/BrowseColumn.svelte |  1 +
 webui/src/components/Inspect.svelte      | 29 ++++++++++++++++++++----
 webui/src/views/Browse.svelte            |  6 ++++-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/webui/src/components/BrowseColumn.svelte b/webui/src/components/BrowseColumn.svelte
index 63995b9..df1a5a8 100644
--- a/webui/src/components/BrowseColumn.svelte
+++ b/webui/src/components/BrowseColumn.svelte
@@ -54,6 +54,7 @@
     {index}
     {detail}
     on:resolved
+    on:close
   />
 </div>
 
diff --git a/webui/src/components/Inspect.svelte b/webui/src/components/Inspect.svelte
index 0612821..9f85b2a 100644
--- a/webui/src/components/Inspect.svelte
+++ b/webui/src/components/Inspect.svelte
@@ -4,7 +4,7 @@
   import UpObject from "./display/UpObject.svelte";
   import { UpType } from "../lib/types";
   import BlobPreview from "./display/BlobPreview.svelte";
-  import { setContext } from "svelte";
+  import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
   import type { UpEntry } from "upend";
   import Spinner from "./utils/Spinner.svelte";
@@ -17,6 +17,8 @@
   import { useParams } from "svelte-navigator";
   import { GROUP_TYPE_ADDR } from "upend/constants";
   import { deleteEntry, putEntityAttribute, putEntry } from "../lib/api";
+  import Icon from "./utils/Icon.svelte";
+  const dispatch = createEventDispatcher();
   const params = useParams();
 
   export let address: string;
@@ -139,6 +141,12 @@
     revalidate();
   }
 
+  let identities = [address];
+  function onResolved(ev: CustomEvent<string[]>) {
+    identities = ev.detail;
+    dispatch("resolved", ev.detail);
+  }
+
   let groupToAdd: IValue | undefined;
   async function addGroup() {
     if (!groupToAdd) {
@@ -166,17 +174,24 @@
     groupToAdd = undefined;
   }
 
-  async function removeGroup(address: string) {
-    await deleteEntry(address);
+  async function removeGroup(groupAddress: string) {
+    await deleteEntry(groupAddress);
     revalidate();
   }
+
+  async function deleteObject() {
+    if (confirm(`Really delete "${identities.join(" | ")}"?`)) {
+      await deleteEntry(address);
+      dispatch("close");
+    }
+  }
 </script>
 
 <div class="inspect">
   <header>
     <h2>
       {#if $entity}
-        <UpObject banner {address} on:resolved />
+        <UpObject banner {address} on:resolved={onResolved} />
       {:else}
         <Spinner centered />
       {/if}
@@ -244,6 +259,12 @@
             />
           {/if}
         </div>
+
+        {#if editable}
+          <div class="button" on:click={deleteObject}>
+            <Icon name="trash" />
+          </div>
+        {/if}
       {:else}
         <Spinner centered />
       {/if}
diff --git a/webui/src/views/Browse.svelte b/webui/src/views/Browse.svelte
index 27af54d..2d5e350 100644
--- a/webui/src/views/Browse.svelte
+++ b/webui/src/views/Browse.svelte
@@ -12,7 +12,11 @@
   function close(idx: number) {
     let _addresses = addresses.concat();
     _addresses.splice(idx, 1);
-    navigate(`/browse/${_addresses.join(",")}`);
+    if (_addresses.length) {
+      navigate(`/browse/${_addresses.join(",")}`);
+    } else {
+      navigate("/");
+    }
   }
 
   $: {