From 6b6d6e553f85dcf39250df50f3f5dd220fc3efc6 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sat, 18 May 2024 19:38:08 +0200 Subject: [PATCH] added colorpicker --- package-lock.json | 14 ++++ package.json | 1 + .../contact-edit-new.component.html | 41 ++++++------ .../contact-edit-new.component.scss | 66 +++++++++++++------ .../contact-edit-new.component.ts | 10 ++- .../contact-form/contact-form.component.ts | 11 +++- src/app/services/firebase.service.ts | 6 +- src/app/services/login.service.ts | 4 +- .../buttons/btn-close/btn-close.component.ts | 5 +- 9 files changed, 108 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index c5f74e8..3ec669a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 053843a..c0039a1 100644 --- a/package.json +++ b/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" diff --git a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html index a0f2068..3c4a517 100644 --- a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html +++ b/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) {

{{ "contacts.editContact" | translate }}

- +
-
+
+
@if (!userInitials) { - {{ firebaseService.getUserDetails(currentUserId, "initials") }} } - @else { + {{ user.initials }} } @else { {{ userInitials }} }
@@ -30,27 +27,28 @@
-} @else { +} } @else {

{{ "contacts.addContact" | translate }}

- +
-
+
+
{{ userInitials }}
@@ -58,6 +56,7 @@
diff --git a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.scss b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.scss index a49a2d1..0557485 100644 --- a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.scss +++ b/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 { - font-size: 47px; - font-weight: 500; - color: var(--white); - text-shadow: 1px 1px 2px var(--black); - } + z-index: 1; + cursor: pointer; } } -.badge { - display: flex; - justify-content: center; - align-items: center; - width: 30%; +.initials { + position: absolute; + top: 30%; + left: 35%; + 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 { - font-size: 32px; - font-weight: 500; - color: var(--white); - text-shadow: 1px 1px 2px var(--black); - } + border-radius: 100%; + border: 2px solid var(--white); } } + .initials { + font-size: 32px; + left: 28%; + } + .header { height: 60px; align-items: normal; diff --git a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts index e0ada6e..9e593a3 100644 --- a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts +++ b/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(); } diff --git a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts index fb3c587..8e2b012 100644 --- a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts +++ b/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(); 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() { - this.sharedService.isEditContactDialogOpen = false; + closeDialog() { this.sharedService.isAnyDialogOpen = false; + this.sharedService.isEditContactDialogOpen = false; + this.sharedService.isNewContactDialogOpen = false; } } diff --git a/src/app/services/firebase.service.ts b/src/app/services/firebase.service.ts index a1cdeb4..80beb83 100644 --- a/src/app/services/firebase.service.ts +++ b/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); } diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts index b3bdf07..7befeea 100644 --- a/src/app/services/login.service.ts +++ b/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); diff --git a/src/app/shared/components/buttons/btn-close/btn-close.component.ts b/src/app/shared/components/buttons/btn-close/btn-close.component.ts index 34b0f7f..91fc3e6 100644 --- a/src/app/shared/components/buttons/btn-close/btn-close.component.ts +++ b/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; } }