diff --git a/package-lock.json b/package-lock.json index b9f9c48..cd019a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1865,23 +1865,25 @@ } }, "@farmmaps/common": { - "version": "file:dist/common", + "version": "0.0.1-prerelease.530", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.530.tgz", + "integrity": "sha512-cvUKFctQvl91gE5zCJvzxhcnZ35XpletqFmxOFwj6qxLr975qs/Ia9VrzwjkqoIoXlsO9xlM/0Cn1PnPsF7nIg==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map": { - "version": "0.0.1-prerelease.540", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.540.tgz", - "integrity": "sha512-D7NQlURyrKQYbHBlaZoPN6ZOpQHq8meXmMev+a1e8e2oNRTamf21/nKXdzYDgv2d2un56gb+Iaty05y2Gnb5bw==", + "version": "0.0.1-prerelease.530", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.530.tgz", + "integrity": "sha512-LU4yzsTvja85GciySpJB5LjUD7fndEsnd2KKj0q9+IFZl9jOFfVcP+/3nImsYYmV9CK6sczNdevaSxQW+lpseQ==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map3d": { - "version": "0.0.1-prerelease.540", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.540.tgz", - "integrity": "sha512-RQXWh2sDQBMJewHVOYEahRshRnpGLBELyaztsR90s6I/dUgCVO4lUjLh1g8RBPFmE4jegnHl2Bn13168akuJZw==", + "version": "0.0.1-prerelease.530", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.530.tgz", + "integrity": "sha512-4OG3yv6vOMJZ5dLZ2e8W9P1F1qvzcYBA/zCIA+kxfS0iiOfrOIiJgDvXPhMot+swATSsWeY4Txh6ydh6KmTzlg==", "requires": { "tslib": "^2.0.0" } @@ -7070,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", @@ -8588,6 +8595,20 @@ "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", + "integrity": "sha512-6YHXtdXkGH3w0NQoaUgNYAcrj064Lv5RTO284ha/hvpNTrh55yQz2cVh0VvwBk3MjyY2tdmLH4SuCJDszYdYiw==" + }, "ngx-openlayers": { "version": "1.0.0-next.17", "resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.17.tgz", @@ -13086,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 947a9cc..f698582 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,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", 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 9f1b898..24eaec2 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -61,6 +61,8 @@ import { NotificationMenuComponent} from './components/notification-menu/notific import { HelpMenuComponent} from './components/help-menu/help-menu.component'; import { BackButtonComponent } from './components/back-button/back-button.component'; import { ThumbnailUploadModalComponent } from './components/thumbnail-upload-modal/thumbnail-upload-modal.component'; +import { AvatarComponent } from './components/avatar/avatar.component'; +import { AvatarModule } from 'ngx-avatar'; export { SafePipe, @@ -103,7 +105,8 @@ export { IDataLayer, IColor, IGradientstop, - BackButtonComponent + BackButtonComponent, + AvatarComponent }; @NgModule({ @@ -116,7 +119,8 @@ export { OAuthModule.forRoot(), NgbModule, FormsModule, - UploadxModule + UploadxModule, + AvatarModule ], declarations: [ AppComponent, @@ -140,7 +144,8 @@ export { HelpMenuComponent, BackButtonComponent, ThumbnailComponent, - ThumbnailUploadModalComponent + ThumbnailUploadModalComponent, + AvatarComponent ], exports: [ NgbModule, @@ -164,7 +169,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(); + } +}