refactir
This commit is contained in:
@@ -23,9 +23,12 @@
|
||||
export let data;
|
||||
// export let layout;
|
||||
export let channel;
|
||||
|
||||
export let axios;
|
||||
export let readableSchemas;
|
||||
|
||||
|
||||
setContext("axios", axios);
|
||||
setContext("channel", channel);
|
||||
setContext("readableSchemas", channel.schemas.filter((s) => readableSchemas.includes(s.name)));
|
||||
setContext("user", user);
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<script>
|
||||
import {getContext} from "svelte";
|
||||
import Preview from "../files/Preview.svelte";
|
||||
import {selectRecord} from "./functions/recordSelect.js";
|
||||
|
||||
const channel = getContext("channel");
|
||||
|
||||
export let schema;
|
||||
export let records;
|
||||
export let isWritable;
|
||||
export let selected = [];
|
||||
|
||||
function select(record) {
|
||||
selected = selectRecord(record, selected)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<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)}
|
||||
>
|
||||
{#if isWritable}
|
||||
<div class="form-check">
|
||||
<input
|
||||
on:change={() => select(record)}
|
||||
class="form-check-input "
|
||||
type="checkbox"
|
||||
checked={selected.find(
|
||||
(r) => r.id === record.id
|
||||
)}
|
||||
value={record}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<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>
|
||||
|
||||
|
||||
<style>
|
||||
.form-check {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -2,16 +2,15 @@
|
||||
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";
|
||||
import Grid from "./Grid.svelte";
|
||||
|
||||
const channel = getContext("channel");
|
||||
const axios = getContext("axios");
|
||||
export let schema;
|
||||
export let users;
|
||||
export let records;
|
||||
export let graph;
|
||||
|
||||
// export let visibleFields;
|
||||
export let systemFields;
|
||||
export let sortParam;
|
||||
@@ -26,17 +25,6 @@
|
||||
export let selected = [];
|
||||
export let isWritable = false;
|
||||
|
||||
|
||||
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
|
||||
@@ -59,14 +47,12 @@
|
||||
</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 && isWritable}
|
||||
<ActionsOnSelected {schema} {selected} {inModal} {filter}/>
|
||||
<ActionsOnSelected {schema} {selected} {filter}/>
|
||||
{:else}
|
||||
<Tools
|
||||
bind:schema
|
||||
@@ -98,48 +84,13 @@
|
||||
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)}
|
||||
>
|
||||
{#if isWritable}
|
||||
<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>
|
||||
{/if}
|
||||
<div class="d-flex justify-content-center">
|
||||
<Preview {record} size="medium"/>
|
||||
</div>
|
||||
<Grid
|
||||
{records}
|
||||
{schema}
|
||||
{isWritable}
|
||||
bind:selected
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -153,9 +104,3 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.form-check {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import {usernameById} from "../account/users";
|
||||
import {getContext} from "svelte";
|
||||
import Avatar from "../account/Avatar.svelte";
|
||||
import {selectRecord, toggleAll} from "./functions/recordSelect.js";
|
||||
|
||||
const channel = getContext("channel");
|
||||
|
||||
@@ -18,24 +19,12 @@
|
||||
export let isWritable;
|
||||
export let selected = [];
|
||||
|
||||
function toggleAll(e) {
|
||||
// e.preventDefault();
|
||||
if (selected.length === records.length) {
|
||||
selected = [];
|
||||
} else {
|
||||
selected = records;
|
||||
}
|
||||
e.currentTarget.checked = selected.length > 0;
|
||||
function eventToggleAll(e) {
|
||||
selected = toggleAll(e,records,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 select(record) {
|
||||
selected = selectRecord(record, selected)
|
||||
}
|
||||
|
||||
$: visibleColumns = schema.fields.filter(c => schema.visible.includes(c.name))
|
||||
@@ -49,7 +38,7 @@
|
||||
{#if isWritable}
|
||||
<th>
|
||||
<input
|
||||
on:change|preventDefault={toggleAll}
|
||||
on:change|preventDefault={eventToggleAll}
|
||||
indeterminate={selected.length > 0 &&
|
||||
selected.length < records.length}
|
||||
checked={selected.length == records.length}
|
||||
@@ -61,7 +50,7 @@
|
||||
|
||||
{#each visibleColumns as field}
|
||||
<th
|
||||
class="field-ui-{field.ui}"
|
||||
class="field-ui-{field.info.name ?? field.ui}"
|
||||
class:is-sort={field.name === sortField.name}
|
||||
scope="col"
|
||||
title={field.help}
|
||||
@@ -85,8 +74,7 @@
|
||||
{#if isWritable}
|
||||
<div class="form-check">
|
||||
<input
|
||||
on:change={(e) =>
|
||||
selectRecord(e, record)}
|
||||
on:change={() => select(record)}
|
||||
class="form-check-input "
|
||||
type="checkbox"
|
||||
checked={selected.find(
|
||||
@@ -127,7 +115,6 @@
|
||||
{visibleColumns}
|
||||
{sortParam}
|
||||
{sortField}
|
||||
{inModal}
|
||||
{users}
|
||||
/>
|
||||
</tr>
|
||||
@@ -136,15 +123,3 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* .title-td:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.title-td:hover .title-td-contents a {
|
||||
z-index: 1;
|
||||
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
} */
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
*
|
||||
* @param {Event} e
|
||||
* @param {Object[]} records
|
||||
* @param {Object[]} selected
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
export const toggleAll = (e,records, selected) => {
|
||||
if (selected.length === records.length) {
|
||||
return [];
|
||||
}
|
||||
e.currentTarget.checked = selected.length > 0;
|
||||
return records;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Object} record
|
||||
* @param {Object[]} selected
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
export const selectRecord = (record, selected) => {
|
||||
let recordExists = selected.find((r) => r.id === record.id);
|
||||
if (recordExists) {
|
||||
return selected.filter((r) => r.id !== record.id);
|
||||
}
|
||||
return [...selected, record];
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user