frontend/src/components/AppNotifications.vue - master - Codename-Nik/WebApp

frontend/src/components/AppNotifications.vue
80 строк2 KB
Nikolay Pokhodnya
first commit
03 ноя 2025, 19:47
03 ноя 2025, 19:47a9fbdee
<template>
  <div class="app-notifications">
    <v-snackbar
      v-for="notification in notifications"
      :key="notification.id"
      v-model="notification.visible"
      :timeout="notification.timeout"
      :color="getNotificationColor(notification.type)"
      location="top right"
      variant="flat"
    >
      <div class="d-flex align-center">
        <v-icon :icon="getNotificationIcon(notification.type)" class="mr-3"></v-icon>
        <div>
          <div class="font-weight-bold">{{ notification.title }}</div>
          <div>{{ notification.message }}</div>
        </div>
      </div>

      <template v-slot:actions>
        <v-btn
          icon
          variant="text"
          @click="removeNotification(notification.id)"
        >
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useNotificationsStore } from '@/stores/notifications'
import type { Notification } from '@/stores/notifications'

const notificationsStore = useNotificationsStore()

const notifications = computed(() => 
  notificationsStore.notifications.map(notification => ({
    ...notification,
    visible: true
  }))
)

const getNotificationColor = (type: string) => {
  const colors: { [key: string]: string } = {
    success: 'success',
    error: 'error',
    warning: 'warning',
    info: 'info'
  }
  return colors[type] || 'info'
}

const getNotificationIcon = (type: string) => {
  const icons: { [key: string]: string } = {
    success: 'mdi-check-circle',
    error: 'mdi-alert-circle',
    warning: 'mdi-alert',
    info: 'mdi-information'
  }
  return icons[type] || 'mdi-information'
}

const removeNotification = (id: number) => {
  notificationsStore.removeNotification(id)
}
</script>

<style scoped>
.app-notifications {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1000;
  max-width: 400px;
}
</style>