EFC/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Se agregaron cambios en vucem y settings

Browse Source
This commit is contained in:
Kevin Rosales
2025-08-06 10:37:03 -06:00
parent f48f0ae6d4
commit 0178f5659a
5 changed files with 501 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/pages/Vucem.jsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { fetchWithAuth, postWithAuth, putWithAuth, deleteWithAuth, putFormDataWithAuth, postFormDataWithAuth } from '../fetchWithAuth';
import { fetchWithAuth, postWithAuth, putWithAuth, deleteWithAuth, putFormDataWithAuth, postFormDataWithAuth, patchWithAuth } from '../fetchWithAuth';
const API_URL = import.meta.env.VITE_EFC_API_URL;
export default function Vucem() {
@@ -32,6 +32,10 @@ export default function Vucem() {
const [showEfirma, setShowEfirma] = useState({});
const [copySuccess, setCopySuccess] = useState('');
// Estados específicos para modal de edición (siempre ocultos por defecto)
const [showEditPassword, setShowEditPassword] = useState(false);
const [showEditEfirma, setShowEditEfirma] = useState(false);
// Funciones para alternar visibilidad
const togglePasswordVisibility = (id) => {
setShowPassword(prev => ({
@@ -47,6 +51,23 @@ export default function Vucem() {
}));
};
// Funciones para alternar visibilidad en modal de edición
const toggleEditPasswordVisibility = () => {
setShowEditPassword(!showEditPassword);
};
const toggleEditEfirmaVisibility = () => {
setShowEditEfirma(!showEditEfirma);
};
// Función helper para truncar texto largo en la tabla
const truncateForTable = (text, maxLength = 20) => {
if (!text || text.length <= maxLength) return text;
const start = text.substring(0, 6);
const end = text.substring(text.length - 6);
return `${start}...${end}`;
};
// Función para copiar al portapapeles
const copyToClipboard = async (text, fieldName) => {
try {
@@ -113,6 +134,9 @@ export default function Vucem() {
setForm(initialForm);
setEditVucem(null);
setDeleteVucem(null);
// Resetear estados de visibilidad del modal de edición
setShowEditPassword(false);
setShowEditEfirma(false);
};
// Fetch list
@@ -197,6 +221,25 @@ export default function Vucem() {
}
};
// Función para activar/desactivar credencial
const toggleVucemStatus = async (id, currentStatus) => {
try {
const response = await patchWithAuth(`${API_URL}/vucem/vucem/${id}/`, {
is_active: !currentStatus
});
if (!response.ok) {
throw new Error('Error al cambiar el estado');
}
// Recargar la lista para reflejar los cambios
await fetchVucem();
} catch (err) {
alert('Error al cambiar el estado de la credencial');
}
};
useEffect(() => {
fetchVucem();
}, []);
@@ -233,6 +276,9 @@ export default function Vucem() {
acuseedocument: !!editVucem.acuseedocument,
is_active: !!editVucem.is_active,
});
// Resetear visibilidad de campos sensibles cuando se abre el modal de edición
setShowEditPassword(false);
setShowEditEfirma(false);
}
}, [editVucem]);
@@ -439,7 +485,7 @@ export default function Vucem() {
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center space-x-2">
<span className="text-sm text-gray-600 font-mono">
{showPassword[vucem.id] ? vucem.password || '(vacío)' : '••••••••'}
{showPassword[vucem.id] ? truncateForTable(vucem.password) || '(vacío)' : '••••••••'}
</span>
<button
onClick={() => togglePasswordVisibility(vucem.id)}
@@ -471,7 +517,7 @@ export default function Vucem() {
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center space-x-2">
<span className="text-sm text-gray-600 font-mono">
{showEfirma[vucem.id] ? vucem.efirma || '(vacío)' : '••••••••'}
{showEfirma[vucem.id] ? truncateForTable(vucem.efirma) || '(vacío)' : '••••••••'}
</span>
<button
onClick={() => toggleEfirmaVisibility(vucem.id)}
@@ -594,6 +640,25 @@ export default function Vucem() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button
onClick={() => toggleVucemStatus(vucem.id, vucem.is_active)}
className={`inline-flex items-center p-2 border shadow-sm font-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 ${
vucem.is_active
? 'border-orange-300 text-orange-700 hover:bg-orange-50 focus:ring-orange-500'
: 'border-green-300 text-green-700 hover:bg-green-50 focus:ring-green-500'
}`}
title={vucem.is_active ? "Desactivar" : "Activar"}
>
{vucem.is_active ? (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L5.636 5.636" />
</svg>
) : (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
)}
</button>
<button
onClick={() => { setDeleteVucem(vucem); setShowDeleteModal(true); }}
className="inline-flex items-center p-2 border border-red-300 shadow-sm font-medium rounded-lg text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200 transform hover:scale-105"
@@ -674,6 +739,25 @@ export default function Vucem() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button
onClick={() => toggleVucemStatus(vucem.id, vucem.is_active)}
className={`inline-flex items-center justify-center p-2 border shadow-sm font-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200 ${
vucem.is_active
? 'border-orange-300 text-orange-700 hover:bg-orange-50 focus:ring-orange-500'
: 'border-green-300 text-green-700 hover:bg-green-50 focus:ring-green-500'
}`}
title={vucem.is_active ? "Desactivar" : "Activar"}
>
{vucem.is_active ? (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L5.636 5.636" />
</svg>
) : (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
)}
</button>
<button
onClick={() => { setDeleteVucem(vucem); setShowDeleteModal(true); }}
className="inline-flex items-center justify-center p-2 border border-red-300 shadow-sm font-medium rounded-lg text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200"
@@ -690,7 +774,7 @@ export default function Vucem() {
<span className="font-medium text-gray-500">Password:</span>
<div className="mt-1 flex items-center space-x-2">
<span className="text-gray-600 font-mono">
{showPassword[vucem.id] ? vucem.password || '(vacío)' : '••••••••'}
{showPassword[vucem.id] ? truncateForTable(vucem.password) || '(vacío)' : '••••••••'}
</span>
<button
onClick={() => togglePasswordVisibility(vucem.id)}
@@ -723,7 +807,7 @@ export default function Vucem() {
<span className="font-medium text-gray-500">e.firma:</span>
<div className="mt-1 flex items-center space-x-2">
<span className="text-gray-600 font-mono">
{showEfirma[vucem.id] ? vucem.efirma || '(vacío)' : '••••••••'}
{showEfirma[vucem.id] ? truncateForTable(vucem.efirma) || '(vacío)' : '••••••••'}
</span>
<button
onClick={() => toggleEfirmaVisibility(vucem.id)}
@@ -1113,7 +1197,7 @@ export default function Vucem() {
<div className="relative">
<input
name="password"
type={showPassword ? "text" : "password"}
type={showEditPassword ? "text" : "password"}
value={form.password}
onChange={handleInputChange}
className="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
@@ -1122,11 +1206,11 @@ export default function Vucem() {
<div className="absolute inset-y-0 right-0 flex items-center">
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
onClick={toggleEditPasswordVisibility}
className="px-2 py-1 text-gray-400 hover:text-gray-600 focus:outline-none"
title={showPassword ? "Ocultar password" : "Mostrar password"}
title={showEditPassword ? "Ocultar password" : "Mostrar password"}
>
{showPassword ? (
{showEditPassword ? (
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L8.464 8.464m1.414 1.414L21.536 21.536" />
</svg>