175 lines
5.5 KiB
Svelte
175 lines
5.5 KiB
Svelte
<script>
|
|
import { get, post } from "../../../modules/remote";
|
|
import { getApp } from "../../../app";
|
|
import FieldLabel from "./FieldLabel.svelte";
|
|
import FieldError from "./FieldError.svelte";
|
|
import Sortable from "../../../common/Sortable.svelte";
|
|
let {
|
|
channel,
|
|
record,
|
|
schemaField,
|
|
dataField,
|
|
locale,
|
|
validationError,
|
|
edgeRecordPreviews,
|
|
} = $props();
|
|
let originalValue = dataField?.value ?? schemaField.props.default;
|
|
let newValue = $state(originalValue);
|
|
let valuesChanged = $derived(newValue !== originalValue);
|
|
let errorMessage = $state("");
|
|
// let validationErrorState = $state(validationError);
|
|
const app = getApp();
|
|
|
|
let suggestionsLoaded = $state(false);
|
|
let suggestions = $state([]);
|
|
let selectedRecordIds = $state([]);
|
|
let dialog = $state();
|
|
|
|
function handleModalOpen(e) {
|
|
// Add logic to handle adding a record
|
|
dialog.showModal();
|
|
if (suggestionsLoaded) {
|
|
return;
|
|
}
|
|
get(
|
|
app.url("records/suggest"),
|
|
{ schemas: schemaField.props.schemas },
|
|
(data, err) => {
|
|
suggestionsLoaded = true;
|
|
suggestions = data;
|
|
},
|
|
);
|
|
}
|
|
|
|
function handleModalClose(e) {
|
|
dialog.close();
|
|
}
|
|
|
|
function handleInsertSelected() {
|
|
suggestionsLoaded = false;
|
|
post(
|
|
app.url("edges/many"),
|
|
{
|
|
toIds: selectedRecordIds,
|
|
from: record.id,
|
|
fieldId: schemaField.id,
|
|
locale: locale,
|
|
},
|
|
(data, err) => {
|
|
suggestionsLoaded = true;
|
|
dialog.close();
|
|
edgeRecordPreviews = data.edgeRecordPreviews;
|
|
validationError = data.validationError;
|
|
},
|
|
);
|
|
}
|
|
|
|
function handleSortUpdate(updatedEdges) {
|
|
// let updatedFieldIds = updatedFields.map((f) => f.id);
|
|
// fields = fields.filter((f) => !updatedFieldIds.includes(f.id));
|
|
// fields = [...fields, ...updatedFields];
|
|
post(
|
|
app.url("records/sort-edges"),
|
|
{
|
|
ids: updatedEdges.map((e) => e.edge.id),
|
|
},
|
|
(data, err) => {
|
|
edgeRecordPreviews = updatedEdges;
|
|
},
|
|
);
|
|
}
|
|
|
|
function handleRemoveEdge(edgeId) {
|
|
post(
|
|
app.url("edges/delete"),
|
|
{
|
|
id: edgeId,
|
|
from: record.id,
|
|
fieldId: schemaField.id,
|
|
locale: locale,
|
|
},
|
|
(data, err) => {
|
|
edgeRecordPreviews = edgeRecordPreviews.filter(
|
|
(e) => e.edge.id !== edgeId,
|
|
);
|
|
validationError = data.validationError;
|
|
},
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<div style="min-width: 400px;">
|
|
<label>
|
|
<FieldLabel {locale} {channel} {schemaField}></FieldLabel>
|
|
</label>
|
|
<FieldError {schemaField} {validationError}></FieldError>
|
|
<button onclick={handleModalOpen}>Choose record</button>
|
|
|
|
<dialog bind:this={dialog}>
|
|
<article>
|
|
<header>
|
|
<button onclick={handleModalClose} aria-label="Close" rel="prev"
|
|
></button>
|
|
<p>
|
|
<strong>Records</strong>
|
|
</p>
|
|
</header>
|
|
{#if suggestionsLoaded}
|
|
<form>
|
|
<button onclick={handleInsertSelected}>
|
|
Insert selected
|
|
</button>
|
|
<table>
|
|
<tbody>
|
|
{#each suggestions as suggestion}
|
|
<tr>
|
|
<td>
|
|
<input
|
|
type="checkbox"
|
|
value={suggestion.id}
|
|
bind:group={selectedRecordIds}
|
|
/>
|
|
</td>
|
|
<td>
|
|
<a href="#">{suggestion.title}</a>
|
|
</td>
|
|
<td>
|
|
<a href="#">
|
|
{suggestion.schemaName}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
{:else}
|
|
<progress />
|
|
{/if}
|
|
</article>
|
|
</dialog>
|
|
<div>
|
|
{#if edgeRecordPreviews.length == 0}
|
|
No relations exist
|
|
{:else}
|
|
<Sortable
|
|
onUpdate={handleSortUpdate}
|
|
items={edgeRecordPreviews}
|
|
itemKey="edge.id"
|
|
>
|
|
{#snippet itemView(edgeRecordPreview)}
|
|
<div>
|
|
<a href="#">{edgeRecordPreview.recordPreview.title}</a>
|
|
{edgeRecordPreview.recordPreview.schemaName}
|
|
<button
|
|
onclick={(e) =>
|
|
handleRemoveEdge(edgeRecordPreview.edge.id)}
|
|
>remove</button
|
|
>
|
|
</div>
|
|
{/snippet}
|
|
</Sortable>
|
|
{/if}
|
|
</div>
|
|
</div>
|