@xen-orchestra/web-core 0.0.3 → 0.0.5

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/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,12 +41,7 @@ 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'
@@ -59,12 +55,14 @@ 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)
@@ -120,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/item-counter.composable.md

@@ -0,0 +1,25 @@
+# `useItemCounter`
+
+This composable is meant to count items based on given filters then output the categorized count.
+
+## Usage
+
+```typescript
+const collection = [
+  { id: 'a', size: 'S' },
+  { id: 'b', size: 'S' },
+  { id: 'c', size: 'XL' },
+  { id: 'd', size: 'M' },
+  { id: 'e', size: 'L' },
+  { id: 'f', size: 'S' },
+]
+
+const count = useItemCounter(collection, {
+  small: item => item.size === 'S',
+  medium: item => item.size === 'M',
+})
+
+console.log(count.small) // 3
+console.log(count.medium) // 1
+console.log(count.$other) // 2
+```

package/lib/composables/item-counter.composable.ts

@@ -0,0 +1,32 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+type Counters<TConfig> = { [K in keyof TConfig | '$other']: number }
+
+export function useItemCounter<TItem, TConfig extends Record<string, (item: TItem) => boolean>>(
+  items: MaybeRefOrGetter<TItem[]>,
+  config: TConfig
+) {
+  const keys = Object.keys(config) as (keyof TConfig)[]
+
+  return computed(() => {
+    const counters = Object.fromEntries(keys.concat('$other').map(key => [key, 0])) as Counters<TConfig>
+
+    for (const item of toValue(items)) {
+      let matched = false
+
+      for (const key of keys) {
+        if (config[key](item)) {
+          matched = true
+          counters[key] += 1
+          break
+        }
+      }
+
+      if (!matched) {
+        counters.$other += 1
+      }
+    }
+
+    return counters
+  })
+}

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/i18n.ts

@@ -21,6 +21,10 @@ export const locales: Locales = {
     code: 'de',
     name: 'Deutsch',
   },
