fix(app): toon API-fout bij opnieuw toewijzen shift in snackbar

Made-with: Cursor

apps/app/src/components/shifts/AssignPersonDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAssignablePersons, useAssignPersonToShift } from '@/composables/api/useShiftAssignments'
+import { getApiErrorMessage } from '@/lib/apiErrors'
 import type { AssignablePerson } from '@/types/shiftAssignment'
 import type { Shift } from '@/types/section'
 
@@ -261,11 +262,11 @@ async function executeAssign(person: AssignablePerson) {
     successName.value = person.full_name
     showSuccess.value = true
   }
-  catch (error: any) {
+  catch (error: unknown) {
-    const message = error.response?.data?.errors?.person_id?.[0]
+    assignError.value = getApiErrorMessage(
-      ?? error.response?.data?.message
+      error,
-      ?? 'Er is een fout opgetreden bij het toewijzen.'
+      'Er is een fout opgetreden bij het toewijzen.',
-    assignError.value = message
+    )
   }
 }
 </script>

apps/app/src/components/shifts/ShiftDetailPanel.vue

@@ -8,6 +8,7 @@ import {
   useAssignPersonToShift,
 } from '@/composables/api/useShiftAssignments'
 import AssignPersonDialog from '@/components/shifts/AssignPersonDialog.vue'
+import { getApiErrorMessage } from '@/lib/apiErrors'
 import { useShiftDetailStore } from '@/stores/useShiftDetailStore'
 import { ShiftAssignmentStatus } from '@/types/shiftAssignment'
 import type { ShiftAssignment } from '@/types/shiftAssignment'
@@ -75,12 +76,13 @@ async function executeReassign(assignment: ShiftAssignment) {
       shiftId: assignment.shift_id,
       personId: assignment.person_id,
     })
-    successMessage.value = `${assignment.person?.full_name ?? 'Persoon'} opnieuw toegewezen`
+    flashFeedback(`${assignment.person?.full_name ?? 'Persoon'} opnieuw toegewezen`, 'success')
-    showSuccess.value = true
   }
-  catch {
+  catch (err: unknown) {
-    successMessage.value = 'Fout bij opnieuw toewijzen'
+    flashFeedback(
-    showSuccess.value = true
+      getApiErrorMessage(err, 'Fout bij opnieuw toewijzen'),
+      'error',
+    )
   }
   finally {
     reassigning.value = null
@@ -177,17 +179,25 @@ function onToggleSelectAll() {
   }
 }
 
-// Snackbar
+// Snackbar (success + server errors)
 const showSuccess = ref(false)
 const successMessage = ref('')
+const snackbarColor = ref<'success' | 'error'>('success')
+const snackbarTimeout = ref(3000)
+
+function flashFeedback(message: string, variant: 'success' | 'error' = 'success') {
+  successMessage.value = message
+  snackbarColor.value = variant
+  snackbarTimeout.value = variant === 'error' ? 12_000 : 3000
+  showSuccess.value = true
+}
 
 // --- Actions ---
 
 function onApprove(assignment: ShiftAssignment) {
   approveAssignment(assignment.id, {
     onSuccess: () => {
-      successMessage.value = `${assignment.person?.full_name ?? 'Toewijzing'} goedgekeurd`
+      flashFeedback(`${assignment.person?.full_name ?? 'Toewijzing'} goedgekeurd`, 'success')
-      showSuccess.value = true
     },
   })
 }
@@ -205,8 +215,7 @@ function onCancelExecute() {
     onSuccess: () => {
       isCancelDialogOpen.value = false
       cancellingAssignment.value = null
-      successMessage.value = `${name} geannuleerd`
+      flashFeedback(`${name} geannuleerd`, 'success')
-      showSuccess.value = true
     },
   })
 }
@@ -236,8 +245,7 @@ function onRejectExecute() {
         isRejectDialogOpen.value = false
         rejectingAssignment.value = null
         rejectReason.value = ''
-        successMessage.value = `${name} afgewezen`
+        flashFeedback(`${name} afgewezen`, 'success')
-        showSuccess.value = true
       },
     },
   )
@@ -260,8 +268,7 @@ function onBulkApproveExecute() {
   bulkApprove(store.selectedAssignmentIds, {
     onSuccess: () => {
       isBulkApproveDialogOpen.value = false
-      successMessage.value = `${store.selectedAssignmentIds.length} toewijzingen goedgekeurd`
+      flashFeedback(`${store.selectedAssignmentIds.length} toewijzingen goedgekeurd`, 'success')
-      showSuccess.value = true
       store.clearSelection()
     },
   })
@@ -271,8 +278,7 @@ function onBulkApproveExecute() {
 const isAssignDialogOpen = ref(false)
 
 function onPersonAssigned() {
-  successMessage.value = 'Persoon toegewezen'
+  flashFeedback('Persoon toegewezen', 'success')
-  showSuccess.value = true
 }
 
 // Fill rate color
@@ -911,11 +917,13 @@ function fillRateColor(): string {
       @assigned="onPersonAssigned"
     />
 
-    <!-- Success snackbar -->
+    <!-- Feedback snackbar (success + API errors) -->
     <VSnackbar
       v-model="showSuccess"
-      color="success"
+      :color="snackbarColor"
-      :timeout="3000"
+      :timeout="snackbarTimeout"
+      location="bottom end"
+      multi-line
     >
       {{ successMessage }}
     </VSnackbar>

apps/app/src/lib/apiErrors.ts

@@ -0,0 +1,26 @@
+import { isAxiosError } from 'axios'
+
+/**
+ * Human-readable message from Laravel API validation / exception responses.
+ */
+export function getApiErrorMessage(error: unknown, fallback: string): string {
+  if (!isAxiosError(error)) return fallback
+
+  const data = error.response?.data as Record<string, unknown> | undefined
+  if (!data) return fallback
+
+  const errors = data.errors
+  if (errors && typeof errors === 'object' && errors !== null && !Array.isArray(errors)) {
+    for (const value of Object.values(errors as Record<string, unknown>)) {
+      if (Array.isArray(value) && value.length > 0 && typeof value[0] === 'string')
+        return value[0]
+
+      if (typeof value === 'string') return value
+    }
+  }
+
+  const message = data.message
+  if (typeof message === 'string' && message.trim() !== '') return message
+
+  return fallback
+}