content tables
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
<script>
|
||||
import { post } from "../../modules/remote";
|
||||
import { getApp } from "../../app";
|
||||
import Table from "./Table.svelte";
|
||||
import Tools from "./Tools.svelte";
|
||||
|
||||
// import Tools from "./tools/Tools.svelte";
|
||||
// import Pagination from "./pagination/Pagination.svelte";
|
||||
@@ -102,19 +104,9 @@
|
||||
on:refresh={refresh}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<Table
|
||||
{records}
|
||||
{graph}
|
||||
{schema}
|
||||
{sortParam}
|
||||
{sortField}
|
||||
{systemFields}
|
||||
{inModal}
|
||||
{users}
|
||||
{isWritable}
|
||||
bind:selected
|
||||
/> -->
|
||||
-->
|
||||
<Tools fields={data.fields}></Tools>
|
||||
<Table records={data.records} fields={data.fields}></Table>
|
||||
</div>
|
||||
<!--
|
||||
<Pagination
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script>
|
||||
let { fields } = $props();
|
||||
|
||||
let params = new URLSearchParams(document.location.search);
|
||||
|
||||
let sortBy = $state(params.get("sortBy") + "_" + params.get("sortDir"));
|
||||
let columns = $state(params.get("columns")?.split(",") || []);
|
||||
|
||||
function handleSortAsc() {
|
||||
params.set("sortBy", sortBy.replace("_asc", ""));
|
||||
params.set("sortDir", "asc");
|
||||
Turbo.visit(window.location.pathname + `?` + params.toString());
|
||||
}
|
||||
|
||||
function handleSortDesc() {
|
||||
params.set("sortBy", sortBy.replace("_desc", ""));
|
||||
params.set("sortDir", "desc");
|
||||
Turbo.visit(window.location.pathname + `?` + params.toString());
|
||||
}
|
||||
|
||||
function handleToggleColumn() {
|
||||
params.set("columns", columns.join(","));
|
||||
Turbo.visit(window.location.pathname + `?` + params.toString());
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Radios -->
|
||||
<details class="dropdown">
|
||||
<summary> Sort by </summary>
|
||||
<ul>
|
||||
{#each fields as field}
|
||||
<li>
|
||||
<label>
|
||||
<input
|
||||
bind:group={sortBy}
|
||||
type="radio"
|
||||
value={field.id + "_asc"}
|
||||
onchange={handleSortAsc}
|
||||
/>
|
||||
{field.name}
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input
|
||||
bind:group={sortBy}
|
||||
type="radio"
|
||||
value={field.id + "_desc"}
|
||||
onchange={handleSortDesc}
|
||||
/>
|
||||
{field.name} desc
|
||||
</label>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<!-- Checkboxes -->
|
||||
<details class="dropdown">
|
||||
<summary> Show/Hide columns </summary>
|
||||
<ul>
|
||||
{#each fields as field}
|
||||
<li>
|
||||
<label>
|
||||
<input
|
||||
bind:group={columns}
|
||||
type="checkbox"
|
||||
value={field.id}
|
||||
onchange={handleToggleColumn}
|
||||
/>
|
||||
{field.name}
|
||||
</label>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</details>
|
||||
@@ -15,6 +15,12 @@
|
||||
function handleLocaleChange() {
|
||||
selectedLocales = getSelectedLocales();
|
||||
}
|
||||
function toggleLiveData() {
|
||||
if (!showPublished) {
|
||||
// to avoid state sync
|
||||
Turbo.visit(window.location.href);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- <svelte:window on:beforeunload={beforeUnload} /> -->
|
||||
@@ -28,6 +34,7 @@
|
||||
<label>
|
||||
<input
|
||||
bind:checked={showPublished}
|
||||
onchange={toggleLiveData}
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
/>
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
(f) => f.fieldId === field.id && f.locale === locale,
|
||||
);
|
||||
};
|
||||
$inspect(edgeRecordPreviews);
|
||||
const findFieldEdges = (field, locale) => {
|
||||
return edgeRecordPreviews.filter(
|
||||
(e) => e.edge.fieldId === field.id && e.edge.locale === locale,
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
(data, err) => {
|
||||
suggestionsLoaded = true;
|
||||
dialog.close();
|
||||
edgeRecordPreviews = [...edgeRecordPreviews, ...data];
|
||||
edgeRecordPreviews = data;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user