feat(web-core):feedback

@xen-orchestra/lite/src/locales/de.json

@@ -65,7 +65,6 @@
   "documentation": "Dokumentation",
   "edit-config": "Einstellungen anpassen",
   "enabled": "Aktiviert",
-  "error-no-data": "Fehler beim Datenabruf.",
   "error-occurred": "Ein Fehler ist aufgetreten",
   "export": "Exportieren",
   "export-n-vms": "1 VM exportieren | {n} VMs exportieren",

@xen-orchestra/lite/src/locales/fa.json

@@ -66,7 +66,6 @@
   "documentation": "مستندات",
   "edit-config": "ویرایش پیکربندی",
   "enabled": "فعال",
-  "error-no-data": "خطا، نمی توان داده ها را جمع آوری کرد.",
   "error-occurred": "خطایی رخ داده است",
   "export": "صادر کردن",
   "export-n-vms": "صادر کردن 1 ماشین مجازی | {n} ماشین مجازی را صادر کنید",

@xen-orchestra/lite/src/stories/web-core/state-hero/vts-coming-soon-hero.story.vue

@@ -1,7 +1,7 @@
 <template>
   <ComponentStory
     v-slot="{ properties }"
-    :params="[prop('type').required().enum('page', 'card').preset('card').widget()]"
+    :params="[prop('type').required().enum('page', 'card', 'table', 'panel').preset('card').widget()]"
   >
     <VtsComingSoonHero v-bind="properties" />
   </ComponentStory>

@xen-orchestra/lite/src/stories/web-core/state-hero/vts-error-no-data-hero.story.vue

@@ -0,0 +1,14 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[prop('type').required().enum('page', 'card', 'table', 'panel').preset('card').widget()]"
+  >
+    <VtsErrorNoDataHero v-bind="properties" />
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop } from '@/libs/story/story-param'
+import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
+</script>

@xen-orchestra/lite/src/stories/web-core/state-hero/vts-loading-hero.story.vue

@@ -2,7 +2,7 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('type').required().enum('page', 'card').preset('card').widget(),
+      prop('type').required().enum('page', 'card', 'table', 'panel').preset('card').widget(),
       prop('disabled').bool().widget(),
       slot(),
       setting('slotContent').preset('Content to show when loader is disabled').widget(),

@xen-orchestra/lite/src/stories/web-core/state-hero/vts-no-data-hero.story.vue

@@ -1,7 +1,7 @@
 <template>
   <ComponentStory
     v-slot="{ properties }"
-    :params="[prop('type').required().enum('page', 'card').preset('card').widget()]"
+    :params="[prop('type').required().enum('page', 'card', 'table', 'panel').preset('card').widget()]"
   >
     <VtsNoDataHero v-bind="properties" />
   </ComponentStory>

@xen-orchestra/lite/src/stories/web-core/state-hero/vts-object-not-found-hero.story.vue

@@ -1,5 +1,11 @@
 <template>
-  <ComponentStory v-slot="{ properties }" :params="[prop('id').required().str().preset('123-456-789').widget()]">
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('id').required().str().preset('123-456-789').widget(),
+      prop('type').required().enum('page', 'card', 'table', 'panel').preset('card').widget(),
+    ]"
+  >
     <VtsObjectNotFoundHero v-bind="properties" />
   </ComponentStory>
 </template>

@xen-orchestra/web-core/lib/components/state-hero/VtsErrorNoDataHero.vue

@@ -0,0 +1,11 @@
+<template>
+  <VtsStateHero class="vts-error-hero" image="error-no-data" :type>{{ $t('error-no-data') }}</VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="type" class="vts-state-hero">
+  <div :class="[type, { error }]" class="vts-state-hero">
     <UiLoader v-if="busy" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
     <p v-if="slots.default" :class="typoClass" class="text">
@@ -12,19 +12,20 @@
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { computed } from 'vue'
 
