feat: Refactor useNotificationsClientStore.ts and clean up unused fil…

…es 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

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,16 +112,16 @@ const clientLink = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@use "~/assets/css/main.scss";
 @use "~/assets/css/utils.scss";
 
 $breakpoint-sm: 630px;
 $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>

frontend/locales/en.json

@@ -569,6 +569,7 @@
       "footer":{
         "subscriptions": "Clients ({count} Subscriptions)"
       },
+      "search_placeholder":"Client",
       "title": "Clients"
     },
     "col": {

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()