From a122b99e6008bfef76537c19e594c80449e3d9b0 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Mon, 16 Oct 2023 14:40:25 +0200
Subject: [PATCH] fix(storage): rework NeRadioSelection storage card

- update @nethserver/vue-tailwind-lib
- rework storage card with updated NeRadioSelection
---
 package-lock.json                           |  8 +++---
 package.json                                |  2 +-
 src/views/standalone/system/StorageView.vue | 30 +++++++++++++++++++--
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b1bef388..3f8998f14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@headlessui/vue": "^1.7.13",
         "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-        "@nethserver/vue-tailwind-lib": "^0.0.79",
+        "@nethserver/vue-tailwind-lib": "^0.0.80",
         "@types/lodash": "^4.14.195",
         "axios": "^1.4.0",
         "chart.js": "^4.4.0",
@@ -1275,9 +1275,9 @@
       }
     },
     "node_modules/@nethserver/vue-tailwind-lib": {
-      "version": "0.0.79",
-      "resolved": "https://registry.npmmirror.com/@nethserver/vue-tailwind-lib/-/vue-tailwind-lib-0.0.79.tgz",
-      "integrity": "sha512-oscpVqhP5EYLd4gD2oyrWf3kY1xUXwdzioXGnCYFDf+o9dm/qE3M6Haq9fvTr0bkKTLRKzKzYwcJfSPE2SfwSg==",
+      "version": "0.0.80",
+      "resolved": "https://registry.npmjs.org/@nethserver/vue-tailwind-lib/-/vue-tailwind-lib-0.0.80.tgz",
+      "integrity": "sha512-fycwH2GfCWC2FkQxfsh6TMQcVSEfwpCVSMN8BlpKaCdRCjpSMtRk4Y7yD2Zbo4XduEmpwxZaMeQ9rg6wEe2NzA==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "github:nethesis/Font-Awesome#solid",
diff --git a/package.json b/package.json
index a1a0e6bed..250b520ae 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@headlessui/vue": "^1.7.13",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethserver/vue-tailwind-lib": "^0.0.79",
+    "@nethserver/vue-tailwind-lib": "^0.0.80",
     "@types/lodash": "^4.14.195",
     "axios": "^1.4.0",
     "chart.js": "^4.4.0",
diff --git a/src/views/standalone/system/StorageView.vue b/src/views/standalone/system/StorageView.vue
index 775550041..e278c12cb 100644
--- a/src/views/standalone/system/StorageView.vue
+++ b/src/views/standalone/system/StorageView.vue
@@ -40,7 +40,6 @@ const deviceOptions = computed(() =>
   availableDevices.value.map((storage) => ({
     id: storage.path!,
     label: storage.name!,
-    description: `${storage.path} | ${storage.size} ${storage.model ? `| ${storage.model}` : ''}`,
     icon: 'hard-drive'
   }))
 )
@@ -169,7 +168,34 @@ onMounted(() => {
           v-model="selectedDevicePath"
           :card="true"
           :label="''"
-        />
+        >
+          <template #option="{ option }">
+            <div class="flex flex-col text-left">
+              <p class="mb-1 text-sm">{{ option.label }} ({{ option.id }})</p>
+              <p class="text-sm">
+                <strong>{{ t('standalone.storage.size') }}:</strong>
+                {{
+                  availableDevices.find((device) => device.name == option.label)?.size ??
+                  t('standalone.storage.unknown')
+                }}
+              </p>
+              <p class="text-sm">
+                <strong>{{ t('standalone.storage.model') }}:</strong>
+                {{
+                  availableDevices.find((device) => device.name == option.label)?.model ??
+                  t('standalone.storage.unknown')
+                }}
+              </p>
+              <p class="text-sm">
+                <strong>{{ t('standalone.storage.vendor') }}:</strong>
+                {{
+                  availableDevices.find((device) => device.name == option.label)?.vendor ??
+                  t('standalone.storage.unknown')
+                }}
+              </p>
+            </div>
+          </template>
+        </NeRadioSelection>
       </div>
       <div>
         <NeButton