lucent/lucent-laravel
2
0
Fork 0
Code Issues 14 Pull Requests Releases 1 Activity

create record wip

Browse Source
This commit is contained in:
Alex Lingris
2026-01-08 23:23:48 +02:00
parent 2a718ac9ee
commit 4470d922b7
42 changed files with 1048 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/autocomplete/Autocomplete.svelte
+15 -23
View File
@@ -1,52 +1,44 @@
<script>
import Selectlist from "./Selectlist.svelte";
import Icon from "../common/Icon.svelte";
import Icon from "../../common/Icon.svelte";
let searchEl;
let search;
export let value;
export let field;
function handleSelect(){
function handleSelect() {
searchEl.focus();
searchEl.blur()
searchEl.blur();
}
</script>
<div class="autocomplete">
<input
type="search"
bind:value={search}
bind:this={searchEl}
placeholder="Search for options"
autocomplete="off"
type="search"
bind:value={search}
bind:this={searchEl}
placeholder="Search for options"
autocomplete="off"
/>
<div class="autocomplete-results">
<Selectlist
{field}
bind:value
bind:search
on:selected={handleSelect}
/>
<Selectlist {field} bind:value bind:search on:selected={handleSelect} />
</div>
</div>
{#if value}
<div class="autocomplete-selected-value">
<div class="autocomplete-selected-value">
{#if Array.isArray(field.selectOptions)}
{value}
{:else}
{field.selectOptions[value]}
{/if}
<button
on:click|preventDefault={(e) => (value = "")}
type="button"
class="button-text"
aria-label="Close"
on:click|preventDefault={(e) => (value = "")}
type="button"
class="button-text"
aria-label="Close"
>
<Icon width={12} height={12} icon="close"></Icon>
</button>
</div>
{/if}
{/if}
front/js/svelte/common/Icon.svelte
+22 -25
View File
@@ -56,23 +56,23 @@
path: '<path d="M416 288h-95.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H416c17.67 0 32-14.33 32-32S433.7 288 416 288zM544 32h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 32 544 32zM352 416h-32c-17.67 0-32 14.33-32 32s14.33 32 32 32h32c17.67 0 31.1-14.33 31.1-32S369.7 416 352 416zM480 160h-159.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H480c17.67 0 32-14.33 32-32S497.7 160 480 160zM192.4 330.7L160 366.1V64.03C160 46.33 145.7 32 128 32S96 46.33 96 64.03v302L63.6 330.7c-6.312-6.883-14.94-10.38-23.61-10.38c-7.719 0-15.47 2.781-21.61 8.414c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0l87.1-96.09c11.94-13.05 11.06-33.31-1.969-45.27C224.6 316.8 204.4 317.7 192.4 330.7z"/>',
viewBox: "0 0 576 512",
},
"filter": {
filter: {
path: '<path d="M3.853 54.87C10.47 40.9 24.54 32 40 32H472C487.5 32 501.5 40.9 508.1 54.87C514.8 68.84 512.7 85.37 502.1 97.33L320 320.9V448C320 460.1 313.2 471.2 302.3 476.6C291.5 482 278.5 480.9 268.8 473.6L204.8 425.6C196.7 419.6 192 410.1 192 400V320.9L9.042 97.33C-.745 85.37-2.765 68.84 3.854 54.87L3.853 54.87z"/>',
viewBox: "0 0 512 512",
},
"calendar": {
calendar: {
path: '<path d="M96 32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32zM448 464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192H448V464z"/>',
viewBox: "0 0 448 512",
},
"pencil": {
pencil: {
path: '<path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"/>',
viewBox: "0 0 512 512",
},
"database": {
database: {
path: '<path d="M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"/>',
viewBox: "0 0 448 512",
},
"dice": {
dice: {
path: '<path d="M447.1 224c0-12.56-4.781-25.13-14.35-34.76l-174.9-174.9C249.1 4.786 236.5 0 223.1 0C211.4 0 198.9 4.786 189.2 14.35L14.35 189.2C4.783 198.9-.0011 211.4-.0011 223.1c0 12.56 4.785 25.17 14.35 34.8l174.9 174.9c9.625 9.562 22.19 14.35 34.75 14.35s25.13-4.783 34.75-14.35l174.9-174.9C443.2 249.1 447.1 236.6 447.1 224zM96 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S120 210.8 120 224S109.3 248 96 248zM224 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 376 224 376zM224 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S248 210.8 248 224S237.3 248 224 248zM224 120c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 120 224 120zM352 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S365.3 248 352 248zM591.1 192l-118.7 0c4.418 10.27 6.604 21.25 6.604 32.23c0 20.7-7.865 41.38-23.63 57.14l-136.2 136.2v46.37C320 490.5 341.5 512 368 512h223.1c26.5 0 47.1-21.5 47.1-47.1V240C639.1 213.5 618.5 192 591.1 192zM479.1 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S493.2 376 479.1 376z"/>',
viewBox: "0 0 640 512",
},
@@ -81,7 +81,7 @@
path: '<path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/>',
viewBox: "0 0 512 512",
},
"eye": {
eye: {
path: '<path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"/>',
viewBox: "0 0 576 512",
},
@@ -93,19 +93,19 @@
path: '<path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/>',
viewBox: "0 0 512 512",
},
"expand": {
expand: {
path: '<path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z"/>',
viewBox: "0 0 448 512",
},
"compress": {
compress: {
path: '<path d="M128 320H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32v-96C160 334.3 145.7 320 128 320zM416 320h-96c-17.69 0-32 14.31-32 32v96c0 17.69 14.31 32 32 32s32-14.31 32-32v-64h64c17.69 0 32-14.31 32-32S433.7 320 416 320zM320 192h96c17.69 0 32-14.31 32-32s-14.31-32-32-32h-64V64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96C288 177.7 302.3 192 320 192zM128 32C110.3 32 96 46.31 96 64v64H32C14.31 128 0 142.3 0 160s14.31 32 32 32h96c17.69 0 32-14.31 32-32V64C160 46.31 145.7 32 128 32z"/>',
viewBox: "0 0 448 512",
},
"check": {
check: {
path: '<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/>',
viewBox: "0 0 448 512",
},
"close": {
close: {
path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>',
viewBox: "0 0 24 24",
},
@@ -113,7 +113,7 @@
path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
viewBox: "0 0 24 24",
},
"list": {
list: {
path: '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5"/>',
viewBox: "0 0 24 24",
},
@@ -121,13 +121,12 @@
path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4"/>',
viewBox: "0 0 24 24",
},
"italic": {
italic: {
path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8.874 19 6.143-14M6 19h6.33m-.66-14H18"/>',
viewBox: "0 0 24 24",
}
},
};
export let width = 16;
export let height = 16;
export let icon = "";
@@ -138,16 +137,15 @@
</script>
<svg
class="bi"
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox={selectedIcon.viewBox}
aria-labelledby={icon}
role="presentation"
{stroke}
{fill}
class="bi"
xmlns="http://www.w3.org/2000/svg"
{width}
{height}
viewBox={selectedIcon.viewBox}
aria-labelledby={icon}
role="presentation"
{stroke}
{fill}
>
{@html selectedIcon.path}
</svg>
@@ -155,6 +153,5 @@
<style>
svg {
vertical-align: text-top;
}
</style>
front/js/svelte/content/tools/AppliedFilterNotLinked.svelte
+13 -13
View File
@@ -1,15 +1,14 @@
<script>
import {createEventDispatcher, getContext} from "svelte";
import Icon from "../../common/Icon.svelte";
import { createEventDispatcher, getContext } from "svelte";
import Icon from "../../../common/Icon.svelte";
const channel = getContext("channel");
const channel = getContext("channel");
const dispatch = createEventDispatcher();
export let inModal;
export let modalUrl;
const url = new URL(modalUrl ?? window.location.href);
function removeFilter(k) {
const url = new URL(modalUrl ?? window.location.href);
url.searchParams.set("skip", "0");
url.searchParams.delete("notlinked");
@@ -20,16 +19,17 @@
}
}
</script>
{#if url.searchParams.get("notlinked")}
<span class="applied-filter">
{#if url.searchParams.get("notlinked")}
<span class="applied-filter">
Not linked
<button
on:click|preventDefault={() => removeFilter()}
type="button"
class="button-text"
aria-label="Close"
><Icon width={12} height={12} icon="close"></Icon></button>
</span>
{/if}
on:click|preventDefault={() => removeFilter()}
type="button"
class="button-text"
aria-label="Close"
><Icon width={12} height={12} icon="close"></Icon></button
>
</span>
{/if}
front/js/svelte/content/tools/SortFields.svelte
+67 -59
View File
@@ -1,6 +1,6 @@
<script>
import Icon from "../../common/Icon.svelte";
import {createEventDispatcher} from "svelte";
import Icon from "../../../common/Icon.svelte";
import { createEventDispatcher } from "svelte";
import Dropdown from "../../common/Dropdown.svelte";
const dispatch = createEventDispatcher();
@@ -12,14 +12,22 @@
export let systemFields = [];
$: sortableFields = schema.fields.filter(
(f) => !["reference", "file", "json", "id", "rich", "markdown", "block"].includes(f.info.name)
(f) =>
![
"reference",
"file",
"json",
"id",
"rich",
"markdown",
"block",
].includes(f.info.name),
);
$: systemFieldsFiltered = systemFields;
$: if (schema.type === "collection") {
systemFieldsFiltered = systemFields.filter((f) => f.files === false);
}
function triggerSortField(fieldSort) {
const url = new URL(modalUrl ?? window.location.href);
url.searchParams.set("sort", fieldSort);
@@ -32,91 +40,91 @@
function sortAsc(e, field) {
e.preventDefault();
let prefix = systemFields.map((el) => el.name).includes(field.name) ? "" : "data.";
let prefix = systemFields.map((el) => el.name).includes(field.name)
? ""
: "data.";
return triggerSortField(prefix + field.name);
}
function sortDesc(e, field) {
e.preventDefault();
let prefix = systemFields.map((el) => el.name).includes(field.name) ? "" : "data.";
let prefix = systemFields.map((el) => el.name).includes(field.name)
? ""
: "data.";
return triggerSortField("-" + prefix + field.name);
}
</script>
<Dropdown>
<div slot="button">
{#if sortParam.startsWith("-")}
<Icon icon="arrow-down-wide-short"/>
<Icon icon="arrow-down-wide-short" />
{:else}
<Icon icon="arrow-up-short-wide"/>
<Icon icon="arrow-up-short-wide" />
{/if}
<span class="ms-1">{sortField.label}</span>
</div>
<div>
{#each sortableFields as field}
<div class="dropdown-item">
<button
{#each sortableFields as field}
<div class="dropdown-item">
<button
on:click={(e) => sortAsc(e, field)}
title="Sort Ascending"
class="button button-icon {field.name == sortField.name && !sortParam.startsWith("-")
? 'active'
: ''} "
>
<Icon icon="arrow-up-short-wide"/>
</button>
<button
class="button button-icon {field.name == sortField.name &&
!sortParam.startsWith('-')
? 'active'
: ''} "
>
<Icon icon="arrow-up-short-wide" />
</button>
<button
on:click={(e) => sortDesc(e, field)}
title="Sort Descending"
class="button button-icon {field.name == sortField.name && sortParam.startsWith("-")
? 'active'
: ''} "
>
<Icon icon="arrow-down-wide-short"/>
</button>
<button
class="button button-icon {field.name == sortField.name &&
sortParam.startsWith('-')
? 'active'
: ''} "
>
<Icon icon="arrow-down-wide-short" />
</button>
<button
title="Sort Ascending"
on:click={(e) => sortAsc(e, field)}
class="button"
>
{field.label}
</button>
</div>
{/each}
<h6 class="dropdown-header">System</h6>
{#each systemFieldsFiltered as field}
<div class="dropdown-item">
<button
>
{field.label}
</button>
</div>
{/each}
<h6 class="dropdown-header">System</h6>
{#each systemFieldsFiltered as field}
<div class="dropdown-item">
<button
on:click={(e) => sortAsc(e, field)}
title="Sort Ascending"
class="button button-icon {field.name == sortParam
? 'active'
: ''} "
>
<Icon icon="arrow-up-short-wide"/>
</button>
<button
class="button button-icon {field.name == sortParam
? 'active'
: ''} "
>
<Icon icon="arrow-up-short-wide" />
</button>
<button
on:click={(e) => sortDesc(e, field)}
title="Sort Descending"
class="button button-icon {'-' + field.name == sortParam
? 'active'
: ''} "
>
<Icon icon="arrow-down-wide-short"/>
</button>
<button
class="button button-icon {'-' + field.name == sortParam
? 'active'
: ''} "
>
<Icon icon="arrow-down-wide-short" />
</button>
<button
title="Sort Ascending"
on:click={(e) => sortAsc(e, field)}
class="button"
>
{field.label}
</button>
</div>
{/each}
>
{field.label}
</button>
</div>
{/each}
</div>
</Dropdown>
front/js/svelte/content/tools/Tools.svelte
+46 -58
View File
@@ -1,10 +1,10 @@
<script>
import FilterFields from "./FilterFields.svelte";
import Uploader from "../../files/Uploader.svelte";
import Icon from "../../common/Icon.svelte";
import Icon from "../../../common/Icon.svelte";
import SortFields from "./SortFields.svelte";
import AppliedFilter from "./AppliedFilter.svelte";
import {createEventDispatcher, getContext} from "svelte";
import { createEventDispatcher, getContext } from "svelte";
import Dropdown from "../../common/Dropdown.svelte";
import AppliedFilterNotLinked from "./AppliedFilterNotLinked.svelte";
@@ -41,7 +41,6 @@
} else {
window.location = url;
}
}
function uploadComplete(e) {
@@ -51,110 +50,99 @@
<div class="toolbar">
<div class="toolbar-filters">
<SortFields
{schema}
{sortParam}
{sortField}
{systemFields}
{inModal}
{modalUrl}
on:refresh
{schema}
{sortParam}
{sortField}
{systemFields}
{inModal}
{modalUrl}
on:refresh
/>
<FilterFields
bind:schema
{systemFields}
{operators}
{filter}
{inModal}
{modalUrl}
on:refresh
bind:schema
{systemFields}
{operators}
{filter}
{inModal}
{modalUrl}
on:refresh
/>
<form method="GET" on:submit={search}>
<input type="search" name="filter[search_regex]" placeholder="Search"
class="search" required>
<input
type="search"
name="filter[search_regex]"
placeholder="Search"
class="search"
required
/>
</form>
</div>
<div style="display:flex;align-items: center;gap:4px">
{#if schema.type === "collection"}
{#if !inModal && isWritable}
<a
href="{channel.lucentUrl}/records/new?schema={schema.name}"
class="button"
href="{channel.lucentUrl}/records/new?schema={schema.name}"
class="button"
>
New Record
</a>
{/if}
{:else }
{:else}
<div>
<Uploader {schema} on:uploadComplete={uploadComplete}/>
<Uploader {schema} on:uploadComplete={uploadComplete} />
</div>
{/if}
{#if !inModal}
<Dropdown orientation="right">
<div slot="button">
<Icon icon="ellipsis-vertical"/>
<Icon icon="ellipsis-vertical" />
</div>
{#if filter["status_in"] === "trashed"}
{#if isWritable}
<a
class="dropdown-item"
href="{channel.lucentUrl}/content/{schema.name}/emptyTrash"
class="dropdown-item"
href="{channel.lucentUrl}/content/{schema.name}/emptyTrash"
>
Empty trash
</a>
{/if}
{:else}
<a class="dropdown-item" href={csvUrl}>Export to CSV</a>
<a
class="dropdown-item"
href={csvUrl}
>Export to CSV</a
class="dropdown-item"
href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
>View trashed records</a
>
<a
class="dropdown-item"
href="{channel.lucentUrl}/content/{schema.name}?filter[status_in]=trashed"
>View trashed records</a
>
<a
class="dropdown-item"
href="{channel.lucentUrl}/content/{schema.name}?notlinked=*"
>View unlinked records</a
class="dropdown-item"
href="{channel.lucentUrl}/content/{schema.name}?notlinked=*"
>View unlinked records</a
>
{/if}
</Dropdown>
{/if}
</div>
</div>
<div class="applied-filters">
<AppliedFilterNotLinked
{inModal}
{modalUrl}
on:refresh
<AppliedFilterNotLinked {inModal} {modalUrl} on:refresh
></AppliedFilterNotLinked>
{#if Object.entries(filter).length > 0}
{#each Object.entries(filter) as [k, v]}
<AppliedFilter
{schema}
{operators}
key={k}
value={v}
{inModal}
{modalUrl}
{graph}
on:refresh
{schema}
{operators}
key={k}
value={v}
{inModal}
{modalUrl}
{graph}
on:refresh
/>
{/each}
{/if}
</div>
front/js/svelte/dialog/Dialog.svelte
+22 -26
View File
@@ -1,7 +1,6 @@
<script>
import {createEventDispatcher, getContext} from "svelte";
import Icon from "../common/Icon.svelte";
import { createEventDispatcher, getContext } from "svelte";
import Icon from "../../common/Icon.svelte";
import Index from "../content/Index.svelte";
import axios from "axios";
@@ -15,13 +14,12 @@
// load();
// });
export function close(e) {
if(e){
if (e) {
e.preventDefault();
}
dialogEl.close()
dialogEl.close();
selectedRecords = [];
}
@@ -52,42 +50,41 @@
}
export function open(schema) {
dialogEl.showModal()
dialogEl.showModal();
load(schema);
}
</script>
<dialog bind:this={dialogEl}>
{#if data.schema}
<div class="dialog-header">
<button
type="button"
class="button"
on:click={insert}
disabled={selectedRecords.length === 0}
type="button"
class="button"
on:click={insert}
disabled={selectedRecords.length === 0}
>
Insert
</button>
<button
type="button"
class="button"
on:click={replace}
disabled={selectedRecords.length === 0}
type="button"
class="button"
on:click={replace}
disabled={selectedRecords.length === 0}
>
Replace
</button>
{#if selectedRecords.length > 0}
<span class="">
{selectedRecords.length} records selected
</span>
<span class="">
{selectedRecords.length} records selected
</span>
{/if}
<button
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
>
<Icon icon="close"></Icon>
</button>
@@ -96,6 +93,5 @@
<div class="dialog-body">
<Index {...data} bind:selected={selectedRecords}></Index>
</div>
{/if}
</dialog>
</dialog>
front/js/svelte/dialog/DialogRecord.svelte
+10 -13
View File
@@ -1,6 +1,5 @@
<script>
import Icon from "../common/Icon.svelte";
import Icon from "../../common/Icon.svelte";
let dialogEl;
@@ -10,29 +9,27 @@
if (e) {
e.preventDefault();
}
dialogEl.close()
dialogEl.close();
}
export function open() {
dialogEl.showModal()
dialogEl.showModal();
}
</script>
<dialog bind:this={dialogEl}>
<div class="dialog-header">
<button
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
>
<Icon icon="close"></Icon>
</button>
</div>
<div class="dialog-body" style="min-width: 900px">
<slot/>
<slot />
</div>
</dialog>
</dialog>
front/js/svelte/files/Preview.svelte
+23 -24
View File
@@ -1,7 +1,7 @@
<script>
import Icon from "../common/Icon.svelte";
import {imgurl} from "./imageserver.js";
import {getContext} from "svelte";
import Icon from "../../common/Icon.svelte";
import { imgurl } from "./imageserver.js";
import { getContext } from "svelte";
export let record;
const channel = getContext("channel");
@@ -28,50 +28,49 @@
fontSize = "13";
}
</script>
<div style="display: flex;align-items: center;gap: 5px;">
{#if record}
{#if record._file.mime.startsWith("image")}
<!-- href={imgurl(record)} -->
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.originalName}
style="width:{imageSide}px;height:{imageSide}px"
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.originalName}
style="width:{imageSide}px;height:{imageSide}px"
>
<img
class="rounded w-100"
src={imgurl(channel,record)}
alt={record._file.path}
class="rounded w-100"
src={imgurl(channel, record)}
alt={record._file.path}
/>
</a>
{:else}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="file-preview-small"
style="width:{imageSide}px;height:{imageSide}px"
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="file-preview-small"
style="width:{imageSide}px;height:{imageSide}px"
>
<Icon icon="file" width={fileSide} height={fileSide}/>
<Icon icon="file" width={fileSide} height={fileSide} />
<span class="ms-2"
>.{record._file.path.split(".").pop().toLowerCase()}</span
>.{record._file.path.split(".").pop().toLowerCase()}</span
>
</a>
{/if}
{/if}
{#if showFilename}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="preview-file-filename lx-small-text text-decoration-none"
>{record._file.path} </a
>
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
class="preview-file-filename lx-small-text text-decoration-none"
>{record._file.path}
</a>
{/if}
</div>
<style>
img{
img {
border-radius: 12px;
padding: 4px;
}
</style>
</style>
front/js/svelte/records/Info.svelte
+1 -1
View File
@@ -2,7 +2,7 @@
import { friendlyDate } from "../../helpers";
import Avatar from "../../common/Avatar.svelte";
import { usernameById } from "../account/users";
import Icon from "../common/Icon.svelte";
import Icon from "../../common/Icon.svelte";
import RevisionCell from "./revisions/RevisionCell.svelte";
import { getContext } from "svelte";
import RevisionEdgeRow from "./revisions/RevisionEdgeRow.svelte";
front/js/svelte/records/elements/ReferenceInlineButtons.svelte
+24 -31
View File
@@ -1,6 +1,6 @@
<script>
import {createEventDispatcher, getContext} from "svelte";
import Icon from "../../common/Icon.svelte";
import { createEventDispatcher, getContext } from "svelte";
import Icon from "../../../common/Icon.svelte";
import InlineEdit from "../InlineEdit.svelte";
import Dialog from "../../dialog/Dialog.svelte";
import DialogRecord from "../../dialog/DialogRecord.svelte";
@@ -24,7 +24,7 @@
e.preventDefault();
console.log("Save inline");
inLineCreateRecord = null;
dialogRecord.close()
dialogRecord.close();
dispatch("save", {
records: e.detail.records,
after: recordId,
@@ -48,7 +48,7 @@
.get(channel.lucentUrl + "/records/newInline?schema=" + schemaUId)
.then((response) => {
inLineCreateRecord = response.data;
dialogRecord.open()
dialogRecord.open();
})
.catch((error) => {
console.log(error);
@@ -57,60 +57,53 @@
</script>
{#if schemas.length > 1}
<div
style="display: flex;align-items: center;gap:4px"
>
<div style="display: flex;align-items: center;gap:4px">
<Dropdown>
<div slot="button">New</div>
{#each schemas as schema}
<button
class=" button"
on:click={(e) =>
createInlineReference(e, schema.name)}
>{schema.label}
class=" button"
on:click={(e) => createInlineReference(e, schema.name)}
>{schema.label}
</button>
{/each}
</Dropdown>
<Dropdown>
<div slot="button"> <Icon icon="magnifying-glass"/></div>
<div slot="button"><Icon icon="magnifying-glass" /></div>
{#each schemas as schema}
<button
class="button"
on:click={(e) => openBrowseModal(e, schema.name)}
>{schema.label}
class="button"
on:click={(e) => openBrowseModal(e, schema.name)}
>{schema.label}
</button>
{/each}
</Dropdown>
</div>
{:else}
<div style="display:flex;align-items: center;gap: 4px">
<button
class="button"
on:click={(e) => createInlineReference(e, schemas[0].name)}
>New
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
class="button"
on:click={(e) => openBrowseModal(e, schemas[0].name)}
>
<Icon icon="magnifying-glass" />
</button>
</div>
{/if}
<DialogRecord bind:this={dialogRecord}>
{#if inLineCreateRecord}
<InlineEdit
{...inLineCreateRecord}
isCreateMode={true}
on:cancel={(e) => (inLineCreateRecord = null)}
on:inlinesaved={save}
{...inLineCreateRecord}
isCreateMode={true}
on:cancel={(e) => (inLineCreateRecord = null)}
on:inlinesaved={save}
/>
{/if}
</DialogRecord>
<Dialog bind:this={browseModal} on:insert={insert}/>
<Dialog bind:this={browseModal} on:insert={insert} />
front/js/svelte/records/elements/ReferenceTags.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
import { previewTitle } from "../Preview";
import { getErrorMessage } from "./errorMessage";
import { insertEdges } from "./reference.js";
import Icon from "../../common/Icon.svelte";
import Icon from "../../../common/Icon.svelte";
const channel = getContext("channel");
export let field;
front/js/svelte/records/elements/UUID.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script>
import { getContext } from "svelte";
import Icon from "../../common/Icon.svelte";
import Icon from "../../../common/Icon.svelte";
import { getErrorMessage } from "./errorMessage";
const channelurl = getContext("channelurl");
export let validationErrors;
front/js/svelte/records/header/EditHeader.svelte
+22 -23
View File
@@ -1,6 +1,6 @@
<script>
import {getContext} from "svelte";
import Icon from "../../common/Icon.svelte";
import { getContext } from "svelte";
import Icon from "../../../common/Icon.svelte";
import Dropdown from "../../common/Dropdown.svelte";
import StatusSelect from "./StatusSelect.svelte";
@@ -12,45 +12,44 @@
function clone(e) {
e.preventDefault();
axios.post(channel.lucentUrl + "/records/clone/" + record.id).then(response => {
window.location = channel.lucentUrl + "/records/" + response.data.id;
}).catch(error => {
});
axios
.post(channel.lucentUrl + "/records/clone/" + record.id)
.then((response) => {
window.location =
channel.lucentUrl + "/records/" + response.data.id;
})
.catch((error) => {});
}
</script>
<div style="display: flex;align-items: center; gap:10px;">
{#if !isCreateMode}
<Dropdown >
<Dropdown>
<div slot="button">
<Icon icon="ellipsis"/>
<Icon icon="ellipsis" />
</div>
<h6 class="dropdown-header">Record Actions</h6>
<a
class="dropdown-item"
href="{channel.lucentUrl}/records/new?schema={schema.name}"
>Create new</a
class="dropdown-item"
href="{channel.lucentUrl}/records/new?schema={schema.name}"
>Create new</a
>
{#if !isCreateMode}
<a
class="dropdown-item"
on:click={clone}
href={channel.lucentUrl}
class="dropdown-item"
on:click={clone}
href={channel.lucentUrl}
>
Clone
</a>
{/if}
<a
on:click|preventDefault={(e) =>
(activeContentTab = "_info")}
class="dropdown-item"
href="{channel.lucentUrl}">Revisions</a
on:click|preventDefault={(e) => (activeContentTab = "_info")}
class="dropdown-item"
href={channel.lucentUrl}>Revisions</a
>
</Dropdown>
{/if}
<StatusSelect bind:status={record.status} {record}></StatusSelect>
</div>
<StatusSelect bind:status={record.status} {record}></StatusSelect>
</div>
front/js/svelte/records/previews/PreviewFile.svelte
+32 -28
View File
@@ -1,10 +1,10 @@
<script>
import Icon from "../../common/Icon.svelte";
import Icon from "../../../common/Icon.svelte";
import {createEventDispatcher, getContext} from "svelte";
import { createEventDispatcher, getContext } from "svelte";
import Preview from "../../files/Preview.svelte";
import {previewTitle} from "./../Preview";
import {fileurl, htmlurl} from "../../files/imageserver.js"
import { previewTitle } from "./../Preview";
import { fileurl, htmlurl } from "../../files/imageserver.js";
import Status from "./../Status.svelte";
import Dropdown from "../../common/Dropdown.svelte";
@@ -14,7 +14,9 @@
export let hasDelete = false;
export let hasInsert = false;
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
let schema = channel.schemas.find(
(aschema) => aschema.name === record.schema,
);
let cardTitle = previewTitle(channel.schemas, record);
let imagePresets = Object.keys(channel.imageFilters);
@@ -25,67 +27,69 @@
function insert(e, preset) {
e.preventDefault();
let html = htmlurl(channel, record, preset)
let url = !preset ? `/${record._file.path}` : `/templates/${preset}/${record._file.path}`;
let html = htmlurl(channel, record, preset);
let url = !preset
? `/${record._file.path}`
: `/templates/${preset}/${record._file.path}`;
dispatch("editor-insert", {
html: html,
url: channel.filesUrl + url,
originalUrl: channel.filesUrl + "/" + record._file.path,
record: record
url: channel.filesUrl + url,
originalUrl: channel.filesUrl + "/" + record._file.path,
record: record,
});
}
</script>
<div class="preview-file">
<div style="display: flex;align-items: center;gap: 10px;">
<div class="image">
<Preview {record} size="small"/>
<Preview {record} size="small" />
</div>
<div class="title">
<div>
<a
class="record-title"
href="{channel.lucentUrl}/records/{record.id}"
class="record-title"
href="{channel.lucentUrl}/records/{record.id}"
>
{cardTitle}
</a>
<small class="d-block">
from {schema.label}
{#if record.status === "draft"}
<Status status={record.status}/>
<Status status={record.status} />
{/if}
</small>
</div>
</div>
</div>
<div style="display: flex;gap:4px; align-items: center; margin-right: 10px;">
<div
style="display: flex;gap:4px; align-items: center; margin-right: 10px;"
>
{#if hasInsert}
<div class="reference-action">
<Dropdown>
<div slot="button">
<Icon icon="photo-film"/>
<Icon icon="photo-film" />
</div>
<button class="dropdown-item button" on:click={e => insert(e,null)}>original</button>
<button
class="dropdown-item button"
on:click={(e) => insert(e, null)}>original</button
>
{#each imagePresets as preset}
<button class="dropdown-item button" on:click={e => insert(e,preset)}>{preset}</button>
<button
class="dropdown-item button"
on:click={(e) => insert(e, preset)}>{preset}</button
>
{/each}
</Dropdown>
</div>
{/if}
{#if hasDelete}
<div class="reference-action">
<button
class="button"
on:click={remove}
>
<Icon icon="trash-can"/>
<button class="button" on:click={remove}>
<Icon icon="trash-can" />
</button>
</div>
{/if}
</div>
</div>
front/js/svelte/records/previews/PreviewReference.svelte
+18 -20
View File
@@ -1,8 +1,8 @@
<script>
import Icon from "../../common/Icon.svelte";
import Icon from "../../../common/Icon.svelte";
import {createEventDispatcher, getContext} from "svelte";
import {previewTitle} from "./../Preview";
import { createEventDispatcher, getContext } from "svelte";
import { previewTitle } from "./../Preview";
import Status from "./../Status.svelte";
import Preview from "../../files/Preview.svelte";
@@ -12,10 +12,16 @@
export let record;
export let hasDelete = false;
let schema = channel.schemas.find((aschema) => aschema.name === record.schema);
let schema = channel.schemas.find(
(aschema) => aschema.name === record.schema,
);
let cardTitle = previewTitle(channel.schemas, record, graph);
const cardImageEdge = graph.edges.find(e => e.source === record.id && e.field === schema.cardImage);
let cardImageRecord = graph.records.find(r => r.id === cardImageEdge?.target);
const cardImageEdge = graph.edges.find(
(e) => e.source === record.id && e.field === schema.cardImage,
);
let cardImageRecord = graph.records.find(
(r) => r.id === cardImageEdge?.target,
);
function remove(e) {
e.preventDefault();
@@ -23,43 +29,35 @@
}
</script>
<div class="preview-reference">
<div style="display: flex;align-items: center;gap: 10px;">
{#if cardImageRecord}
<div class="image">
<Preview record={cardImageRecord} size="small"/>
<Preview record={cardImageRecord} size="small" />
</div>
{/if}
<div class="title">
<div>
<a
class="record-title"
href="{channel.lucentUrl}/records/{record.id}"
class="record-title"
href="{channel.lucentUrl}/records/{record.id}"
>
{cardTitle}
</a>
<small class="d-block">
from {schema.label}
{#if record.status === "draft"}
<Status status={record.status}/>
<Status status={record.status} />
{/if}
</small>
</div>
</div>
</div>
{#if hasDelete}
<div class="reference-action">
<button
class="button"
on:click={remove}
>
<Icon icon="trash-can"/>
<button class="button" on:click={remove}>
<Icon icon="trash-can" />
</button>
</div>
{/if}
</div>
front/js/svelte/setup/Index.svelte
-20
View File
@@ -1,20 +0,0 @@
<script>
import Step from "./Step.svelte"
export let steps;
export let allSuccess = false;
console.log(steps);
</script>
<div class="wrapper-tiny">
{#each steps as step}
<Step {step}></Step>
{/each}
<div style="text-align: center;margin-top: 30px;">
{#if allSuccess}
<a href="/lucent/register" class="bt">Create the first user</a>
{/if}
</div>
</div>
front/js/svelte/setup/Step.svelte
-67
View File
@@ -1,67 +0,0 @@
<script>
import Icon from "../common/Icon.svelte"
export let step;
</script>
<div class="step step-{step.status}">
<div class="step-icon">
{#if step.status === "success"}
<Icon icon="check"></Icon>
{:else}
<Icon icon="close"></Icon>
{/if}
</div>
<div style="width:100%">
<h4>{step.name}</h4>
<details>
<summary>Instuctions</summary>
<code class="instructions">{step.instructions}</code>
</details>
</div>
</div>
<style>
.step-success .step-icon{
background: var(--suc10);
color: var(--suc100);
}
.step-fail .step-icon{
background: var(--err10);
color: var(--err100);
}
.step-icon{
padding: 12px;
border-radius: 12px;
}
.step {
width: 100%;
display: flex;
align-items: start;
gap: 10px;
justify-content: space-between;
padding: 12px;
border-radius: 12px;
}
details {
width: 100%;
}
.instructions {
margin-top: 20px;
padding: 12px;
border-radius: 12px;
background: var(--p10);
white-space: break-spaces;
display: block;
}
</style>