fix(dashboard): swap svelte-autosize for svelte-textarea-autoresize

This commit is contained in:
Jake Fulmine
2022-08-17 21:40:10 +02:00
parent 3a7e8422af
commit 7aa4d49a97
8 changed files with 20 additions and 29 deletions

View File

@@ -3,7 +3,7 @@
import { createEventDispatcher, tick } from 'svelte';
import { Group } from '../../api/types';
import api from '../../api';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
@@ -80,8 +80,6 @@
loading = false;
deletion();
} catch (error) {
console.log(error);
deleteErr = error.message;
loading = false;
}
}
@@ -132,7 +130,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description} aria-label="group description"/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/>
</div>
{#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}

View File

@@ -2,7 +2,7 @@
import { Row, Col, Input, Button, Label, Alert, Spinner, Accordion, AccordionItem, CardTitle } from 'sveltestrap';
import { Group } from '../../api/types';
import api from '../../api';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import { createEventDispatcher } from 'svelte';
import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
@@ -167,7 +167,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize />
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize />
</div>
{#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
{:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
import { createEventDispatcher, tick } from 'svelte';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import moment from 'moment';
import { Member } from '../../api/types'
@@ -162,7 +162,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description} aria-label="member description"/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={member.description} aria-label="member description"/>
</div>
{#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}

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { Accordion, AccordionItem, Row, Col, Input, Button, Label, Alert, Spinner, CardTitle, InputGroup } from 'sveltestrap';
import { createEventDispatcher } from 'svelte';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import moment from 'moment';
import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
import { Member } from '../../api/types';
@@ -242,7 +242,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={input.description}/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={input.description}/>
</div>
{#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
{:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
// import moment from 'moment-timezone';
import { currentUser } from '../../stores';
@@ -94,7 +94,7 @@
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
{/if}
<br>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description} aria-label="system description"/>
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={user.description} aria-label="system description"/>
</div>
{#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}

View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip, Button } from 'sveltestrap';
import Toggle from 'svelte-toggle';
import autosize from 'svelte-autosize';
import { autoresize } from 'svelte-textarea-autoresize';
import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
import { Config } from '../api/types';
import api from '../api';
@@ -109,13 +109,13 @@
<CardBody>
<p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
<b>Template 1</b>
<textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autosize placeholder={descriptions[0]} aria-label="Description template 1"/>
<textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autoresize placeholder={descriptions[0]} aria-label="Description template 1"/>
<br>
<b>Template 2</b>
<textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autosize placeholder={descriptions[1]} aria-label="Description template 2"/>
<textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autoresize placeholder={descriptions[1]} aria-label="Description template 2"/>
<br>
<b>Template 3</b>
<textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autosize placeholder={descriptions[2]} aria-label="Description template 3"/>
<textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autoresize placeholder={descriptions[2]} aria-label="Description template 3"/>
<br>
<Button on:click={saveDescriptionTemplates}>Save</Button>
</CardBody>