From 47f3238edd1470897d5e3cbffc2a340ba9baf5d1 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Mon, 1 Mar 2021 17:25:40 +0100
Subject: [PATCH] Add no-image placeholder

---
 .../edit-image-modal/edit-image-modal.component.html     | 8 ++++++--
 .../edit-image-modal/edit-image-modal.component.scss     | 9 +++++++++
 .../edit-image-modal/edit-image-modal.component.ts       | 3 ++-
 3 files changed, 17 insertions(+), 3 deletions(-)

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
index 7f6b828..4e8be55 100644
--- 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
@@ -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>
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
index 66b7237..be7e1fd 100644
--- 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
@@ -1,4 +1,13 @@
 .cropper {
     position: relative;
     height: calc(60vh);
+}
+
+.no-image {
+    text-align: center;
+}
+
+.no-image i {
+    font-size: calc(50vh);
+    color: gray;
 }
\ No newline at end of file
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
index fbbb878..8591dde 100644
--- 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
@@ -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