added colorpicker

package-lock.json

@@ -19,6 +19,7 @@
         "@angular/router": "^17.2.0",
         "@ngx-translate/core": "^15.0.0",
         "@ngx-translate/http-loader": "^8.0.0",
+        "ngx-color-picker": "^16.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
@@ -9367,6 +9368,19 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-color-picker": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-16.0.0.tgz",
+      "integrity": "sha512-Dk2FvcbebD6STZSVzkI5oFHOlTrrNC5bOHh+YVaFgaWuWrVUdVIJm68ocUvTgr/qxTEJjrfcnRnS4wi7BJ2hKg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=9.0.0",
+        "@angular/core": ">=9.0.0",
+        "@angular/forms": ">=9.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "@angular/router": "^17.2.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
+    "ngx-color-picker": "^16.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

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

@@ -1,26 +1,23 @@
-@if (currentUserId) {
+@if (currentUserId) { @for (user of
+firebaseService.getUserDataFromId(currentUserId); track user) {
 <section>
   <div class="dialog">
     <div class="header">
       <img src="./../../../../assets/img/logo.svg" alt="" />
       <p>{{ "contacts.editContact" | translate }}</p>
-      <app-btn-close [isEditContactDialogOpen]="false"></app-btn-close>
+      <app-btn-close [isContactDialogOpen]="false"></app-btn-close>
     </div>
     <div class="content">
       <div class="badge">
-        <div
+        <div class="picker">
-          class="circle"
+          <input
-          [ngStyle]="{
+            [(colorPicker)]="currentColor"
-            'background-color': firebaseService.getUserDetails(
+            [style.background]="newColor === '' ? user.color : newColor"
-              currentUserId,
+            (colorPickerChange)="updateColor($event)"
-              'color'
+          />
-            )
-          }"
-        >
           <div class="initials">
             @if (!userInitials) {
-            {{ firebaseService.getUserDetails(currentUserId, "initials") }} }
+            {{ user.initials }} } @else {
-            @else {
             {{ userInitials }}
             }
           </div>
@@ -30,27 +27,28 @@
         <app-contact-form
           (inititalsEmitter)="inititalsEmitter($event)"
           [currentUserId]="currentUserId"
+          [newColor]="newColor"
         ></app-contact-form>
       </div>
     </div>
   </div>
 </section>
-} @else {
+} } @else {
 <section>
   <div class="dialog">
     <div class="header">
       <img src="./../../../../assets/img/logo.svg" alt="" />
       <p>{{ "contacts.addContact" | translate }}</p>
-      <app-btn-close [isEditContactDialogOpen]="false"></app-btn-close>
+      <app-btn-close [isContactDialogOpen]="false"></app-btn-close>
     </div>
     <div class="content">
       <div class="badge">
-        <div
+        <div class="picker">
-          class="circle"
+          <input
-          [ngStyle]="{
+            [(colorPicker)]="randomColor"
-            'background-color': randomColor
+            [style.background]="randomColor"
-          }"
+            (colorPickerSelect)="updateColor($event)"
-        >
+          />
           <div class="initials">{{ userInitials }}</div>
         </div>
       </div>
@@ -58,6 +56,7 @@
         <app-contact-form
           (inititalsEmitter)="inititalsEmitter($event)"
           [randomColor]="randomColor"
+          [newColor]="newColor"
         ></app-contact-form>
       </div>
     </div>

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

