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/content/tools/Tools.svelte
-4
View File
@@ -42,10 +42,6 @@
window.location = url;
}
}
function uploadComplete(e) {
records = e.detail;
}
</script>
<div class="toolbar">
front/js/svelte/dialog/FileDialog.svelte
+11 -15
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,14 +47,13 @@
});
}
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"
@@ -91,7 +88,6 @@
</div>
<div class="dialog-body">
<Index {...data} bind:selected={selectedRecords}></Index>
<FileIndex {files} bind:selected={selectedRecords}></FileIndex>
</div>
{/if}
</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>
front/js/svelte/files/Preview.svelte
+15 -16
View File
@@ -3,7 +3,7 @@
import { imgurl } from "./imageserver.js";
import { getContext } from "svelte";
export let record;
export let file;
const channel = getContext("channel");
export let size = "small";
export let showFilename = false;
@@ -28,43 +28,43 @@
fontSize = "13";
}
</script>
<div style="display: flex;align-items: center;gap: 5px;">
{#if record}
{#if record._file.mime.startsWith("image")}
<div style="display: flex;align-items: center;gap: 5px;">
{#if file}
{#if file.mime.startsWith("image")}
<!-- href={imgurl(record)} -->
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.originalName}
href="{channel.lucentUrl}/files/{file.id}"
title={file.filename}
style="width:{imageSide}px;height:{imageSide}px"
>
<img
class="rounded w-100"
src={imgurl(channel,record)}
alt={record._file.path}
src={imgurl(channel, file)}
alt={file.path}
/>
</a>
{:else}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
href="{channel.lucentUrl}/files/{file.id}"
title={file.path}
class="file-preview-small"
style="width:{imageSide}px;height:{imageSide}px"
>
<Icon icon="file" width={fileSide} height={fileSide} />
<span class="ms-2"
>.{record._file.path.split(".").pop().toLowerCase()}</span
>.{file.path.split(".").pop().toLowerCase()}</span
>
</a>
{/if}
{/if}
{#if showFilename}
<a
href="{channel.lucentUrl}/records/{record.id}"
title={record._file.path}
href="{channel.lucentUrl}/files/{file.id}"
title={file.path}
class="preview-file-filename lx-small-text text-decoration-none"
>{record._file.path} </a
>
>{file.path}
</a>
{/if}
</div>
@@ -73,5 +73,4 @@
border-radius: 12px;
padding: 4px;
}
</style>
front/js/svelte/files/imageserver.js
+14 -15
View File
@@ -1,29 +1,28 @@
export function imgurl(channel, record) {
if (record._file.mime === "image/svg+xml") {
return fileurl(channel, record);
export function imgurl(channel, file) {
if (file.mime === "image/svg+xml") {
return fileurl(channel, file);
}
return channel.disks[record._file.disk] + `/thumbs/${record._file.path}`;
return channel.filesUrl + `/thumbs/${file.path}`;
}
export function fileurl(channel, record) {
return channel.disks[record._file.disk] + `/${record._file.path}`;
export function fileurl(channel, file) {
return channel.filesUrl + `/${file.path}`;
}
export function htmlurl(channel, record, preset) {
export function htmlurl(channel, file, preset) {
let html = "";
let url = fileurl(channel, record)
let url = fileurl(channel, file);
if (record._file.width > 0) {
if (file.width > 0) {
let presetUrl = url;
if (preset) {
presetUrl = channel.disks[record._file.disk] + `/templates/${preset}/${record._file.path}`;
presetUrl = channel.filesUrl + `/templates/${preset}/${file.path}`;
}
html = `<img src="${presetUrl}" alt="${record._file.path}" />`
} else if (record._file.mime === "image/svg+xml") {
html = `<img src="${url}" alt="${record._file.path}"/>`
html = `<img src="${presetUrl}" alt="${file.path}" />`;
} else if (file.mime === "image/svg+xml") {
html = `<img src="${url}" alt="${file.path}"/>`;
} else {
html = `<a href="${url}">${record._file.originalName}</a>`
html = `<a href="${url}">${file.originalName}</a>`;
}
return html;
front/js/svelte/records/elements/File.svelte
+7 -12
View File
@@ -22,11 +22,6 @@
);
}
function openBrowseModal(e, schema) {
e.preventDefault();
browseModal.open(schema);
}
async function reorder(e) {
graph.edges = await sortByField(
e.detail.source,
@@ -52,15 +47,15 @@
function uploadComplete(e) {
records = e.detail;
}
function openBrowseModal(e) {
e.preventDefault();
browseModal.open(record.id);
}
</script>
<div class="mb-0">
<!-- <button
class="button"
on:click={(e) => openFileModal(e, collections[0].name)}
>
Browse
</button> -->
<button class="button" on:click={openBrowseModal}> Browse </button>
<div>
<Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
@@ -80,4 +75,4 @@
{/each}
</Sortable>
{/if} -->
<!-- <FileDialog bind:this={browseModal} on:insert={insert}></FileDialog> -->
<FileDialog bind:this={browseModal} on:insert={insert}></FileDialog>
src/Channel/Channel.php
+6 -4
View File
@@ -28,18 +28,20 @@ final class Channel
) {
$this->lucentUrl = $url . "/lucent";
$this->filesUrl = $this->makeFilesUrl();
$this->previewTargetUrl = $url . "/" . $previewTarget;
}
private function makeFilesUrl(): string
{
return match (config("filesystems.disks.lucent.driver")) {
"s3" => config("filesystems.disks.lucent.endpoint") .
$lucentDisk = config("lucent.disk");
return match (config("filesystems.disks.$lucentDisk.driver")) {
"s3" => config("filesystems.disks.$lucentDisk.endpoint") .
"/" .
config("filesystems.disks.lucent.bucket"),
config("filesystems.disks.$lucentDisk.bucket"),
"local" => $this->url .
"/storage" .
config("filesystems.disks.lucent.endpoint"),
config("filesystems.disks.$lucentDisk.endpoint"),
default => "",
};
}
src/Commands/SetupDatabase.php
+4 -4
View File
@@ -110,9 +110,9 @@ class SetupDatabase extends Command
Blueprint $table,
) {
$table->uuid("id")->primary();
$table->uuid("record");
$table->string("name");
$table->string("ogName");
$table->uuid("recordId");
$table->string("filename");
$table->jsonb("captions");
$table->string("mime");
$table->string("path");
$table->integer("size");
@@ -122,7 +122,7 @@ class SetupDatabase extends Command
});
DB::statement(
"CREATE INDEX ON " . $this->prefix . "files (record)",
"CREATE INDEX ON " . $this->prefix . "files (recordId)",
);
}
}
src/Data/File.php
+35 -2
View File
@@ -2,12 +2,14 @@
namespace Lucent\Data;
use stdClass;
class File
{
function __construct(
public readonly string $id,
public readonly string $recordId,
public readonly string $originalName,
public readonly string $filename,
public readonly string $mime,
public readonly string $path,
public readonly int $size,
@@ -21,7 +23,22 @@ class File
return new File(
id: data_get($data, "id"),
recordId: data_get($data, "recordId"),
originalName: data_get($data, "originalName"),
filename: data_get($data, "filename"),
mime: data_get($data, "mime"),
path: data_get($data, "path"),
size: data_get($data, "size"),
width: data_get($data, "width"),
height: data_get($data, "height"),
checksum: data_get($data, "checksum"),
);
}
public static function fromDB(stdClass $data): File
{
return new File(
id: data_get($data, "id"),
recordId: data_get($data, "recordId"),
filename: data_get($data, "filename"),
mime: data_get($data, "mime"),
path: data_get($data, "path"),
size: data_get($data, "size"),
@@ -35,4 +52,20 @@ class File
{
return \json_decode(\json_encode($this), true);
}
public function toDB(): array
{
return [
"id" => $this->id,
"recordId" => $this->recordId,
"filename" => $this->filename,
"mime" => $this->mime,
"path" => $this->path,
"size" => $this->size,
"width" => $this->width,
"height" => $this->height,
"checksum" => $this->checksum,
"captions" => "[]", // for the future
];
}
}
src/File/FileRepo.php
+30
View File
@@ -0,0 +1,30 @@
<?php
namespace Lucent\File;
use Lucent\Data\File as DataFile;
use Lucent\Database\Database;
use Lucent\Data\File;
class FileRepo
{
public function __construct() {}
public static function create(DataFile $file): void
{
Database::make()->table("lucent_files")->insert($file->toDB());
}
/**
* @return File[]
*/
public static function byRecordId(string $recordId): array
{
return Database::make()
->table("lucent_files")
->where("recordId", $recordId)
->get()
->map(File::fromDB(...))
->toArray();
}
}
src/File/FileService.php
+16 -4
View File
@@ -85,10 +85,10 @@ class FileService
[$width, $height] = $this->isImage($mimetype)
? getimagesize($file)
: [0, 0];
return new DataFile(
$dataFile = new DataFile(
id: Id::new(),
recordId: $recordId,
originalName: $originalFilename,
filename: $originalFilename,
mime: $mimetype,
path: $path,
size: $file->getSize(),
@@ -96,6 +96,9 @@ class FileService
height: $height,
checksum: $checksum,
);
FileRepo::create($dataFile);
return $dataFile;
}
private function createFileName(
@@ -112,10 +115,11 @@ class FileService
private function isImage(string $mimetype): bool
{
$imageMimes = [
"image/webp",
"image/gif",
"image/jpeg",
"image/png",
"image/avif",
"image/webp",
"image/gif",
"image/tiff",
];
return in_array($mimetype, $imageMimes);
@@ -156,4 +160,12 @@ class FileService
$image = $originalImage->fit(300, 300);
$disk->put($thumbDir, $image->encode("webp", 75));
}
/**
* @return DataFile[]
*/
public function filesForRecord(string $recordId): array
{
return FileRepo::byRecordId($recordId);
}
}
src/Http/Controller/RecordController.php
+9
View File
@@ -15,6 +15,7 @@ use Lucent\Record\InputData\RecordInputData;
use Lucent\Record\Manager;
use Lucent\Record\QueryRecord;
use Lucent\Record\RecordService;
use Lucent\File\FileService;
use Lucent\Record\Status;
use Lucent\Schema\System;
use Lucent\Schema\Ui\Reference;
@@ -30,6 +31,7 @@ class RecordController extends Controller
private readonly RecordService $recordService,
private readonly AccountService $accountService,
private readonly ChannelService $channelService,
private readonly FileService $fileService,
private readonly Svelte $svelte,
private readonly Query $query,
private readonly Manager $recordManager,
@@ -493,4 +495,11 @@ class RecordController extends Controller
}
return ok();
}
public function files(Request $request)
{
$recordId = $request->input("recordId");
return $this->fileService->filesForRecord($recordId);
}
}
src/Http/web.php
+103 -62
View File
@@ -12,89 +12,130 @@ use Lucent\Http\Controller\RecordController;
use Lucent\Http\Controller\RevisionController;
use Lucent\Http\Controller\SetupController;
Route::get("/lucent/setup", [SetupController::class, "setup"]);
Route::get("/lfs-{disk}/{any}", [FileController::class, "fromDisk"])->where(
"any",
".*",
);
Route::get('/lucent/setup', [SetupController::class, 'setup']);
Route::get('/lfs-{disk}/{any}', [FileController::class, 'fromDisk'])->where('any', '.*');
Route::group([
'middleware' => ['web'],
'prefix' => "lucent"
], function () {
Route::middleware(['lucent.guest'])->group(function () {
Route::get('/', [AuthController::class, 'login']);
Route::get('/register', [AuthController::class, 'register']);
Route::post('/register', [AuthController::class, 'postRegister']);
Route::get('/login', [AuthController::class, 'login']);
Route::post('/login', [AuthController::class, 'postLogin']);
Route::get('/verify', [AuthController::class, 'verify']);
Route::post('/verify', [AuthController::class, 'postVerify']);
Route::group(
[
"middleware" => ["web"],
"prefix" => "lucent",
],
function () {
Route::middleware(["lucent.guest"])->group(function () {
Route::get("/", [AuthController::class, "login"]);
Route::get("/register", [AuthController::class, "register"]);
Route::post("/register", [AuthController::class, "postRegister"]);
Route::get("/login", [AuthController::class, "login"]);
Route::post("/login", [AuthController::class, "postLogin"]);
Route::get("/verify", [AuthController::class, "verify"]);
Route::post("/verify", [AuthController::class, "postVerify"]);
});
Route::middleware('lucent.auth')->group(function () {
Route::get('/logout', [AuthController::class, 'logout']);
Route::get('/profile', [AccountController::class, 'profile']);
Route::post('/account/update-name', [AccountController::class, 'updateName']);
Route::post('/account/update-email', [AccountController::class, 'updateEmail']);
Route::get('/command-report/{signature}', [BuildController::class, 'report']);
Route::get('/command-report-source/{signature}', [BuildController::class, 'reportSource']);
Route::post('/command/{signature}', [BuildController::class, 'build']);
Route::middleware("lucent.auth")->group(function () {
Route::get("/logout", [AuthController::class, "logout"]);
Route::get("/profile", [AccountController::class, "profile"]);
Route::post("/account/update-name", [
AccountController::class,
"updateName",
]);
Route::post("/account/update-email", [
AccountController::class,
"updateEmail",
]);
Route::get("/command-report/{signature}", [
BuildController::class,
"report",
]);
Route::get("/command-report-source/{signature}", [
BuildController::class,
"reportSource",
]);
Route::post("/command/{signature}", [
BuildController::class,
"build",
]);
});
Route::middleware(["lucent.auth"])->group(function () {
Route::get('/members/', [MemberController::class, 'index']);
Route::post('/members/invite', [MemberController::class, 'invite']);
Route::post('/members/update', [MemberController::class, 'update']);
Route::get("/members/", [MemberController::class, "index"]);
Route::post("/members/invite", [MemberController::class, "invite"]);
Route::post("/members/update", [MemberController::class, "update"]);
});
Route::middleware(["lucent.auth"])->prefix("/records")->group(function () {
Route::get('/new', [RecordController::class, 'new']);
Route::get('/newInline', [RecordController::class, 'newInline']);
Route::get('/suggestions', [RecordController::class, 'suggestions']);
Route::get('/{rid}', [RecordController::class, 'edit']);
Route::post('/clone/{rid}', [RecordController::class, 'clone']);
Route::middleware(["lucent.auth"])
->prefix("/records")
->group(function () {
Route::get("/files", [RecordController::class, "files"]);
Route::get("/new", [RecordController::class, "new"]);
Route::get("/newInline", [
RecordController::class,
"newInline",
]);
Route::get("/suggestions", [
RecordController::class,
"suggestions",
]);
Route::get("/{rid}", [RecordController::class, "edit"]);
Route::post("/clone/{rid}", [RecordController::class, "clone"]);
// Route::get('/editInline/{rid}', [RecordController::class, 'editInline']);
Route::get('/{rid}/parents', [RecordController::class, 'parents']);
Route::post('/', [RecordController::class, 'save']);
Route::post('/status/{status}', [RecordController::class, 'status']);
Route::post('/delete', [RecordController::class, 'delete']);
Route::post('/{rid}/rollback/{version}', [RecordController::class, 'rollback']);
Route::get("/{rid}/parents", [
RecordController::class,
"parents",
]);
Route::post("/", [RecordController::class, "save"]);
Route::post("/status/{status}", [
RecordController::class,
"status",
]);
Route::post("/delete", [RecordController::class, "delete"]);
Route::post("/{rid}/rollback/{version}", [
RecordController::class,
"rollback",
]);
});
Route::middleware(["lucent.auth"])->prefix("/edges")->group(function () {
Route::post('/insert-many', [EdgeController::class, 'insertMany']);
Route::middleware(["lucent.auth"])
->prefix("/edges")
->group(function () {
Route::post("/insert-many", [
EdgeController::class,
"insertMany",
]);
});
Route::middleware(["lucent.auth"])->group(function () {
Route::get('/records/{rid}/revisions', [RevisionController::class, 'index']);
Route::get("/records/{rid}/revisions", [
RevisionController::class,
"index",
]);
});
Route::middleware(["lucent.auth"])->group(function () {
Route::get('/', [HomeController::class, 'home']);
Route::get('/home/records', [HomeController::class, 'records']);
Route::get("/", [HomeController::class, "home"]);
Route::get("/home/records", [HomeController::class, "records"]);
});
Route::middleware(["lucent.auth"])->prefix("/content")->group(function () {
Route::get('/{schemaName}', [RecordController::class, 'index']);
Route::get('/{schemaName}/csv', [RecordController::class, 'exportCSV']);
Route::get('/{schemaName}/emptyTrash', [RecordController::class, 'emptyTrash']);
Route::middleware(["lucent.auth"])
->prefix("/content")
->group(function () {
Route::get("/{schemaName}", [RecordController::class, "index"]);
Route::get("/{schemaName}/csv", [
RecordController::class,
"exportCSV",
]);
Route::get("/{schemaName}/emptyTrash", [
RecordController::class,
"emptyTrash",
]);
});
Route::middleware(["lucent.auth"])->group(function () {
Route::post('/files/upload', [FileController::class, 'upload']);
Route::get('/files/download', [FileController::class, 'download']);
Route::post("/files/upload", [FileController::class, "upload"]);
Route::get("/files/download", [FileController::class, "download"]);
});
});
},
);