Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: remove ConfirmDialogComponent

Browse source
This commit is contained in:
Chneemann 2025-04-11 12:17:36 +02:00
parent 1dd8d32acf
commit ab6c4ce2b9
12 changed files with 12 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/components/add-task/add-task.component.ts
View file

@ -215,7 +215,7 @@ export class AddTaskComponent implements OnInit, OnDestroy {
* @returns {void}
*/
closeOverlay() {
this.overlayService.setOverlayData('', '');
this.overlayService.clearOverlayData();
}
/**
@ -268,8 +268,7 @@ export class AddTaskComponent implements OnInit, OnDestroy {
onSubmit(ngForm: NgForm) {
if (ngForm.submitted && ngForm.form.valid) {
// OverlayData = Current TaskId
if (this.overlayData) {
if (this.overlayType === 'taskOverlayEdit') {
this.updateTask(ngForm);
} else {
this.createTask(ngForm);

10
src/app/components/contacts/contact-detail/contact-detail.component.html
View file

@ -66,7 +66,7 @@
<!-- Show delete button if user is not contact only -->
@if (selectedUser.isContactOnly || currentUser && selectedUser.id !==
currentUser.id) {
<div class="btn btn-delete" (click)="toggleConfirmDialog()">
<div class="btn btn-delete" (click)="deleteContact(selectedUserId)">
<img src="./../../../../assets/img/contact/delete.svg" alt="" />
<p>
{{ "contacts.btnDelete0" | translate }}
@ -116,11 +116,3 @@
<!-- TODO -->
}
</section>
<!-- Confirm dialog -->
<app-confirm-dialog
*ngIf="showConfirmDialog"
[message]="'confirmDialogComponent.deleteContact' | translate"
(onConfirm)="deleteContact()"
(onCancel)="toggleConfirmDialog()"
></app-confirm-dialog>

8
src/app/components/contacts/contact-detail/contact-detail.component.ts
View file

@ -16,12 +16,11 @@ import { OverlayService } from '../../../services/overlay.service';
import { ApiService } from '../../../services/api.service';
import { ToastNotificationService } from '../../../services/toast-notification.service';
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, ConfirmDialogComponent],
imports: [CommonModule, TranslateModule],
templateUrl: './contact-detail.component.html',
styleUrl: './contact-detail.component.scss',
})
@ -112,7 +111,6 @@ export class ContactDetailComponent implements OnChanges, OnDestroy {
*/
toggleConfirmDialog(): void {
this.showConfirmDialog = !this.showConfirmDialog;
this.overlayService.setOverlayData('dialog', '');
}
/**
@ -130,9 +128,9 @@ export class ContactDetailComponent implements OnChanges, OnDestroy {
* Deletes the contact with the given id, shows a success toast, triggers an update of the contact list,
* and closes the contact details component.
*/
async deleteContact() {
async deleteContact(userId: string) {
try {
await lastValueFrom(this.apiService.deleteUserById(this.selectedUserId!));
await lastValueFrom(this.apiService.deleteUserById(userId));
this.toastNotificationService.deleteContactSuccessToast();
this.updateNotifierService.notifyUpdate('contact');
this.emitCloseContact();

4
src/app/components/login/forgot-pw/pw-reset/pw-reset.component.ts
View file

@ -6,7 +6,7 @@ import { FooterComponent } from '../../footer/footer.component';
import { HeaderComponent } from '../../header/header.component';
import { TranslateModule } from '@ngx-translate/core';
import { ActivatedRoute } from '@angular/router';
import { Subject, Subscription, takeUntil } from 'rxjs';
import { Subject, takeUntil } from 'rxjs';
import { ButtonStateService } from '../../../../services/button-state.service';
import { AuthService } from '../../../../services/auth.service';
import { PasswordVisibilityService } from '../../../../services/password-visibility.service';
@ -26,8 +26,6 @@ import { PasswordVisibilityService } from '../../../../services/password-visibil
styleUrl: './pw-reset.component.scss',
})
export class PwResetComponent implements OnInit, OnDestroy {
private routeSubscription: Subscription = new Subscription();
uid: string = '';
token: string = '';
errorHttpMessage: string = '';

17
src/app/shared/components/confirm-dialog/confirm-dialog.component.html
View file

@ -1,17 +0,0 @@
<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>

112
src/app/shared/components/confirm-dialog/confirm-dialog.component.scss
View file

@ -1,112 +0,0 @@
section {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
background-color: rgba($color: #000000, $alpha: 0.2);
z-index: 999;
}
.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;
}
}

22
src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts
View file

@ -1,22 +0,0 @@
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();
});
});

