feat: dynamic icons based on visibility in lists
This commit is contained in:
parent
d027a9b05a
commit
90f5d63959
@ -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 />
|
||||||
|
@ -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 />
|
||||||
|
Loading…
Reference in New Issue
Block a user