SimGie/HGOE-SaS
1
0
Fork 0
forked from Kispi/Core
Code Pull requests Activity

feat(webapp): get account details from input

Browse source
This commit is contained in:
Simon Giesel 2022-07-28 17:30:10 +02:00
parent dda5a1ac7d
commit eab98a13b7
5 changed files with 96 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/atoms/AtomHeroText.vue Normal file
View file

@ -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>

5
src/components/molecules/MoleculeDataTable.vue
View file

@ -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>

3
src/components/services/bank.service.ts
View file

@ -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 {

84
src/components/views/BankView.vue
View file

@ -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 { onKeyStroke } from '@vueuse/core';
import { ref } from 'vue';
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>();
onMounted(async () => {
// TODO: Remove this demo account id
accountDetails.value = await BankService.getAccountDetails(DEMO_ACCOUNT_ID);
});
const accountId = ref<string>('');
const inputBuffer = ref<string>('');
const depositModalOpen = ref<boolean>(false);
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));
}
}

9
src/components/views/CheckInView.vue
View file

@ -1,14 +1,9 @@
<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">John Doe um 17:39:33</h1>
</div>
</div>
</div>
<AtomHeroText>John Doe um 17:39:33</AtomHeroText>
</template>
<script lang="ts" setup>
import AtomHeroText from '../atoms/AtomHeroText.vue';
</script>