feat(frontend): show favourite preferences in user and member page descriptions

This commit is contained in:
Sam 2023-04-20 09:12:44 +02:00 committed by Gitea
parent b4501f5ede
commit d691d4b151
2 changed files with 54 additions and 11 deletions

View File

@ -20,10 +20,12 @@
MAX_MEMBERS, MAX_MEMBERS,
pronounDisplay, pronounDisplay,
userAvatars, userAvatars,
WordStatus,
type APIError, type APIError,
type Member, type Member,
type PartialMember, type PartialMember,
type CustomPreferences,
type FieldEntry,
type Pronoun,
} from "$lib/api/entities"; } from "$lib/api/entities";
import { PUBLIC_BASE_URL } from "$env/static/public"; import { PUBLIC_BASE_URL } from "$env/static/public";
import { apiFetchClient } from "$lib/api/fetch"; import { apiFetchClient } from "$lib/api/fetch";
@ -34,6 +36,7 @@
import ProfileLink from "./ProfileLink.svelte"; import ProfileLink from "./ProfileLink.svelte";
import { memberNameRegex } from "$lib/api/regex"; import { memberNameRegex } from "$lib/api/regex";
import StatusLine from "$lib/components/StatusLine.svelte"; import StatusLine from "$lib/components/StatusLine.svelte";
import defaultPreferences from "$lib/api/default_preferences";
export let data: PageData; export let data: PageData;
@ -84,8 +87,17 @@
} }
}; };
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite); let mergedPreferences: CustomPreferences;
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite); $: mergedPreferences = Object.assign(defaultPreferences, data.custom_preferences);
let favNames: FieldEntry[];
$: favNames = data.names.filter(
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
);
let favPronouns: Pronoun[];
$: favPronouns = data.pronouns.filter(
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
);
let profileEmpty = false; let profileEmpty = false;
$: profileEmpty = $: profileEmpty =
@ -146,7 +158,11 @@
<h3>Names</h3> <h3>Names</h3>
<ul class="list-unstyled fs-5"> <ul class="list-unstyled fs-5">
{#each data.names as name} {#each data.names as name}
<li><StatusLine preferences={data.custom_preferences} status={name.status}>{name.value}</StatusLine></li> <li>
<StatusLine preferences={data.custom_preferences} status={name.status}
>{name.value}</StatusLine
>
</li>
{/each} {/each}
</ul> </ul>
</div> </div>
@ -156,7 +172,11 @@
<h3>Pronouns</h3> <h3>Pronouns</h3>
<ul class="list-unstyled fs-5"> <ul class="list-unstyled fs-5">
{#each data.pronouns as pronouns} {#each data.pronouns as pronouns}
<li><StatusLine preferences={data.custom_preferences} status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li> <li>
<StatusLine preferences={data.custom_preferences} status={pronouns.status}
><PronounLink {pronouns} /></StatusLine
>
</li>
{/each} {/each}
</ul> </ul>
</div> </div>

View File

@ -2,25 +2,40 @@
import FieldCard from "$lib/components/FieldCard.svelte"; import FieldCard from "$lib/components/FieldCard.svelte";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import StatusIcon from "$lib/components/StatusIcon.svelte";
import PronounLink from "$lib/components/PronounLink.svelte"; import PronounLink from "$lib/components/PronounLink.svelte";
import FallbackImage from "$lib/components/FallbackImage.svelte"; import FallbackImage from "$lib/components/FallbackImage.svelte";
import { Alert, Button, Icon } from "sveltestrap"; import { Alert, Button, Icon } from "sveltestrap";
import { memberAvatars, pronounDisplay, WordStatus } from "$lib/api/entities"; import {
memberAvatars,
pronounDisplay,
type CustomPreferences,
type FieldEntry,
type Pronoun,
} from "$lib/api/entities";
import { PUBLIC_BASE_URL } from "$env/static/public"; import { PUBLIC_BASE_URL } from "$env/static/public";
import { userStore } from "$lib/store"; import { userStore } from "$lib/store";
import { renderMarkdown } from "$lib/utils"; import { renderMarkdown } from "$lib/utils";
import ReportButton from "../ReportButton.svelte"; import ReportButton from "../ReportButton.svelte";
import ProfileLink from "../ProfileLink.svelte"; import ProfileLink from "../ProfileLink.svelte";
import StatusLine from "$lib/components/StatusLine.svelte"; import StatusLine from "$lib/components/StatusLine.svelte";
import defaultPreferences from "$lib/api/default_preferences";
export let data: PageData; export let data: PageData;
let bio: string | null; let bio: string | null;
$: bio = renderMarkdown(data.bio); $: bio = renderMarkdown(data.bio);
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite); let mergedPreferences: CustomPreferences;
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite); $: mergedPreferences = Object.assign(defaultPreferences, data.user.custom_preferences);
let favNames: FieldEntry[];
$: favNames = data.names.filter(
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
);
let favPronouns: Pronoun[];
$: favPronouns = data.pronouns.filter(
(entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
);
let profileEmpty = false; let profileEmpty = false;
$: profileEmpty = $: profileEmpty =
@ -81,7 +96,11 @@
<h3>Names</h3> <h3>Names</h3>
<ul class="list-unstyled fs-5"> <ul class="list-unstyled fs-5">
{#each data.names as name} {#each data.names as name}
<li><StatusLine preferences={data.user.custom_preferences} status={name.status}>{name.value}</StatusLine></li> <li>
<StatusLine preferences={data.user.custom_preferences} status={name.status}
>{name.value}</StatusLine
>
</li>
{/each} {/each}
</ul> </ul>
</div> </div>
@ -91,7 +110,11 @@
<h3>Pronouns</h3> <h3>Pronouns</h3>
<ul class="list-unstyled fs-5"> <ul class="list-unstyled fs-5">
{#each data.pronouns as pronouns} {#each data.pronouns as pronouns}
<li><StatusLine preferences={data.user.custom_preferences} status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li> <li>
<StatusLine preferences={data.user.custom_preferences} status={pronouns.status}
><PronounLink {pronouns} /></StatusLine
>
</li>
{/each} {/each}
</ul> </ul>
</div> </div>