pocketbase/ui/src/components/collections/schema/SchemaFieldRelation.svelte

176 lines
6.3 KiB
Svelte

<script>
import CommonHelper from "@/utils/CommonHelper";
import tooltip from "@/actions/tooltip";
import Field from "@/components/base/Field.svelte";
import Select from "@/components/base/Select.svelte";
import ObjectSelect from "@/components/base/ObjectSelect.svelte";
import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
import SchemaField from "@/components/collections/schema/SchemaField.svelte";
import { collections } from "@/stores/collections";
export let field;
export let key = "";
const isSingleOptions = [
{ label: "Single", value: true },
{ label: "Multiple", value: false },
];
const defaultOptions = [
{ label: "False", value: false },
{ label: "True", value: true },
];
let upsertPanel = null;
let isSingle = field.options?.maxSelect == 1;
let oldIsSingle = isSingle;
$: selectCollections = $collections.filter((c) => c.type != "view");
// load defaults
$: if (CommonHelper.isEmpty(field.options)) {
loadDefaults();
}
$: if (oldIsSingle != isSingle) {
oldIsSingle = isSingle;
if (isSingle) {
field.options.minSelect = null;
field.options.maxSelect = 1;
} else {
field.options.maxSelect = null;
}
}
$: selectedColection = $collections.find((c) => c.id == field.options.collectionId) || null;
function loadDefaults() {
field.options = {
maxSelect: 1,
collectionId: null,
cascadeDelete: false,
};
isSingle = true;
oldIsSingle = isSingle;
}
</script>
<SchemaField bind:field {key} on:rename on:remove on:duplicate {...$$restProps}>
<svelte:fragment let:interactive>
<div class="separator" />
<Field
class="form-field required {!interactive ? 'readonly' : ''}"
inlineError
name="schema.{key}.options.collectionId"
let:uniqueId
>
<ObjectSelect
id={uniqueId}
searchable={selectCollections.length > 5}
selectPlaceholder={"Select collection *"}
noOptionsText="No collections found"
selectionKey="id"
items={selectCollections}
readonly={!interactive || field.id}
bind:keyOfSelected={field.options.collectionId}
>
<svelte:fragment slot="afterOptions">
<hr />
<button
type="button"
class="btn btn-transparent btn-block btn-sm"
on:click={() => upsertPanel?.show()}
>
<i class="ri-add-line" />
<span class="txt">New collection</span>
</button>
</svelte:fragment>
</ObjectSelect>
</Field>
<div class="separator" />
<Field
class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
inlineError
let:uniqueId
>
<ObjectSelect
id={uniqueId}
items={isSingleOptions}
readonly={!interactive}
bind:keyOfSelected={isSingle}
/>
</Field>
<div class="separator" />
</svelte:fragment>
<svelte:fragment slot="options">
<div class="grid grid-sm">
{#if !isSingle}
<div class="col-sm-6">
<Field class="form-field" name="schema.{key}.options.minSelect" let:uniqueId>
<label for={uniqueId}>Min select</label>
<input
type="number"
id={uniqueId}
step="1"
min="1"
placeholder="No min limit"
bind:value={field.options.minSelect}
/>
</Field>
</div>
<div class="col-sm-6">
<Field class="form-field" name="schema.{key}.options.maxSelect" let:uniqueId>
<label for={uniqueId}>Max select</label>
<input
type="number"
id={uniqueId}
step="1"
placeholder="No max limit"
min={field.options.minSelect || 2}
bind:value={field.options.maxSelect}
/>
</Field>
</div>
{/if}
<div class="col-sm-12">
<Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
<label for={uniqueId}>
<span class="txt">Cascade delete</span>
<!-- prettier-ignore -->
<i
class="ri-information-line link-hint"
use:tooltip={{
text: [
`Whether on ${selectedColection?.name || "relation"} record deletion to delete also the current corresponding collection record(s).`,
!isSingle ? `For "Multiple" relation fields the cascade delete is triggered only when all ${selectedColection?.name || "relation"} ids are removed from the corresponding record.` : null
].filter(Boolean).join("\n\n"),
position: "top",
}}
/>
</label>
<ObjectSelect
id={uniqueId}
items={defaultOptions}
bind:keyOfSelected={field.options.cascadeDelete}
/>
</Field>
</div>
</div>
</svelte:fragment>
</SchemaField>
<CollectionUpsertPanel
bind:this={upsertPanel}
on:save={(e) => {
if (e?.detail?.collection?.id && e.detail.collection.type != "view") {
field.options.collectionId = e.detail.collection.id;
}
}}
/>