mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-02-25 18:45:27 -06:00
Build frontend again, using Yarn.
This commit is contained in:
James Cole
parent
60339c9d1b
commit
ce51bb8be6
4
frontend/src/bootstrap.js
vendored
4
frontend/src/bootstrap.js
vendored
@ -43,9 +43,9 @@ if (token) {
|
||||
let localeToken = document.head.querySelector('meta[name="locale"]');
|
||||
|
||||
if (localeToken) {
|
||||
window.localeValue = localeToken.content;
|
||||
localStorage.locale = localeToken.content;
|
||||
} else {
|
||||
window.localeValue = 'en_US';
|
||||
localStorage.locale = 'en_US';
|
||||
}
|
||||
|
||||
// admin stuff
|
||||
|
||||
@ -19,166 +19,167 @@
|
||||
-->
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DataConverter",
|
||||
data() {
|
||||
return {
|
||||
dataSet: null,
|
||||
newDataSet: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
convertChart(dataSet) {
|
||||
this.dataSet = dataSet;
|
||||
this.newDataSet = {
|
||||
count: 0,
|
||||
labels: [],
|
||||
datasets: []
|
||||
}
|
||||
this.getLabels();
|
||||
this.getDataSets();
|
||||
this.newDataSet.count = this.newDataSet.datasets.length;
|
||||
return this.newDataSet;
|
||||
},
|
||||
|
||||
colorizeBarData(dataSet) {
|
||||
this.dataSet = dataSet;
|
||||
this.newDataSet = {
|
||||
count: 0,
|
||||
labels: [],
|
||||
datasets: []
|
||||
};
|
||||
// colors
|
||||
let colourSet = [
|
||||
[53, 124, 165],
|
||||
[0, 141, 76], // green
|
||||
[219, 139, 11],
|
||||
[202, 25, 90], // paars rood-ish #CA195A
|
||||
[85, 82, 153],
|
||||
[66, 133, 244],
|
||||
[219, 68, 55], // red #DB4437
|
||||
[244, 180, 0],
|
||||
[15, 157, 88],
|
||||
[171, 71, 188],
|
||||
[0, 172, 193],
|
||||
[255, 112, 67],
|
||||
[158, 157, 36],
|
||||
[92, 107, 192],
|
||||
[240, 98, 146],
|
||||
[0, 121, 107],
|
||||
[194, 24, 91]
|
||||
];
|
||||
|
||||
let fillColors = [];
|
||||
//let strokePointHighColors = [];
|
||||
|
||||
|
||||
for (let i = 0; i < colourSet.length; i++) {
|
||||
fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
|
||||
//strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
|
||||
}
|
||||
this.newDataSet.labels = this.dataSet.labels;
|
||||
this.newDataSet.count = this.dataSet.count;
|
||||
for (let setKey in this.dataSet.datasets) {
|
||||
if (this.dataSet.datasets.hasOwnProperty(setKey)) {
|
||||
var dataset = this.dataSet.datasets[setKey];
|
||||
dataset.fill = false;
|
||||
dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
|
||||
this.newDataSet.datasets.push(dataset);
|
||||
}
|
||||
}
|
||||
return this.newDataSet;
|
||||
},
|
||||
|
||||
colorizeLineData(dataSet) {
|
||||
this.dataSet = dataSet;
|
||||
this.newDataSet = {
|
||||
count: 0,
|
||||
labels: [],
|
||||
datasets: []
|
||||
};
|
||||
// colors
|
||||
let colourSet = [
|
||||
[53, 124, 165],
|
||||
[0, 141, 76], // green
|
||||
[219, 139, 11],
|
||||
[202, 25, 90], // paars rood-ish #CA195A
|
||||
[85, 82, 153],
|
||||
[66, 133, 244],
|
||||
[219, 68, 55], // red #DB4437
|
||||
[244, 180, 0],
|
||||
[15, 157, 88],
|
||||
[171, 71, 188],
|
||||
[0, 172, 193],
|
||||
[255, 112, 67],
|
||||
[158, 157, 36],
|
||||
[92, 107, 192],
|
||||
[240, 98, 146],
|
||||
[0, 121, 107],
|
||||
[194, 24, 91]
|
||||
];
|
||||
|
||||
let fillColors = [];
|
||||
//let strokePointHighColors = [];
|
||||
|
||||
|
||||
for (let i = 0; i < colourSet.length; i++) {
|
||||
fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
|
||||
//strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
|
||||
}
|
||||
this.newDataSet.labels = this.dataSet.labels;
|
||||
this.newDataSet.count = this.dataSet.count;
|
||||
for (let setKey in this.dataSet.datasets) {
|
||||
if (this.dataSet.datasets.hasOwnProperty(setKey)) {
|
||||
var dataset = this.dataSet.datasets[setKey];
|
||||
dataset.fill = false;
|
||||
dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
|
||||
this.newDataSet.datasets.push(dataset);
|
||||
}
|
||||
}
|
||||
return this.newDataSet;
|
||||
},
|
||||
convertLabelsToDate(dataSet) {
|
||||
for (let labelKey in dataSet.labels) {
|
||||
if (dataSet.labels.hasOwnProperty(labelKey)) {
|
||||
const unixTimeZero = Date.parse(dataSet.labels[labelKey]);
|
||||
dataSet.labels[labelKey] = new Intl.DateTimeFormat(window.localeValue).format(unixTimeZero);
|
||||
}
|
||||
}
|
||||
return dataSet;
|
||||
},
|
||||
getLabels() {
|
||||
let firstSet = this.dataSet[0];
|
||||
if (typeof firstSet !== 'undefined') {
|
||||
for (const entryLabel in firstSet.entries) {
|
||||
if (firstSet.entries.hasOwnProperty(entryLabel)) {
|
||||
this.newDataSet.labels.push(entryLabel);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getDataSets() {
|
||||
for (const setKey in this.dataSet) {
|
||||
if (this.dataSet.hasOwnProperty(setKey)) {
|
||||
let newSet = {};
|
||||
let oldSet = this.dataSet[setKey];
|
||||
if (typeof oldSet !== 'undefined') {
|
||||
newSet.label = oldSet.label;
|
||||
newSet.type = oldSet.type;
|
||||
newSet.currency_symbol = oldSet.currency_symbol;
|
||||
newSet.currency_code = oldSet.currency_code;
|
||||
newSet.yAxisID = oldSet.yAxisID;
|
||||
newSet.data = [];
|
||||
for (const entryLabel in oldSet.entries) {
|
||||
if (oldSet.entries.hasOwnProperty(entryLabel)) {
|
||||
newSet.data.push(oldSet.entries[entryLabel]);
|
||||
}
|
||||
}
|
||||
this.newDataSet.datasets.push(newSet);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "DataConverter",
|
||||
data() {
|
||||
return {
|
||||
dataSet: null,
|
||||
newDataSet: null,
|
||||
locale: localStorage.local,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
convertChart(dataSet) {
|
||||
this.dataSet = dataSet;
|
||||
this.newDataSet = {
|
||||
count: 0,
|
||||
labels: [],
|
||||
datasets: []
|
||||
}
|
||||
this.getLabels();
|
||||
this.getDataSets();
|
||||
this.newDataSet.count = this.newDataSet.datasets.length;
|
||||
return this.newDataSet;
|
||||
},
|
||||
|
||||
colorizeBarData(dataSet) {
|
||||
this.dataSet = dataSet;
|
||||
this.newDataSet = {
|
||||
count: 0,
|
||||
labels: [],
|
||||
datasets: []
|
||||
};
|
||||
// colors
|
||||
let colourSet = [
|
||||
[53, 124, 165],
|
||||
[0, 141, 76], // green
|
||||
[219, 139, 11],
|
||||
[202, 25, 90], // paars rood-ish #CA195A
|
||||
[85, 82, 153],
|
||||
[66, 133, 244],
|
||||
[219, 68, 55], // red #DB4437
|
||||
[244, 180, 0],
|
||||
[15, 157, 88],
|
||||
[171, 71, 188],
|
||||
[0, 172, 193],
|
||||
[255, 112, 67],
|
||||
[158, 157, 36],
|
||||
[92, 107, 192],
|
||||
[240, 98, 146],
|
||||
[0, 121, 107],
|
||||
[194, 24, 91]
|
||||
];
|
||||
|
||||
let fillColors = [];
|
||||
//let strokePointHighColors = [];
|
||||
|
||||
|
||||
for (let i = 0; i < colourSet.length; i++) {
|
||||
fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
|
||||
//strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
|
||||
}
|
||||
this.newDataSet.labels = this.dataSet.labels;
|
||||
this.newDataSet.count = this.dataSet.count;
|
||||
for (let setKey in this.dataSet.datasets) {
|
||||
if (this.dataSet.datasets.hasOwnProperty(setKey)) {
|
||||
var dataset = this.dataSet.datasets[setKey];
|
||||
dataset.fill = false;
|
||||
dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
|
||||
this.newDataSet.datasets.push(dataset);
|
||||
}
|
||||
}
|
||||
return this.newDataSet;
|
||||
},
|
||||
|
||||
colorizeLineData(dataSet) {
|
||||
this.dataSet = dataSet;
|
||||
this.newDataSet = {
|
||||
count: 0,
|
||||
labels: [],
|
||||
datasets: []
|
||||
};
|
||||
// colors
|
||||
let colourSet = [
|
||||
[53, 124, 165],
|
||||
[0, 141, 76], // green
|
||||
[219, 139, 11],
|
||||
[202, 25, 90], // paars rood-ish #CA195A
|
||||
[85, 82, 153],
|
||||
[66, 133, 244],
|
||||
[219, 68, 55], // red #DB4437
|
||||
[244, 180, 0],
|
||||
[15, 157, 88],
|
||||
[171, 71, 188],
|
||||
[0, 172, 193],
|
||||
[255, 112, 67],
|
||||
[158, 157, 36],
|
||||
[92, 107, 192],
|
||||
[240, 98, 146],
|
||||
[0, 121, 107],
|
||||
[194, 24, 91]
|
||||
];
|
||||
|
||||
let fillColors = [];
|
||||
//let strokePointHighColors = [];
|
||||
|
||||
|
||||
for (let i = 0; i < colourSet.length; i++) {
|
||||
fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
|
||||
//strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
|
||||
}
|
||||
this.newDataSet.labels = this.dataSet.labels;
|
||||
this.newDataSet.count = this.dataSet.count;
|
||||
for (let setKey in this.dataSet.datasets) {
|
||||
if (this.dataSet.datasets.hasOwnProperty(setKey)) {
|
||||
var dataset = this.dataSet.datasets[setKey];
|
||||
dataset.fill = false;
|
||||
dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
|
||||
this.newDataSet.datasets.push(dataset);
|
||||
}
|
||||
}
|
||||
return this.newDataSet;
|
||||
},
|
||||
convertLabelsToDate(dataSet) {
|
||||
for (let labelKey in dataSet.labels) {
|
||||
if (dataSet.labels.hasOwnProperty(labelKey)) {
|
||||
const unixTimeZero = Date.parse(dataSet.labels[labelKey]);
|
||||
dataSet.labels[labelKey] = new Intl.DateTimeFormat(this.locale).format(unixTimeZero);
|
||||
}
|
||||
}
|
||||
return dataSet;
|
||||
},
|
||||
getLabels() {
|
||||
let firstSet = this.dataSet[0];
|
||||
if (typeof firstSet !== 'undefined') {
|
||||
for (const entryLabel in firstSet.entries) {
|
||||
if (firstSet.entries.hasOwnProperty(entryLabel)) {
|
||||
this.newDataSet.labels.push(entryLabel);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getDataSets() {
|
||||
for (const setKey in this.dataSet) {
|
||||
if (this.dataSet.hasOwnProperty(setKey)) {
|
||||
let newSet = {};
|
||||
let oldSet = this.dataSet[setKey];
|
||||
if (typeof oldSet !== 'undefined') {
|
||||
newSet.label = oldSet.label;
|
||||
newSet.type = oldSet.type;
|
||||
newSet.currency_symbol = oldSet.currency_symbol;
|
||||
newSet.currency_code = oldSet.currency_code;
|
||||
newSet.yAxisID = oldSet.yAxisID;
|
||||
newSet.data = [];
|
||||
for (const entryLabel in oldSet.entries) {
|
||||
if (oldSet.entries.hasOwnProperty(entryLabel)) {
|
||||
newSet.data.push(oldSet.entries[entryLabel]);
|
||||
}
|
||||
}
|
||||
this.newDataSet.datasets.push(newSet);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
callback: function (tickValue) {
|
||||
"use strict";
|
||||
let currencyCode = this.chart.data.datasets[0] ? this.chart.data.datasets[0].currency_code : 'EUR';
|
||||
return new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tickValue);
|
||||
return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
|
||||
},
|
||||
|
||||
}
|
||||
@ -95,7 +95,7 @@
|
||||
label: function (tooltipItem, data) {
|
||||
"use strict";
|
||||
let currencyCode = data.datasets[tooltipItem.datasetIndex] ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
|
||||
let nrString = new Intl.NumberFormat(window.localeValue, {
|
||||
let nrString = new Intl.NumberFormat(localStorage.locale, {
|
||||
style: 'currency',
|
||||
currency: currencyCode
|
||||
}).format(tooltipItem.yLabel);
|
||||
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
// date format
|
||||
let dateObj = new Date(value);
|
||||
let options = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
let str = new Intl.DateTimeFormat(window.localeValue, options).format(dateObj);
|
||||
let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
|
||||
//console.log();
|
||||
//return self.formatLabel(value, 20);
|
||||
return self.formatLabel(str, 20);
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
callback: function (tickValue) {
|
||||
"use strict";
|
||||
let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
|
||||
return new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tickValue);
|
||||
return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
|
||||
},
|
||||
beginAtZero: true
|
||||
}
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
"use strict";
|
||||
let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
|
||||
let nrString =
|
||||
new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
|
||||
new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
|
||||
|
||||
return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
|
||||
}
|
||||
|
||||
@ -19,72 +19,72 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div v-bind:class="{ 'col-lg-12': 1 === accounts.length, 'col-lg-6': 2 === accounts.length, 'col-lg-4': accounts.length > 2 }"
|
||||
v-for="account in accounts">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a :href="account.uri">{{ account.title }}</a></h3>
|
||||
</div>
|
||||
<div class="card-body table-responsive p-0">
|
||||
<transaction-list-large :transactions="account.transactions" v-if="1===accounts.length" :account_id="account.id" />
|
||||
<transaction-list-medium :transactions="account.transactions" v-if="2===accounts.length" :account_id="account.id" />
|
||||
<transaction-list-small :transactions="account.transactions" v-if="accounts.length > 2" :account_id="account.id" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div v-bind:class="{ 'col-lg-12': 1 === accounts.length, 'col-lg-6': 2 === accounts.length, 'col-lg-4': accounts.length > 2 }"
|
||||
v-for="account in accounts">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a :href="account.uri">{{ account.title }}</a></h3>
|
||||
</div>
|
||||
<div class="card-body table-responsive p-0">
|
||||
<transaction-list-large :transactions="account.transactions" v-if="1===accounts.length" :account_id="account.id"/>
|
||||
<transaction-list-medium :transactions="account.transactions" v-if="2===accounts.length" :account_id="account.id"/>
|
||||
<transaction-list-small :transactions="account.transactions" v-if="accounts.length > 2" :account_id="account.id"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainAccountList",
|
||||
data() {
|
||||
return {
|
||||
accounts: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('./api/v1/preferences/frontpageAccounts')
|
||||
.then(response => {
|
||||
this.loadAccounts(response);
|
||||
}
|
||||
);
|
||||
},
|
||||
methods:
|
||||
{
|
||||
loadAccounts(response) {
|
||||
let accountIds = response.data.data.attributes.data;
|
||||
for (let key in accountIds) {
|
||||
if (accountIds.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
|
||||
this.accounts.push({
|
||||
id: accountIds[key],
|
||||
title: '',
|
||||
uri: '',
|
||||
transactions: []
|
||||
});
|
||||
this.loadSingleAccount(key, accountIds[key]);
|
||||
}
|
||||
}
|
||||
},
|
||||
loadSingleAccount(key, accountId) {
|
||||
axios.get('./api/v1/accounts/' + accountId)
|
||||
.then(response => {
|
||||
this.accounts[key].title = response.data.data.attributes.name;
|
||||
this.accounts[key].uri = './accounts/show/' + response.data.data.id;
|
||||
this.loadTransactions(key, accountId);
|
||||
}
|
||||
);
|
||||
},
|
||||
loadTransactions(key, accountId) {
|
||||
axios.get('./api/v1/accounts/' + accountId + '/transactions?page=1&limit=10')
|
||||
.then(response => {
|
||||
this.accounts[key].transactions = response.data.data;
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: "MainAccountList",
|
||||
data() {
|
||||
return {
|
||||
accounts: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('./api/v1/preferences/frontpageAccounts')
|
||||
.then(response => {
|
||||
this.loadAccounts(response);
|
||||
}
|
||||
);
|
||||
},
|
||||
methods:
|
||||
{
|
||||
loadAccounts(response) {
|
||||
let accountIds = response.data.data.attributes.data;
|
||||
for (let key in accountIds) {
|
||||
if (accountIds.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
|
||||
this.accounts.push({
|
||||
id: accountIds[key],
|
||||
title: '',
|
||||
uri: '',
|
||||
transactions: []
|
||||
});
|
||||
this.loadSingleAccount(key, accountIds[key]);
|
||||
}
|
||||
}
|
||||
},
|
||||
loadSingleAccount(key, accountId) {
|
||||
axios.get('./api/v1/accounts/' + accountId)
|
||||
.then(response => {
|
||||
this.accounts[key].title = response.data.data.attributes.name;
|
||||
this.accounts[key].uri = './accounts/show/' + response.data.data.id;
|
||||
this.loadTransactions(key, accountId);
|
||||
}
|
||||
);
|
||||
},
|
||||
loadTransactions(key, accountId) {
|
||||
axios.get('./api/v1/accounts/' + accountId + '/transactions?page=1&limit=10')
|
||||
.then(response => {
|
||||
this.accounts[key].transactions = response.data.data;
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -19,61 +19,71 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<table class="table table-striped table-sm">
|
||||
<caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="text-left">{{ $t('firefly.description') }}</th>
|
||||
<th scope="col" class="text-right">{{ $t('firefly.amount') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="transaction in this.transactions">
|
||||
<td>
|
||||
<a :href="'transactions/show/' + transaction.id " :title="transaction.date">
|
||||
<span v-if="transaction.attributes.transactions.length > 1">{{ transaction.attributes.group_title }}</span>
|
||||
<span v-if="1===transaction.attributes.transactions.length">{{ transaction.attributes.transactions[0].description }}</span>
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align:right;">
|
||||
<table class="table table-striped table-sm">
|
||||
<caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="text-left">{{ $t('firefly.description') }}</th>
|
||||
<th scope="col" class="text-right">{{ $t('firefly.amount') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="transaction in this.transactions">
|
||||
<td>
|
||||
<a :href="'transactions/show/' + transaction.id " :title="new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(transaction.attributes.transactions[0].date))">
|
||||
<span v-if="transaction.attributes.transactions.length > 1">{{ transaction.attributes.group_title }}</span>
|
||||
<span v-if="1===transaction.attributes.transactions.length">{{ transaction.attributes.transactions[0].description }}</span>
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align:right;">
|
||||
<span v-for="tr in transaction.attributes.transactions">
|
||||
<span v-if="'withdrawal' === tr.type" class="text-danger">
|
||||
{{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1)}}<br>
|
||||
{{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1) }}<br>
|
||||
</span>
|
||||
<span v-if="'deposit' === tr.type" class="text-success">
|
||||
{{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount)}}<br>
|
||||
{{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount) }}<br>
|
||||
</span>
|
||||
<span v-if="'transfer' === tr.type && tr.source_id === account_id" class="text-info">
|
||||
{{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1)}}<br>
|
||||
{{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1) }}<br>
|
||||
</span>
|
||||
<span v-if="'transfer' === tr.type && tr.destination_id === account_id" class="text-info">
|
||||
{{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount)}}<br>
|
||||
{{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount) }}<br>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TransactionListSmall",
|
||||
props: {
|
||||
transactions: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
account_id: {
|
||||
type: Number,
|
||||
default: function() {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: "TransactionListSmall",
|
||||
data() {
|
||||
return {
|
||||
locale: 'en-US'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.locale = localStorage.locale ?? 'en-US';
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
props: {
|
||||
transactions: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
account_id: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
2
public/v2/js/vendor.js
vendored
2
public/v2/js/vendor.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user