[taler-merchant-backoffice] branch master updated: WIP: scrollable table on mobile, fixed error messages

[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 1ed3f01  WIP: scrollable table on mobile, fixed error messages
1ed3f01 is described below

commit 1ed3f01006aca39bf428aa831cc76d73043d2893
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Mar 10 17:26:06 2021 -0300

    WIP: scrollable table on mobile, fixed error messages
---
 packages/frontend/src/ApplicationReadyRoutes.tsx   | 41 ++++++----------------
 .../src/routes/instance/orders/list/Table.tsx      | 39 ++++++++++----------
 packages/frontend/src/scss/libs/_all.scss          |  2 +-
 3 files changed, 32 insertions(+), 50 deletions(-)

diff --git a/packages/frontend/src/ApplicationReadyRoutes.tsx 
b/packages/frontend/src/ApplicationReadyRoutes.tsx
index 446cd56..64fbb32 100644
--- a/packages/frontend/src/ApplicationReadyRoutes.tsx
+++ b/packages/frontend/src/ApplicationReadyRoutes.tsx
@@ -89,37 +89,18 @@ export function ApplicationReadyRoutes({ pushNotification, 
addTokenCleaner, clea
         </Fragment>
       }
     }
-    if (!list.error) {
-      return <div id="app">
-        <section class="section is-title-bar">
-
-          <div class="level">
-            <div class="level-left">
-              <div class="level-item">
-                <ul>
-                  <li>loading s</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
+    if (list.error) {
+      return <Fragment>
+        <Menu title="Error" />
+        <LoginPage
+          withMessage={{ message: i18n`Couldnt access the server`, 
description: list.error.message, type: 'ERROR', }}
+          onConfirm={updateLoginStatus}
+        />
+      </Fragment>
     }
-    return <div id="app">
-      <section class="section is-title-bar">
-
-        <div class="level">
-          <div class="level-left">
-            <div class="level-item">
-              <ul>
-                <li>There was an unexpected error</li>
-                <li>{JSON.stringify(list.error)}</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
+    
+    // is loading
+    return <Menu />
   }
 
   return <Fragment>
diff --git a/packages/frontend/src/routes/instance/orders/list/Table.tsx 
b/packages/frontend/src/routes/instance/orders/list/Table.tsx
index ff2f50e..cb7991f 100644
--- a/packages/frontend/src/routes/instance/orders/list/Table.tsx
+++ b/packages/frontend/src/routes/instance/orders/list/Table.tsx
@@ -14,10 +14,10 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
- /**
- *
- * @author Sebastian Javier Marchano (sebasjm)
- */
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
 
 import { h, VNode } from "preact"
 import { Message } from "preact-messages"
@@ -25,7 +25,7 @@ import { StateUpdater, useEffect, useState } from 
"preact/hooks"
 import { MerchantBackend, WidthId } from "../../../../declaration"
 import { Actions, buildActions } from "../../../../utils/table";
 
-type Entity = MerchantBackend.Orders.OrderHistoryEntry & {id: string}
+type Entity = MerchantBackend.Orders.OrderHistoryEntry & { id: string }
 
 interface Props {
   instances: Entity[];
@@ -61,9 +61,9 @@ export function CardTable({ instances, onCreate, onUpdate, 
onDelete, selected }:
       <div class="card-header-icon" aria-label="more options">
 
         <button class={rowSelection.length > 0 ? "button is-danger" : 
"is-hidden"}
-          type="button" 
-          onClick={(): void => actionQueueHandler(buildActions(instances, 
rowSelection, 'DELETE'))} 
-          >
+          type="button"
+          onClick={(): void => actionQueueHandler(buildActions(instances, 
rowSelection, 'DELETE'))}
+        >
           <span class="icon"><i class="mdi mdi-trash-can" /></span>
         </button>
       </div>
@@ -99,20 +99,20 @@ function toggleSelected<T>(id: T): (prev: T[]) => T[] {
 }
 
 function Table({ rowSelection, rowSelectionHandler, instances, onUpdate, 
onDelete }: TableProps): VNode {
-  return (
-    <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
+  return <div class="table-container">
+    <table class="table is-striped is-hoverable is-fullwidth">
       <thead>
         <tr>
-          <th class="is-checkbox-cell">
+          <th class="is-checkbox-cell" style={{minWidth: 50}}>
             <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><Message id="fields.order.amount.label" /></th>
-          <th><Message id="fields.order.summary.label" /></th>
-          <th><Message id="fields.order.paid.label" /></th>
-          <th />
+          <th style={{minWidth: 100}}><Message id="fields.order.amount.label" 
/></th>
+          <th style={{minWidth: 500}}><Message id="fields.order.summary.label" 
/></th>
+          <th style={{minWidth: 100}}><Message id="fields.order.paid.label" 
/></th>
+          <th style={{minWidth: 50}}/>
         </tr>
       </thead>
       <tbody>
@@ -124,9 +124,9 @@ function Table({ rowSelection, rowSelectionHandler, 
instances, onUpdate, onDelet
                 <span class="check" />
               </label>
             </td>
-            <td onClick={(): void => onUpdate(i.id)} style={{cursor: 
'pointer'}} >{i.amount}</td>
-            <td onClick={(): void => onUpdate(i.id)} style={{cursor: 
'pointer'}} >{i.summary}</td>
-            <td onClick={(): void => onUpdate(i.id)} style={{cursor: 
'pointer'}} >{i.paid}</td>
+            <td onClick={(): void => onUpdate(i.id)} style={{ cursor: 
'pointer' }} >{i.amount}</td>
+            <td onClick={(): void => onUpdate(i.id)} style={{ cursor: 
'pointer' }} >{i.summary}</td>
+            <td onClick={(): void => onUpdate(i.id)} style={{ cursor: 
'pointer' }} >{i.paid}</td>
             <td class="is-actions-cell">
               <div class="buttons is-right">
                 <button class="button is-small is-danger jb-modal" 
type="button" onClick={(): void => onDelete(i)}>
@@ -138,7 +138,8 @@ function Table({ rowSelection, rowSelectionHandler, 
instances, onUpdate, onDelet
         })}
 
       </tbody>
-    </table>)
+    </table>
+  </div>
 }
 
 function EmptyTable(): VNode {
diff --git a/packages/frontend/src/scss/libs/_all.scss 
b/packages/frontend/src/scss/libs/_all.scss
index 1730754..313eb52 100644
--- a/packages/frontend/src/scss/libs/_all.scss
+++ b/packages/frontend/src/scss/libs/_all.scss
@@ -20,7 +20,7 @@
  */
 
 @import "node_modules/bulma-radio/bulma-radio";
-@import "node_modules/bulma-responsive-tables/bulma-responsive-tables";
+// @import "node_modules/bulma-responsive-tables/bulma-responsive-tables";
 @import "node_modules/bulma-checkbox/bulma-checkbox";
 @import "node_modules/bulma-switch-control/bulma-switch-control";
 @import "node_modules/bulma-upload-control/bulma-upload-control";

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