diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue index 464b314..2ca7806 100644 --- a/ui/src/components/ui/NavBar.vue +++ b/ui/src/components/ui/NavBar.vue @@ -3,6 +3,7 @@ import { ref, watch, computed, onMounted } from 'vue' import { useRoute } from 'vue-router' import { useUi } from '@/stores/useUi' import { useRealtimeStore } from '@/stores/useRealtime' +import { moduleInfo } from '@/constants/moduleInfo' const ui = useUi() const realtime = useRealtimeStore() @@ -10,10 +11,10 @@ const realtime = useRealtimeStore() // enlaces de la app const links = [ { to: '/', label: 'Chat', icon: '💬' }, - { to: '/empleados', label: 'Empleados', icon: '👥' }, - { to: '/tareas', label: 'Tareas', icon: '📋' }, - { to: '/planillas', label: 'Planillas', icon: '📂' }, - { to: '/asistencias', label: 'Asistencias', icon: '⏰' }, + { to: '/empleados', label: 'Empleados', icon: moduleInfo.Cliente.icon }, + { to: '/tareas', label: 'Tareas', icon: moduleInfo.TareaRealizada.icon }, + { to: '/planillas', label: 'Planillas', icon: moduleInfo.Planilla.icon }, + { to: '/asistencias', label: 'Asistencias', icon: moduleInfo.Asistencia.icon }, { to: '/feed', label: 'Feed', icon: '📰' }, { to: '/config', label: 'Config', icon: '⚙️' }, ] diff --git a/ui/src/components/ui/SnackbarContainer.vue b/ui/src/components/ui/SnackbarContainer.vue index bbda834..be3b66c 100644 --- a/ui/src/components/ui/SnackbarContainer.vue +++ b/ui/src/components/ui/SnackbarContainer.vue @@ -6,7 +6,13 @@ :key="snack.id" :class="['snackbar-item', typeClass(snack.type)]" > - {{ snack.text }} +
+
+ {{ snack.icon }} + {{ snack.header }} +
+ {{ snack.text }} +
diff --git a/ui/src/constants/moduleInfo.js b/ui/src/constants/moduleInfo.js new file mode 100644 index 0000000..5d8aa30 --- /dev/null +++ b/ui/src/constants/moduleInfo.js @@ -0,0 +1,6 @@ +export const moduleInfo = { + Cliente: { label: 'Empleados', icon: '👥' }, + TareaRealizada: { label: 'Tareas', icon: '📋' }, + Planilla: { label: 'Planillas', icon: '📂' }, + Asistencia: { label: 'Asistencias', icon: '⏰' } +} diff --git a/ui/src/stores/useRealtime.js b/ui/src/stores/useRealtime.js index 6e8a312..9992412 100644 --- a/ui/src/stores/useRealtime.js +++ b/ui/src/stores/useRealtime.js @@ -4,6 +4,7 @@ import { useEmpleadosStore } from './useEmpleados' import { useTareasStore } from './useTareas' import { useAsistenciasStore } from './useAsistencias' import { useSnackbarStore } from './useSnackbar' +import { moduleInfo } from '@/constants/moduleInfo' export const useRealtimeStore = defineStore('realtime', { state: () => ({ @@ -61,7 +62,13 @@ export const useRealtimeStore = defineStore('realtime', { const message = `${payload.operation} ${payload.table}${idPart ? ' #' + idPart : ''}`; const type = payload.operation === 'DELETE' ? 'error' : payload.operation === 'INSERT' ? 'success' : 'info'; - snackbar.push({ text: message, type }); + const info = moduleInfo[payload.table] || {}; + snackbar.push({ + text: message, + type, + icon: info.icon, + header: info.label + }); // mark badge for module and operation if (this.badges[payload.table]) { diff --git a/ui/src/stores/useSnackbar.js b/ui/src/stores/useSnackbar.js index 0898b06..1689eb6 100644 --- a/ui/src/stores/useSnackbar.js +++ b/ui/src/stores/useSnackbar.js @@ -6,9 +6,9 @@ export const useSnackbarStore = defineStore('snackbar', { maxSnacks: 5 }), actions: { - push({ text, type = 'info', duration = 6000 }) { + push({ text, type = 'info', icon = '', header = '', duration = 6000 }) { const id = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2) - const snack = { id, text, type } + const snack = { id, text, type, icon, header } if (this.snacks.length >= this.maxSnacks) { this.snacks.shift() }