54 lines
1.7 KiB
Svelte
54 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { WordStatus, type Field } from "$lib/api/entities";
|
|
import IconButton from "$lib/components/IconButton.svelte";
|
|
import { Button, Input, InputGroup, InputGroupText } from "sveltestrap";
|
|
import FieldEntry from "./FieldEntry.svelte";
|
|
|
|
export let field: Field;
|
|
export let deleteField: () => void;
|
|
|
|
let newEntry: string = "";
|
|
|
|
const addEntry = () => {
|
|
field.entries = [...field.entries, { value: newEntry, status: WordStatus.Okay }];
|
|
newEntry = "";
|
|
};
|
|
|
|
const moveEntry = (index: number, up: boolean) => {
|
|
if (up && index == 0) return;
|
|
if (!up && index == field.entries.length - 1) return;
|
|
|
|
const newIndex = up ? index - 1 : index + 1;
|
|
|
|
const temp = field.entries[index];
|
|
field.entries[index] = field.entries[newIndex];
|
|
field.entries[newIndex] = temp;
|
|
};
|
|
|
|
const removeEntry = (index: number) => {
|
|
field.entries.splice(index, 1);
|
|
field.entries = [...field.entries];
|
|
};
|
|
</script>
|
|
|
|
<div>
|
|
<InputGroup class="m-1">
|
|
<InputGroupText>Name</InputGroupText>
|
|
<Input bind:value={field.name} />
|
|
<Button color="danger" on:click={() => deleteField()}>Delete field</Button>
|
|
</InputGroup>
|
|
{#each field.entries as _, index}
|
|
<FieldEntry
|
|
bind:value={field.entries[index].value}
|
|
bind:status={field.entries[index].status}
|
|
moveUp={() => moveEntry(index, true)}
|
|
moveDown={() => moveEntry(index, false)}
|
|
remove={() => removeEntry(index)}
|
|
/>
|
|
{/each}
|
|
|
|
<div class="input-group m-1">
|
|
<input type="text" class="form-control" placeholder="New entry" bind:value={newEntry} />
|
|
<IconButton color="success" icon="plus" tooltip="Add entry" click={() => addEntry()} />
|
|
</div>
|
|
</div>
|