From ba48ba0eb2cd2dd3ccb5fe47ed02d5d453e6848e Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Fri, 31 Mar 2023 00:11:28 +0200
Subject: [PATCH] feat: add names/pronouns/field entries on enter

---
 frontend/src/lib/components/IconButton.svelte |  3 +-
 frontend/src/routes/edit/EditableField.svelte | 10 ++-
 .../src/routes/edit/member/[id]/+page.svelte  | 90 +++++++++++++------
 frontend/src/routes/edit/member/[id]/+page.ts |  6 +-
 frontend/src/routes/edit/profile/+page.svelte | 37 ++++----
 5 files changed, 97 insertions(+), 49 deletions(-)

diff --git a/frontend/src/lib/components/IconButton.svelte b/frontend/src/lib/components/IconButton.svelte
index 580e63d..16473c5 100644
--- a/frontend/src/lib/components/IconButton.svelte
+++ b/frontend/src/lib/components/IconButton.svelte
@@ -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>
diff --git a/frontend/src/routes/edit/EditableField.svelte b/frontend/src/routes/edit/EditableField.svelte
index afa5fcc..446fe71 100644
--- a/frontend/src/routes/edit/EditableField.svelte
+++ b/frontend/src/routes/edit/EditableField.svelte
@@ -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>
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index c8e701f..8b8c029 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -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 />
diff --git a/frontend/src/routes/edit/member/[id]/+page.ts b/frontend/src/routes/edit/member/[id]/+page.ts
index e69d1fc..b695c60 100644
--- a/frontend/src/routes/edit/member/[id]/+page.ts
+++ b/frontend/src/routes/edit/member/[id]/+page.ts
@@ -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);
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index 3e32438..6663a09 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -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 />