sortable object list controls #922

packages/web/src/elements/ForeignKeyObjectListControl.svelte

@@ -26,28 +26,32 @@
       fieldName: 'baseColumns',
       header: 'Base columns',
       slot: 0,
+      sortable: true,
     },
     {
       fieldName: 'refTableName',
       header: 'Referenced table',
+      sortable: true,
     },
     {
       fieldName: 'refColumns',
       header: 'Referenced columns',
       slot: 1,
+      sortable: true,
     },
     {
       fieldName: 'updateAction',
       header: 'ON UPDATE',
+      sortable: true,
     },
     {
       fieldName: 'deleteAction',
       header: 'ON DELETE',
+      sortable: true,
     },
     onRemove
       ? {
           fieldName: 'actions',
-          sortable: true,
           slot: 2,
         }
       : null,

packages/web/src/elements/ObjectListControl.svelte

@@ -46,6 +46,7 @@
               fieldName: 'displayName',
               header: 'Name',
               slot: -1,
+              sortable: true,
             },
             ...columns,
           ])}

packages/web/src/elements/TableControl.svelte

@@ -8,6 +8,7 @@
     formatter?: any;
     slot?: number;
     isHighlighted?: Function;
+    sortable?: boolean;
   }
 </script>
 
@@ -17,6 +18,7 @@
   import { onMount } from 'svelte';
   import keycodes from '../utility/keycodes';
   import { createEventDispatcher } from 'svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
 
   export let columns: TableControlColumn[];
   export let rows;
@@ -40,12 +42,18 @@
 
   const handleKeyDown = event => {
     if (event.keyCode == keycodes.downArrow) {
-      selectedIndex = Math.min(selectedIndex + 1, rows.length - 1);
+      selectedIndex = Math.min(selectedIndex + 1, sortedRows.length - 1);
     }
     if (event.keyCode == keycodes.upArrow) {
       selectedIndex = Math.max(0, selectedIndex - 1);
     }
   };
+
+  let sortedByField = null;
+  let sortOrderIsDesc = false;
+
+  $: sortedRowsTmp = sortedByField ? _.sortBy(rows || [], sortedByField) : rows;
+  $: sortedRows = sortOrderIsDesc ? [...sortedRowsTmp].reverse() : sortedRowsTmp;
 </script>
 
 <table
@@ -59,12 +67,34 @@
   <thead>
     <tr>
       {#each columnList as col}
-        <td>{col.header || ''}</td>
+        <td
+          class:clickable={col.sortable}
+          on:click={() => {
+            if (col.sortable) {
+              if (sortedByField == col.fieldName) {
+                if (sortOrderIsDesc) {
+                  sortOrderIsDesc = false;
+                  sortedByField = null;
+                } else {
+                  sortOrderIsDesc = true;
+                }
+              } else {
+                sortOrderIsDesc = false;
+                sortedByField = col.fieldName;
+              }
+            }
+          }}
+        >
+          {col.header || ''}
+          {#if sortedByField == col.fieldName}
+            <FontIcon icon={sortOrderIsDesc ? 'img sort-desc' : 'img sort-asc'} padLeft />
+          {/if}
+        </td>
       {/each}
     </tr>
   </thead>
   <tbody>
-    {#each rows as row, index}
+    {#each sortedRows as row, index}
       <tr
         class:selected={selectable && selectedIndex == index}
         class:clickable
@@ -105,7 +135,7 @@
         {/each}
       </tr>
     {/each}
-    {#if emptyMessage && rows.length == 0}
+    {#if emptyMessage && sortedRows.length == 0}
       <tr>
         <td colspan={columnList.length}>{emptyMessage}</td>
       </tr>
@@ -150,4 +180,8 @@
   td.isHighlighted {
     background-color: var(--theme-bg-1);
   }
+
+  td.clickable {
+    cursor: pointer;
+  }
 </style>

packages/web/src/tableeditor/PrimaryKeyLikeListControl.svelte

@@ -53,11 +53,11 @@
       fieldName: 'columns',
       header: 'Columns',
       slot: 0,
+      sortable: true,
     },
     isWritable
       ? {
           fieldName: 'actions',
-          sortable: true,
           slot: 1,
         }
       : null,

packages/web/src/tableeditor/TableEditor.svelte

@@ -245,7 +245,6 @@
       isWritable
         ? {
             fieldName: 'actions',
-            sortable: true,
             slot: 3,
           }
         : null,
@@ -293,16 +292,17 @@
           fieldName: 'columns',
           header: 'Columns',
           slot: 0,
+          sortable: true,
         },
         {
           fieldName: 'unique',
           header: 'Unique',
           slot: 1,
+          sortable: true,
         },
         isWritable
           ? {
               fieldName: 'actions',
-              sortable: true,
               slot: 2,
             }
           : null,
@@ -335,6 +335,7 @@
           fieldName: 'columns',
           header: 'Columns',
           slot: 0,
+          sortable: true,
         },
         isWritable
           ? {