commit 1ed3f01006aca39bf428aa831cc76d73043d2893
parent 43ca7d9ab2aee5ce78b801a9310092d1e38eb317
Author: Sebastian <sebasjm@gmail.com>
Date: Wed, 10 Mar 2021 17:26:06 -0300
WIP: scrollable table on mobile, fixed error messages
Diffstat:
3 files changed, 32 insertions(+), 50 deletions(-)
diff --git 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
@@ -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
@@ -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";
