Renamed prefixes in angular.json

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.html

@@ -0,0 +1,19 @@
+<ng-template #content let-c="close" let-d="dismiss">
+  <form [formGroup]="metaDataForm" (ngSubmit)="handleMetaDataEntered($event)">
+    <div class="modal-header">
+      <h4 class="modal-title" i18n>Add metadata</h4>
+      <button type="button" class="close" aria-label="Close" (click)="d('Cross click'); onCloseModal.emit()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      <input [minLength]=1 formControlName="name" autofocus type="text" i18n-placeholder placeholder="MetaData">
+    </div>
+    <div class="modal-footer">
+      <button type="submit" class="btn btn-primary" i18n>Upload</button>
+      <button type="button" class="btn btn-secondary" (click)="c('Close click'); onCloseModal.emit()" i18n>Close</button>
+    </div>
+  </form>
+</ng-template>
+
+

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.ts

@@ -0,0 +1,61 @@
+import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
+import { FormGroup,FormBuilder, Validators } from '@angular/forms';
+import { IListItem } from '@farmmaps/common';
+import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
+import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
+
+export interface IMetaData {
+  droppedFile: IDroppedFile,
+  attributes: any
+}
+
+@Component({
+  selector: 'fm-map-meta-data-modal',
+  templateUrl: 'meta-data-modal.component.html'
+})
+export class MetaDataModalComponent {
+
+  private modalName: string = 'metaDataModal';
+  private modalRef: NgbModalRef;
+
+  @ViewChild('content') _templateModal:ElementRef;
+  @Input() droppedFile: IDroppedFile;
+  @Input() set modalState(_modalState:any) {;
+    if(_modalState == this.modalName) {
+      this.openModal()
+    } else if(this.modalRef) {
+      this.closeModal();
+    }
+  }
+
+  @Input() event: IListItem;
+
+  @Output() onCloseModal = new EventEmitter<any>();
+  @Output() onAddFilesWithMetaData = new EventEmitter<IMetaData>();
+
+  constructor(private modalService: NgbModal, public fb: FormBuilder) { }
+
+  public metaDataForm: FormGroup;
+
+  handleMetaDataEntered(event) {
+    if (this.metaDataForm.valid) {
+      this.onAddFilesWithMetaData.emit({ droppedFile: this.droppedFile, attributes: { name: this.metaDataForm.value.name } });
+    }
+  }
+
+  openModal() {
+      //Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError 
+      setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false }));     
+  }  
+
+  closeModal()  {
+      this.modalRef.close();
+      this.metaDataForm.patchValue({ name: "" });
+  }
+
+   ngOnInit(): void {
+      this.metaDataForm = this.fb.group({
+      name: ["", Validators.compose([Validators.required, Validators.pattern("[a-zA-Z0-9_].*")])]
+      });
+  }
+}