From 7768387f58853537aa16847502d8a8703bee67f7 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 1 Mar 2021 16:56:48 +0100 Subject: [PATCH] Basic edit-image-modal --- package-lock.json | 34 +++++++++------ package.json | 7 +-- projects/common/package.json | 3 +- projects/common/src/fm/common.module.ts | 9 ++-- .../edit-image-modal.component.html | 29 +++++++++++++ .../edit-image-modal.component.scss | 4 ++ .../edit-image-modal.component.spec.ts | 25 +++++++++++ .../edit-image-modal.component.ts | 43 +++++++++++++++++++ .../thumbnail-upload-modal.component.html | 5 --- .../thumbnail-upload-modal.component.scss | 0 .../thumbnail-upload-modal.component.spec.ts | 25 ----------- .../thumbnail-upload-modal.component.ts | 15 ------- .../thumbnail/thumbnail.component.html | 19 ++------ .../thumbnail/thumbnail.component.ts | 9 ++-- 14 files changed, 142 insertions(+), 85 deletions(-) create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts create mode 100644 projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts delete mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html delete mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss delete mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts delete mode 100644 projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts diff --git a/package-lock.json b/package-lock.json index cd019a5..4033f1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1865,25 +1865,23 @@ } }, "@farmmaps/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==", + "version": "file:dist/common", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map": { - "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==", + "version": "0.0.1-prerelease.542", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.542.tgz", + "integrity": "sha512-UTz3FnIKEJ9PGgGTGy8UuWqY+ZBY6cW4oIL9VgHrUg9yXtfRt2zT9kaNDTeSUVOiLWcocGbJZX7zt5gjM/50PQ==", "requires": { "tslib": "^2.0.0" } }, "@farmmaps/common-map3d": { - "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==", + "version": "0.0.1-prerelease.542", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map3d/-/common-map3d-0.0.1-prerelease.542.tgz", + "integrity": "sha512-igy1g7ritVE2+hgc6jIO4+OriCeV6k2MubQcoszWWG4F6RZYuMgKciIWSdlDZ8yvZsA8WMdtxlT5vJ3wgvmesA==", "requires": { "tslib": "^2.0.0" } @@ -8604,10 +8602,20 @@ "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-image-cropper": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/ngx-image-cropper/-/ngx-image-cropper-3.3.5.tgz", + "integrity": "sha512-0yRVKG5XAbVo3rOaj/iFDlekGsxEqXKU9iXFbjyvHvRT2DFs+AjwtyvINsHCWw+4ed9yA4Y+wLIUNqzA0bfxLw==", + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } }, "ngx-openlayers": { "version": "1.0.0-next.17", diff --git a/package.json b/package.json index f698582..ff2e82a 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,10 @@ "bootstrap": "^4.4.1", "cesium": "^1.77.0", "core-js": "^2.6.11", + "moment": "^2.27.0", "ngrx-store-localstorage": "^10.0", + "ngx-avatar": "^4.0.0", + "ngx-image-cropper": "^3.3.5", "ngx-openlayers": "1.0.0-next.17", "ngx-uploadx": "^3.5.1", "ol": "6.5.0", @@ -40,9 +43,7 @@ "rxjs": "^6.5.4", "tassign": "^1.0.0", "tslib": "^2.0.0", - "zone.js": "~0.10.2", - "moment": "^2.27.0", - "ngx-avatar": "^4.0.0" + "zone.js": "~0.10.2" }, "devDependencies": { "@angular-builders/custom-webpack": "~10.0.1", diff --git a/projects/common/package.json b/projects/common/package.json index a0e9f57..10f7777 100644 --- a/projects/common/package.json +++ b/projects/common/package.json @@ -18,6 +18,7 @@ "ngx-uploadx": "^3.3.4", "angular-oauth2-oidc": "^10.0.3", "moment": "^2.27.0", - "ngx-avatar": "^4.0.0" + "ngx-avatar": "^4.0.0", + "ngx-image-cropper": "^3.3.5" } } diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index 24eaec2..3097b6d 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -60,9 +60,11 @@ 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 { ThumbnailUploadModalComponent } from './components/thumbnail-upload-modal/thumbnail-upload-modal.component'; +import { EditImageModalComponent } from './components/edit-image-modal/edit-image-modal.component'; import { AvatarComponent } from './components/avatar/avatar.component'; import { AvatarModule } from 'ngx-avatar'; +import { ImageCropperModule } from 'ngx-image-cropper'; + export { SafePipe, @@ -120,7 +122,8 @@ export { NgbModule, FormsModule, UploadxModule, - AvatarModule + AvatarModule, + ImageCropperModule ], declarations: [ AppComponent, @@ -144,7 +147,7 @@ export { HelpMenuComponent, BackButtonComponent, ThumbnailComponent, - ThumbnailUploadModalComponent, + EditImageModalComponent, AvatarComponent ], exports: [ diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html new file mode 100644 index 0000000..7f6b828 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html @@ -0,0 +1,29 @@ + +
+

Edit image

+ +
+
+
+ +
+ + Select image +
+
+ + +
+ diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss new file mode 100644 index 0000000..66b7237 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss @@ -0,0 +1,4 @@ +.cropper { + position: relative; + height: calc(60vh); +} \ No newline at end of file diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts new file mode 100644 index 0000000..7395ec0 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditImageModalComponent } from './edit-image-modal.component'; + +describe('EditImageModalComponent', () => { + let component: EditImageModalComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditImageModalComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditImageModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts new file mode 100644 index 0000000..fbbb878 --- /dev/null +++ b/projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit,ViewChild,ElementRef } from '@angular/core'; +import {NgbModal} from "@ng-bootstrap/ng-bootstrap" +import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper'; + +@Component({ + selector: 'fm-edit-image-modal', + templateUrl: './edit-image-modal.component.html', + styleUrls: ['./edit-image-modal.component.scss'] +}) +export class EditImageModalComponent implements OnInit { + + @ViewChild('upload_modal') modal:ElementRef; + + constructor(private modalService: NgbModal) { } + + ngOnInit(): void { + } + + open(endpoint:string,aspectRatio:number) { + this.aspectRatio= aspectRatio; + this.modalService.open(this.modal,{ size: 'lg' }); + } + + aspectRatio:number = 4/3; + + imageChangedEvent: any = ''; + croppedImage: any = ''; + + fileChangeEvent(event: any): void { + this.imageChangedEvent = event; + } + imageCropped(event: ImageCroppedEvent) { + this.croppedImage = event.base64; + } + imageLoaded(image: LoadedImage) { + } + cropperReady() { + // cropper ready + } + loadImageFailed() { + // show message + } +} diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html deleted file mode 100644 index 804f1f8..0000000 --- a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
- - - -
diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts deleted file mode 100644 index 2303a0f..0000000 --- a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ThumbnailUploadModalComponent } from './thumbnail-upload-modal.component'; - -describe('ThumbnailUploadModalComponent', () => { - let component: ThumbnailUploadModalComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ThumbnailUploadModalComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ThumbnailUploadModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts b/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts deleted file mode 100644 index 037b281..0000000 --- a/projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'fm-thumbnail-upload-modal', - templateUrl: './thumbnail-upload-modal.component.html', - styleUrls: ['./thumbnail-upload-modal.component.scss'] -}) -export class ThumbnailUploadModalComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.html b/projects/common/src/fm/components/thumbnail/thumbnail.component.html index 0bba7fd..466182e 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.html +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.html @@ -2,21 +2,8 @@
-
+
- -
-

Select period

- -
-
- -
-
- - -
- \ No newline at end of file + + diff --git a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts index d386ba0..bf80e2a 100644 --- a/projects/common/src/fm/components/thumbnail/thumbnail.component.ts +++ b/projects/common/src/fm/components/thumbnail/thumbnail.component.ts @@ -1,8 +1,9 @@ import { Component,Input ,ViewChild,ElementRef} from '@angular/core'; import { Store } from '@ngrx/store'; -import {NgbModal} from "@ng-bootstrap/ng-bootstrap" + import { IListItem } from '../../models/list.item'; import { commonReducers,ItemTypeService } from '../../../public-api' +import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.component'; @Component({ selector: 'fm-thumbnail', @@ -15,9 +16,9 @@ import { commonReducers,ItemTypeService } from '../../../public-api' @Input() public item: IListItem; @Input() public edit: boolean = false; @ViewChild('thumbnail') el:ElementRef; - @ViewChild('thumbnail_upload') modal:ElementRef; + @ViewChild('modal') modal:EditImageModalComponent; - constructor(public store: Store, public itemTypeService: ItemTypeService,private modalService: NgbModal) { + constructor(public store: Store, public itemTypeService: ItemTypeService) { } getThumbnailUrl(item:IListItem):string { @@ -46,6 +47,6 @@ import { commonReducers,ItemTypeService } from '../../../public-api' } onEditClick() { - this.modalService.open(this.modal); + this.modal.open(this.item.url+"/thumbnail",4/3); } } \ No newline at end of file