From c734349a9ea5ca8c0ada6e2b57b637636a32d67f Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Fri, 19 Apr 2024 10:22:41 +0200
Subject: [PATCH] refactor/Added reactive variables in configuration steps
---
.../Configuration/ChallangeCheckBox.vue | 13 ++++++-
.../Configuration/Configuration.vue | 35 ++++++++++++++++--
.../ConfigurationSteps/BankId.vue | 19 +++++++---
.../ConfigurationSteps/Commitment.vue | 25 +++++++++----
.../ConfigurationSteps/Experience.vue | 26 +++++++++-----
.../ConfigurationSteps/SuitableChallenges.vue | 36 +++++++++++++------
src/components/Login/LoginForm.vue | 1 +
src/components/SignUp/SignUpForm.vue | 3 --
src/stores/UserStore.ts | 11 ++++++
9 files changed, 131 insertions(+), 38 deletions(-)
diff --git a/src/components/Configuration/ChallangeCheckBox.vue b/src/components/Configuration/ChallangeCheckBox.vue
index f607eaf..529a72e 100644
--- a/src/components/Configuration/ChallangeCheckBox.vue
+++ b/src/components/Configuration/ChallangeCheckBox.vue
@@ -1,5 +1,6 @@
<script setup lang="ts">
+const emit = defineEmits(['challengeChangedEvent'])
const props = defineProps({
id: {
type: String,
@@ -8,14 +9,24 @@ const props = defineProps({
text: {
type: String,
default: ''
+ },
+ modelValue: {
+ type: Boolean,
+ default: false
}
})
+const onChallengeChanged = (event: any) => {
+ const value = event.target.checked
+ const data = [props.text, value]
+ emit('challengeChangedEvent', data)
+}
+
</script>
<template>
<span>
- <input type="checkbox" class="btn-check" :id="props.id" autocomplete="off">
+ <input @change="onChallengeChanged" type="checkbox" class="btn-check" :id="props.id" autocomplete="off">
<label class="btn btn-outline-primary align-items-center justify-content-center" :for="props.id">{{ props.text }}</label>
</span>
</template>
diff --git a/src/components/Configuration/Configuration.vue b/src/components/Configuration/Configuration.vue
index 3b5cd1a..372b3d3 100644
--- a/src/components/Configuration/Configuration.vue
+++ b/src/components/Configuration/Configuration.vue
@@ -4,24 +4,48 @@ import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
+// Configuration variables
+let bankId = ref('')
+let commitment = ref('')
+let experience = ref('')
+let suitableChallenges = ref([])
+let savingGoalTitle = ref('')
+let sumToSpare = ref(0)
+let dueDate = ref(null)
const router = useRouter()
-
// The configuration steps with path and order value.
const configurationSteps = {'/bank-id': 1, '/commitment': 2, '/experience': 3, '/suitable-challenges': 4, '/first-saving-goal': 5}
const length = Object.keys(configurationSteps).length
let percentage = ref(1/length);
-// Pushes to '/bank-id' RouterView and sets current path to this path.
+// Initially pushes to '/bank-id' RouterView and sets current path to this path.
router.push(Object.keys(configurationSteps)[0])
let currentRoute = useRoute()
let currentPath = currentRoute.fullPath
+// Sets the current path to a new path and updates progressbar
const onNewRouteEvent = (path) => {
currentPath = path
percentage.value = (1/length) * configurationSteps[path]
}
+const onBankIdSelectedEvent = (value) => {
+ bankId.value = value
+}
+
+const onCommitmentSelectedEvent = (value) => {
+ commitment.value = value
+}
+
+const onExperienceSelectedEvent = (value) => {
+ experience.value = value
+}
+
+const onChallengesSelectedEvent = (value) => {
+ suitableChallenges.value = value
+}
+
</script>
<template>
@@ -30,7 +54,12 @@ const onNewRouteEvent = (path) => {
<ProgressBar id="progressbar" :percentage="percentage"/>
</div>
<div class="configuration-container">
- <RouterView @changeRouterEvent="onNewRouteEvent"/>
+ <RouterView @changeRouterEvent="onNewRouteEvent"
+ @bankIdSelectedEvent="onBankIdSelectedEvent"
+ @commitmentSelectedEvent="onCommitmentSelectedEvent"
+ @experienceSelectedEvent="onExperienceSelectedEvent"
+ @challengesSelectedEvent="onChallengesSelectedEvent"
+ />
</div>
</div>
</template>
diff --git a/src/components/Configuration/ConfigurationSteps/BankId.vue b/src/components/Configuration/ConfigurationSteps/BankId.vue
index 5fe760d..12a9e65 100644
--- a/src/components/Configuration/ConfigurationSteps/BankId.vue
+++ b/src/components/Configuration/ConfigurationSteps/BankId.vue
@@ -4,8 +4,13 @@ import { useRouter } from 'vue-router'
import { ref } from 'vue'
const formRef = ref()
+const bankIDRef = ref(false)
+const minIdRef = ref(false)
+const vippsRef = ref(false)
+
+
const router = useRouter();
-const emit = defineEmits(['changeRouterEvent']);
+const emit = defineEmits(['changeRouterEvent', 'bankIdSelectedEvent']);
emit('changeRouterEvent', '/bank-id');
const onClick = () => {
@@ -17,6 +22,12 @@ const onClick = () => {
return;
}
+ let choice = ''
+ if (bankIDRef.value.checked) choice = 'BankId på mobil'
+ else if (minIdRef.value.checked) choice = 'MinId'
+ else if (vippsRef.value.checked) choice = 'Vipps'
+
+ emit('bankIdSelectedEvent', choice)
router.push('/commitment')
}
@@ -32,13 +43,13 @@ const onClick = () => {
<form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
- <input type="radio" class="btn-check" name="bank-id" id="btn-check-outlined" autocomplete="off">
+ <input ref="bankIDRef" type="radio" class="btn-check" name="bank-id" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">BankID på mobil</label>
- <input type="radio" class="btn-check" name="bank-id" id="btn-check2-outlined" autocomplete="off">
+ <input ref="minIdRef" type="radio" class="btn-check" name="bank-id" id="btn-check2-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">MinID</label>
- <input type="radio" class="btn-check" name="bank-id" id="btn-check3-outlined" autocomplete="off">
+ <input ref="vippsRef" type="radio" class="btn-check" name="bank-id" id="btn-check3-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Vipps</label>
</form>
diff --git a/src/components/Configuration/ConfigurationSteps/Commitment.vue b/src/components/Configuration/ConfigurationSteps/Commitment.vue
index 7fb352e..af7c1b2 100644
--- a/src/components/Configuration/ConfigurationSteps/Commitment.vue
+++ b/src/components/Configuration/ConfigurationSteps/Commitment.vue
@@ -4,8 +4,15 @@ import Button1 from '@/components/Buttons/Button1.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
-const router = useRouter();
+const emit = defineEmits(['changeRouterEvent', 'commitmentSelectedEvent'])
+emit('changeRouterEvent', '/commitment')
+
const formRef = ref()
+const lowRef = ref('')
+const mediumRef = ref('')
+const highRef = ref('')
+const router = useRouter();
+
const onClick = () => {
const radios = formRef.value.querySelectorAll('input[type="radio"]');
const checkedRadios = Array.from(radios).filter(radio => radio.checked);
@@ -14,12 +21,16 @@ const onClick = () => {
alert('Please select an option.');
return;
}
+
+ let choice = '';
+ if (lowRef.value.checked) choice = 'Low'
+ else if (mediumRef.value.checked) choice = 'Medium'
+ else if (highRef.value.checked) choice = 'High'
+
+ emit('commitmentSelectedEvent', choice)
router.push('/experience')
}
-const emit = defineEmits(['changeRouterEvent'])
-emit('changeRouterEvent', '/commitment')
-
</script>
<template>
@@ -32,13 +43,13 @@ emit('changeRouterEvent', '/commitment')
<form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
- <input type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off">
+ <input ref="lowRef" type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Low</label>
- <input type="radio" class="btn-check" name="commitment" id="btn-check2-outlined" autocomplete="off">
+ <input ref="mediumRef" type="radio" class="btn-check" name="commitment" id="btn-check2-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Medium</label>
- <input type="radio" class="btn-check" name="commitment" id="btn-check3-outlined" autocomplete="off">
+ <input ref="highRef" type="radio" class="btn-check" name="commitment" id="btn-check3-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">High</label>
</form>
diff --git a/src/components/Configuration/ConfigurationSteps/Experience.vue b/src/components/Configuration/ConfigurationSteps/Experience.vue
index fe699a9..4e890f5 100644
--- a/src/components/Configuration/ConfigurationSteps/Experience.vue
+++ b/src/components/Configuration/ConfigurationSteps/Experience.vue
@@ -1,12 +1,17 @@
<script setup lang="ts">
-
import Button1 from '@/components/Buttons/Button1.vue'
-
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter();
+const emit = defineEmits(['changeRouterEvent', 'experienceSelectedEvent'])
+emit('changeRouterEvent', '/experience')
+
const formRef = ref()
+const beginnerRef = ref('')
+const someExperienceRef = ref('')
+const expertRef = ref('')
+
const onClick = () => {
const radios = formRef.value.querySelectorAll('input[type="radio"]');
const checkedRadios = Array.from(radios).filter(radio => radio.checked);
@@ -16,31 +21,34 @@ const onClick = () => {
return;
}
+ let choice = ''
+ if (beginnerRef.value.checked) choice = 'Beginner'
+ else if (someExperienceRef.value.checked) choice = 'Some experience'
+ else if (expertRef.value.checked) choice = 'Expert'
+
+ emit('experienceSelectedEvent', choice)
router.push('/suitable-challenges')
}
-const emit = defineEmits(['changeRouterEvent'])
-emit('changeRouterEvent', '/experience')
-
</script>
<template>
<div class="container">
<div>
<h3 class="d-flex align-items-center justify-content-center">
- How much experice do you have with saving money?
+ How much experience do you have with saving money?
</h3>
</div>
<form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
- <input type="radio" class="btn-check" name="experience" id="btn-check-outlined" autocomplete="off">
+ <input ref="beginnerRef" type="radio" class="btn-check" name="experience" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Beginner</label>
- <input type="radio" class="btn-check" name="experience" id="btn-check2-outlined" autocomplete="off">
+ <input ref="someExperienceRef" type="radio" class="btn-check" name="experience" id="btn-check2-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Some experience</label>
- <input type="radio" class="btn-check" name="experience" id="btn-check3-outlined" autocomplete="off">
+ <input ref="expertRef" type="radio" class="btn-check" name="experience" id="btn-check3-outlined" autocomplete="off">
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Expert</label>
</form>
diff --git a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
index 09e7fcd..91c3904 100644
--- a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
+++ b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
@@ -1,21 +1,33 @@
<script setup lang="ts">
-
import { useRouter } from 'vue-router'
-
-const router = useRouter();
-const onClick = () => {
- router.push('/first-saving-goal')
-}
-
import ChallangeCheckBox from '@/components/Configuration/ChallangeCheckBox.vue'
import Button1 from '@/components/Buttons/Button1.vue'
+import { ref } from 'vue'
-const emit = defineEmits(['changeRouterEvent'])
+const emit = defineEmits(['changeRouterEvent', 'challengesSelectedEvent'])
emit('changeRouterEvent', '/suitable-challenges')
+const router = useRouter();
+let chosenChallenges = ref([])
const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
- 'Quit subscription', 'Drop car', 'Short showers', 'Exercise outside', 'Make budget', 'Others'
-]
+ 'Quit subscription', 'Drop car', 'Short showers', 'Exercise outside', 'Make budget']
+
+const onChangedChallengeEvent = (value) => {
+ // if challenge is checked then add it to the chosenChallenges variable
+ if (value[1]) {
+ chosenChallenges.value.push(value[0])
+ }
+ // if challenge is unchecked then remove it from the chosenChallenges variable
+ else {
+ console.log('Reached')
+ chosenChallenges.value = chosenChallenges.value.filter(item => item !== value[0]);
+ }
+}
+
+const onClick = () => {
+ emit('challengesSelectedEvent', chosenChallenges.value)
+ router.push('/first-saving-goal')
+}
</script>
@@ -28,7 +40,9 @@ const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
</div>
<div class="challenge-container">
- <ChallangeCheckBox v-for="(item, index) in challenges" :id="index" :text="item"/>
+ <ChallangeCheckBox v-for="(item, index) in challenges" :id="index" :text="item"
+ @challengeChangedEvent="onChangedChallengeEvent"
+ />
</div>
<div class="confirm-button-container">
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 9d94306..2f0a5f7 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -26,6 +26,7 @@ const handlePasswordInputEvent = (newValue: any) => {
}
const handleSubmit = async () => {
+ formRef.value.classList.add("was-validated")
const loginUserPayload: LoginRequest = {
email: emailRef.value,
password: passwordRef.value
diff --git a/src/components/SignUp/SignUpForm.vue b/src/components/SignUp/SignUpForm.vue
index 9ef325b..5ee2367 100644
--- a/src/components/SignUp/SignUpForm.vue
+++ b/src/components/SignUp/SignUpForm.vue
@@ -14,7 +14,6 @@ const formRef = ref()
const handleFirstNameInputEvent = (newValue: any) => {
firstNameRef.value = newValue
- console.log(firstNameRef.value)
}
const handleSurnameInputEvent = (newValue: any) => {
@@ -35,8 +34,6 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
const handleSubmit = () => {
formRef.value.classList.add("was-validated")
- alert("Expected to be transferred to initial configuration") // Todo remove this line
- router.push("/configuration")
}
</script>
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index 5fbdf1e..74e952a 100644
--- a/src/stores/UserStore.ts
+++ b/src/stores/UserStore.ts
@@ -33,6 +33,7 @@ export type UserStoreInfo = {
email?: string;
firstname?: string;
lastname?: string;
+ password?: string;
accessToken?: string;
role?: string;
};
@@ -42,10 +43,17 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
email: '',
firstname: '',
lastname: '',
+ password: '',
accessToken: '',
role: '',
}),
actions: {
+ setPassword(password: string) {
+ this.password = password
+ },
+ resetPassword() {
+ this.password = ''
+ },
setUserInfo(userinfo: UserStoreInfo) {
userinfo.email && (this.$state.email = userinfo.email);
userinfo.firstname && (this.$state.firstname = userinfo.firstname);
@@ -64,6 +72,9 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
},
},
getters: {
+ getPassword(): string {
+ return this.password
+ },
isLoggedIn(): boolean {
return this.accessToken !== '';
},
--
GitLab