+  fa: {
+    code: 'fa',
+    name: 'Persian',
+  },
 }
 
 export default createI18n({
@@ -163,6 +167,48 @@ 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: {
@@ -186,5 +232,12 @@ export default createI18n({
         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-close-backdrop"
-        @click="sidebarStore.toggleExpand(false)"
-      />
+      <Backdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
       <LayoutSidebar class="sidebar">
         <template #header>
           <slot name="sidebar-header" />
@@ -38,6 +34,7 @@
 </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'
@@ -48,12 +45,6 @@ const sidebarStore = useSidebarStore()
 </script>
 
 <style lang="postcss" scoped>
-.sidebar-close-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
 .core-layout {
   display: flex;
   height: 100dvh;

package/lib/locales/de.json

@@ -19,9 +19,11 @@
 
   "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",
@@ -29,5 +31,9 @@
   "storage": "Speicher",
   "support-name": "{name} pro support",
   "system": "System",
-  "tasks": "Aufgaben"
+
+  "tasks": "Aufgaben",
+  "tasks.quick-view": "Schnellansicht der Aufgaben",
+
+  "vms": "VMs"
 }

package/lib/locales/en.json

@@ -8,6 +8,8 @@
   "coming-soon": "Coming soon!",
   "console": "Console",
 
+  "core.copied": "Copied",
+  "core.copy-id": "Copy ID",
   "core.close": "Close",
   "core.current": "Current",
   "core.filter": "Filter",
@@ -16,6 +18,12 @@
   "core.open": "Open",
   "core.quick-actions": "Quick actions",
 
+  "core.search": "Search",
+
+  "core.search-bar.label": "Search Engine",
+  "core.search-bar.placeholder": "Write your query…",
+  "core.search-bar.use-query-builder": "Use query builder",
+
   "core.select.all": "Select all",
   "core.select.none": "Select none",
 
@@ -33,15 +41,29 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} documentation",
+  "hosts": "Hosts",
   "loading-in-progress": "Loading in progress…",
   "log-out": "Log out",
   "master": "Primary host",
+  "n-vms": "1 VM | {n} VMs",
   "network": "Network",
   "object-not-found": "Object {id} can't be found…",
   "power-on-for-console": "Power on your VM to access its console",
+  "see-all": "See all",
   "stats": "Stats",
   "storage": "Storage",
   "support-name": "{name} pro support",
   "system": "System",
-  "tasks": "Tasks"
+
+  "tasks": "Tasks",
+  "tasks.n-subtasks": "{n} subtask | {n} subtasks",
+  "tasks.no-tasks": "No tasks",
+  "tasks.quick-view": "Tasks' quick view",
+  "tasks.quick-view.all": "All",
+  "tasks.quick-view.done": "Done",
+  "tasks.quick-view.failed": "Failed",
+  "tasks.quick-view.in-progress": "In progress",
+
+  "total": "Total",
+  "vms": "VMs"
 }

package/lib/locales/fa.json

@@ -0,0 +1,46 @@
+{
+  "alarms": "هشدارها",
+
+  "bytes.ki": "KiB",
+  "bytes.mi": "MiB",
+  "bytes.gi": "GiB",
+
+  "coming-soon": "به زودی!",
+  "console": "کنسول",
+
+  "core.close": "بستن",
+  "core.current": "جاری",
+  "core.filter": "فیلتر",
+  "core.group": "گروه",
+  "core.hide": "مخفی کردن",
+  "core.open": "باز کردن",
+  "core.quick-actions": "اقدامات سریع",
+
+  "core.select.all": "انتخاب همه",
+  "core.select.none": "انتخاب هیچکدام",
+
+  "core.sidebar.close": "بستن نوار کناری",
+  "core.sidebar.lock": "قفل کردن نوار کناری باز شده",
+  "core.sidebar.open": "باز کردن نوار کناری",
+  "core.sidebar.unlock": "از حالت قفل خارج کردن نوار کناری",
+
+  "core.sort.ascending": "مرتب سازی صعودی",
+  "core.sort.descending": "مرتب سازی نزولی",
+
+  "dark-mode.enable": "فعال کردن حالت تاریک",
+  "dark-mode.disable": "غیر فعال کردن حالت تاریک",
+  "dark-mode.auto": "حالت خودکار تاریک",
+
+  "dashboard": "داشبورد",
+  "documentation-name": "اسناد {name}",
+  "loading-in-progress": "بارگیری در حال انجام است…",
+  "log-out": "خروج",
+  "master": "میزبان اصلی",
+  "network": "شبکه",
+  "power-on-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
+  "stats": "آمار",
+  "storage": "ذخیره سازی",
+  "support-name": "پشتیبانی حرفه ای {name}",
+  "system": "سیستم",
+  "tasks": "کارها"
+}

package/lib/locales/fr.json

@@ -8,6 +8,8 @@
   "coming-soon": "Bientôt disponible !",
   "console": "Console",
 
+  "core.copied": "Copié",
+  "core.copy-id": "Copier l'ID",
   "core.close": "Fermer",
   "core.current": "Actuel",
   "core.filter": "Filtrer",
@@ -16,6 +18,12 @@
   "core.open": "Ouvrir",
   "core.quick-actions": "Actions rapides",
 
+  "core.search": "Rechercher",
+
+  "core.search-bar.label": "Moteur de recherche",
+  "core.search-bar.placeholder": "Écrivez votre requête…",
+  "core.search-bar.use-query-builder": "Utiliser le constructeur de requête",
+
   "core.select.all": "Tout sélectionner",
   "core.select.none": "Tout désélectionner",
 
@@ -33,15 +41,29 @@
 
   "dashboard": "Tableau de bord",
   "documentation-name": "Documentation {name}",
+  "hosts": "Hôtes",
   "loading-in-progress": "Chargement en cours…",
   "log-out": "Se déconnecter",
   "master": "Hôte primaire",
+  "n-vms": "1 VM | {n} VMs",
   "network": "Réseau",
   "object-not-found": "L'objet {id} est introuvable…",
   "power-on-for-console": "Allumez votre VM pour accéder à sa console",
+  "see-all": "Voir tout",
   "stats": "Stats",
   "storage": "Stockage",
   "support-name": "Support pro {name}",
   "system": "Système",
-  "tasks": "Tâches"
+
+  "tasks": "Tâches",
+  "tasks.n-subtasks": "{n} sous-tâche | {n} sous-tâches",
+  "tasks.no-tasks": "Aucune tâche",
+  "tasks.quick-view": "Vue rapide des tâches",
+  "tasks.quick-view.all": "Toutes",
+  "tasks.quick-view.done": "Terminées",
+  "tasks.quick-view.failed": "Échouées",
+  "tasks.quick-view.in-progress": "En cours",
+
+  "total": "Total",
+  "vms": "VMs"
 }