From 9802339199ed840e326a2e89f90bce6a8d513e82 Mon Sep 17 00:00:00 2001
From: Alexander Maushammer <alexander.maushammer@bitfly.at>
Date: Wed, 7 Aug 2024 14:03:32 +0200
Subject: [PATCH 1/5] feat(notifications): implement notifications table, use
 backend types for dashboard table

---
 frontend/components/bc/table/TablePager.vue   |   1 +
 .../notifications/DashboardsTable.vue         |  88 +++++------
 .../NotificationsNetworkTable.vue             | 148 ++++++++++++++++++
 frontend/i18n/en.json                         |  13 +-
 frontend/pages/notifications.vue              |   2 +-
 .../public/mock/notifications/dashboards.json |  55 -------
 .../useNotificationsDashboardStore.ts         |  30 ++--
 .../useNotificationsNetworkStore.ts           |  59 +++++++
 frontend/types/customFetch.ts                 |   7 +-
 frontend/types/notifications/dashboards.ts    |  18 ---
 10 files changed, 285 insertions(+), 136 deletions(-)
 create mode 100644 frontend/components/notifications/NotificationsNetworkTable.vue
 delete mode 100644 frontend/public/mock/notifications/dashboards.json
 create mode 100644 frontend/stores/notifications/useNotificationsNetworkStore.ts
 delete mode 100644 frontend/types/notifications/dashboards.ts

