Merge pull request #2 from zapinfo/cycle-fix

Fixed bug where parsing cron was triggering second UI change

package.json

@@ -8,7 +8,7 @@
     "Håvard D. Johansen",
     "Ryan Morlok"
   ],
-  "version": "0.4.12",
+  "version": "0.4.13",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },

src/app/app.component.ts

@@ -1,14 +1,17 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {CronOptions} from './cron-editor/CronOptions';
 import {CronGenComponent} from './cron-editor/cron-editor.component'
 import {CronFlavor} from './cron-editor/enums';
+import {Subscription} from 'rxjs';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
+  private routeQueryParamsSubscription: Subscription;
   public cronExpression = '0 0 1/1 * *';
   public isCronDisabled = false;
   public cronOptions: CronOptions = {
@@ -41,12 +44,28 @@ export class AppComponent {
   @ViewChild('cronEditorDemo', {static: false})
   cronEditorDemo: CronGenComponent;
 
-  constructor() {
+  constructor(
+    private route: ActivatedRoute,
+  ) {
     this.cronFlavorKeys = Object.keys(this.cronFlavorValues);
   }
 
   cronFlavorChange() {
     this.cronEditorDemo.options = this.cronOptions;
     this.cronEditorDemo.regenerateCron();
   }
+
+  ngOnInit(): void {
+    this.routeQueryParamsSubscription = this.route.queryParams.subscribe(params => {
+      if (params['cron'] && params['cron'].length > 0) {
+        this.cronExpression = params['cron'];
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.routeQueryParamsSubscription) {
+      this.routeQueryParamsSubscription.unsubscribe();
+    }
+  }
 }

src/app/app.module.ts

@@ -1,15 +1,22 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
 
 import {CronEditorModule} from './cron-editor/cron-editor.module';
 
 import {AppComponent} from './app.component';
+import {APP_BASE_HREF} from '@angular/common';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, CronEditorModule],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([]),
+    CronEditorModule
+  ],
   declarations: [AppComponent],
-  providers: [],
+  providers: [{provide: APP_BASE_HREF, useValue : '/' }],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/cron-editor/cron-editor.component.ts

@@ -11,6 +11,7 @@ import {Days, MonthWeeks, Months, CronFlavor} from './enums';
 export class CronGenComponent implements OnInit, OnChanges {
   private _activeTab: string;
   private _selectedTabIndex: number;
+  private _initializing = true;
 
   @Input() public disabled: boolean;
   @Input() public options: CronOptions;
@@ -21,7 +22,10 @@ export class CronGenComponent implements OnInit, OnChanges {
 
   set cron(value: string) {
     this.localCron = value;
-    this.cronChange.emit(this.localCron);
+
+    if (!this._initializing) {
+      this.cronChange.emit(this.localCron);
+    }
   }
 
   // the name is an Angular convention, @Input variable name + "Change" suffix
@@ -121,6 +125,7 @@ export class CronGenComponent implements OnInit, OnChanges {
     }
 
     this.regenerateCron();
+    this._initializing = false;
   }
 
   public async ngOnChanges(changes: SimpleChanges) {