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 delete confirmation modal

This commit is contained in:
Eduardo Lopes 2026-01-22 17:38:45 -03:00
parent 2a2ec3d487
commit 91c695cc68
3 changed files with 96 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -184,6 +184,9 @@
<button class="btn-icon primary" (click)="onEditar(r)" title="Editar Registro">
<i class="bi bi-pencil-square"></i>
</button>
<button class="btn-icon danger" (click)="onDelete(r)" title="Excluir Registro">
<i class="bi bi-trash"></i>
</button>
</div>
</td>
</tr>
@ -223,7 +226,7 @@
</div>
</section>
<div class="modal-backdrop-custom" *ngIf="editOpen || createOpen" (click)="closeEdit(); closeCreate()"></div>
<div class="modal-backdrop-custom" *ngIf="editOpen || createOpen || deleteOpen" (click)="closeEdit(); closeCreate(); closeDelete()"></div>
<!-- ============================== -->
<!-- EDIT MODAL -->
@ -467,3 +470,42 @@
</div>
</div>
<!-- ============================== -->
<!-- DELETE MODAL -->
<!-- ============================== -->
<div class="modal-custom" *ngIf="deleteOpen">
<div class="modal-card modal-sm" (click)="$event.stopPropagation()">
<div class="modal-header">
<div class="modal-title">
<span class="icon-bg danger-soft"><i class="bi bi-trash"></i></span>
Excluir Mureg
</div>
<button class="btn btn-glass btn-sm" (click)="closeDelete()" [disabled]="deleteSaving">
<i class="bi bi-x-lg me-1"></i> Cancelar
</button>
</div>
<div class="modal-body">
<p class="mb-2 fw-bold">Tem certeza que deseja excluir esta Mureg?</p>
<div class="text-muted small">
<div><strong>Cliente:</strong> {{ deleteTarget?.cliente || '-' }}</div>
<div><strong>Linha nova:</strong> {{ deleteTarget?.linhaNova || '-' }}</div>
<div><strong>Linha antiga:</strong> {{ deleteTarget?.linhaAntiga || '-' }}</div>
</div>
<div class="d-flex justify-content-end gap-2 mt-4">
<button class="btn btn-glass btn-sm" (click)="closeDelete()" [disabled]="deleteSaving">
Cancelar
</button>
<button class="btn btn-danger btn-sm" (click)="confirmDelete()" [disabled]="deleteSaving">
<span *ngIf="!deleteSaving"><i class="bi bi-trash me-1"></i> Excluir</span>
<span *ngIf="deleteSaving"><span class="spinner-border spinner-border-sm me-2"></span> Excluindo...</span>
</button>
</div>
</div>
</div>
</div>

3
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); }
&.danger:hover { color: #dc3545; background: rgba(220, 53, 69, 0.12); }
}
/* FOOTER */
@ -278,11 +279,13 @@
.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-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; }
.icon-bg { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px;
&.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); }
&.brand-soft { background: rgba(227, 61, 207, 0.1); color: var(--brand); } /* Adicionado */
&.danger-soft { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
}
.btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; border:none; cursor: pointer; &:hover { color: var(--brand); } }
}

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

@ -129,6 +129,11 @@ export class Mureg implements AfterViewInit {
editSaving = false;
editModel: any = null;
// ====== DELETE MODAL ======
deleteOpen = false;
deleteSaving = false;
deleteTarget: MuregRow | null = null;
// ====== CREATE MODAL ======
createOpen = false;
createSaving = false;
@ -638,6 +643,50 @@ export class Mureg implements AfterViewInit {
});
}
// =======================================================================
// DELETE MODAL
// =======================================================================
onDelete(row: MuregRow) {
this.deleteTarget = row;
this.deleteOpen = true;
this.deleteSaving = false;
}
closeDelete() {
this.deleteOpen = false;
this.deleteTarget = null;
this.deleteSaving = false;
}
confirmDelete() {
if (!this.deleteTarget?.id) return;
this.deleteSaving = true;
const targetId = this.deleteTarget.id;
const currentGroup = this.expandedGroup;
this.http.delete(`${this.apiBase}/${targetId}`).subscribe({
next: async () => {
this.deleteSaving = false;
await this.showToast('Mureg excluída com sucesso!');
this.closeDelete();
this.loadForGroups();
if (currentGroup) {
setTimeout(() => {
this.expandedGroup = currentGroup;
this.toggleGroup(currentGroup);
}, 400);
}
},
error: async (err) => {
this.deleteSaving = false;
const msg = this.extractApiMessage(err) ?? 'Erro ao excluir Mureg.';
await this.showToast(msg);
}
});
}
// =======================================================================
// Helpers
// =======================================================================