Add reordering option to list component arguments ui

This commit is contained in:
Kuba Orlik 2024-07-29 20:11:44 +02:00
parent 2b40bf9b81
commit 1417ac75a6
4 changed files with 60 additions and 6 deletions

8
package-lock.json generated
View File

@ -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",
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.15.46.tgz",
"integrity": "sha512-cXB+tzYKSgZbe2m/rTLiHgrZaxYFRq8LmzbPLYQRm9qslePTnCUaZADXg7w8WolfdKTBhumH8EaQwoPxRdxu5Q==",
"version": "0.15.47",
"resolved": "https://registry.npmjs.org/@sealcode/sealgen/-/sealgen-0.15.47.tgz",
"integrity": "sha512-cAmV2UMURIweoMilxCL+MZWNYZ2yEoV7En3vDJNzm/rkR8eTZ4ahOIClr55GrxOlBt1ryN0Gn1vKLubHUKVTJw==",
"dependencies": {
"@koa/router": "^12.0.1",
"@sealcode/file-manager": "^1.0.2",

View File

@ -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",

View File

@ -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: "❌" },

View File

@ -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,