refactor(AdvancedTable): made column resizing work on touchscreens as well

frontend/src/components/AdvancedTable.vue

@@ -2,7 +2,8 @@
 	<div>
 		<div
 			class="table-outer-container"
-			@mousemove="columnResizingMouseMove($event)"
+			@mousemove="columnResizing($event)"
+			@touchmove="columnResizing($event)"
 		>
 			<div class="table-header">
 				<div>
@@ -349,6 +350,7 @@
 							v-model="orderedColumns"
 							v-bind="columnDragOptions"
 							tag="tr"
+							handle=".handle"
 							draggable=".item-draggable"
 							@change="columnOrderChanged"
 						>
@@ -390,7 +392,7 @@
 											@click="toggleAllRows()"
 										/>
 									</p>
-									<div v-else>
+									<div v-else class="handle">
 										<span>
 											{{ column.displayName }}
 										</span>
@@ -436,12 +438,13 @@
 										class="resizer"
 										v-if="column.resizable"
 										@mousedown.prevent.stop="
-											columnResizingMouseDown(
-												column,
-												$event
-											)
+											columnResizingStart(column, $event)
 										"
-										@mouseup="columnResizingMouseUp()"
+										@touchstart.prevent.stop="
+											columnResizingStart(column, $event)
+										"
+										@mouseup="columnResizingStop()"
+										@touchend="columnResizingStop()"
 										@dblclick="columnResetWidth(column)"
 									></div>
 								</th>
@@ -488,9 +491,13 @@
 									class="resizer"
 									v-if="column.resizable"
 									@mousedown.prevent.stop="
-										columnResizingMouseDown(column, $event)
+										columnResizingStart(column, $event)
+									"
+									@touchstart.prevent.stop="
+										columnResizingStart(column, $event)
 									"
-									@mouseup="columnResizingMouseUp()"
+									@mouseup="columnResizingStop()"
+									@touchend="columnResizingStop()"
 									@dblclick="columnResetWidth(column)"
 								></div>
 							</td>
@@ -1008,20 +1015,28 @@ export default {
 		removeFilterItem(index) {
 			this.editingFilters.splice(index, 1);
 		},
-		columnResizingMouseDown(column, event) {
+		columnResizingStart(column, event) {
+			const eventIsTouch = event.type === "touchstart";
 			this.resizing.resizing = true;
 			this.resizing.resizingColumn = column;
 			this.resizing.width = event.target.parentElement.offsetWidth;
-			this.resizing.lastX = event.x;
+			this.resizing.lastX = eventIsTouch
+				? event.targetTouches[0].clientX
+				: event.x;
 		},
-		columnResizingMouseMove(event) {
+		columnResizing(event) {
 			if (this.resizing.resizing) {
-				if (event.buttons !== 1) {
+				const eventIsTouch = event.type === "touchmove";
+				if (!eventIsTouch && event.buttons !== 1) {
 					this.resizing.resizing = false;
 					this.storeTableSettings();
 				}
-				this.resizing.width -= this.resizing.lastX - event.x;
-				this.resizing.lastX = event.x;
+				const x = eventIsTouch
+					? event.changedTouches[0].clientX
+					: event.x;
+
+				this.resizing.width -= this.resizing.lastX - x;
+				this.resizing.lastX = x;
 				if (
 					this.resizing.resizingColumn.minWidth &&
 					this.resizing.resizingColumn.maxWidth
@@ -1051,7 +1066,7 @@ export default {
 				this.storeTableSettings();
 			}
 		},
-		columnResizingMouseUp() {
+		columnResizingStop() {
 			this.resizing.resizing = false;
 			this.storeTableSettings();
 		},