fix: COM-259

- disabled state for location components
entrecode · May 24, 2019 · 6603aea · 6603aea
1 parent 4fb13f0
commit 6603aea
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 6 deletions.
diff --git a/packages/location/src/lib/location-map.component.html b/packages/location/src/lib/location-map.component.html
@@ -1,4 +1,4 @@
 <agm-map [latitude]="center?.latitude" [longitude]="center?.longitude">
-    <agm-marker #marker [markerDraggable]="!readOnly" (dragEnd)="markerDragEnd($event?.coords)" [latitude]="value?.latitude"
+    <agm-marker #marker [markerDraggable]="!readOnly&&!disabled" (dragEnd)="markerDragEnd($event?.coords)" [latitude]="value?.latitude"
         [longitude]="value?.longitude" *ngIf="value"></agm-marker>
 </agm-map>
diff --git a/packages/location/src/lib/location-map.component.ts b/packages/location/src/lib/location-map.component.ts
@@ -11,6 +11,8 @@ export class LocationMapComponent {
   @Input() center: { longitude: any; latitude: any } = { latitude: 48.8093253, longitude: 9.159388100000001 };
   /** If true, no markers can be changed or set */
   @Input() readOnly: boolean;
+  /** If true, no marker can be chaned */
+  @Input() disabled: boolean;
   /** Emits when the marker has been changed */
   @Output() changed: EventEmitter<any> = new EventEmitter();
   /** Form input component */
@@ -21,6 +23,10 @@ export class LocationMapComponent {
 
   /** sets the value cand changes the center */
   setValue(value) {
+    if (this.disabled) {
+      console.warn('cannot change map value: disabled!');
+      return;
+    }
     this.value = value;
     if (value) {
       this.center = value;
@@ -32,6 +38,9 @@ export class LocationMapComponent {
       console.warn('no coords');
       return;
     }
+    if (this.disabled) {
+      return;
+    }
     const position = { longitude: coords.lng, latitude: coords.lat };
     this.setValue(position);
     this.changed.emit(position);

diff --git a/packages/location/src/lib/location-picker.component.html b/packages/location/src/lib/location-picker.component.html
@@ -1,6 +1,6 @@
-<ec-location-search [placeholder]="field?.getPlaceholder()||placeholder" (changed)="setValue($event,true)"></ec-location-search>
-<ec-location-map (changed)="setValue($event)"></ec-location-map>
-<a class="btn" (click)="setValue(null)" *ngIf="map.value">
+<ec-location-search [placeholder]="field?.getPlaceholder()||placeholder" (changed)="setValue($event,true)" [disabled]="disabled"></ec-location-search>
+<ec-location-map (changed)="setValue($event)" [disabled]="disabled"></ec-location-map>
+<a class="btn" (click)="setValue(null)" *ngIf="map.value&&!disabled">
     <ec-icon name="trash"></ec-icon>
 </a>
 <small *ngIf="showRawValue&&map?.value">{{map.value | json}}</small>
diff --git a/packages/location/src/lib/location-picker.component.ts b/packages/location/src/lib/location-picker.component.ts
@@ -31,6 +31,8 @@ export class LocationPickerComponent extends DefaultInputComponent implements Co
   @ViewChild(LocationSearchComponent) search: LocationSearchComponent;
   /** Form input component */
   input: InputComponent;
+  /** readonly? */
+  @Input() disabled: boolean;
 
   constructor(
     public geocodeService: GeocodeService,
@@ -81,4 +83,8 @@ export class LocationPickerComponent extends DefaultInputComponent implements Co
   }
 
   registerOnTouched() {}
+
+  setDisabledState(isDisabled) {
+    this.disabled = isDisabled;
+  }
 }
diff --git a/packages/location/src/lib/location-search.component.html b/packages/location/src/lib/location-search.component.html
@@ -1,2 +1,10 @@
-<input class="input" #search [placeholder]="placeholder" autocorrect="off" autocapitalize="off" spellcheck="off" type="text"
-/>
+<input
+  class="input"
+  #search
+  [placeholder]="placeholder"
+  autocorrect="off"
+  autocapitalize="off"
+  spellcheck="off"
+  type="text"
+  [disabled]="disabled"
+/>
diff --git a/packages/location/src/lib/location-search.component.ts b/packages/location/src/lib/location-search.component.ts
@@ -10,6 +10,8 @@ import { GeocodeService } from './geocode.service';
 export class LocationSearchComponent implements AfterViewInit {
   /** Placeholder for input */
   @Input() placeholder = 'Search Location...';
+  /** If true, the input cannot be used */
+  @Input() disabled;
   /** The search input element */
   @ViewChild('search') searchInput: ElementRef;
   /** emits when the coords have been changed (after selecting a match) */