Support reordering on mobile

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -18,7 +18,6 @@
 
   export let column
   export let idx
-  export let orderable = true
 
   const {
     reorder,
@@ -66,6 +65,7 @@
   $: resetSearchValue(column.name)
   $: searching = searchValue != null
   $: debouncedUpdateFilter(searchValue)
+  $: orderable = !column.primaryDisplay
 
   const getSortingLabels = type => {
     switch (type) {
@@ -112,7 +112,7 @@
   }
 
   const onMouseDown = e => {
-    if (e.button === 0 && orderable) {
+    if ((e.touches?.length || e.button === 0) && orderable) {
       timeout = setTimeout(() => {
         reorder.actions.startReordering(column.name, e)
       }, 200)
@@ -120,7 +120,7 @@
   }
 
   const onMouseUp = e => {
-    if (e.button === 0 && orderable) {
+    if ((e.touches?.length || e.button === 0) && orderable) {
       clearTimeout(timeout)
     }
   }
@@ -258,6 +258,9 @@
   <GridCell
     on:mousedown={onMouseDown}
     on:mouseup={onMouseUp}
+    on:touchstart={onMouseDown}
+    on:touchend={onMouseUp}
+    on:touchcancel={onMouseUp}
     on:contextmenu={onContextMenu}
     width={column.width}
     left={column.left}
@@ -347,7 +350,8 @@
       <MenuItem
         icon="Label"
         on:click={makeDisplayColumn}
-        disabled={idx === "sticky" || !canBeDisplayColumn(column.schema.type)}
+        disabled={column.primaryDisplay ||
+          !canBeDisplayColumn(column.schema.type)}
       >
         Use as display column
       </MenuItem>
@@ -378,7 +382,7 @@
         Move right
       </MenuItem>
       <MenuItem
-        disabled={idx === "sticky" || !$config.showControls}
+        disabled={column.primaryDisplay || !$config.showControls}
         icon="VisibilityOff"
         on:click={hideColumn}
       >

packages/frontend-core/src/components/grid/stores/reorder.js

@@ -40,6 +40,7 @@ export const createActions = context => {
 
   // Callback when dragging on a colum header and starting reordering
   const startReordering = (column, e) => {
+    console.log("start", column)
     const $visibleColumns = get(visibleColumns)
     const $bounds = get(bounds)
     const $stickyColumn = get(stickyColumn)
@@ -55,6 +56,11 @@ export const createActions = context => {
         x: 0,
         column: $stickyColumn.name,
       })
+    } else if (!$visibleColumns[0].primaryDisplay) {
+      breakpoints.unshift({
+        x: 0,
+        column: null,
+      })
     }
 
     // Update state
@@ -69,6 +75,9 @@ export const createActions = context => {
     // Add listeners to handle mouse movement
     document.addEventListener("mousemove", onReorderMouseMove)
     document.addEventListener("mouseup", stopReordering)
+    document.addEventListener("touchmove", onReorderMouseMove)
+    document.addEventListener("touchend", stopReordering)
+    document.addEventListener("touchcancel", stopReordering)
 
     // Trigger a move event immediately so ensure a candidate column is chosen
     onReorderMouseMove(e)
@@ -77,7 +86,7 @@ export const createActions = context => {
   // Callback when moving the mouse when reordering columns
   const onReorderMouseMove = e => {
     // Immediately handle the current position
-    const x = e.clientX
+    const x = e.clientX ?? e.touches?.[0]?.clientX
     reorder.update(state => ({
       ...state,
       latestX: x,
@@ -168,6 +177,9 @@ export const createActions = context => {
     // Remove event handlers
     document.removeEventListener("mousemove", onReorderMouseMove)
     document.removeEventListener("mouseup", stopReordering)
+    document.removeEventListener("touchmove", onReorderMouseMove)
+    document.removeEventListener("touchend", stopReordering)
+    document.removeEventListener("touchcancel", stopReordering)
 
     // Save column changes
     await columns.actions.saveChanges()
@@ -185,8 +197,7 @@ export const createActions = context => {
       if (--targetIdx < sourceIdx) {
         targetIdx++
       }
-      state.splice(targetIdx, 0, removed[0])
-      return state.slice()
+      return state.toSpliced(targetIdx, 0, removed[0])
     })
   }