149 lines
4.1 KiB
Svelte
149 lines
4.1 KiB
Svelte
<script>
|
|
import {createEventDispatcher, getContext} from "svelte";
|
|
import Icon from "../../common/Icon.svelte";
|
|
import InlineEdit from "../InlineEdit.svelte";
|
|
import BrowseModal from "./BrowseModal.svelte";
|
|
import Dialog from "../../dialog/Dialog.svelte";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
// export let field;
|
|
// export let buttonLabel = "";
|
|
// export let buttonClass = "";
|
|
|
|
const channel = getContext("channel");
|
|
export let schemas;
|
|
export let recordId;
|
|
$: showOptions = false;
|
|
let browseModal;
|
|
let inLineCreateRecord;
|
|
|
|
function openBrowseModal(e, schema) {
|
|
e.preventDefault();
|
|
browseModal.open(schema);
|
|
}
|
|
|
|
function save(e) {
|
|
e.preventDefault();
|
|
console.log("Save inline");
|
|
inLineCreateRecord = null;
|
|
dispatch("save", {
|
|
records: e.detail.records,
|
|
after: recordId,
|
|
});
|
|
}
|
|
|
|
function insert(e) {
|
|
e.preventDefault();
|
|
browseModal.close();
|
|
showOptions = false;
|
|
dispatch("insert", {
|
|
records: e.detail.records,
|
|
after: recordId,
|
|
});
|
|
}
|
|
|
|
function createInlineReference(e, schemaUId) {
|
|
e.preventDefault();
|
|
axios
|
|
.get(channel.lucentUrl + "/records/newInline?schema=" + schemaUId)
|
|
.then((response) => {
|
|
inLineCreateRecord = response.data;
|
|
showOptions = false;
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
{#if schemas.length > 1}
|
|
<button
|
|
type="button"
|
|
class:is-first={!recordId}
|
|
class="button"
|
|
on:click|preventDefault={(e) => (showOptions = !showOptions)}
|
|
>
|
|
<Icon width={24} height={24} icon="circle-plus"/>
|
|
</button>
|
|
|
|
{#if showOptions}
|
|
<div class="bg-light lx-card d-flex">
|
|
{#each schemas as schema}
|
|
<div
|
|
class="lx-card p-4 text-center me-4"
|
|
style="max-width: 250px;"
|
|
>
|
|
<p>{schema.label}</p>
|
|
|
|
<div class="mb-2">
|
|
<button
|
|
class="btn btn-sm btn-primary"
|
|
on:click={(e) =>
|
|
createInlineReference(e, schema.name)}
|
|
>New
|
|
</button>
|
|
<button
|
|
class="btn btn-sm btn-outline-primary"
|
|
on:click={(e) => openBrowseModal(e, schema.name)}
|
|
>
|
|
<Icon icon="magnifying-glass"/>
|
|
</button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div style="display:flex;align-items: center;gap: 4px">
|
|
<button
|
|
class="button"
|
|
on:click={(e) => createInlineReference(e, schemas[0].name)}
|
|
>New
|
|
</button>
|
|
<button
|
|
class="button"
|
|
on:click={(e) => openBrowseModal(e, schemas[0].name)}
|
|
>
|
|
<Icon icon="magnifying-glass"/>
|
|
</button
|
|
>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if inLineCreateRecord}
|
|
<InlineEdit
|
|
{...inLineCreateRecord}
|
|
on:cancel={(e) => (inLineCreateRecord = null)}
|
|
on:inlinesaved={save}
|
|
/>
|
|
{/if}
|
|
|
|
<Dialog bind:this={browseModal} on:insert={insert}/>
|
|
|
|
<style>
|
|
:global(.inline-card-wrapper) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
:global(.inline-card-wrapper .inline-card-button) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
:global(.inline-card-wrapper .inline-card-button.is-first) {
|
|
visibility: visible;
|
|
}
|
|
|
|
:global(.inline-card-wrapper:hover .inline-card-button) {
|
|
visibility: visible;
|
|
}
|
|
|
|
.inline-card-button {
|
|
/* padding: 0 5px; */
|
|
display: inline-block;
|
|
z-index: 1;
|
|
margin: 10px auto 0;
|
|
}
|
|
</style>
|