feat: add changing order of fields (closes #28)

This commit is contained in:
Sam 2023-03-19 00:17:19 +01:00
parent 004403895a
commit 77ae15a468
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
3 changed files with 49 additions and 4 deletions

View File

@ -6,6 +6,7 @@
export let field: Field; export let field: Field;
export let deleteField: () => void; export let deleteField: () => void;
export let moveField: (up: boolean) => void;
let newEntry: string = ""; let newEntry: string = "";
@ -31,12 +32,26 @@
}; };
</script> </script>
<div> <div class="p-3">
<h5>{field.name}</h5>
<InputGroup class="m-1"> <InputGroup class="m-1">
<InputGroupText>Name</InputGroupText> <IconButton
color="secondary"
icon="chevron-left"
tooltip="Move field left"
click={() => moveField(true)}
/>
<IconButton
color="secondary"
icon="chevron-right"
tooltip="Move field right"
click={() => moveField(false)}
/>
<!-- <InputGroupText>Name</InputGroupText> -->
<Input bind:value={field.name} /> <Input bind:value={field.name} />
<Button color="danger" on:click={() => deleteField()}>Delete field</Button> <Button color="danger" on:click={() => deleteField()}>Delete field</Button>
</InputGroup> </InputGroup>
<hr />
{#each field.entries as _, index} {#each field.entries as _, index}
<FieldEntry <FieldEntry
bind:value={field.entries[index].value} bind:value={field.entries[index].value}

View File

@ -154,6 +154,17 @@
pronouns[newIndex] = temp; pronouns[newIndex] = temp;
}; };
const moveField = (index: number, up: boolean) => {
if (up && index == 0) return;
if (!up && index == fields.length - 1) return;
const newIndex = up ? index - 1 : index + 1;
const temp = fields[index];
fields[index] = fields[newIndex];
fields[newIndex] = temp;
};
const addName = () => { const addName = () => {
names = [...names, { value: newName, status: WordStatus.Okay }]; names = [...names, { value: newName, status: WordStatus.Okay }];
newName = ""; newName = "";
@ -425,7 +436,11 @@
<div class="grid gap-3"> <div class="grid gap-3">
<div class="row row-cols-1 row-cols-md-2"> <div class="row row-cols-1 row-cols-md-2">
{#each fields as _, index} {#each fields as _, index}
<EditableField bind:field={fields[index]} deleteField={() => removeField(index)} /> <EditableField
bind:field={fields[index]}
deleteField={() => removeField(index)}
moveField={(up) => moveField(index, up)}
/>
{/each} {/each}
</div> </div>
</div> </div>

View File

@ -150,6 +150,17 @@
pronouns[newIndex] = temp; pronouns[newIndex] = temp;
}; };
const moveField = (index: number, up: boolean) => {
if (up && index == 0) return;
if (!up && index == fields.length - 1) return;
const newIndex = up ? index - 1 : index + 1;
const temp = fields[index];
fields[index] = fields[newIndex];
fields[newIndex] = temp;
};
const addName = () => { const addName = () => {
names = [...names, { value: newName, status: WordStatus.Okay }]; names = [...names, { value: newName, status: WordStatus.Okay }];
newName = ""; newName = "";
@ -367,7 +378,11 @@
<div class="grid gap-3"> <div class="grid gap-3">
<div class="row row-cols-1 row-cols-md-2"> <div class="row row-cols-1 row-cols-md-2">
{#each fields as _, index} {#each fields as _, index}
<EditableField bind:field={fields[index]} deleteField={() => removeField(index)} /> <EditableField
bind:field={fields[index]}
deleteField={() => removeField(index)}
moveField={(up) => moveField(index, up)}
/>
{/each} {/each}
</div> </div>
</div> </div>