From 45380c276f861e602713c3708f1fb441f2b032ca Mon Sep 17 00:00:00 2001 From: benji-bitfly Date: Tue, 10 Sep 2024 13:36:26 +0200 Subject: [PATCH] feat: add NotificationsClientTable component with store and API integration - Created a new NotificationsClientsTable.vue component to display `notifications client` data. - Implemented a new useNotificationsClientsStore for handling the API calls related to `notifications client` data. - Updated `customFetch.ts` to include the new API endpoints and methods for fetching `notifications client` data. - Added translations for the `NotificationsClientsTable.vue` component in the en.json file. - Applied code styling updates in `notifications.vue` and added the ClientsTab to display the `NotificationsClientsTable.vue` component. See: BEDS-324 --- .../NotificationsClientsTable.vue | 189 ++++++++++++++++++ frontend/locales/en.json | 11 + frontend/pages/notifications.vue | 8 +- .../notifications/managementDashboard.json | 31 --- .../useNotificationsClientsStore.ts | 69 +++++++ frontend/types/customFetch.ts | 5 + 6 files changed, 281 insertions(+), 32 deletions(-) create mode 100644 frontend/components/notifications/NotificationsClientsTable.vue delete mode 100644 frontend/public/mock/notifications/managementDashboard.json create mode 100644 frontend/stores/notifications/useNotificationsClientsStore.ts diff --git a/frontend/components/notifications/NotificationsClientsTable.vue b/frontend/components/notifications/NotificationsClientsTable.vue new file mode 100644 index 000000000..470396516 --- /dev/null +++ b/frontend/components/notifications/NotificationsClientsTable.vue @@ -0,0 +1,189 @@ + + + + + diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 33f2e6705..302cfa091 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -561,6 +561,17 @@ "yes": "Yes" }, "notifications": { + "clients": { + "col": { + "client_name": "Client ", + "version": "Version" + }, + "footer":{ + "subscriptions": "Clients ({count} Subscriptions)" + }, + "search_placeholder":"Client", + "title": "Clients" + }, "col": { "dashboard": "Dashboard", "group": "Group", diff --git a/frontend/pages/notifications.vue b/frontend/pages/notifications.vue index 968b4fe73..5d591e793 100644 --- a/frontend/pages/notifications.vue +++ b/frontend/pages/notifications.vue @@ -97,7 +97,8 @@ const openManageNotifications = () => { /> { @open-dialog="openManageNotifications" /> + diff --git a/frontend/public/mock/notifications/managementDashboard.json b/frontend/public/mock/notifications/managementDashboard.json deleted file mode 100644 index eb0d14c72..000000000 --- a/frontend/public/mock/notifications/managementDashboard.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "paging": { - "total_count": 999 - }, - "data": [ - { - "group_id": 123, - "dashboard_id": 222, - "dashboard_name": "My test dashboard", - "dashboard_type": "validator", - "subscriptions": ["missed_attestation"], - "webhook": { - "url": "", - "via_discord": false - }, - "networks": [1] - }, - { - "group_id": 123, - "dashboard_id": 222, - "dashboard_name": "My account dashboard", - "dashboard_type": "account", - "subscriptions": ["missed_attestation", "proposed_attestation"], - "webhook": { - "url": "https://discord.com/some-webhook-link", - "via_discord": false - }, - "networks": [1, 10, 42161, 8453] - } - ] -} diff --git a/frontend/stores/notifications/useNotificationsClientsStore.ts b/frontend/stores/notifications/useNotificationsClientsStore.ts new file mode 100644 index 000000000..d5dbe9a9d --- /dev/null +++ b/frontend/stores/notifications/useNotificationsClientsStore.ts @@ -0,0 +1,69 @@ +import { defineStore } from 'pinia' +import type { InternalGetUserNotificationClientsResponse } from '~/types/api/notifications' +import { API_PATH } from '~/types/customFetch' +import type { TableQueryParams } from '~/types/datatable' + +const notificationsClientStore = defineStore('notifications-clients-store', () => { + const data = ref() + return { data } +}) + +export function useNotificationsClientStore() { + const { isLoggedIn } = useUserStore() + + const { fetch } = useCustomFetch() + const { data } = storeToRefs(notificationsClientStore()) + const { + cursor, isStoredQuery, onSort, pageSize, pendingQuery, query, setCursor, setPageSize, setSearch, setStoredQuery, + } = useTableQuery({ + limit: 10, sort: 'timestamp:desc', + }, 10) + const isLoading = ref(false) + + async function loadClientsNotifications(q: TableQueryParams) { + isLoading.value = true + setStoredQuery(q) + try { + const result = await fetch( + API_PATH.NOTIFICATIONS_CLIENTS, + undefined, + undefined, + q, + ) + + isLoading.value = false + if (!isStoredQuery(q)) { + return // in case some query params change while loading + } + + data.value = result + } + catch (e) { + data.value = undefined + isLoading.value = false + } + return data.value + } + + const clientsNotifications = computed(() => { + return data.value + }) + + watch(query, (q) => { + if (q) { + isLoggedIn.value && loadClientsNotifications(q) + } + }, { immediate: true }) + + return { + clientsNotifications, + cursor, + isLoading, + onSort, + pageSize, + query: pendingQuery, + setCursor, + setPageSize, + setSearch, + } +} diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts index dcc3ec474..18b2d3ea1 100644 --- a/frontend/types/customFetch.ts +++ b/frontend/types/customFetch.ts @@ -40,6 +40,7 @@ export enum API_PATH { LATEST_STATE = '/latestState', LOGIN = '/login', LOGOUT = '/logout', + NOTIFICATIONS_CLIENTS = '/notifications/clients', NOTIFICATIONS_DASHBOARDS = '/notifications/dashboards', NOTIFICATIONS_MACHINE = '/notifications/machines', NOTIFICATIONS_MANAGEMENT_GENERAL = '/notifications/managementGeneral', @@ -279,6 +280,10 @@ export const mapping: Record = { mock: false, path: '/logout', }, + [API_PATH.NOTIFICATIONS_CLIENTS]: { + method: 'GET', + path: '/users/me/notifications/clients', + }, [API_PATH.NOTIFICATIONS_DASHBOARDS]: { path: '/users/me/notifications/dashboards', },