From 74e7f41583a3900fa06ee7572139a099670e10eb Mon Sep 17 00:00:00 2001 From: Peter Bastiani Date: Thu, 25 Feb 2021 17:17:52 +0100 Subject: [PATCH 1/2] Added avatar --- projects/common/package-lock.json | 24 ++++++++++++- projects/common/package.json | 3 +- projects/common/src/fm/common.module.ts | 14 +++++--- .../fm/components/avatar/avatar.component.css | 0 .../components/avatar/avatar.component.html | 1 + .../avatar/avatar.component.spec.ts | 25 ++++++++++++++ .../fm/components/avatar/avatar.component.ts | 34 +++++++++++++++++++ 7 files changed, 95 insertions(+), 6 deletions(-) create mode 100644 projects/common/src/fm/components/avatar/avatar.component.css create mode 100644 projects/common/src/fm/components/avatar/avatar.component.html create mode 100644 projects/common/src/fm/components/avatar/avatar.component.spec.ts create mode 100644 projects/common/src/fm/components/avatar/avatar.component.ts diff --git a/projects/common/package-lock.json b/projects/common/package-lock.json index a7a9932..6b37593 100644 --- a/projects/common/package-lock.json +++ b/projects/common/package-lock.json @@ -1,5 +1,27 @@ { "name": "@farmmaps/common", "version": "0.0.1", - "lockfileVersion": 1 + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "is-retina": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/is-retina/-/is-retina-1.0.3.tgz", + "integrity": "sha1-10AbKGvqKuN/Ykd1iN5QTQuGR+M=" + }, + "ngx-avatar": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ngx-avatar/-/ngx-avatar-4.0.0.tgz", + "integrity": "sha512-Uk40UXl26RvDy1ori9NDsGFB+f84AaxMnsIwZA6JPJK0pLcbo3F4vZTmzLZeOusOw1Qtgk5IzF630jo06keXwQ==", + "requires": { + "is-retina": "^1.0.3", + "ts-md5": "^1.2.4" + } + }, + "ts-md5": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.2.7.tgz", + "integrity": "sha512-emODogvKGWi1KO1l9c6YxLMBn6CEH3VrH5mVPIyOtxBG52BvV4jP3GWz6bOZCz61nLgBc3ffQYE4+EHfCD+V7w==" + } + } } diff --git a/projects/common/package.json b/projects/common/package.json index 6a3b626..a0e9f57 100644 --- a/projects/common/package.json +++ b/projects/common/package.json @@ -17,6 +17,7 @@ "@microsoft/signalr": "^3.1.3", "ngx-uploadx": "^3.3.4", "angular-oauth2-oidc": "^10.0.3", - "moment": "^2.27.0" + "moment": "^2.27.0", + "ngx-avatar": "^4.0.0" } } diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index ba7a2bb..23baa24 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -60,6 +60,8 @@ import { AppMenuComponent } from './components/app-menu/app-menu.component'; import { NotificationMenuComponent} from './components/notification-menu/notification-menu.component'; import { HelpMenuComponent} from './components/help-menu/help-menu.component'; import { BackButtonComponent } from './components/back-button/back-button.component'; +import { AvatarComponent } from './components/avatar/avatar.component'; +import { AvatarModule } from 'ngx-avatar'; export { SafePipe, @@ -102,7 +104,8 @@ export { IDataLayer, IColor, IGradientstop, - BackButtonComponent + BackButtonComponent, + AvatarComponent }; @NgModule({ @@ -115,7 +118,8 @@ export { OAuthModule.forRoot(), NgbModule, FormsModule, - UploadxModule + UploadxModule, + AvatarModule ], declarations: [ AppComponent, @@ -138,7 +142,8 @@ export { NotificationMenuComponent, HelpMenuComponent, BackButtonComponent, - ThumbnailComponent + ThumbnailComponent, + AvatarComponent ], exports: [ NgbModule, @@ -162,7 +167,8 @@ export { GradientComponent, GradientSelectComponent, BackButtonComponent, - ThumbnailComponent + ThumbnailComponent, + AvatarComponent ] }) export class AppCommonModule { diff --git a/projects/common/src/fm/components/avatar/avatar.component.css b/projects/common/src/fm/components/avatar/avatar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/projects/common/src/fm/components/avatar/avatar.component.html b/projects/common/src/fm/components/avatar/avatar.component.html new file mode 100644 index 0000000..89b465e --- /dev/null +++ b/projects/common/src/fm/components/avatar/avatar.component.html @@ -0,0 +1 @@ + diff --git a/projects/common/src/fm/components/avatar/avatar.component.spec.ts b/projects/common/src/fm/components/avatar/avatar.component.spec.ts new file mode 100644 index 0000000..7c3ee67 --- /dev/null +++ b/projects/common/src/fm/components/avatar/avatar.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AvatarComponent } from './avatar.component'; + +describe('AvatarComponent', () => { + let component: AvatarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AvatarComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AvatarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common/src/fm/components/avatar/avatar.component.ts b/projects/common/src/fm/components/avatar/avatar.component.ts new file mode 100644 index 0000000..ab343e2 --- /dev/null +++ b/projects/common/src/fm/components/avatar/avatar.component.ts @@ -0,0 +1,34 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { IUser } from '../../models/user'; + +@Component({ + selector: 'fm-avatar', + templateUrl: './avatar.component.html', + styleUrls: ['./avatar.component.css'] +}) +export class AvatarComponent implements OnInit { + + @Input() user: IUser; + @Input() bgColor: string; + @Input() fgColor: string; + @Input() size: number; + @Input() round: boolean; + + @Output() click = new EventEmitter(); + + constructor() { } + + ngOnInit(): void { + } + + getName():string { + if (!this.user) return null; + if (this.user.firstName && this.user.lastName) + return this.user.firstName + ' ' + this.user.lastName; + return this.user.name; + } + + onClick() { + this.click.emit(); + } +} From 535f6bd064de973a890146fdfaf1a7a2d75059bd Mon Sep 17 00:00:00 2001 From: Peter Bastiani Date: Thu, 25 Feb 2021 17:32:58 +0100 Subject: [PATCH 2/2] Add ngx avatar --- package-lock.json | 19 +++++++++++++++++++ package.json | 3 ++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 24825d9..cd019a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7072,6 +7072,11 @@ "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==", "dev": true }, + "is-retina": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/is-retina/-/is-retina-1.0.3.tgz", + "integrity": "sha1-10AbKGvqKuN/Ykd1iN5QTQuGR+M=" + }, "is-stream": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", @@ -8590,6 +8595,15 @@ "tslib": "^2.0.0" } }, + "ngx-avatar": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ngx-avatar/-/ngx-avatar-4.0.0.tgz", + "integrity": "sha512-Uk40UXl26RvDy1ori9NDsGFB+f84AaxMnsIwZA6JPJK0pLcbo3F4vZTmzLZeOusOw1Qtgk5IzF630jo06keXwQ==", + "requires": { + "is-retina": "^1.0.3", + "ts-md5": "^1.2.4" + } + }, "ngx-bootstrap": { "version": "5.6.2", "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.6.2.tgz", @@ -13093,6 +13107,11 @@ "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", "dev": true }, + "ts-md5": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.2.7.tgz", + "integrity": "sha512-emODogvKGWi1KO1l9c6YxLMBn6CEH3VrH5mVPIyOtxBG52BvV4jP3GWz6bOZCz61nLgBc3ffQYE4+EHfCD+V7w==" + }, "ts-node": { "version": "8.10.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz", diff --git a/package.json b/package.json index 784b731..eb5cfb9 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,8 @@ "tassign": "^1.0.0", "tslib": "^2.0.0", "zone.js": "~0.10.2", - "moment": "^2.27.0" + "moment": "^2.27.0", + "ngx-avatar": "^4.0.0" }, "devDependencies": { "@angular-builders/custom-webpack": "~10.0.1",