Skip to content

Commit

Permalink
feat: use ListCard for Issuers
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelfig committed Aug 7, 2020
1 parent ed177a6 commit a7ec550
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 59 deletions.
53 changes: 53 additions & 0 deletions packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<script>
import { slide } from 'svelte/transition';
import List from 'smelte/src/components/List';
import Icon from "smelte/src/components/Icon";
import Card from "smelte/src/components/Card";
import ListItem from 'smelte/src/components/List/ListItem.svelte';
export let items = [];
export let expandIcon = 'arrow_right';
let expanded = [];
const toggle = item => {
if (expanded.includes(item)) {
expanded = expanded.filter(it => item !== it);
} else {
expanded = [...expanded, item];
}
};
</script>

<Card.Card class="fullwidth px-2 py-2">
<slot name="title"></slot>

<!-- All {JSON.stringify($issuers)} -->
{#if !Array.isArray(items) || items.length === 0}
<slot name="none">No items.</slot>
{:else}
<List {items}>
<div slot="item" class="px-1" let:item>
<div class="fullwidth px-1">
<ListItem dense selectedClasses="bg-primary-trans" {item} {...item} on:click={() => toggle(item)}>
<div class="flex items-center">
<Icon tip={expanded.includes(item)}>{expandIcon}</Icon>
<slot name="item-header" {item}><span>{item.text}</span></slot>
</div>
</ListItem>

{#if expanded.includes(item)}
<div in:slide class="ml-10">
<slot name="item-details" {item}></slot>
</div>
{/if}
</div>
</div>
</List>
{/if}

<slot name="actions"></slot>
</Card.Card>
62 changes: 18 additions & 44 deletions packages/dapp-svelte-wallet/ui/src/Issuer.svelte
Original file line number Diff line number Diff line change
@@ -1,58 +1,32 @@
<script>
import BoardId from "./BoardId.svelte";
import Petname from "./Petname.svelte";
import BoardId from "./BoardId.svelte";
import MakePurse from "./MakePurse.svelte";
import { walletP } from "./store";
import { E } from "@agoric/captp";
import Card from "smelte/src/components/Card";
import Dialog from "smelte/src/components/Dialog";
import CancelButton from "../lib/CancelButton.svelte";
import Contact from "./Contact.svelte";
export let issuer;
export let item;
let selected = false;
const onClick = ev => {
ev.stopPropagation();
selected = !selected;
};
export let summary = false;
export let details = false;
if (!summary && !details) {
summary = true;
}
</script>

{#if selected}
<Card.Card class="fullwidth px-1 py-1">
<div on:click={onClick}>
<Card.Title title="Issuer Details" />
</div>

<Petname name={issuer[0]} />

<!-- <Dialog bind:value={selected}>
<h5 slot="title">{issuer[0]} Issuer Details</h5> -->

<div class="px-2">
<div>
{#if summary}
<Petname name={item[0]} />
{/if}
{#if details}
<div>
Board ID:
<BoardId
onPublish={() => E(walletP).publishIssuer(issuer[1].brand)}
id={issuer[1].issuerBoardId} />
onPublish={() => E(walletP).publishIssuer(item[1].brand)}
id={item[1].issuerBoardId} />
</div>

<!-- </Dialog> -->
<div slot="actions">
{#if selected}
<MakePurse issuerPetname={issuer[0]}>Make Purse</MakePurse>
<CancelButton
on:click={ev => {
ev.stopPropagation();
selected = false;
}} />
{/if}
</div>
</Card.Card>
{:else}
<div on:click={onClick}>
<Card.Card class="fullwidth px-1 py-1">
<Petname name={issuer[0]} />
</Card.Card>
</div>
{/if}
<MakePurse issuerPetname={item[0]}>Make Purse</MakePurse>
{/if}
</div>
30 changes: 15 additions & 15 deletions packages/dapp-svelte-wallet/ui/src/Issuers.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script>
import { E } from '@agoric/eventual-send';
import Card from 'smelte/src/components/Card';
import List from 'smelte/src/components/List';
import Issuer from './Issuer.svelte';
import Import from './Import.svelte';
import Issuer from "./Issuer.svelte";
import { issuers, walletP } from './store';
import ListCard from '../lib/ListCard.svelte';
function cmp(a, b) {
return a < b ? -1 : a === b ? 0 : 1;
Expand All @@ -15,27 +15,27 @@
$: issuerItems = $issuers ? [...$issuers].sort((a, b) => cmp(a[0], b[0])) : [];
</script>

<Card.Card class="fullwidth px-2 py-2">
<ListCard items={issuerItems}>
<div slot="title">
<Card.Title
title="Issuers"
subheader="Verifiers of digital assets"
/>
</div>

<!-- All {JSON.stringify($issuers)} -->
{#if !Array.isArray($issuers) || $issuers.length === 0}
<div slot="none">
No issuers.
{:else}
<List items={issuerItems}>
<div slot="item" class="px-1" let:item={item}>
<Issuer issuer={item} />
</div>
</List>
{/if}
</div>

<div slot="item-header" let:item>
<Issuer {item} summary={true} />
</div>

<div slot="item-details" let:item>
<Issuer {item} details={true} />
</div>

<div slot="actions">
<Import name="Issuer"
adder={(petname, obj) => E(walletP).addIssuer(petname, obj, true)}>Import</Import>
</div>
</Card.Card>
</ListCard>

0 comments on commit a7ec550

Please sign in to comment.