refactir

2023-11-17 21:22:26 +02:00
parent 794916b178
commit 821ba9465c
9 changed files with 214 additions and 216 deletions
@@ -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>