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

fix: additional bug fixes in OverlayComponent

Browse source
This commit is contained in:
Chneemann 2025-04-06 15:54:18 +02:00
parent 0e0e2db776
commit 0be9f98cca
6 changed files with 209 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -83,13 +83,13 @@ export class AddTaskComponent implements OnInit {
} }
async loadExistingTaskData() { async loadExistingTaskData() {
if (this.overlayData) { if (this.overlayType === 'newTaskOverlay') {
this.taskData.status = this.overlayData;
} else if (this.overlayData) {
const taskData = await firstValueFrom(this.getTaskData(this.overlayData)); const taskData = await firstValueFrom(this.getTaskData(this.overlayData));
if (taskData) { if (taskData) {
this.taskData = { ...this.taskData, ...taskData }; this.taskData = { ...this.taskData, ...taskData };
} }
} else if (this.overlayType === 'newTaskOverlay') {
this.taskData.status = this.overlayData;
} }
} }

2
src/app/components/board/board.component.html
View file

@ -31,7 +31,7 @@
> >
<span class="line"></span> <span class="line"></span>
</div> </div>
<button class="btn" type="submit" (click)="addNewTaskOverlay('none')"> <button class="btn" type="submit" (click)="addNewTaskOverlay(TODO)">
<div class="btn-inside"> <div class="btn-inside">
<span>{{ "board.addTask" | translate }}</span> <span>{{ "board.addTask" | translate }}</span>
<img src="./../../../assets/img/board/add_white.svg" alt="check" /> <img src="./../../../assets/img/board/add_white.svg" alt="check" />

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

