content tables

2026-01-12 19:25:40 +02:00
parent b0485e77fc
commit 178b9309ec
16 changed files with 483 additions and 23 deletions
@@ -0,0 +1,120 @@
+<script>
+    // import RecordRow from "./RecordRow.svelte";
+    // import { previewTitle } from "../records/Preview";
+    // import { usernameById } from "../account/users";
+    // import Avatar from "../../common/Avatar.svelte";
+    // import { selectRecord, toggleAll } from "./functions/recordSelect.js";
+    // import Checkbox from "../common/Checkbox.svelte";
+    // import Preview from "../files/Preview.svelte";
+    // import { fileurl } from "../files/imageserver.js";
+    import { getApp } from "../../app";
+
+    let { channel, records = [], fields = [], inModal = false } = $props();
+    let params = new URLSearchParams(document.location.search);
+    let columns = $state(params.get("columns")?.split(",") || []);
+    let visibleFields = $derived(fields.filter((f) => columns.includes(f.id)));
+    // export let schema;
+    // export let users;
+    // export let records;
+    // export let graph;
+    // export let systemFields;
+    // export let sortParam;
+    // export let sortField;
+    // export let inModal;
+    // export let isWritable;
+    // export let selected = [];
+    const app = getApp();
+
+    // function eventToggleAll(e) {
+    //     selected = toggleAll(e, records, selected);
+    // }
+
+    // function select(record) {
+    //     selected = selectRecord(record, selected);
+    // }
+
+    // $: visibleColumns = schema.fields.filter(
+    //     (c) => schema.visible?.includes(c.name) ?? [],
+    // );
+</script>
+
+<div class="table mt-5">
+    <table>
+        <thead>
+            <tr>
+                <!-- <th>
+                    <Checkbox
+                        value=""
+                        on:change={eventToggleAll}
+                        indeterminate={selected.length > 0 &&
+                            selected.length < records.length}
+                        checked={selected.length === records.length}
+                    ></Checkbox>
+                </th> -->
+                <th>Title</th>
+
+                {#each visibleFields as field}
+                    <th scope="col" title={field.help}>{field.name}</th>
+                {/each}
+                <!-- {#each systemFields.filter( (c) => schema.visible?.includes(c.name), ) as sysField}
+                    <th class:is-sort={sysField.name === sortField.name}
+                        >{sysField.label}</th
+                    >
+                {/each} -->
+                <!-- <th></th> -->
+            </tr>
+        </thead>
+        <tbody>
+            {#each records as qRecord (qRecord.record.id)}
+                <tr>
+                    <td class="title-td">
+                        <div class="title-td-contents">
+                            <!-- <Checkbox
+                                on:change={() => select(record)}
+                                checked={selected.find(
+                                    (r) => r.id === record.id,
+                                )}
+                                value={record}
+                            ></Checkbox> -->
+
+                            <a
+                                href="{app.url('records')}{qRecord.record.id}"
+                                target={inModal ? "_blank" : "_self"}
+                            >
+                                <!-- {#if record.status === "draft"}
+                                    <span
+                                        style="text-transform: uppercase;font-size:10px"
+                                        >{record.status}</span
+                                    >
+                                {/if} -->
+                                <!-- {previewTitle(channel.schemas, record, graph)} -->
+                                {qRecord.recordPreview.title}
+                            </a>
+                        </div>
+                    </td>
+                    {#each visibleFields as field}
+                        <td>
+                            {qRecord.data.find((f) => f.fieldId === field.id)
+                                ?.value}
+                        </td>
+                    {/each}
+                    <!-- <RecordRow
+                        {record}
+                        {graph}
+                        {schema}
+                        {visibleColumns}
+                        {sortParam}
+                        {sortField}
+                        {users}
+                    /> -->
+                    <!-- <td>
+                        <Avatar
+                            name={usernameById(users, record._sys.updatedBy)}
+                            side={24}
+                        />
+                    </td> -->
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>