FarmMaps/FarmMapsLib
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Basic edit-image-modal

Browse Source
This commit is contained in:
Willem Dantuma
2021-03-01 16:56:48 +01:00
parent dd71b49502
commit 7768387f58
14 changed files with 142 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
projects/common/src/fm/common.module.ts
View File

@@ -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: [

29
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html Normal file
View File

@@ -0,0 +1,29 @@
<ng-template #upload_modal let-modal>
<div class="modal-header">
<h4 class="modal-title" i18n>Edit image</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="cropper">
<image-cropper #imageCropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
format="jpeg"
[aspectRatio]="aspectRatio"
[autoCrop]="false"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded($event)"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
</div>
<input #fileInput type="file" (change)="fileChangeEvent($event)" style="display:none" accept="image/*"/>
<span class="btn btn-primary" (click)="fileInput.click()" i18n>Select image</span>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" i18n>Apply</button>
<button type="button" autofocus class="btn btn-secondary" (click)="modal.close('Save click')" i18n="@@buttonCancel">Cancel</button>
</div>
</ng-template>

4
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss Normal file
View File

@@ -0,0 +1,4 @@
.cropper {
position: relative;
height: calc(60vh);
}

25
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.spec.ts Normal file
View File

@@ -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<EditImageModalComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ EditImageModalComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(EditImageModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

43
projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts Normal file
View File

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

5
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html
View File

@@ -1,5 +0,0 @@
<div>
</div>

0
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss
View File

25
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts
View File

@@ -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<ThumbnailUploadModalComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ThumbnailUploadModalComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ThumbnailUploadModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts
View File

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

19
projects/common/src/fm/components/thumbnail/thumbnail.component.html
View File

@@ -2,21 +2,8 @@
<div class="content">
<img *ngIf="item.thumbnail" class="card-img-top" [src]="getThumbnailUrl(item)" />
<div *ngIf="!item.thumbnail" class="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
<div *ngIf="canEdit()" class="edit btn btn-outline-primary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
<div *ngIf="canEdit()" class="edit btn btn-secondary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
</div>
</div>
<ng-template #thumbnail_upload let-modal>
<div class="modal-header">
<h4 class="modal-title" i18n>Select period</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<!-- <button type="submit" class="btn btn-primary" (click)="handleSelect($event)" i18n>Select</button> -->
<button type="button" class="btn btn-secondary" (click)="modal.close('Save click')" i18n="@@buttonClose">Close</button>
</div>
</ng-template>
<fm-edit-image-modal #modal></fm-edit-image-modal>

9
projects/common/src/fm/components/thumbnail/thumbnail.component.ts
View File

@@ -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<commonReducers.State>, public itemTypeService: ItemTypeService,private modalService: NgbModal) {
constructor(public store: Store<commonReducers.State>, 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);
}
}