feat: handling hike save button state (enabled/disabled) based on nec…

…essary data.
garlictech · Mar 30, 2018 · 9012ba8 · 9012ba8
1 parent 66aeb43
commit 9012ba8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/...app/pages/hike-edit/components/hike-edit-general-info/hike-edit-general-info.component.ts b/...app/pages/hike-edit/components/hike-edit-general-info/hike-edit-general-info.component.ts
@@ -143,7 +143,7 @@ export class HikeEditGeneralInfoComponent implements OnInit, OnDestroy {
     if (this.hikeForm.controls._selLang.value) {
       (<FormArray>this.hikeForm.controls.langs).push(
         this._createDescriptionItem({
-          id:   this.hikeForm.controls._selLang.value,
+          id: this.hikeForm.controls._selLang.value,
           title: '',
           fullDescription: '',
           summary: ''

diff --git a/src/app/pages/hike-edit/hike-edit.component.html b/src/app/pages/hike-edit/hike-edit.component.html
@@ -7,7 +7,7 @@
           <button
             class="btn btn-sm btn-fill btn-success"
             (click)="saveHike()"
-            [disabled]="(hikePoiIds$ | async)?.length < 1 || (routeInfoData$ | async)?.segments.length < 1"
+            [disabled]="!(allowSave$ | async)"
           >Save hike</button>
         </div>
       </div>

diff --git a/src/app/pages/hike-edit/hike-edit.component.ts b/src/app/pages/hike-edit/hike-edit.component.ts
@@ -21,7 +21,7 @@ import * as uuid from 'uuid/v1';
   styleUrls: ['./hike-edit.component.scss']
 })
 export class HikeEditComponent implements OnInit, OnDestroy {
-  public hikePoiIds$: Observable<string[]>;
+  public allowSave$: Observable<boolean>;
   public routeInfoData$: Observable<IHikeEditRoutePlannerState>;
   private _hikeId: string;
   private _destroy$: Subject<boolean> = new Subject<boolean>();
@@ -85,9 +85,17 @@ export class HikeEditComponent implements OnInit, OnDestroy {
         }
       });
 
-    this.hikePoiIds$ = this._store.select(this._hikeEditGeneralInfoSelectors.getPois);
     this.routeInfoData$ = this._store.select(this._hikeEditRoutePlannerSelectors.getRoutePlanner);
 
+    this.allowSave$ = Observable.combineLatest(
+      this._store.select(this._hikeEditGeneralInfoSelectors.getPois),
+      this.routeInfoData$
+    ).map(data => {
+      const _pois = data[0];
+      const _segments = data[1].segments;
+      return _pois.length > 0 && (_segments && _segments.length > 0);
+    })
+
     // Handling hike save
     this._store.select(this._hikeEditGeneralInfoSelectors.getHikeId)
       .takeUntil(this._destroy$)