--wip-- [skip ci]

frontend/components/notifications/NotificationsDashboardDialogEntity.vue

@@ -1,14 +1,33 @@
 <script setup lang="ts">
+import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
+
 // const model = defineModel(false)
 const { t: $t } = useTranslation()
 
 const {
   // close,
   props,
-} = useBcDialog()
+} = useBcDialog<{ identifier: string } & Pick<NotificationDashboardsTableRow, 'dashboard_id' | 'epoch' | 'group_id' | 'group_name'>>()
+
+const store = useNotificationsDashboardDetailsStore()
+
+const { data } = useAsyncData(() => store.getDetails({
+  // dashboard_id: props.value?.dashboard_id ?? 0,
+  dashboard_id: 5334, // 💀 (personal dashboard id) remove after development
+  epoch: props.value?.epoch ?? 0,
+  group_id: props.value?.group_id ?? 0,
+}))
+watch(data, () => {
+  // console.log(data)
+  // store.addDetails({
+  //   details: data.value,
+  //   identifier: props.value?.identifier ?? '',
+  // })
+})
 </script>
 
 <template>
+  {{ data }}
   <h2>
     <BcText
       variant="lg"
@@ -19,10 +38,23 @@ const {
       variant="md"
       is-dimmed
     >
-      ({{ $t('common.epoch') }} {{ props.epoch }})
+      ({{ $t('common.epoch') }} {{ props?.epoch }})
     </BcText>
   </h2>
-  OVH
+  <h3>
+    {{ props?.group_name }}
+  </h3>
+  <section>
+    <details>
+      <summary>
+        Validtor online
+        <!-- <h4> Validator offline</h4> -->
+      </summary>
+      <p>
+        11,22,33,444
+      </p>
+    </details>
+  </section>
 </template>
 
 <style scoped lang="scss">

frontend/components/notifications/NotificationsDashboardsTable.vue

@@ -97,10 +97,14 @@ const dialog = useDialog()
 //   dialogRef: dialog,
 // } = useBcDialog()
 
-const showDialog = (row: NotificationDashboardsTableRow) => {
+const showDialog = (row: { identifier: string } & NotificationDashboardsTableRow) => {
   dialog.open(NotificationsDashboardDialogEntity, {
     data: {
+      dashboard_id: row.dashboard_id,
       epoch: row.epoch,
+      group_id: row.group_id,
+      group_name: row.group_name,
+      identifier: row.identifier,
     },
   })
 }
@@ -230,7 +234,7 @@ const showDialog = (row: NotificationDashboardsTableRow) => {
                   </template>
                   <BcButtonIcon
                     screenreader-text="Open notification details"
-                    @click="showDialog"
+                    @click="showDialog(slotProps.data)"
                   >
                     <FontAwesomeIcon
                       class="link"

frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts

@@ -0,0 +1,41 @@
+import type {
+  NotificationDashboardsTableRow, NotificationValidatorDashboardDetail,
+} from '~/types/api/notifications'
+import { API_PATH } from '~/types/customFetch'
+
+export const useNotificationsDashboardDetailsStore = defineStore('notifications-dashboard-details', () => {
+  const { fetch } = useCustomFetch()
+  const detailsList = ref(new Map())
+
+  const getDetails = async ({
+    dashboard_id,
+    epoch,
+    group_id,
+  }: Pick<NotificationDashboardsTableRow, 'dashboard_id' | 'epoch' | 'group_id'>,
+  ) => {
+    return fetch(API_PATH.NOTIFICATIONS_DASHBOARDS_DETAILS_VALIDATOR,
+      {},
+      {
+        dashboard_id,
+        epoch,
+        group_id,
+      },
+    )
+  }
+
+  const addDetails = ({
+    details,
+    identifier,
+  }: {
+    details: NotificationValidatorDashboardDetail,
+    identifier: string,
+  }) => {
+    detailsList.value.set(identifier, details)
+  }
+
+  return {
+    addDetails,
+    detailsList,
+    getDetails,
+  }
+})

frontend/types/customFetch.ts

@@ -41,6 +41,8 @@ export enum API_PATH {
   LOGOUT = '/logout',
   NOTIFICATIONS_CLIENTS = '/notifications/clients',
   NOTIFICATIONS_DASHBOARDS = '/notifications/dashboards',
+  NOTIFICATIONS_DASHBOARDS_DETAILS_ACCOUNT = '/notifications/dashboards/details/account',
+  NOTIFICATIONS_DASHBOARDS_DETAILS_VALIDATOR = '/notifications/dashboards/details/validator',
   NOTIFICATIONS_MACHINE = '/notifications/machines',
   NOTIFICATIONS_MANAGEMENT_CLIENTS_SET_NOTIFICATION = '/notifications/management/clients/set_notifications',
   NOTIFICATIONS_MANAGEMENT_DASHBOARD_ACCOUNT_SET_NOTIFICATION = '/notifications/management/account_dashboard/set_notifications',
@@ -295,6 +297,18 @@ export const mapping: Record<string, MappingData> = {
   [API_PATH.NOTIFICATIONS_DASHBOARDS]: {
     path: '/users/me/notifications/dashboards',
   },
+  [API_PATH.NOTIFICATIONS_DASHBOARDS_DETAILS_ACCOUNT]: {
+    getPath: pathValues =>
+      `/users/me/notifications/account-dashboards/${pathValues?.dashboard_id}`
+      + `/groups/${pathValues?.group_id}/epochs/${pathValues?.epoch}`,
+    path: '/users/me/notifications/account-dashboards/{dashboard_id}/groups/{group_id}/epochs/{epoch}',
+  },
+  [API_PATH.NOTIFICATIONS_DASHBOARDS_DETAILS_VALIDATOR]: {
+    getPath: pathValues =>
+      `/users/me/notifications/validator-dashboards/${pathValues?.dashboard_id}`
+      + `/groups/${pathValues?.group_id}/epochs/${pathValues?.epoch}`,
+    path: '/users/me/notifications/validator-dashboards/{dashboard_id}/groups/{group_id}/epochs/{epoch}',
+  },
   [API_PATH.NOTIFICATIONS_MACHINE]: {
     path: '/users/me/notifications/machines',
   },