From ababdeda91f92358a63daf1a6a0e6885656a4810 Mon Sep 17 00:00:00 2001
From: Javier Martinez <javier.martinez@invopop.com>
Date: Mon, 28 Aug 2023 15:38:26 +0000
Subject: [PATCH] avoid adding siblings only array and object types can add
 children

---
 src/lib/editor/form/AbstractField.svelte    | 30 +++++++++------------
 src/lib/editor/form/FieldButton.svelte      | 26 ++++++++++++++++--
 src/lib/editor/form/FieldButtons.svelte     | 10 +++++--
 src/lib/editor/form/FieldContextMenu.svelte |  2 +-
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/lib/editor/form/AbstractField.svelte b/src/lib/editor/form/AbstractField.svelte
index 3dbab0e..0388d5a 100644
--- a/src/lib/editor/form/AbstractField.svelte
+++ b/src/lib/editor/form/AbstractField.svelte
@@ -25,10 +25,9 @@
   let isHover = false;
   let isFocus = false;
 
-  $: showContextMenu = !field.is.root && (isHover || isFocus);
-  $: parentField = field.parent as UIModelField;
+  $: showContextMenu = isHover || isFocus;
   $: addMenuEmptyItem = field.is.empty;
-  $: addMenu = !addMenuEmptyItem && showAddMenu && !parentField.is.complete;
+  $: addMenu = !addMenuEmptyItem && showAddMenu && !field.is.complete;
 
   $: {
     if (addMenuRef) {
@@ -41,7 +40,6 @@
 
   function handleHover(e: CustomEvent<boolean>) {
     // @note: Prevent undesired hover events on other items while dragging
-    console.log(e.detail);
     isHover = e.detail;
   }
 
@@ -58,15 +56,16 @@
   }
 
   function handleAddField() {
-    if (parentField.is.complete) return;
+    if (field.is.complete) return;
 
     showAddMenu = false;
 
     // @note: Add field directly instead of showing the dropdown option list
-    if (parentField.type === "array" || parentField.controlType === "dictionary") {
-      const [childOption] = parentField.options || [];
+    if (field.type === "array" || field.controlType === "dictionary") {
+      console.log(field.options);
+      const [childOption] = field.options || [];
 
-      addField(parentField, childOption);
+      addField(field, childOption);
       return;
     }
 
@@ -101,7 +100,7 @@
       const nextItem = field.getNextFocusableField();
 
       // @note: Last item but the parent is not complete, show the add field menu
-      if (nextItem?.isContainer() && !parentField.is.complete) {
+      if (nextItem?.isContainer() && !field.is.complete) {
         return handleAddField();
       } else {
         return focusNextField(nextItem);
@@ -126,22 +125,17 @@
   on:focusin={handleFocusIn}
   on:focusout={handleFocusOut}
 >
-  <div class="p-0.5 pl-2.5 pr-0" class:pr-2.5={!field.children} class:bg-slate-200={showContextMenu}>
+  <div class="p-0.5 pl-2.5 pr-0" class:pr-2.5={!field.children} class:bg-slate-50={showContextMenu}>
     <svelte:component this={componentsMap[field.type] || FallbackField} {field} />
   </div>
   <div class="absolute top-0 right-0">
-    <div on:hover={handleHover} class="absolute top-0 left-0 -ml-2.5" class:bg-slate-200={showContextMenu}>
-      <span class:invisible={!showContextMenu}>
+    <div on:hover={handleHover} class="absolute top-0 left-0 -ml-2.5" class:bg-slate-50={showContextMenu}>
+      <span class:invisible={!field.is.root && !showContextMenu}>
         <FieldContextMenu {field} on:addField={handleAddField} />
       </span>
     </div>
   </div>
 </div>
 {#if addMenu}
-  <AddFieldMenu
-    field={parentField}
-    showModal={true}
-    bind:inputRef={addMenuRef}
-    on:closeAddFieldMenu={handleAddFieldMenuClose}
-  />
+  <AddFieldMenu {field} showModal={true} bind:inputRef={addMenuRef} on:closeAddFieldMenu={handleAddFieldMenuClose} />
 {/if}
diff --git a/src/lib/editor/form/FieldButton.svelte b/src/lib/editor/form/FieldButton.svelte
index e75b0f7..db69a7b 100644
--- a/src/lib/editor/form/FieldButton.svelte
+++ b/src/lib/editor/form/FieldButton.svelte
@@ -1,10 +1,32 @@
 <script lang="ts">
   import Tooltip from "$lib/ui/Tooltip.svelte";
+  import { createEventDispatcher } from "svelte";
   import { Icon, type IconSource } from "svelte-hero-icons";
 
   export let icon: IconSource;
+  export let confirmationIcon: IconSource | null = null;
   export let tooltipText = "";
   export let isDestructive = false;
+
+  let needsConfirmation = false;
+
+  $: buttonIcon = !isDestructive ? icon : needsConfirmation ? confirmationIcon : icon;
+
+  const dispatch = createEventDispatcher();
+
+  const handleClick = () => {
+    if (isDestructive && !needsConfirmation) {
+      needsConfirmation = true;
+      setTimeout(() => {
+        needsConfirmation = false;
+      }, 3000);
+      return;
+    }
+
+    needsConfirmation = false;
+
+    dispatch("click");
+  };
 </script>
 
 <Tooltip>
@@ -12,11 +34,11 @@
     <p class="whitespace-nowrap">{tooltipText}</p>
   </svelte:fragment>
   <button
-    on:click
+    on:click={handleClick}
     class="flex items-center justify-start w-full p-2 {isDestructive
       ? 'hover:bg-red-400 hover:text-white'
       : 'hover:bg-gray-200'}"
   >
-    <Icon src={icon} class="h-4 w-4 p-0.5" />
+    <Icon src={buttonIcon} class="h-4 w-4 p-0.5" />
   </button>
 </Tooltip>
diff --git a/src/lib/editor/form/FieldButtons.svelte b/src/lib/editor/form/FieldButtons.svelte
index 9c9f00e..efa2868 100644
--- a/src/lib/editor/form/FieldButtons.svelte
+++ b/src/lib/editor/form/FieldButtons.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
-  import { Trash, DocumentDuplicate, ArrowUp, ArrowDown, Plus } from "svelte-hero-icons";
+  import { Trash, DocumentDuplicate, ArrowUp, ArrowDown, Plus, Minus } from "svelte-hero-icons";
   import { createEventDispatcher } from "svelte";
   import type { UIModelField } from "./utils/model.js";
   import FieldButton from "./FieldButton.svelte";
@@ -30,7 +30,13 @@
       {/if}
       {#if field?.is.disposable}
         <li>
-          <FieldButton icon={Trash} tooltipText="Remove" isDestructive={true} on:click={() => dispatch("remove")} />
+          <FieldButton
+            icon={Minus}
+            confirmationIcon={Trash}
+            tooltipText="Remove"
+            isDestructive={true}
+            on:click={() => dispatch("remove")}
+          />
         </li>
       {/if}
       {#if canMoveUp}
diff --git a/src/lib/editor/form/FieldContextMenu.svelte b/src/lib/editor/form/FieldContextMenu.svelte
index b3f4346..4a5af42 100644
--- a/src/lib/editor/form/FieldContextMenu.svelte
+++ b/src/lib/editor/form/FieldContextMenu.svelte
@@ -12,7 +12,7 @@
 
 <FieldButtons
   {field}
-  showAdd={!field.parent?.is.complete}
+  showAdd={["object", "array"].includes(field.type)}
   on:add={() => dispatch("addField")}
   on:duplicate={() => duplicateField(field)}
   on:remove={() => deleteField(field)}