Add Mureg delete confirmation modal
This commit is contained in:
parent
2a2ec3d487
commit
91c695cc68
|
|
@ -184,6 +184,9 @@
|
||||||
<button class="btn-icon primary" (click)="onEditar(r)" title="Editar Registro">
|
<button class="btn-icon primary" (click)="onEditar(r)" title="Editar Registro">
|
||||||
<i class="bi bi-pencil-square"></i>
|
<i class="bi bi-pencil-square"></i>
|
||||||
</button>
|
</button>
|
||||||
|
<button class="btn-icon danger" (click)="onDelete(r)" title="Excluir Registro">
|
||||||
|
<i class="bi bi-trash"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -223,7 +226,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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 -->
|
<!-- EDIT MODAL -->
|
||||||
|
|
@ -467,3 +470,42 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
|
||||||
|
|
@ -267,6 +267,7 @@
|
||||||
color: rgba(17,18,20,0.5); transition: all 0.2s; cursor: pointer;
|
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); }
|
&: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); }
|
&.primary:hover { color: var(--blue); background: rgba(3,15,170,0.1); }
|
||||||
|
&.danger:hover { color: #dc3545; background: rgba(220, 53, 69, 0.12); }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FOOTER */
|
/* 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-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-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 { 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); } }
|
@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; }
|
.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;
|
.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); }
|
&.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 */
|
&.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); } }
|
.btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; border:none; cursor: pointer; &:hover { color: var(--brand); } }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -129,6 +129,11 @@ export class Mureg implements AfterViewInit {
|
||||||
editSaving = false;
|
editSaving = false;
|
||||||
editModel: any = null;
|
editModel: any = null;
|
||||||
|
|
||||||
|
// ====== DELETE MODAL ======
|
||||||
|
deleteOpen = false;
|
||||||
|
deleteSaving = false;
|
||||||
|
deleteTarget: MuregRow | null = null;
|
||||||
|
|
||||||
// ====== CREATE MODAL ======
|
// ====== CREATE MODAL ======
|
||||||
createOpen = false;
|
createOpen = false;
|
||||||
createSaving = 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
|
// Helpers
|
||||||
// =======================================================================
|
// =======================================================================
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue