Photo Upload Components

src/components/fotos/estudiantes_foto.vue
src/components/fotos/docentes_foto.vue

<template>
  <estudiantes_foto />
</template>

<script setup>
import estudiantes_foto from '@/components/fotos/estudiantes_foto.vue'
</script>

data() {
  return {
    baseUrl: "/biometrico",
    filteredpostulaciones: [],
    searchQuery: "",
    selectedCarrera: 'Todos',
    carrerasList: [],
    totalEstudiantes: 0,
    currentPage: 1,
    lastPage: 1,
    cargando: false,
    estaRegistrado: false,
    syncMode: false,
    pendientes: [],
    syncIndex: 0,
    currentSyncName: '',
  }
}

async getAdministrativosD(page = 1, searchQuery = "", carreraName = "Todos") {
  this.cargando = true;
  try {
    const params = {
      page: page,
      search_query: searchQuery,
      carrera_name: carreraName === 'Todos' ? '' : carreraName,
    };
    
    const response = await API.get(`${this.baseUrl}/estudiantesfoto`, {
      params
    });
    
    const data = response.data?.data || [];
    const pagination = response.data?.pagination || {};
    
    this.currentPage = pagination.current_page || 1;
    this.lastPage = pagination.last_page || 1;
    this.totalEstudiantes = response.data.pagination.total;
    this.filteredpostulaciones = data;
    
    await this.verificarRegistrosMasivos();
  } catch (error) {
    console.warn("⚠️ Error al obtener datos:", error);
  } finally {
    this.cargando = false;
  }
}

async iniciarSincronizacionMasiva() {
  if (!confirm("Se buscarán usuarios no registrados. ¿Continuar?")) return;
  
  this.syncMode = true;
  this.syncIndex = 0;
  
  try {
    const { data } = await API.get(`${this.baseUrl}/get-pending-sync-est`, {
      params: { carrera_name: this.selectedCarrera }
    });
    
    this.pendientes = data.pendientes;
    
    if (this.pendientes.length === 0) {
      alert("No se encontraron usuarios pendientes de registro.");
      this.syncMode = false;
      return;
    }
    
    for (const p of this.pendientes) {
      this.currentSyncName = p.NombInfPer;
      
      try {
        const res = await API.post(`${this.baseUrl}/sync-hikdoc/${p.CIInfPer}`);
        
        if (res.data.code === "0" || res.data.msg === "Success") {
          console.log(`✅ Sincronizado: ${p.CIInfPer}`);
        }
      } catch (e) {
        console.error(`❌ Error en CI ${p.CIInfPer}:`, e.response?.data);
      }
      
      this.syncIndex++;
      await new Promise(resolve => setTimeout(resolve, 300));
    }
    
    alert("Sincronización masiva finalizada.");
    this.getAdministrativosD(this.currentPage, this.searchQuery, this.selectedCarrera);
  } catch (error) {
    alert("Error al obtener la lista de pendientes.");
  } finally {
    this.syncMode = false;
  }
}

async descargarDatosMasiva() {
  this.cargando = true;
  try {
    const zip = new JSZip();
    
    const response = await API.get(`${this.baseUrl}/descargarfotosmasiva`, {
      timeout: 600000, // 10 minutes
    });
    
    const registros = response.data?.data || [];
    
    for (const post of registros) {
      const fotoBinariaBase64 = post.fotografia;
      const byteCharacters = atob(fotoBinariaBase64);
      const byteNumbers = new Array(byteCharacters.length);
      
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      
      const byteArray = new Uint8Array(byteNumbers);
      const carreraNombre = post.NombCarr?.replace(/[\\/:*?"<>|]/g, "_") || "Sin_Carrera";
      const folder = zip.folder(carreraNombre);
      
      const nombre = (post.NombInfPer || "sinNombre").replace(/\s+/g, " ").trim();
      const apellido = (post.ApellInfPer || "sinApellido1").replace(/\s+/g, " ").trim();
      const apellido2 = (post.ApellMatInfPer || "sinApellido2").replace(/\s+/g, " ").trim();
      const cedula = post.CIInfPer || "sinCedula";
      const fileName = `${nombre}_${apellido}_${apellido2}_${cedula}.jpg`;
      
      folder.file(fileName, byteArray, { binary: true });
    }
    
    const content = await zip.generateAsync({
      type: "blob",
      compression: "DEFLATE",
      compressionOptions: { level: 9 },
    });
    
    saveAs(content, "Estudiantes_con_Foto_por_Carrera.zip");
    alert("Descarga completada con éxito!");
  } catch (error) {
    console.error("❌ Error al generar ZIP:", error);
  } finally {
    this.cargando = false;
  }
}

<template>
  <docentes_foto />
</template>

<script setup>
import docentes_foto from '@/components/fotos/docentes_foto.vue'
</script>

data() {
  return {
    baseUrl: "/biometrico",
    filteredpostulaciones: [],
    searchQuery: "",
    selectedtipodoc: 'Todos',
    tipodocList: [
      { label: "Todos", value: "Todos" },
      { label: "Docente", value: "D" },
      { label: "Administrativo", value: "A" },
      { label: "Trabajador", value: "T" },
      { label: "Tecnico Docente", value: "TDO" }
    ],
    totalEstudiantes: 0,
    isEditModalOpen: false,
    objetoeditar: {},
  }
}

<script setup>
import { ref } from 'vue'
import Modal from '@/components/Modal/Modal.vue'

const isEditModalOpen = ref(false)

defineExpose({
  isEditModalOpen
})
</script>

computed: {
  progressSync() {
    return this.pendientes.length > 0
      ? Math.round((this.syncIndex / this.pendientes.length) * 100)
      : 0;
  }
}