Perf: Fase 3 PWA Caché optimizado y Scroll Infinito progresivo en Vistas
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
|
||||
import { businessService } from '@/services/businessService'
|
||||
import type { Business } from '@/types'
|
||||
import { useRouter } from 'vue-router'
|
||||
@ -18,6 +18,11 @@ const searchQuery = ref('')
|
||||
const selectedCategory = ref('Todas')
|
||||
const selectedArea = ref('Todas')
|
||||
|
||||
// Infinite Scroll
|
||||
const displayLimit = ref(12)
|
||||
const observerTarget = ref<HTMLElement | null>(null)
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
// ── Categorías con emoji e ícono material
|
||||
const CATEGORY_META: Record<string, { emoji: string; icon: string; key: string }> = {
|
||||
'Todas': { emoji: '✨', icon: 'apps', key: 'discover.categories.all' },
|
||||
@ -63,20 +68,39 @@ onMounted(() => {
|
||||
analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Discover' })
|
||||
loadBusinesses()
|
||||
window.addEventListener('app-refocus', handleRefocus)
|
||||
|
||||
// Infinite Scroll Observer
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0]?.isIntersecting) {
|
||||
displayLimit.value += 12
|
||||
}
|
||||
}, { rootMargin: '400px' })
|
||||
|
||||
if (observerTarget.value && observer) {
|
||||
observer.observe(observerTarget.value)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('app-refocus', handleRefocus)
|
||||
if (observer) {
|
||||
observer.disconnect()
|
||||
}
|
||||
})
|
||||
|
||||
// Reset display limit when filters change
|
||||
watch([selectedCategory, selectedArea, searchQuery], () => {
|
||||
displayLimit.value = 12
|
||||
})
|
||||
|
||||
// ── Computados
|
||||
const categories = computed<string[]>(() => {
|
||||
const cats = new Set(businesses.value.map(b => b.category).filter(Boolean) as string[])
|
||||
const cats = new Set(businesses.value.map(b => b.category || '').filter(Boolean))
|
||||
return ['Todas', ...Array.from(cats)]
|
||||
})
|
||||
|
||||
const areas = computed<string[]>(() => {
|
||||
const ars = new Set(businesses.value.map(b => b.area).filter(Boolean) as string[])
|
||||
const ars = new Set(businesses.value.map(b => b.area || '').filter(Boolean))
|
||||
const sorted = Array.from(ars).sort()
|
||||
return ['Todas', ...sorted]
|
||||
})
|
||||
@ -102,8 +126,8 @@ const featuredBusinesses = computed(() =>
|
||||
|
||||
const gridBusinesses = computed(() => {
|
||||
const hasFilter = selectedCategory.value !== 'Todas' || selectedArea.value !== 'Todas' || searchQuery.value.trim()
|
||||
if (hasFilter) return filteredBusinesses.value
|
||||
return businesses.value.slice(2)
|
||||
if (hasFilter) return filteredBusinesses.value.slice(0, displayLimit.value)
|
||||
return businesses.value.slice(2, Math.max(2, displayLimit.value + 2))
|
||||
})
|
||||
|
||||
const isFiltering = computed(() =>
|
||||
@ -212,16 +236,21 @@ function resetFilters() {
|
||||
:title="t('discover.auth.title')"
|
||||
:message="t('discover.auth.message')"
|
||||
>
|
||||
<TransitionGroup v-if="filteredBusinesses.length > 0" name="fade" tag="div" class="activity-grid">
|
||||
<div v-for="biz in filteredBusinesses" :key="biz.id" class="activity-card" @click="handleExplore(biz)">
|
||||
<div class="card-img-wrap">
|
||||
<AppImage :src="biz.image_url" type="business" :alt="biz.name" imgClass="card-img" />
|
||||
<div v-if="filteredBusinesses.length > 0">
|
||||
<TransitionGroup name="fade" tag="div" class="activity-grid">
|
||||
<div v-for="biz in gridBusinesses" :key="biz.id" class="activity-card" @click="handleExplore(biz)">
|
||||
<div class="card-img-wrap">
|
||||
<AppImage :src="biz.image_url" type="business" :alt="biz.name" imgClass="card-img" />
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<p class="card-title">{{ biz.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<p class="card-title">{{ biz.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</TransitionGroup>
|
||||
|
||||
<!-- Infinite Scroll Trigger -->
|
||||
<div ref="observerTarget" class="h-10 w-full mt-4"></div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<span class="material-icons empty-icon">search_off</span>
|
||||
@ -265,6 +294,9 @@ function resetFilters() {
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
<!-- Infinite Scroll Trigger -->
|
||||
<div ref="observerTarget" class="h-10 w-full mt-4"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="businesses.length === 0" class="empty-state">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, computed } from 'vue'
|
||||
import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useTaxiStore } from '@/stores/taxi'
|
||||
import { analyticsService } from '@/services/analyticsService'
|
||||
@ -19,6 +19,11 @@ const onlyEnglish = ref(false)
|
||||
const corregimientos = ['all', 'Boquete', 'David - Boquete', 'Boquete - David', 'Aeropuerto - Boquete']
|
||||
const shifts = ['all', 'dia', 'tarde', 'noche']
|
||||
|
||||
// Infinite Scroll
|
||||
const displayLimit = ref(12)
|
||||
const observerTarget = ref<HTMLElement | null>(null)
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
function fetchData() {
|
||||
taxiStore.loadTaxis()
|
||||
}
|
||||
@ -31,6 +36,18 @@ function handleRefocus() {
|
||||
onMounted(async () => {
|
||||
analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TaxisLocales' })
|
||||
window.addEventListener('app-refocus', handleRefocus)
|
||||
|
||||
// Infinite Scroll Observer
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries[0]?.isIntersecting) {
|
||||
displayLimit.value += 12
|
||||
}
|
||||
}, { rootMargin: '400px' })
|
||||
|
||||
if (observerTarget.value && observer) {
|
||||
observer.observe(observerTarget.value)
|
||||
}
|
||||
|
||||
if(taxiStore.taxis.length === 0) {
|
||||
await fetchData()
|
||||
}
|
||||
@ -38,6 +55,13 @@ onMounted(async () => {
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('app-refocus', handleRefocus)
|
||||
if (observer) {
|
||||
observer.disconnect()
|
||||
}
|
||||
})
|
||||
|
||||
watch([selectedZone, selectedShift, onlyEnglish], () => {
|
||||
displayLimit.value = 12
|
||||
})
|
||||
|
||||
const filteredTaxis = computed(() => {
|
||||
@ -50,6 +74,10 @@ const filteredTaxis = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const visibleTaxis = computed(() => {
|
||||
return filteredTaxis.value.slice(0, displayLimit.value)
|
||||
})
|
||||
|
||||
const isOnline = (taxi: Taxi) => {
|
||||
if (!taxi.shifts) return false
|
||||
return taxi.shifts.includes('dia') || taxi.shifts.includes('tarde')
|
||||
@ -139,7 +167,7 @@ function getShiftLabel(shift: string) {
|
||||
:message="t('shuttle.auth.message')"
|
||||
>
|
||||
<div class="taxis-grid">
|
||||
<div v-for="taxi in filteredTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect">
|
||||
<div v-for="taxi in visibleTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect">
|
||||
<div class="card-top">
|
||||
<div class="driver-avatar-wrap">
|
||||
<div class="driver-avatar">
|
||||
@ -201,6 +229,9 @@ function getShiftLabel(shift: string) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Infinite Scroll Trigger -->
|
||||
<div ref="observerTarget" class="h-10 w-full mt-4"></div>
|
||||
|
||||
<div v-if="filteredTaxis.length === 0" class="empty-state">
|
||||
<span class="material-icons">no_accounts</span>
|
||||
<p>{{ t('taxi.noTaxisAvailable') }}</p>
|
||||
|
||||
Reference in New Issue
Block a user