new contact edit function: new contact

src/app/app.component.html

@@ -11,7 +11,14 @@
   </div>
   <app-sidebar-mobile></app-sidebar-mobile>
 </div>
-@if (sharedService.isEditContactDialogOpen) {
+@if (sharedService.isNewContactDialogOpen) {
+<app-contact-edit
+  [ngClass]="{
+    'blur-background': sharedService.isDeleteContactDialogOpen,
+    'd-none': sharedService.isDeleteContactDialogOpen
+  }"
+></app-contact-edit>
+} @if (sharedService.isEditContactDialogOpen) {
 <app-contact-edit
   [currentUserId]="sharedService.currentUserId"
   [ngClass]="{

src/app/app.component.ts

@@ -4,7 +4,7 @@ import { HeaderComponent } from './shared/components/header/header.component';
 import { SidebarComponent } from './shared/components/sidebar/sidebar.component';
 import { LanguageService } from './services/language.service';
 import { SidebarMobileComponent } from './shared/components/sidebar/sidebar-mobile/sidebar-mobile.component';
-import { ContactEditComponent } from './components/contacts/contact-edit/contact-edit.component';
+import { ContactEditNewComponent } from './components/contacts/contact-edit-new/contact-edit.component';
 import { CommonModule } from '@angular/common';
 import { SharedService } from './services/shared.service';
 import { ContactDeleteComponent } from './components/contacts/contact-delete/contact-delete.component';
@@ -19,7 +19,7 @@ import { FirebaseService } from './services/firebase.service';
     HeaderComponent,
     SidebarComponent,
     SidebarMobileComponent,
-    ContactEditComponent,
+    ContactEditNewComponent,
     ContactDeleteComponent,
     CommonModule,
     OverlayComponent,

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -2,7 +2,7 @@ import { Component, HostListener, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ContactsComponent } from '../contacts.component';
 import { Router } from '@angular/router';
-import { ContactEditComponent } from '../contact-edit/contact-edit.component';
+import { ContactEditNewComponent } from '../contact-edit-new/contact-edit.component';
 import { SharedService } from '../../../services/shared.service';
 import { ContactNavComponent } from '../contact-nav/contact-nav.component';
 import { FirebaseService } from '../../../services/firebase.service';
@@ -14,7 +14,7 @@ import { TranslateModule } from '@ngx-translate/core';
   imports: [
     CommonModule,
     ContactsComponent,
-    ContactEditComponent,
+    ContactEditNewComponent,
     ContactNavComponent,
     TranslateModule,
   ],
@@ -22,7 +22,7 @@ import { TranslateModule } from '@ngx-translate/core';
   styleUrl: './contact-detail.component.scss',
 })
 export class ContactDetailComponent {
-  @Input() currentUserId!: string | undefined;
+  @Input() currentUserId: string | undefined;
 
   constructor(
     private router: Router,
@@ -131,6 +131,9 @@ export class ContactDetailComponent {
     if (targetElement.closest('.btn-edit')) {
       this.sharedService.isAnyDialogOpen = true;
       this.sharedService.isEditContactDialogOpen = true;
+    } else if (targetElement.closest('.btn-new')) {
+      this.sharedService.isAnyDialogOpen = true;
+      this.sharedService.isNewContactDialogOpen = true;
     } else if (targetElement.closest('.btn-delete')) {
       this.sharedService.isAnyDialogOpen = true;
       this.sharedService.isDeleteContactDialogOpen = true;
@@ -138,6 +141,7 @@ export class ContactDetailComponent {
       this.sharedService.isAnyDialogOpen = false;
       this.sharedService.isEditContactDialogOpen = false;
       this.sharedService.isDeleteContactDialogOpen = false;
+      this.sharedService.isNewContactDialogOpen = false;
     }
   }
 }

src/app/components/contacts/contact-edit-new/contact-edit.component.html

@@ -1,3 +1,4 @@
+@if (currentUserId) {
 <section>
   <div class="dialog">
     <div class="header">
@@ -27,3 +28,4 @@
     </div>
   </div>
 </section>
+}

src/app/components/contacts/contact-edit-new/contact-edit.component.spec.ts

@@ -1,18 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ContactEditComponent } from './contact-edit.component';
+import { ContactEditNewComponent } from './contact-edit.component';
 
 describe('ContactEditComponent', () => {
-  let component: ContactEditComponent;
-  let fixture: ComponentFixture<ContactEditComponent>;
+  let component: ContactEditNewComponent;
+  let fixture: ComponentFixture<ContactEditNewComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ContactEditComponent]
-    })
-    .compileComponents();
+      imports: [ContactEditNewComponent],
+    }).compileComponents();
 
