wip upload files and select

2026-05-05 19:21:59 +03:00
parent bd01e5c32c
commit 16e50e2d49
13 changed files with 439 additions and 208 deletions
@@ -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>