fix: fix group list not updating when group gets edited

This commit is contained in:
Spectralitree 2021-12-19 12:01:55 +01:00
parent 6c6f6d986c
commit d87b16014f
3 changed files with 16 additions and 4 deletions

View File

@ -6,8 +6,7 @@
import Edit from './Edit.svelte'; import Edit from './Edit.svelte';
import twemoji from 'twemoji'; import twemoji from 'twemoji';
export let item: Group; export let group: Group;
let group = item;
let editMode: boolean; let editMode: boolean;
export let isPublic: boolean; export let isPublic: boolean;
export let loading: boolean = false; export let loading: boolean = false;
@ -87,6 +86,6 @@
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
{/if} {/if}
{:else} {:else}
<Edit bind:loading bind:group bind:editMode /> <Edit on:update bind:loading bind:group bind:editMode />
{/if} {/if}
</CardBody> </CardBody>

View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap'; import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
import { createEventDispatcher } from 'svelte';
import Group from '../../api/group'; import Group from '../../api/group';
import PKAPI from '../../api'; import PKAPI from '../../api';
import autosize from 'svelte-autosize'; import autosize from 'svelte-autosize';
@ -12,6 +13,12 @@
let input = new Group(group); let input = new Group(group);
const dispatch = createEventDispatcher();
function update() {
dispatch('update', group);
}
async function submit() { async function submit() {
let data = input; let data = input;
err = []; err = [];
@ -33,6 +40,7 @@
let res = await api.patchGroup({token: localStorage.getItem("pk-token"), id: group.id, data: data}); let res = await api.patchGroup({token: localStorage.getItem("pk-token"), id: group.id, data: data});
group = res; group = res;
err = []; err = [];
update();
editMode = false; editMode = false;
loading = false; loading = false;
} catch (error) { } catch (error) {

View File

@ -135,6 +135,7 @@
$: indexOfFirstItem = indexOfLastItem - itemsPerPage; $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
$: pageAmount = Math.ceil(finalList.length / itemsPerPage); $: pageAmount = Math.ceil(finalList.length / itemsPerPage);
let slicedList = [];
$: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem); $: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
function memberListRenderer(item: any) { function memberListRenderer(item: any) {
@ -147,6 +148,10 @@
let itemLoading: boolean[] = []; let itemLoading: boolean[] = [];
$: itemLoading.length = slicedList.length; $: itemLoading.length = slicedList.length;
function updateList(event: any) {
list = list.map(group => group.id !== event.detail.id ? group : event.detail)
}
</script> </script>
<Card class="mb-3"> <Card class="mb-3">
@ -254,7 +259,7 @@
<CardsHeader bind:item={group} bind:loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={group} bind:loading={itemLoading[index]} slot="header">
<FaUserCircle slot="icon"/> <FaUserCircle slot="icon"/>
</CardsHeader> </CardsHeader>
<Body bind:item={group} bind:isPublic={isPublic} bind:loading={itemLoading[index]}/> <Body on:update={updateList} bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
</AccordionItem> </AccordionItem>
{/each} {/each}
</Accordion> </Accordion>