Basic edit-image-modal

projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.html

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

projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.scss

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

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

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