Skip to content

Commit 34c9dc2

Browse files
LePeanutButterLePeanutButter
committed
feat: Ajustar vista y generar YML de despliegue para prod y pruebas en Azure
Se realizaron mejoras en la interfaz de la vista de gestión de usuarios, corrigiendo detalles visuales y optimizando la experiencia. Se crearon dos archivos YML en .github/workflows: uno para producción (usando AZURE_CREDENTIALS) y otro para pruebas (usando AZURE_TEST_ENVIRONMENT). Estos cambios permiten un despliegue automatizado en Azure, acorde al entorno (producción y pruebas).
1 parent d0f21cd commit 34c9dc2

File tree

14 files changed

+211
-91
lines changed

14 files changed

+211
-91
lines changed

‎.github/workflows/ci-cd.yml‎ renamed to ‎.github/workflows/ci-cd-production.yml‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
name: CI/CD Pipeline ELysium
1+
name: CI/CD Pipeline ELysium Production
22

33
on:
44
push:
55
branches:
66
- main
77
pull_request:
88
branches:
9-
- develop
109
- main
1110

1211
env:
13-
AZURE_WEBAPP_NAME: elysiumFrontEnd
12+
AZURE_WEBAPP_NAME: Eros
1413
AZURE_WEBAPP_PACKAGE_PATH: '.'
15-
NODE_VERSION: '18.x'
14+
NODE_VERSION: '22.x'
1615

1716
jobs:
1817
build-and-deploy:

‎.github/workflows/ci-cd-testing.yml‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
name: CI/CD Pipeline ELysium Testing
2+
3+
on:
4+
push:
5+
branches:
6+
- develop
7+
pull_request:
8+
branches:
9+
- develop
10+
11+
env:
12+
AZURE_WEBAPP_NAME: cicero
13+
AZURE_WEBAPP_PACKAGE_PATH: '.'
14+
NODE_VERSION: '22.x'
15+
16+
jobs:
17+
build-and-deploy:
18+
runs-on: ubuntu-latest
19+
steps:
20+
- name: Checkout repository
21+
uses: actions/checkout@v4
22+
23+
- uses: azure/login@v1
24+
with:
25+
creds: ${{ secrets.AZURE_TEST_ENVIRONMENT }}
26+
27+
- name: Cache Node.js modules
28+
uses: actions/cache@v3
29+
with:
30+
path: ~/.npm
31+
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
32+
restore-keys: |
33+
${{ runner.os }}-node-
34+
35+
- name: Setup Node.js
36+
uses: actions/setup-node@v4
37+
with:
38+
node-version: ${{ env.NODE_VERSION }}
39+
cache: 'npm'
40+
41+
- name: Install dependencies
42+
run: npm install
43+
44+
- name: Run tests
45+
run: npm run test --if-present
46+
47+
- name: Build project
48+
run: npm run build --if-present
49+
50+
- name: Deploy to Azure Web Apps
51+
uses: azure/webapps-deploy@v3
52+
with:
53+
app-name: ${{ env.AZURE_WEBAPP_NAME }}
54+
package: ./build
55+
56+
- name: Logout from Azure
57+
run: az logout

