@xen-orchestra/web-core 0.0.2 → 0.0.4

package/lib/components/task/QuickTaskPanel.vue

@@ -0,0 +1,65 @@
+<template>
+  <div :class="{ mobile: isMobile }" class="vts-quick-tasks">
+    <QuickTaskTabBar
+      v-model="currentTab"
+      :failure-count="failureTasks.length"
+      :loading
+      :pending-count="pendingTasks.length"
+      :success-count="successTasks.length"
+    />
+    <QuickTaskList :loading :tasks="currentTasks" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import QuickTaskList from '@core/components/task/QuickTaskList.vue'
+import QuickTaskTabBar from '@core/components/task/QuickTaskTabBar.vue'
+import { useUiStore } from '@core/stores/ui.store'
+import type { Task, TaskTab } from '@core/types/task.type'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  tasks: Task[]
+  loading?: boolean
+}>()
+
+const { isMobile } = useUiStore()
+
+const currentTab = ref<TaskTab>('pending')
+
+const pendingTasks = computed(() => props.tasks.filter(task => task.status === 'pending'))
+const successTasks = computed(() => props.tasks.filter(task => task.status === 'success'))
+const failureTasks = computed(() => props.tasks.filter(task => task.status === 'failure'))
+
+const currentTasks = computed(() => {
+  switch (currentTab.value) {
+    case 'pending':
+      return pendingTasks.value
+    case 'success':
+      return successTasks.value
+    case 'failure':
+      return failureTasks.value
+    case 'all':
+      return props.tasks
+    default:
+      return []
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-quick-tasks {
+  width: fit-content;
+  min-width: 65rem;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  border: 0.1rem solid var(--color-grey-500);
+  z-index: 1001;
+
+  &.mobile {
+    width: 100%;
+    min-width: 0;
+    border-radius: 0;
+  }
+}
+</style>

package/lib/components/task/QuickTaskTabBar.vue

@@ -0,0 +1,46 @@
+<template>
+  <TabList :disabled="loading">
+    <TabItem v-bind="tabs.pending.bindings">
+      {{ $t('tasks.quick-view.in-progress') }}
+      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" color="info" />
+    </TabItem>
+    <TabItem v-bind="tabs.success.bindings">
+      {{ $t('tasks.quick-view.done') }}
+      <UiCounter v-if="successCount !== undefined" :value="successCount" color="success" />
+    </TabItem>
+    <TabItem v-bind="tabs.failure.bindings">
+      {{ $t('tasks.quick-view.failed') }}
+      <UiCounter v-if="failureCount !== undefined" :value="failureCount" color="danger" />
+    </TabItem>
+    <Divider type="tab" />
+    <TabItem v-bind="tabs.all.bindings">
+      {{ $t('tasks.quick-view.all') }}
+    </TabItem>
+    <!--
+    TODO
+    <UiButton :right-icon="faAngleRight" class="see-all" level="tertiary" size="extra-small">
+      {{ $t('see-all') }}
+    </UiButton>
+    -->
+  </TabList>
+</template>
+
+<script lang="ts" setup>
+import Divider from '@core/components/divider/Divider.vue'
+import TabItem from '@core/components/tab/TabItem.vue'
+import TabList from '@core/components/tab/TabList.vue'
+import UiCounter from '@core/components/UiCounter.vue'
+import { useTabList } from '@core/composables/tab-list.composable'
+import type { TaskTab } from '@core/types/task.type'
+
+defineProps<{
+  loading?: boolean
+  pendingCount?: number
+  successCount?: number
+  failureCount?: number
+}>()
+
+const currentTab = defineModel<TaskTab>({ required: true })
+
+const { tabs } = useTabList<TaskTab>(['pending', 'success', 'failure', 'all'], currentTab)
+</script>

package/lib/components/tooltip/TooltipList.vue

@@ -11,5 +11,3 @@ import { storeToRefs } from 'pinia'
 const tooltipStore = useTooltipStore()
 const { tooltips } = storeToRefs(tooltipStore)
 </script>
-
-<style scoped></style>

package/lib/components/tree/TreeItem.vue

@@ -2,22 +2,23 @@
 <template>
   <li class="tree-item">
     <slot />
-    <slot v-if="isExpanded" name="sublist" />
+    <slot v-if="expanded" name="sublist" />
   </li>
 </template>
 
 <script lang="ts" setup>
-import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_ITEM_TOGGLE } from '@core/utils/injection-keys.util'
-import { useToggle } from '@vueuse/core'
-import { onBeforeMount, onBeforeUpdate, provide, ref, useSlots } from 'vue'
+import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util'
+import { onBeforeMount, onBeforeUpdate, provide, ref, toRef, useSlots } from 'vue'
+
+const props = defineProps<{
+  expanded?: boolean
+}>()
 
 defineSlots<{
   default: () => void
   sublist: () => void
 }>()
 
-const [isExpanded, toggle] = useToggle(true)
-
 const hasChildren = ref(false)
 
 const updateHasChildren = () => {
@@ -29,6 +30,5 @@ onBeforeMount(() => updateHasChildren())
 onBeforeUpdate(() => updateHasChildren())
 
 provide(IK_TREE_ITEM_HAS_CHILDREN, hasChildren)
-provide(IK_TREE_ITEM_TOGGLE, toggle)
-provide(IK_TREE_ITEM_EXPANDED, isExpanded)
+provide(IK_TREE_ITEM_EXPANDED, toRef(props, 'expanded'))
 </script>

package/lib/components/tree/TreeItemLabel.vue

@@ -1,8 +1,8 @@
 <!-- v1.1 -->
 <template>
-  <RouterLink v-slot="{ isExactActive, href, navigate }" :to="route" custom>
+  <RouterLink v-slot="{ isExactActive, isActive, href, navigate }" :to="route" custom>
     <div
-      :class="isExactActive ? 'exact-active' : active ? 'active' : undefined"
+      :class="isExactActive ? 'exact-active' : active || isActive ? 'active' : undefined"
       class="tree-item-label"
       v-bind="$attrs"
     >
@@ -17,16 +17,17 @@
       <ButtonIcon
         v-if="hasToggle"
         v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
+        class="toggle"
         :icon="isExpanded ? faAngleDown : faAngleRight"
         size="small"
-        @click="toggle()"
+        @click="emit('toggle')"
       />
-      <TreeLine v-else-if="!noIndent" />
+      <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
           <UiIcon :icon class="icon" />
         </slot>
-        <div class="text">
+        <div class="text text-ellipsis">
           <slot />
         </div>
       </a>
@@ -40,27 +41,28 @@ import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import TreeLine from '@core/components/tree/TreeLine.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import {
-  IK_TREE_ITEM_EXPANDED,
-  IK_TREE_ITEM_HAS_CHILDREN,
-  IK_TREE_ITEM_TOGGLE,
-  IK_TREE_LIST_DEPTH,
-} from '@core/utils/injection-keys.util'
+import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineProps<{
   icon?: IconDefinition
   route: RouteLocationRaw
   active?: boolean
-  noIndent?: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: []
 }>()
 
 const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))
 
