josedario87
fd86acbbfa
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 55s
- Nuevo endpoint /api/authentik/applications para obtener apps del usuario - Componente ApplicationsList que muestra apps en grid responsivo - Filtrado por grupos del usuario (basado en headers de Authentik) - UI con iconos, badges de grupos y redirección a cada app - Refresh automático cada 5 minutos
113 lines
3.6 KiB
Vue
113 lines
3.6 KiB
Vue
<template>
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-semibold text-lg flex items-center gap-2">
|
|
<UIcon name="i-heroicons-squares-2x2" />
|
|
Mis Aplicaciones
|
|
</h3>
|
|
<UBadge v-if="applications.length > 0" color="primary" variant="soft">
|
|
{{ applications.length }}
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="pending" class="flex justify-center py-8">
|
|
<UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary" />
|
|
</div>
|
|
|
|
<div v-else-if="error" class="text-center py-8">
|
|
<UIcon name="i-heroicons-exclamation-triangle" class="w-12 h-12 mx-auto mb-4 text-error" />
|
|
<p class="text-error font-semibold">Error al cargar aplicaciones</p>
|
|
<p class="text-sm text-gray-500 mt-2">{{ error.message }}</p>
|
|
</div>
|
|
|
|
<div v-else-if="applications.length === 0" class="text-center py-8">
|
|
<UIcon name="i-heroicons-inbox" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
|
<p class="text-gray-600 dark:text-gray-400">No tienes aplicaciones disponibles</p>
|
|
</div>
|
|
|
|
<div v-else class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
<a
|
|
v-for="app in applications"
|
|
:key="app.pk"
|
|
:href="app.launchUrl"
|
|
:target="app.openInNewTab ? '_blank' : '_self'"
|
|
class="group block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary hover:bg-primary/5 transition-all duration-200"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
|
<UIcon
|
|
v-if="app.icon"
|
|
:name="app.icon"
|
|
class="w-6 h-6 text-primary"
|
|
/>
|
|
<UIcon
|
|
v-else
|
|
name="i-heroicons-cube"
|
|
class="w-6 h-6 text-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h4 class="font-semibold text-sm truncate group-hover:text-primary transition-colors">
|
|
{{ app.name }}
|
|
</h4>
|
|
<UIcon
|
|
v-if="app.openInNewTab"
|
|
name="i-heroicons-arrow-top-right-on-square"
|
|
class="w-4 h-4 text-gray-400 flex-shrink-0"
|
|
/>
|
|
</div>
|
|
|
|
<p v-if="app.description" class="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
|
|
{{ app.description }}
|
|
</p>
|
|
|
|
<div v-if="app.group" class="mt-2 flex flex-wrap gap-1">
|
|
<UBadge
|
|
v-for="group in app.group.split(',')"
|
|
:key="group"
|
|
size="xs"
|
|
color="neutral"
|
|
variant="soft"
|
|
>
|
|
{{ group.trim() }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Application {
|
|
pk: string
|
|
name: string
|
|
slug: string
|
|
launchUrl: string
|
|
description?: string
|
|
icon?: string
|
|
publisher?: string
|
|
group?: string
|
|
openInNewTab: boolean
|
|
}
|
|
|
|
const { data: applications, pending, error, refresh } = await useFetch<Application[]>('/api/authentik/applications', {
|
|
default: () => []
|
|
})
|
|
|
|
// Refrescar automáticamente cada 5 minutos
|
|
const refreshInterval = setInterval(() => {
|
|
refresh()
|
|
}, 5 * 60 * 1000)
|
|
|
|
// Limpiar interval cuando el componente se desmonte
|
|
onUnmounted(() => {
|
|
clearInterval(refreshInterval)
|
|
})
|
|
</script>
|