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

wip upload files and select

Browse Source
This commit is contained in:
Alex Lingris
2026-05-05 19:21:59 +03:00
parent bd01e5c32c
commit 16e50e2d49
13 changed files with 439 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/js/svelte/dialog/FileDialog.svelte
+44 -48
View File
@@ -1,15 +1,14 @@
<script>
import { createEventDispatcher, getContext } from "svelte";
import Icon from "../common/Icon.svelte";
import Index from "../content/Index.svelte";
import axios from "axios";
import FileIndex from "./FileIndex.svelte";
let dialogEl;
const dispatch = createEventDispatcher();
const channel = getContext("channel");
$: data = {};
let selectedRecords = [];
$: files = [];
$: selectedRecords = [];
// onMount(() => {
// load();
// });
@@ -23,11 +22,11 @@
selectedRecords = [];
}
function load(schema) {
axios
.get(channel.lucentUrl + "/content/" + schema)
.then((response) => {
data = response.data;
function load(recordId) {
fetch(channel.lucentUrl + "/records/files/?recordId=" + recordId)
.then((response) => response.json())
.then((json) => {
files = json;
})
.catch((error) => console.log(error));
}
@@ -37,7 +36,6 @@
dispatch("insert", {
records: selectedRecords,
action: "insert",
schema: data.schema.name,
});
}
@@ -49,49 +47,47 @@
});
}
export function open(schema) {
export function open(recordId) {
dialogEl.showModal();
load(schema);
load(recordId);
}
</script>
<dialog bind:this={dialogEl}>
{#if data.schema}
<div class="dialog-header">
<button
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}
>
Replace
</button>
{#if selectedRecords.length > 0}
<span class="">
{selectedRecords.length} records selected
</span>
{/if}
<div class="dialog-header">
<button
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}
>
Replace
</button>
{#if selectedRecords.length > 0}
<span class="">
{selectedRecords.length} records selected
</span>
{/if}
<button
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
>
<Icon icon="close"></Icon>
</button>
</div>
<button
on:click|preventDefault={close}
type="button"
class="button close"
aria-label="Close"
>
<Icon icon="close"></Icon>
</button>
</div>
<div class="dialog-body">
<Index {...data} bind:selected={selectedRecords}></Index>
</div>
{/if}
<div class="dialog-body">
<FileIndex {files} bind:selected={selectedRecords}></FileIndex>
</div>
</dialog>
front/js/svelte/dialog/FileIndex.svelte
+119
View File
@@ -0,0 +1,119 @@
<script>
import { getContext } from "svelte";
import Icon from "../common/Icon.svelte";
import Checkbox from "../common/Checkbox.svelte";
import Preview from "../files/Preview.svelte";
import { fileurl } from "../files/imageserver";
const channel = getContext("channel");
export let files = [];
export let selected = [];
export let isWritable = true;
function eventToggleAll(e) {
selected = toggleAll(e, files, selected);
}
function select(file) {
selected = selectFile(file, selected);
}
export const toggleAll = (e, files, selected) => {
if (selected.length === files.length) {
return [];
}
e.currentTarget.checked = selected.length > 0;
return files;
};
export const selectFile = (file, selected) => {
let fileExists = selected.find((r) => r.id === file.id);
if (fileExists) {
return selected.filter((r) => r.id !== file.id);
}
return [...selected, file];
};
</script>
<div class="table mt-5">
<table>
<thead>
<tr>
{#if isWritable}
<th>
<Checkbox
value=""
on:change={eventToggleAll}
indeterminate={selected.length > 0 &&
selected.length < files.length}
checked={selected.length === files.length}
></Checkbox>
</th>
{/if}
<th></th>
</tr>
</thead>
<tbody>
{#each files as file (file.id)}
<tr>
<td class="title-td">
<div class="title-td-contents">
{#if isWritable}
<Checkbox
on:change={() => select(file)}
checked={selected.find(
(s) => s.id === file.id,
)}
value={file}
></Checkbox>
{/if}
<div class="file-table-row">
<Preview
{file}
size={file.width > 0 ? "medium" : "small"}
/>
<div>
{file.filename}
<span
>{(file.size / 1024).toFixed(1)}kB</span
>
{#if file.width > 0}
<span
>{file.width +
"x" +
file.height}</span
>
{/if}
<a
href={fileurl(channel, file)}
target="_blank"
>
Download
</a>
</div>
</div>
</div>
</td>
<!-- <RecordRow
{record}
{graph}
{schema}
{visibleColumns}
{sortParam}
{sortField}
{users}
/> -->
<!-- <td>
<Avatar
name={usernameById(users, record._sys.updatedBy)}
side={24}
/>
</td> -->
</tr>
{/each}
</tbody>
</table>
</div>