feat: things

src/api/models/UserDTO.ts

@@ -2,6 +2,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { ConfigurationDTO } from './ConfigurationDTO';
 import type { PointDTO } from './PointDTO';
 import type { StreakDTO } from './StreakDTO';
 export type UserDTO = {
@@ -18,5 +19,6 @@ export type UserDTO = {
     savingsAccountBBAN?: number;
     point?: PointDTO;
     streak?: StreakDTO;
+    configuration?: ConfigurationDTO;
 };
 

src/components/Settings/SettingsAccount.vue

 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue'
 import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
 import { useUserInfoStore } from "@/stores/UserStore";
-import { UserService } from '@/api';
+import { type UserDTO, UserService } from '@/api'
 import type { UserUpdateDTO } from '@/api';
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
 import router from '@/router'
+import SuitableChallenges from '@/components/Configuration/ConfigurationSteps/SuitableChallenges.vue'
 
 const emailRef = ref('')
 const errorMsg = ref('')
+const errorMsg3 = ref('')
 const confirmationMsg = ref('')
+const confirmationMsg2 = ref('')
 const errorMsg2 = ref('')
+const commitmentRef = ref('MUCH')
+const challengesRef = ref<any>([])
+
+// Represents a list of available challenges.
+const challenges: string[] = ['NO_COFFEE' , 'NO_CAR' , 'SHORTER_SHOWER' , 'SPEND_LESS_ON_FOOD' , 'BUY_USED_CLOTHES' , 'LESS_SHOPPING' , 'DROP_SUBSCRIPTION' , 'SELL_SOMETHING' , 'BUY_USED' , 'EAT_PACKED_LUNCH' , 'STOP_SHOPPING' , 'ZERO_SPENDING' , 'RENT_YOUR_STUFF' , 'MEATLESS' , 'SCREEN_TIME_LIMIT' , 'UNPLUGGED_ENTERTAINMENT']
+
+/**
+ * Mapping between challenge enum and norwegian translation.
+ */
+const challengeMapper: any = {
+  "NO_COFFEE": "Droppe kaffe",
+  "NO_CAR": "Droppe bil",
+  "SHORTER_SHOWER": "Ta kortere dusjer",
+  "SPEND_LESS_ON_FOOD": "Bruk mindre penger på mat",
+  "BUY_USED_CLOTHES": "Kjøp brukte klær",
+  "LESS_SHOPPING": "Handle mindre",
+  "DROP_SUBSCRIPTION": "Si opp abonnement",
+  "SELL_SOMETHING": "Selg noe",
+  "BUY_USED": "Kjøp brukt",
+  "EAT_PACKED_LUNCH": "Lag niste",
+  "STOP_SHOPPING": "Shoppestopp",
+  "ZERO_SPENDING": "Null-forbruk",
+  "RENT_YOUR_STUFF": "Lei ut ting",
+  "MEATLESS": "Kjøttfritt",
+  "SCREEN_TIME_LIMIT": "Skjerm tidsgrense",
+  "UNPLUGGED_ENTERTAINMENT": "Strømløs underholdning"
+}
 
 /**
  * Handles the email input event by updating the email reference value.
@@ -28,7 +58,11 @@ const handleEmailInputEvent = (newValue: any) => {
  */
 async function setupForm() {
   try {
-    let response = await UserService.getUser();
+    let response: any = await UserService.getUser();
+    if (response.configuration) {
+      commitmentRef.value = response.configuration.commitment;
+      challengesRef.value = response.configuration.challengeTypes;
+    }
     if (response.email != null) {
       emailRef.value = response.email
     }
@@ -40,6 +74,25 @@ async function setupForm() {
   }
 }
 
+const handleSubmitConfig = async () => {
+  // Construct payload for updating user email
+  const updateUserPayload: UserUpdateDTO = {
+    configuration: {
+      commitment: commitmentRef.value,
+      challengeTypes: challengesRef.value
+    }
+  };
+  try {
+    // Send request to update user email
+    UserService.update({ requestBody: updateUserPayload })
+    confirmationMsg2.value = 'Oppdatert!'
+    errorMsg3.value = '';
+  } catch (err) {
+    errorMsg3.value = handleUnknownError(err);
+    confirmationMsg2.value = ''
+  }
+}
+
 /**
  * Handles form submission by updating the user's email.
  * Updates the confirmation message upon successful email update.
@@ -80,6 +133,22 @@ const handleSubmit2 = async () => {
 onMounted(() => {
   setupForm()
 })
+
+const onChangedChallengeEvent = (value: any) => {
+  // if challenge is checked then add it to the chosenChallenges variable
+  if (challengesRef.value.includes(value)) {
+    challengesRef.value.push(value)
+  }
+  // if challenge is unchecked then remove it from the chosenChallenges variable
+  else {
+    challengesRef.value = challengesRef.value.filter((item: string) => item !== value);
+  }
+  console.log(challengesRef.value)
+}
+
+const a = computed(() => {
+  challengesRef.value.includes()
+})
 </script>
 
 <template>
@@ -96,8 +165,26 @@ onMounted(() => {
           <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
           <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
           <br>
-          <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Endre
-            Informasjon</button>
+          <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Oppdater</button>
+      </form>
+      <hr>
+      <form @submit.prevent="handleSubmitConfig">
+        <p>Grad av villighet til å gjøre endringer</p>
+        <select v-model="commitmentRef" class="form-select" aria-label="Default select example">
+          <option value="LITTLE">Lav</option>
+          <option value="SOME">Middels</option>
+          <option value="MUCH">Høy</option>
+        </select>
+        <p>Hvilke utfordringer passer deg?</p>
+        <button v-for="challenge in challenges"
+                :class="['btn', challengesRef.includes(challenge) ? 'btn-primary' : 'btn-secondary']"
+                @click="onChangedChallengeEvent" type="button">
+          {{ challengeMapper[challenge] }}
+        </button>
+        <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg3 }}</p>
+        <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg2 }}</p>
+        <br>
+        <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Oppdater</button>
       </form>
       <form @submit.prevent="handleSubmit2" style="margin-top: 20px;">
         <div class="form-group">