edit schema wip

2026-01-08 15:19:08 +02:00
parent ebccac210a
commit 25ad3fefab
18 changed files with 714 additions and 45 deletions
@@ -0,0 +1,36 @@
+<script>
+    let { onDelete, text } = $props();
+    let isClicked = $state(false);
+
+    function handleTryDelete(e) {
+        e.preventDefault();
+        isClicked = true;
+    }
+
+    function handleCancel(e) {
+        e.preventDefault();
+        isClicked = false;
+    }
+
+    function handleRealDelete(e) {
+        e.preventDefault();
+        onDelete();
+    }
+</script>
+
+{#if !isClicked}
+    <form onsubmit={handleTryDelete}>
+        <button class="danger" type="submit">
+            {@render text()}
+        </button>
+    </form>
+{/if}
+{#if isClicked}
+    Are you sure?
+    <form onsubmit={handleCancel}>
+        <button class="secondary" type="submit">No</button>
+    </form>
+    <form onsubmit={handleRealDelete}>
+        <button class="danger" type="submit">Yes</button>
+    </form>
+{/if}
@@ -0,0 +1,150 @@
+<script>
+    import { arrayMoveElement } from "../helpers";
+    import { flip } from "svelte/animate";
+
+    let {
+        sortableClass,
+        onUpdate,
+        items,
+        itemView,
+        itemCssClass,
+        itemKey = "id",
+        type = "list",
+        handleClass = null,
+        disabled = false,
+    } = $props();
+    // let sortableInstance = $state();
+    let sortableContainer = $state();
+    let draggedItem = $state();
+
+    function handleDragStart(event, item) {
+        if (disabled) {
+            return false;
+        }
+        draggedItem = item;
+        // Set data required for drag operation
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", item.id);
+        // Set a ghost drag image
+        event.currentTarget.classList.add("dragging");
+    }
+
+    // Handle drag over another item
+    function handleDragOver(event) {
+        event.preventDefault();
+        event.target.closest(".draggable-item").classList.add("dragover");
+        event.dataTransfer.dropEffect = "move";
+    }
+
+    // Handle dropping the item
+    function handleDrop(event, targetItem) {
+        event.preventDefault();
+
+        if (draggedItem === targetItem) return;
+        // Find positions of dragged and target items
+        const draggedIndex = items.findIndex(
+            (item) => getItem(item, itemKey) === getItem(draggedItem, itemKey),
+        );
+        const targetIndex = items.findIndex(
+            (item) => getItem(item, itemKey) === getItem(targetItem, itemKey),
+        );
+
+        onUpdate(
+            arrayMoveElement([...items], draggedIndex, targetIndex),
+            draggedIndex,
+            targetIndex,
+        );
+    }
+
+    function getItem(item, key) {
+        if (key === null) {
+            return item;
+        }
+        if (key.includes(".")) {
+            return key.split(".").reduce((a, b) => a[b] ?? null, item);
+        }
+        return item[key];
+    }
+
+    function handleDragEnd(event) {
+        event.target.classList.remove("dragging");
+        sortableContainer
+            .querySelector(".dragover")
+            ?.classList.remove("dragover");
+        draggedItem = null;
+        const draggableItem = event.target.closest(".draggable-item");
+        draggableItem.draggable = false;
+    }
+
+    function handleDragLeave(event) {
+        // event.target.classList.remove("dragover");
+        const draggableItem = event.target.closest(".draggable-item");
+        draggableItem.classList.remove("dragover");
+        draggableItem.draggable = false;
+    }
+
+    function handleMouseDown(e) {
+        const handleEl = e.target.closest("." + handleClass);
+        if (!handleEl) {
+            return true;
+        }
+        const draggableItem = e.target.closest(".draggable-item");
+        draggableItem.draggable = true;
+    }
+
+    function handleMouseUp(e) {
+        const handleEl = e.target.closest("." + handleClass);
+        if (!handleEl) {
+            return true;
+        }
+        const draggableItem = e.target.closest(".draggable-item");
+        draggableItem.draggable = false;
+    }
+</script>
+
+{#if type === "table"}
+    <tbody
+        class="sortable-container {sortableClass}"
+        bind:this={sortableContainer}
+    >
+        {#each items as item (getItem(item, itemKey))}
+            <tr
+                animate:flip={{ duration: 100 }}
+                class="draggable-item {itemCssClass}"
+                draggable="false"
+                onmousedown={handleMouseDown}
+                onmouseup={handleMouseUp}
+                ondragstart={(e) => handleDragStart(e, item)}
+                ondragover={handleDragOver}
+                ondragleave={handleDragLeave}
+                ondrop={(e) => handleDrop(e, item)}
+                ondragend={handleDragEnd}
+            >
+                {@render itemView(item)}
+            </tr>
+        {/each}
+    </tbody>
+{:else}
+    <div
+        class="sortable-container {sortableClass}"
+        bind:this={sortableContainer}
+    >
+        {#each items as item (getItem(item, itemKey))}
+            <div
+                animate:flip={{ duration: 100 }}
+                role="listitem"
+                class="draggable-item {itemCssClass}"
+                draggable="false"
+                onmousedown={handleMouseDown}
+                onmouseup={handleMouseUp}
+                ondragstart={(e) => handleDragStart(e, item)}
+                ondragover={handleDragOver}
+                ondragleave={handleDragLeave}
+                ondrop={(e) => handleDrop(e, item)}
+                ondragend={handleDragEnd}
+            >
+                {@render itemView(item)}
+            </div>
+        {/each}
+    </div>
+{/if}