Add no-image placeholder

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

@@ -5,8 +5,12 @@
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
-  <div class="modal-body">
+  <div class="modal-body">    
     <div class="cropper">
+      <div *ngIf="!isImageLoaded" class="no-image" (click)="fileInput.click()"> 
+        <i class="fal fa-image"></i>
+        <div i18n>No image selected</div>
+      </div>
       <image-cropper #imageCropper
       [imageChangedEvent]="imageChangedEvent"
       [maintainAspectRatio]="true"
@@ -23,7 +27,7 @@
      <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="submit" class="btn btn-primary" i18n [disabled]="!isImageLoaded">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

@@ -1,4 +1,13 @@
 .cropper {
     position: relative;
     height: calc(60vh);
+}
+
+.no-image {
+    text-align: center;
+}
+
+.no-image i {
+    font-size: calc(50vh);
+    color: gray;
 }

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

@@ -21,8 +21,8 @@ export class EditImageModalComponent implements OnInit {
     this.modalService.open(this.modal,{ size: 'lg' });
   }
 
+  isImageLoaded:boolean = false;
   aspectRatio:number = 4/3;
-
   imageChangedEvent: any = '';
   croppedImage: any = '';
 
@@ -33,6 +33,7 @@ export class EditImageModalComponent implements OnInit {
       this.croppedImage = event.base64;
   }
   imageLoaded(image: LoadedImage) {
+    this.isImageLoaded=true;
   }
   cropperReady() {
       // cropper ready