Search and Filter

Overview

The Biométrico system provides powerful search and filtering capabilities to quickly find specific students or staff members in large datasets.

Search by CI or Name

Real-Time Search Input

The search input field supports searching by:

Cédula de Identidad (CI) - National ID number
Full Name - First name, last name, or maternal surname

<input 
  type="text" 
  placeholder="Ingresa la cédula o nombre a buscar..." 
  v-model="searchQuery"
  @input="debouncedFilter"
  class="h-11 w-full rounded-lg border" 
/>

Debounced Search

To prevent excessive API calls while the user is typing, the search uses a 900ms debounce delay:

import debounce from 'lodash.debounce';

export default {
  data() {
    return {
      searchQuery: "",
      debouncedFilter: null,
    };
  },
  created() {
    // Initialize debounced function
    this.debouncedFilter = debounce(() => {
      this.filterAndFetch();
    }, 900);
  },
  methods: {
    filterAndFetch() {
      // Reset to page 1 when applying new filters
      this.currentPage = 1;
      this.getAdministrativosD(this.currentPage, this.searchQuery, this.selectedCarrera);
    }
  }
}

The 900ms delay means the API request only fires after the user stops typing for 900 milliseconds.

Filter by Career

Filter results by academic career or department:

<select v-model="selectedCarrera" @change="debouncedFilter"
  class="h-11 w-full rounded-lg border">
  <option value="Todos">Todas las Carreras</option>
  <option v-for="carrera in carrerasList" :key="carrera.id" :value="carrera.id">
    {{ carrera.nombre }}
  </option>
</select>

Load Career List

The list of careers is loaded from the backend when the component mounts:

async loadCarrerasList() {
  try {
    const response = await API.get(`${this.baseUrl}/carrerasList`);
    this.carrerasList = response.data?.data || [];
  } catch (error) {
    console.error("❌ Error al obtener carreras:", error);
    this.carrerasList = [];
  }
}

Call this method in the mounted() lifecycle hook:

async mounted() {
  this.getAdministrativosD(1, this.searchQuery, this.selectedCarrera);
  this.loadCarrerasList();
}

Combined Search and Filter

Data Flow

User Input

The user types in the search box or selects a career from the dropdown.

Debounced Trigger

After 900ms of inactivity, debouncedFilter() is called, which triggers filterAndFetch().

Reset to Page 1

When filters change, the system resets to the first page:

filterAndFetch() {
  this.currentPage = 1;
  this.getAdministrativosD(this.currentPage, this.searchQuery, this.selectedCarrera);
}

API Request with Parameters

The search query and career filter are sent to the backend:

async getAdministrativosD(page = 1, searchQuery = "", carreraName = "Todos") {
  this.cargando = true;
  
  const params = {
    page: page,
    search_query: searchQuery,
    carrera_name: carreraName === 'Todos' ? '' : carreraName,
  };

  const response = await API.get(`${this.baseUrl}/estudiantesfoto`, { params });
  
  this.filteredpostulaciones = response.data?.data || [];
  this.currentPage = response.data?.pagination.current_page || 1;
  this.lastPage = response.data?.pagination.last_page || 1;
  this.totalEstudiantes = response.data.pagination.total;
  
  this.cargando = false;
}

Display Filtered Results

The table is updated with the filtered data, and pagination controls are adjusted.