diff --git a/frontend/components/bc/table/TablePager.vue b/frontend/components/bc/table/TablePager.vue
index 7d98c5239..25d9bacac 100644
--- a/frontend/components/bc/table/TablePager.vue
+++ b/frontend/components/bc/table/TablePager.vue
@@ -149,6 +149,7 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
     position: absolute;
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     width: 100%;
     .left-info {
       margin-right: auto;
diff --git a/frontend/components/notifications/DashboardsTable.vue b/frontend/components/notifications/DashboardsTable.vue
index 02fddf133..eaa5af29c 100644
--- a/frontend/components/notifications/DashboardsTable.vue
+++ b/frontend/components/notifications/DashboardsTable.vue
@@ -6,7 +6,8 @@ import {
 import IconValidator from '../icon/IconValidator.vue'
 import IconAccount from '../icon/IconAccount.vue'
 import type { Cursor } from '~/types/datatable'
-import { getGroupLabel } from '~/utils/dashboard/group'
+import type { DashboardType } from '~/types/dashboard'
+import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 
 defineEmits<{(e: 'openDialog'): void }>()
 
@@ -14,9 +15,13 @@ const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
 
-const { onSort, setCursor, setPageSize, setSearch, notificationsDashboards, query, isLoading } = useNotificationsDashboardStore()
+// TODO: replace currentNetwork with selection from NETWORK_SWITCHER_COMPONENT that has yet to be implemented
+const { currentNetwork } = useNetworkStore()
+const networkId = ref<number>(currentNetwork.value ?? 1)
 
-const { groups } = useValidatorDashboardGroups()
+const { onSort, setCursor, setPageSize, setSearch, notificationsDashboards, query, isLoading } = useNotificationsDashboardStore(networkId)
+
+const { getDashboardLabel } = useUserDashboardStore()
 
 const { width } = useWindowSize()
 const colsVisible = computed(() => {
@@ -27,27 +32,13 @@ const colsVisible = computed(() => {
   }
 })
 
-const groupNameLabel = (groupId?: number) => {
-  return getGroupLabel($t, groupId, groups.value, 'Σ')
-}
-
 const openDialog = () => {
   // TODO: implement dialog
   alert('not implemented yet 😪')
 }
 
-const notificationsDashboardsWithUniqueIdentifier = computed(() => {
-  if (!notificationsDashboards.value) {
-    return
-  }
-  return {
-    paging: notificationsDashboards.value.paging,
-    // TODO: set unique identifier after backend is ready
-    data: notificationsDashboards.value.data
-      .map((item, index) => ({ ...item, identifier: index }))
-      // .filter(() => false) // comment in to test empty table
-  }
-})
+const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'account' : 'validator'
+
 </script>
 
 <template>
@@ -63,8 +54,8 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
       <template #table>
         <ClientOnly fallback-tag="span">
           <BcTable
-            :data="notificationsDashboardsWithUniqueIdentifier"
-            data-key="dashboardId"
+            :data="notificationsDashboards"
+            data-key="notification_id"
             :expandable="!colsVisible.notifications"
             :cursor="cursor"
             :page-size="pageSize"
@@ -75,19 +66,19 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
             @set-page-size="setPageSize"
           >
             <Column
-              field="network"
+              field="chain_id"
               sortable
               header-class="col-header-network"
               body-class="col-network"
             >
               <template #body="slotProps">
                 <div class="icon-wrapper">
-                  <IconNetwork colored :chain-id="slotProps.data.dashboardNetwork" class="icon-network" />
+                  <IconNetwork colored :chain-id="slotProps.data.chain_id" class="icon-network" />
                 </div>
               </template>
             </Column>
             <Column
-              field="age"
+              field="timestamp"
               sortable
               header-class="col-age"
               body-class="col-age"
@@ -101,7 +92,7 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
             </Column>
             <Column
               v-if="colsVisible.dashboard"
-              field="dashboard"
+              field="dashboard_id"
               :sortable="true"
               header-class="col-dashboard"
               body-class="col-dashboard"
@@ -109,46 +100,45 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
             >
               <template #body="slotProps">
                 <NotificationsDashboardsTableItemDashboard
-                  :type="slotProps.data.entity.type"
-                  :dashboard-id="slotProps.data.dashboardId"
-                  :dashboard-name="slotProps.data.dashboardName"
+                  :type="getDashboardType(slotProps.data.is_account_dashboard)"
+                  :dashboard-id="slotProps.data.dashboard_id"
+                  :dashboard-name="getDashboardLabel(`${slotProps.data.dashboard_id}`, getDashboardType(slotProps.data.is_account_dashboard))"
                 />
               </template>
             </Column>
             <Column
               v-if="colsVisible.groups"
-              field="group_id"
+              field="group_name"
               body-class="col-group"
               header-class="col-group"
               :header="$t('notifications.col.group')"
             >
               <template #body="slotProps">
                 <span>
-                  {{ groupNameLabel(slotProps.data.group_id) }}
+                  {{ slotProps.data.group_name }}
                 </span>
               </template>
             </Column>
             <Column
-              field="entity"
-              sortable
+              field="entity_count"
               header-class="col-entity"
               body-class="col-entity"
               :header="$t('notifications.dashboards.col.entity')"
             >
               <template #body="slotProps">
                 <div class="entity">
-                  <template v-if="slotProps.data.entity.type === 'validator'">
+                  <template v-if="!slotProps.data.is_account_dashboard">
                     <IconValidator class="icon-dashboard-type" />
-                    {{ slotProps.data.entity.count }}
+                    {{ slotProps.data.entity_count }}
                     <span>
-                      {{ $t('notifications.dashboards.entity.validators', slotProps.data.entity.count) }}
+                      {{ $t('notifications.dashboards.entity.validators', slotProps.data.entity_count) }}
                     </span>
                   </template>
-                  <template v-if="slotProps.data.entity.type === 'account'">
+                  <template v-else>
                     <IconAccount class="icon-dashboard-type" />
-                    {{ slotProps.data.entity.count }}
+                    {{ slotProps.data.entity_count }}
                     <span>
-                      {{ $t('notifications.dashboards.entity.accounts', slotProps.data.entity.count) }}
+                      {{ $t('notifications.dashboards.entity.accounts', slotProps.data.entity_count) }}
                     </span>
                   </template>
                   <FontAwesomeIcon
@@ -163,12 +153,12 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
             <Column
               v-if="colsVisible.notifications"
               field="notification"
-              body-class="notification"
-              header-class="notification"
+              body-class="col-notification"
+              header-class="col-notification"
               :header="$t('notifications.dashboards.col.notification')"
             >
               <template #body="slotProps">
-                {{ slotProps.data.notification.join(', ') }}
+                {{ slotProps.data.event_types.join(', ') }}
               </template>
             </Column>
             <template #expansion="slotProps">
@@ -177,27 +167,27 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
                   {{ $t('notifications.dashboards.expansion.label-dashboard') }}
                 </div>
                 <NotificationsDashboardsTableItemDashboard
-                  :type="slotProps.data.entity.type"
-                  :dashboard-id="slotProps.data.dashboardId"
-                  :dashboard-name="slotProps.data.dashboardName"
+                  :type="getDashboardType(slotProps.data.is_account_dashboard)"
+                  :dashboard-id="slotProps.data.dashboard_id"
+                  :dashboard-name="getDashboardLabel(`${slotProps.data.dashboard_id}`, getDashboardType(slotProps.data.is_account_dashboard))"
                 />
                 <div class="label-group">
                   {{ $t('notifications.dashboards.expansion.label-group') }}
                 </div>
                 <div class="group">
-                  {{ groupNameLabel(slotProps.data.group_id) }}
+                  {{ slotProps.data.group_name }}
                 </div>
                 <div class="label-notification">
                   {{ $t('notifications.dashboards.expansion.label-notification') }}
                 </div>
                 <div class="notification">
-                  {{ slotProps.data.notification.join(', ') }}
+                  {{ slotProps.data.event_types.join(', ') }}
                 </div>
               </div>
             </template>
             <template #empty>
               <NotificationsDashboardsTableEmpty
-                v-if="!notificationsDashboardsWithUniqueIdentifier?.data.length"
+                v-if="!notificationsDashboards?.data.length"
                 @open-dialog="$emit('openDialog')"
               />
             </template>
@@ -274,6 +264,10 @@ $breakpoint-lg: 1024px;
     @include utils.truncate-text;
   }
 }
+:deep(.col-notification) {
+  @include utils.set-all-width(240px);
+  @include utils.truncate-text;
+}
 
 :deep(.bc-table-header) {
   .h1 {
diff --git a/frontend/components/notifications/NotificationsNetworkTable.vue b/frontend/components/notifications/NotificationsNetworkTable.vue
new file mode 100644
index 000000000..7ada51b6b
--- /dev/null
+++ b/frontend/components/notifications/NotificationsNetworkTable.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { Cursor } from '~/types/datatable'
+
+defineEmits<{(e: 'openDialog'): void }>()
+
+const { width } = useWindowSize()
+const cursor = ref<Cursor>()
+const pageSize = ref<number>(10)
+const { t: $t } = useTranslation()
+
+const { onSort, setCursor, setPageSize, setSearch, networkNotifications, query, isLoading } = useNotificationsNetworkStore()
+
+</script>
+
+<template>
+  <div>
+    <BcTableControl
+      :title="$t('notifications.dashboards.title')"
+      :search-placeholder="$t('notifications.dashboards.search_placeholder')"
+      @set-search="setSearch"
+    >
+      <template #table>
+        <ClientOnly fallback-tag="span">
+          <BcTable
+            :data="networkNotifications"
+            data-key="notification_id"
+            :cursor="cursor"
+            :page-size="pageSize"
+            :selected-sort="query?.sort"
+            :loading="isLoading"
+            :add-spacer="true"
+            @set-cursor="setCursor"
+            @sort="onSort"
+            @set-page-size="setPageSize"
+          >
+            <Column
+              field="chain_id"
+              header-class="col-header-network"
+              body-class="col-network"
+            >
+              <template #body="slotProps">
+                <div class="icon-wrapper">
+                  <IconNetwork colored :chain-id="slotProps.data.chain_id" class="icon-network" />
+                </div>
+              </template>
+            </Column>
+            <Column
+              field="timestamp"
+              sortable
+              header-class="col-age"
+              body-class="col-age"
+            >
+              <template #header>
+                <BcTableAgeHeader />
+              </template>
+              <template #body="slotProps">
+                <BcFormatTimePassed :value="slotProps.data.timestamp" type="go-timestamp" />
+              </template>
+            </Column>
+            <Column
+              field="event_type"
+              :sortable="true"
+              header-class="col-event_type"
+              body-class="col-event_type"
+              :header="$t('notifications.col.notification')"
+            >
+              <template #body="slotProps">
+                <I18nT 
+                  :keypath="`notifications.network.event_type.${slotProps.data.event_type}`"
+                  scope="global"
+                  tag="span"
+                >
+                  <template #_link>
+                    <BcFormatValue v-if="slotProps.data.event_type.includes('gas')" :value="slotProps.data.alert_value" />
+                    <BcFormatPercent v-else :percent="Number(slotProps.data.alert_value) * 100" />
+                  </template>
+                </I18nT>
+              </template>
+            </Column>
+            <template #empty>
+              <NotificationsDashboardsTableEmpty
+                v-if="!networkNotifications?.data.length"
+                @open-dialog="$emit('openDialog')"
+              />
+            </template>
+            <!-- TODO: implement number of subscriptions -->
+            <template #bc-table-footer-right>
+              <template v-if="width > 1024">
+                {{ $t('notifications.network.footer.subscriptions', { count: 1}) }}
+              </template>
+            </template>
+          </BcTable>
+        </ClientOnly>
+      </template>
+    </BcTableControl>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "~/assets/css/utils.scss";
+
+$breakpoint-sm: 640px;
+$breakpoint-lg: 1024px;
+
+:deep(.col-header-network .p-column-header-content){
+  justify-content: center;
+}
+:deep(.col-header-network) {
+  @include utils.set-all-width(35px);
+  padding-left: 0px !important;
+}
+:deep(.col-network) {
+  @include utils.set-all-width(35px);
+  padding-inline: 0px !important;
+}
+:deep(.col-age) {
+  @media (max-width: $breakpoint-lg) {
+    @include utils.set-all-width(140px);
+  }
+  @media (max-width: $breakpoint-sm) {
+    @include utils.set-all-width(78px);
+  }
+  *:not([data-pc-section="sort"]) {
+    @include utils.truncate-text;
+  }
+}
+:deep(.col-event_type) {
+  @include utils.truncate-text;
+  @media (max-width: $breakpoint-lg) {
+    @include utils.set-all-width(400px);
+  }
+  @media (max-width: $breakpoint-sm) {
+    @include utils.set-all-width(200px); 
+  }
+}
+
+.icon-wrapper {
+  text-align: center;
+
+  .icon-network {
+    height: 14px;
+    width: 14px;
+  }
+}
+svg {
+  flex-shrink: 0;
+}
+</style>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 1b5f7b615..184faa6ff 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -310,6 +310,16 @@
       "rocketpool": "Rocket Pool",
       "network": "Network"
     },
+    "network": {
+      "event_type": {
+        "gas_above_threshold": "Gas price > {_value}",
+        "gas_below_threshold": "Gas price < {_value}",
+        "participation_rate_threshold": "Participation rate < {_value}"
+      },
+      "footer": {
+        "subscriptions": "Network ({count} Subscription) |Validators ({count} Subscriptions)"
+      }
+    },
     "subscriptions": {
       "dialog_title": "Edit Subscriptions",
       "validators" : {
@@ -408,7 +418,8 @@
       "group": "Group",
       "subscriptions": "Subscriptions",
       "webhook": "Webhook",
-      "networks": "Networks"
+      "networks": "Networks",
+      "notification": "Notification"
     },
     "general": {
       "do_not_disturb": "Do not disturb",
diff --git a/frontend/pages/notifications.vue b/frontend/pages/notifications.vue
index fa43c39fb..c97e58631 100644
--- a/frontend/pages/notifications.vue
+++ b/frontend/pages/notifications.vue
@@ -114,7 +114,7 @@ const openManageNotifications = () => {
           <template #header>
             <BcTabHeader :header="$t('notifications.tabs.network')" :icon="faNetworkWired" />
           </template>
-          Network coming soon!
+          <NotificationsNetworkTable />
         </TabPanel>
       </TabView>
     </BcPageWrapper>
diff --git a/frontend/public/mock/notifications/dashboards.json b/frontend/public/mock/notifications/dashboards.json
deleted file mode 100644
index 0340b37ae..000000000
--- a/frontend/public/mock/notifications/dashboards.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "paging": {
-    "total_count": 999
-  },
-  "data": [
-    {
-      "group_id": 99,
-      "timestamp": 1719924306,
-      "dashboardId": 23,
-      "dashboardName": "foo",
-      "dashboardNetwork": 1,
-      "entity": {
-        "type": "validator",
-        "count": 134
-      },
-      "notification": [
-        "Proposal missed",
-        "Back online",
-        "Foo Bar"
-      ]
-    },
-    {
-      "group_id": 122,
-      "timestamp": 1719924306,
-      "dashboardId": 234,
-      "dashboardName": "Puppy Chocolate",
-      "dashboardNetwork": 100,
-      "entity": {
-        "type": "account",
-        "count": 1
-      },
-      "notification": [
-        "Proposal missed",
-        "Back online",
-        "Foo Bar"
-      ]
-    },
-    {
-      "group_id": 1,
-      "timestamp": 1719926306,
-      "dashboardName": "This is a very long name",
-      "dashboardNetwork": 10200,
-      "dashboardId": 43,
-      "entity": {
-        "type": "validator",
-        "count": 134
-      },
-      "notification": [
-        "Proposal missed",
-        "Back online",
-        "Foo Bar"
-      ]
-    }
-  ]
-}
diff --git a/frontend/stores/notifications/useNotificationsDashboardStore.ts b/frontend/stores/notifications/useNotificationsDashboardStore.ts
index 9188fdcad..746b81a8a 100644
--- a/frontend/stores/notifications/useNotificationsDashboardStore.ts
+++ b/frontend/stores/notifications/useNotificationsDashboardStore.ts
@@ -1,32 +1,38 @@
 import { defineStore } from 'pinia'
+import type { InternalGetUserNotificationDashboardsResponse } from '~/types/api/notifications'
 import { API_PATH } from '~/types/customFetch'
 import type { TableQueryParams } from '~/types/datatable'
-import type { NotifcationDashboardResponse } from '~/types/notifications/dashboards'
 
 const notificationsDashboardStore = defineStore('notifications-dashboard-store', () => {
-  const data = ref<NotifcationDashboardResponse | undefined>()
+  const data = ref<InternalGetUserNotificationDashboardsResponse | undefined>()
   return { data }
 })
 
-export function useNotificationsDashboardStore () {
+export function useNotificationsDashboardStore (networkId: globalThis.Ref<number>) {
   const { isLoggedIn } = useUserStore()
 
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(notificationsDashboardStore())
-  const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'dashboard:desc' }, 10)
+  const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'timestamp:desc' }, 10)
   const isLoading = ref(false)
 
   async function loadNotificationsDashboards (q: TableQueryParams) {
     isLoading.value = true
     setStoredQuery(q)
-    const result = await fetch<NotifcationDashboardResponse>(API_PATH.NOTIFICATIONS_DASHBOARDS, undefined, undefined, q)
-
-    isLoading.value = false
-    if (!isStoredQuery(q)) {
-      return // in case some query params change while loading
+    try{
+      const result = await fetch<InternalGetUserNotificationDashboardsResponse>(API_PATH.NOTIFICATIONS_DASHBOARDS, { query: { network: networkId.value }}, 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
     }
-
-    data.value = result
     return data.value
   }
 
@@ -34,7 +40,7 @@ export function useNotificationsDashboardStore () {
     return data.value
   })
 
-  watch(query, (q) => {
+  watch([query, networkId], ([q]) => {
     if (q) {
       isLoggedIn.value && loadNotificationsDashboards(q)
     }
diff --git a/frontend/stores/notifications/useNotificationsNetworkStore.ts b/frontend/stores/notifications/useNotificationsNetworkStore.ts
new file mode 100644
index 000000000..cbbbbd6bd
--- /dev/null
+++ b/frontend/stores/notifications/useNotificationsNetworkStore.ts
@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia'
+import type { InternalGetUserNotificationNetworksResponse } from '~/types/api/notifications'
+import { API_PATH } from '~/types/customFetch'
+import type { TableQueryParams } from '~/types/datatable'
+
+const notificationsNetworkStore = defineStore('notifications-network-store', () => {
+  const data = ref<InternalGetUserNotificationNetworksResponse | undefined>()
+  return { data }
+})
+
+export function useNotificationsNetworkStore () {
+  const { isLoggedIn } = useUserStore()
+
+  const { fetch } = useCustomFetch()
+  const { data } = storeToRefs(notificationsNetworkStore())
+  const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'timestamp:desc' }, 10)
+  const isLoading = ref(false)
+
+  async function loadNetworkNotifications (q: TableQueryParams) {
+    isLoading.value = true
+    setStoredQuery(q)
+    try{
+      const result = await fetch<InternalGetUserNotificationNetworksResponse>(API_PATH.NOTIFICATIONS_NETWORK, 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 networkNotifications = computed(() => {
+    return data.value
+  })
+
+  watch(query, (q) => {
+    if (q) {
+      isLoggedIn.value && loadNetworkNotifications(q)
+    }
+  }, { immediate: true })
+
+  return {
+    cursor,
+    networkNotifications,
+    isLoading,
+    onSort,
+    pageSize,
+    query: pendingQuery,
+    setCursor,
+    setPageSize,
+    setSearch
+  }
+}
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index ffc913f7e..71bff1ffa 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -41,6 +41,7 @@ export enum API_PATH {
   NOTIFICATIONS_TEST_EMAIL = '/notifications/test_email',
   LATEST_STATE = '/latestState',
   NOTIFICATIONS_DASHBOARDS='/notifications/dashboards',
+  NOTIFICATIONS_NETWORK='/notifications/networks',
   REGISTER = '/register',
   LOGIN = '/login',
   LOGOUT = '/logout',
@@ -265,8 +266,10 @@ export const mapping: Record<string, MappingData> = {
     mock: false
   },
   [API_PATH.NOTIFICATIONS_DASHBOARDS]: {
-    path: '/notifications/dashboards',
-    mock: true
+    path: '/users/me/notifications/dashboards',
+  },
+  [API_PATH.NOTIFICATIONS_NETWORK]: {
+    path: '/users/me/notifications/networks',
   },
   [API_PATH.LATEST_STATE]: {
     path: '/latest-state',
diff --git a/frontend/types/notifications/dashboards.ts b/frontend/types/notifications/dashboards.ts
deleted file mode 100644
index b7b9445cb..000000000
--- a/frontend/types/notifications/dashboards.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { DashboardType } from '~/types/dashboard'
-import type { ApiPagingResponse } from '~/types/api/common'
-
-// TODO: when backend ready replace with generated types
-export type NotifcationDashboardRow = {
-  timestamp: number,
-  dashboardId: number,
-  dashboardName: string,
-  dashboardNetwork: number,
-  group_id: number,
-  entity: {
-    type: DashboardType,
-    count: number
-  },
-  nofitication: string[],
-}
-
-export type NotifcationDashboardResponse = ApiPagingResponse<NotifcationDashboardRow>;

From 8c40512f67bdc83b4f4d3bb526d45a6449c8b5a9 Mon Sep 17 00:00:00 2001
From: Alexander Maushammer <alexander.maushammer@bitfly.at>
Date: Wed, 7 Aug 2024 14:10:25 +0200
Subject: [PATCH 2/5] use 'correct' types in translations

---
 frontend/i18n/en.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 184faa6ff..e974b9286 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -312,9 +312,9 @@
     },
     "network": {
       "event_type": {
-        "gas_above_threshold": "Gas price > {_value}",
-        "gas_below_threshold": "Gas price < {_value}",
-        "participation_rate_threshold": "Participation rate < {_value}"
+        "gas_above": "Gas price > {_value}",
+        "gas_below": "Gas price < {_value}",
+        "participation_rate": "Participation rate < {_value}"
       },
       "footer": {
         "subscriptions": "Network ({count} Subscription) |Validators ({count} Subscriptions)"

From 539b35852233898fc4ff456a831b40f3c90f1feb Mon Sep 17 00:00:00 2001
From: Alexander Maushammer <alexander.maushammer@bitfly.at>
Date: Mon, 12 Aug 2024 10:16:39 +0200
Subject: [PATCH 3/5] post merge fix

---
 frontend/types/customFetch.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index 6c5cebe01..c4db63a30 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -41,11 +41,11 @@ export enum API_PATH {
   LOGOUT = '/logout',
   NOTIFICATIONS_DASHBOARDS = '/notifications/dashboards',
   NOTIFICATIONS_MANAGEMENT_GENERAL = '/notifications/managementGeneral',
+  NOTIFICATIONS_NETWORK = '/notifications/networks',
   NOTIFICATIONS_TEST_EMAIL = '/notifications/test_email',
   NOTIFICATIONS_TEST_PUSH = '/notifications/test_push',
   NOTIFICATIONS_TEST_WEBHOOK = '/users/me/notifications/test-webhook',
   PRODUCT_SUMMARY = '/productSummary',
-  NOTIFICATIONS_NETWORK = '/notifications/networks',
   REGISTER = '/register',
   SAVE_DASHBOARDS_SETTINGS = '/settings-dashboards',
   SEARCH = '/search',
@@ -271,11 +271,17 @@ export const mapping: Record<string, MappingData> = {
     mock: false,
     path: '/logout',
   },
+  [API_PATH.NOTIFICATIONS_DASHBOARDS]: {
+    path: '/users/me/notifications/dashboards',
+  },
   [API_PATH.NOTIFICATIONS_MANAGEMENT_GENERAL]: {
     mock: true,
     mockFunction: mockManageNotificationsGeneral,
     path: '/users/me/notifications/settings/general',
   },
+  [API_PATH.NOTIFICATIONS_NETWORK]: {
+    path: '/users/me/notifications/networks',
+  },
   [API_PATH.NOTIFICATIONS_TEST_EMAIL]: {
     method: 'POST',
     mock: true,
@@ -295,12 +301,6 @@ export const mapping: Record<string, MappingData> = {
     mock: false,
     path: '/product-summary',
   },
-  [API_PATH.NOTIFICATIONS_DASHBOARDS]: {
-    path: '/users/me/notifications/dashboards',
-  },
-  [API_PATH.NOTIFICATIONS_NETWORK]: {
-    path: '/users/me/notifications/networks',
-  },
   [API_PATH.REGISTER]: {
     method: 'POST',
     mock: true,

From 64734f332598c1e7384a6fda93248acfd6e414e7 Mon Sep 17 00:00:00 2001
From: Alexander Maushammer <alexander.maushammer@bitfly.at>
Date: Mon, 12 Aug 2024 10:26:41 +0200
Subject: [PATCH 4/5] adapted according to code review

---
 frontend/components/notifications/DashboardsTable.vue     | 3 ++-
 frontend/i18n/en.json                                     | 2 +-
 .../notifications/useNotificationsDashboardStore.ts       | 6 ++++--
 .../stores/notifications/useNotificationsNetworkStore.ts  | 8 ++++++--
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/components/notifications/DashboardsTable.vue b/frontend/components/notifications/DashboardsTable.vue
index f0fad27aa..661402741 100644
--- a/frontend/components/notifications/DashboardsTable.vue
+++ b/frontend/components/notifications/DashboardsTable.vue
@@ -6,6 +6,7 @@ import IconAccount from '../icon/IconAccount.vue'
 import type { Cursor } from '~/types/datatable'
 import type { DashboardType } from '~/types/dashboard'
 import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
+import type { ChainIDs } from '~/types/network'
 
 defineEmits<{ (e: 'openDialog'): void }>()
 
@@ -15,7 +16,7 @@ const { t: $t } = useTranslation()
 
 // TODO: replace currentNetwork with selection from NETWORK_SWITCHER_COMPONENT that has yet to be implemented
 const { currentNetwork } = useNetworkStore()
-const networkId = ref<number>(currentNetwork.value ?? 1)
+const networkId = ref<ChainIDs>(currentNetwork.value ?? 1)
 
 const {
   isLoading,
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 5980161a8..4d59197af 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -317,7 +317,7 @@
         "participation_rate": "Participation rate < {_value}"
       },
       "footer": {
-        "subscriptions": "Network ({count} Subscription) |Validators ({count} Subscriptions)"
+        "subscriptions": "Network ({count} Subscription) | Validators ({count} Subscriptions)"
       }
     },
     "subscriptions": {
diff --git a/frontend/stores/notifications/useNotificationsDashboardStore.ts b/frontend/stores/notifications/useNotificationsDashboardStore.ts
index 28fa6c3d0..41f392627 100644
--- a/frontend/stores/notifications/useNotificationsDashboardStore.ts
+++ b/frontend/stores/notifications/useNotificationsDashboardStore.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import type { InternalGetUserNotificationDashboardsResponse } from '~/types/api/notifications'
 import { API_PATH } from '~/types/customFetch'
 import type { TableQueryParams } from '~/types/datatable'
+import type { ChainIDs } from '~/types/network'
 
 const notificationsDashboardStore = defineStore(
   'notifications-dashboard-store',
@@ -11,7 +12,7 @@ const notificationsDashboardStore = defineStore(
   },
 )
 
-export function useNotificationsDashboardStore(networkId: globalThis.Ref<number>) {
+export function useNotificationsDashboardStore(networkId: globalThis.Ref<ChainIDs>) {
   const { isLoggedIn } = useUserStore()
 
   const { fetch } = useCustomFetch()
@@ -64,7 +65,8 @@ export function useNotificationsDashboardStore(networkId: globalThis.Ref<number>
 
   watch([
     query,
-    networkId], ([q]) => {
+    networkId,
+  ], ([ q ]) => {
     if (q) {
       isLoggedIn.value && loadNotificationsDashboards(q)
     }
diff --git a/frontend/stores/notifications/useNotificationsNetworkStore.ts b/frontend/stores/notifications/useNotificationsNetworkStore.ts
index f37090548..a71facaac 100644
--- a/frontend/stores/notifications/useNotificationsNetworkStore.ts
+++ b/frontend/stores/notifications/useNotificationsNetworkStore.ts
@@ -13,7 +13,11 @@ export function useNotificationsNetworkStore() {
 
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(notificationsNetworkStore())
-  const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'timestamp:desc' }, 10)
+  const {
+    cursor, isStoredQuery, onSort, pageSize, pendingQuery, query, setCursor, setPageSize, setSearch, setStoredQuery,
+  } = useTableQuery({
+    limit: 10, sort: 'timestamp:desc',
+  }, 10)
   const isLoading = ref(false)
 
   async function loadNetworkNotifications(q: TableQueryParams) {
@@ -53,8 +57,8 @@ export function useNotificationsNetworkStore() {
 
   return {
     cursor,
-    networkNotifications,
     isLoading,
+    networkNotifications,
     onSort,
     pageSize,
     query: pendingQuery,

From bf03dd19ef2a74e669aeacc80202b0f0f88c17c0 Mon Sep 17 00:00:00 2001
From: Alexander Maushammer <alexander.maushammer@bitfly.at>
Date: Mon, 12 Aug 2024 10:30:18 +0200
Subject: [PATCH 5/5] formatting

---
 .../notifications/NotificationsNetworkTable.vue        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/components/notifications/NotificationsNetworkTable.vue b/frontend/components/notifications/NotificationsNetworkTable.vue
index 96fc30133..7c89c3060 100644
--- a/frontend/components/notifications/NotificationsNetworkTable.vue
+++ b/frontend/components/notifications/NotificationsNetworkTable.vue
@@ -9,13 +9,13 @@ const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
 
 const {
+  isLoading,
+  networkNotifications,
   onSort,
+  query,
   setCursor,
   setPageSize,
   setSearch,
-  networkNotifications,
-  query,
-  isLoading,
 } = useNotificationsNetworkStore()
 </script>
 
@@ -31,8 +31,8 @@ const {
           <BcTable
             :data="networkNotifications"
             data-key="notification_id"
-            :cursor="cursor"
-            :page-size="pageSize"
+            :cursor
+            :page-size
             :selected-sort="query?.sort"
             :loading="isLoading"
             :add-spacer="true"