FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 14:18:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added transaction date to transaction form

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-19 14:14:12 +02:00
parent dc1c7590fe
commit 6fa3c9266c
12 changed files with 119 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/subscription-create/SubscriptionCreateElement.ts
View File

@@ -43,6 +43,14 @@ class SubscriptionCreateElement extends BasePageElement {
}
};
get hasEndCheck(): InputFieldElement | AppDropdownElement {
for (const i in this.inputs) {
if (this.inputs[i]?.name == 'hasEnd') {
return this.inputs[i];
}
}
}
get nameInput(): InputFieldElement | AppDropdownElement {
for (const i in this.inputs) {
if (this.inputs[i]?.name == 'name') {
@@ -148,10 +156,16 @@ class SubscriptionCreateElement extends BasePageElement {
return _return;
}
render = (): TemplateResult => {
const renderInput = (type, name, label, rules, hide?) => {
onCheck = () => {
this.appForm.update();
this.appForm.validate();
this.appForm.update();
};
renderForms = () => {
const renderInput = (type, name, label, rules, hide?, customAction?) => {
if (hide) {
return html``;
return null;
}
return html`<input-field
data-type="${type}"
@@ -159,6 +173,7 @@ class SubscriptionCreateElement extends BasePageElement {
data-label="${label}"
data-targets="subscription-create.inputs"
data-rules="${rules}"
data-custom-action="${customAction || ''}"
></input-field>`;
};
@@ -174,26 +189,41 @@ class SubscriptionCreateElement extends BasePageElement {
data-fetch="${fetch}"
></app-dropdown>`;
};
return html`
<div slot="inputs">
${renderInput('number', 'amount', 'Amount', 'required')}
${renderInput('text', 'description', 'Description', 'required')}
${renderInput('date', 'startDate', 'Start date', 'required')}
${renderInput('checkbox', 'hasEnd', 'Existing End Date', '', false, 'change:subscription-create#onCheck')}
${renderInput(
'date',
'endDate',
'End date',
'required|is_after[field(startDate)]',
!(this.hasEndCheck?.inp as HTMLInputElement)?.checked
)}
${renderDropdown(
'subscription-create#getWallets',
'wallet',
'Wallet',
'required',
this.walletData && this.walletData.walletId
)}
${renderDropdown('subscription-create#getTypes', 'transactionType', 'Transaction Type', 'required')}
${renderInput('number', 'customRange', 'Every', 'required')}
${renderDropdown('subscription-create#getSubs', 'subscriptionType', 'Subscription Type', 'required')}
${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}</template
>`;
};
render = (): TemplateResult => {
return html`
<app-form
data-custom="subscription-create#onSubmit"
data-has-cancel="true"
data-target="subscription-create.appForm"
data-render-input="subscription-create#renderForms"
>
${renderInput('number', 'amount', 'Amount', 'required')}
${renderInput('text', 'description', 'Description', 'required')}
${renderDropdown(
'subscription-create#getWallets',
'wallet',
'Wallet',
'required',
this.walletData && this.walletData.walletId
)}
${renderDropdown('subscription-create#getTypes', 'transactionType', 'Transaction Type', 'required')}
${renderInput('number', 'customRange', 'Every', 'required')}
${renderDropdown('subscription-create#getSubs', 'subscriptionType', 'Subscription Type', 'required')}
${this.errorMessage ? html`<div>${this.errorMessage}</div>` : html``}
</app-form>
`;
};

17
src/pages/transaction-create/TransactionCreateElement.ts
View File

@@ -5,6 +5,7 @@ import { AppFormElement, InputFieldElement } from 'components/';
import { RouterService } from 'core/services';
import { BasePageElement } from 'common/';
import { AppDropdownElement } from 'components/app-dropdown/AppDropdownElement';
import dayjs from 'dayjs';
@controller
class TransactionCreateElement extends BasePageElement {
@@ -84,7 +85,15 @@ class TransactionCreateElement extends BasePageElement {
return;
}
const { description: description, wallet: walletId, amount, transactionType: transactionTypeId } = values;
const {
description: description,
wallet: walletId,
amount,
transactionType: transactionTypeId,
transactionDate,
} = values;
const formattedDate = dayjs(transactionDate).format();
const walletData = this.walletData;
@@ -92,9 +101,11 @@ class TransactionCreateElement extends BasePageElement {
description,
amount,
walletId: walletData && walletData.walletId ? walletData.walletId : walletId,
transactionDate: formattedDate,
transactionTypeId:
walletData && walletData.transactionTypeId ? walletData.transactionTypeId : transactionTypeId,
};
const response = await this.transactionService.post(formData);
if (response?.id) {
@@ -125,7 +136,7 @@ class TransactionCreateElement extends BasePageElement {
}
render = (): TemplateResult => {
const renderInput = (type, name, label, rules, hide?) => {
const renderInput = (type, name, label, rules, hide?, customAction?) => {
if (hide) {
return html``;
}
@@ -135,6 +146,7 @@ class TransactionCreateElement extends BasePageElement {
data-label="${label}"
data-targets="transaction-create.inputs"
data-rules="${rules}"
custom-action="${customAction}"
></input-field>`;
};
@@ -159,6 +171,7 @@ class TransactionCreateElement extends BasePageElement {
>
${renderInput('number', 'amount', 'Amount', 'required')}
${renderInput('text', 'description', 'Description', 'required')}
${renderInput('date', 'transactionDate', 'Transaction date', 'required')}
${renderDropdown(
'transaction-create#getWallets',
'wallet',