new schema and indexes ui

ui/src/components/collections/CollectionFieldsTab.svelte

@@ -1,46 +1,44 @@
 <script>
     import { Collection, SchemaField } from "pocketbase";
-    import FieldAccordion from "@/components/collections/FieldAccordion.svelte";
+    import { setErrors } from "@/stores/errors";
+    import CommonHelper from "@/utils/CommonHelper";
+    import IndexesList from "@/components/collections/IndexesList.svelte";
+    import NewField from "@/components/collections/schema/NewField.svelte";
+    import SchemaFieldText from "@/components/collections/schema/SchemaFieldText.svelte";
+    import SchemaFieldNumber from "@/components/collections/schema/SchemaFieldNumber.svelte";
+    import SchemaFieldBool from "@/components/collections/schema/SchemaFieldBool.svelte";
+    import SchemaFieldEmail from "@/components/collections/schema/SchemaFieldEmail.svelte";
+    import SchemaFieldUrl from "@/components/collections/schema/SchemaFieldUrl.svelte";
+    import SchemaFieldEditor from "@/components/collections/schema/SchemaFieldEditor.svelte";
+    import SchemaFieldDate from "@/components/collections/schema/SchemaFieldDate.svelte";
+    import SchemaFieldSelect from "@/components/collections/schema/SchemaFieldSelect.svelte";
+    import SchemaFieldJson from "@/components/collections/schema/SchemaFieldJson.svelte";
+    import SchemaFieldFile from "@/components/collections/schema/SchemaFieldFile.svelte";
+    import SchemaFieldRelation from "@/components/collections/schema/SchemaFieldRelation.svelte";
 
     export let collection = new Collection();
 
-    const baseReservedNames = [
-        "id",
-        "created",
-        "updated",
-        "collectionId",
-        "collectionName",
-        "expand",
-        "true",
-        "false",
-        "null",
-    ];
-
-    let reservedNames = [];
-
-    $: if (collection.isAuth) {
-        reservedNames = baseReservedNames.concat([
-            "username",
-            "email",
-            "emailVisibility",
-            "verified",
-            "tokenKey",
-            "passwordHash",
-            "lastResetSentAt",
-            "lastVerificationSentAt",
-            "password",
-            "passwordConfirm",
-            "oldPassword",
-        ]);
-    } else {
-        reservedNames = baseReservedNames.slice(0);
-    }
+    const fieldComponents = {
+        text: SchemaFieldText,
+        number: SchemaFieldNumber,
+        bool: SchemaFieldBool,
+        email: SchemaFieldEmail,
+        url: SchemaFieldUrl,
+        editor: SchemaFieldEditor,
+        date: SchemaFieldDate,
+        select: SchemaFieldSelect,
+        json: SchemaFieldJson,
+        file: SchemaFieldFile,
+        relation: SchemaFieldRelation,
+    };
 
     $: if (typeof collection.schema === "undefined") {
         collection = collection || new Collection();
         collection.schema = [];
     }
 
+    $: nonDeletedFields = collection.schema.filter((f) => !f.toDelete) || [];
+
     function removeField(fieldIndex) {
         if (collection.schema[fieldIndex]) {
             collection.schema.splice(fieldIndex, 1);
@@ -48,9 +46,10 @@
         }
     }
 
-    function newField() {
+    function newField(fieldType = "text") {
         const field = new SchemaField({
             name: getUniqueFieldName(),
+            type: fieldType,
         });
 
         field.onMountExpand = true;
@@ -73,22 +72,19 @@
         return !!collection.schema.find((field) => field.name === name);
     }
 
-    function getSiblingsFieldNames(currentField) {
-        let result = [];
+    function getSchemaFieldIndex(field) {
+        return nonDeletedFields.findIndex((f) => f === field);
+    }
 
-        if (currentField.toDelete) {
-            return result;
+    function replaceIndexesColumn(oldName, newName) {
+        if (!collection?.schema?.length || oldName === newName || !newName) {
+            return;
         }
 
-        for (let field of collection.schema) {
-            if (field === currentField || field.toDelete) {
-                continue; // skip current and deleted fields
-            }
-
-            result.push(field.name);
-        }
-
-        return result;
+        // update indexes on renamed fields
+        collection.indexes = collection.indexes.map((idx) =>
+            CommonHelper.replaceIndexColumn(idx, oldName, newName)
+        );
     }
 
     // ---------------------------------------------------------------
@@ -124,6 +120,9 @@
         }
 
         collection.schema = newSchema;
+
+        // reset errors since the schema keys index has changed
+        setErrors({});
     }
 </script>
 
@@ -144,26 +143,22 @@
     </p>
 </div>
 
-<div class="accordions">
+<div class="accordions schema-fields">
     {#each collection.schema as field, i (field)}
-        <FieldAccordion
+        <svelte:component
+            this={fieldComponents[field.type]}
+            key={getSchemaFieldIndex(field)}
             bind:field
-            key={i}
-            excludeNames={reservedNames.concat(getSiblingsFieldNames(field))}
             on:remove={() => removeField(i)}
-            on:dragstart={(e) => onFieldDrag(e?.detail, i)}
-            on:drop={(e) => onFieldDrop(e?.detail, i)}
+            on:rename={(e) => replaceIndexesColumn(e.detail.oldName, e.detail.newName)}
+            on:dragstart={(e) => onFieldDrag(e.detail, i)}
+            on:drop={(e) => onFieldDrop(e.detail, i)}
         />
     {/each}
 </div>
 
-<div class="clearfix m-t-xs" />
+<NewField class="btn btn-block btn-outline" on:select={(e) => newField(e.detail)} />
 
-<button
-    type="button"
-    class="btn btn-block {collection.schema.length ? 'btn-transparent' : 'btn-secondary'}"
-    on:click={newField}
->
-    <i class="ri-add-line" />
-    <span class="txt">New field</span>
-</button>
+<div class="clearfix m-b-base" />
+
+<IndexesList bind:collection />