From 3970c01019741808a0bb2e5d13a961487a442ec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Sun, 12 Dec 2021 19:19:25 +0100 Subject: [PATCH] fixed transaction check layout --- .../pages/BasePageElement/BasePageElement.ts | 7 +- src/components/app-main/AppMainElement.ts | 3 +- src/pages/history-page/HistoryPageElement.ts | 6 + .../HistoryPageElementTemplate.ts | 14 +-- .../TransactionCheckElement.ts | 41 +++--- src/styles/app-pagination/app-pagination.scss | 3 + src/styles/core/main.scss | 118 ++++++++++-------- 7 files changed, 107 insertions(+), 85 deletions(-) diff --git a/src/common/pages/BasePageElement/BasePageElement.ts b/src/common/pages/BasePageElement/BasePageElement.ts index c13dedd..b1df69c 100644 --- a/src/common/pages/BasePageElement/BasePageElement.ts +++ b/src/common/pages/BasePageElement/BasePageElement.ts @@ -5,6 +5,7 @@ import { isTrue } from 'core/utils'; class BasePageElement extends BaseElement { public _pageTitle: string = ''; + public hideTitleHead: boolean = false; @attr hidetitle: string; @attr customtitle: string; private _data: any; @@ -13,6 +14,7 @@ class BasePageElement extends BaseElement { if (options?.title) { this._pageTitle = options?.title; } + this.hideTitleHead = options?.hideTitleHead || false; this.connectedCallback = this.connectedCallback.bind(this); this.disconnectedCallback = this.disconnectedCallback.bind(this); } @@ -36,7 +38,9 @@ class BasePageElement extends BaseElement { }; connectedCallback() { - this.appMain.setTitle(this.pageTitle); + if (!this.hideTitleHead) { + this.appMain.setTitle(this.pageTitle); + } super.connectedCallback(); } @@ -53,4 +57,5 @@ export default BasePageElement; export type OptionType = { title?: string; + hideTitleHead?: boolean; }; diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index fe78527..64b19d0 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -129,9 +129,10 @@ class AppMainElement extends HTMLElement { checkSubscriptions = async () => { if (this.isAuth && !this.subscriptionChecked) { - const checked = await this.transactionsService.check({ sortBy: 'transactionDate asc' }); + const checked = await this.transactionsService.check({ sortBy: 'transactionDate asc', rpp: 10 }); this.createModal('transaction-check', { data: checked, + autoInit: false, }); this.subscriptionChecked = true; this.removeEventListener('routechanged', this.checkSubscriptions); diff --git a/src/pages/history-page/HistoryPageElement.ts b/src/pages/history-page/HistoryPageElement.ts index e54913a..1890809 100644 --- a/src/pages/history-page/HistoryPageElement.ts +++ b/src/pages/history-page/HistoryPageElement.ts @@ -49,6 +49,12 @@ class HistoryPageElement extends BasePageElement { } }; + transactionCheck = () => { + this.appMain.createModal('transaction-check', { + autoInit: true, + }); + }; + render = (): TemplateResult => HistoryPageElementTemplate({ walletId: this.routerService?.routerState?.data?.walletId }); } diff --git a/src/pages/history-page/HistoryPageElementTemplate.ts b/src/pages/history-page/HistoryPageElementTemplate.ts index 17557d4..dedf3d8 100644 --- a/src/pages/history-page/HistoryPageElementTemplate.ts +++ b/src/pages/history-page/HistoryPageElementTemplate.ts @@ -1,16 +1,12 @@ import { html, nothing, TemplateResult } from 'core/utils'; export default (props): TemplateResult => { - const { walletId } = props; - const renderWallet = () => { - if (walletId) { - return html`${walletId}`; - } - return nothing; - }; - return html`
- ${renderWallet()} +
+ +
`; }; diff --git a/src/pages/transaction-check/TransactionCheckElement.ts b/src/pages/transaction-check/TransactionCheckElement.ts index bed2ce3..267ceac 100644 --- a/src/pages/transaction-check/TransactionCheckElement.ts +++ b/src/pages/transaction-check/TransactionCheckElement.ts @@ -15,6 +15,7 @@ class TransactionCheckElement extends BasePageElement { constructor() { super({ title: 'Transaction Check', + hideTitleHead: true, }); } @@ -23,10 +24,12 @@ class TransactionCheckElement extends BasePageElement { await this.fetchTransactionStatus(); this.transactionsService = new TransactionsService(this.appMain?.appService); this.update(); - this.pagination?.setCustomRenderItem?.(this.renderSubscription)!; - this.pagination?.setFetchFunc?.(this.getTransactions, false)!; this.modalData = this.getData(); - this.pagination?.executeFetch?.(null, () => this.mappedData(this.modalData.data)); + this.pagination?.setCustomRenderItem?.(this.renderSubscription)!; + this.pagination?.setFetchFunc?.(this.getTransactions, this.modalData?.autoInit)!; + if (!this.modalData?.autoInit) { + this.pagination?.executeFetch?.(null, () => this.mappedData(this.modalData.data)); + } }; mappedData = (data) => { @@ -37,22 +40,15 @@ class TransactionCheckElement extends BasePageElement { }; renderSubscription = (item) => { - const renderEditActions = () => html``; - const renderRegularActions = () => html` - `; - return html` + const renderEditActions = () => html`
+ + +
`; + const renderRegularActions = () => html`
+ + +
`; + return html` ${!item.isEdit ? html`${dayjs(item.transactionDate).format("MMM DD 'YY")}` : html` *:not(summary) { - display: none !important; - } - } - } + details { + summary { + cursor: pointer; + } + &:not([open]) { + > *:not(summary) { + display: none !important; + } + } + } - [hidden][hidden] { - display: none !important; - } + [hidden][hidden] { + display: none !important; + } +} + +.d { + &--flex { + display: flex; + > * { + flex: 1; + margin: 0 4px; + } + } }