feat(webapp): get account details from input

src/components/atoms/AtomHeroText.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="min-h-full lg:p-6">
+    <div class="hero min-h-full bg-base-200 rounded-lg">
+      <div class="hero-content flex-col text-center">
+        <h1 class="text-6xl font-bold"><slot /></h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/molecules/MoleculeDataTable.vue

@@ -32,12 +32,13 @@
             >
               <DocumentTextIcon class="h-6 w-6" />
             </label>
-            <button
+            <RouterLink
               v-if="header.type === TableHeaderType.BUTTON_ACCOUNT"
+              :to="`/bank?accountNumber=${entry.accountNumber}`"
               class="btn btn-sm btn-ghost p-1"
             >
               <CurrencyDollarIcon class="h-6 w-6" />
-            </button>
+            </RouterLink>
           </td>
         </tr>
       </tbody>

src/components/services/bank.service.ts

@@ -16,6 +16,9 @@ export const BankService = {
   async getAccountDetails(accountNumber: string): Promise<IAccount> {
     const database = new Databases(sdk, DATABASE_ID);
     const account = await AccountService.getAccount(accountNumber);
+    if(!account) {
+      throw new Error('Account not found');
+    }
     const transactionDocuments = await database.listDocuments<ITransaction & Models.Document>(
       TRANSACTIONS_COLLECTION_ID, [Query.equal('accountNumber', accountNumber)], 100, 0, undefined, undefined, ['$createdAt'], ['DESC']);
     return {

src/components/views/BankView.vue

@@ -12,13 +12,17 @@
       :transactions="accountDetails.transactions"
     />
   </div>
-  <div class="fixed flex place-content-center lg:gap-32 gap-16 bg-base-100 bottom-0 lg:w-[calc(100%-16rem)] p-5">
+  <div
+    v-if="accountDetails"
+    class="fixed flex place-content-center lg:gap-32 gap-16 bg-base-100 bottom-0 lg:w-[calc(100%-16rem)] p-5"
+  >
     <MoleculeInputModal
       :id="depositModalId"
       title="Einzahlung"
       action-label="Einzahlen"
       input-label="Einzuzahlender Betrag:"
       @submit="handleDeposit"
+      @open="depositModalOpen = $event.open"
     />
     <label
       ref="depositModalLabel"
@@ -34,6 +38,7 @@
       action-label="Gehalt hinzufügen"
       input-label="Gehalt Betrag:"
       @submit="handleSalary"
+      @open="salaryModalOpen = $event.open"
     />
     <label
       ref="salaryModalLabel"
@@ -49,6 +54,7 @@
       action-label="Auszahlen"
       input-label="Auszuzahlender Betrag:"
       @submit="handleWithdraw"
+      @open="withdrawModalOpen = $event.open"
     />
     <label
       ref="withdrawModalLabel"
@@ -59,35 +65,57 @@
       Auszahlen
     </label>
   </div>
+  <AtomHeroText v-else>
+    Bitte Karte scannen...
+    <div
+      v-if="accountNotFound"
+      class="alert alert-error shadow-lg mt-6"
+    >
+      <div>
+        <XCircleIcon class="w-6 h-6" />
+        <span class="text-base font-normal">Fehler: Der Account wurde nicht gefunden.</span>
+      </div>
+    </div>
+  </AtomHeroText>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
-import { onKeyStroke } from '@vueuse/core';
+import { useRoute, useRouter } from 'vue-router';
+import { onKeyStroke, promiseTimeout } from '@vueuse/core';
 import { BankService, TransactionType } from '../services/bank.service';
 import { CurrencyService } from '../services/currency.service';
 import { IAccount } from '../../interfaces/account.interface';
 import { ITransaction } from '../../interfaces/transaction.interface';
-import { CurrencyDollarIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/outline';
+import { CurrencyDollarIcon, ChevronDownIcon, ChevronUpIcon, XCircleIcon } from '@heroicons/vue/outline';
+import AtomHeroText from '../atoms/AtomHeroText.vue';
 import MoleculeInputModal from '../molecules/MoleculeInputModal.vue';
 import MoleculeTransactionTable from '../molecules/MoleculeTransactionTable.vue';
 
-const DEMO_ACCOUNT_ID = '0000123456';
+const route = useRoute();
+const router = useRouter();
 
 const accountDetails = ref<IAccount>();
 const depositModalLabel = ref<HTMLLabelElement>();
 const salaryModalLabel = ref<HTMLLabelElement>();
 const withdrawModalLabel = ref<HTMLLabelElement>();
-
+const accountId = ref<string>('');
-onMounted(async () => {
+const inputBuffer = ref<string>('');
-  // TODO: Remove this demo account id
+const depositModalOpen = ref<boolean>(false);
-  accountDetails.value = await BankService.getAccountDetails(DEMO_ACCOUNT_ID);
+const salaryModalOpen = ref<boolean>(false);
-});
+const withdrawModalOpen = ref<boolean>(false);
+const accountNotFound = ref<boolean>(false);
 
 const depositModalId = 'deposit-modal';
 const salaryModalId = 'salary-modal';
 const withdrawModalId = 'withdraw-modal';
 
+if(route.query.accountNumber) {
+  accountId.value = route.query.accountNumber as string;
+  getAccountDetails();
+  router.replace({ path: '/bank' });
+}
+
 onKeyStroke(['e', 'g', 'a'], (e) => {
   e.preventDefault();
   switch (e.key) {
@@ -103,24 +131,54 @@ onKeyStroke(['e', 'g', 'a'], (e) => {
   }
 });
 
+onKeyStroke(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'], async (e) => {
+  if(depositModalOpen.value || salaryModalOpen.value || withdrawModalOpen.value) {
+    return;
+  }
+  e.preventDefault();
+  if(e.key === 'Enter') {
+    accountId.value = inputBuffer.value;
+    inputBuffer.value = '';
+    getAccountDetails();
+  } else {
+    inputBuffer.value += e.key;
+  }
+});
+
+async function getAccountDetails() {
+  try {
+    accountDetails.value = await BankService.getAccountDetails(accountId.value);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    if(error.message == 'Account not found') {
+      accountNotFound.value = true;
+      await promiseTimeout(3000);
+      accountNotFound.value = false;
+    } else {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }
+}
+
 async function handleDeposit(amount: string) {
   const amountNumber = parseInt(amount);
   if(!isNaN(amountNumber)) {
-    updateTransactions(await BankService.addTransaction(DEMO_ACCOUNT_ID, amountNumber, TransactionType.DEPOSIT));
+    updateTransactions(await BankService.addTransaction(accountId.value, amountNumber, TransactionType.DEPOSIT));
   }
 }
 
 async function handleSalary(amount: string) {
   const amountNumber = parseInt(amount);
   if(!isNaN(amountNumber)) {
-    updateTransactions(await BankService.addTransaction(DEMO_ACCOUNT_ID, amountNumber, TransactionType.SALARY));
+    updateTransactions(await BankService.addTransaction(accountId.value, amountNumber, TransactionType.SALARY));
   }
 }
 
 async function handleWithdraw(amount: string) {
   const amountNumber = parseInt(amount);
   if(!isNaN(amountNumber)) {
-    updateTransactions(await BankService.addTransaction(DEMO_ACCOUNT_ID, amountNumber, TransactionType.WITHDRAW));
+    updateTransactions(await BankService.addTransaction(accountId.value, amountNumber, TransactionType.WITHDRAW));
   }
 }
 

src/components/views/CheckInView.vue

@@ -1,14 +1,9 @@
 <template>
-  <div class="min-h-full lg:p-6">
+  <AtomHeroText>John Doe um 17:39:33</AtomHeroText>
-    <div class="hero min-h-full bg-base-200 rounded-lg">
-      <div class="hero-content flex-col text-center">
-        <h1 class="text-6xl font-bold">John Doe um 17:39:33</h1>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
+import AtomHeroText from '../atoms/AtomHeroText.vue';
 
 </script>