-export type StateHeroType = 'page' | 'card' | 'panel'
+export type StateHeroType = 'page' | 'card' | 'panel' | 'table'
 
 const props = defineProps<{
   type: StateHeroType
   busy?: boolean
-  image?: 'no-result' | 'under-construction' | 'no-data' | 'no-selection' | 'error' | 'not-found' // TODO: 'offline' | 'all-good' | 'all-done''
+  image?: 'no-result' | 'under-construction' | 'no-data' | 'no-selection' | 'error-no-data' // TODO: 'offline' |  'not-found' | 'all-good' | 'all-done''
 }>()
 
 const slots = defineSlots<{
   default?(): any
 }>()
 
 const typoClass = computed(() => (props.type === 'page' ? 'typo h2-black' : 'typo h4-medium'))
+const error = computed(() => !props.busy && props.image === 'error-no-data')
 
 const imageSrc = computed(() => {
   if (!props.image) {
@@ -43,6 +44,14 @@ const imageSrc = computed(() => {
   align-items: center;
   justify-content: center;
 
+  &.error {
+    background-color: var(--color-danger-background-selected);
+
+    .text {
+      color: var(--color-danger-txt-base);
+    }
+  }
+
   .loader,
   .text {
     color: var(--color-info-txt-base);
@@ -100,11 +109,11 @@ const imageSrc = computed(() => {
     padding-top: 8rem;
 
     .text {
-      order: 1;
+      order: 3;
     }
 
     .loader {
-      order: 3;
+      order: 1;
       font-size: 6.4rem;
     }
 
@@ -113,5 +122,24 @@ const imageSrc = computed(() => {
       width: 80%;
     }
   }
+
+  &.table {
+    padding: 5rem;
+    gap: 2.4rem;
+
+    .text {
+      order: 3;
+    }
+
+    .image {
+      order: 2;
+      max-height: 20rem;
+    }
+
+    .loader {
+      order: 1;
+      font-size: 10rem;
+    }
+  }
 }
 </style>

@xen-orchestra/web-core/lib/locales/de.json

@@ -19,6 +19,7 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} Dokumentation",
+  "error-no-data": "Fehler beim Datenabruf.",
   "fullscreen": "Vollbild",
   "hosts": "Hosts",
   "learn-more": "Mehr erfahren",

@xen-orchestra/web-core/lib/locales/fa.json

@@ -33,6 +33,7 @@
 
   "dashboard": "داشبورد",
   "documentation-name": "اسناد {name}",
+  "error-no-data": "خطا، نمی توان داده ها را جمع آوری کرد.",
   "fullscreen": "تمام صفحه",
   "learn-more": "بیشتر بدانید",
   "loading-in-progress": "بارگیری در حال انجام است…",

@xen-orchestra/web/src/pages/host/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <VtsLoadingHero v-if="!isReady" type="page" />
-  <VtsObjectNotFoundHero v-else-if="!host" :id="route.params.id" />
+  <VtsObjectNotFoundHero v-else-if="!host" :id="route.params.id" type="page" />
   <RouterView v-else v-slot="{ Component }">
     <HostHeader :host />
     <component :is="Component" :host />

@xen-orchestra/web/src/pages/pool/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <VtsLoadingHero v-if="!isReady" type="page" />
-  <VtsObjectNotFoundHero v-else-if="!pool" :id="route.params.id" />
+  <VtsObjectNotFoundHero v-else-if="!pool" :id="route.params.id" type="page" />
   <RouterView v-else v-slot="{ Component }">
     <PoolHeader :pool />
     <component :is="Component" :pool />

@xen-orchestra/web/src/pages/vm/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <VtsLoadingHero v-if="!isReady" type="page" />
-  <VtsObjectNotFoundHero v-else-if="!vm" :id="route.params.id" />
+  <VtsObjectNotFoundHero v-else-if="!vm" :id="route.params.id" type="page" />
   <RouterView v-else v-slot="{ Component }">
     <VmHeader :vm />
     <component :is="Component" :vm />