Confirm dialog, fix language change bug, add bank accout information to users

software/src/pages/accountPage/accountDataCard.vue

@@ -69,6 +69,21 @@ const userStore = useUserStore()
           />
         </v-col>
       </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.bankName')"
+            v-model="userStore.userAccount.bankName"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            :label="$t('userInfo.iban')"
+            v-model="userStore.userAccount.iban"
+          />
+        </v-col>
+      </v-row>
     </v-container>
 
     <template #actions>

software/src/pages/accountPage/accountManagingCard.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import confirmDialog from '@/components/confirmDialog.vue';
+import { ref } from 'vue';
+
+const showConfirmDialog = ref(false)
+
+function deleteAccount() {
+  // todo
+}
+</script>
+
+<template>
+  <card-view :title="$t('account.managingAccount')">
+    <v-container>
+      <v-row>
+        <v-col class="d-flex justify-center align-center">
+          <v-btn
+            prepend-icon="mdi-delete"
+            variant="outlined"
+            color="red"
+            @click="showConfirmDialog = true"
+          >
+            {{ $t("account.delete") }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </card-view>
+
+  <confirm-dialog
+    v-model="showConfirmDialog"
+    :title="$t('dialog.deleteAccount.title')"
+    :description="$t('dialog.deleteAccount.description')"
+    :onConfirm="deleteAccount"
+  />
+</template>

software/src/pages/accountPage/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import alertBanner from '@/components/alertBanner.vue';
 import accountDataCard from './accountDataCard.vue';
+import accountManagingCard from './accountManagingCard.vue';
 </script>
 
 <template>
@@ -16,5 +17,11 @@ import accountDataCard from './accountDataCard.vue';
         <account-data-card />
       </v-col>
     </v-row>
+
+    <v-row>
+      <v-col>
+        <account-managing-card />
+      </v-col>
+    </v-row>
   </v-container>
 </template>

software/src/pages/basketPage/index.vue

@@ -3,8 +3,13 @@ import { useBasketStore } from '@/data/stores/basketStore';
 import productsTable from './productsTable.vue';
 import alertBanner from '@/components/alertBanner.vue';
 import cardView from '@/components/cardView.vue';
+import { useUserStore } from '@/data/stores/userStore';
+import orderingDialog from './orderingDialog.vue';
+import { ref } from 'vue';
 
 const basketStore = useBasketStore()
+const userStore = useUserStore()
+const showOrderingDialog = ref()
 </script>
 
 <template>
@@ -41,9 +46,10 @@ const basketStore = useBasketStore()
           <template #actions>
             <v-btn
               prepend-icon="mdi-basket-check"
-              :disabled="basketStore.itemsInBasket.length == 0"
+              :disabled="basketStore.itemsInBasket.length == 0 || userStore.userAccount.id == null"
               variant="outlined"
               color="green"
+              @click="showOrderingDialog = true"
             >
               {{ $t('orderNow') }}
             </v-btn>
@@ -52,4 +58,6 @@ const basketStore = useBasketStore()
       </v-col>
     </v-row>
   </v-container>
+
+  <ordering-dialog v-model="showOrderingDialog" />
 </template>

software/src/pages/basketPage/orderingDialog.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import actionDialog from '@/components/actionDialog.vue';
 </script>
 
 <template>
-  <v-dialog :title="$t('ordering.ordering')">
-
-  </v-dialog>
+  <action-dialog
+    :title="$t('ordering.ordering')"
+  />
 </template>

software/src/pages/basketPage/productsTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BasketItemModel } from '@/data/models/basketItemModel';
 import { useBasketStore } from '@/data/stores/basketStore';
-import { calcPrice, calcProductPrice } from '@/scripts/productScripts';
+import { calcPrice } from '@/scripts/productScripts';
 
 const basketStore = useBasketStore()
 
@@ -84,7 +84,13 @@ function editQuantity(basketItem: BasketItemModel) {
         </td>
 
         <td>
-          <v-btn icon="mdi-delete" flat @click="removeFromBasket(basketItem)" color="red" variant="text"/>
+          <v-btn
+            icon="mdi-delete"
+            @click="removeFromBasket(basketItem)"
+            color="red"
+            variant="text"
+            flat
+          />
         </td>
       </tr>
     </tbody>

software/src/pages/preferencesPage/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Ref, ref } from 'vue';
 import pageSetup from './pageSetup.vue';
 import systemSetup from './systemSetup.vue';
 import alertBanner from '@/components/alertBanner.vue';

software/src/pages/preferencesPage/systemSetup.vue

@@ -5,9 +5,10 @@ import axios from 'axios';
 import cardView from '@/components/cardView.vue';
 import actionDialog from '@/components/actionDialog.vue';
 import { ref } from 'vue';
+import confirmDialog from '@/components/confirmDialog.vue';
 
 const feedbackStore = useFeedbackStore()
-const confirmDialog = ref(false)
+const showConfirmDialog = ref(false)
 
 function resetDb() {
   axios.get("http://127.0.0.1:3000/api/resetdatabase")
@@ -31,12 +32,22 @@ function resetSettings() {
     <v-container>
       <v-row>
         <v-col class="d-flex justify-center align-center">
-          <v-btn @click="confirmDialog = true" color="primary" prepend-icon="mdi-database-refresh">
+          <v-btn
+            @click="showConfirmDialog = true"
+            prepend-icon="mdi-database-refresh"
+            color="red"
+            variant="outlined"
+          >
             {{ $t('preferences.resetDatabase') }}
           </v-btn>
         </v-col>
         <v-col class="d-flex justify-center align-center">
-          <v-btn @click="resetDb" color="primary" prepend-icon="mdi-cog-counterclockwise">
+          <v-btn
+            @click="resetDb"
+            prepend-icon="mdi-cog-counterclockwise"
+            color="primary"
+            variant="outlined"
+          >
             {{ $t('preferences.resetPreferences') }}
           </v-btn>
         </v-col>
@@ -44,12 +55,9 @@ function resetSettings() {
     </v-container>
   </card-view>
 
-  <action-dialog :title="$t('preferences.resetConfirm')" v-model="confirmDialog" width="600">
-    <template #actions>
-      <v-btn variant="outlined" @click="resetDb" color="red">
-        {{ $t('preferences.resetDatabase') }}
-      </v-btn>
-    </template>
-
-  </action-dialog>
+  <confirm-dialog
+    :title="$t('dialog.resetConfirm.title')"
+    :description="$t('dialog.resetConfirm.description')"
+    v-model="showConfirmDialog"
+  />
 </template>