From 6c06a2d129570cd103cbef141ed84f3c755b5d05 Mon Sep 17 00:00:00 2001
From: Simon <simongiesel@gmail.com>
Date: Wed, 13 Jul 2022 17:45:50 +0200
Subject: [PATCH] feat(webapp): implement bank view

---
 .../molecules/MoleculeTransactionTable.vue    | 56 +++++++++++
 src/components/services/currency.service.ts   | 14 +++
 src/components/services/date.service.ts       | 11 +++
 src/components/views/BankView.vue             | 97 ++++++++++++++++++-
 src/interfaces/transaction.interface.ts       |  5 +
 5 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 src/components/molecules/MoleculeTransactionTable.vue
 create mode 100644 src/components/services/currency.service.ts
 create mode 100644 src/components/services/date.service.ts
 create mode 100644 src/interfaces/transaction.interface.ts

diff --git a/src/components/molecules/MoleculeTransactionTable.vue b/src/components/molecules/MoleculeTransactionTable.vue
new file mode 100644
index 0000000..3d8ab8e
--- /dev/null
+++ b/src/components/molecules/MoleculeTransactionTable.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/services/currency.service.ts b/src/components/services/currency.service.ts
new file mode 100644
index 0000000..8ff2709
--- /dev/null
+++ b/src/components/services/currency.service.ts
@@ -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`;
+  }
+}
\ No newline at end of file
diff --git a/src/components/services/date.service.ts b/src/components/services/date.service.ts
new file mode 100644
index 0000000..7a4a187
--- /dev/null
+++ b/src/components/services/date.service.ts
@@ -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',
+    });
+  }
+}
\ No newline at end of file
diff --git a/src/components/views/BankView.vue b/src/components/views/BankView.vue
index 11b4126..9bc0db0 100644
--- a/src/components/views/BankView.vue
+++ b/src/components/views/BankView.vue
@@ -1,9 +1,104 @@
 <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>
 
 <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>
 
 <style lang="scss" scoped>
diff --git a/src/interfaces/transaction.interface.ts b/src/interfaces/transaction.interface.ts
new file mode 100644
index 0000000..d600eab
--- /dev/null
+++ b/src/interfaces/transaction.interface.ts
@@ -0,0 +1,5 @@
+export interface ITransaction {
+  type: string;
+  date: Date;
+  amount: number;
+}
\ No newline at end of file