refactir

front/js/svelte/content/Index.svelte

@@ -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>