refactor(ui): ComboBox for datacenters and infras

Use ComboBox component in Datacenters and Infrastructures views.

fix #38

CHANGELOG.md

@@ -82,15 +82,16 @@ and this project adheres to
     empty racks, `discard_empty_racks` and `other_racks` drawing parameters.
 - ui:
   - Many improvements in datacenter details page (#39), such as:
-    - The table of rooms is moved upper in the page
+    - The table of rooms is moved upper in the page.
     - The datacenter search input is replaced by a filter input in the top right
       corner to filter rooms by name.
     - The table of rooms does not use all page width anymore.
     - The _"Access to the room"_ button is be renamed _"View room"_.
     - The table header for view room button has been removed.
     - Add button to sort rooms by name in alphabetical order, either in
-      ascending or descending order
+      ascending or descending order.
     - Adopt the same font as in datacenter room details view.
+  - More ergonomic combobox to select datacenter and infrastructure (#38).
 - docs:
   - Update supported Linux distributions in quickstart guide (add fedora 39
     and drop fedora 37).

racksdb/web/ui/src/views/DatacentersView.vue

@@ -8,15 +8,14 @@ SPDX-License-Identifier: GPL-3.0-or-later -->
 import { useHttp } from '@/plugins/http'
 import { useRacksDBAPI } from '@/composables/RacksDBAPI'
 import { ref, onMounted } from 'vue'
-import SearchBar from '@/components/SearchBar.vue'
 import type { Ref } from 'vue'
 import type { Datacenter } from '@/composables/RacksDBAPI'
 import BreadCrumbs from '@/components/BreadCrumbs.vue'
+import ComboBox from '@/components/ComboBox.vue'
 
 const http = useHttp()
 const racksDBAPI = useRacksDBAPI(http)
 const datacenters: Ref<Array<Datacenter>> = ref([])
-
 async function getDatacenters() {
   datacenters.value = await racksDBAPI.datacenters()
 }
@@ -29,12 +28,7 @@ onMounted(() => {
 <template>
   <BreadCrumbs />
 
-  <SearchBar
-    v-if="datacenters.length"
-    viewTitle="Datacenter View"
-    searchedItem="datacenter"
-    :items="datacenters"
-  />
+  <ComboBox itemType="datacenter" :items="datacenters" />
 
   <!-- map code will be here -->
 </template>

racksdb/web/ui/src/views/InfrastructuresView.vue

@@ -8,10 +8,10 @@ SPDX-License-Identifier: GPL-3.0-or-later -->
 import { useHttp } from '@/plugins/http'
 import { useRacksDBAPI } from '@/composables/RacksDBAPI'
 import { ref, onMounted } from 'vue'
-import SearchBar from '@/components/SearchBar.vue'
 import type { Ref } from 'vue'
 import type { Infrastructure } from '@/composables/RacksDBAPI'
 import BreadCrumbs from '@/components/BreadCrumbs.vue'
+import ComboBox from '@/components/ComboBox.vue'
 
 const http = useHttp()
 const racksDBAPI = useRacksDBAPI(http)
@@ -29,10 +29,5 @@ onMounted(() => {
 <template>
   <BreadCrumbs />
 
-  <SearchBar
-    v-if="infrastructures.length"
-    viewTitle="Infrastructure View"
-    searchedItem="infrastructure"
-    :items="infrastructures"
-  />
+  <ComboBox itemType="infrastructure" :items="infrastructures" />
 </template>