From 390f48779fcf2b18310e6e0d014c05891a806110 Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Fri, 26 Apr 2024 16:28:52 +0200
Subject: [PATCH] feat: adding input for bank account
---
src/App.vue | 2 +-
src/views/Settings/SettingsAccountView.vue | 62 ++++++++++----
src/views/Settings/SettingsBankView.vue | 94 ++++++++++++++++-----
src/views/Settings/SettingsProfileView.vue | 96 +++++++++++++++-------
4 files changed, 184 insertions(+), 70 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 12ad03a..f7a239c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
-import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+//import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
</script>
<template>
diff --git a/src/views/Settings/SettingsAccountView.vue b/src/views/Settings/SettingsAccountView.vue
index ee06249..82de6a0 100644
--- a/src/views/Settings/SettingsAccountView.vue
+++ b/src/views/Settings/SettingsAccountView.vue
@@ -2,41 +2,67 @@
import { ref, onMounted } from 'vue';
import BaseInput from '@/components/InputFields/BaseInput.vue';
import { useUserInfoStore } from "@/stores/UserStore";
+import { UserService } from '@/api';
+import type { UserUpdateDTO } from '@/api';
-const firstNameRef = ref()
-const surnameRef = ref('')
const emailRef = ref('')
-const passwordRef = ref('')
-const confirmPasswordRef = ref('')
-const formRef = ref()
-let samePasswords = ref(true)
-
-const handleFirstNameInputEvent = (newValue: any) => {
- firstNameRef.value = newValue
-}
+const errorMsg = ref('')
+const confirmationMsg = ref('')
const handleEmailInputEvent = (newValue: any) => {
emailRef.value = newValue
}
+async function setupForm() {
+ try {
+ let response = await UserService.getUser();
+ if (response.email != null) {
+ emailRef.value = response.email
+ }
+ confirmationMsg.value = '';
+ errorMsg.value = '';
+ } catch (err) {
+ errorMsg.value = 'Error fetching email, try again!'
+ confirmationMsg.value = ''
+ }
+}
+
+const handleSubmit = async () => {
+ console.log('Yoooo')
+ const updateUserPayload: UserUpdateDTO = {
+ email: emailRef.value,
+ };
+ try {
+ UserService.update({ requestBody: updateUserPayload })
+ useUserInfoStore().setUserInfo({
+ email: emailRef.value,
+ })
+ confirmationMsg.value = 'Email updated successfully!'
+ errorMsg.value = '';
+ } catch (err) {
+ errorMsg.value = "Error updating email, try again!";
+ confirmationMsg.value = ''
+ }
+}
+onMounted(() => {
+ setupForm()
+})
</script>
<template>
<div class="tab-pane active" id="account">
<h6>ACCOUNT SETTINGS</h6>
<hr>
- <form>
- <div class="form-group">
- <BaseInput :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
- id="firstNameInputChange" input-id="first-name-new" type="text" label="Username"
- placeholder="Enter your username" invalid-message="Please enter your username" />
- </div>
- <br>
+ <form @submit.prevent="handleSubmit">
<div class="form-group">
<BaseInput :model-value="emailRef" @input-change-event="handleEmailInputEvent" id="emailInput-change"
input-id="email-new" type="email" label="Email" placeholder="Enter your email"
- invalid-message="Invalid email" />
+ invalid-message="Invalid email"/>
</div>
+ <p class="text-danger">{{ errorMsg }}</p>
+ <p class="text-success">{{ confirmationMsg }}</p>
+ <br>
+ <button type="submit" class="btn btn-primary">Update Profile</button>
<hr>
<div class="form-group">
<label class="d-block text-danger">Delete Account</label>
diff --git a/src/views/Settings/SettingsBankView.vue b/src/views/Settings/SettingsBankView.vue
index 919bcd7..85c5b04 100644
--- a/src/views/Settings/SettingsBankView.vue
+++ b/src/views/Settings/SettingsBankView.vue
@@ -1,30 +1,82 @@
<template>
<div class="tab-pane active" id="billing">
- <h6>BILLING SETTINGS</h6>
+ <h6>BANK SETTINGS</h6>
<hr>
- <form>
+ <form @submit.prevent="handleSpendingSubmit">
<div class="form-group">
- <label class="d-block mb-0">Spending account</label>
- <select class="form-control form-control-lg">
- <option>9175 5942 5431 5712</option>
- <option>5175 5942 5431 5712</option>
- <option>4175 5942 5431 5712</option>
- </select>
+ <BaseInput :model-value="spendingAccount" @input-change-event="handleSpendingInputEvent" id="firstNameInputChange" input-id="first-name-new"
+ type="Number" label="Spending Account" placeholder="Enter your spending account"
+ invalid-message="Please enter your spending account" />
</div>
+ <br>
+ <button type="submit" class="btn btn-primary">Update Spending Account</button>
+ </form>
+ <br>
+ <form @submit.prevent="handleSavingSubmit">
<div class="form-group">
- <label class="d-block mb-0">Savings account</label>
- <select class="form-control form-control-lg">
- <option>2175 5942 5431 5712</option>
- <option>1175 5942 5431 5712</option>
- </select>
- <br>
- </div>
- <hr>
- <div class="form-group mb-0">
- <label class="d-block">Payment History</label>
- <div class="border border-gray-500 bg-gray-200 p-3 text-center font-size-sm">You
- have not made any payment.</div>
+ <BaseInput :model-value="savingsAccount" @input-change-event="handleSavingInputEvent" id="firstNameInputChange" input-id="first-name-new" type="Number"
+ label="Savings Account" placeholder="Enter your Savings account"
+ invalid-message="Please enter your Savings account" />
</div>
+ <br>
+ <button type="submit" class="btn btn-primary">Update Savings Account</button>
</form>
+ <hr>
+ <div class="form-group mb-0">
+ <label class="d-block">Payment History</label>
+ <div class="border border-gray-500 bg-gray-200 p-3 text-center font-size-sm">You
+ have not made any payment.</div>
+ </div>
</div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseInput from '@/components/InputFields/BaseInput.vue';
+import type { BankAccountDTO } from '@/api';
+import { UserService } from '@/api';
+
+
+const spendingAccount = ref()
+const savingsAccount = ref()
+
+
+const handleSpendingInputEvent = (newValue: any) => {
+ console.log(newValue);
+ spendingAccount.value = newValue
+}
+
+
+const handleSavingInputEvent = (newValue: any) => {
+ console.log(newValue);
+ savingsAccount.value = newValue
+}
+
+
+const handleSavingSubmit = async () => {
+
+ const updateSaving: BankAccountDTO = {
+ bban: savingsAccount.value,
+ bankAccountType: "SAVING_ACCOUNT",
+ };
+ try {
+ UserService.selectBankAccount({ requestBody: updateSaving })
+ } catch (err) {
+ console.error(err)
+ }
+}
+
+const handleSpendingSubmit = async () => {
+ console.log(savingsAccount.value)
+
+ const updateSaving: BankAccountDTO = {
+ bban: spendingAccount.value,
+ bankAccountType: "CHECKING_ACCOUNT",
+ };
+ try {
+ UserService.selectBankAccount({ requestBody: updateSaving })
+ } catch (err) {
+ console.error(err)
+ }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Settings/SettingsProfileView.vue b/src/views/Settings/SettingsProfileView.vue
index b562554..c572d7b 100644
--- a/src/views/Settings/SettingsProfileView.vue
+++ b/src/views/Settings/SettingsProfileView.vue
@@ -2,12 +2,13 @@
import { ref, onMounted } from 'vue';
import BaseInput from '@/components/InputFields/BaseInput.vue';
import { useUserInfoStore } from "@/stores/UserStore";
+import { UserService } from '@/api';
+import type { UserUpdateDTO } from '@/api';
const firstNameRef = ref()
const surnameRef = ref('')
const emailRef = ref('')
const passwordRef = ref('')
-const confirmPasswordRef = ref('')
const formRef = ref()
let samePasswords = ref(true)
@@ -20,42 +21,77 @@ const handleSurnameInputEvent = (newValue: any) => {
surnameRef.value = newValue
}
+async function setupForm() {
+ try {
+ let response = await UserService.getUser();
+ console.log(response.firstName)
+
+ firstNameRef.value = response.firstName;
+ if (response.lastName != null) {
+ surnameRef.value = response.lastName;
+ }
+ } catch (err) {
+ console.error(err)
+ }
+}
+
+const handleSubmit = async () => {
+ console.log('Yoooo')
+ const updateUserPayload: UserUpdateDTO = {
+ firstName: firstNameRef.value,
+ lastName: surnameRef.value,
+ };
+
+ try {
+ UserService.update({ requestBody: updateUserPayload })
+ useUserInfoStore().setUserInfo({
+ firstname: firstNameRef.value,
+ lastname: surnameRef.value,
+ })
+
+ } catch (err) {
+ console.error(err)
+ }
+}
+onMounted(() => {
+ setupForm()
+})
+
</script>
<template>
- <div class="tab-pane active" id="profile">
- <h6>YOUR PROFILE INFORMATION</h6>
- <hr>
- <form>
- <div class="user-avatar">
- <img id="icon" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Maxwell Admin">
- </div>
- <div class="btn">
- <div class="mt-2">
- <span class="btn btn-primary"><img src="@/assets/icons/download.svg"></span>
- </div>
- </div>
- <div class="form-group">
- <BaseInput :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
- id="firstNameInputChange" input-id="first-name-new" type="text" label="First name"
- placeholder="Enter your first name" invalid-message="Please enter your first name" />
- </div>
- <br>
- <div class="form-group">
- <BaseInput :model-value="surnameRef" @input-change-event="handleSurnameInputEvent"
- id="surnameInput-change" input-id="surname-new" type="text" label="Surname"
- placeholder="Enter your surname" invalid-message="Please enter your surname" />
- </div>
- <br>
- <button type="button" class="btn btn-primary">Update Profile</button>
- <button type="reset" class="btn btn-light">Reset Changes</button>
- </form>
- </div>
+ <div class="tab-pane active" id="profile">
+ <h6>YOUR PROFILE INFORMATION</h6>
+ <hr>
+ <form @submit.prevent="handleSubmit" novalidate>
+ <div class="user-avatar">
+ <img id="icon" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Maxwell Admin">
+ </div>
+ <div class="btn">
+ <div class="mt-2">
+ <span class="btn btn-primary"><img src="@/assets/icons/download.svg"></span>
+ </div>
+ </div>
+ <div class="form-group">
+ <BaseInput :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent" id="firstNameInputChange"
+ input-id="first-name-new" type="text" label="First name" placeholder="Enter your first name"
+ invalid-message="Please enter your first name" />
+ </div>
+ <br>
+ <div class="form-group">
+ <BaseInput :model-value="surnameRef" @input-change-event="handleSurnameInputEvent" id="surnameInput-change"
+ input-id="surname-new" type="text" label="Surname" placeholder="Enter your surname"
+ invalid-message="Please enter your surname" />
+ </div>
+ <br>
+ <button type="submit" class="btn btn-primary">Update Profile</button>
+ </form>
+ </div>
</template>
<style scoped>
- #icon {
+#icon {
width: 90px;
height: 90px;
-webkit-border-radius: 100px;
--
GitLab