wip upload files and select

front/js/svelte/content/tools/Tools.svelte

@@ -42,10 +42,6 @@
             window.location = url;
         }
     }
-
-    function uploadComplete(e) {
-        records = e.detail;
-    }
 </script>
 
 <div class="toolbar">

front/js/svelte/dialog/FileDialog.svelte

@@ -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

@@ -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

@@ -1,9 +1,9 @@
 <script>
     import Icon from "../common/Icon.svelte";
-    import {imgurl} from "./imageserver.js";
-    import {getContext} from "svelte";
+    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,50 +28,49 @@
         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}/>
+                <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>
 
 <style>
-    img{
+    img {
         border-radius: 12px;
         padding: 4px;
     }
-
 </style>

front/js/svelte/files/imageserver.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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('/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::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::middleware(["lucent.auth"])->prefix("/edges")->group(function () {
-        Route::post('/insert-many', [EdgeController::class, 'insertMany']);
+        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('/records/{rid}/revisions', [RevisionController::class, 'index']);
+            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("/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::middleware(["lucent.auth"])
+            ->prefix("/edges")
+            ->group(function () {
+                Route::post("/insert-many", [
+                    EdgeController::class,
+                    "insertMany",
+                ]);
             });
 
         Route::middleware(["lucent.auth"])->group(function () {
-        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::get("/records/{rid}/revisions", [
+                RevisionController::class,
+                "index",
+            ]);
         });
 
         Route::middleware(["lucent.auth"])->group(function () {
-        Route::post('/files/upload', [FileController::class, 'upload']);
-        Route::get('/files/download', [FileController::class, 'download']);
+            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"])->group(function () {
+            Route::post("/files/upload", [FileController::class, "upload"]);
+            Route::get("/files/download", [FileController::class, "download"]);
+        });
+    },
+);