feat: create, design, and integrate ConfirmDialogComponent
This commit is contained in:
Chneemann
parent
5da2cc0237
commit
7dec1bc6f6
9 changed files with 197 additions and 10 deletions
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
@if (selectedUser.isContactOnly || currentUser && selectedUser.id !==
|
||||
currentUser.id) {
|
||||
<div class="btn btn-delete" (click)="deleteContact(selectedUserId)">
|
||||
<div class="btn btn-delete" (click)="toggleConfirmDialog()">
|
||||
<img src="./../../../../assets/img/contact/delete.svg" alt="" />
|
||||
<p>
|
||||
{{ "contacts.btnDelete0" | translate }}
|
||||
|
|
@ -100,3 +100,9 @@
|
|||
<!-- TODO -->
|
||||
}
|
||||
</section>
|
||||
<app-confirm-dialog
|
||||
*ngIf="showConfirmDialog"
|
||||
[message]="'confirmDialogComponent.deleteContact' | translate"
|
||||
(onConfirm)="deleteContact()"
|
||||
(onCancel)="toggleConfirmDialog()"
|
||||
></app-confirm-dialog>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,12 @@ import { OverlayService } from '../../../services/overlay.service';
|
|||
import { ApiService } from '../../../services/api.service';
|
||||
import { ToastNotificationService } from '../../../services/toast-notification.servic';
|
||||
import { UpdateNotifierService } from '../../../services/update-notifier.service';
|
||||
import { ConfirmDialogComponent } from '../../../shared/components/confirm-dialog/confirm-dialog.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TranslateModule],
|
||||
imports: [CommonModule, TranslateModule, ConfirmDialogComponent],
|
||||
templateUrl: './contact-detail.component.html',
|
||||
styleUrl: './contact-detail.component.scss',
|
||||
})
|
||||
|
|
@ -31,6 +32,9 @@ export class ContactDetailComponent {
|
|||
selectedUser: User | null = null;
|
||||
isMobileNavbarOpen: boolean = false;
|
||||
|
||||
showConfirmDialog = false;
|
||||
userToDeleteId: string | null = null;
|
||||
|
||||
constructor(
|
||||
private overlayService: OverlayService,
|
||||
private userService: UserService,
|
||||
|
|
@ -97,9 +101,13 @@ export class ContactDetailComponent {
|
|||
this.isMobileNavbarOpen = false;
|
||||
}
|
||||
|
||||
async deleteContact(userId: string) {
|
||||
toggleConfirmDialog() {
|
||||
this.showConfirmDialog = !this.showConfirmDialog;
|
||||
}
|
||||
|
||||
async deleteContact() {
|
||||
try {
|
||||
await lastValueFrom(this.apiService.deleteUserById(userId));
|
||||
await lastValueFrom(this.apiService.deleteUserById(this.selectedUserId!));
|
||||
this.toastNotificationService.deleteContactSuccessToast();
|
||||
this.updateNotifierService.notifyUpdate('contact');
|
||||
this.closeUserDetails();
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ app-header {
|
|||
height: 96px;
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
app-sidebar {
|
||||
|
|
@ -35,7 +34,6 @@ app-sidebar-mobile {
|
|||
padding: 64px;
|
||||
background-color: var(--bgContent);
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.blur-background {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<section>
|
||||
<div class="dialog">
|
||||
<p>{{ message }}</p>
|
||||
<div class="btns">
|
||||
<div class="btn">
|
||||
<div class="btn-cancel" (click)="cancel()">
|
||||
{{ "confirmDialogComponent.btnCancel" | translate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="btn-delete-contact" (click)="confirm()">
|
||||
{{ "confirmDialogComponent.btnConfirm" | translate }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
section {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: rgba($color: #000000, $alpha: 0.2);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--white);
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
border-radius: 26px;
|
||||
margin: 24px;
|
||||
border: 2px solid rgba($color: #000000, $alpha: 0.1);
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 27px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 111px;
|
||||
height: 57px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
border-radius: 10px;
|
||||
border-color: var(--black);
|
||||
background-color: var(--dark-blue);
|
||||
color: var(--white);
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--light-blue);
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-delete-contact {
|
||||
padding: 12px;
|
||||
margin: 12px 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--red);
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--red);
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
transition: 125ms ease-in-out;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
background-color: var(--red);
|
||||
border-color: var(--black);
|
||||
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.dialog {
|
||||
p {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
.dialog {
|
||||
width: 280px;
|
||||
p {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.btn-delete-contact,
|
||||
.btn-cancel {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ConfirmDialogComponent } from './confirm-dialog.component';
|
||||
|
||||
describe('ConfirmDialogComponent', () => {
|
||||
let component: ConfirmDialogComponent;
|
||||
let fixture: ComponentFixture<ConfirmDialogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ConfirmDialogComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ConfirmDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirm-dialog',
|
||||
standalone: true,
|
||||
imports: [TranslateModule],
|
||||
templateUrl: './confirm-dialog.component.html',
|
||||
styleUrl: './confirm-dialog.component.scss',
|
||||
})
|
||||
export class ConfirmDialogComponent {
|
||||
@Input() message: string = 'Are you sure?';
|
||||
@Output() onCancel = new EventEmitter<void>();
|
||||
@Output() onConfirm = new EventEmitter<void>();
|
||||
|
||||
cancel() {
|
||||
this.onCancel.emit();
|
||||
}
|
||||
|
||||
confirm() {
|
||||
this.cancel();
|
||||
this.onConfirm.emit();
|
||||
}
|
||||
}
|
||||
|
|
@ -91,10 +91,10 @@
|
|||
"email": "E-Mail",
|
||||
"phone": "Telefon"
|
||||
},
|
||||
"contactDeleteDialog": {
|
||||
"confirmDialogComponent": {
|
||||
"deleteContact": "Möchten Sie den Kontakt wirklich löschen?",
|
||||
"btnCancel": "Abbrechen",
|
||||
"btnDelete": "Löschen"
|
||||
"btnConfirm": "Bestätigen"
|
||||
},
|
||||
"summary": {
|
||||
"headlineDescription": "Schlüsselmetriken auf einen Blick",
|
||||
|
|
|
|||
|
|
@ -91,10 +91,10 @@
|
|||
"email": "Email",
|
||||
"phone": "Phone"
|
||||
},
|
||||
"contactDeleteDialog": {
|
||||
"confirmDialogComponent": {
|
||||
"deleteContact": "Do you really want to delete the contact?",
|
||||
"btnCancel": "Cancel",
|
||||
"btnDelete": "Delete"
|
||||
"btnConfirm": "Confirm"
|
||||
},
|
||||
"summary": {
|
||||
"headlineDescription": "Key Metrics at a Glance",
|
||||
|
|
|
|||
Loading…
Reference in a new issue