From 7742b307c87644866605e05dae3e8c643caff936 Mon Sep 17 00:00:00 2001
From: benji-bitfly <beniamin.hutyra@bitfly.at>
Date: Tue, 10 Sep 2024 18:03:36 +0200
Subject: [PATCH] feat: Refactor useNotificationsClientStore.ts and clean up
 unused files and code

- Deleted unused files to improve project organization.
- Added translations for component elements.
- Refactored constants in useNotificationsClientsStore for better readability and maintainability.
- Cleaned up unused code in NotificationsClientsTable.vue to streamline the component.

See: BEDS-324
---
 .../NotificationsClientsTable.vue             | 65 ++++++++++++++-----
 frontend/locales/en.json                      |  1 +
 .../notifications/managementDashboard.json    | 31 ---------
 .../useNotificationsClientsStore.ts           |  2 +-
 4 files changed, 49 insertions(+), 50 deletions(-)
 delete mode 100644 frontend/public/mock/notifications/managementDashboard.json

diff --git a/frontend/components/notifications/NotificationsClientsTable.vue b/frontend/components/notifications/NotificationsClientsTable.vue
index f987a6ce1..470396516 100644
--- a/frontend/components/notifications/NotificationsClientsTable.vue
+++ b/frontend/components/notifications/NotificationsClientsTable.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useNotificationsClientsStore } from '~/stores/notifications/useNotificationsClientsStore'
+import { useNotificationsClientStore } from '~/stores/notifications/useNotificationsClientsStore'
 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()
@@ -17,12 +16,11 @@ const {
   setCursor,
   setPageSize,
   setSearch,
-} = useNotificationsClientsStore()
+} = useNotificationsClientStore()
 
 const colsVisible = computed(() => {
   return {
     footer: 1024,
-    threshold: width.value > 830,
   }
 })
 
@@ -38,7 +36,7 @@ const clientLink = computed(() => {
   <div>
     <BcTableControl
       :title="$t('notifications.clients.title')"
-      :search-placeholder="$t('notifications.dashboards.search_placeholder')"
+      :search-placeholder="$t('notifications.clients.search_placeholder')"
       @set-search="setSearch"
     >
       <template #table>
@@ -50,34 +48,29 @@ const clientLink = computed(() => {
             :page-size
             :selected-sort="query?.sort"
             :loading="isLoading"
-            :add-spacer="true"
             @set-cursor="setCursor"
             @sort="onSort"
             @set-page-size="setPageSize"
           >
             <Column
-              field="machine_name"
               sortable
               header-class="col-client-name"
               body-class="col-client-name"
               :header="$t('notifications.clients.col.client_name')"
             >
               <template #body="slotProps">
-                <pre>
-                  {{ slotProps.data.client_name }}
-                </pre>
+                {{ slotProps.data.client_name }}
               </template>
             </Column>
             <Column
-              field="machine_name"
-              header-class="col-client-name"
-              body-class="col-client-name"
+              header-class="col-version"
+              body-class="col-version"
               :header="$t('notifications.clients.col.version')"
             >
               <template #body="slotProps">
                 <BcLink
                   :to="clientLink"
-                  class="link link-dashboard"
+                  class="link"
                   target="_blank"
                 >
                   {{ slotProps.data.version }}
@@ -96,7 +89,6 @@ const clientLink = computed(() => {
               <template #body="slotProps">
                 <BcFormatTimePassed
                   :value="slotProps.data.timestamp"
-                  type="go-timestamp"
                 />
               </template>
             </Column>
@@ -120,6 +112,7 @@ const clientLink = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@use "~/assets/css/main.scss";
 @use "~/assets/css/utils.scss";
 
 $breakpoint-sm: 630px;
@@ -127,9 +120,8 @@ $breakpoint-md: 780px;
 $breakpoint-lg: 1024px;
 
 :deep(.col-client-name) {
-  *:not([data-pc-section="sort"]) {
-    @include utils.truncate-text;
-  }
+
+  @include utils.truncate-text;
 
   @media (max-width: $breakpoint-lg) {
     @include utils.set-all-width(240px);
@@ -144,6 +136,22 @@ $breakpoint-lg: 1024px;
   }
 }
 
+:deep(.col-version) {
+
+  @include utils.truncate-text;
+
+  @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"]) {
+  // }
+}
+
 :deep(.col-age) {
   @media (max-width: $breakpoint-lg) {
     @include utils.set-all-width(140px);
@@ -157,4 +165,25 @@ $breakpoint-lg: 1024px;
     @include utils.truncate-text;
   }
 }
+
+.management-table {
+  @include main.container;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  justify-content: space-between;
+
+  :deep(.p-datatable-wrapper) {
+    flex-grow: 1;
+  }
+}
+
+td > .col-client-name > a{
+  text-overflow: ellipsis !important;
+}
+
+td > .col-client-name {
+  text-overflow: ellipsis !important;
+}
 </style>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index c6ca09766..302cfa091 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -569,6 +569,7 @@
       "footer":{
         "subscriptions": "Clients ({count} Subscriptions)"
       },
+      "search_placeholder":"Client",
       "title": "Clients"
     },
     "col": {
diff --git a/frontend/public/mock/notifications/managementDashboard.json b/frontend/public/mock/notifications/managementDashboard.json
deleted file mode 100644
index eb0d14c72..000000000
--- a/frontend/public/mock/notifications/managementDashboard.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "paging": {
-    "total_count": 999
-  },
-  "data": [
-    {
-      "group_id": 123,
-      "dashboard_id": 222,
-      "dashboard_name": "My test dashboard",
-      "dashboard_type": "validator",
-      "subscriptions": ["missed_attestation"],
-      "webhook": {
-        "url": "",
-        "via_discord": false
-      },
-      "networks": [1]
-    },
-    {
-      "group_id": 123,
-      "dashboard_id": 222,
-      "dashboard_name": "My account dashboard",
-      "dashboard_type": "account",
-      "subscriptions": ["missed_attestation", "proposed_attestation"],
-      "webhook": {
-        "url": "https://discord.com/some-webhook-link",
-        "via_discord": false
-      },
-      "networks": [1, 10, 42161, 8453]
-    }
-  ]
-}
diff --git a/frontend/stores/notifications/useNotificationsClientsStore.ts b/frontend/stores/notifications/useNotificationsClientsStore.ts
index eb997173e..8248d3ede 100644
--- a/frontend/stores/notifications/useNotificationsClientsStore.ts
+++ b/frontend/stores/notifications/useNotificationsClientsStore.ts
@@ -8,7 +8,7 @@ const notificationsClientsStore = defineStore('notifications-clients-store', ()
   return { data }
 })
 
-export function useNotificationsClientsStore() {
+export function useNotificationsClientStore() {
   const { isLoggedIn } = useUserStore()
 
   const { fetch } = useCustomFetch()