[taler-merchant-backoffice] branch master updated: split table, updated sidebar

[gnunet]

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

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

The following commit(s) were added to refs/heads/master by this push:
     new e34c7ba  split table, updated sidebar
e34c7ba is described below

commit e34c7ba604c3e7ba122073d5b3e43256b36bbed5
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Feb 10 16:51:18 2021 -0300

    split table, updated sidebar
---
 src/components/sidebar/index.tsx     |   6 +-
 src/routes/instances/DeleteModal.tsx |   2 +-
 src/routes/instances/Table.tsx       | 105 ++++++++++++++++++++---------------
 3 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index fe569aa..8429ee7 100644
--- 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
index c3d0d22..98dbfe8 100644
--- 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
index 56e1243..7db153b 100644
--- 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)

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