Add notification utility helpers and update PlatformServiceMixin

Created notification utility approaches to consolidate verbose $notify calls:
- Simple function utility (src/utils/notify.ts) - recommended approach
- Vue 3 composable (src/composables/useNotifications.ts)
- Utility class with mixin (src/utils/notificationUtils.ts)

Updated ClaimView.vue to demonstrate usage, reducing notification code by ~70%.
Enhanced PlatformServiceMixin with improved caching and database methods.
Updated ShareMyContactInfoView.vue with mixin improvements.
Provides consistent timeouts, standardized patterns, and type safety.
Ready for migration alongside mixin updates.
This commit is contained in:
Matthew Raymer
2025-07-05 11:37:20 +00:00
parent bbdb962d4d
commit 08c2113504
6 changed files with 683 additions and 188 deletions

View File

@@ -0,0 +1,140 @@
import { inject } from 'vue';
import { NotificationIface } from '../constants/app';
/**
* Vue 3 composable for notifications
* Provides a concise API for common notification patterns
*/
export const NOTIFICATION_TIMEOUTS = {
BRIEF: 1000, // Very brief toasts ("Sent..." messages)
SHORT: 2000, // Short notifications (clipboard copies, quick confirmations)
STANDARD: 3000, // Standard notifications (success messages, general info)
LONG: 5000, // Longer notifications (errors, warnings, important info)
VERY_LONG: 7000, // Very long notifications (complex operations)
MODAL: -1, // Modal confirmations (no auto-dismiss)
} as const;
export function useNotifications() {
// Inject the notify function from the app
const notify = inject<(notification: NotificationIface, timeout?: number) => void>('$notify');
if (!notify) {
throw new Error('useNotifications must be used within a component that has $notify available');
}
return {
// Direct access to the original notify function
notify,
// Success notifications
success: (text: string, timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
notify({
group: "alert",
type: "success",
title: "Success",
text,
}, timeout);
},
// Error notifications
error: (text: string, timeout = NOTIFICATION_TIMEOUTS.LONG) => {
notify({
group: "alert",
type: "danger",
title: "Error",
text,
}, timeout);
},
// Warning notifications
warning: (text: string, timeout = NOTIFICATION_TIMEOUTS.LONG) => {
notify({
group: "alert",
type: "warning",
title: "Warning",
text,
}, timeout);
},
// Info notifications
info: (text: string, timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
notify({
group: "alert",
type: "info",
title: "Info",
text,
}, timeout);
},
// Toast notifications (brief)
toast: (title: string, text?: string, timeout = NOTIFICATION_TIMEOUTS.BRIEF) => {
notify({
group: "alert",
type: "toast",
title,
text,
}, timeout);
},
// Clipboard copy notifications
copied: (item: string, timeout = NOTIFICATION_TIMEOUTS.SHORT) => {
notify({
group: "alert",
type: "toast",
title: "Copied",
text: `${item} was copied to the clipboard.`,
}, timeout);
},
// Sent brief notification
sent: (timeout = NOTIFICATION_TIMEOUTS.BRIEF) => {
notify({
group: "alert",
type: "toast",
title: "Sent...",
}, timeout);
},
// Confirmation modal
confirm: (text: string, onYes: () => Promise<void>, timeout = NOTIFICATION_TIMEOUTS.MODAL) => {
notify({
group: "modal",
type: "confirm",
title: "Confirm",
text,
onYes,
}, timeout);
},
// Standard confirmation messages
confirmationSubmitted: (timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
notify({
group: "alert",
type: "success",
title: "Success",
text: "Confirmation submitted.",
}, timeout);
},
// Common error patterns
genericError: (timeout = NOTIFICATION_TIMEOUTS.LONG) => {
notify({
group: "alert",
type: "danger",
title: "Error",
text: "Something went wrong.",
}, timeout);
},
// Common success patterns
genericSuccess: (timeout = NOTIFICATION_TIMEOUTS.STANDARD) => {
notify({
group: "alert",
type: "success",
title: "Success",
text: "Operation completed successfully.",
}, timeout);
},
};
}