EduardoDev
/
line-gestao-frontend
mirror of https://github.com/eduardolopesx03/line-gestao-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Mureg detail modal

This commit is contained in:
Eduardo Lopes 2026-01-22 17:46:52 -03:00
parent 91c695cc68
commit 058322521a
3 changed files with 142 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/app/pages/mureg/mureg.html
View File

@ -181,6 +181,9 @@
</td>
<td>
<div class="action-group justify-content-center">
<button class="btn-icon info" (click)="onView(r)" title="Ver Detalhes">
<i class="bi bi-eye"></i>
</button>
<button class="btn-icon primary" (click)="onEditar(r)" title="Editar Registro">
<i class="bi bi-pencil-square"></i>
</button>
@ -226,7 +229,7 @@
</div>
</section>
<div class="modal-backdrop-custom" *ngIf="editOpen || createOpen || deleteOpen" (click)="closeEdit(); closeCreate(); closeDelete()"></div>
<div class="modal-backdrop-custom" *ngIf="editOpen || createOpen || deleteOpen || detailOpen" (click)="closeEdit(); closeCreate(); closeDelete(); closeDetail()"></div>
<!-- ============================== -->
<!-- EDIT MODAL -->
@ -471,6 +474,99 @@
</div>
</div>
<!-- ============================== -->
<!-- DETAIL MODAL -->
<!-- ============================== -->
<div class="modal-custom" *ngIf="detailOpen">
<div class="modal-card modal-xl-custom" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg primary-soft"><i class="bi bi-eye"></i></span>
Detalhes da Mureg
</div>
<button class="btn btn-sm btn-icon" (click)="closeDetail()"><i class="bi bi-x-lg"></i></button>
</div>
<div class="modal-body modern-body bg-light-gray">
<div class="p-5 text-center text-muted" *ngIf="detailLoading">
<span class="spinner-border me-2"></span> Carregando detalhes...
</div>
<div class="details-dashboard" *ngIf="!detailLoading && detailData">
<div class="detail-box">
<div class="box-header justify-content-center">
<span><i class="bi bi-card-text me-2"></i> Informações da Mureg</span>
</div>
<div class="box-body">
<div class="info-grid">
<div class="info-item span-2">
<span class="lbl">Linha Nova</span>
<span class="val text-blue fs-4">{{ detailData.linhaNova || '-' }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Linha Antiga</span>
<span class="val">{{ detailData.linhaAntiga || '-' }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Cliente</span>
<span class="val">{{ detailData.cliente || '-' }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">Usuário</span>
<span class="val">{{ detailData.usuario || '-' }}</span>
</div>
<div class="info-item">
<span class="lbl">Item</span>
<span class="val">{{ detailData.item || '-' }}</span>
</div>
<div class="info-item">
<span class="lbl">Data Mureg</span>
<span class="val">{{ displayValue('dataDaMureg', detailData.dataDaMureg) }}</span>
</div>
<div class="info-item span-2">
<span class="lbl">ICCID</span>
<span class="val small-text">{{ detailData.iccid || '-' }}</span>
</div>
</div>
</div>
</div>
<div class="detail-box mt-3">
<div class="box-header justify-content-center">
<span><i class="bi bi-sliders me-2"></i> Informações da Geral</span>
</div>
<div class="box-body">
<div class="info-grid">
<div class="info-item span-2">
<span class="lbl">Linha Atual na Geral</span>
<span class="val">{{ detailData.linhaAtualNaGeral || '-' }}</span>
</div>
<div class="info-item">
<span class="lbl">Chip na Geral</span>
<span class="val small-text">{{ detailData.chipNaGeral || '-' }}</span>
</div>
<div class="info-item">
<span class="lbl">Conta na Geral</span>
<span class="val">{{ detailData.contaNaGeral || '-' }}</span>
</div>
<div class="info-item">
<span class="lbl">Status na Geral</span>
<span class="val">{{ detailData.statusNaGeral || '-' }}</span>
</div>
<div class="info-item">
<span class="lbl">Skil</span>
<span class="val">{{ detailData.skil || '-' }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================== -->
<!-- DELETE MODAL -->
<!-- ============================== -->

14
src/app/pages/mureg/mureg.scss
View File

@ -267,6 +267,7 @@
color: rgba(17,18,20,0.5); transition: all 0.2s; cursor: pointer;
&:hover { background: rgba(17,18,20,0.05); color: var(--text); transform: translateY(-1px); }
&.primary:hover { color: var(--blue); background: rgba(3,15,170,0.1); }
&.info:hover { color: var(--brand); background: rgba(227, 61, 207, 0.12); }
&.danger:hover { color: #dc3545; background: rgba(220, 53, 69, 0.12); }
}
@ -279,6 +280,7 @@
.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; backdrop-filter: blur(4px); }
.modal-custom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9995; padding: 16px; }
.modal-card { background: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column; animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); width: min(850px, 100%); max-height: 90vh; }
.modal-card.modal-xl-custom { width: min(1100px, 95vw); max-height: 85vh; }
.modal-card.modal-sm { width: min(480px, 100%); }
@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { padding: 16px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; display: flex; justify-content: space-between; align-items: center; .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 12px; }
@ -297,6 +299,18 @@ div.detail-box { background: #fff; border-radius: 16px; border: 1px solid rgba(0
div.box-header { padding: 10px 16px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(0,0,0,0.04); background: #fdfdfd; display: flex; align-items: center; }
div.box-body { padding: 16px; }
/* INFO GRID (detalhes) */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
.info-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 10px; background: rgba(245, 245, 247, 0.5); border-radius: 12px; border: 1px solid rgba(0,0,0,0.03); transition: background 0.2s;
&:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
&.span-2 { grid-column: span 2; }
.lbl { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--muted); margin-bottom: 2px; }
.val { font-size: 0.9rem; font-weight: 700; color: var(--text); word-break: break-word; line-height: 1.2;
&.fs-4 { font-size: 1.1rem !important; }
&.small-text { font-size: 0.75rem; font-family: monospace; }
}
}
/* EDIT FORM STYLES */
.form-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;

31
src/app/pages/mureg/mureg.ts
View File

@ -129,6 +129,11 @@ export class Mureg implements AfterViewInit {
editSaving = false;
editModel: any = null;
// ====== DETAIL MODAL ======
detailOpen = false;
detailLoading = false;
detailData: MuregDetailDto | null = null;
// ====== DELETE MODAL ======
deleteOpen = false;
deleteSaving = false;
@ -643,6 +648,32 @@ export class Mureg implements AfterViewInit {
});
}
// =======================================================================
// DETAIL MODAL
// =======================================================================
onView(row: MuregRow) {
this.detailOpen = true;
this.detailLoading = true;
this.detailData = null;
this.http.get<MuregDetailDto>(`${this.apiBase}/${row.id}`).subscribe({
next: (data) => {
this.detailData = data;
this.detailLoading = false;
},
error: async () => {
this.detailLoading = false;
await this.showToast('Erro ao carregar detalhes da Mureg.');
}
});
}
closeDetail() {
this.detailOpen = false;
this.detailLoading = false;
this.detailData = null;
}
// =======================================================================
// DELETE MODAL
// =======================================================================