feat(frontend): fields editor

This commit is contained in:
sam 2024-11-27 19:50:45 +01:00
parent 7c52ab759c
commit f435ad4cf5
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
7 changed files with 319 additions and 166 deletions

View file

@ -5,6 +5,7 @@
import { mergePreferences } from "$api/models/user";
import FieldEditor from "$components/editor/FieldEditor.svelte";
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
import PronounsEditor from "$components/editor/PronounsEditor.svelte";
import { t } from "$lib/i18n";
import log from "$lib/log";
@ -37,16 +38,15 @@
};
</script>
<NoscriptWarning />
<FormStatusMarker form={ok} />
<div>
<FieldEditor name={$t("profile.names-header")} bind:entries={names} {allPreferences} />
</div>
<div>
<PronounsEditor bind:entries={pronouns} {allPreferences} />
</div>
<div>
<button class="btn btn-primary" onclick={() => update()}>{$t("save-changes")}</button>
</div>

View file

@ -0,0 +1,32 @@
<script lang="ts">
import { apiRequest } from "$api";
import ApiError, { type RawApiError } from "$api/error";
import { mergePreferences, type User } from "$api/models/user";
import FieldsEditor from "$components/editor/FieldsEditor.svelte";
import log from "$lib/log";
import type { PageData } from "./$types";
type Props = { data: PageData };
let { data }: Props = $props();
let fields = $state(data.user.fields);
let ok: { ok: boolean; error: RawApiError | null } | null = $state(null);
let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
const update = async () => {
try {
const resp = await apiRequest<User>("PATCH", "/users/@me", {
body: { fields },
token: data.token,
});
fields = resp.fields;
ok = { ok: true, error: null };
} catch (e) {
ok = { ok: false, error: null };
log.error("Could not update fields:", e);
if (e instanceof ApiError) ok.error = e.obj;
}
};
</script>
<FieldsEditor {fields} {ok} {allPreferences} {update} />

View file

@ -4,6 +4,7 @@
import { mergePreferences, type User } from "$api/models/user";
import FieldEditor from "$components/editor/FieldEditor.svelte";
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
import PronounsEditor from "$components/editor/PronounsEditor.svelte";
import { t } from "$lib/i18n";
import log from "$lib/log";
@ -14,9 +15,7 @@
let names = $state(data.user.names);
let pronouns = $state(data.user.pronouns);
let ok: { ok: boolean; error: RawApiError | null } | null = $state(null);
let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
const update = async () => {
@ -36,16 +35,15 @@
};
</script>
<NoscriptWarning />
<FormStatusMarker form={ok} />
<div>
<FieldEditor name={$t("profile.names-header")} bind:entries={names} {allPreferences} />
</div>
<div>
<PronounsEditor bind:entries={pronouns} {allPreferences} />
</div>
<div>
<button class="btn btn-primary" onclick={() => update()}>{$t("save-changes")}</button>
</div>