commit e34c7ba604c3e7ba122073d5b3e43256b36bbed5
parent 0b57def514b01352a014f388bac686255ddd060a
Author: Sebastian <sebasjm@gmail.com>
Date: Wed, 10 Feb 2021 16:51:18 -0300
split table, updated sidebar
Diffstat:
3 files changed, 63 insertions(+), 50 deletions(-)
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -12,7 +12,7 @@ export default function Sidebar(): VNode {
<p class="menu-label">General</p>
<ul class="menu-list">
<li>
- <a href="/instances" class="is-active router-link-active has-icon">
+ <a href="/" class="is-active router-link-active has-icon">
<span class="icon"><i class="mdi mdi-desktop-mac" /></span>
<span class="menu-item-label">Instances</span>
</a>
@@ -22,8 +22,8 @@ export default function Sidebar(): VNode {
<ul class="menu-list">
<li>
<a href="/instances" class="has-icon">
- <span class="icon has-update-mark"><i class="mdi mdi-table" /></span>
- <span class="menu-item-label">Manage</span>
+ <span class="icon"><i class="mdi mdi-table" /></span>
+ <span class="menu-item-label">Details</span>
</a>
</li>
<li>
diff --git a/src/routes/instances/DeleteModal.tsx b/src/routes/instances/DeleteModal.tsx
@@ -11,6 +11,6 @@ interface Props {
export default function DeleteModal({ element, onCancel, onConfirm }: Props): VNode {
return <ConfirmModal description="delete instance" danger active onCancel={onCancel} onConfirm={() => onConfirm(element)}>
<p>This will permanently delete instance "{element.name}" with id <b>{element.id}</b></p>
- <p>Please confirm this actionssss</p>
+ <p>Please confirm this action</p>
</ConfirmModal>
}
diff --git a/src/routes/instances/Table.tsx b/src/routes/instances/Table.tsx
@@ -33,7 +33,60 @@ function buildActions(intances: MerchantBackend.Instances.Instance[], selected:
.map(id => ({ element: id, type: action }))
}
-export default function Table({ instances, onCreate, onDelete, onSelect, onUpdate, selected }: Props): VNode {
+const EmptyTable = () => <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>
+
+const Table = ({ rowSelection, rowSelectionHandler, instances, onSelect, toBeDeletedHandler }) => <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={e => 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={e => 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={e => onSelect(i.id)}>
+ <span class="icon"><i class="mdi mdi-eye" /></span>
+ </button>
+ <button class="button is-small is-danger jb-modal" type="button" onClick={e => toBeDeletedHandler(i)}>
+ <span class="icon"><i class="mdi mdi-trash-can" /></span>
+ </button>
+ </div>
+ </td>
+ </tr>
+ })}
+
+ </tbody>
+</table>
+
+
+export default function CardTable({ instances, onCreate, onDelete, onSelect, onUpdate, selected }: Props): VNode {
const [toBeCreated, toBeCreatedHandler] = useState<boolean>(false)
const [actionQueue, actionQueueHandler] = useState<Actions[]>([]);
const [toBeDeleted, toBeDeletedHandler] = useState<MerchantBackend.Instances.Instance | null>(null)
@@ -54,6 +107,7 @@ export default function Table({ instances, onCreate, onDelete, onSelect, onUpdat
}
}, [actionQueue, selected])
+
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>
@@ -67,51 +121,10 @@ export default function Table({ instances, onCreate, onDelete, onSelect, onUpdat
<div class="card-content">
<div class="b-table has-pagination">
<div class="table-wrapper has-mobile-cards">
- <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
- <thead>
- <tr>
- <th class="is-checkbox-cell">
- { instances.length > 0 ? <label class="b-checkbox checkbox">
- <input type="checkbox" checked={rowSelection.length === instances.length} onClick={e => rowSelectionHandler(rowSelection.length === instances.length ? [] : instances.map(i => i.id))} />
- <span class="check" />
- </label>
- : null }
- </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={e => 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={e => onSelect(i.id)}>
- <span class="icon"><i class="mdi mdi-eye" /></span>
- </button>
- <button class="button is-small is-danger jb-modal" type="button" onClick={e => toBeDeletedHandler(i)}>
- <span class="icon"><i class="mdi mdi-trash-can" /></span>
- </button>
- </div>
- </td>
- </tr>
- })}
-
- </tbody>
- </table>
+ {instances.length > 0 ?
+ <Table instances={instances} onSelect={onSelect} rowSelection={rowSelection} rowSelectionHandler={rowSelectionHandler} toBeDeletedHandler={toBeDeletedHandler} /> :
+ <EmptyTable />
+ }
</div>
{toBeDeleted ? <DeleteModal element={toBeDeleted} onCancel={() => toBeDeletedHandler(null)} onConfirm={(i) => {
onDelete(i.id)
