153 lines
4.8 KiB
Svelte
153 lines
4.8 KiB
Svelte
<script>
|
|
import Tools from "./tools/Tools.svelte";
|
|
import Pagination from "./pagination/Pagination.svelte";
|
|
import ActionsOnSelected from "./ActionsOnSelected.svelte";
|
|
import Preview from "../files/Preview.svelte";
|
|
import Table from "./Table.svelte";
|
|
import {getContext} from "svelte";
|
|
|
|
const channel = getContext("channel");
|
|
export let title;
|
|
export let schema;
|
|
export let users;
|
|
export let records;
|
|
export let graph;
|
|
|
|
export let visibleFields;
|
|
export let systemFields;
|
|
export let sort;
|
|
export let operators;
|
|
export let filter;
|
|
export let limit;
|
|
export let skip;
|
|
export let total;
|
|
export let inModal;
|
|
export let modalUrl;
|
|
export let selected = [];
|
|
|
|
|
|
function selectRecord(e, record) {
|
|
let recordExists = selected.find((r) => r.id === record.id);
|
|
|
|
if (recordExists) {
|
|
selected = selected.filter((r) => r.id !== record.id);
|
|
} else {
|
|
selected = [...selected, record];
|
|
}
|
|
}
|
|
|
|
function refresh(e) {
|
|
const newUrl = e.detail;
|
|
axios
|
|
.get(newUrl)
|
|
.then((response) => {
|
|
records = response.data.records;
|
|
sort = response.data.sort;
|
|
operators = response.data.operators;
|
|
filter = response.data.filter;
|
|
skip = response.data.skip;
|
|
limit = response.data.limit;
|
|
total = response.data.total;
|
|
modalUrl = response.data.modalUrl;
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div class="wrapper-large transparent ">
|
|
<!-- <Manager managerRecords={recordHistory} {schemas} /> -->
|
|
|
|
<div class="lx-card mb-4 {inModal ? 'mt-0' : 'mt-5'}">
|
|
<h3 class="header-normal mb-5 ">
|
|
{schema.label}
|
|
</h3>
|
|
{#if selected.length > 0 && !inModal}
|
|
<ActionsOnSelected {schema} {selected} {inModal} {filter}/>
|
|
{:else}
|
|
<Tools
|
|
bind:schema
|
|
bind:records
|
|
{systemFields}
|
|
{sort}
|
|
{operators}
|
|
{filter}
|
|
{inModal}
|
|
{modalUrl}
|
|
on:refresh={refresh}
|
|
/>
|
|
{/if}
|
|
|
|
{#if schema.type === "collection"}
|
|
<Table
|
|
{records}
|
|
{graph}
|
|
{schema}
|
|
{sort}
|
|
{systemFields}
|
|
{inModal}
|
|
{users}
|
|
bind:selected
|
|
/>
|
|
{:else}
|
|
<div class="row" style="max-width:1000px">
|
|
{#each records as record (record.id)}
|
|
<div class="col-6 col-md-4">
|
|
<div
|
|
class="file-wrapper rounded p-2 mb-4 bg-light"
|
|
class:selected={selected.includes(record)}
|
|
>
|
|
<div class="form-check">
|
|
<input
|
|
on:change={(e) => selectRecord(e, record)}
|
|
class="form-check-input "
|
|
type="checkbox"
|
|
checked={selected.find(
|
|
(r) => r.id === record.id
|
|
)}
|
|
value={record}
|
|
/>
|
|
</div>
|
|
<div class="d-flex justify-content-center">
|
|
<Preview {record} size="medium"/>
|
|
</div>
|
|
|
|
<a
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
|
title={record._file.path}
|
|
class="d-block text-center overflow-hidden text-nowrap my-2 "
|
|
style="
|
|
text-overflow: ellipsis;
|
|
font-size: 13px;
|
|
color: #333;
|
|
">{record._file.path}</a
|
|
>
|
|
<span
|
|
class="lx-small-text text-muted d-block text-center"
|
|
>{record._file.mime}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<Pagination
|
|
{limit}
|
|
{skip}
|
|
{total}
|
|
on:refresh={refresh}
|
|
{inModal}
|
|
{modalUrl}
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
.form-check {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|