[#1656] added duplicate collection and record dropdown option

ui/src/components/collections/CollectionUpsertPanel.svelte

@@ -77,6 +77,7 @@
 
     async function load(model) {
         setErrors({}); // reset errors
+
         if (typeof model !== "undefined") {
             original = model;
             collection = model?.clone();
@@ -84,6 +85,7 @@
             original = null;
             collection = new Collection();
         }
+
         // normalize
         collection.schema = collection.schema || [];
         collection.originalName = collection.name || "";
@@ -188,6 +190,33 @@
         // reset schema errors on type change
         removeError("schema");
     }
+
+    function duplicateConfirm() {
+        if (hasChanges) {
+            confirm("You have unsaved changes. Do you really want to discard them?", () => {
+                duplicate();
+            });
+        } else {
+            duplicate();
+        }
+    }
+
+    async function duplicate() {
+        const clone = original?.clone();
+
+        if (clone) {
+            clone.id = "";
+            clone.created = "";
+            clone.updated = "";
+            clone.name += "_duplicate";
+        }
+
+        show(clone);
+
+        await tick();
+
+        initialFormHash = "";
+    }
 </script>
 
 <OverlayPanel
@@ -207,7 +236,7 @@
     on:show
 >
     <svelte:fragment slot="header">
-        <h4>
+        <h4 class="upsert-panel-title">
             {collection.isNew ? "New collection" : "Edit collection"}
         </h4>
 
@@ -216,6 +245,10 @@
             <button type="button" class="btn btn-sm btn-circle btn-transparent flex-gap-0">
                 <i class="ri-more-line" />
                 <Toggler class="dropdown dropdown-right m-t-5">
+                    <button type="button" class="dropdown-item closable" on:click={() => duplicateConfirm()}>
+                        <i class="ri-file-copy-line" />
+                        <span class="txt">Duplicate</span>
+                    </button>
                     <button
                         type="button"
                         class="dropdown-item txt-danger closable"
@@ -384,6 +417,11 @@
 <CollectionUpdateConfirm bind:this={confirmChangesPanel} on:confirm={() => save()} />
 
 <style>
+    .upsert-panel-title {
+        display: inline-flex;
+        align-items: center;
+        min-height: var(--smBtnHeight);
+    }
     .tabs-content {
         z-index: 3; /* autocomplete dropdown overlay fix */
     }

ui/src/components/records/RecordUpsertPanel.svelte

@@ -221,6 +221,40 @@
                 });
         });
     }
+
+    function duplicateConfirm() {
+        if (hasChanges) {
+            confirm("You have unsaved changes. Do you really want to discard them?", () => {
+                duplicate();
+            });
+        } else {
+            duplicate();
+        }
+    }
+
+    async function duplicate() {
+        const clone = original?.clone();
+
+        if (clone) {
+            clone.id = "";
+            clone.created = "";
+            clone.updated = "";
+
+            // reset file fields
+            const fields = collection?.schema || [];
+            for (const field of fields) {
+                if (field.type === "file") {
+                    delete clone[field.name];
+                }
+            }
+        }
+
+        show(clone);
+
+        await tick();
+
+        initialFormHash = "";
+    }
 </script>
 
 <OverlayPanel
@@ -276,6 +310,14 @@
                                 <span class="txt">Send password reset email</span>
                             </button>
                         {/if}
+                        <button
+                            type="button"
+                            class="dropdown-item closable"
+                            on:click={() => duplicateConfirm()}
+                        >
+                            <i class="ri-file-copy-line" />
+                            <span class="txt">Duplicate</span>
+                        </button>
                         <button
                             type="button"
                             class="dropdown-item txt-danger closable"

ui/src/components/records/fields/FileField.svelte

@@ -81,7 +81,7 @@
     </label>
 
     <div bind:this={filesListElem} class="list">
-        {#each valueAsArray as filename, i (filename)}
+        {#each valueAsArray as filename, i (filename + record.id)}
             {@const isDeleted = deletedFileIndexes.includes(i)}
             <div class="list-item">
                 <div class:fade={deletedFileIndexes.includes(i)}>