@ -1,159 +1,157 @@
<section> <form
<form (ngSubmit)="onSubmit(contactForm)"
(ngSubmit)="onSubmit(contactForm)" (keyup)="updateFormData()"
(keyup)="updateFormData()" #contactForm="ngForm"
#contactForm="ngForm" onsubmit="return false"
onsubmit="return false" class="contact-formular"
class="contact-formular" >
> <div class="name">
<div class="name">
<input
id="firstName"
type="text"
class="firstName"
name="firstName"
#firstName="ngModel"
placeholder="{{
contactData.firstName !== ''
? contactData.firstName
: ('contactDialogForm.firstName' | translate)
}}"
[(ngModel)]="contactData.firstName"
pattern="[A-Za-z]+"
autocomplete="off"
required
/>
@if (resizeService.isContactViewMedia) {
<div class="error-msg">
@if (firstName.hasError('pattern') && firstName.touched) {
<p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
} @else { @if (!firstName.valid && firstName.touched) {
<p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
}}
</div>
}
<input
id="lastName"
type="text"
class="lastName"
name="lastName"
#lastName="ngModel"
placeholder="{{
contactData.lastName !== ''
? contactData.lastName
: ('contactDialogForm.lastName' | translate)
}}"
[(ngModel)]="contactData.lastName"
pattern="[A-Za-z]+"
autocomplete="off"
required
/>
</div>
@if (resizeService.isContactViewMedia) {
<div class="error-msg">
@if (lastName.hasError('pattern') && lastName.touched) {
<p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
} @else { @if (!lastName.valid && lastName.touched) {
<p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
}}
</div>
} @if (!resizeService.isContactViewMedia) {
<div class="error-msg">
@if (firstName.hasError('pattern') || lastName.hasError('pattern') &&
firstName.touched) {
<p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
} @else { @if ((!firstName.valid && firstName.touched) && (!lastName.valid
&& lastName.touched)) {
<p>{{ "contactDialogForm.invalidName" | translate }}</p>
} @else { @if (!firstName.valid && firstName.touched &&
!firstName.hasError('pattern')) {
<p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
} @else { @if (!lastName.valid && lastName.touched &&
!lastName.hasError('pattern')) {
<p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
} } } }
</div>
}
<input <input
id="email" id="firstName"
type="email" type="text"
name="email" class="firstName"
#email="ngModel" name="firstName"
#firstName="ngModel"
placeholder="{{ placeholder="{{
contactData.email !== '' contactData.firstName !== ''
? contactData.email ? contactData.firstName
: ('contactDialogForm.email' | translate) : ('contactDialogForm.firstName' | translate)
}}" }}"
[(ngModel)]="contactData.email" [(ngModel)]="contactData.firstName"
pattern="[A-Za-z]+"
autocomplete="off" autocomplete="off"
required required
/> />
@if (resizeService.isContactViewMedia) {
<div class="error-msg"> <div class="error-msg">
@if(!email.valid && email.touched && @if (firstName.hasError('pattern') && firstName.touched) {
!checkIfUserEmailIsValid(contactData.email)) { <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
<p>{{ "contactDialogForm.invalidMail0" | translate }}</p> } @else { @if (!firstName.valid && firstName.touched) {
} @else { @if (email.touched && <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
!checkIfUserEmailIsValid(contactData.email)) { }}
<p>{{ "contactDialogForm.invalidMail1" | translate }}</p>
} @else { @if (existEmailOnServer(contactData.email) &&
!contactData.email) {
<p>{{ "contactDialogForm.invalidMail2" | translate }}</p>
} } }
</div> </div>
}
<input <input
id="phone" id="lastName"
type="phone" type="text"
name="phone" class="lastName"
#phone="ngModel" name="lastName"
#lastName="ngModel"
placeholder="{{ placeholder="{{
contactData.phone !== '' contactData.lastName !== ''
? contactData.phone ? contactData.lastName
: ('contactDialogForm.phone' | translate) : ('contactDialogForm.lastName' | translate)
}}" }}"
[(ngModel)]="contactData.phone" [(ngModel)]="contactData.lastName"
pattern="[\d\+\-\(\)\/]{10,15}" pattern="[A-Za-z]+"
autocomplete="off" autocomplete="off"
required
/> />
<div class="error-msg"> </div>
@if (!phone.valid && phone.touched) { @if (resizeService.isContactViewMedia) {
<p>{{ "contactDialogForm.invalidPhone" | translate }}</p> <div class="error-msg">
} @if (lastName.hasError('pattern') && lastName.touched) {
</div> <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
<div class="btns"> } @else { @if (!lastName.valid && lastName.touched) {
@if (selectedUserExists) { <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
<app-form-btn }}
class="btn-delete" </div>
type="button" } @if (!resizeService.isContactViewMedia) {
value="{{ 'contactDialogForm.btnDelete' | translate }}" <div class="error-msg">
(click)="toggleConfirmDialog()" @if (firstName.hasError('pattern') || lastName.hasError('pattern') &&
></app-form-btn> firstName.touched) {
} @else { <p>{{ "contactDialogForm.invalidPattern" | translate }}</p>
<app-form-btn } @else { @if ((!firstName.valid && firstName.touched) && (!lastName.valid
class="btn-cancel" && lastName.touched)) {
type="button" <p>{{ "contactDialogForm.invalidName" | translate }}</p>
value="{{ 'contactDialogForm.btnCancel' | translate }}" } @else { @if (!firstName.valid && firstName.touched &&
(click)="closeDialog()" !firstName.hasError('pattern')) {
></app-form-btn> <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
} } @else { @if (!lastName.valid && lastName.touched &&
<app-form-btn !lastName.hasError('pattern')) {
[class]="'btn-submit'" <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
[type]="'submit'" } } } }
[img]="'check'" </div>
[imgFilter]="'none'" }
value="{{ 'contactDialogForm.btnSave' | translate }}" <input
[disabled]=" id="email"
firstName.invalid || type="email"
!contactData.firstName || name="email"
lastName.invalid || #email="ngModel"
!contactData.lastName || placeholder="{{
email.invalid || contactData.email !== ''
!contactData.email || ? contactData.email
!checkIfUserEmailIsValid(contactData.email) : ('contactDialogForm.email' | translate)
" }}"
></app-form-btn> [(ngModel)]="contactData.email"
</div> autocomplete="off"
</form> required
</section> />
<div class="error-msg">
@if(!email.valid && email.touched &&
!checkIfUserEmailIsValid(contactData.email)) {
<p>{{ "contactDialogForm.invalidMail0" | translate }}</p>
} @else { @if (email.touched && !checkIfUserEmailIsValid(contactData.email))
{
<p>{{ "contactDialogForm.invalidMail1" | translate }}</p>
} @else { @if (existEmailOnServer(contactData.email) && !contactData.email)
{
<p>{{ "contactDialogForm.invalidMail2" | translate }}</p>
} } }
</div>
<input
id="phone"
type="phone"
name="phone"
#phone="ngModel"
placeholder="{{
contactData.phone !== ''
? contactData.phone
: ('contactDialogForm.phone' | translate)
}}"
[(ngModel)]="contactData.phone"
pattern="[\d\+\-\(\)\/]{10,15}"
autocomplete="off"
/>
<div class="error-msg">
@if (!phone.valid && phone.touched) {
<p>{{ "contactDialogForm.invalidPhone" | translate }}</p>
}
</div>
<div class="btns">
@if (selectedUserExists) {
<app-form-btn
class="btn-delete"
type="button"
value="{{ 'contactDialogForm.btnDelete' | translate }}"
(click)="toggleConfirmDialog()"
></app-form-btn>
} @else {
<app-form-btn
class="btn-cancel"
type="button"
value="{{ 'contactDialogForm.btnCancel' | translate }}"
(click)="closeDialog()"
></app-form-btn>
}
<app-form-btn
[class]="'btn-submit'"
[type]="'submit'"
[img]="'check'"
[imgFilter]="'none'"
value="{{ 'contactDialogForm.btnSave' | translate }}"
[disabled]="
firstName.invalid ||
!contactData.firstName ||
lastName.invalid ||
!contactData.lastName ||
email.invalid ||
!contactData.email ||
!checkIfUserEmailIsValid(contactData.email)
"
></app-form-btn>
</div>
</form>
<!-- Confirm dialog --> <!-- Confirm dialog -->
<app-confirm-dialog <app-confirm-dialog

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