-const toggle = inject(IK_TREE_ITEM_TOGGLE, () => undefined)
 const isExpanded = inject(IK_TREE_ITEM_EXPANDED, ref(true))
 
 const depth = inject(IK_TREE_LIST_DEPTH, 0)
@@ -116,13 +118,27 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 }
 
 .text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   padding-inline-end: 0.4rem;
 }
 
 .icon {
   font-size: 1.6rem;
 }
+
+.h-line {
+  width: 2rem;
+  border-bottom: 0.1rem solid var(--color-purple-base);
+  margin-left: -0.4rem;
+}
+
+/*
+ * Increase the size of the clickable area,
+ * without changing the padding of the ButtonIcon component
+ */
+.toggle::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: scale(1.5, 2);
+}
 </style>

package/lib/composables/tab-list.composable.ts

@@ -0,0 +1,33 @@
+import type { Tab, TabList } from '@core/types/tab.type'
+import { computed, type MaybeRefOrGetter, type Ref, toRef } from 'vue'
+
+export function useTabList<TName extends string>(names: TName[], initialTab?: MaybeRefOrGetter<TName>) {
+  const currentTab = toRef(initialTab) as Ref<TName | undefined>
+
+  const activate = (name: TName | undefined) => {
+    currentTab.value = name
+  }
+
+  const isActive = (name: TName) => currentTab.value === name
+
+  const tabs = computed(() => {
+    return Object.fromEntries(
+      names.map(name => [
+        name,
+        {
+          isActive: isActive(name),
+          activate: () => activate(name),
+          bindings: {
+            onClick: (event: MouseEvent) => {
+              event.preventDefault()
+              activate(name)
+            },
+            active: isActive(name),
+          },
+        },
+      ])
+    ) as Record<TName, Tab>
+  })
+
+  return { currentTab, activate, isActive, tabs } as TabList<TName>
+}

