forked from Kispi/Core
feat(webapp): implement bank view
This commit is contained in:
parent
3841c33564
commit
6c06a2d129
5 changed files with 182 additions and 1 deletions
56
src/components/molecules/MoleculeTransactionTable.vue
Normal file
56
src/components/molecules/MoleculeTransactionTable.vue
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
<template>
|
||||||
|
<table class="table table-zebra">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th />
|
||||||
|
<th class="normal-case text-lg text-right">{{ CurrencyService.toString(balance) }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="transaction in transactions">
|
||||||
|
<td>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div>
|
||||||
|
<div class="font-bold">{{ transaction.type }}</div>
|
||||||
|
<div>{{ DateService.toString(transaction.date) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
v-if="transaction.amount < 0"
|
||||||
|
class="text-right text-error"
|
||||||
|
>
|
||||||
|
{{ CurrencyService.toSignedString(transaction.amount) }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
v-else
|
||||||
|
class="text-right text-success"
|
||||||
|
>
|
||||||
|
{{ CurrencyService.toSignedString(transaction.amount) }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
import { ITransaction } from '../../interfaces/transaction.interface';
|
||||||
|
import { CurrencyService } from '../services/currency.service';
|
||||||
|
import { DateService } from '../services/date.service';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
transactions: {
|
||||||
|
type: Array as PropType<ITransaction[]>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
balance: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
14
src/components/services/currency.service.ts
Normal file
14
src/components/services/currency.service.ts
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
export class CurrencyService {
|
||||||
|
public static toString(value: number): string {
|
||||||
|
return `${(value / 100).toLocaleString('de-DE', {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
})} Öro`;
|
||||||
|
}
|
||||||
|
public static toSignedString(value: number): string {
|
||||||
|
return `${value > 0 ? '+' : ''}${(value / 100).toLocaleString('de', {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
})} Öro`;
|
||||||
|
}
|
||||||
|
}
|
11
src/components/services/date.service.ts
Normal file
11
src/components/services/date.service.ts
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
export class DateService {
|
||||||
|
public static toString(date: Date): string {
|
||||||
|
return date.toLocaleDateString('de-DE', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,104 @@
|
||||||
<template>
|
<template>
|
||||||
#Bank
|
<div class="hero-content flex-col text-center lg:p-6 pt-0">
|
||||||
|
<h1 class="text-8xl mt-5">{{ CurrencyService.toString(balance) }}</h1>
|
||||||
|
<h3 class="text-5xl font-bold mt-10">Kontoinhaber: John Doe</h3>
|
||||||
|
<h4 class="text-4xl mb-10">Kontonummer: 0000123456</h4>
|
||||||
|
<MoleculeTransactionTable
|
||||||
|
class="w-[42rem]"
|
||||||
|
:balance="balance"
|
||||||
|
:transactions="transactions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="sticky flex place-content-center lg:gap-32 gap-16 bg-base-100 bottom-0 w-100 p-5">
|
||||||
|
<button class="btn gap-2">
|
||||||
|
<ChevronUpIcon class="w-6 h-6 text-success" />
|
||||||
|
Einzahlen
|
||||||
|
</button>
|
||||||
|
<button class="btn gap-2">
|
||||||
|
<CurrencyDollarIcon class="w-6 h-6 text-warning" />
|
||||||
|
Gehalt
|
||||||
|
</button>
|
||||||
|
<button class="btn gap-2">
|
||||||
|
<ChevronDownIcon class="w-6 h-6 text-error" />
|
||||||
|
Auszahlen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { ITransaction } from '../../interfaces/transaction.interface';
|
||||||
|
import { CurrencyService } from '../services/currency.service';
|
||||||
|
import MoleculeTransactionTable from '../molecules/MoleculeTransactionTable.vue';
|
||||||
|
import { CurrencyDollarIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/outline';
|
||||||
|
|
||||||
|
const balance = 13500;
|
||||||
|
const transactions: ITransaction[] = [
|
||||||
|
{
|
||||||
|
type: 'Kontoeröffnung',
|
||||||
|
date: new Date(2022, 7, 12, 17, 30, 0),
|
||||||
|
amount: 500,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Bargeldeinzahlung',
|
||||||
|
date: new Date(2022, 7, 12, 17, 30, 10),
|
||||||
|
amount: 10000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Gehalt',
|
||||||
|
date: new Date(2022, 7, 12, 17, 34, 10),
|
||||||
|
amount: 5000,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Bargeldauszahlung',
|
||||||
|
date: new Date(2022, 7, 15, 18, 26, 0),
|
||||||
|
amount: -2000,
|
||||||
|
},
|
||||||
|
].sort((a, b) => b.date.getTime() - a.date.getTime());
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
5
src/interfaces/transaction.interface.ts
Normal file
5
src/interfaces/transaction.interface.ts
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
export interface ITransaction {
|
||||||
|
type: string;
|
||||||
|
date: Date;
|
||||||
|
amount: number;
|
||||||
|
}
|
Loading…
Reference in a new issue