tomas/pocketbase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[#2567] fixed schema fields sort not working on Safari/Gnome Web

Browse Source
This commit is contained in:
Gani Georgiev
2023-05-24 23:18:44 +03:00
parent e9969ed6d1
commit c72c951b24
47 changed files with 233 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/collections/CollectionFieldsTab.svelte
+31 -47
View File
@@ -15,6 +15,7 @@
import SchemaFieldJson from "@/components/collections/schema/SchemaFieldJson.svelte";
import SchemaFieldFile from "@/components/collections/schema/SchemaFieldFile.svelte";
import SchemaFieldRelation from "@/components/collections/schema/SchemaFieldRelation.svelte";
import Draggable from "@/components/base/Draggable.svelte";
export let collection = new Collection();
@@ -86,44 +87,6 @@
CommonHelper.replaceIndexColumn(idx, oldName, newName)
);
}
// ---------------------------------------------------------------
// fields drag&drop handling
// ---------------------------------------------------------------
function onFieldDrag(event, i) {
if (!event) {
return;
}
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.dropEffect = "move";
event.dataTransfer.setData("text/plain", i);
}
function onFieldDrop(event, target) {
if (!event) {
return;
}
event.dataTransfer.dropEffect = "move";
const start = parseInt(event.dataTransfer.getData("text/plain"));
const newSchema = collection.schema;
if (start < target) {
newSchema.splice(target + 1, 0, newSchema[start]);
newSchema.splice(start, 1);
} else {
newSchema.splice(target, 0, newSchema[start]);
newSchema.splice(start + 1, 1);
}
collection.schema = newSchema;
// reset errors since the schema keys index has changed
setErrors({});
}
</script>
<div class="block m-b-25">
@@ -145,15 +108,36 @@
<div class="schema-fields">
{#each collection.schema as field, i (field)}
<svelte:component
this={fieldComponents[field.type]}
key={getSchemaFieldIndex(field)}
bind:field
on:remove={() => removeField(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)}
/>
<Draggable
bind:list={collection.schema}
index={i}
disabled={field.toDelete || (field.id && field.system)}
dragHandleClass="drag-handle-wrapper"
on:drag={(e) => {
// blank drag placeholder
if (!e.detail) {
return;
}
const ghost = e.detail.target;
ghost.style.opacity = 0;
setTimeout(() => {
ghost?.style?.removeProperty("opacity"); // restore
}, 0);
e.detail.dataTransfer.setDragImage(ghost, 0, 0);
}}
on:sort={() => {
// reset errors since the schema keys index has changed
setErrors({});
}}
>
<svelte:component
this={fieldComponents[field.type]}
key={getSchemaFieldIndex(field)}
bind:field
on:remove={() => removeField(i)}
on:rename={(e) => replaceIndexesColumn(e.detail.oldName, e.detail.newName)}
/>
</Draggable>
{/each}
</div>
ui/src/components/collections/schema/SchemaField.svelte
+7 -39
View File
@@ -12,13 +12,6 @@
import Toggler from "@/components/base/Toggler.svelte";
import Field from "@/components/base/Field.svelte";
export let key = "";
export let field = new SchemaField();
let nameInput;
let isDragOver = false;
let showOptions = false;
const componentId = "f_" + CommonHelper.randomString(8);
const dispatch = createEventDispatcher();
@@ -29,6 +22,12 @@
number: "Nonzero",
};
export let key = "";
export let field = new SchemaField();
let nameInput;
let showOptions = false;
$: if (field.toDelete) {
// reset the name if it was previously deleted
if (field.originalName && field.name !== field.originalName) {
@@ -117,46 +116,15 @@
</script>
<div
draggable={true}
class="schema-field"
class:required={field.required}
class:expanded={interactive && showOptions}
class:deleted={field.toDelete}
class:drag-over={isDragOver}
transition:slide|local={{ duration: 150 }}
on:dragstart={(e) => {
if (!e.target.classList.contains("drag-handle-wrapper")) {
e.preventDefault();
return;
}
const blank = document.createElement("div");
e.dataTransfer.setDragImage(blank, 0, 0);
interactive && dispatch("dragstart", e);
}}
on:dragenter={(e) => {
if (interactive) {
isDragOver = true;
dispatch("dragenter", e);
}
}}
on:drop|preventDefault={(e) => {
if (interactive) {
isDragOver = false;
dispatch("drop", e);
}
}}
on:dragleave={(e) => {
if (interactive) {
isDragOver = false;
dispatch("dragleave", e);
}
}}
on:dragover|preventDefault
>
<div class="schema-field-header">
{#if interactive}
<div class="drag-handle-wrapper" draggable="true" aria-label="Sort">
<div class="drag-handle-wrapper" draggable={true} aria-label="Sort">
<span class="drag-handle" />
</div>
{/if}
ui/src/components/collections/schema/SchemaFieldBool.svelte
+1 -11
View File
@@ -5,14 +5,4 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
/>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps} />
ui/src/components/collections/schema/SchemaFieldDate.svelte
+1 -11
View File
@@ -26,17 +26,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-6">
ui/src/components/collections/schema/SchemaFieldEditor.svelte
+1 -11
View File
@@ -5,14 +5,4 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
/>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps} />
ui/src/components/collections/schema/SchemaFieldEmail.svelte
+1 -11
View File
@@ -9,17 +9,7 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-6">
ui/src/components/collections/schema/SchemaFieldFile.svelte
+1 -11
View File
@@ -70,17 +70,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment let:interactive>
<div class="separator" />
ui/src/components/collections/schema/SchemaFieldJson.svelte
+1 -11
View File
@@ -8,17 +8,7 @@
let showInfo = false;
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<button
type="button"
ui/src/components/collections/schema/SchemaFieldNumber.svelte
+1 -11
View File
@@ -6,17 +6,7 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-6">
ui/src/components/collections/schema/SchemaFieldRelation.svelte
+1 -11
View File
@@ -89,17 +89,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment let:interactive>
<div class="separator" />
ui/src/components/collections/schema/SchemaFieldSelect.svelte
+1 -11
View File
@@ -40,17 +40,7 @@
}
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment let:interactive>
<div class="separator" />
ui/src/components/collections/schema/SchemaFieldText.svelte
+1 -11
View File
@@ -6,17 +6,7 @@
export let key = "";
</script>
<SchemaField
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="options">
<div class="grid grid-sm">
<div class="col-sm-3">
ui/src/components/collections/schema/SchemaFieldUrl.svelte
+1 -11
View File
@@ -6,14 +6,4 @@
</script>
<!-- shares the same options with the email field -->
<SchemaFieldEmail
bind:field
{key}
on:rename
on:remove
on:drop
on:dragstart
on:dragenter
on:dragleave
{...$$restProps}
/>
<SchemaFieldEmail bind:field {key} on:rename on:remove {...$$restProps} />