@@ -46,7 +46,19 @@ section {
   align-items: center;
   min-height: 332px;
   padding: 24px;
-  .circle {
+}
+
+.badge {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 30%;
+}
+
+.picker {
+  input {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -54,20 +66,22 @@ section {
     height: 120px;
     border-radius: 100%;
     border: 2px solid var(--white);
-    .initials {
+    z-index: 1;
-      font-size: 47px;
+    cursor: pointer;
-      font-weight: 500;
-      color: var(--white);
-      text-shadow: 1px 1px 2px var(--black);
-    }
   }
 }
 
-.badge {
+.initials {
-  display: flex;
+  position: absolute;
-  justify-content: center;
+  top: 30%;
-  align-items: center;
+  left: 35%;
-  width: 30%;
+  width: fit-content;
+  height: fit-content;
+  font-size: 47px;
+  font-weight: 500;
+  color: var(--white);
+  text-shadow: 1px 1px 2px var(--black);
+  z-index: 2;
 }
 
 .form {
@@ -85,7 +99,7 @@ section {
 
   .badge {
     position: absolute;
-    top: 125px;
+    top: 105px;
     right: 40px;
   }
 
@@ -93,6 +107,11 @@ section {
     flex-direction: column-reverse;
   }
 
+  .initials {
+    font-size: 42px;
+    left: 33%;
+  }
+
   .header {
     height: 42px;
     img {
@@ -118,18 +137,25 @@ section {
   .content {
     flex-direction: column-reverse;
     margin-top: 20px;
-    .circle {
+  }
+
+  .picker {
+    position: absolute;
+    top: -5px;
+    left: 0;
+    input {
       width: 80px;
       height: 80px;
-      .initials {
+      border-radius: 100%;
-        font-size: 32px;
+      border: 2px solid var(--white);
-        font-weight: 500;
-        color: var(--white);
-        text-shadow: 1px 1px 2px var(--black);
-      }
     }
   }
 
+  .initials {
+    font-size: 32px;
+    left: 28%;
+  }
+
   .header {
     height: 60px;
     align-items: normal;

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

@@ -5,7 +5,7 @@ import { FirebaseService } from '../../../services/firebase.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { ContactFormComponent } from './contact-form/contact-form.component';
 import { SharedService } from '../../../services/shared.service';
-import { User } from '../../../interfaces/user.interface';
+import { ColorPickerModule } from 'ngx-color-picker';
 
 @Component({
   selector: 'app-contact-edit',
@@ -15,14 +15,18 @@ import { User } from '../../../interfaces/user.interface';
     ContactFormComponent,
     BtnCloseComponent,
     TranslateModule,
+    ColorPickerModule,
   ],
   templateUrl: './contact-edit-new.component.html',
   styleUrl: './contact-edit-new.component.scss',
 })
 export class ContactEditNewComponent implements OnInit {
   @Input() currentUserId: string = '';
+  @Input() currentColor: string = '';
+
   randomColor: string = '';
   userInitials: string = '';
+  newColor: string = '';
 
   constructor(
     public firebaseService: FirebaseService,
@@ -33,6 +37,10 @@ export class ContactEditNewComponent implements OnInit {
     this.userInitials = emitter;
   }
 
+  updateColor(newColor: string) {
+    this.newColor = newColor;
+  }
+
   ngOnInit() {
     this.randomColor = this.sharedService.generateRandomColor();
   }

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

@@ -24,6 +24,7 @@ import { User } from '../../../../interfaces/user.interface';
 export class ContactFormComponent implements OnInit, OnChanges {
   @Input() currentUserId: string = '';
   @Input() randomColor: string = '';
+  @Input() newColor: string = '';
   @Output() inititalsEmitter = new EventEmitter<string>();
 
   constructor(
@@ -39,6 +40,7 @@ export class ContactFormComponent implements OnInit, OnChanges {
     email: '',
     phone: '',
     initials: '',
+    color: '',
   };
 
   userData: User = {
@@ -152,15 +154,17 @@ export class ContactFormComponent implements OnInit, OnChanges {
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
       if (this.currentUserId) {
+        this.contactData.color = this.newColor;
         this.firebaseService.updateUserData(
           this.currentUserId,
           this.contactData
         );
       } else {
+        this.userData.color = this.newColor;
         const { id, ...taskWithoutIds } = this.userData;
         this.firebaseService.addNewUser(taskWithoutIds);
       }
-      this.closeEditDialog();
+      this.closeDialog();
     }
   }
 
@@ -169,8 +173,9 @@ export class ContactFormComponent implements OnInit, OnChanges {
     this.sharedService.isAnyDialogOpen = false;
   }
 
-  closeEditDialog() {
+  closeDialog() {
-    this.sharedService.isEditContactDialogOpen = false;
     this.sharedService.isAnyDialogOpen = false;
+    this.sharedService.isEditContactDialogOpen = false;
+    this.sharedService.isNewContactDialogOpen = false;
   }
 }

src/app/services/firebase.service.ts

@@ -110,7 +110,11 @@ export class FirebaseService implements OnDestroy {
     return this.getAllUsers().filter((user) => user.initials !== 'G');
   }
 
-  checkUserUID(userUid: string): User[] {
+  getUserDataFromId(userId: string): User[] {
+    return this.getAllUsers().filter((user) => user.id === userId);
+  }
+
+  getUserDataFromUid(userUid: string): User[] {
     return this.getAllUsers().filter((user) => user.uId === userUid);
   }
 

src/app/services/login.service.ts

@@ -37,7 +37,7 @@ export class LoginService {
     signInWithEmailAndPassword(getAuth(), loginData.mail, loginData.password)
       .then((userCredential) => {
         const user = userCredential.user;
-        const userData = this.firebaseService.checkUserUID(user.uid);
+        const userData = this.firebaseService.getUserDataFromUid(user.uid);
         if (userData.length > 0 && userData[0].id) {
           this.getUserIdInLocalStorage(userData[0].id);
           this.updateUserOnlineStatus(userData[0].id);
@@ -161,7 +161,7 @@ export class LoginService {
   }
 
   ifExistUser(user: string) {
-    const userData = this.firebaseService.checkUserUID(user);
+    const userData = this.firebaseService.getUserDataFromUid(user);
     if (userData.length > 0 && userData[0].id) {
       this.getUserIdInLocalStorage(userData[0].id);
       this.updateUserOnlineStatus(userData[0].id);

src/app/shared/components/buttons/btn-close/btn-close.component.ts

@@ -9,12 +9,13 @@ import { SharedService } from '../../../../services/shared.service';
   styleUrl: './btn-close.component.scss',
 })
 export class BtnCloseComponent {
-  @Input() isEditContactDialogOpen: boolean = false;
+  @Input() isContactDialogOpen: boolean = false;
 
   constructor(private sharedService: SharedService) {}
 
   closeClicked() {
     this.sharedService.isAnyDialogOpen = false;
-    this.sharedService.isEditContactDialogOpen = this.isEditContactDialogOpen;
+    this.sharedService.isEditContactDialogOpen = this.isContactDialogOpen;
+    this.sharedService.isNewContactDialogOpen = this.isContactDialogOpen;
   }
 }