✅ Cerrar ficha al hacer clic fuera

enflujo · Nov 3, 2024 · 5e7b11e · 5e7b11e
1 parent 1bdcb85
commit 5e7b11e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/aplicaciones/www/src/Aplicacion.vue b/aplicaciones/www/src/Aplicacion.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router';
-import { storeToRefs } from 'pinia';
 import Ficha from './componentes/Ficha.vue';
-import { usarCerebroFicha } from './cerebros/ficha';
-
-const cerebroFicha = usarCerebroFicha();
-const { fichaVisible } = storeToRefs(cerebroFicha);
 </script>
 
 <template>
@@ -18,7 +13,7 @@ const { fichaVisible } = storeToRefs(cerebroFicha);
     </nav>
   </header>
 
-  <Ficha v-if="fichaVisible" />
+  <Ficha />
 
   <RouterView />
 </template>

diff --git a/aplicaciones/www/src/componentes/Ficha.vue b/aplicaciones/www/src/componentes/Ficha.vue
@@ -3,9 +3,11 @@ import { usarCerebroFicha } from '@/cerebros/ficha';
 import { TiposNodo } from '@/tipos';
 import { nombresListas } from '@/utilidades/constantes';
 import { storeToRefs } from 'pinia';
+import { onMounted, onUnmounted, type Ref, ref } from 'vue';
 
 const cerebroFicha = usarCerebroFicha();
-const { datosFicha } = storeToRefs(cerebroFicha);
+const { datosFicha, fichaVisible } = storeToRefs(cerebroFicha);
+const contenedorFicha: Ref<HTMLDivElement | null> = ref(null);
 const secciones: TiposNodo[] = [
   'publicaciones',
   'colectivos',
@@ -19,11 +21,29 @@ const secciones: TiposNodo[] = [
   'años',
   'estados',
 ];
+
+onMounted(() => {
+  document.body.addEventListener('click', clicFuera);
+});
+
+onUnmounted(() => {
+  document.body.removeEventListener('click', clicFuera);
+});
+
+function clicFuera(evento: MouseEvent) {
+  if (!contenedorFicha.value) return;
+  const elemento = evento.target as HTMLElement;
+  if (!(contenedorFicha.value === elemento || contenedorFicha.value.contains(elemento))) {
+    if (fichaVisible) {
+      cerebroFicha.cerrarFicha();
+    }
+  }
+}
 </script>
 
 <template>
-  <div id="contenedorFicha" v-if="datosFicha">
-    <div class="ficha">
+  <div id="contenedorFicha" ref="contenedorFicha" v-if="fichaVisible">
+    <div class="ficha" v-if="datosFicha">
       <header id="encabezado">
         <div id="superior">
           <!-- <div class="negrita">#{{ datosNodo.id }}</div> -->

diff --git a/aplicaciones/www/src/componentes/ListaNodos.vue b/aplicaciones/www/src/componentes/ListaNodos.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { usarCerebroDatos } from '@/cerebros/datos';
 import { usarCerebroFicha } from '@/cerebros/ficha';
+import type { TiposNodo } from '@/tipos';
 import type { ElementoLista, LlavesColectivos, LlavesPublicaciones } from '@/tipos/compartidos';
 import { nombresListas } from '@/utilidades/constantes';
 
@@ -12,6 +13,11 @@ interface Esquema {
 defineProps<Esquema>();
 const cerebroDatos = usarCerebroDatos();
 const cerebroFicha = usarCerebroFicha();
+
+function abrirElemento(evento: MouseEvent, i: number, id: TiposNodo) {
+  evento.stopPropagation();
+  cerebroFicha.seleccionarNodo(i, id);
+}
 </script>
 
 <template>
@@ -23,7 +29,7 @@ const cerebroFicha = usarCerebroFicha();
         v-for="(elemento, i) in lista"
         :key="elemento.slug"
         :id="elemento.slug"
-        @click="cerebroFicha.seleccionarNodo(i, id)"
+        @click="abrirElemento($event, i, id)"
         class="nodo"
         :class="cerebroFicha.llaveLista === id && i === cerebroFicha.indiceActual ? 'actual' : ''"
         :data-tipo="id"

diff --git a/aplicaciones/www/src/componentes/ListasColectivos.vue b/aplicaciones/www/src/componentes/ListasColectivos.vue
@@ -13,9 +13,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="contenedorListas" v-if="listasColectivos">
+  <nav id="contenedorListas" v-if="listasColectivos">
     <ListaNodos v-for="(lista, llave) in listasColectivos" :id="llave" :lista="lista" />
-  </div>
+  </nav>
 </template>
 
 <style lang="scss" scoped></style>