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

software/src/App.vue

@@ -2,7 +2,7 @@
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from './data/stores/userStore';
 import { i18n } from './plugins/i18n';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import vuetify from './plugins/vuetify';
 import navigationItems from './components/navigationItems.vue';
 import { useProductStore } from './data/stores/productStore';
@@ -15,10 +15,14 @@ const theme = useTheme()
 const navRail = ref(vuetify.display.mobile)
 
 theme.global.name.value = userStore.theme
-i18n.global.locale = userStore.language
 
 productStore.fetchAllProducts()
 categoryStore.fetchAllCategories()
+
+// Global watcher
+watch(() => userStore.language, () => {
+  i18n.global.locale = userStore.language
+}, { immediate: true })
 </script>
 
 <template>

software/src/components/confirmDialog.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ModelRef } from 'vue';
+import actionDialog from './actionDialog.vue';
+
+const showDialog: ModelRef<boolean> = defineModel()
+
+const props = defineProps({
+  title: String,
+  description: String,
+  onConfirm: Function
+})
+
+function confirmPressed() {
+  props.onConfirm()
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <action-dialog 
+    :title="title"
+    max-width="400"
+    v-model="showDialog"
+  >
+    <v-container>
+      <v-row>
+        <v-col>
+          {{ description }}
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <template #actions>
+      <v-btn
+        @click="showDialog = false" 
+        color="green"
+        variant="outlined"
+      >
+        {{ $t("dialog.cancel") }}
+      </v-btn>
+
+      <v-btn
+        @click="confirmPressed"
+        color="red"
+        variant="outlined"
+      >
+        {{ $t("dialog.confirm") }}
+      </v-btn>
+    </template>
+  </action-dialog>
+</template>

software/src/data/models/accountModel.ts

@@ -10,4 +10,6 @@ export class AccountModel {
   lastName: string = ""
   createdAt: string = ""
   updatedAt: string = ""
+  bankName: string = ""
+  iban: string = ""
 }

software/src/locales/de.json

@@ -53,14 +53,18 @@
     "street": "Straße",
     "houseNumber": "Hausnummer",
     "postalCode": "Postleitzahl",
-    "city": "Stadt"
+    "city": "Stadt",
+    "bankName": "Name der Bank",
+    "iban": "IBAN"
   },
   "account": {
     "username": "Username",
     "password": "Passwort",
     "noAccountRegister": "Neuen Account erstellen!",
     "register": "Account erstellen",
-    "backToLogin": "Zurück zum Login"
+    "backToLogin": "Zurück zum Login",
+    "delete": "Account löschen",
+    "managingAccount": "Account verwalten"
   },
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",
@@ -86,5 +90,17 @@
   "oclock": "Uhr",
   "ordering": {
     "ordering": "Bestellabschluss"
+  },
+  "dialog": {
+    "cancel": "Abbrechen",
+    "confirm": "Bestätigen",
+    "deleteAccount": {
+      "title": "Account löschen?",
+      "description": "Soll der Account wirklich gelöscht werden? Dieser kann nicht mehr wiederhergestellt werden!"
+    },
+    "resetConfirm": {
+      "title": "Datenbank zurücksetzen?",
+      "description": "Soll die Datenbank des Servers wirklich zurückgesetzt werden? Dies kann nicht rückgänig gemacht werden!"
+    }
   }
 }

software/src/locales/en.json

@@ -53,14 +53,18 @@
     "street": "Street",
     "houseNumber": "House Number",
     "postalCode": "Postal Code",
-    "city": "City"
+    "city": "City",
+    "bankName": "Bank name",
+    "iban": "IBAN"
   },
   "account": {
     "backToLogin": "Back to Login",
     "username": "Username",
     "password": "Password",
     "noAccountRegister": "Create new Account!",
-    "register": "Create Account"
+    "register": "Create Account",
+    "delete": "Delete Account",
+    "managingAccount": "Managing Account"
   },
   "bannerMessages": {
     "loginSuccessful": "Login erfolgreich!",
@@ -86,5 +90,17 @@
   "oclock": "o'clock",
   "ordering": {
     "ordering": "Finish order"
+  },
+  "dialog": {
+    "cancel": "Cancel",
+    "confirm": "Bestätigen",
+    "deleteAccount": {
+      "title": "Delete account?",
+      "description": "Do you really want to delete the account? This can't be undone!"
+    },
+    "resetConfirm": {
+      "title": "Reset database?",
+      "description": "Do you really want to reset the server database? This can't be undone!"
+    }
   }
 }

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>

software/src/plugins/i18n.ts

@@ -5,7 +5,7 @@ import english from './../locales/en.json'
 type MessageSchema = typeof german
 
 export const i18n = createI18n<[MessageSchema], 'de' | 'en'>({
-  legacy: false,
+  legacy: true,
   locale: 'de',
   messages: {
     'de': german,