content and edit record

front/js/svelte/content/Table.svelte

@@ -5,6 +5,7 @@
     import {getContext} from "svelte";
     import Avatar from "../account/Avatar.svelte";
     import {selectRecord, toggleAll} from "./functions/recordSelect.js";
+    import Checkbox from "../common/Checkbox.svelte";
 
     const channel = getContext("channel");
 
@@ -20,7 +21,7 @@
     export let selected = [];
 
     function eventToggleAll(e) {
-        selected = toggleAll(e,records,selected)
+        selected = toggleAll(e, records, selected)
     }
 
     function select(record) {
@@ -31,20 +32,18 @@
 
 </script>
 
-<div class="table">
-    <table class="">
-        <thead class="table-light">
+<div class="table mt-5 ">
+    <table>
+        <thead>
         <tr>
             {#if isWritable}
                 <th>
-                    <input
-                            on:change|preventDefault={eventToggleAll}
-                            indeterminate={selected.length > 0 &&
-                            selected.length < records.length}
-                            checked={selected.length == records.length}
-                            class="form-check-input"
-                            type="checkbox"
-                    />
+                    <Checkbox
+                            on:change={eventToggleAll}
+                            indeterminate={selected.length > 0 && selected.length < records.length}
+                            checked={selected.length === records.length}
+                    >
+                    </Checkbox>
                 </th>
             {/if}
 
@@ -54,13 +53,13 @@
                         class:is-sort={field.name === sortField.name}
                         scope="col"
                         title={field.help}
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top">{field.label}</th
+                       >{field.label}</th
                 >
             {/each}
             {#each systemFields.filter(c => schema.visible.includes(c.name)) as sysField}
-                <th>{sysField.label}</th>
+                <th class:is-sort={sysField.name === sortField.name}>{sysField.label}</th>
             {/each}
+            <th></th>
         </tr>
         </thead>
         <tbody>
@@ -68,44 +67,26 @@
             <tr>
                 <td class="title-td">
                     <div
-                            class="title-td-contents d-inline-flex justify-content-between w-100 align-items-center"
+                            class="title-td-contents"
                     >
-                        <div class="d-flex align-items-center ">
-                            {#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}
-
-                            <a
-
-                                    class="me-2 text-decoration-none text-dark fs-6"
-                                    href="{channel.lucentUrl}/records/{record.id}"
-                                    target={inModal ? "_blank" : "_self"}
-                                    title={previewTitle(channel.schemas, record, graph)}
-                                    data-bs-toggle="tooltip" data-bs-placement="left"
-
+                        {#if isWritable}
+                            <Checkbox
+                                    on:change={() => select(record)}
+                                    checked={selected.find((r) => r.id === record.id)}
+                                    value={record}
                             >
-                                {previewTitle(channel.schemas, record, graph)}
-                            </a>
-                        </div>
-                        <div>
-                            <Avatar
-                                    name={usernameById(
-                                        users,
-                                        record._sys.updatedBy
-                                    )}
-                                    side={24}
-                            />
-                        </div>
+                            </Checkbox>
+
+                        {/if}
+
+                        <a
+                                class="me-2 text-decoration-none text-dark fs-6"
+                                href="{channel.lucentUrl}/records/{record.id}"
+                                target={inModal ? "_blank" : "_self"}
+                        >
+                            {previewTitle(channel.schemas, record, graph)}
+                        </a>
+
                     </div>
                 </td>
                 <RecordRow
@@ -117,6 +98,13 @@
                         {sortField}
                         {users}
                 />
+                <td>  <Avatar
+                        name={usernameById(
+                                        users,
+                                        record._sys.updatedBy
+                                    )}
+                        side={24}
+                /></td>
             </tr>
         {/each}
         </tbody>