package/lib/composables/tree/branch.ts

@@ -40,7 +40,11 @@ export class Branch<
   }
 
   get failsFilterDownwards(): boolean {
-    return this.passesFilter !== true && this.rawChildren.every(child => child.failsFilterDownwards)
+    if (this.passesFilter !== undefined) {
+      return !this.passesFilter
+    }
+
+    return this.rawChildren.length > 0 && this.rawChildren.every(child => child.failsFilterDownwards)
   }
 
   get isExcluded() {
@@ -48,10 +52,6 @@ export class Branch<
       return true
     }
 
-    if (!this.hasChildren) {
-      return true
-    }
-
     if (this.passesFilterUpwards || this.passesFilterDownwards) {
       return false
     }

package/lib/composables/tree/types.ts

@@ -1,9 +1,9 @@
-import { useTree } from '@core/composables/tree.composable'
 import type { Branch } from '@core/composables/tree/branch'
 import type { BranchDefinition } from '@core/composables/tree/branch-definition'
 import type { Leaf } from '@core/composables/tree/leaf'
 import type { LeafDefinition } from '@core/composables/tree/leaf-definition'
 import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import { useTree } from '@core/composables/tree.composable'
 
 export type TreeNodeId = string | number
 

package/lib/i18n.ts

@@ -1,5 +1,5 @@
-import { createI18n } from 'vue-i18n'
 import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
 
 interface Locales {
   [key: string]: {
@@ -21,12 +21,25 @@ export const locales: Locales = {
     code: 'de',
     name: 'Deutsch',
   },
+  fa: {
+    code: 'fa',
+    name: 'Persian',
+  },
 }
 
 export default createI18n({
   locale: localStorage.getItem('lang') ?? 'en',
   fallbackLocale: 'en',
   messages,
+  missing: (locale, key, vm) => {
+    if (!import.meta.env.DEV) {
+      return key
+    }
+
+    console.warn(`i18n key not found: ${key}`, `Used in ${vm?.type.__name ?? 'unknown component'}`)
+
+    return `🌎❗⟨${key}⟩`
+  },
   datetimeFormats: {
     en: {
       date_short: {
@@ -154,5 +167,77 @@ export default createI18n({
         minute: '2-digit',
       },
     },
+    fa: {
+      date_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+      },
+      date_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      },
+      date_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+      datetime_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    },
+  },
+  numberFormats: {
+    en: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+    fr: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+    de: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+    fa: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
   },
 })

package/lib/layouts/CoreLayout.vue

@@ -14,11 +14,7 @@
       <slot name="app-header" />
     </header>
     <div class="container">
-      <div
-        v-if="sidebarStore.isExpanded && !sidebarStore.isLocked"
-        class="sidebar-overlay"
-        @click="sidebarStore.toggleExpand(false)"
-      />
+      <Backdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
       <LayoutSidebar class="sidebar">
         <template #header>
           <slot name="sidebar-header" />
@@ -30,76 +26,25 @@
           <slot name="sidebar-footer" />
         </template>
       </LayoutSidebar>
-      <div class="main-container">
-        <header>
-          <slot name="content-header" />
-        </header>
-        <main class="main">
-          <div class="content">
-            <slot name="content" />
-          </div>
-          <div v-if="isPanelVisible" :class="{ mobile: uiStore.isMobile }" class="panel">
-            <header v-if="$slots['panel-header'] || uiStore.isMobile" class="panel-header">
-              <UiButtonIcon
-                v-if="uiStore.isMobile"
-                :icon="faAngleLeft"
-                class="panel-close-icon"
-                @click="panelStore.close()"
-              />
-              <slot name="panel-header" />
-            </header>
-            <div v-if="$slots['panel-content']" class="panel-content">
-              <slot name="panel-content" />
-            </div>
-          </div>
-        </main>
-      </div>
+      <main class="main-container">
+        <slot name="content" />
+      </main>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import Backdrop from '@core/components/backdrop/Backdrop.vue'
 import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
 import LayoutSidebar from '@core/components/layout/LayoutSidebar.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { usePanelStore } from '@core/stores/panel.store'
 import { useSidebarStore } from '@core/stores/sidebar.store'
-import { useUiStore } from '@core/stores/ui.store'
-import { faAngleDoubleLeft, faAngleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import { faAngleDoubleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
 
 const sidebarStore = useSidebarStore()
-const panelStore = usePanelStore()
-const uiStore = useUiStore()
-
-const slots = defineSlots<{
-  'app-logo'(): any
-  'app-header'(): any
-  'sidebar-header'(): any
-  'sidebar-content'(): any
-  'sidebar-footer'(): any
-  'content-header'(): any
-  content(): any
-  'panel-header'(): any
-  'panel-content'(): any
-}>()
-
-const isPanelVisible = computed(() => {
-  if (!slots['panel-header'] && !slots['panel-content']) {
-    return false
-  }
-
-  return panelStore.isExpanded
-})
 </script>
 
 <style lang="postcss" scoped>
-.sidebar-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
 .core-layout {
   display: flex;
   height: 100dvh;
@@ -132,51 +77,6 @@ const isPanelVisible = computed(() => {
   overflow: auto;
   display: flex;
   flex-direction: column;
-}
-
-.main {
-  background-color: var(--background-color-secondary);
-  display: flex;
-  flex: 1;
-}
-
-.content {
-  padding: 0.8rem;
-  flex: 1;
-  border-right: 0.1rem solid var(--color-grey-500);
-}
-
-.panel {
-  display: flex;
-  flex-direction: column;
-  width: 40rem;
   background-color: var(--background-color-secondary);
-
-  &.mobile {
-    width: 100%;
-    position: fixed;
-    inset: 0 0 0 auto;
-    z-index: 1000;
-  }
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  padding: 0.4rem 1.6rem;
-  background-color: var(--background-color-primary);
-  border-bottom: 0.1rem solid var(--color-grey-500);
-  min-height: 4.8rem;
-}
-
-.panel-close-icon {
-  margin-right: auto;
-}
-
-.panel-content {
-  flex: 1;
-  padding: 0.8rem;
-  overflow: auto;
-  min-height: 0;
 }
 </style>

package/lib/locales/de.json

@@ -1,6 +1,39 @@
 {
-  "core": {
-    "close": "Schließen",
-    "log-out": "Abmelden"
-  }
+  "alarms": "Alarme",
+
+  "bytes.ki": "KiB",
+  "bytes.mi": "MiB",
+  "bytes.gi": "GiB",
+
+  "coming-soon": "Bald verfügbar!",
+  "console": "Konsole",
+
+  "core.close": "Schließen",
+
+  "core.select.all": "Alles auswählen",
+  "core.select.none": "Alle abwählen",
+
+  "dark-mode.enable": "Aktivieren Sie den Dunkelmodus",
+  "dark-mode.disable": "Deaktivieren Sie den Dunkelmodus",
+  "dark-mode.auto": "Automatischer Dunkelmodus",
+
+  "dashboard": "Dashboard",
+  "documentation-name": "{name} Dokumentation",
+  "hosts": "Hosts",
+  "loading-in-progress": "Ladevorgang läuft…",
+  "log-out": "Abmelden",
+  "master": "Primärer Host",
+  "n-vms": "1 VM | {n} VMs",
+  "network": "Netzwerk",
+  "object-not-found": "Objekt {id} wurde nicht gefunden…",
+  "power-on-for-console": "Konsole ist nach Start der VM verfügbar",
+  "stats": "Statistiken",
+  "storage": "Speicher",
+  "support-name": "{name} pro support",
+  "system": "System",
+
+  "tasks": "Aufgaben",
+  "tasks.quick-view": "Schnellansicht der Aufgaben",
+
+  "vms": "VMs"
 }