From 293739a0d01062bd87b0390e9f2e79faeec3545a Mon Sep 17 00:00:00 2001
From: Jake Fulmine <jake@fulmine.xyz>
Date: Sat, 21 Jan 2023 20:16:13 +0100
Subject: [PATCH] tweak(dashboard): show amount of characters of description
 input

---
 dashboard/src/components/group/Edit.svelte  | 1 +
 dashboard/src/components/member/Edit.svelte | 1 +
 dashboard/src/components/system/Edit.svelte | 1 +
 3 files changed, 3 insertions(+)

diff --git a/dashboard/src/components/group/Edit.svelte b/dashboard/src/components/group/Edit.svelte
index a4b384d5..43eebed7 100644
--- a/dashboard/src/components/group/Edit.svelte
+++ b/dashboard/src/components/group/Edit.svelte
@@ -139,6 +139,7 @@
     <br>
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/>
 </div>
+<span class="text-center d-block mb-2 mb-lg-1" >({input.description.length} / 1000 characters)</span>
 {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete group">Delete</Button>
 {:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete group">Delete</Button>{/if}
 <Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
diff --git a/dashboard/src/components/member/Edit.svelte b/dashboard/src/components/member/Edit.svelte
index 4b7df0b9..c0dff0fb 100644
--- a/dashboard/src/components/member/Edit.svelte
+++ b/dashboard/src/components/member/Edit.svelte
@@ -172,6 +172,7 @@
     <br>
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={member.description} aria-label="member description"/>
 </div>
+<span class="text-center d-block mb-2 mb-lg-1" >({input.description.length} / 1000 characters)</span>
 {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete member">Delete</Button>
 {:else}<Button style="flex: 0" color="primary" disabled  aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete member">Delete</Button>{/if}
 <Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
diff --git a/dashboard/src/components/system/Edit.svelte b/dashboard/src/components/system/Edit.svelte
index ddd73dc6..332f1549 100644
--- a/dashboard/src/components/system/Edit.svelte
+++ b/dashboard/src/components/system/Edit.svelte
@@ -103,5 +103,6 @@
     <br>
     <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={user.description}  aria-label="system description"/>
 </div>
+<span class="text-center d-block mb-2 mb-lg-1" >({input.description.length} / 1000 characters)</span>
 {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button>
 {:else}<Button style="flex: 0" color="primary" disabled  aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button>{/if}
\ No newline at end of file