@ -1,69 +1,67 @@
@if (overlayData !== "new") { @if (overlayData !== "new") {
<section class="overlay">
<div class="dialog"> <div class="overlay">
<div class="header"> <div class="header">
<img src="./../../../../assets/img/logo.svg" alt="" /> <img src="./../../../../assets/img/logo.svg" alt="" />
<p>{{ "contacts.editContact" | translate }}</p> <p>{{ "contacts.editContact" | translate }}</p>
<app-btn-close (click)="closeDialog()"></app-btn-close> <app-btn-close (click)="closeDialog()"></app-btn-close>
</div> </div>
<div class="content"> <div class="content">
<div class="badge"> <div class="badge">
<div class="picker"> <div class="picker">
<input <input
[(colorPicker)]="overlayData.color" [(colorPicker)]="overlayData.color"
[style.background]="newColor === '' ? overlayData.color : newColor" [style.background]="newColor === '' ? overlayData.color : newColor"
(colorPickerChange)="updateColor($event)" (colorPickerChange)="updateColor($event)"
/> />
<div class="initials"> <div class="initials">
@if (!userInitials) { @if (!userInitials) {
{{ overlayData.initials }} } @else { {{ overlayData.initials }} } @else {
{{ userInitials }} {{ userInitials }}
} }
</div>
</div> </div>
</div> </div>
<div class="form">
<app-contact-form
(initialsEmitter)="initialsEmitter($event)"
(closeDialogEmitter)="closeDialog()"
[selectedUser]="overlayData"
[newColor]="newColor"
[currentColor]="overlayData.color"
></app-contact-form>
</div>
</div> </div>
<div class="notice">{{ "contacts.notice" | translate }}</div> <div class="form">
<app-contact-form
(initialsEmitter)="initialsEmitter($event)"
(closeDialogEmitter)="closeDialog()"
[selectedUser]="overlayData"
[newColor]="newColor"
[currentColor]="overlayData.color"
></app-contact-form>
</div>
</div> </div>
</section> <div class="notice">{{ "contacts.notice" | translate }}</div>
</div>
} @else { } @else {
<section class="overlay">
<div class="dialog"> <div class="overlay">
<div class="header"> <div class="header">
<img src="./../../../../assets/img/logo.svg" alt="" /> <img src="./../../../../assets/img/logo.svg" alt="" />
<p>{{ "contacts.addContact" | translate }}</p> <p>{{ "contacts.addContact" | translate }}</p>
<app-btn-close (click)="closeDialog()"></app-btn-close> <app-btn-close (click)="closeDialog()"></app-btn-close>
</div>
<div class="content">
<div class="badge">
<div class="picker">
<input
[(colorPicker)]="randomColor"
[style.background]="randomColor"
(colorPickerSelect)="updateColor($event)"
/>
<div class="initials">{{ userInitials }}</div>
</div>
</div>
<div class="form">
<app-contact-form
(initialsEmitter)="initialsEmitter($event)"
(closeDialogEmitter)="closeDialog()"
[randomColor]="randomColor"
[newColor]="newColor"
></app-contact-form>
</div>
</div>
<div class="notice">{{ "contacts.notice" | translate }}</div>
</div> </div>
</section> <div class="content">
<div class="badge">
<div class="picker">
<input
[(colorPicker)]="randomColor"
[style.background]="randomColor"
(colorPickerSelect)="updateColor($event)"
/>
<div class="initials">{{ userInitials }}</div>
</div>
</div>
<div class="form">
<app-contact-form
(initialsEmitter)="initialsEmitter($event)"
(closeDialogEmitter)="closeDialog()"
[randomColor]="randomColor"
[newColor]="newColor"
></app-contact-form>
</div>
</div>
<div class="notice">{{ "contacts.notice" | translate }}</div>
</div>
} }

15
src/app/shared/components/overlay/contact-overlay/contact-overlay.component.scss
View file

@ -1,17 +1,4 @@
section { .overlay {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dialog {
background-color: var(--white); background-color: var(--white);
width: 760px; width: 760px;
height: auto; height: auto;

12
src/app/shared/components/overlay/overlay.component.ts
View file

@ -59,19 +59,15 @@ export class OverlayComponent implements OnInit {
} }
@HostListener('document:click', ['$event']) @HostListener('document:click', ['$event'])
/** /**
* Checks if a click event occurred within the overlay but outside the content or dialog elements. * Closes the contact edit overlay if the user clicks on the overlay background.
* If so, closes the overlay by emitting an event.
* *
* @param event The MouseEvent that triggered the check. * @param event The MouseEvent triggered by a click action.
*/ */
checkOpenContactEdit(event: MouseEvent) { checkOpenContactEdit(event: MouseEvent) {
const targetElement = event.target as HTMLElement; const targetElement = event.target as HTMLElement;
if (
targetElement.closest('.overlay') && if (targetElement === document.querySelector('.overlay')) {
(!targetElement.closest('.content') || !targetElement.closest('.dialog'))
) {
this.onCloseOverlay(false); this.onCloseOverlay(false);
} }
} }