-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #196 from rainlanguage/2024-02-07-gui-generic-table
2024 02 07 gui generic table
- Loading branch information
Showing
6 changed files
with
160 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <script lang="ts" generics="T"> | ||
| import { | ||
| Table, | ||
| TableBody, | ||
| TableBodyRow, | ||
| TableHead, | ||
| } from 'flowbite-svelte'; | ||
| import { FileCsvOutline } from 'flowbite-svelte-icons'; | ||
| import ButtonsPagination from '$lib/components/ButtonsPagination.svelte'; | ||
| import type { PaginatedCachedStore } from '$lib/storesGeneric/listStore'; | ||
| import ButtonLoading from './ButtonLoading.svelte'; | ||
| import { createEventDispatcher } from 'svelte'; | ||
| const dispatch = createEventDispatcher(); | ||
| // eslint-disable-next-line no-undef | ||
| export let listStore: PaginatedCachedStore<T>; | ||
| export let emptyMessage: string = "None found" | ||
| export let rowHoverable = true; | ||
| export let enableCsvExport = true; | ||
| </script> | ||
|
|
||
| {#if $listStore.currentPage.length === 0} | ||
| <div class="text-center text-gray-900 dark:text-white">{emptyMessage}</div> | ||
| {:else} | ||
| <Table divClass="cursor-pointer" hoverable={rowHoverable}> | ||
| <TableHead> | ||
| <slot name="head" {listStore}></slot> | ||
| </TableHead> | ||
| <TableBody> | ||
| {#each $listStore.currentPage as item} | ||
| <TableBodyRow on:click={() => { dispatch('clickRow', {item}) }}> | ||
| <slot name="bodyRow" {item}></slot> | ||
| </TableBodyRow> | ||
| {/each} | ||
| </TableBody> | ||
| </Table> | ||
|
|
||
| {#if enableCsvExport} | ||
| <div class="flex justify-between mt-2"> | ||
| <ButtonLoading size="xs" color="blue" on:click={() => listStore.exportCsv()} loading={$listStore.isExporting}> | ||
| <FileCsvOutline class="w-4 h-4 mr-2"/> | ||
| Export to CSV | ||
| </ButtonLoading> | ||
| <ButtonsPagination index={$listStore.index} on:previous={listStore.fetchPrev} on:next={listStore.fetchNext} loading={$listStore.isFetching} /> | ||
| </div> | ||
| {/if} | ||
| {/if} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,67 @@ | ||
| <script lang="ts"> | ||
| import { | ||
| Button, | ||
| Table, | ||
| TableBody, | ||
| TableBodyCell, | ||
| TableBodyRow, | ||
| TableHead, | ||
| TableHeadCell, | ||
| Badge, | ||
| Dropdown, | ||
| DropdownItem, | ||
| } from 'flowbite-svelte'; | ||
| import { DotsVerticalOutline, FileCsvOutline } from 'flowbite-svelte-icons'; | ||
| import { DotsVerticalOutline } from 'flowbite-svelte-icons'; | ||
| import { goto } from '$app/navigation'; | ||
| import { orderRemove } from '$lib/utils/orderRemove'; | ||
| import { formatTimestampSecondsAsLocal } from '$lib/utils/time'; | ||
| import { walletAddressMatchesOrBlank } from '$lib/stores/settings'; | ||
| import ButtonsPagination from '$lib/components/ButtonsPagination.svelte'; | ||
| import type { PaginatedCachedStore } from '$lib/stores/paginatedStore'; | ||
| import type { PaginatedCachedStore } from '$lib/storesGeneric/listStore'; | ||
| import type { Order } from '$lib/typeshare/ordersList'; | ||
| import ButtonLoading from './ButtonLoading.svelte'; | ||
| import Hash from './Hash.svelte'; | ||
| import { HashType } from '$lib/utils/hash'; | ||
| import AppTable from '$lib/components/AppTable.svelte'; | ||
| export let ordersList: PaginatedCachedStore<Order>; | ||
| </script> | ||
|
|
||
| {#if $ordersList.currentPage.length === 0} | ||
| <div class="text-center text-gray-900 dark:text-white">No Orders found</div> | ||
| {:else} | ||
| <Table divClass="cursor-pointer" hoverable={true}> | ||
| <TableHead> | ||
| <TableHeadCell>Active</TableHeadCell> | ||
| <TableHeadCell>Order ID</TableHeadCell> | ||
| <TableHeadCell>Owner</TableHeadCell> | ||
| <TableHeadCell>Created At</TableHeadCell> | ||
| <TableHeadCell>Input Token(s)</TableHeadCell> | ||
| <TableHeadCell>Output Token(s)</TableHeadCell> | ||
| <TableHeadCell padding="px-0"></TableHeadCell> | ||
| </TableHead> | ||
| <TableBody> | ||
| {#each $ordersList.currentPage as order} | ||
| <TableBodyRow on:click={() => goto(`/orders/${order.id}`)}> | ||
| <TableBodyCell tdClass="px-4 py-2"> | ||
| {#if order.order_active} | ||
| <Badge color="green">Active</Badge> | ||
| {:else} | ||
| <Badge color="yellow">Inactive</Badge> | ||
| {/if} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="break-all px-4 py-2"><Hash type={HashType.Identifier} value={order.id} /></TableBodyCell> | ||
| <TableBodyCell tdClass="break-all px-4 py-2"><Hash type={HashType.Wallet} value={order.owner.id} /></TableBodyCell> | ||
| <TableBodyCell tdClass="break-word px-4 py-2"> | ||
| {formatTimestampSecondsAsLocal(BigInt(order.timestamp))} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="break-word p-2"> | ||
| {order.valid_inputs?.map((t) => t.token.symbol)} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="break-word p-2"> | ||
| {order.valid_outputs?.map((t) => t.token.symbol)} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="px-0"> | ||
| {#if $walletAddressMatchesOrBlank(order.owner.id) && order.order_active} | ||
| <Button color="alternative" outline={false} id={`order-menu-${order.id}`} class="border-none px-2 mr-2" on:click={(e)=> {e.stopPropagation();}}> | ||
| <DotsVerticalOutline class="dark:text-white"/> | ||
| </Button> | ||
| {/if} | ||
| </TableBodyCell> | ||
| {#if $walletAddressMatchesOrBlank(order.owner.id) && order.order_active} | ||
| <Dropdown placement="bottom-end" triggeredBy={`#order-menu-${order.id}`}> | ||
| <DropdownItem on:click={(e) => {e.stopPropagation(); orderRemove(order.id);}}>Remove</DropdownItem> | ||
| </Dropdown> | ||
| {/if} | ||
| </TableBodyRow> | ||
| {/each} | ||
| </TableBody> | ||
| </Table> | ||
| <AppTable listStore={ordersList} emptyMessage="No Orders Found" on:clickRow={(e) => { goto(`/orders/${e.detail.item.id}`); }}> | ||
| <svelte:fragment slot="head"> | ||
| <TableHeadCell>Active</TableHeadCell> | ||
| <TableHeadCell>Order ID</TableHeadCell> | ||
| <TableHeadCell>Owner</TableHeadCell> | ||
| <TableHeadCell>Created At</TableHeadCell> | ||
| <TableHeadCell>Input Token(s)</TableHeadCell> | ||
| <TableHeadCell>Output Token(s)</TableHeadCell> | ||
| <TableHeadCell></TableHeadCell> | ||
| </svelte:fragment> | ||
|
|
||
| <div class="flex justify-between mt-2"> | ||
| <ButtonLoading size="xs" color="blue" on:click={() => ordersList.exportCsv()} loading={$ordersList.isExporting}> | ||
| <FileCsvOutline class="w-4 h-4 mr-2"/> | ||
| Export to CSV | ||
| </ButtonLoading> | ||
| <ButtonsPagination index={$ordersList.index} on:previous={ordersList.fetchPrev} on:next={ordersList.fetchNext} loading={$ordersList.isFetching} /> | ||
| </div> | ||
| {/if} | ||
| <svelte:fragment slot="bodyRow" let:item> | ||
| <TableBodyCell tdClass="px-4 py-2"> | ||
| {#if item.order_active} | ||
| <Badge color="green">Active</Badge> | ||
| {:else} | ||
| <Badge color="yellow">Inactive</Badge> | ||
| {/if} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="break-all px-4 py-2"><Hash type={HashType.Identifier} value={item.id} /></TableBodyCell> | ||
| <TableBodyCell tdClass="break-all px-4 py-2"><Hash type={HashType.Wallet} value={item.owner.id} /></TableBodyCell> | ||
| <TableBodyCell tdClass="break-word px-4 py-2"> | ||
| {formatTimestampSecondsAsLocal(BigInt(item.timestamp))} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="break-word p-2"> | ||
| {item.valid_inputs?.map((t) => t.token.symbol)} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="break-word p-2"> | ||
| {item.valid_outputs?.map((t) => t.token.symbol)} | ||
| </TableBodyCell> | ||
| <TableBodyCell tdClass="px-0"> | ||
| {#if $walletAddressMatchesOrBlank(item.owner.id) && item.order_active} | ||
| <Button color="alternative" outline={false} id={`order-menu-${item.id}`} class="border-none px-2 mr-2" on:click={(e)=> {e.stopPropagation();}}> | ||
| <DotsVerticalOutline class="dark:text-white"/> | ||
| </Button> | ||
| {/if} | ||
| </TableBodyCell> | ||
| {#if $walletAddressMatchesOrBlank(item.owner.id) && item.order_active} | ||
| <Dropdown placement="bottom-end" triggeredBy={`#order-menu-${item.id}`}> | ||
| <DropdownItem on:click={(e) => {e.stopPropagation(); orderRemove(item.id);}}>Remove</DropdownItem> | ||
| </Dropdown> | ||
| {/if} | ||
| </svelte:fragment> | ||
| </AppTable> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.