[taler-merchant-backoffice] 02/03: splt card table into components

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository merchant-backoffice.

commit 1737dfe71dd867488869d7583c8e01482f2d8b31
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Feb 11 14:39:59 2021 -0300

    splt card table into components
---
 src/routes/instances/CardTable.tsx  | 76 ++++---------------------------------
 src/routes/instances/EmptyTable.tsx | 10 +++++
 src/routes/instances/Table.tsx      | 62 ++++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+), 69 deletions(-)

diff --git a/src/routes/instances/CardTable.tsx 
b/src/routes/instances/CardTable.tsx
index 31f74a4..551a543 100644
--- 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
new file mode 100644
index 0000000..5aff8ef
--- /dev/null
+++ 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
new file mode 100644
index 0000000..761b068
--- /dev/null
+++ 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

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.