feat: dynamic icons based on visibility in lists

This commit is contained in:
Spectralitree 2021-12-19 14:24:21 +01:00
parent d027a9b05a
commit 90f5d63959
2 changed files with 27 additions and 8 deletions

View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Label, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap'; import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Label, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte' import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import FaSearch from 'svelte-icons/fa/FaSearch.svelte' import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
import { useParams } from 'svelte-navigator'; import { useParams } from 'svelte-navigator';
@ -11,6 +11,7 @@
import ListPagination from '../ListPagination.svelte'; import ListPagination from '../ListPagination.svelte';
import Body from './Body.svelte'; import Body from './Body.svelte';
import Svelecte, { addFormatter } from 'svelecte'; import Svelecte, { addFormatter } from 'svelecte';
import FaLock from 'svelte-icons/fa/FaLock.svelte';
export let isPublic: boolean; export let isPublic: boolean;
@ -255,12 +256,21 @@
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />
<Accordion class="my-3" stayOpen> <Accordion class="my-3" stayOpen>
{#each slicedList as group, index (group.id)} {#each slicedList as group, index (group.id)}
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
<AccordionItem> <AccordionItem>
<CardsHeader bind:item={group} bind:loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
<FaUserCircle slot="icon"/> <FaUsers slot="icon" />
</CardsHeader> </CardsHeader>
<Body on:update={updateList} bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/> <Body on:update={updateList} bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
</AccordionItem> </AccordionItem>
{:else}
<AccordionItem>
<CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
<FaLock slot="icon" />
</CardsHeader>
<Body on:update={updateList} bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
</AccordionItem>
{/if}
{/each} {/each}
</Accordion> </Accordion>
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />

View File

@ -10,6 +10,7 @@
import CardsHeader from '../CardsHeader.svelte'; import CardsHeader from '../CardsHeader.svelte';
import ListPagination from '../ListPagination.svelte'; import ListPagination from '../ListPagination.svelte';
import Svelecte, { addFormatter } from 'svelecte'; import Svelecte, { addFormatter } from 'svelecte';
import FaLock from 'svelte-icons/fa/FaLock.svelte';
export let isPublic: boolean; export let isPublic: boolean;
let itemLoading: boolean[] = []; let itemLoading: boolean[] = [];
@ -247,11 +248,19 @@
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />
<Accordion class="my-3" stayOpen> <Accordion class="my-3" stayOpen>
{#each slicedList as member, index (member.id)} {#each slicedList as member, index (member.id)}
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
<AccordionItem> <AccordionItem>
<CardsHeader bind:item={member} loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
<FaUserCircle slot="icon" /> <FaUserCircle slot="icon" />
</CardsHeader> </CardsHeader>
</AccordionItem> </AccordionItem>
{:else}
<AccordionItem>
<CardsHeader bind:item={member} loading={itemLoading[index]} slot="header">
<FaLock slot="icon" />
</CardsHeader>
</AccordionItem>
{/if}
{/each} {/each}
</Accordion> </Accordion>
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />