feat: show prompt to fill profile/members if profile/member list is empty

This commit is contained in:
Sam 2023-03-27 00:44:55 +02:00
parent 256a14a922
commit 6532393578
No known key found for this signature in database
GPG key ID: B4EF20DDE721CAA1
2 changed files with 52 additions and 7 deletions

View file

@ -83,6 +83,13 @@
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite); const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite); const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
let profileEmpty = false;
$: profileEmpty =
data.names.length === 0 &&
data.pronouns.length === 0 &&
data.fields.length === 0 &&
(!data.bio || data.bio.length === 0);
</script> </script>
<div class="container"> <div class="container">
@ -106,7 +113,16 @@
{:else} {:else}
<h2>@{data.name}</h2> <h2>@{data.name}</h2>
{/if} {/if}
{#if bio} {#if profileEmpty && $userStore?.id === data.id}
<hr />
<p>
<em>
Your profile is empty! You can customize it by going to the <a href="/edit/profile"
>edit profile</a
> page.</em
> <span class="text-muted">(only you can see this)</span>
</p>
{:else if bio}
<hr /> <hr />
<p>{@html bio}</p> <p>{@html bio}</p>
{/if} {/if}
@ -183,11 +199,24 @@
</h2> </h2>
</div> </div>
</div> </div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 text-center"> {#if data.members.length > 0}
{#each memberSlice as member} <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 text-center">
<PartialMemberCard user={data} {member} /> {#each memberSlice as member}
{/each} <PartialMemberCard user={data} {member} />
</div> {/each}
</div>
{:else}
<div>
<p>
You don't have any members yet.
<br />
Members are sub-profiles that can have their own avatar,
names, pronouns, and preferred terms. <span class="text-muted"
>(only you can see this)</span
>
</p>
</div>
{/if}
{/if} {/if}
<Modal header="Create member" isOpen={modalOpen} toggle={toggleModal}> <Modal header="Create member" isOpen={modalOpen} toggle={toggleModal}>
<ModalBody> <ModalBody>

View file

@ -20,6 +20,13 @@
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite); const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite); const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
let profileEmpty = false;
$: profileEmpty =
data.names.length === 0 &&
data.pronouns.length === 0 &&
data.fields.length === 0 &&
(!data.bio || data.bio.length === 0);
</script> </script>
<div class="container"> <div class="container">
@ -43,7 +50,16 @@
<div class="col-md"> <div class="col-md">
<h2>{data.display_name ?? data.name}</h2> <h2>{data.display_name ?? data.name}</h2>
<h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5> <h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5>
{#if bio} {#if profileEmpty && $userStore?.id === data.user.id}
<hr />
<p>
<em>
This member's profile is empty! You can customize it by going to the <a
href="/edit/member/{data.id}">edit member</a
> page.</em
> <span class="text-muted">(only you can see this)</span>
</p>
{:else if bio}
<hr /> <hr />
<p>{@html bio}</p> <p>{@html bio}</p>
{/if} {/if}