Allow users to swap the order of sensors while editing the sensor details

app/models/sensor.server.ts

@@ -69,6 +69,7 @@ export function getSensors(deviceId: Sensor['deviceId']) {
 export function getSensorsFromDevice(deviceId: Sensor['deviceId']) {
 	return drizzleClient.query.sensor.findMany({
 		where: (sensor, { eq }) => eq(sensor.deviceId, deviceId),
+		orderBy: (sensor, { asc }) => [asc(sensor.order)],
 	})
 }
 
@@ -167,27 +168,31 @@ export function addNewSensor({
 	unit,
 	sensorType,
 	deviceId,
-}: Pick<Sensor, 'title' | 'unit' | 'sensorType' | 'deviceId'>) {
+	order,
+}: Pick<Sensor, 'title' | 'unit' | 'sensorType' | 'deviceId' | 'order'>) {
 	return drizzleClient.insert(sensor).values({
 		title,
 		unit,
 		sensorType,
 		deviceId,
+		order,
 	})
 }
 
 export function updateSensor({
 	id,
 	title,
 	unit,
-	sensorType, // icon,
-}: Pick<Sensor, 'id' | 'title' | 'unit' | 'sensorType'>) {
+	sensorType,
+	order,
+}: Pick<Sensor, 'id' | 'title' | 'unit' | 'sensorType' | 'order'>) {
 	return drizzleClient
 		.update(sensor)
 		.set({
 			title,
 			unit,
 			sensorType,
+			order,
 		})
 		.where(eq(sensor.id, id))
 }

app/routes/device.$deviceId.edit.sensors.tsx

@@ -3,6 +3,7 @@ import {
 	Trash2,
 	ClipboardCopy,
 	Edit,
+	GripVertical,
 	Plus,
 	Save,
 	Undo2,
@@ -62,7 +63,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 	}
 	const updatedSensorsDataJson = JSON.parse(updatedSensorsData)
 
-	for (const sensor of updatedSensorsDataJson) {
+	for (const [index, sensor] of updatedSensorsDataJson.entries()) {
 		if (sensor?.new === true && sensor?.edited === true) {
 			const deviceID = params.deviceId
 			invariant(deviceID, `deviceID not found!`)
@@ -72,17 +73,18 @@ export async function action({ request, params }: ActionFunctionArgs) {
 				unit: sensor.unit,
 				sensorType: sensor.sensorType,
 				deviceId: deviceID,
+				order: index,
 			})
-		} else if (sensor?.edited === true) {
+		} else if (sensor?.deleted === true) {
+			await deleteSensor(sensor.id)
+		} else if (!sensor?.new) {
 			await updateSensor({
 				id: sensor.id,
 				title: sensor.title,
 				unit: sensor.unit,
 				sensorType: sensor.sensorType,
-				// icon: sensor.icon,
+				order: index,
 			})
-		} else if (sensor?.deleted === true) {
-			await deleteSensor(sensor.id)
 		}
 	}
 
@@ -98,6 +100,8 @@ export default function EditBoxSensors() {
 
 	/* temp impl. until figuring out how to updating state of nested objects  */
 	const [tepmState, setTepmState] = useState(false)
+
+	const dragIndexRef = React.useRef<number | null>(null)
 	//* to view toast on edit-page
 	const [setToastOpen] = useOutletContext<[(_open: boolean) => void]>()
 
@@ -187,12 +191,38 @@ export default function EditBoxSensors() {
 							{sensorsData?.map((sensor: any, index: number) => {
 								return (
 									<li
-										key={sensor.id}
+										key={sensor.id ?? index}
+										draggable={!sensor.editing}
+										onDragStart={() => {
+											dragIndexRef.current = index
+										}}
+										onDragOver={(e) => {
+											e.preventDefault()
+										}}
+										onDrop={() => {
+											const from = dragIndexRef.current
+											if (from === null || from === index) return
+											const reordered = [...sensorsData]
+											const [moved] = reordered.splice(from, 1)
+											reordered.splice(index, 0, moved)
+											setSensorsData(reordered)
+											dragIndexRef.current = null
+										}}
 										className="border-t-[1px] border-solid border-[#e1e4e8] p-4"
 									>
 										<div className="grid grid-cols-12">
+											{/* drag handle */}
+											{!sensor?.editing && (
+												<div className="col-span-1 m-auto flex cursor-grab items-center justify-center text-[#aaa] active:cursor-grabbing">
+													<GripVertical className="h-5 w-5" />
+												</div>
+											)}
+											{sensor?.editing && (
+												<div className="col-span-1" />
+											)}
+
 											{/* left side -> sensor icons list */}
-											<div className="col-span-2 m-auto sm:col-span-2">
+											<div className="col-span-1 m-auto sm:col-span-1">
 												{sensor?.editing ? (
 													<span className="table-cell h-[222px] w-[30%] text-center align-middle">
 														<div className="relative inline-block align-middle">
@@ -334,8 +364,8 @@ export default function EditBoxSensors() {
 																className="form-control"
 																onChange={(e) => {
 																	setTepmState(!tepmState)
-																	sensor.sensorType = e.target.value
-																	if (sensor.sensorType.length === 0) {
+																	sensor.unit = e.target.value
+																	if (sensor.unit.length === 0) {
 																		sensor.notValidInput = true
 																	} else {
 																		sensor.notValidInput = false
@@ -357,8 +387,8 @@ export default function EditBoxSensors() {
 																className="form-control"
 																onChange={(e) => {
 																	setTepmState(!tepmState)
-																	sensor.unit = e.target.value
-																	if (sensor.unit.length === 0) {
+																	sensor.sensorType = e.target.value
+																	if (sensor.sensorType.length === 0) {
 																		sensor.notValidInput = true
 																	} else {
 																		sensor.notValidInput = false

app/schema/sensor.ts

@@ -5,7 +5,7 @@ import {
 	type InferInsertModel,
 	type InferSelectModel,
 } from 'drizzle-orm'
-import { pgTable, text, timestamp, json } from 'drizzle-orm/pg-core'
+import { pgTable, text, timestamp, json, integer } from 'drizzle-orm/pg-core'
 import { device } from './device'
 import { DeviceStatusEnum } from './enum'
 import { type Measurement } from './measurement'
@@ -48,6 +48,7 @@ export const sensor = pgTable('sensor', {
 	sensorWikiUnit: text('sensor_wiki_unit'),
 	lastMeasurement: json('lastMeasurement').$type<LastMeasurement>(),
 	data: json('data'),
+	order: integer('order').default(0),
 })
 
 /**

drizzle/0036_even_power_man.sql

@@ -0,0 +1 @@
+ALTER TABLE "sensor" ADD COLUMN "order" integer DEFAULT 0;

drizzle/0036_sensor_order.sql

@@ -0,0 +1 @@
+ALTER TABLE "sensor" ADD COLUMN "order" integer DEFAULT 0;