24
src/app/shared/components/confirm-dialog/confirm-dialog.component.ts
View file

@ -1,24 +0,0 @@
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();
}
}

10
src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html
View file

@ -124,7 +124,7 @@
class="btn-delete"
type="button"
value="{{ 'contactDialogForm.btnDelete' | translate }}"
(click)="toggleConfirmDialog()"
(click)="deleteContact(selectedUser.id)"
></app-form-btn>
} @else {
<app-form-btn
@ -152,11 +152,3 @@
></app-form-btn>
</div>
</form>
<!-- Confirm dialog -->
<app-confirm-dialog
*ngIf="showConfirmDialog"
[message]="'confirmDialogComponent.deleteContact' | translate"
(onConfirm)="deleteContact(selectedUser.id)"
(onCancel)="toggleConfirmDialog()"
></app-confirm-dialog>

9
src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts
View file

@ -16,19 +16,12 @@ import { ApiService } from '../../../../../services/api.service';
import { ToastNotificationService } from '../../../../../services/toast-notification.service';
import { UpdateNotifierService } from '../../../../../services/update-notifier.service';
import { User } from '../../../../../interfaces/user.interface';
import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-contact-form',
standalone: true,
imports: [
CommonModule,
TranslateModule,
FormsModule,
FormBtnComponent,
ConfirmDialogComponent,
],
imports: [CommonModule, TranslateModule, FormsModule, FormBtnComponent],
templateUrl: './contact-form.component.html',
styleUrl: './contact-form.component.scss',
})

12
src/app/shared/components/overlay/task-overlay/task-overlay.component.html
View file

@ -127,9 +127,9 @@
</div>
}
</div>
@if(task.creator === currentUserId) {
@if(task.creator === currentUserId && task.id) {
<div class="btns">
<div class="btn btn-delete" (click)="toggleConfirmDialog()">
<div class="btn btn-delete" (click)="deleteTask(task.id)">
<img src="./../../../../../assets/img/contact/delete.svg" alt="" />
<p>{{ "addTask.delete" | translate }}</p>
</div>
@ -145,11 +145,3 @@
</div>
}
</section>
<!-- Confirm dialog -->
<app-confirm-dialog
*ngIf="showConfirmDialog"
[message]="'confirmDialogComponent.deleteTask' | translate"
(onConfirm)="deleteTask(overlayData)"
(onCancel)="toggleConfirmDialog()"
></app-confirm-dialog>

9
src/app/shared/components/overlay/task-overlay/task-overlay.component.ts
View file

@ -19,18 +19,11 @@ import { map, Subject, takeUntil } from 'rxjs';
import { ApiService } from '../../../../services/api.service';
import { UpdateNotifierService } from '../../../../services/update-notifier.service';
import { ToastNotificationService } from '../../../../services/toast-notification.service';
import { ConfirmDialogComponent } from '../../confirm-dialog/confirm-dialog.component';
@Component({
selector: 'app-task-overlay',
standalone: true,
imports: [
BtnCloseComponent,
CommonModule,
BtnBackComponent,
TranslateModule,
ConfirmDialogComponent,
],
imports: [BtnCloseComponent, CommonModule, BtnBackComponent, TranslateModule],
templateUrl: './task-overlay.component.html',
styleUrl: './task-overlay.component.scss',
})