Фронтенд модуль нотификации

Ссылка на модуль https://modules.dev-webdevep.ru/noty-front-moduls/

Установка npm модуля

Для установки через npm, выполните команду:

npm i @webdevep/noty-modul-vue

Работа с модулем

import { doNoty } from "@webdevep/noty-modul-vue";

doNoty.success("Success message");
doNoty.error("Error message");
doNoty.warning("Warning message");
doNoty.info("Info message");

Использование модуля в компонентах:

<template>
  <button @click="$doNoty.success('Message');">Notify</button>
</template>

Получение уведомлений вебсокетов (vuex store)

// store/index.js
//...
import { getNotification } from "@webdevep/noty-modul-vue";

const store = createStore({
  modules: {
    notification: getNotification(notificationsApiUrl, notificationsWsUrl),
  },
});

// App.vue
//...
async function initMessages() {
  await store.dispatch("notification/init");
  await store.dispatch("notification/getUnreadMessagesCount");
};

initMessages();

Получение уведомлений вебсокетов (pinia)

// store/index.js
//...
import { getNotificationPinia } from "@webdevep/noty-modul-vue";
import { ref } from "vue";

export const useNotificationStore = defineStore("notification", getNotificationPinia({ apiUrl, notificationsUrl, vueRef: ref }));

// App.vue
//...
const notificationStore = useNotificationStore();
async function initMessages() {
  await notificationStore.init();
  await notificationStore.getUnreadMessagesCount();
};

initMessages();

Получение уведомлений вебсокетов (class)

// store/index.js
//...
import { NotificationModule } from "@webdevep/noty-modul-vue";

const notificationModule =  new NotificationModule(notificationsApiUrl, notificationsWsUrl);

// App.vue
//...
async function initMessages() {
  await notificationModule.init();
  await notificationModule.getUnreadMessagesCount();
};

initMessages();

Методы модуля

• constructor(apiUrl, notificationsUrl)
• async init() - Инициализация модуля
• async getUnreadMessagesCount(): number - Возвращает количество непрочитанных уведомлений
• async getInboxMessages({ outputMessages = true, unreadOnly = true, displayNotifications = true }): array - Обновляет список уведомлений и возвращает его
• outputMessages - если true полученные уведомления выводятся с помощью doNoty[message.sub], либо doNoty.info
• async markMessageRead(data) - Отмечает уведомление просмотренным

Свойства модуля

• notificationsUrl - string
• notificationApi - экземпляр NotificationApi
• ws - экземпляр WS
• unreadMessagesCount - number количество непрочитанных сообщений
• inboxMessages - array список сообщений, полученных с помощью метода getInboxMessages

класс NotificationApi

• constructor(apiUrl) - promise
• getUnreadMessagesCount(data) - promise
• getInboxMessages(data) - promise
• markMessageRead(data) - promise

класс WS

Класс наследует EventTarget

• constructor(wsUrl, accessToken) -
• connect(): promise - инициализация, работа с сокетом

События WS

Для обработки событий использовать методы EventTarget

• Сообщение с type === "inbox" - генерируется событие "notification:new_inbox_message"
• Сообщение с type === "msg" и прочими - генерируется событие (message.sub || message.type || "info")

doNoty

Всплывающее уведомление

Методы

• error(msg, onClickFunction)
• warning(msg, onClickFunction)
• success(msg, onClickFunction)
• info(msg, onClickFunction)