105 lines
3.6 KiB
Svelte
105 lines
3.6 KiB
Svelte
<script>
|
|
import { getContext } from "svelte";
|
|
import Icon from "../common/Icon.svelte";
|
|
import Checkbox from "../common/Checkbox.svelte";
|
|
import Preview from "../files/Preview.svelte";
|
|
import { fileurl } from "../files/imageserver";
|
|
|
|
const channel = getContext("channel");
|
|
|
|
export let files = [];
|
|
export let selected = [];
|
|
export let isWritable = true;
|
|
|
|
function eventToggleAll(e) {
|
|
selected = toggleAll(e, files, selected);
|
|
}
|
|
|
|
function select(file) {
|
|
selected = selectFile(file, selected);
|
|
}
|
|
|
|
export const toggleAll = (e, files, selected) => {
|
|
if (selected.length === files.length) {
|
|
return [];
|
|
}
|
|
e.currentTarget.checked = selected.length > 0;
|
|
return files;
|
|
};
|
|
|
|
export const selectFile = (file, selected) => {
|
|
let fileExists = selected.find((r) => r.id === file.id);
|
|
if (fileExists) {
|
|
return selected.filter((r) => r.id !== file.id);
|
|
}
|
|
return [...selected, file];
|
|
};
|
|
</script>
|
|
|
|
<div class="table mt-5">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
{#if isWritable}
|
|
<th>
|
|
<Checkbox
|
|
value=""
|
|
on:change={eventToggleAll}
|
|
indeterminate={selected.length > 0 &&
|
|
selected.length < files.length}
|
|
checked={selected.length === files.length}
|
|
></Checkbox>
|
|
</th>
|
|
{/if}
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each files as file (file.id)}
|
|
<tr>
|
|
<td class="title-td">
|
|
<div class="title-td-contents">
|
|
{#if isWritable}
|
|
<Checkbox
|
|
on:change={() => select(file)}
|
|
checked={selected.find(
|
|
(s) => s.id === file.id,
|
|
)}
|
|
value={file}
|
|
></Checkbox>
|
|
{/if}
|
|
<div class="file-table-row">
|
|
<Preview
|
|
{file}
|
|
size={file.width > 0 ? "medium" : "small"}
|
|
/>
|
|
|
|
<div>
|
|
{file.filename}
|
|
<span
|
|
>{(file.size / 1024).toFixed(1)}kB</span
|
|
>
|
|
|
|
{#if file.width > 0}
|
|
<span
|
|
>{file.width +
|
|
"x" +
|
|
file.height}</span
|
|
>
|
|
{/if}
|
|
<a
|
|
href={fileurl(channel, file)}
|
|
target="_blank"
|
|
>
|
|
Download
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|