added view collection type
This commit is contained in:
Gani Georgiev
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import { replace, querystring } from "svelte-spa-router";
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import {
|
||||
collections,
|
||||
activeCollection,
|
||||
@@ -16,16 +17,18 @@
|
||||
import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
|
||||
import CollectionDocsPanel from "@/components/collections/CollectionDocsPanel.svelte";
|
||||
import RecordUpsertPanel from "@/components/records/RecordUpsertPanel.svelte";
|
||||
import RecordPreviewPanel from "@/components/records/RecordPreviewPanel.svelte";
|
||||
import RecordsList from "@/components/records/RecordsList.svelte";
|
||||
|
||||
const queryParams = new URLSearchParams($querystring);
|
||||
|
||||
let collectionUpsertPanel;
|
||||
let collectionDocsPanel;
|
||||
let recordPanel;
|
||||
let recordUpsertPanel;
|
||||
let recordPreviewPanel;
|
||||
let recordsList;
|
||||
let filter = queryParams.get("filter") || "";
|
||||
let sort = queryParams.get("sort") || "-created";
|
||||
let sort = queryParams.get("sort") || "";
|
||||
let selectedCollectionId = queryParams.get("collectionId") || $activeCollection?.id;
|
||||
|
||||
$: reactiveParams = new URLSearchParams($querystring);
|
||||
@@ -56,9 +59,17 @@
|
||||
$: $pageTitle = $activeCollection?.name || "Collections";
|
||||
|
||||
function reset() {
|
||||
selectedCollectionId = $activeCollection.id;
|
||||
sort = "-created";
|
||||
selectedCollectionId = $activeCollection?.id;
|
||||
filter = "";
|
||||
sort = "-created";
|
||||
|
||||
// clear default sort if created field is not available
|
||||
if (
|
||||
$activeCollection?.isView &&
|
||||
!CommonHelper.extractColumnsFromQuery($activeCollection.options.query).includes("created")
|
||||
) {
|
||||
sort = "";
|
||||
}
|
||||
}
|
||||
|
||||
loadCollections(selectedCollectionId);
|
||||
@@ -128,10 +139,12 @@
|
||||
<span class="txt">API Preview</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-expanded" on:click={() => recordPanel?.show()}>
|
||||
<i class="ri-add-line" />
|
||||
<span class="txt">New record</span>
|
||||
</button>
|
||||
{#if !$activeCollection.isView}
|
||||
<button type="button" class="btn btn-expanded" on:click={() => recordUpsertPanel?.show()}>
|
||||
<i class="ri-add-line" />
|
||||
<span class="txt">New record</span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -147,8 +160,12 @@
|
||||
collection={$activeCollection}
|
||||
bind:filter
|
||||
bind:sort
|
||||
on:select={(e) => recordPanel?.show(e?.detail)}
|
||||
on:new={() => recordPanel?.show()}
|
||||
on:select={(e) => {
|
||||
$activeCollection.isView
|
||||
? recordPreviewPanel.show(e?.detail)
|
||||
: recordUpsertPanel?.show(e?.detail);
|
||||
}}
|
||||
on:new={() => recordUpsertPanel?.show()}
|
||||
/>
|
||||
</PageWrapper>
|
||||
{/if}
|
||||
@@ -158,8 +175,10 @@
|
||||
<CollectionDocsPanel bind:this={collectionDocsPanel} />
|
||||
|
||||
<RecordUpsertPanel
|
||||
bind:this={recordPanel}
|
||||
bind:this={recordUpsertPanel}
|
||||
collection={$activeCollection}
|
||||
on:save={() => recordsList?.reloadLoadedPages()}
|
||||
on:delete={() => recordsList?.reloadLoadedPages()}
|
||||
/>
|
||||
|
||||
<RecordPreviewPanel bind:this={recordPreviewPanel} collection={$activeCollection} />
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import FormattedDate from "@/components/base/FormattedDate.svelte";
|
||||
import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
|
||||
import RecordInfo from "@/components/records/RecordInfo.svelte";
|
||||
|
||||
export let record;
|
||||
export let field;
|
||||
</script>
|
||||
|
||||
<td class="col-type-{field.type} col-field-{field.name}">
|
||||
{#if field.type === "json"}
|
||||
<span class="txt txt-ellipsis">
|
||||
{CommonHelper.truncate(JSON.stringify(record[field.name]))}
|
||||
</span>
|
||||
{:else if CommonHelper.isEmpty(record[field.name])}
|
||||
<span class="txt-hint">N/A</span>
|
||||
{:else if field.type === "bool"}
|
||||
<span class="txt">{record[field.name] ? "True" : "False"}</span>
|
||||
{:else if field.type === "number"}
|
||||
<span class="txt">{record[field.name]}</span>
|
||||
{:else if field.type === "url"}
|
||||
<a
|
||||
class="txt-ellipsis"
|
||||
href={record[field.name]}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
use:tooltip={"Open in new tab"}
|
||||
on:click|stopPropagation
|
||||
>
|
||||
{CommonHelper.truncate(record[field.name])}
|
||||
</a>
|
||||
{:else if field.type === "editor"}
|
||||
<span class="txt">
|
||||
{CommonHelper.truncate(CommonHelper.plainText(record[field.name]), 300, true)}
|
||||
</span>
|
||||
{:else if field.type === "date"}
|
||||
<FormattedDate date={record[field.name]} />
|
||||
{:else if field.type === "select"}
|
||||
<div class="inline-flex">
|
||||
{#each CommonHelper.toArray(record[field.name]) as item, i (i + item)}
|
||||
<span class="label">{item}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if field.type === "relation" || field.type === "user"}
|
||||
{@const relations = CommonHelper.toArray(record[field.name])}
|
||||
{@const expanded = CommonHelper.toArray(record.expand[field.name])}
|
||||
<div class="inline-flex">
|
||||
{#if expanded.length}
|
||||
{#each expanded.slice(0, 20) as item, i (i + item)}
|
||||
<span class="label">
|
||||
<RecordInfo record={item} displayFields={field.options?.displayFields} />
|
||||
</span>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each relations.slice(0, 20) as id}
|
||||
<span class="label">{id}</span>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if relations.length > 20}
|
||||
...
|
||||
{/if}
|
||||
</div>
|
||||
{:else if field.type === "file"}
|
||||
<div class="inline-flex">
|
||||
{#each CommonHelper.toArray(record[field.name]) as filename, i (i + filename)}
|
||||
<RecordFileThumb {record} {filename} size="sm" />
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<span class="txt txt-ellipsis" title={CommonHelper.truncate(record[field.name])}>
|
||||
{CommonHelper.truncate(record[field.name])}
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<style>
|
||||
.filename {
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import FormattedDate from "@/components/base/FormattedDate.svelte";
|
||||
import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
|
||||
import RecordInfo from "@/components/records/RecordInfo.svelte";
|
||||
import TinyMCE from "@tinymce/tinymce-svelte";
|
||||
|
||||
export let record;
|
||||
export let field;
|
||||
export let short = false;
|
||||
|
||||
$: rawValue = record[field.name];
|
||||
</script>
|
||||
|
||||
{#if field.type === "json"}
|
||||
<span class="txt txt-ellipsis">
|
||||
{short
|
||||
? CommonHelper.truncate(JSON.stringify(rawValue))
|
||||
: CommonHelper.truncate(JSON.stringify(rawValue, null, 2), 2000, true)}
|
||||
</span>
|
||||
{:else if CommonHelper.isEmpty(rawValue)}
|
||||
<span class="txt-hint">N/A</span>
|
||||
{:else if field.type === "bool"}
|
||||
<span class="txt">{rawValue ? "True" : "False"}</span>
|
||||
{:else if field.type === "number"}
|
||||
<span class="txt">{rawValue}</span>
|
||||
{:else if field.type === "url"}
|
||||
<a
|
||||
class="txt-ellipsis"
|
||||
href={rawValue}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
use:tooltip={"Open in new tab"}
|
||||
on:click|stopPropagation
|
||||
>
|
||||
{CommonHelper.truncate(rawValue)}
|
||||
</a>
|
||||
{:else if field.type === "editor"}
|
||||
{#if short}
|
||||
<span class="txt">
|
||||
{CommonHelper.truncate(CommonHelper.plainText(rawValue), 250)}
|
||||
</span>
|
||||
{:else}
|
||||
<TinyMCE
|
||||
scriptSrc="{import.meta.env.BASE_URL}libs/tinymce/tinymce.min.js"
|
||||
cssClass="tinymce-preview"
|
||||
conf={{
|
||||
branding: false,
|
||||
promotion: false,
|
||||
menubar: false,
|
||||
min_height: 30,
|
||||
statusbar: false,
|
||||
height: 59,
|
||||
max_height: 500,
|
||||
autoresize_bottom_margin: 5,
|
||||
resize: false,
|
||||
skin: "pocketbase",
|
||||
content_style: "body { font-size: 14px }",
|
||||
toolbar: "",
|
||||
plugins: ["autoresize"],
|
||||
}}
|
||||
value={rawValue}
|
||||
disabled
|
||||
/>
|
||||
{/if}
|
||||
{:else if field.type === "date"}
|
||||
<FormattedDate date={rawValue} />
|
||||
{:else if field.type === "select"}
|
||||
<div class="inline-flex">
|
||||
{#each CommonHelper.toArray(rawValue) as item, i (i + item)}
|
||||
<span class="label">{item}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if field.type === "relation"}
|
||||
{@const relations = CommonHelper.toArray(rawValue)}
|
||||
{@const expanded = CommonHelper.toArray(record.expand[field.name])}
|
||||
{@const relLimit = short ? 20 : 200}
|
||||
<div class="inline-flex">
|
||||
{#if expanded.length}
|
||||
{#each expanded.slice(0, relLimit) as item, i (i + item)}
|
||||
<span class="label">
|
||||
<RecordInfo record={item} displayFields={field.options?.displayFields} />
|
||||
</span>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each relations.slice(0, relLimit) as id}
|
||||
<span class="label">{id}</span>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if relations.length > relLimit}
|
||||
...
|
||||
{/if}
|
||||
</div>
|
||||
{:else if field.type === "file"}
|
||||
<div class="inline-flex">
|
||||
{#each CommonHelper.toArray(rawValue) as filename, i (i + filename)}
|
||||
<RecordFileThumb {record} {filename} size="sm" />
|
||||
{/each}
|
||||
</div>
|
||||
{:else if short}
|
||||
<span class="txt txt-ellipsis" title={CommonHelper.truncate(rawValue)}>
|
||||
{CommonHelper.truncate(rawValue)}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="block txt-break">{CommonHelper.truncate(rawValue, 2000)}</span>
|
||||
{/if}
|
||||
@@ -1,11 +1,23 @@
|
||||
<script>
|
||||
import CommonHelper from "@/utils/CommonHelper";
|
||||
import tooltip from "@/actions/tooltip";
|
||||
import { collections } from "@/stores/collections";
|
||||
import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
|
||||
|
||||
export let record;
|
||||
export let displayFields = [];
|
||||
|
||||
$: displayValue = CommonHelper.displayValue(record, displayFields);
|
||||
$: collection = $collections?.find((item) => item.id == record?.collectionId);
|
||||
|
||||
$: fileDisplayFields =
|
||||
displayFields?.filter((name) => {
|
||||
return !!collection?.schema?.find((field) => field.name == name && field.type == "file");
|
||||
}) || [];
|
||||
|
||||
$: textDisplayFields =
|
||||
(!fileDisplayFields.length
|
||||
? displayFields
|
||||
: displayFields?.filter((name) => !fileDisplayFields.includes(name))) || [];
|
||||
</script>
|
||||
|
||||
<div class="record-info">
|
||||
@@ -21,7 +33,16 @@
|
||||
position: "left",
|
||||
}}
|
||||
/>
|
||||
<span class="txt txt-ellipsis">{CommonHelper.truncate(displayValue, 150)}</span>
|
||||
|
||||
{#each fileDisplayFields as name}
|
||||
{#if record[name]}
|
||||
<RecordFileThumb {record} filename={record[name]} size="xs" />
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<span class="txt txt-ellipsis">
|
||||
{CommonHelper.truncate(CommonHelper.displayValue(record, textDisplayFields), 70)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -36,5 +57,8 @@
|
||||
> * {
|
||||
line-height: inherit;
|
||||
}
|
||||
:global(.thumb) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<script>
|
||||
import { Record } from "pocketbase";
|
||||
import OverlayPanel from "@/components/base/OverlayPanel.svelte";
|
||||
import RecordFieldValue from "./RecordFieldValue.svelte";
|
||||
import CopyIcon from "@/components/base/CopyIcon.svelte";
|
||||
import FormattedDate from "@/components/base/FormattedDate.svelte";
|
||||
|
||||
export let collection;
|
||||
|
||||
let recordPanel;
|
||||
let record = new Record();
|
||||
|
||||
$: hasEditorField = !!collection?.schema?.find((f) => f.type === "editor");
|
||||
|
||||
export function show(model) {
|
||||
record = model;
|
||||
|
||||
return recordPanel?.show();
|
||||
}
|
||||
|
||||
export function hide() {
|
||||
return recordPanel?.hide();
|
||||
}
|
||||
</script>
|
||||
|
||||
<OverlayPanel
|
||||
bind:this={recordPanel}
|
||||
class="record-preview-panel {hasEditorField ? 'overlay-panel-xl' : 'overlay-panel-lg'}"
|
||||
on:hide
|
||||
on:show
|
||||
>
|
||||
<svelte:fragment slot="header">
|
||||
<h4><strong>{collection?.name}</strong> record preview</h4>
|
||||
</svelte:fragment>
|
||||
|
||||
<table class="table-border">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">id</td>
|
||||
<td>
|
||||
<div class="label">
|
||||
<CopyIcon value={record.id} />
|
||||
<span class="txt">{record.id}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{#each collection?.schema as field}
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">{field.name}</td>
|
||||
<td>
|
||||
<RecordFieldValue {field} {record} />
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
{#if record.created}
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">created</td>
|
||||
<td><FormattedDate date={record.created} /></td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
{#if record.updated}
|
||||
<tr>
|
||||
<td class="min-width txt-hint txt-bold">updated</td>
|
||||
<td><FormattedDate date={record.updated} /></td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<button type="button" class="btn btn-transparent" on:click={() => hide()}>
|
||||
<span class="txt">Close</span>
|
||||
</button>
|
||||
</svelte:fragment>
|
||||
</OverlayPanel>
|
||||
@@ -355,7 +355,7 @@
|
||||
on:submit|preventDefault={save}
|
||||
>
|
||||
{#if !record.isNew}
|
||||
<Field class="form-field disabled" name="id" let:uniqueId>
|
||||
<Field class="form-field readonly" name="id" let:uniqueId>
|
||||
<label for={uniqueId}>
|
||||
<i class={CommonHelper.getFieldTypeIcon("primary")} />
|
||||
<span class="txt">id</span>
|
||||
@@ -426,6 +426,7 @@
|
||||
<button type="button" class="btn btn-transparent" disabled={isSaving} on:click={() => hide()}>
|
||||
<span class="txt">Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
form={formId}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
import CopyIcon from "@/components/base/CopyIcon.svelte";
|
||||
import FormattedDate from "@/components/base/FormattedDate.svelte";
|
||||
import HorizontalScroller from "@/components/base/HorizontalScroller.svelte";
|
||||
import RecordFieldCell from "@/components/records/RecordFieldCell.svelte";
|
||||
import RecordFieldValue from "@/components/records/RecordFieldValue.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const sortRegex = /^([\+\-])?(\w+)$/;
|
||||
@@ -57,6 +57,10 @@
|
||||
updateStoredHiddenColumns();
|
||||
}
|
||||
|
||||
$: hasCreated = !collection?.isView || (records.length > 0 && records[0].created != "");
|
||||
|
||||
$: hasUpdated = !collection?.isView || (records.length > 0 && records[0].updated != "");
|
||||
|
||||
$: collumnsToHide = [].concat(
|
||||
collection.isAuth
|
||||
? [
|
||||
@@ -67,10 +71,8 @@
|
||||
fields.map((f) => {
|
||||
return { id: f.id, name: f.name };
|
||||
}),
|
||||
[
|
||||
{ id: "@created", name: "created" },
|
||||
{ id: "@updated", name: "updated" },
|
||||
]
|
||||
hasCreated ? { id: "@created", name: "created" } : [],
|
||||
hasUpdated ? { id: "@updated", name: "updated" } : []
|
||||
);
|
||||
|
||||
function updateStoredHiddenColumns() {
|
||||
@@ -242,48 +244,55 @@
|
||||
|
||||
<HorizontalScroller class="table-wrapper">
|
||||
<svelte:fragment slot="before">
|
||||
<Toggler class="dropdown dropdown-right dropdown-nowrap columns-dropdown" trigger={columnsTrigger}>
|
||||
<div class="txt-hint txt-sm p-5 m-b-5">Toggle columns</div>
|
||||
{#each collumnsToHide as column (column.id + column.name)}
|
||||
<Field class="form-field form-field-sm form-field-toggle m-0 p-5" let:uniqueId>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={uniqueId}
|
||||
checked={!hiddenColumns.includes(column.id)}
|
||||
on:change={(e) => {
|
||||
if (e.target.checked) {
|
||||
CommonHelper.removeByValue(hiddenColumns, column.id);
|
||||
} else {
|
||||
CommonHelper.pushUnique(hiddenColumns, column.id);
|
||||
}
|
||||
hiddenColumns = hiddenColumns;
|
||||
}}
|
||||
/>
|
||||
<label for={uniqueId}>{column.name}</label>
|
||||
</Field>
|
||||
{/each}
|
||||
</Toggler>
|
||||
{#if columnsTrigger}
|
||||
<Toggler
|
||||
class="dropdown dropdown-right dropdown-nowrap columns-dropdown"
|
||||
trigger={columnsTrigger}
|
||||
>
|
||||
<div class="txt-hint txt-sm p-5 m-b-5">Toggle columns</div>
|
||||
{#each collumnsToHide as column (column.id + column.name)}
|
||||
<Field class="form-field form-field-sm form-field-toggle m-0 p-5" let:uniqueId>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={uniqueId}
|
||||
checked={!hiddenColumns.includes(column.id)}
|
||||
on:change={(e) => {
|
||||
if (e.target.checked) {
|
||||
CommonHelper.removeByValue(hiddenColumns, column.id);
|
||||
} else {
|
||||
CommonHelper.pushUnique(hiddenColumns, column.id);
|
||||
}
|
||||
hiddenColumns = hiddenColumns;
|
||||
}}
|
||||
/>
|
||||
<label for={uniqueId}>{column.name}</label>
|
||||
</Field>
|
||||
{/each}
|
||||
</Toggler>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
<table class="table" class:table-loading={isLoading}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bulk-select-col min-width">
|
||||
{#if isLoading}
|
||||
<span class="loader loader-sm" />
|
||||
{:else}
|
||||
<div class="form-field">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox_0"
|
||||
disabled={!records.length}
|
||||
checked={areAllRecordsSelected}
|
||||
on:change={() => toggleSelectAllRecords()}
|
||||
/>
|
||||
<label for="checkbox_0" />
|
||||
</div>
|
||||
{/if}
|
||||
</th>
|
||||
{#if !collection.isView}
|
||||
<th class="bulk-select-col min-width">
|
||||
{#if isLoading}
|
||||
<span class="loader loader-sm" />
|
||||
{:else}
|
||||
<div class="form-field">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox_0"
|
||||
disabled={!records.length}
|
||||
checked={areAllRecordsSelected}
|
||||
on:change={() => toggleSelectAllRecords()}
|
||||
/>
|
||||
<label for="checkbox_0" />
|
||||
</div>
|
||||
{/if}
|
||||
</th>
|
||||
{/if}
|
||||
|
||||
{#if !hiddenColumns.includes("@id")}
|
||||
<SortHeader class="col-type-text col-field-id" name="id" bind:sort>
|
||||
@@ -326,7 +335,7 @@
|
||||
</SortHeader>
|
||||
{/each}
|
||||
|
||||
{#if !hiddenColumns.includes("@created")}
|
||||
{#if hasCreated && !hiddenColumns.includes("@created")}
|
||||
<SortHeader class="col-type-date col-field-created" name="created" bind:sort>
|
||||
<div class="col-header-content">
|
||||
<i class={CommonHelper.getFieldTypeIcon("date")} />
|
||||
@@ -335,7 +344,7 @@
|
||||
</SortHeader>
|
||||
{/if}
|
||||
|
||||
{#if !hiddenColumns.includes("@updated")}
|
||||
{#if hasUpdated && !hiddenColumns.includes("@updated")}
|
||||
<SortHeader class="col-type-date col-field-updated" name="updated" bind:sort>
|
||||
<div class="col-header-content">
|
||||
<i class={CommonHelper.getFieldTypeIcon("date")} />
|
||||
@@ -345,19 +354,21 @@
|
||||
{/if}
|
||||
|
||||
<th class="col-type-action min-width">
|
||||
<button
|
||||
bind:this={columnsTrigger}
|
||||
type="button"
|
||||
aria-label="Toggle columns"
|
||||
class="btn btn-sm btn-transparent p-0"
|
||||
>
|
||||
<i class="ri-more-line" />
|
||||
</button>
|
||||
{#if collumnsToHide.length}
|
||||
<button
|
||||
bind:this={columnsTrigger}
|
||||
type="button"
|
||||
aria-label="Toggle columns"
|
||||
class="btn btn-sm btn-transparent p-0"
|
||||
>
|
||||
<i class="ri-more-line" />
|
||||
</button>
|
||||
{/if}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each records as record (record.id)}
|
||||
{#each records as record (!collection.isView ? record.id : record)}
|
||||
<tr
|
||||
tabindex="0"
|
||||
class="row-handle"
|
||||
@@ -369,18 +380,20 @@
|
||||
}
|
||||
}}
|
||||
>
|
||||
<td class="bulk-select-col min-width">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="form-field" on:click|stopPropagation>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox_{record.id}"
|
||||
checked={bulkSelected[record.id]}
|
||||
on:change={() => toggleSelectRecord(record)}
|
||||
/>
|
||||
<label for="checkbox_{record.id}" />
|
||||
</div>
|
||||
</td>
|
||||
{#if !collection.isView}
|
||||
<td class="bulk-select-col min-width">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="form-field" on:click|stopPropagation>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox_{record.id}"
|
||||
checked={bulkSelected[record.id]}
|
||||
on:change={() => toggleSelectRecord(record)}
|
||||
/>
|
||||
<label for="checkbox_{record.id}" />
|
||||
</div>
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if !hiddenColumns.includes("@id")}
|
||||
<td class="col-type-text col-field-id">
|
||||
@@ -433,16 +446,18 @@
|
||||
{/if}
|
||||
|
||||
{#each visibleFields as field (field.name)}
|
||||
<RecordFieldCell {record} {field} />
|
||||
<td class="col-type-{field.type} col-field-{field.name}">
|
||||
<RecordFieldValue short {record} {field} />
|
||||
</td>
|
||||
{/each}
|
||||
|
||||
{#if !hiddenColumns.includes("@created")}
|
||||
{#if hasCreated && !hiddenColumns.includes("@created")}
|
||||
<td class="col-type-date col-field-created">
|
||||
<FormattedDate date={record.created} />
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if !hiddenColumns.includes("@updated")}
|
||||
{#if hasUpdated && !hiddenColumns.includes("@updated")}
|
||||
<td class="col-type-date col-field-updated">
|
||||
<FormattedDate date={record.updated} />
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user