Refactor feedback handling across components: Replace alert and confirm calls with centralized feedback functions for improved user experience. Update various components to utilize showError, showSuccess, and confirmAction for consistent messaging and confirmation dialogs. Enhance UI responsiveness and maintainability by streamlining feedback logic.

frontend/src/components/AppNavigation.vue

@@ -175,24 +175,11 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { createApp } from 'vue';
 import apiClient from '@/utils/axios.js';
 import { EventBus } from '@/utils/eventBus.js';
 
-import RandomChatDialog from '../dialogues/chat/RandomChatDialog.vue';
-import MultiChatDialog from '../dialogues/chat/MultiChatDialog.vue';
-
-// Wichtig: die zentrale Instanzen importieren
-import store from '@/store';
-import router from '@/router';
-import i18n from '@/i18n';
-
 export default {
   name: 'AppNavigation',
-  components: {
-    RandomChatDialog,
-    MultiChatDialog
-  },
   data() {
     return {
       forumList: [],
@@ -292,7 +279,8 @@ export default {
       this.pinnedSubKey = this.pinnedSubKey === key ? null : key;
     },
 
-    collapseMenus() {
+    collapseMenus(options = {}) {
+      const { blurActiveElement = true } = options;
       this.expandedMainKey = null;
       this.expandedSubKey = null;
       this.pinnedMainKey = null;
@@ -305,11 +293,13 @@ export default {
         this.suppressHover = false;
         this.hoverReleaseTimer = null;
       }, 180);
-      this.$nextTick(() => {
-        if (document.activeElement && typeof document.activeElement.blur === 'function') {
-          document.activeElement.blur();
-        }
-      });
+      if (blurActiveElement) {
+        this.$nextTick(() => {
+          if (document.activeElement && typeof document.activeElement.blur === 'function') {
+            document.activeElement.blur();
+          }
+        });
+      }
     },
 
     handleDocumentClick(event) {
@@ -317,7 +307,7 @@ export default {
       if (!root || root.contains(event.target)) {
         return;
       }
-      this.collapseMenus();
+      this.collapseMenus({ blurActiveElement: false });
     },
 
     handleDocumentKeydown(event) {
@@ -435,10 +425,21 @@ export default {
     },
 
     openChat(userId) {
-      console.log('openChat:', userId);
-      // Datei erstellen und ans body anhängen
-      const container = document.createElement('div');
-      document.body.appendChild(container);
+      const dialogRef = this.$root.$refs.multiChatDialog;
+      const friend = this.friendsList.find((entry) => entry.id === userId);
+      if (!dialogRef || typeof dialogRef.open !== 'function') {
+        this.openProfile(userId);
+        return;
+      }
+      dialogRef.open();
+      if (!friend?.username) {
+        return;
+      }
+      window.setTimeout(() => {
+        if (dialogRef.usersInRoom?.some((user) => user.name === friend.username)) {
+          dialogRef.selectedTargetUser = friend.username;
+        }
+      }, 250);
     },
 
     /**

frontend/src/components/falukant/DirectorInfo.vue

@@ -179,6 +179,7 @@
 <script>
 import apiClient from '@/utils/axios.js';
 import NewDirectorDialog from '@/dialogues/falukant/NewDirectorDialog.vue';
+import { showError, showInfo, showSuccess } from '@/utils/feedback.js';
 
 export default {
   name: "DirectorInfo",
@@ -307,11 +308,11 @@ export default {
     },
 
     fireDirector() {
-      alert(this.$t('falukant.branch.director.fireAlert'));
+      showInfo(this, this.$t('falukant.branch.director.fireAlert'));
     },
 
     teachDirector() {
-      alert(this.$t('falukant.branch.director.teachAlert'));
+      showInfo(this, this.$t('falukant.branch.director.teachAlert'));
     },
 
     vehicleTypeOptions() {
@@ -440,11 +441,11 @@ export default {
           cost: 0.1,
           costLabel: '',
         };
-        alert(this.$t('falukant.branch.director.emptyTransport.success'));
+        showSuccess(this, this.$t('falukant.branch.director.emptyTransport.success'));
         this.$emit('transportCreated');
       } catch (error) {
         console.error('Error creating empty transport:', error);
-        alert(this.$t('falukant.branch.director.emptyTransport.error'));
+        showError(this, this.$t('falukant.branch.director.emptyTransport.error'));
       }
     },
   },
@@ -575,4 +576,4 @@ export default {
 .transport-route > div {
   margin-bottom: 0.25rem;
 }
-</style>
+</style>

frontend/src/components/falukant/ProductionSection.vue

@@ -63,6 +63,7 @@
   
   <script>
   import apiClient from '@/utils/axios.js';
+  import { showApiError } from '@/utils/feedback.js';
   export default {
     name: "ProductionSection",
     props: { 
@@ -166,7 +167,7 @@
               });
               this.loadProductions();
             } catch (error) {
-              alert(this.$t(`falukant.branch.production.error${error.response.data.error}`));
+              showApiError(this, error, 'tr:error.network');
             }
           }
         }
@@ -205,4 +206,4 @@
     border: 1px solid #ddd;
   }
   </style>
-  
+  

frontend/src/components/falukant/SaleSection.vue

@@ -173,6 +173,7 @@
   
   <script>
   import apiClient from '@/utils/axios.js';
+  import { showError, showSuccess } from '@/utils/feedback.js';
   export default {
     name: "SaleSection",
     props: {
@@ -334,13 +335,13 @@
           quantity: quantityToSell,
           quality: item.quality,
         }).catch(() => {
-          alert(this.$t('falukant.branch.sale.sellError'));
+          showError(this, this.$t('falukant.branch.sale.sellError'));
         });
       },
       sellAll() {
         apiClient.post(`/api/falukant/sell/all`, { branchId: this.branchId })
         .catch(() => {
-          alert(this.$t('falukant.branch.sale.sellAllError'));
+          showError(this, this.$t('falukant.branch.sale.sellAllError'));
         });
       },
       inventoryOptions() {
@@ -502,11 +503,11 @@
           });
           await this.loadInventory();
           await this.loadTransports();
-          alert(this.$t('falukant.branch.sale.transportStarted'));
+          showSuccess(this, this.$t('falukant.branch.sale.transportStarted'));
           this.$emit('transportCreated');
         } catch (error) {
           console.error('Error creating transport:', error);
-          alert(this.$t('falukant.branch.sale.transportError'));
+          showError(this, this.$t('falukant.branch.sale.transportError'));
         }
       },
       async loadTransports() {
@@ -596,4 +597,4 @@
     font-style: italic;
   }
   </style>
-  
+  

frontend/src/components/falukant/StorageSection.vue

@@ -76,6 +76,7 @@
   
   <script>
   import apiClient from '@/utils/axios.js';
+  import { showError } from '@/utils/feedback.js';
   export default {
     name: "StorageSection",
     props: { branchId: { type: Number, required: true } },
@@ -164,12 +165,12 @@
             });
           } catch (err) {
             console.error(err);
-            alert('Error buying storage for one part of the order');
+            showError(this, 'Fehler beim Kaufen eines Teils der Lagerkapazität.');
           }
           remainingAmount -= toBuy;
         }
         if (remainingAmount > 0) {
-          alert(this.$t('falukant.branch.storage.notEnoughAvailable'));
+          showError(this, this.$t('falukant.branch.storage.notEnoughAvailable'));
         }
         this.loadStorageData();
       },
@@ -185,7 +186,7 @@
         .then(() => this.loadStorageData())
         .catch(err => {
           console.error(err);
-          alert('Error selling storage');
+          showError(this, 'Fehler beim Verkaufen der Lagerkapazität.');
         });
       },
       getCostOfType(labelTr) {
@@ -216,4 +217,4 @@
     border: 1px solid #ddd;
   }
   </style>
-  
+