Merge pull request #879 from gobitfly/BEDS-202/Notification-Table-RP-Tab

Beds 202/notification table RocketPool tab

Author: benji-bitfly

frontend/.vscode/settings.json

@@ -1,19 +1,25 @@
 {
   "conventionalCommits.scopes": [
+    "BcLink",
+    "BcTablePager",
     "DashboardChartSummaryChartFilter",
     "DashboardGroupManagementModal",
     "DashboardValidatorManagmentModal",
+    "NotificationsClientsTable",
+    "NotificationsNetworkTable",
     "NotificationsOverview",
     "checkout",
     "ci",
     "customFetch",
+    "dialog",
     "eslint",
     "feature-flags",
     "git",
     "i18n",
     "mainHeader",
     "notifications",
     "qrCode",
+    "useWindowSize",
     "vscode"
   ],
 "editor.codeActionsOnSave": {

frontend/assets/css/prime.scss

@@ -634,11 +634,11 @@ div.p-accordion {
  * TODO: remove the .p-overflow-hidden and .p-overlay-mask class when PrimeVue is updated.
  * This is quick-fix for shifting display issues. 
  **/
- .p-overflow-hidden {
+ div.p-overflow-hidden {
   overflow: hidden !important;  /* Block scroll */
   border-right: solid 5px transparent !important;
 }
 
-.p-overlay-mask {
-  background: var(--container-background);
-}
+div.p-dialog-mask.p-overlay-mask {
+  background: rgba(0, 0, 0, 0.5);
+}

frontend/components/bc/BcLink.vue

@@ -1,7 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// import type { RouteLocationRaw } from 'vue-router'
+import type { NuxtLinkProps } from '#app'
+
+defineProps<{
+  to: NuxtLinkProps['to'],
+}>()
+</script>
 
 <template>
-  <NuxtLink :no-prefetch="true">
+  <NuxtLink
+    :to
+    :no-prefetch="true"
+  >
     <template #default>
       <slot />
     </template>

frontend/components/bc/format/FormatHash.vue renamed to frontend/components/bc/format/BcFormatHash.vue

@@ -181,29 +181,27 @@ watch(
         @change="(event) => setPageSize(event.value)"
       />
     </div>
-    <div class="very-last">
-      <div
-        v-if="!stepperOnly"
-        class="left-info"
-      >
-        <slot name="bc-table-footer-left">
-          <span v-if="props.paging?.total_count">
-            {{
-              $t("table.showing", {
-                from: data.from,
-                to: data.to,
-                total: props.paging?.total_count,
-              })
-            }}
-          </span>
-        </slot>
-      </div>
-      <div
-        v-if="$slots['bc-table-footer-right']"
-        class="right-info"
-      >
-        <slot name="bc-table-footer-right" />
-      </div>
+    <div
+      v-if="!stepperOnly"
+      class="left-info"
+    >
+      <slot name="bc-table-footer-left">
+        <span v-if="props.paging?.total_count">
+          {{
+            $t("table.showing", {
+              from: data.from,
+              to: data.to,
+              total: props.paging?.total_count,
+            })
+          }}
+        </span>
+      </slot>
+    </div>
+    <div
+      v-if="$slots['bc-table-footer-right']"
+      class="right-info"
+    >
+      <slot name="bc-table-footer-right" />
     </div>
   </div>
 </template>
@@ -212,30 +210,44 @@ watch(
 @use "~/assets/css/main.scss";
 
 .bc-pageinator {
-  position: relative;
-  height: 78px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  margin-block-start: 20px;
+  display: grid;
+  gap: 10px;
+  justify-items: center;
   font-weight: var(--standard_text_medium_font_weight);
-  margin: var(--padding) var(--padding-large);
 
-  .very-last {
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 100%;
-    pointer-events: none;
+  @media screen and (min-width: 768px) {
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 1fr;
+
+      .pager {
+        grid-column: span 2
+      }
+      .left-info {
+        margin-inline-start: 16px;
+        justify-self: start;
+      }
+      .right-info{
+        justify-self: end;
+        margin-inline-end: 16px;
+      }
+    }
+  @media screen and (min-width: 1024px) {
+    grid-template-rows: 1fr ;
+    grid-template-columns: 1fr auto 1fr;
+    .pager {
+      grid-column:  2/3;
+      grid-row: 1/2
+    }
     .left-info {
-      margin-right: auto;
-      pointer-events: all;
+      grid-column: 1/2;
+      grid-row: 1/2
     }
     .right-info {
-      margin-left: auto;
-      pointer-events: all;
+      grid-column: 3/4;
+      grid-row: 1/2
     }
+
   }
 
   .pager {
@@ -299,13 +311,18 @@ watch(
     }
   }
 
-  @media screen and (max-width: 1399px) {
-    gap: var(--padding);
-    height: unset;
-    .very-last {
-      @media (max-width: 600px) {
-        position: relative;
-      }
+  .left-info {
+    display: none;
+    @media screen and (min-width: 640px) {
+      display: block;
+    }
+  }
+  .right-info {
+    font-weight: 400;
+    font-size: 12px;
+    @media screen and (min-width: 640px) {
+      font-weight: inherit;
+      font-size: inherit;
     }
   }
 }

frontend/components/bc/table/TablePager.vue

@@ -26,7 +26,7 @@ const {
 } = useDashboardKey()
 
 const {
-  isMobile, width,
+  width,
 } = useWindowSize()
 
 const visible = defineModel<boolean>()
@@ -199,6 +199,9 @@ const selectedSort = computed(() =>
     ? `${sortField.value}:${getSortOrder(sortOrder.value)}`
     : undefined,
 )
+const isMobile = computed(() => {
+  return (width.value ?? 0) <= 800
+})
 </script>
 
 <template>

frontend/components/dashboard/GroupManagementModal.vue

@@ -43,7 +43,7 @@ const clientLink = computed(() => {
         <ClientOnly fallback-tag="span">
           <BcTable
             :data="clientsNotifications"
-            data-key="notification_id"
+            data-key="client_name"
             :cursor
             :page-size
             :selected-sort="query?.sort"

frontend/components/notifications/NotificationsClientsTable.vue

@@ -22,7 +22,7 @@ const {
 <template>
   <div>
     <BcTableControl
-      :title="$t('notifications.dashboards.title')"
+      :title="$t('notifications.network.title')"
       :search-placeholder="$t('notifications.dashboards.search_placeholder')"
       @set-search="setSearch"
     >