feat: implement core ID card generation interface with photo upload and bulk data processing support
This commit is contained in:
+31
-22
@@ -29,6 +29,7 @@ export default function IdCardGenerator() {
|
||||
? import.meta.env.BASE_URL
|
||||
: `${import.meta.env.BASE_URL}/`;
|
||||
|
||||
// Al limpiar el input en tiempo real, employeeId ya vendrá totalmente limpio
|
||||
useEffect(() => {
|
||||
if (qrCanvasRef.current) {
|
||||
renderQRCode(employeeId, qrCanvasRef.current);
|
||||
@@ -43,36 +44,41 @@ export default function IdCardGenerator() {
|
||||
}
|
||||
};
|
||||
|
||||
// Interceptor para bloquear en tiempo real guiones y espacios en blanco
|
||||
const handleEmployeeIdChange = (e) => {
|
||||
const rawValue = e.target.value;
|
||||
// Reemplaza instantáneamente cualquier guión o espacio por vacío
|
||||
const cleanValue = rawValue.replace(/[-\s]/g, '');
|
||||
setEmployeeId(cleanValue);
|
||||
};
|
||||
|
||||
// --- ALMACENAMIENTO AUTOMÁTICO EN EL STORAGE E INSTANCIACIÓN RPC ---
|
||||
const handleBulkSupabasePhotoSync = async (cedula, blobData) => {
|
||||
const cleanCedula = String(cedula).replace(/[-\s]/g, '');
|
||||
try {
|
||||
// Creamos un archivo sintáctico válido con tipo explícito image/jpeg
|
||||
const customFile = new File([blobData], `${cedula}.jpg`, { type: 'image/jpeg' });
|
||||
|
||||
// Subida al Storage Bucket
|
||||
const remoteStorageUrl = await uploadEmployeePhoto(cedula, customFile);
|
||||
const customFile = new File([blobData], `${cleanCedula}.jpg`, { type: 'image/jpeg' });
|
||||
const remoteStorageUrl = await uploadEmployeePhoto(cleanCedula, customFile);
|
||||
|
||||
if (remoteStorageUrl) {
|
||||
// LLamado a tu función RPC nativa
|
||||
const { data, error } = await supabase.rpc("save_employee_photo", {
|
||||
p_employee_number: cedula,
|
||||
p_employee_number: cleanCedula,
|
||||
p_photo_url: remoteStorageUrl
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.warn(`[Supabase RPC Error] Cédula ${cedula}:`, error.message);
|
||||
console.warn(`[Supabase RPC Error] Cédula ${cleanCedula}:`, error.message);
|
||||
} else if (data && data.success === false) {
|
||||
console.log(`[Supabase Info] Cédula ${cedula}: ${data.message}`);
|
||||
console.log(`[Supabase Info] Cédula ${cleanCedula}: ${data.message}`);
|
||||
} else {
|
||||
console.log(`[Supabase Success] Foto sincronizada para la Cédula: ${cedula}`);
|
||||
console.log(`[Supabase Success] Foto sincronizada para la Cédula: ${cleanCedula}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Sincronización abortada para la cédula ${cedula}:`, error);
|
||||
console.error(`Sincronización abortada para la cédula ${cleanCedula}:`, error);
|
||||
}
|
||||
};
|
||||
|
||||
// --- MAPEO DE COLUMNAS EXCEL CORREGIDO ---
|
||||
// --- MAPEO DE COLUMNAS EXCEL CON LIMPIEZA DE CÉDULA ---
|
||||
const handleExcelUpload = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
@@ -111,7 +117,6 @@ export default function IdCardGenerator() {
|
||||
.replace(/[\u0300-\u036f]/g, "");
|
||||
|
||||
const lowerClient = rawClient.toLowerCase();
|
||||
// CORRECCIÓN ESENCIAL: Dejar las llaves igual a script.jsx (Claro, Nestle, Whirlpool) sin .toUpperCase()
|
||||
if (lowerClient.includes('nestle')) rawClient = 'Nestle';
|
||||
else if (lowerClient.includes('claro')) rawClient = 'Claro';
|
||||
else if (lowerClient.includes('colgate')) rawClient = 'Colgate';
|
||||
@@ -123,15 +128,17 @@ export default function IdCardGenerator() {
|
||||
else if (lowerClient.includes('whirlpool')) rawClient = 'Whirlpool';
|
||||
else rawClient = 'Generico';
|
||||
|
||||
const cleanedCedula = String(row.cedula || '').replace(/[-\s]/g, '');
|
||||
|
||||
return {
|
||||
name: String(row.nombre || '').trim(),
|
||||
role: String(row.puesto || '').trim(),
|
||||
selectedClient: rawClient,
|
||||
language: rawLang,
|
||||
employeeId: String(row.cedula || '').trim(),
|
||||
employeeId: cleanedCedula,
|
||||
fotoUrl: String(row.foto_url || '').trim()
|
||||
};
|
||||
}).filter(emp => emp.name && emp.role);
|
||||
}).filter(emp => emp.name && emp.role && emp.employeeId);
|
||||
|
||||
setBulkEmployees(formatted);
|
||||
setBulkStatusText(`✅ ¡Cargados ${formatted.length} colaboradores con éxito!`);
|
||||
@@ -156,7 +163,7 @@ export default function IdCardGenerator() {
|
||||
onStateChange: setBulkDownloadStatus,
|
||||
onProcessEmployeePhoto: handleBulkSupabasePhotoSync
|
||||
});
|
||||
setBulkStatusText('🎉 ¡Lote guardado y sincronizado con Supabase!');
|
||||
setBulkStatusText('🎉 ¡Lote guardado!');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Error procesando las imágenes remotas.");
|
||||
@@ -202,7 +209,6 @@ export default function IdCardGenerator() {
|
||||
</div>
|
||||
|
||||
<div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
|
||||
|
||||
{/* FORMULARIO MASIVO EXCEL */}
|
||||
<div className="panel" style={{ minWidth: '320px' }}>
|
||||
<div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
|
||||
@@ -236,7 +242,6 @@ export default function IdCardGenerator() {
|
||||
}}>
|
||||
Formato de columnas requeridas en el Excel: <br />
|
||||
<b style={{ color: '#6CC24A' }}>nombre, puesto, cliente/proyecto, cedula, lenguaje, foto_url</b>.<br />
|
||||
Las imágenes se guardarán automáticamente en Supabase si no tienen una previa asignada.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -327,8 +332,13 @@ export default function IdCardGenerator() {
|
||||
<div className="panel-section">
|
||||
<div className="panel-section-title">Código QR</div>
|
||||
<div className="field">
|
||||
<label>ID del empleado</label>
|
||||
<input type="text" placeholder="Ej: 12345" value={employeeId} onChange={(e) => setEmployeeId(e.target.value)} />
|
||||
<label>ID del empleado / Cédula</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ej: 123456789 (Sin guiones ni espacios)"
|
||||
value={employeeId}
|
||||
onChange={handleEmployeeIdChange}
|
||||
/>
|
||||
</div>
|
||||
<button className="export-btn" style={{ background: '#6CC24A', marginTop: '2px' }} onClick={() => renderQRCode(employeeId, qrCanvasRef.current)}>
|
||||
⟳ Generar QR
|
||||
@@ -369,12 +379,11 @@ export default function IdCardGenerator() {
|
||||
<div className="card-label">Reverso</div>
|
||||
<div className="card" id="cardBack" style={{ backgroundImage: `url('${baseUrl}${selectedClient === 'Colgate' ? 'images/AF Colgate' : 'images/AF ' + selectedClient} ${language}.png')` }}>
|
||||
<div className="back-qr-zone">
|
||||
<canvas ref={qrCanvasRef} width="55" height="55"></canvas>
|
||||
<canvas ref={qrCanvasRef} width={55} height={55}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user