Lizandro GuarnizoandClaude Opus 5
c78fcce89b
AgenteDetail tenía 1026 líneas con las siete pestañas adentro: el estado de todas mezclado en un solo <script setup>, y cualquier cambio en una obligaba a leer las otras seis para saber qué se rompía. Reorganizarla en ese estado sería trabajar a ciegas. Queda en 514 líneas —el encabezado, las pestañas y la carga de datos— más un componente por zona: conocimiento sigue adentro por ahora, y salen auditoría, conexiones, chat, conversaciones, herramientas y canales. El padre sigue siendo dueño de los datos y cada pestaña emite "recargar" en vez de tener su propia copia: con copias por pestaña, ir y volver entre dos mostraba estados distintos de lo mismo. Sin un solo cambio visible, y verificado como tal: se capturaron las siete pestañas antes de empezar y se compararon píxel a píxel después de cada extracción. Las siete dan idénticas — la única diferencia que reporta el comparador está por debajo del umbral y cae exactamente sobre el punto que late en una fuente "procesando", o sea la animación fotografiada en otro instante. Este commit no cambia nada para el usuario. Es la base para poder reorganizar la pantalla sin romperla. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
61 lines
2.5 KiB
Vue
61 lines
2.5 KiB
Vue
<script setup>
|
|
import { api } from '../../lib/api.js'
|
|
import { apiUmind } from '../../lib/contexto.js'
|
|
import UiEmptyState from '../../components/ui/UiEmptyState.vue'
|
|
|
|
const props = defineProps({
|
|
agenteId: { type: Number, required: true },
|
|
conexiones: { type: Array, default: () => [] },
|
|
})
|
|
|
|
// El padre es el dueño de los datos del agente: acá se avisa que cambiaron y
|
|
// él recarga. Si cada pestaña mantuviera su propia copia, volver de una a otra
|
|
// mostraría estados distintos de lo mismo.
|
|
const emit = defineEmits(['recargar'])
|
|
|
|
function conectar(proveedor) {
|
|
// Navegación normal (no fetch): el backend redirige a Google/Microsoft.
|
|
window.location.href = apiUmind(`/umind/conexiones/conectar?agente_id=${props.agenteId}&proveedor=${proveedor}`)
|
|
}
|
|
|
|
async function desconectar(c) {
|
|
if (!confirm(`¿Desconectar la cuenta ${c.email || c.proveedor}?`)) return
|
|
await api.del(apiUmind(`/umind/conexiones/${c.ID}`))
|
|
emit('recargar')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<p class="label mb-4">
|
|
Conectá una cuenta de correo para que este agente pueda enviar y leer correo en su nombre.
|
|
Se soporta una cuenta activa a la vez.
|
|
</p>
|
|
<div class="flex gap-2 mb-4">
|
|
<button class="border border-borde hover:border-brand text-sm font-medium px-4 py-2 rounded-lg text-gray-700 dark:text-gray-200 transition-colors" @click="conectar('google')">
|
|
Conectar Google
|
|
</button>
|
|
<button class="border border-borde hover:border-brand text-sm font-medium px-4 py-2 rounded-lg text-gray-700 dark:text-gray-200 transition-colors" @click="conectar('microsoft')">
|
|
Conectar Outlook
|
|
</button>
|
|
</div>
|
|
<div class="card divide-y divide-borde">
|
|
<UiEmptyState
|
|
v-if="conexiones.length === 0"
|
|
titulo="Sin cuentas conectadas"
|
|
detalle="Conectando una cuenta de correo, el agente puede leer y responder mensajes con tu dirección."
|
|
/>
|
|
<div v-for="c in conexiones" :key="c.ID" class="p-4 flex items-center justify-between">
|
|
<div>
|
|
<span class="font-medium text-texto capitalize">{{ c.proveedor }}</span>
|
|
<span class="ml-2 text-sm text-tenue">{{ c.email }}</span>
|
|
<span class="ml-2 px-1.5 py-0.5 rounded text-xs" :class="c.activo ? 'badge-ok' : 'badge-neutro'">
|
|
{{ c.activo ? 'activa' : 'inactiva' }}
|
|
</span>
|
|
</div>
|
|
<button class="text-red-500 hover:text-red-700 text-sm" @click="desconectar(c)">Desconectar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|