commit 1737dfe71dd867488869d7583c8e01482f2d8b31
parent aa3858a3e35d592377d3fbb23ec862044e99330a
Author: Sebastian <sebasjm@gmail.com>
Date: Thu, 11 Feb 2021 14:39:59 -0300
splt card table into components
Diffstat:
3 files changed, 80 insertions(+), 69 deletions(-)
diff --git a/src/routes/instances/CardTable.tsx b/src/routes/instances/CardTable.tsx
@@ -1,6 +1,8 @@
import { h, VNode } from "preact";
-import { useEffect, useState, StateUpdater } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
import { MerchantBackend, WidthId as WithId } from "../../declaration";
+import EmptyTable from "./EmptyTable";
+import Table from "./Table";
interface Props {
instances: MerchantBackend.Instances.Instance[];
@@ -9,10 +11,6 @@ interface Props {
selected: MerchantBackend.Instances.QueryInstancesResponse & WithId | undefined;
}
-function toggleSelected<T>(id: T): (prev: T[]) => T[] {
- return (prev: T[]): T[] => prev.indexOf(id) == -1 ? [...prev, id] : prev.filter(e => e != id)
-}
-
interface Actions {
element: MerchantBackend.Instances.Instance;
type: 'DELETE' | 'UPDATE';
@@ -28,69 +26,6 @@ function buildActions(intances: MerchantBackend.Instances.Instance[], selected:
.map(id => ({ element: id, type: action }))
}
-const EmptyTable = (): VNode => (
- <div class="content has-text-grey has-text-centered">
- <p>
- <span class="icon is-large"><i class="mdi mdi-emoticon-sad mdi-48px" /></span>
- </p>
- <p>No instance configured yet, setup one pressing the + button </p>
- </div>
-)
-
-interface TableProps {
- rowSelection: string[];
- instances: MerchantBackend.Instances.Instance[];
- onSelect: (id: string | null, action: 'UPDATE' | 'DELETE') => void;
- rowSelectionHandler: StateUpdater<string[]>;
-}
-
-const Table = ({ rowSelection, rowSelectionHandler, instances, onSelect }: TableProps): VNode => (
- <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
- <thead>
- <tr>
- <th class="is-checkbox-cell">
- <label class="b-checkbox checkbox">
- <input type="checkbox" checked={rowSelection.length === instances.length} onClick={(): void => rowSelectionHandler(rowSelection.length === instances.length ? [] : instances.map(i => i.id))} />
- <span class="check" />
- </label>
- </th>
- <th>id</th>
- <th>name</th>
- <th>public key</th>
- <th>payments</th>
- <th />
- </tr>
- </thead>
- <tbody>
- {instances.map(i => {
- return <tr>
- <td class="is-checkbox-cell">
- <label class="b-checkbox checkbox">
- <input type="checkbox" checked={rowSelection.indexOf(i.id) != -1} onClick={(): void => rowSelectionHandler(toggleSelected(i.id))} />
- <span class="check" />
- </label>
- </td>
- <td >{i.id}</td>
- <td >{i.name}</td>
- <td >{i.merchant_pub}</td>
- <td >{i.payment_targets}</td>
- <td class="is-actions-cell">
- <div class="buttons is-right">
- <button class="button is-small is-primary" type="button" onClick={(): void => onSelect(i.id, 'UPDATE')}>
- <span class="icon"><i class="mdi mdi-eye" /></span>
- </button>
- <button class="button is-small is-danger jb-modal" type="button" onClick={(): void => onSelect(i.id, 'DELETE')}>
- <span class="icon"><i class="mdi mdi-trash-can" /></span>
- </button>
- </div>
- </td>
- </tr>
- })}
-
- </tbody>
- </table>)
-
-
export default function CardTable({ instances, onCreate, onSelect, selected }: Props): VNode {
const [actionQueue, actionQueueHandler] = useState<Actions[]>([]);
const [rowSelection, rowSelectionHandler] = useState<string[]>([])
@@ -113,7 +48,10 @@ export default function CardTable({ instances, onCreate, onSelect, selected }: P
return <div class="card has-table">
<header class="card-header">
<p class="card-header-title"><span class="icon"><i class="mdi mdi-account-multiple" /></span>Instances</p>
- <button class={rowSelection.length > 0 ? "card-header-icon" : "card-header-icon is-hidden"} type="button" onClick={(): void => actionQueueHandler(buildActions(instances, rowSelection, 'DELETE'))} >
+
+ <button class={rowSelection.length > 0 ? "card-header-icon" : "card-header-icon is-hidden"}
+ type="button" onClick={(): void => actionQueueHandler(buildActions(instances, rowSelection, 'DELETE'))} >
+
<span class="icon"><i class="mdi mdi-trash-can" /></span>
</button>
<button class="card-header-icon" type="button" onClick={onCreate}>
diff --git a/src/routes/instances/EmptyTable.tsx b/src/routes/instances/EmptyTable.tsx
@@ -0,0 +1,10 @@
+import { h, VNode } from "preact";
+
+export default function EmptyTable(): VNode {
+ return <div class="content has-text-grey has-text-centered">
+ <p>
+ <span class="icon is-large"><i class="mdi mdi-emoticon-sad mdi-48px" /></span>
+ </p>
+ <p>No instance configured yet, setup one pressing the + button </p>
+ </div>
+}
diff --git a/src/routes/instances/Table.tsx b/src/routes/instances/Table.tsx
@@ -0,0 +1,62 @@
+import { h, VNode } from "preact"
+import { StateUpdater } from "preact/hooks"
+import { MerchantBackend } from "../../declaration"
+
+interface Props {
+ rowSelection: string[];
+ instances: MerchantBackend.Instances.Instance[];
+ onSelect: (id: string | null, action: 'UPDATE' | 'DELETE') => void;
+ rowSelectionHandler: StateUpdater<string[]>;
+}
+
+function toggleSelected<T>(id: T): (prev: T[]) => T[] {
+ return (prev: T[]): T[] => prev.indexOf(id) == -1 ? [...prev, id] : prev.filter(e => e != id)
+}
+
+export default function Table({ rowSelection, rowSelectionHandler, instances, onSelect }: Props): VNode {
+ return (
+ <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+ <thead>
+ <tr>
+ <th class="is-checkbox-cell">
+ <label class="b-checkbox checkbox">
+ <input type="checkbox" checked={rowSelection.length === instances.length} onClick={(): void => rowSelectionHandler(rowSelection.length === instances.length ? [] : instances.map(i => i.id))} />
+ <span class="check" />
+ </label>
+ </th>
+ <th>id</th>
+ <th>name</th>
+ <th>public key</th>
+ <th>payments</th>
+ <th />
+ </tr>
+ </thead>
+ <tbody>
+ {instances.map(i => {
+ return <tr>
+ <td class="is-checkbox-cell">
+ <label class="b-checkbox checkbox">
+ <input type="checkbox" checked={rowSelection.indexOf(i.id) != -1} onClick={(): void => rowSelectionHandler(toggleSelected(i.id))} />
+ <span class="check" />
+ </label>
+ </td>
+ <td >{i.id}</td>
+ <td >{i.name}</td>
+ <td >{i.merchant_pub}</td>
+ <td >{i.payment_targets}</td>
+ <td class="is-actions-cell">
+ <div class="buttons is-right">
+ <button class="button is-small is-primary" type="button" onClick={(): void => onSelect(i.id, 'UPDATE')}>
+ <span class="icon"><i class="mdi mdi-eye" /></span>
+ </button>
+ <button class="button is-small is-danger jb-modal" type="button" onClick={(): void => onSelect(i.id, 'DELETE')}>
+ <span class="icon"><i class="mdi mdi-trash-can" /></span>
+ </button>
+ </div>
+ </td>
+ </tr>
+ })}
+
+ </tbody>
+ </table>)
+}
+\ No newline at end of file
