feat(frontend): fields editor
This commit is contained in:
parent
7c52ab759c
commit
f435ad4cf5
7 changed files with 319 additions and 166 deletions
|
@ -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>
|
||||
|
|
|
@ -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} />
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue