@swiss-ai-hub/web 0.290.11

package/components/Navigation/Left.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    ref="scrollContainerRef"
+    class="fixed flex h-[calc(100vh-50px)] w-[260px] flex-col gap-5 overflow-y-auto overflow-x-hidden bg-surface-50 dark:bg-surface-950"
+  >
+    <p class="pl-3 pt-10 text-sm font-medium text-surface-900 dark:text-white">
+      {{ title }}
+    </p>
+    <div class="flex flex-col gap-5">
+      <div
+        v-for="(navItems, group) in navItemsMap"
+        :key="group"
+      >
+        <div class="w-full pb-1.5 pl-2.5 text-xs font-medium text-surface-500 dark:text-surface-500">
+          {{ group }}
+        </div>
+        <div class="flex flex-col gap-2 pr-2 text-surface-700 dark:text-surface-200">
+          <div
+            v-for="navItem in navItems"
+            :key="navItem.key"
+            class="flex w-full cursor-pointer justify-between text-ellipsis whitespace-nowrap rounded-lg px-[11px] py-[6px] hover:bg-surface-100 dark:hover:bg-surface-950"
+            :class="{ 'bg-surface-200 dark:bg-surface-900': navItem.isActive() }"
+            @click="toNavItem(navItem)"
+          >
+            <div class="flex w-full flex-1 self-center">
+              <div
+                dir="auto"
+                class="h-[20px] w-full self-center overflow-hidden text-left"
+              >
+                {{ navItem.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Loading indicator at the bottom -->
+      <div
+        v-if="loading"
+        class="flex justify-center py-4"
+      >
+        <i class="pi pi-spin pi-spinner text-primary" />
+      </div>
+    </div>
+  </div>
+  <div class="min-w-[260px]" />
+</template>
+
+<script setup lang="ts">
+import { useInfiniteScroll } from '@vueuse/core'
+import { ref } from 'vue'
+
+import type { NavItem } from '@core/types/NavItem'
+
+const props = defineProps<{
+  title: string
+  navItemsMap: Record<string, NavItem[]>
+  hasMore?: boolean
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  loadMore: []
+}>()
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+const scrollContainerRef = ref<HTMLElement | null>(null)
+
+const toNavItem = (navItem: NavItem) => {
+  router.push(tenantPath(navItem.path))
+}
+
+// Set up infinite scroll using vueuse
+useInfiniteScroll(
+  scrollContainerRef,
+  () => {
+    emit('loadMore')
+  },
+  {
+    distance: 10,
+    canLoadMore: () => props.hasMore ?? false,
+  },
+)
+</script>

package/components/Navigation/Top.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="w-full">
+    <div class="flex gap-2 p-1">
+      <Button
+        v-for="navItem in navItems"
+        :key="navItem.key"
+        :label="navItem.name"
+        :variant="navItem.isActive() ? undefined : 'text'"
+        size="small"
+        severity="secondary"
+        @click="toNavItem(navItem)"
+      />
+    </div>
+    <Divider class="my-0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@core/types/NavItem'
+
+defineProps<{
+  navItems: NavItem[]
+}>()
+
+const router = useRouter()
+const tenantPath = useTenantPath()
+
+const toNavItem = (navItem: NavItem) => {
+  router.push(tenantPath(navItem.path))
+}
+</script>

package/components/Notification/Item.vue

@@ -0,0 +1,88 @@
+<template>
+  <li
+    class="flex cursor-pointer items-start gap-4 border-b border-surface-100 p-4 transition-colors duration-200 hover:bg-surface-50 dark:border-surface-800 dark:hover:bg-surface-800"
+    :class="notification.done ? 'opacity-40' : ''"
+  >
+    <Checkbox
+      v-if="showCheckbox"
+      :model-value="isSelected"
+      :binary="true"
+      class="mt-1 shrink-0"
+      @change="$emit('toggle-selection', notification)"
+    />
+    <div class="size-2.5 shrink-0 self-center">
+      <div
+        v-if="!notification.read"
+        class="size-full rounded-full"
+        :class="unreadCircleClasses"
+      />
+    </div>
+    <div class="min-w-0 grow">
+      <div class="flex items-start justify-between gap-2">
+        <button
+          type="button"
+          class="min-w-0 grow cursor-pointer rounded text-left focus:outline-none focus:ring-2 focus:ring-primary-500"
+          @click="$emit('click', notification)"
+        >
+          <p class="mb-1 text-xs font-light opacity-70">
+            {{ timeAgoText }}
+          </p>
+          <h3 class="font-semibold opacity-80">
+            {{ notification.title }}
+          </h3>
+          <p class="text-xs font-light opacity-70">
+            {{ notification.message }}
+          </p>
+        </button>
+
+        <Button
+          :label="t('notification.view_button')"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          size="small"
+          text
+          class="shrink-0 self-start"
+          @click.stop="$emit('click', notification)"
+        />
+      </div>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { useTimeAgo } from '@core/composables/useTimeAgo'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { NotificationDto } from '@core/sdk/client'
+
+const props = defineProps<{
+  notification: NotificationDto
+  isSelected: boolean
+  showCheckbox?: boolean
+}>()
+
+defineEmits<{
+  'click': [notification: NotificationDto]
+  'toggle-selection': [notification: NotificationDto]
+}>()
+
+const { t } = useI18n()
+const { getTimeAgo } = useTimeAgo()
+
+const timeAgoText = computed(() => getTimeAgo(new Date(props.notification.created_at)).text)
+
+const unreadCircleClasses = computed(() => {
+  switch (props.notification.severity) {
+    case 'critical':
+      return 'bg-red-500'
+    case 'high':
+      return 'bg-orange-500'
+    case 'medium':
+      return 'bg-blue-500'
+    case 'low':
+    default:
+      return 'bg-surface-500'
+  }
+})
+</script>

package/components/Notification/NotificationsOverlay.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="relative inline-flex cursor-pointer">
+    <Button
+      v-tooltip.bottom="{ value: t('bar.show_notifications') }"
+      icon="pi pi-bell"
+      variant="text"
+      rounded
+      :aria-label="t('bar.show_notifications')"
+      @click="togglePanel"
+    />
+    <Badge
+      v-if="unreadCount > 0"
+      :value="unreadCount"
+      size="small"
+      severity="danger"
+      class="absolute right-0 top-0 flex -translate-y-1 translate-x-1"
+    />
+  </div>
+
+  <Popover
+    ref="op"
+    class="[--p-popover-background:#f9f9f9] [--p-popover-border-color:#e3e3e3] dark:[--p-popover-background:#0d0d0d] dark:[--p-popover-border-color:#333]"
+    @hide="isPanelOpen = false"
+  >
+    <ScrollPanel>
+      <DataView
+        :value="unreadNotifications"
+        :loading="isLoading"
+        :style="{
+          '--p-dataview-content-background': 'transparent',
+          '--p-dataview-header-background': 'transparent',
+          '--p-dataview-footer-background': 'transparent',
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h2 class="text-xl">
+              {{ t('notification.title') }} ({{ unreadCount }})
+            </h2>
+            <Button
+              v-if="unreadCount > 0"
+              :label="t('notification.mark_all_as_read')"
+              severity="secondary"
+              variant="text"
+              size="small"
+              @click="markAllAsRead"
+            />
+          </div>
+        </template>
+
+        <template #list="{ items }">
+          <ul class="m-0 flex list-none flex-col p-0">
+            <NotificationItem
+              v-for="item in items"
+              :key="item.id"
+              :notification="item"
+              @click="handleNotificationClick"
+            />
+          </ul>
+        </template>
+
+        <template #empty>
+          <div class="flex flex-col items-center justify-center p-8 text-center">
+            <i class="pi pi-bell-slash p-4 text-2xl text-surface-400" />
+            <p class="text-sm text-surface-500 dark:text-surface-400">
+              {{ t('notification.no_unread_notifications') }}
+            </p>
+          </div>
+        </template>
+
+        <template #footer>
+          <div class="text-center dark:border-surface-700">
+            <Button
+              :label="t('notification.view_all')"
+              class="w-full"
+              variant="text"
+              @click="viewAll"
+            />
+          </div>
+        </template>
+      </DataView>
+    </ScrollPanel>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import type { NotificationDto } from '@core/sdk/client'
+
+const { t } = useI18n()
+const op = ref()
+const router = useRouter()
+const tenantPath = useTenantPath()
+const isPanelOpen = ref(false)
+
+const readFilter = ref<boolean | undefined>(false)
+const currentPage = ref(1)
+const pageSize = ref(15)
+const listMinHeight = ref('auto')
+
+const { notifications, isLoading, refetch } = useNotifications({
+  currentPage,
+  pageSize,
+  filters: { read: readFilter },
+})
+
+const { mutate: updateNotification } = useUpdateNotification()
+const { mutate: updateMultipleNotifications } = useUpdateMultipleNotifications()
+const { tenantId } = useTenant()
+
+const unreadNotifications = computed(() => {
+  if (!notifications.value) return []
+  return notifications.value.filter(n => !n.read)
+})
+
+const unreadCount = computed(() => unreadNotifications.value.length)
+
+watch(notifications, (newVal) => {
+  if (newVal.length > 0 && listMinHeight.value === 'auto') {
+    const calculatedHeight = Math.min(newVal.length * 80, 400)
+    listMinHeight.value = `${calculatedHeight}px`
+  }
+})
+
+const togglePanel = (event: Event) => {
+  op.value.toggle(event)
+  isPanelOpen.value = !isPanelOpen.value
+  if (isPanelOpen.value) {
+    listMinHeight.value = 'auto'
+    readFilter.value = false
+    refetch()
+  }
+}
+
+const handleNotificationClick = (notification: NotificationDto) => {
+  if (!notification.read) {
+    updateNotification({ id: notification.id, payload: ref({ read: true }), tenantId: tenantId.value! })
+  }
+  if (notification.link) {
+    router.push(tenantPath(notification.link))
+    op.value.hide()
+  }
+}
+
+const markAllAsRead = () => {
+  const unreadIds = unreadNotifications.value.map(n => n.id)
+  if (unreadIds.length > 0) {
+    updateMultipleNotifications({
+      ids: unreadIds,
+      payload: ref({ read: true }),
+      tenantId: tenantId.value!,
+    })
+    op.value.hide()
+  }
+}
+
+const viewAll = () => {
+  op.value.hide()
+  router.push(tenantPath('/notifications'))
+}
+</script>

package/components/Process/Card.vue

@@ -0,0 +1,119 @@
+<template>
+  <div
+    class="flex cursor-pointer flex-col gap-3 rounded-xl border border-surface-200 p-4 hover:bg-surface-100 dark:border-surface-800 hover:dark:bg-surface-800"
+    :class="{ 'bg-surface-100 dark:bg-surface-800': isActive }"
+    @click="emit('click', process)"
+  >
+    <div class="flex items-center justify-between gap-4">
+      <div class="flex items-center justify-start gap-2">
+        <div
+          class="flex items-center justify-center rounded-full bg-white p-3 dark:bg-surface-900"
+        >
+          <Icon
+            :name="process.process_config.icon"
+            size="1.5em"
+          />
+        </div>
+        <div>
+          <h3 class="font-semibold opacity-80">
+            {{ process?.process_config.name }}
+          </h3>
+          <p class="text-xs font-light opacity-70">
+            {{ process.process_class }} / {{ process.process_id }}
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <Tag
+          v-if="process.is_online"
+          severity="success"
+          :value="t('process.list.online')"
+        />
+        <Tag
+          v-else
+          severity="danger"
+          :value="t('process.list.offline')"
+        />
+        <Button
+          v-if="showDelete"
+          icon="pi pi-trash"
+          severity="secondary"
+          text
+          rounded
+          size="small"
+          :loading="isDeleting"
+          @click.stop="confirmDelete"
+        />
+      </div>
+    </div>
+    <div>
+      <span class="text-xs">
+        {{ process.process_config.description }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FullProcessInstanceDtoReadable } from '@core/sdk/client'
+
+const props = withDefaults(defineProps<{
+  process: FullProcessInstanceDtoReadable
+  showDelete?: boolean
+}>(), {
+  showDelete: true,
+})
+
+const emit = defineEmits<{
+  deleted: [processClass: string, processId: string]
+  click: [process: FullProcessInstanceDtoReadable]
+}>()
+
+const route = useRoute()
+const { t } = useI18n()
+const toast = useToast()
+const confirm = useConfirm()
+const { deleteProcessInstance, isDeleting } = useDeleteProcessInstance()
+
+const isActive = computed(() => {
+  return route.params.process_id === props.process.process_id && route.params.process_class === props.process.process_class
+})
+
+function confirmDelete() {
+  confirm.require({
+    message: t('process.delete.confirmMessage'),
+    header: t('process.delete.title'),
+    icon: 'pi pi-exclamation-triangle',
+    rejectLabel: t('process.create.cancel'),
+    acceptLabel: t('process.delete.button'),
+    acceptClass: 'p-button-danger',
+    accept: handleDelete,
+  })
+}
+
+async function handleDelete() {
+  try {
+    await deleteProcessInstance({
+      processClass: props.process.process_class,
+      processId: props.process.process_id,
+    })
+
+    toast.add({
+      severity: 'success',
+      summary: t('process.delete.success'),
+      life: 3000,
+    })
+
+    emit('deleted', props.process.process_class, props.process.process_id)
+  }
+  catch (error) {
+    console.error('Failed to delete process:', error)
+    toast.add({
+      severity: 'error',
+      summary: t('process.delete.error'),
+      detail: error instanceof Error ? error.message : String(error),
+      life: 5000,
+    })
+  }
+}
+</script>

package/components/Process/Configuration.vue

@@ -0,0 +1,20 @@
+<template>
+  <FormKitDynamicConfiguration
+    :form="form"
+    :initial-data="initialData"
+    @submit="emit('submit', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { FormkitElement } from '@core/sdk/client'
+
+defineProps<{
+  form: FormkitElement[]
+  initialData?: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  submit: [Record<string, unknown>]
+}>()
+</script>