review feedback

vatesfr · Jan 22, 2025 · 6460856 · 6460856
1 parent 63d2872
commit 6460856
Show file tree

Hide file tree

Showing 10 changed files with 226 additions and 185 deletions.
diff --git a/.../network/PoolHostInternalNetworkTable.vue → ...network/PoolHostInternalNetworksTable.vue b/.../network/PoolHostInternalNetworkTable.vue → ...network/PoolHostInternalNetworksTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pool-host-internal-network-table">
+  <div class="pool-host-internal-networks-table">
     <UiTitle>
       {{ $t('host-internal-networks') }}
       <template #actions>
@@ -15,37 +15,37 @@
         </UiButton>
       </template>
     </UiTitle>
-    <div class="table-actions">
-      <UiQuerySearchBar class="table-query" @search="value => (searchQuery = value)" />
-      <UiTableActions :title="t('table-actions')">
-        <UiButton
-          v-tooltip="$t('coming-soon')"
-          disabled
-          :left-icon="faEdit"
-          variant="tertiary"
-          accent="info"
-          size="medium"
-        >
-          {{ $t('edit') }}
-        </UiButton>
-        <UiButton
-          v-tooltip="$t('coming-soon')"
-          disabled
-          :left-icon="faTrash"
-          variant="tertiary"
-          accent="danger"
-          size="medium"
-        >
-          {{ $t('delete') }}
-        </UiButton>
-      </UiTableActions>
-      <UiTopBottomTable
-        :selected-items="selected.length"
-        :total-items="networkUuids.length"
-        @toggle-select-all="toggleSelect"
-      />
-    </div>
-    <div class="table-container">
+    <div class="container">
+      <div class="table-actions">
+        <UiQuerySearchBar @search="value => (searchQuery = value)" />
+        <UiTableActions :title="t('table-actions')">
+          <UiButton
+            v-tooltip="$t('coming-soon')"
+            disabled
+            :left-icon="faEdit"
+            variant="tertiary"
+            accent="info"
+            size="medium"
+          >
+            {{ $t('edit') }}
+          </UiButton>
+          <UiButton
+            v-tooltip="$t('coming-soon')"
+            disabled
+            :left-icon="faTrash"
+            variant="tertiary"
+            accent="danger"
+            size="medium"
+          >
+            {{ $t('delete') }}
+          </UiButton>
+        </UiTableActions>
+        <UiTopBottomTable
+          :selected-items="selected.length"
+          :total-items="networkUuids.length"
+          @toggle-select-all="toggleSelect"
+        />
+      </div>
       <VtsDataTable
         :is-ready
         :has-error
@@ -57,11 +57,11 @@
               <th v-if="column.id === 'checkbox'" class="checkbox">
                 <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
               </th>
-              <th v-else-if="column.id === 'more'" class="more">
-                <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
+              <th v-else-if="column.id === 'more'" v-tooltip="$t('coming-soon')" class="more">
+                <UiButtonIcon size="small" accent="info" :icon="faEllipsis" />
                 {{ column.label }}
               </th>
-              <ColumnTitle v-else :icon="getHeaderIcon(column.id)">
+              <ColumnTitle v-else :icon="headerIcon[column.id]">
                 <span class="text-ellipsis">{{ column.label }}</span>
               </ColumnTitle>
             </template>
@@ -74,9 +74,19 @@
             :class="{ selected: selectedNetworkId === row.id }"
             @click="selectedNetworkId = row.id"
           >
-            <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
+            <td
+              v-for="column of row.visibleColumns"
+              :key="column.id"
+              class="typo p2-regular"
+              :class="{ checkbox: column.id === 'checkbox' }"
+            >
               <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
-              <VtsIcon v-else-if="column.id === 'more'" accent="info" :icon="faEllipsis" />
+              <VtsIcon
+                v-else-if="column.id === 'more'"
+                v-tooltip="$t('coming-soon')"
+                accent="info"
+                :icon="faEllipsis"
+              />
               <div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
                 {{ column.value }}
               </div>
@@ -98,7 +108,7 @@
 
 <script setup lang="ts">
 import useMultiSelect from '@/composables/multi-select.composable'
-import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
+import { useNetworkStore } from '@/stores/xen-api/network.store'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
@@ -126,11 +136,7 @@ import {
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const { networks } = defineProps<{
-  networks: XenApiNetwork[]
-  isReady: boolean
-  hasError: boolean
-}>()
+const { networksWithoutPifs: networks, isReady, hasError } = useNetworkStore().subscribe()
 
 const { t } = useI18n()
 const searchQuery = ref('')
@@ -139,14 +145,14 @@ const selectedNetworkId = useRouteQuery('id')
 const filteredNetworks = computed(() => {
   const searchTerm = searchQuery.value.trim().toLocaleLowerCase()
   if (!searchTerm) {
-    return networks
+    return networks.value
   }
-  return networks.filter(network =>
+  return networks.value.filter(network =>
     Object.values(network).some(value => String(value).toLocaleLowerCase().includes(searchTerm))
   )
 })
 
-const networkUuids = computed(() => networks.map(network => network.uuid))
+const networkUuids = computed(() => networks.value.map(network => network.uuid))
 
 const { selected, areAllSelected } = useMultiSelect(networkUuids)
 
@@ -170,53 +176,41 @@ const { visibleColumns, rows } = useTable('networks', filteredNetworks, {
   ],
 })
 
-type NetworkHeader = 'name_label' | 'name_description' | 'MTU' | 'default_locking_mode' | 'more'
+type NetworkHeader = 'name_label' | 'name_description' | 'MTU' | 'default_locking_mode'
 
 const headerIcon: Record<NetworkHeader, IconDefinition> = {
   name_label: faAlignLeft,
   name_description: faAlignLeft,
   MTU: faHashtag,
   default_locking_mode: faCaretDown,
-  more: faEllipsis,
 }
-
-const getHeaderIcon = (status: NetworkHeader) => headerIcon[status]
 </script>
 
 <style scoped lang="postcss">
-.pool-host-internal-network-table,
-.table-actions {
+.pool-host-internal-networks-table,
+.table-actions,
+.table-container,
+.container {
   display: flex;
   flex-direction: column;
 }
 
-.pool-host-internal-network-table {
+.pool-host-internal-networks-table {
   gap: 2.4rem;
 
+  .container,
   .table-actions {
     gap: 0.8rem;
   }
 
-  .table-container {
-    overflow-x: auto;
-
-    .checkbox,
-    .more {
-      width: 4.8rem;
-    }
-
-    tbody tr:hover {
-      cursor: pointer;
-      background-color: var(--color-info-background-hover);
-    }
-
-    tr:last-child {
-      border-bottom: 0.1rem solid var(--color-neutral-border);
-    }
+  .checkbox,
+  .more {
+    width: 4.8rem;
   }
 
-  .selected {
-    background-color: var(--color-info-background-selected);
+  .checkbox {
+    text-align: center;
+    line-height: 1;
   }
 }
 </style>