useNoticiasStore

Pinia store for managing news articles with location-based filtering

Overview

The useNoticiasStore manages news articles (noticias) with support for location-based filtering by parish (parroquia) and neighborhood (barrio). It handles CRUD operations and provides different views for citizens and administrators.

State Properties

noticias · Noticia[]

Array of news articles

Show Noticia Type

• id: string - Unique identifier
• titulo: string - News title
• contenido: string - Article content
• imagen_url: string | null - Featured image URL
• administrador_id: string - ID of admin who created it
• parroquia_destino: string | null - Target parish (null = global)
• barrio_destino: string | null - Target neighborhood (null = parish-wide)
• created_at: string - Creation timestamp
• updated_at: string - Last update timestamp

noticiaActual · Noticia | null

Currently selected/viewed news article

loading · boolean

Loading state for async operations

error · string | null

Error message from last failed operation

Actions

fetchNoticias

Fetches news articles with optional location filters.

const result = await noticiasStore.fetchNoticias(filtros)

filtros · object

Optional filters for news articles

Show filtros properties

parroquia · string

Parish to filter by

barrio · string

Neighborhood to filter by (requires parroquia)

return · Promise<{ success: boolean; data?: Noticia[]; error?: string }>

Result object with news articles array

Filtering Logic:

• No filters: Returns only global news (parroquia_destino = null)
• With parroquia only: Returns global news + news for that parish
• With parroquia and barrio: Returns global news + parish news + neighborhood-specific news

---

fetchNoticia

Fetches a single news article by ID.

const result = await noticiasStore.fetchNoticia(id)

id · string · required

News article ID

return · Promise<{ success: boolean; data?: Noticia; error?: string }>

Result object with news article data

Behavior:

• Clears previous noticiaActual state before fetching
• Updates noticiaActual with fetched article
• Returns error if article not found

---

crearNoticia

Creates a new news article (admin only).

const result = await noticiasStore.crearNoticia(noticia)

noticia · Omit<InsertNoticia, 'administrador_id'> · required

News article data (administrador_id is added automatically)

Show noticia properties

titulo · string · required

Article title

contenido · string · required

Article content

imagen_url · string | null

Featured image URL

parroquia_destino · string | null

Target parish (null for global news)

barrio_destino · string | null

Target neighborhood (requires parroquia_destino)

return · Promise<{ success: boolean; data?: Noticia; error?: string }>

Result object with created article data

Behavior:

• Verifies current user is an administrator
• Adds administrador_id automatically from auth store
• Prepends new article to local noticias array

---

actualizarNoticia

Updates an existing news article.

const result = await noticiasStore.actualizarNoticia(id, updates)

id · string · required

News article ID to update

updates · Partial<Omit<InsertNoticia, 'administrador_id'>> · required

Fields to update

return · Promise<{ success: boolean; data?: Noticia; error?: string }>

Result object with updated article data

Behavior:

• Automatically updates updated_at timestamp
• Updates article in local noticias array if present

---

eliminarNoticia

Deletes a news article.

const result = await noticiasStore.eliminarNoticia(id)

id · string · required

News article ID to delete

return · Promise<{ success: boolean; error?: string }>

Result object indicating success or failure

Behavior:

• Removes article from local noticias array after successful deletion

---

fetchNoticiasUsuario

Fetches news articles filtered for a specific user’s location.

const result = await noticiasStore.fetchNoticiasUsuario(parroquia, barrio)

parroquia · string · required

User’s parish

barrio · string

User’s neighborhood (optional)

return · Promise<{ success: boolean; data?: Noticia[]; error?: string }>

Result object with filtered news articles

Filtering Logic:

1. Global news (parroquia_destino = null)
2. Parish-wide news (parroquia_destino = user’s parish AND barrio_destino = null)
3. If user has barrio: Neighborhood-specific news (parroquia_destino = user’s parish AND barrio_destino = user’s barrio)

---

fetchTodasLasNoticias

Fetches ALL news articles without filters (admin only).

const result = await noticiasStore.fetchTodasLasNoticias()

return · Promise<{ success: boolean; data?: Noticia[]; error?: string }>

Result object with all news articles

Behavior:

• Returns every news article regardless of location filters
• Intended for administrator dashboard views

Usage Examples

Fetch User News

<script setup>
import { useNoticiasStore } from '@/stores/noticias.store'
import { useAuthStore } from '@/stores/auth.store'
import { onMounted } from 'vue'

const noticiasStore = useNoticiasStore()
const authStore = useAuthStore()

onMounted(async () => {
  const usuario = authStore.usuario
  
  if (usuario) {
    // Fetch news for user's location
    await noticiasStore.fetchNoticiasUsuario(
      usuario.parroquia,
      usuario.barrio
    )
    
    console.log('Noticias cargadas:', noticiasStore.noticias.length)
  }
})
</script>

Create News (Admin)

<script setup>
import { useNoticiasStore } from '@/stores/noticias.store'

const noticiasStore = useNoticiasStore()

async function crearNoticiaGlobal() {
  const result = await noticiasStore.crearNoticia({
    titulo: 'Mantenimiento de vías',
    contenido: 'Se realizará mantenimiento...',
    imagen_url: 'https://example.com/image.jpg',
    parroquia_destino: null, // Global news
    barrio_destino: null
  })
  
  if (result.success) {
    console.log('Noticia creada:', result.data?.id)
  }
}

async function crearNoticiaBarrio() {
  const result = await noticiasStore.crearNoticia({
    titulo: 'Evento local',
    contenido: 'Se realizará un evento...',
    imagen_url: null,
    parroquia_destino: 'Manta',
    barrio_destino: 'Los Esteros' // Neighborhood-specific
  })
}
</script>

View Single Article

<script setup>
import { useNoticiasStore } from '@/stores/noticias.store'
import { useRoute } from 'vue-router'
import { onMounted, computed } from 'vue'

const noticiasStore = useNoticiasStore()
const route = useRoute()

const noticia = computed(() => noticiasStore.noticiaActual)

onMounted(async () => {
  const noticiaId = route.params.id as string
  
  const result = await noticiasStore.fetchNoticia(noticiaId)
  
  if (!result.success) {
    console.error('Noticia no encontrada')
  }
})
</script>

<template>
  <div v-if="noticia">
    <h1>{{ noticia.titulo }}</h1>
    <img v-if="noticia.imagen_url" :src="noticia.imagen_url" />
    <p>{{ noticia.contenido }}</p>
  </div>
</template>

Admin Dashboard

<script setup>
import { useNoticiasStore } from '@/stores/noticias.store'
import { onMounted, computed } from 'vue'

const noticiasStore = useNoticiasStore()

const todasNoticias = computed(() => noticiasStore.noticias)

onMounted(async () => {
  // Admin sees ALL news
  await noticiasStore.fetchTodasLasNoticias()
})

async function eliminar(id: string) {
  const result = await noticiasStore.eliminarNoticia(id)
  
  if (result.success) {
    console.log('Noticia eliminada')
  }
}
</script>

Location-Based Filtering

News Visibility Hierarchy:

1. Global News (parroquia_destino = null): Visible to everyone
2. Parish News (parroquia_destino set, barrio_destino = null): Visible to all users in that parish
3. Neighborhood News (both parroquia_destino and barrio_destino set): Visible only to users in that specific neighborhood

The store prevents concurrent fetches by returning current data if a fetch is already in progress. This avoids duplicate requests and improves performance.

Notes

Use fetchNoticiasUsuario() for citizen views and fetchTodasLasNoticias() for admin dashboards to ensure appropriate data filtering.