sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add names/pronouns/field entries on enter

Browse source
This commit is contained in:
Sam 2023-03-31 00:11:28 +02:00
parent b1e267cb29
commit ba48ba0eb2
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
5 changed files with 97 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/lib/components/IconButton.svelte
View file

@ -6,6 +6,7 @@
export let tooltip: string;
export let active: boolean = false;
export let disabled: boolean = false;
export let type: string | undefined = undefined;
export let click: ((e: MouseEvent) => void) | undefined = undefined;
export let href: string | undefined = undefined;
@ -14,6 +15,6 @@
</script>
<Tooltip target={button} placement="top">{tooltip}</Tooltip>
<Button {color} {active} {disabled} {href} on:click={click} bind:inner={button}>
<Button {type} {color} {active} {disabled} {href} on:click={click} bind:inner={button}>
<Icon name={icon} />
</Button>

10
frontend/src/routes/edit/EditableField.svelte
View file

@ -10,7 +10,9 @@
let newEntry: string = "";
const addEntry = () => {
const addEntry = (event: Event) => {
event.preventDefault();
field.entries = [...field.entries, { value: newEntry, status: WordStatus.Okay }];
newEntry = "";
};
@ -61,8 +63,8 @@
/>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addEntry}>
<input type="text" class="form-control" placeholder="New entry" bind:value={newEntry} />
<IconButton color="success" icon="plus" tooltip="Add entry" click={() => addEntry()} />
</div>
<IconButton color="success" icon="plus" tooltip="Add entry" />
</form>
</div>

90
frontend/src/routes/edit/member/[id]/+page.svelte
View file

@ -20,6 +20,7 @@
Modal,
ModalBody,
ModalFooter,
Popover,
} from "sveltestrap";
import { encode } from "base64-arraybuffer";
import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
@ -59,7 +60,6 @@
let newName = "";
let newPronouns = "";
let newPronounsDisplay = "";
let newLink = "";
let modified = false;
@ -169,21 +169,38 @@
fields[newIndex] = temp;
};
const addName = () => {
const addName = (event: Event) => {
event.preventDefault();
names = [...names, { value: newName, status: WordStatus.Okay }];
newName = "";
};
const addPronouns = () => {
pronouns = [
...pronouns,
{ pronouns: newPronouns, display_text: newPronounsDisplay || null, status: WordStatus.Okay },
];
const addPronouns = (event: Event) => {
event.preventDefault();
if (newPronouns in data.pronouns) {
const fullSet = data.pronouns[newPronouns];
pronouns = [
...pronouns,
{
pronouns: fullSet.pronouns.join("/"),
display_text: fullSet.display || null,
status: WordStatus.Okay,
},
];
} else {
pronouns = [
...pronouns,
{ pronouns: newPronouns, display_text: null, status: WordStatus.Okay },
];
}
newPronouns = "";
newPronounsDisplay = "";
};
const addLink = () => {
const addLink = (event: Event) => {
event.preventDefault();
links = [...links, newLink];
newLink = "";
};
@ -375,9 +392,10 @@
</FormGroup>
</div>
<div>
<FormGroup floating label="Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})">
<textarea style="min-height: 100px;" class="form-control" bind:value={bio} />
</FormGroup>
<div class="form">
<label for="bio"><strong>Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})</strong></label>
<textarea class="form-control" style="height: 200px;" id="bio" bind:value={bio} />
</div>
<p class="text-muted mt-3">
<Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
<a
@ -402,10 +420,10 @@
remove={() => removeName(index)}
/>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addName}>
<input type="text" class="form-control" bind:value={newName} />
<IconButton color="success" icon="plus" tooltip="Add name" click={() => addName()} />
</div>
<IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
</form>
</div>
<div class="col-md">
<h4>Links</h4>
@ -420,10 +438,10 @@
/>
</div>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addLink}>
<input type="text" class="form-control" bind:value={newLink} />
<IconButton color="success" icon="plus" tooltip="Add link" click={() => addLink()} />
</div>
<IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
</form>
</div>
</div>
<div class="row m-1">
@ -437,27 +455,43 @@
remove={() => removePronoun(index)}
/>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addPronouns}>
<input
type="text"
class="form-control"
placeholder="Full set (e.g. it/it/its/its/itself)"
placeholder="New pronouns"
bind:value={newPronouns}
required
/>
<input
type="text"
class="form-control"
placeholder="Optional display text (e.g. it/its)"
bind:value={newPronounsDisplay}
/>
<IconButton
type="submit"
color="success"
icon="plus"
tooltip="Add pronouns"
click={() => addPronouns()}
disabled={newPronouns === ""}
/>
</div>
<form class="input-group m-1" on:submit={addPronouns}>
<input
type="text"
class="form-control"
placeholder="New pronouns"
bind:value={newPronouns}
required
/>
<IconButton
type="submit"
color="success"
icon="plus"
tooltip="Add pronouns"
disabled={newPronouns === ""}
/>
<Button id="pronouns-help" color="secondary"><Icon name="question" /></Button>
<Popover target="pronouns-help" placement="bottom">
For common pronouns, the short form (e.g. "she/her" or "he/him") is enough; for less
common pronouns, you will have to use all five forms (e.g. "ce/cir/cir/cirs/cirself").
</Popover>
</form>
</form>
</div>
</div>
<hr />

