89 lines
2.1 KiB
JavaScript
89 lines
2.1 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { action } from '@ember/object';
|
|
import moment from 'moment';
|
|
import isValidAmount from 'kredits-web/utils/is-valid-amount';
|
|
|
|
export default class AddExpenseItemComponent extends Component {
|
|
// @tracked newExpense = Expense.create();
|
|
@tracked amount = '0';
|
|
@tracked currency = 'EUR';
|
|
@tracked date = moment().startOf('hour').toDate();
|
|
@tracked title = '';
|
|
@tracked description = '';
|
|
@tracked url = '';
|
|
@tracked tags = '';
|
|
|
|
defaultDate = moment().startOf('hour').toDate();
|
|
|
|
// TODO fetch/apply exchange rate to (W)BTC
|
|
currencies = [
|
|
{ code: 'EUR' },
|
|
{ code: 'USD' },
|
|
{ code: 'GBP' }
|
|
];
|
|
|
|
get isValidAmount () {
|
|
return isValidAmount(this.amount);
|
|
}
|
|
|
|
get amountInputClass () {
|
|
return this.isValidTotal ? 'valid' : '';
|
|
}
|
|
|
|
get submitButtonEnabled () {
|
|
return true;
|
|
}
|
|
|
|
get submitButtonDisabled () {
|
|
return !this.submitButtonEnabled;
|
|
}
|
|
|
|
validateForm () {
|
|
const formEl = document.querySelector('form#add-expense-item');
|
|
let validity = true;
|
|
|
|
if (!this.isValidAmount) {
|
|
document.querySelector('input[name=expense-amount]').classList.add('invalid');
|
|
validity = false;
|
|
}
|
|
|
|
if (!formEl.checkValidity()) {
|
|
document.querySelectorAll('form#add-expense-item input').forEach(i => {
|
|
if (!i.validity.valid) {
|
|
i.classList.add('invalid');
|
|
validity = false;
|
|
}
|
|
})
|
|
}
|
|
|
|
return validity;
|
|
}
|
|
|
|
@action
|
|
submit (e) {
|
|
e.preventDefault();
|
|
|
|
let dateInput = (this.date instanceof Array) ?
|
|
this.date[0] : this.date;
|
|
const [ date ] = dateInput.toISOString().split('T');
|
|
|
|
const isValid = this.validateForm();
|
|
|
|
if (isValid) {
|
|
const expense = {
|
|
amount: parseFloat(this.amount),
|
|
currency: this.currency,
|
|
date: date,
|
|
title: this.title,
|
|
description: this.description,
|
|
url: this.url,
|
|
tags: this.tags.split(',').map(t => t.trim())
|
|
}
|
|
this.args.addExpenseItem(expense);
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}
|