-    fixture = TestBed.createComponent(ContactEditComponent);
+    fixture = TestBed.createComponent(ContactEditNewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/components/contacts/contact-edit-new/contact-edit.component.ts

@@ -1,9 +1,9 @@
 import { Component, Input } from '@angular/core';
-import { ContactFormComponent } from '../contact-form/contact-form.component';
 import { CommonModule } from '@angular/common';
 import { BtnCloseComponent } from '../../../shared/components/buttons/btn-close/btn-close.component';
 import { FirebaseService } from '../../../services/firebase.service';
 import { TranslateModule } from '@ngx-translate/core';
+import { ContactFormComponent } from './contact-form/contact-form.component';
 
 @Component({
   selector: 'app-contact-edit',
@@ -17,8 +17,8 @@ import { TranslateModule } from '@ngx-translate/core';
   templateUrl: './contact-edit.component.html',
   styleUrl: './contact-edit.component.scss',
 })
-export class ContactEditComponent {
-  @Input() currentUserId!: string;
+export class ContactEditNewComponent {
+  @Input() currentUserId: string | undefined;
 
   constructor(public firebaseService: FirebaseService) {}
 }

src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts

@@ -1,9 +1,9 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
-import { SharedService } from '../../../services/shared.service';
-import { FirebaseService } from '../../../services/firebase.service';
-import { FormBtnComponent } from '../../../shared/components/buttons/form-btn/form-btn.component';
+import { SharedService } from '../../../../services/shared.service';
+import { FirebaseService } from '../../../../services/firebase.service';
+import { FormBtnComponent } from '../../../../shared/components/buttons/form-btn/form-btn.component';
 
 @Component({
   selector: 'app-contact-form',

src/app/components/contacts/contacts.component.html

@@ -3,7 +3,7 @@
     class="left-frame"
     [ngClass]="{ 'd-none': !showAllUsers && currentUserId != undefined }"
   >
-    <button class="btn" type="submit">
+    <button class="btn-new" type="submit" (click)="openNewContactDialog()">
       <div class="btn-inside">
         <span>{{ "contacts.btnNew" | translate }}</span>
         <img src="./../../../assets/img/contact/add.svg" alt="check" />

src/app/components/contacts/contacts.component.scss

@@ -4,7 +4,7 @@
   align-items: center;
 }
 
-.btn {
+.btn-new {
   display: flex;
   justify-content: space-around;
   align-items: center;

src/app/components/contacts/contacts.component.ts

@@ -71,4 +71,9 @@ export class ContactsComponent {
     );
     return usersFirstLetter;
   }
+
+  openNewContactDialog() {
+    this.sharedService.isAnyDialogOpen = true;
+    this.sharedService.isNewContactDialogOpen = true;
+  }
 }

src/app/services/shared.service.ts

@@ -7,6 +7,7 @@ export class SharedService {
   isBtnDisabled: boolean = false;
   isAnyDialogOpen: boolean = false;
   isMobileNavbarOpen: boolean = false;
+  isNewContactDialogOpen: boolean = false;
   isEditContactDialogOpen: boolean = false;
   isDeleteContactDialogOpen: boolean = false;
   isPageViewMedia: boolean = window.innerWidth <= 650;