FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-11-11 07:41:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styled wallet headers and transaction tables

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-12 23:46:08 +02:00
parent 4df3801f42
commit d43bbfa82b
11 changed files with 340 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/app-pagination/AppPaginationElement.ts
View File

@@ -10,6 +10,8 @@ class AppPaginationElement extends BaseComponentElement {
@attr rpp: number;
@attr totalItems: number;
@attr autoInit: string;
@attr tableLayout: string = 'transactions-table';
initial: boolean = false;
private customRenderItems: () => TemplateResult;
private customRenderItem: (item: any) => TemplateResult;
@@ -69,6 +71,8 @@ class AppPaginationElement extends BaseComponentElement {
} catch (err) {
this.loader?.stop?.();
console.error(err);
} finally {
this.initial = true;
}
};
@@ -94,20 +98,29 @@ class AppPaginationElement extends BaseComponentElement {
const renderItem = this.customRenderItem
? this.customRenderItem
: (item) => html`<tr>
<td>${item.description}</td>
<td>${item.amount}</td>
: (item, iter) => html`<tr>
<td class="--left">${iter + 1 + rpp * (page - 1)}</td>
<td class="--left">${item.description}</td>
<td class="balance-cell --right">
<span class="balance ${item.amount > 0 ? '--positive' : '--negative'}">
${Number(item.amount).toLocaleString('en-US', {
maximumFractionDigits: 2,
minimumFractionDigits: 2,
})}
</span>
<span class="currency">(${item.currency ? item.currency : 'USD'})</span>
</td>
</tr>`;
const renderItems = this.customRenderItems
? this.customRenderItems
: () => {
if (this.loader && this.loader.loading) {
return html`<circle-loader></circle-loader>`;
if (this.loader && this.loader.loading && !this.initial) {
return html``;
} else {
if (items?.length > 0) {
return html`<table>
${items?.map((item) => renderItem(item))}
return html`<table class="${this.tableLayout}">
${items?.map((item, iter) => renderItem(item, iter))} ${renderPagination()}
</table>`;
}
return html``;
@@ -118,25 +131,27 @@ class AppPaginationElement extends BaseComponentElement {
if (totalItems > items?.length) {
const pageRange = Math.ceil(totalItems / rpp);
return html`
<div>
<button
class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
app-action="click:app-pagination#pageBack"
>
Prev
</button>
<button
class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
app-action="click:app-pagination#pageNext"
>
Next
</button>
<div class="paginate">
<div class="--footer">
<button
class="btn btn-primary btn-squared ${page <= 1 ? 'disabled' : ''}"
app-action="click:app-pagination#pageBack"
>
Prev
</button>
<button
class="btn btn-primary btn-squared ${page >= pageRange ? 'disabled' : ''}"
app-action="click:app-pagination#pageNext"
>
Next
</button>
</div>
</div>
`;
}
};
return html`<div>${renderItems()} ${renderPagination()}</div>`;
return html`<div class="app-pagination">${renderItems()}</div>`;
};
}

19
src/components/wallet-header/WalletHeaderElement.ts
View File

@@ -11,6 +11,7 @@ class WalletHeaderElement extends BaseComponentElement {
@attr nextMonth: number;
@attr currency: string;
@attr custom: string;
initial: boolean = false;
fetchFunc: Function = () => {};
constructor() {
@@ -38,20 +39,26 @@ class WalletHeaderElement extends BaseComponentElement {
} catch (err) {
this.loader?.stop?.();
console.error(err);
} finally {
this.initial = true;
}
};
render = (): TemplateResult => {
const { currentBalance, currency, lastMonth, nextMonth } = this;
const renderItem = (header, balance, currency) => html`<div>
<div>${header}</div>
<div><span>${balance}</span><span>${currency}</span></div>
const renderItem = (header, balance, currency) => html`<div class="header-item">
<div class="--header">${header}</div>
<div class="--content">
<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
>${Number(balance).toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 })}</span
><span class="--currency">(${currency})</span>
</div>
</div>`;
const renderHeader = () => {
if (this.loader && this.loader.loading) {
return html`<circle-loader></circle-loader>`;
if (this.loader && this.loader.loading && !this.initial) {
return html``;
}
return html`${renderItem('Last Month', lastMonth, currency)}${renderItem(
'Current Balance',
@@ -60,7 +67,7 @@ class WalletHeaderElement extends BaseComponentElement {
)}${renderItem('Next Month', nextMonth, currency)}`;
};
return html`<div>${renderHeader()}</div>`;
return html`<div class="wallet-header">${renderHeader()}</div>`;
};
}