Add reordering option to list component arguments ui

package-lock.json

@@ -14,7 +14,7 @@
 				"@koa/router": "^12.0.1",
 				"@sealcode/file-manager": "^1.0.2",
 				"@sealcode/jdd": "^0.5.1",
-				"@sealcode/sealgen": "^0.15.46",
+				"@sealcode/sealgen": "^0.15.47",
 				"@sealcode/ts-predicates": "^0.6.2",
 				"@types/kill-port": "^2.0.0",
 				"@types/leaflet": "^1.9.8",
@@ -1249,9 +1249,9 @@
 			"integrity": "sha512-EZI7e8EY8gI1pw2bKdevjl+fBJbcSlpNkCZ8XoEOV3cHakPujiT6M4l775RDkfxJSbLX7jhOBkhgPNDfmCpZbg=="
 		},
 		"node_modules/@sealcode/sealgen": {
-			"version": "0.15.46",
+			"version": "0.15.47",
-			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.15.46.tgz",
+			"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.15.47.tgz",
-			"integrity": "sha512-cXB+tzYKSgZbe2m/rTLiHgrZaxYFRq8LmzbPLYQRm9qslePTnCUaZADXg7w8WolfdKTBhumH8EaQwoPxRdxu5Q==",
+			"integrity": "sha512-cAmV2UMURIweoMilxCL+MZWNYZ2yEoV7En3vDJNzm/rkR8eTZ4ahOIClr55GrxOlBt1ryN0Gn1vKLubHUKVTJw==",
 			"dependencies": {
 				"@koa/router": "^12.0.1",
 				"@sealcode/file-manager": "^1.0.2",

package.json

@@ -45,7 +45,7 @@
 		"@koa/router": "^12.0.1",
 		"@sealcode/file-manager": "^1.0.2",
 		"@sealcode/jdd": "^0.5.1",
-		"@sealcode/sealgen": "^0.15.46",
+		"@sealcode/sealgen": "^0.15.47",
 		"@sealcode/ts-predicates": "^0.6.2",
 		"@types/kill-port": "^2.0.0",
 		"@types/leaflet": "^1.9.8",

src/back/routes/component-preview/component-input-list.tsx

@@ -31,7 +31,7 @@ export async function ComponentInputList<
 	return (
 		<fieldset>
 			<legend>{arg_path.at(-1)}</legend>
-			{value.map((value, i) => (
+			{value.map((value, i, all_values) => (
 				<div style="display: flex">
 					<ComponentInput
 						{...{
@@ -43,6 +43,23 @@ export async function ComponentInputList<
 							page,
 						}}
 					/>
+					{page.makeActionButton(
+						state,
+						{
+							action: "move_array_item_down",
+							label: "↓",
+							disabled: i == all_values.length - 1,
+						},
+						arg_path,
+						i
+					)}
+					{page.makeActionButton(
+						state,
+						{ action: "move_array_item_up", label: "↑", disabled: i == 0 },
+						arg_path,
+						i
+					)}
+
 					{page.makeActionButton(
 						state,
 						{ action: "remove_array_item", label: "❌" },

src/back/routes/component-preview/component-preview-actions.ts

@@ -86,6 +86,7 @@ export const ComponentPreviewActions = <const>{
 		);
 		return state;
 	},
+
 	remove_array_item: (
 		_ctx: BaseContext,
 		state: JDDPageState,
@@ -97,6 +98,40 @@ export const ComponentPreviewActions = <const>{
 		return state;
 	},
 
+	move_array_item_up: async (
+		_ctx: BaseContext,
+		state: JDDPageState,
+		_inputs: Record<string, string>,
+		arg_path: string[],
+		element_index: number
+	): Promise<JDDPageState> => {
+		const array_values = objectPath.get(state, arg_path);
+		const curr = array_values[element_index];
+		const prev = array_values[element_index - 1];
+		if (!prev || !curr) {
+			throw new Error("No element at such index or cannot move it up");
+		}
+		[array_values[element_index - 1], array_values[element_index]] = [curr, prev];
+		return state;
+	},
+
+	move_array_item_down: async (
+		_ctx: BaseContext,
+		state: JDDPageState,
+		_inputs: Record<string, string>,
+		arg_path: string[],
+		element_index: number
+	): Promise<JDDPageState> => {
+		const array_values = objectPath.get(state, arg_path);
+		const curr = array_values[element_index];
+		const next = array_values[element_index + 1];
+		if (!next || !curr) {
+			throw new Error("No element at such index or cannot move it up");
+		}
+		[array_values[element_index], array_values[element_index + 1]] = [next, curr];
+		return state;
+	},
+
 	change_component: async (
 		ctx: BaseContext,
 		_state: JDDPageState,
@@ -249,6 +284,7 @@ export const ComponentPreviewActions = <const>{
 		objectPath.del(state, [...arg_path, "rows", row_index]);
 		return state;
 	},
+
 	move_table_column_right: (
 		_ctx: BaseContext,
 		state: JDDPageState,
@@ -375,6 +411,7 @@ export const ComponentPreviewActions = <const>{
 		[newComps[component_index], newComps[component_index + 1]] = [next, curr];
 		return { ...state, components: newComps };
 	},
+
 	remove_file: async (
 		_ctx: BaseContext,
 		state: JDDPageState,