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

added colorpicker

Browse source
This commit is contained in:
Chneemann 2024-05-18 19:38:08 +02:00
parent e7b950c246
commit 6b6d6e553f
9 changed files with 108 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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"

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

@ -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
class="circle"
[ngStyle]="{
'background-color': firebaseService.getUserDetails(
currentUserId,
'color'
)
}"
>
<div class="picker">
<input
[(colorPicker)]="currentColor"
[style.background]="newColor === '' ? user.color : newColor"
(colorPickerChange)="updateColor($event)"
/>
<div class="initials">
@if (!userInitials) {
{{ firebaseService.getUserDetails(currentUserId, "initials") }} }
@else {
{{ user.initials }} } @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
class="circle"
[ngStyle]="{
'background-color': randomColor
}"
>
<div class="picker">
<input
[(colorPicker)]="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>

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

@ -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;

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

@ -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();
}

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

@ -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() {
this.sharedService.isEditContactDialogOpen = false;
closeDialog() {
this.sharedService.isAnyDialogOpen = false;
this.sharedService.isEditContactDialogOpen = false;
this.sharedService.isNewContactDialogOpen = false;
}
}

6
src/app/services/firebase.service.ts
View file

@ -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);
}

4
src/app/services/login.service.ts
View file

@ -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);

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

@ -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;
}
}