default sorting on schemas

front/js/svelte/content/Index.svelte

@@ -14,7 +14,8 @@
 
     // export let visibleFields;
     export let systemFields;
-    export let sort;
+    export let sortParam;
+    export let sortField;
     export let operators;
     export let filter;
     export let limit;
@@ -42,7 +43,8 @@
             .get(newUrl)
             .then((response) => {
                 records = response.data.records;
-                sort = response.data.sort;
+                sortParam = response.data.sortParam;
+                sortField = response.data.sortField;
                 operators = response.data.operators;
                 filter = response.data.filter;
                 skip = response.data.skip;
@@ -70,7 +72,8 @@
                     bind:schema
                     bind:records
                     {systemFields}
-                    {sort}
+                    {sortParam}
+                    {sortField}
                     {operators}
                     {filter}
                     {inModal}
@@ -85,7 +88,8 @@
                     {records}
                     {graph}
                     {schema}
-                    {sort}
+                    {sortParam}
+                    {sortField}
                     {systemFields}
                     {inModal}
                     {users}

front/js/svelte/content/RecordRow.svelte

@@ -9,7 +9,8 @@
     export let users;
     export let graph;
     export let record;
-    export let sort;
+    export let sortParam;
+    export let sortField;
     export let visibleColumns;
 
 </script>
@@ -17,7 +18,7 @@
 {#each visibleColumns as field, index}
     <td
         class="field-ui-{field.info.name}"
-        class:is-sort={"-" + field.name == sort || field.name == sort}
+        class:is-sort={field.name === sortField.name}
     >
         <RenderField {record} {schema} {graph} {field}/>
     </td>
@@ -25,7 +26,7 @@
 {#if schema.visible.includes("status")}
     <td
         class="text-center"
-        class:is-sort={"-status" == sort || "status" == sort}
+        class:is-sort={"-status" == sortParam || "status" == sortParam}
     >
         <Status status={record.status}/>
     </td>
@@ -33,7 +34,7 @@
 {#if schema.visible.includes("_sys.createdBy")}
     <td
         class="text-center"
-        class:is-sort={"-_sys.createdBy" == sort || "_sys.createdBy" == sort}
+        class:is-sort={"-_sys.createdBy" == sortParam || "_sys.createdBy" == sortParam}
     >
         <Avatar name={usernameById(users, record._sys.createdBy)} side={24}/>
     </td>
@@ -41,18 +42,18 @@
 {#if schema.visible.includes("_sys.updatedBy")}
     <td
         class="text-center"
-        class:is-sort={"-_sys.updatedBy" == sort || "_sys.updatedBy" == sort}
+        class:is-sort={"-_sys.updatedBy" == sortParam || "_sys.updatedBy" == sortParam}
     >
         <Avatar name={usernameById(users, record._sys.updatedBy)} side={24}/>
     </td>
 {/if}
 {#if schema.visible.includes("_sys.createdAt")}
-    <td class:is-sort={"-_sys.createdAt" == sort || "_sys.createdAt" == sort}>
+    <td class:is-sort={"-_sys.createdAt" == sortParam || "_sys.createdAt" == sortParam}>
         {friendlyDate(record._sys.createdAt)}
     </td>
 {/if}
 {#if schema.visible.includes("_sys.updatedAt")}
-    <td class:is-sort={"-_sys.updatedAt" == sort || "_sys.updatedAt" == sort}>
+    <td class:is-sort={"-_sys.updatedAt" == sortParam || "_sys.updatedAt" == sortParam}>
         {friendlyDate(record._sys.updatedAt)}
     </td>
 {/if}

front/js/svelte/content/Table.svelte

@@ -12,7 +12,8 @@
     export let records;
     export let graph;
     export let systemFields;
-    export let sort;
+    export let sortParam;
+    export let sortField;
     export let inModal;
     export let isWritable;
     export let selected = [];
@@ -61,8 +62,7 @@
             {#each visibleColumns as field}
                 <th
                         class="field-ui-{field.ui}"
-                        class:is-sort={"-" + field.name == sort ||
-                            field.name == sort}
+                        class:is-sort={field.name === sortField.name}
                         scope="col"
                         title={field.help}
                         data-bs-toggle="tooltip"
@@ -125,8 +125,8 @@
                         {graph}
                         {schema}
                         {visibleColumns}
-                        {sort}
-                        {systemFields}
+                        {sortParam}
+                        {sortField}
                         {inModal}
                         {users}
                 />

front/js/svelte/content/tools/SortFields.svelte

@@ -4,24 +4,22 @@
 
     const dispatch = createEventDispatcher();
     export let schema;
-    export let sort;
+    export let sortParam;
+    export let sortField;
     export let inModal;
     export let modalUrl;
     export let systemFields = [];
 
-    $: activeField = [...schema.fields, ...systemFields].find(
-        (f) => f.name === sort || "-" + f.name === sort || "data." + f.name === sort || "-data." + f.name === sort
-    );
-
     $: sortableFields = schema.fields.filter(
-        (f) => !["reference", "file", "json", "id", "tab"].includes(f.ui)
+        (f) => !["reference", "file", "json", "id", "rich", "markdown", "block"].includes(f.info.name)
     );
     $: systemFieldsFiltered = systemFields;
     $: if (schema.type === "collection") {
         systemFieldsFiltered = systemFields.filter((f) => f.files === false);
     }
 
-    function sortField(fieldSort) {
+
+    function triggerSortField(fieldSort) {
         const url = new URL(modalUrl ?? window.location.href);
         url.searchParams.set("sort", fieldSort);
         if (inModal) {
@@ -33,14 +31,14 @@
 
     function sortAsc(e, field) {
         e.preventDefault();
-        let prefix = systemFields.includes(el => el.name === field.name) ? "" : "data.";
-        return sortField(prefix + field.name);
+        let prefix = systemFields.map((el) =>  el.name).includes(field.name) ? "" : "data.";
+        return triggerSortField(prefix + field.name);
     }
 
     function sortDesc(e, field) {
         e.preventDefault();
-        let prefix = systemFields.includes(el => el.name === field.name) ? "" : "data.";
-        return sortField("-" + prefix + field.name);
+        let prefix = systemFields.map((el) =>  el.name).includes(field.name) ? "" : "data.";
+        return triggerSortField("-" + prefix + field.name);
     }
 </script>
 
@@ -52,12 +50,12 @@
         data-bs-auto-close="outside"
         aria-expanded="false"
     >
-        {#if sort.startsWith("-")}
+        {#if sortParam.startsWith("-")}
             <Icon icon="arrow-down-wide-short"/>
         {:else}
             <Icon icon="arrow-up-short-wide"/>
         {/if}
-        <span class="ms-1">{activeField.label}</span>
+        <span class="ms-1">{sortField.label}</span>
     </button>
     <div class="dropdown-menu" style="width:auto;max-width:800px;">
         <div class="row">
@@ -67,7 +65,7 @@
                         <button
                             on:click={(e) => sortAsc(e, field)}
                             title="Sort Ascending"
-                            class="btn btn-sm {field.name == sort
+                            class="btn btn-sm {field.name == sortField.name   && !sortParam.startsWith("-")
                                 ? 'btn-primary'
                                 : 'btn-outline-primary'} "
                         >
@@ -76,7 +74,7 @@
                         <button
                             on:click={(e) => sortDesc(e, field)}
                             title="Sort Descending"
-                            class="btn btn-sm {'-' + field.name == sort
+                            class="btn btn-sm {field.name == sortField.name && sortParam.startsWith("-")
                                 ? 'btn-primary'
                                 : 'btn-outline-primary'} "
                         >
@@ -102,7 +100,7 @@
                         <button
                             on:click={(e) => sortAsc(e, field)}
                             title="Sort Ascending"
-                            class="btn btn-sm {field.name == sort
+                            class="btn btn-sm {field.name == sortParam
                                 ? 'btn-primary'
                                 : 'btn-outline-primary'} "
                         >
@@ -111,7 +109,7 @@
                         <button
                             on:click={(e) => sortDesc(e, field)}
                             title="Sort Descending"
-                            class="btn btn-sm {'-' + field.name == sort
+                            class="btn btn-sm {'-' + field.name == sortParam
                                 ? 'btn-primary'
                                 : 'btn-outline-primary'} "
                         >

front/js/svelte/content/tools/Tools.svelte

@@ -9,7 +9,8 @@
     const channel = getContext("channel");
 
     const dispatch = createEventDispatcher();
-    export let sort;
+    export let sortParam;
+    export let sortField;
     export let schema;
     export let operators;
     export let filter;
@@ -50,7 +51,8 @@
 
         <SortFields
                 {schema}
-                {sort}
+                {sortParam}
+                {sortField}
                 {systemFields}
                 {inModal}
                 {modalUrl}