From c58e9d5412914c1a1e473c9ffe0800fed4bfe116 Mon Sep 17 00:00:00 2001
From: MauserBitfly <125363940+MauserBitfly@users.noreply.github.com>
Date: Thu, 4 Apr 2024 08:05:50 +0200
Subject: [PATCH] update summary, close on esc (#162)

* update summary, close on esc
---
 frontend/assets/css/prime.scss                         |  3 +++
 frontend/components/bc/BcDialog.vue                    |  1 -
 frontend/components/dashboard/GroupManagementModal.vue |  8 +++++++-
 .../components/dashboard/ValidatorManagementModal.vue  | 10 +++++++++-
 .../dashboard/table/DashboardTableSummary.vue          | 10 +++++-----
 frontend/composables/useBcDialog.ts                    |  1 -
 6 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss
index 9d5e478a3..b9c94e1ef 100644
--- a/frontend/assets/css/prime.scss
+++ b/frontend/assets/css/prime.scss
@@ -55,6 +55,9 @@
     .p-dialog-title {
       @include fonts.dialog_header;
     }
+    .p-dialog-header-close {
+      display: none;
+    }
   }
   &.p-dialog-header-hidden {
     .p-dialog-header {
diff --git a/frontend/components/bc/BcDialog.vue b/frontend/components/bc/BcDialog.vue
index b5dced35b..6f4a47aad 100644
--- a/frontend/components/bc/BcDialog.vue
+++ b/frontend/components/bc/BcDialog.vue
@@ -17,7 +17,6 @@ const position = computed(() => width.value <= 430 ? 'bottom' : 'center')
     modal
     :header="props.header"
     :dismissable-mask="true"
-    :closable="false"
     :draggable="false"
     :position="position"
     class="modal_container"
diff --git a/frontend/components/dashboard/GroupManagementModal.vue b/frontend/components/dashboard/GroupManagementModal.vue
index 0a8a20682..39e828f4f 100644
--- a/frontend/components/dashboard/GroupManagementModal.vue
+++ b/frontend/components/dashboard/GroupManagementModal.vue
@@ -36,6 +36,7 @@ const newGroupName = ref<string>('')
 const search = ref<string>()
 const sortField = ref<string>()
 const sortOrder = ref<number | null>()
+const hasNoOpenDialogs = ref(true)
 
 const data = computed<ApiPagingResponse<VDBOverviewGroup>>(() => {
   let groups = (overview.value?.groups ?? [])
@@ -92,8 +93,12 @@ const removeGroupConfirmed = async (row: VDBOverviewGroup) => {
 }
 
 const removeGroup = (row: VDBOverviewGroup) => {
+  hasNoOpenDialogs.value = false
   dialog.open(BcDialogConfirm, {
-    onClose: response => response?.data && removeGroupConfirmed(row),
+    onClose: (response) => {
+      hasNoOpenDialogs.value = true
+      response?.data && removeGroupConfirmed(row)
+    },
     data: {
       title: $t('dashboard.validator.group_management.remove_title'),
       question: $t('dashboard.validator.group_management.remove_text', { group: row.name })
@@ -131,6 +136,7 @@ const premiumLimit = computed(() => (data.value?.paging?.total_count ?? 0) >= Ma
 <template>
   <BcDialog
     v-model="visible"
+    :close-on-escape="hasNoOpenDialogs"
     :header="$t('dashboard.validator.group_management.title')"
     class="validator-group-managment-modal-container"
     @update:visible="(visible: boolean)=>!visible && resetData()"
diff --git a/frontend/components/dashboard/ValidatorManagementModal.vue b/frontend/components/dashboard/ValidatorManagementModal.vue
index 7c294851e..8eb84cff5 100644
--- a/frontend/components/dashboard/ValidatorManagementModal.vue
+++ b/frontend/components/dashboard/ValidatorManagementModal.vue
@@ -40,6 +40,7 @@ const { value: query, bounce: setQuery } = useDebounceValue<PathValues | undefin
 
 const data = ref<InternalGetValidatorDashboardValidatorsResponse | undefined>()
 const selected = ref<VDBManageValidatorsTableRow[]>()
+const hasNoOpenDialogs = ref(true)
 
 const size = computed(() => {
   return {
@@ -96,8 +97,10 @@ const addValidator = () => {
 }
 
 const editSelected = () => {
+  hasNoOpenDialogs.value = false
   dialog.open(DashboardGroupSelectionDialog, {
     onClose: (response) => {
+      hasNoOpenDialogs.value = true
       if (response?.data !== undefined) {
         changeGroup(mapIndexOrPubKey(selected.value), response?.data)
       }
@@ -161,8 +164,12 @@ const removeRow = (row: VDBManageValidatorsTableRow) => {
     warn('no validator to remove')
   }
 
+  hasNoOpenDialogs.value = false
   dialog.open(BcDialogConfirm, {
-    onClose: response => response?.data && removeValidators(list),
+    onClose: (response) => {
+      hasNoOpenDialogs.value = true
+      response?.data && removeValidators(list)
+    },
     data: {
       title: $t('dashboard.validator.management.remove_title'),
       question: $t('dashboard.validator.management.remove_text', { validator: list[0] }, list.length)
@@ -183,6 +190,7 @@ const premiumLimit = computed(() => (data.value?.paging?.total_count ?? 0) >= Ma
   <BcDialog
     v-model="visible"
     :header="$t('dashboard.validator.management.title')"
+    :close-on-escape="hasNoOpenDialogs"
     class="validator-managment-modal-container"
     @update:visible="(visible: boolean)=>!visible && resetData()"
   >
diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue
index 5047c5e4b..f432433fe 100644
--- a/frontend/components/dashboard/table/DashboardTableSummary.vue
+++ b/frontend/components/dashboard/table/DashboardTableSummary.vue
@@ -31,14 +31,14 @@ const colsVisible = computed(() => {
   }
 })
 
-const loadData = (query?: TableQueryParams) => {
-  if (!query) {
-    query = { limit: pageSize.value }
+const loadData = (q?: TableQueryParams) => {
+  if (!q) {
+    q = query.value ? { ...query.value } : { limit: pageSize.value }
   }
-  setQuery(query, true, true)
+  setQuery(q, true, true)
 }
 
-watch(() => props.dashboardKey, () => {
+watch(() => [props.dashboardKey, overview.value], () => {
   loadData()
 }, { immediate: true })
 
diff --git a/frontend/composables/useBcDialog.ts b/frontend/composables/useBcDialog.ts
index 797469c82..326edc205 100644
--- a/frontend/composables/useBcDialog.ts
+++ b/frontend/composables/useBcDialog.ts
@@ -25,7 +25,6 @@ export function useBcDialog <T> (dialogProps?: DialogProps) {
       }
       dialogRef.value.options.props.dismissableMask = true
       dialogRef.value.options.props.modal = true
-      dialogRef.value.options.props.closable = false
       dialogRef.value.options.props.draggable = false
       dialogRef.value.options.props.position = position.value
     }