Files
pmomusic/pmoapp/webapp/src/stores/ui.ts

112 lines
2.6 KiB
TypeScript

// Store Pinia pour l'état UI global
import { defineStore } from 'pinia'
import { ref } from 'vue'
export interface Notification {
id: string
type: 'info' | 'success' | 'warning' | 'error'
message: string
duration?: number // ms, undefined = permanent
}
export const useUIStore = defineStore('ui', () => {
// État
const selectedRendererId = ref<string | null>(null)
const selectedServerId = ref<string | null>(null)
const showEventLog = ref(false)
const sseConnected = ref(false)
const notifications = ref<Notification[]>([])
// Actions
function selectRenderer(id: string | null) {
selectedRendererId.value = id
}
function selectServer(id: string | null) {
selectedServerId.value = id
}
function toggleEventLog() {
showEventLog.value = !showEventLog.value
}
function setSSEConnected(connected: boolean) {
sseConnected.value = connected
}
function addNotification(
type: Notification['type'],
message: string,
duration?: number
) {
const id = `notif-${Date.now()}-${Math.random()}`
const notification: Notification = {
id,
type,
message,
duration,
}
notifications.value.push(notification)
// Auto-remove après duration (défaut: 5s)
const timeout = duration !== undefined ? duration : 5000
if (timeout > 0) {
setTimeout(() => {
removeNotification(id)
}, timeout)
}
return id
}
function removeNotification(id: string) {
const index = notifications.value.findIndex(n => n.id === id)
if (index !== -1) {
notifications.value.splice(index, 1)
}
}
function clearNotifications() {
notifications.value = []
}
// Raccourcis pour les types de notifications
function notifySuccess(message: string, duration?: number) {
return addNotification('success', message, duration)
}
function notifyError(message: string, duration?: number) {
return addNotification('error', message, duration || 7000) // 7s pour erreurs
}
function notifyWarning(message: string, duration?: number) {
return addNotification('warning', message, duration)
}
function notifyInfo(message: string, duration?: number) {
return addNotification('info', message, duration)
}
return {
// État
selectedRendererId,
selectedServerId,
showEventLog,
sseConnected,
notifications,
// Actions
selectRenderer,
selectServer,
toggleEventLog,
setSSEConnected,
addNotification,
removeNotification,
clearNotifications,
notifySuccess,
notifyError,
notifyWarning,
notifyInfo,
}
})