79 lines
2 KiB
Svelte
79 lines
2 KiB
Svelte
<script lang="ts">
|
|
import type { RawApiError } from "$api/error";
|
|
import type { CustomPreference, Field } from "$api/models";
|
|
import IconButton from "$components/IconButton.svelte";
|
|
import { t } from "$lib/i18n";
|
|
import FieldEditor from "./FieldEditor.svelte";
|
|
import FormStatusMarker from "./FormStatusMarker.svelte";
|
|
import NoscriptWarning from "./NoscriptWarning.svelte";
|
|
|
|
type Props = {
|
|
fields: Field[];
|
|
ok: { ok: boolean; error: RawApiError | null } | null;
|
|
allPreferences: Record<string, CustomPreference>;
|
|
update: () => Promise<void>;
|
|
};
|
|
|
|
let { fields = $bindable(), ok, allPreferences, update }: Props = $props();
|
|
|
|
let newFieldName = $state("");
|
|
|
|
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;
|
|
fields = [...fields];
|
|
};
|
|
|
|
const removeField = (index: number) => {
|
|
fields.splice(index, 1);
|
|
fields = [...fields];
|
|
};
|
|
|
|
const addField = (event: Event) => {
|
|
event.preventDefault();
|
|
if (!newFieldName) return;
|
|
|
|
fields = [...fields, { name: newFieldName, entries: [] }];
|
|
newFieldName = "";
|
|
};
|
|
</script>
|
|
|
|
<NoscriptWarning />
|
|
<FormStatusMarker form={ok} />
|
|
|
|
<h4>{$t("edit-profile.editing-fields-header")}</h4>
|
|
|
|
<div>
|
|
<h5>{$t("editor.add-field")}</h5>
|
|
<form class="input-group m-1" onsubmit={addField}>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
bind:value={newFieldName}
|
|
placeholder={$t("editor.field-name")}
|
|
/>
|
|
<IconButton type="submit" color="success" icon="plus" tooltip={$t("editor.add-field")} />
|
|
</form>
|
|
</div>
|
|
|
|
{#if fields.length > 0}
|
|
<hr />
|
|
{#each fields as field, index}
|
|
<FieldEditor
|
|
{index}
|
|
bind:name={field.name}
|
|
bind:entries={field.entries}
|
|
{allPreferences}
|
|
move={moveField}
|
|
remove={removeField}
|
|
/>
|
|
{/each}
|
|
{/if}
|
|
<div>
|
|
<button class="btn btn-primary" onclick={() => update()}>{$t("save-changes")}</button>
|
|
</div>
|