‎src/components/Admin/charts/RangoFechasChart.jsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ const RangoFechasChart = ({ reservas }) => {
99
const svg = d3.select(container);
1010
svg.selectAll("*").remove(); // Limpiar el SVG
1111

12-
if (!reservas || reservas.length === 0) return;
13-
1412
// Ajustar tamaño dinámico según el contenedor
1513
const containerWidth = container.clientWidth || 600;
1614
const containerHeight = containerWidth * 0.6; // Mantener proporción
@@ -21,6 +19,17 @@ const RangoFechasChart = ({ reservas }) => {
2119

2220
const margin = { top: 20, right: 20, bottom: 30, left: 100 };
2321

22+
if (reservas.length === 0) {
23+
svg.append("text")
24+
.attr("x", containerWidth / 2)
25+
.attr("y", containerHeight / 2)
26+
.attr("text-anchor", "middle")
27+
.attr("font-size", "16px")
28+
.attr("fill", "#666")
29+
.text("No hay datos disponibles");
30+
return;
31+
}
32+
2433
// Agrupar reservas por salón
2534
const reservasPorSalon = d3.rollup(reservas, (v) => v.length, (d) => d.idSalon);
2635
const data = Array.from(reservasPorSalon, ([salon, count]) => ({ salon, count }));

‎src/components/Table/UserRow.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const RoleBadge = styled.span`
3939
background-color: ${props => props.$isAdmin ? '#e3f2fd' : '#f5f5f5'};
4040
color: ${props => props.$isAdmin ? '#1976d2' : '#616161'};
4141
`;
42-
function UserRow({ user, onUpdateUser, onEditUser }) {
42+
function UserRow({ user, onEditUser }) {
4343
// Extraemos las propiedades del usuario
4444
const {idInstitucional, nombre, apellido, correoInstitucional, isAdmin, activo } = user;
4545

‎src/components/Table/UserTable.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ function UserTable({ users, onUpdateUser }) {
5656
<UserRow
5757
key={user.idInstitucional}
5858
user={user}
59-
onUpdateUser={onUpdateUser}
6059
onEditUser={handleEditUser}
6160
/>
6261
))}

‎src/components/popup/CRUDSalonModal/AddSalonModal.jsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,24 @@ import CRUDSalonForm from "./CRUDSalonForm";
44

55
function AddSalonModal({ onClose, newSalon, setNewSalon, handleAddSalon }) {
66
const [tempSalon, setTempSalon] = useState({
7+
mnemonico: newSalon?.mnemonico || "",
78
nombre: newSalon?.nombre || "",
89
descripcion: newSalon?.descripcion || "",
9-
mnemonico: newSalon?.mnemonico || "",
1010
ubicacion: newSalon?.ubicacion || "",
1111
capacidad: newSalon?.capacidad || 0,
1212
recursos: newSalon?.recursos || [{ nombre: "", cantidad: 1, especificaciones: [], activo: true }],
1313
});
1414

15+
const isFormComplete = () => {
16+
return (
17+
tempSalon.mnemonico.trim() !== "" &&
18+
tempSalon.nombre.trim() !== "" &&
19+
tempSalon.descripcion.trim() !== "" &&
20+
tempSalon.ubicacion.trim() !== "" &&
21+
tempSalon.capacidad > 0
22+
);
23+
};
24+
1525
const handleGuardar = () => {
1626
setNewSalon({
1727
...tempSalon,
@@ -32,7 +42,7 @@ function AddSalonModal({ onClose, newSalon, setNewSalon, handleAddSalon }) {
3242
/>
3343
<div className="modal-buttons">
3444
<button className="cancel-button" onClick={onClose}>Cancelar</button>
35-
<button className="save-button" onClick={handleGuardar}>Agregar</button>
45+
<button className="save-button" onClick={handleGuardar} disabled={!isFormComplete()}>Agregar</button>
3646
</div>
3747
</div>
3848
</div>

‎src/components/popup/CRUDSalonModal/CRUDSalonModal.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@
7878
cursor: pointer;
7979
}
8080

81+
.popup-overlay .salon-modal .save-button:disabled {
82+
background: #ddd;
83+
color: #999;
84+
cursor: not-allowed;
85+
opacity: 0.6;
86+
}
87+
88+
8189
.popup-overlay .modal-content .capacity-container {
8290
display: flex;
8391
flex-direction: column;

‎src/components/popup/CRUDSalonModal/EditarSalonModal.jsx‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,40 @@ import "./CRUDSalonModal.css";
33
import CRUDSalonForm from "./CRUDSalonForm";
44

55
function EditarSalonModal({ onClose, newSalon, setNewSalon, handleEdit }) {
6-
const defaultSalon = {
7-
nombre: "",
8-
descripcion: "",
9-
mnemonico: "",
10-
ubicacion: "",
11-
capacidad: 0,
12-
recursos: [],
6+
const [isInitialized, setIsInitialized] = useState(false);
7+
const [tempSalon, setTempSalon] = useState({
8+
mnemonico: newSalon?.mnemonico || "",
9+
nombre: newSalon?.nombre || "",
10+
descripcion: newSalon?.descripcion || "",
11+
ubicacion: newSalon?.ubicacion || "",
12+
capacidad: newSalon?.capacidad || 0,
13+
recursos: newSalon?.recursos || [{ nombre: "", cantidad: 1, especificaciones: [], activo: true }],
14+
});
15+
16+
const isFormComplete = () => {
17+
return (
18+
tempSalon.mnemonico.trim() !== "" &&
19+
tempSalon.nombre.trim() !== "" &&
20+
tempSalon.descripcion.trim() !== "" &&
21+
tempSalon.ubicacion.trim() !== "" &&
22+
tempSalon.capacidad > 0
23+
);
1324
};
14-
const [tempSalon, setTempSalon] = useState(newSalon || defaultSalon);
1525

1626
useEffect(() => {
17-
if (newSalon) {
27+
if (!isInitialized && newSalon) {
1828
setTempSalon(newSalon);
29+
setIsInitialized(true);
1930
}
20-
}, [newSalon]);
31+
}, [newSalon, isInitialized]);
2132

2233
const handleGuardar = () => {
23-
setNewSalon(tempSalon);
24-
handleEdit();
34+
const updatedSalon = {
35+
...tempSalon,
36+
recursos: tempSalon.recursos?.length > 0 ? tempSalon.recursos : [{ nombre: "", cantidad: 1, especificaciones: [], activo: true }],
37+
};
38+
setNewSalon(updatedSalon);
39+
handleEdit(updatedSalon);
2540
};
2641

2742
return (
@@ -36,7 +51,7 @@ function EditarSalonModal({ onClose, newSalon, setNewSalon, handleEdit }) {
3651
/>
3752
<div className="modal-buttons">
3853
<button className="cancel-button" onClick={onClose}>Cancelar</button>
39-
<button className="save-button" onClick={handleGuardar}>Guardar</button>
54+
<button className="save-button" onClick={handleGuardar} disabled={!isFormComplete()}>Guardar</button>
4055
</div>
4156
</div>
4257
</div>

‎src/config/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const BASE_URL = "http://localhost:8080/api";
1+
export const BASE_URL = "https://hades-g4apbhdua4gtbbf5.canadacentral-01.azurewebsites.net/api";

‎src/pages/Admin/AddUserModal.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ function AddUserModal({ onClose, onAdd }) {
219219

220220
try {
221221
// Crear nuevo usuario
222-
const nuevoUsuario = await agregarUsuario({
222+
await agregarUsuario({
223223
idInstitucional: parseInt(formData.idInstitucional),
224224
nombre: formData.nombre,
225225
apellido: formData.apellido,
@@ -230,7 +230,7 @@ function AddUserModal({ onClose, onAdd }) {
230230

231231
// Notificar al componente padre sobre la creación exitosa
232232
if (onAdd) {
233-
onAdd(nuevoUsuario);
233+
onAdd();
234234
}
235235

236236
onClose(); // Cerrar modal tras guardar

0 commit comments

Comments
 (0)