fix(storage): rework NeRadioSelection storage card

- update @nethserver/vue-tailwind-lib - rework storage card with updated NeRadioSelection
NethServer · Oct 16, 2023 · a122b99 · a122b99
1 parent 8f1e3d6
commit a122b99
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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