6
frontend/src/routes/edit/member/[id]/+page.ts
View file

@ -1,7 +1,10 @@
import type { MeUser, APIError, Member } from "$lib/api/entities";
import type { MeUser, APIError, Member, PronounsJson } from "$lib/api/entities";
import { apiFetchClient } from "$lib/api/fetch";
import { error } from "@sveltejs/kit";
import pronounsRaw from "$lib/pronouns.json";
const pronouns = pronounsRaw as PronounsJson;
export const ssr = false;
export const load = async ({ params }) => {
@ -12,6 +15,7 @@ export const load = async ({ params }) => {
return {
user,
member,
pronouns: pronouns.autocomplete,
};
} catch (e) {
throw error((e as APIError).code, (e as APIError).message);

37
frontend/src/routes/edit/profile/+page.svelte
View file

@ -148,12 +148,16 @@
fields[newIndex] = temp;
};
const addName = () => {
const addName = (event: Event) => {
event.preventDefault();
names = [...names, { value: newName, status: WordStatus.Okay }];
newName = "";
};
const addPronouns = () => {
const addPronouns = (event: Event) => {
event.preventDefault();
if (newPronouns in data.pronouns) {
const fullSet = data.pronouns[newPronouns];
pronouns = [
@ -173,7 +177,9 @@
newPronouns = "";
};
const addLink = () => {
const addLink = (event: Event) => {
event.preventDefault();
links = [...links, newLink];
newLink = "";
};
@ -297,9 +303,10 @@
<Input bind:value={display_name} />
</FormGroup>
<div>
<FormGroup floating label="Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})">
<textarea style="min-height: 100px;" class="form-control" bind:value={bio} />
</FormGroup>
<div class="form">
<label for="bio"><strong>Bio ({bio.length}/{MAX_DESCRIPTION_LENGTH})</strong></label>
<textarea class="form-control" style="height: 200px;" id="bio" bind:value={bio} />
</div>
<p class="text-muted mt-3">
<Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
<a
@ -324,10 +331,10 @@
remove={() => removeName(index)}
/>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addName}>
<input type="text" class="form-control" bind:value={newName} />
<IconButton color="success" icon="plus" tooltip="Add name" click={() => addName()} />
</div>
<IconButton type="submit" color="success" icon="plus" tooltip="Add name" />
</form>
</div>
<div class="col-md">
<h4>Links</h4>
@ -342,10 +349,10 @@
/>
</div>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addLink}>
<input type="text" class="form-control" bind:value={newLink} />
<IconButton color="success" icon="plus" tooltip="Add link" click={() => addLink()} />
</div>
<IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
</form>
</div>
</div>
<div class="row m-1">
@ -359,7 +366,7 @@
remove={() => removePronoun(index)}
/>
{/each}
<div class="input-group m-1">
<form class="input-group m-1" on:submit={addPronouns}>
<input
type="text"
class="form-control"
@ -368,18 +375,18 @@
required
/>
<IconButton
type="submit"
color="success"
icon="plus"
tooltip="Add pronouns"
disabled={newPronouns === ""}
click={() => addPronouns()}
/>
<Button id="pronouns-help" color="secondary"><Icon name="question" /></Button>
<Popover target="pronouns-help" placement="bottom">
For common pronouns, the short form (e.g. "she/her" or "he/him") is enough; for less
common pronouns, you will have to use all five forms (e.g. "ce/cir/cir/cirs/cirself").
</Popover>
</div>
</form>
</div>
</div>
<hr />