wip

gobitfly · Sep 24, 2024 · 4221327 · 4221327
1 parent cc01d76
commit 4221327
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 40 deletions.
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -14,7 +14,8 @@
     "mainHeader",
     "notifications",
     "qrCode",
-    "vscode"
+    "vscode",
+    "dialog"
   ],
 "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always"

diff --git a/frontend/components/notifications/NotificationsRocketPoolTable.vue b/frontend/components/notifications/NotificationsRocketPoolTable.vue
@@ -2,16 +2,11 @@
 import type { Cursor } from '~/types/datatable'
 
 defineEmits<{ (e: 'openDialog'): void }>()
-
-// const { t: $t } = useTranslation()
-
-// TODO: replace currentNetwork with selection from NETWORK_SWITCHER_COMPONENT that has yet to be implemented
+const { t: $t } = useTranslation()
 
 const {
-  isLoading,
   loadRocketpoolNotifications,
   onSort,
-  overview,
   query,
   rocketpoolNotifications,
   setCursor,
@@ -31,10 +26,20 @@ const colsVisible = computed(() => {
     dashboard: width.value >= 640,
     groups: width.value >= 640,
     notifications: width.value > 1024,
+    timestamp: width.value > 640,
   }
 })
-// const rocketpoolEventType = computed(() => overview[0].event_type)
-// console.log(overview)
+
+type EventType = 'collateral_max' | 'collateral_min' | 'reward_round'
+const eventTypeNames = {
+  collateral_max: $t('notifications.rocketpool.event_types.collateral_max'),
+  collateral_min: $t('notifications.rocketpool.event_types.collateral_min'),
+  reward_round: $t('notifications.rocketpool.event_types.reward_round'),
+}
+
+const getEventTypeName = (eventType: EventType | string) => {
+  return eventTypeNames[eventType as EventType] || eventType
+}
 </script>
 
 <template>
@@ -52,12 +57,13 @@ const colsVisible = computed(() => {
             :cursor
             :page-size
             :selected-sort="query?.sort"
-            :loading="isLoading"
+            :expandable="!colsVisible.notifications"
             @set-cursor="setCursor"
             @sort="onSort"
             @set-page-size="setPageSize"
           >
             <Column
+              v-if="colsVisible.timestamp"
               field="timestamp"
               sortable
               header-class="col-age"
@@ -73,19 +79,22 @@ const colsVisible = computed(() => {
               </template>
             </Column>
             <Column
-              sortable
+              :sortable="true"
               header-class="col-notification-name"
               body-class="col-notification-name"
               :header="$t('notifications.rocketpool.col.notification')"
             >
               <template #body="slotProps">
-                {{ slotProps.data.event_type }}
+                {{ getEventTypeName(slotProps.data.event_type) }}
+                ({{ formatToPercent(slotProps.data.alert_value ?? 0) }})
               </template>
             </Column>
             <Column
+              v-if="colsVisible.notifications"
               header-class="col-node-address"
               body-class="col-node-address"
               :header="$t('notifications.rocketpool.col.node_address')"
+              :sortable="true"
             >
               <template #body="slotProps">
                 <BcLink
@@ -100,17 +109,44 @@ const colsVisible = computed(() => {
                 </BcLink>
               </template>
             </Column>
-            <!-- <Column
-              v-if="colsVisible.notifications"
-              field="notification"
-              body-class="col-notification"
-              header-class="col-notification"
-              :header="$t('notifications.dashboards.col.notification')"
+            <Column
+              v-if="!colsVisible.timestamp"
+              field="timestamp"
+              sortable
+              header-class="col-age"
+              body-class="col-age"
             >
+              <template #header>
+                <BcTableAgeHeader />
+              </template>
               <template #body="slotProps">
-                {{ slotProps.data.event_types.join(", ") }}
+                <BcFormatTimePassed
+                  :value="slotProps.data.timestamp"
+                />
               </template>
-            </Column> -->
+            </Column>
+            <template #expansion="slotProps">
+              <div class="expansion">
+                <div class="group">
+                  <div class="label">
+                    {{
+                      $t('notifications.rocketpool.col.node_address')
+                    }}
+                  </div>
+                  <BcLink
+                    to="/address/{node_address}"
+                    class="link"
+                    target="_blank"
+                  >
+                    <BcFormatHash
+                      :hash="slotProps.data.node.hash"
+                      type="address"
+                      :no-copy="true"
+                    />
+                  </BcLink>
+                </div>
+              </div>
+            </template>
             <template #empty>
               <NotificationsDashboardsTableEmpty
                 v-if="!rocketpoolNotifications?.data.length"
@@ -179,9 +215,6 @@ $breakpoint-lg: 1024px;
     @include utils.set-all-width(78px);
   }
 
-  *:not([data-pc-section="sort"]) {
-    @include utils.truncate-text;
-  }
 }
 
 .management-table {
@@ -200,10 +233,6 @@ $breakpoint-lg: 1024px;
 .icon-wrapper {
   text-align: center;
 
-  .icon-network {
-    height: 14px;
-    width: 14px;
-  }
 }
 
 td > .col-notification-name > a{
@@ -213,4 +242,19 @@ td > .col-notification-name > a{
 td > .col-notification-name {
   text-overflow: ellipsis !important;
 }
+
+.expansion {
+  background-color: var(--table-header-background);
+  padding: 14px 7px;
+
+  .group {
+    display: flex;
+    gap: var(--padding);
+
+    .label {
+      width: 78px;
+      font-weight: var(--standard_text_bold_font_weight);
+    }
+  }
+}
 </style>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -700,14 +700,6 @@
       },
       "title": "Network"
     },
-    "rocketpool": {
-      "col": {
-        "node_address": "Node Address",
-        "notification": "Notification",
-        "rocketpool_subscription":"Rocketpool ({count} Subscriptions)"
-      },
-      "search_placeholder": "Node Address"
-    },
     "overview": {
       "email_activate": "Click here to activate Email notifications",
       "email_tooltip": "Your current limit is { limit } emails per day. Your email limit resets in { hours } hours. Upgrade to premium for more.",
@@ -729,6 +721,19 @@
       },
       "push": "Push"
     },
+    "rocketpool": {
+      "col": {
+        "node_address": "Node Address",
+        "notification": "Notification",
+        "rocketpool_subscription":"Rocketpool ({count} Subscriptions)"
+      },
+      "event_types": {
+        "collateral_max": "Max collateral reached",
+        "collateral_min": "Min collateral reached",
+        "reward_round": "New reward round"
+      },
+      "search_placeholder": "Node Address"
+    },
     "subscriptions": {
       "accounts": {
         "all": {

diff --git a/frontend/stores/notifications/useNotificationsRocketPoolStore.ts b/frontend/stores/notifications/useNotificationsRocketPoolStore.ts
@@ -1,9 +1,6 @@
 import { defineStore } from 'pinia'
 import { API_PATH } from '~/types/customFetch'
-import type {
-  InternalGetUserNotificationRocketPoolResponse,
-  NotificationRocketPoolTableRow,
-} from '~/types/api/notifications'
+import type { InternalGetUserNotificationRocketPoolResponse } from '~/types/api/notifications'
 
 const notificationsRocketPoolStore = defineStore('notifications-rocket-pool-store', () => {
   const data = ref()
@@ -19,7 +16,6 @@ export function useNotificationsRocketpoolStore() {
   } = useTableQuery({
     limit: 10, sort: 'timestamp:desc',
   }, 10)
-  const isLoading = ref(false)
 
   async function loadRocketpoolNotifications() {
     try {