Merge pull request #581 from liimaorg/timepicker_fixup

Timepicker fixup
liimaorg · Dec 2, 2020 · 45b61fa · 45b61fa
2 parents 84b0bd2 + d68171d
commit 45b61fa
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 157 deletions.
diff --git a/AMW_angular/io/.gitignore b/AMW_angular/io/.gitignore
@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+debug.log
 # Only exists if Bazel was run
 /bazel-out
 

diff --git a/AMW_angular/io/src/app/auditview/auditview-table/auditview-table.service.ts b/AMW_angular/io/src/app/auditview/auditview-table/auditview-table.service.ts
@@ -75,7 +75,6 @@ export class AuditviewTableService {
       tap(() => this._loading$.next(true)),
       debounceTime(200),
       map(([searchTerm, sortColumn, sortDirection, auditlogEntries]) => {
-        console.log('mapping it');
         return this._search(
           searchTerm,
           sortColumn,

diff --git a/AMW_angular/io/src/app/deployment/deployment.component.spec.ts b/AMW_angular/io/src/app/deployment/deployment.component.spec.ts
@@ -21,6 +21,7 @@ import * as moment from 'moment';
 import { SharedModule } from '../shared/shared.module';
 import { NavigationStoreService } from '../navigation/navigation-store.service';
 import { DATE_FORMAT } from '../core/amw-constants';
+import { DateTimeModel } from '../shared/date-time-picker/date-time.model';
 @Component({
   template: '',
 })
@@ -327,7 +328,7 @@ describe('DeploymentComponent (create deployment)', () => {
       id: 5,
       tagDate: 1485378084103,
     } as ResourceTag;
-    component.deploymentDate = '2017-01-02 12:00';
+    component.deploymentDate = DateTimeModel.fromLocalString('2017-01-02 12:00', DATE_FORMAT);
     component.transDeploymentParameters = [
       { key: 'atest', value: 'foo' } as DeploymentParameter,
       { key: 'btest', value: 'bar' } as DeploymentParameter,

diff --git a/AMW_angular/io/src/app/deployment/deployment.component.ts b/AMW_angular/io/src/app/deployment/deployment.component.ts
@@ -19,6 +19,7 @@ import * as moment from 'moment';
 import * as $ from 'jquery'; // this needs to be here...
 import { NavigationStoreService } from '../navigation/navigation-store.service';
 import { DATE_FORMAT } from '../core/amw-constants';
+import { DateTimeModel } from '../shared/date-time-picker/date-time.model';
 
 @Component({
   selector: 'amw-deployment',
@@ -46,7 +47,7 @@ export class DeploymentComponent implements OnInit, AfterViewInit {
   runtime: Relation = null;
   resourceTags: ResourceTag[] = [this.defaultResourceTag];
   selectedResourceTag: ResourceTag = this.defaultResourceTag;
-  deploymentDate: string = '';
+  deploymentDate: DateTimeModel = null;
   appsWithVersion: AppWithVersion[] = [];
   transDeploymentParameter: DeploymentParameter = {} as DeploymentParameter;
   transDeploymentParameters: DeploymentParameter[] = [];
@@ -134,7 +135,6 @@ export class DeploymentComponent implements OnInit, AfterViewInit {
     if (!this.selectedRelease) {
       this.selectedRelease = this.releases[0];
     }
-    console.log('selected release is ' + this.selectedRelease.release);
     this.getRelatedForRelease();
     this.goTo(this.selectedAppserver.name + '/' + this.selectedRelease.release);
   }
@@ -171,13 +171,11 @@ export class DeploymentComponent implements OnInit, AfterViewInit {
 
   requestDeployment() {
     this.requestOnly = true;
-    console.log('requestDeployment()');
     this.prepareDeployment();
   }
 
   createDeployment() {
     this.requestOnly = false;
-    console.log('createDeployment()');
     this.prepareDeployment();
   }
 
@@ -418,10 +416,7 @@ export class DeploymentComponent implements OnInit, AfterViewInit {
           : new Date().getTime();
     }
     if (this.deploymentDate) {
-      const dateTime = moment(this.deploymentDate, DATE_FORMAT);
-      if (dateTime && dateTime.isValid()) {
-        deploymentRequest.deploymentDate = dateTime.valueOf();
-      }
+      deploymentRequest.deploymentDate = this.deploymentDate.toEpoch();
     }
     if (this.transDeploymentParameters.length > 0) {
       deploymentRequest.deploymentParameters = this.transDeploymentParameters;
@@ -487,7 +482,6 @@ export class DeploymentComponent implements OnInit, AfterViewInit {
   // for url params only
   private setPreselected() {
     if (this.appserverName) {
-      console.log('pre-selected server is ' + this.appserverName);
       this.selectedAppserver = _.find(this.appservers, {
         name: this.appserverName,
       });
@@ -521,7 +515,6 @@ export class DeploymentComponent implements OnInit, AfterViewInit {
   // for url params only
   private setRelease() {
     if (this.releaseName) {
-      console.log('pre-selected release is ' + this.releaseName);
       this.selectedRelease = this.releases.find(
         (release) => release.release === this.releaseName
       );

diff --git a/AMW_angular/io/src/app/deployments/deployments-list.component.html b/AMW_angular/io/src/app/deployments/deployments-list.component.html
@@ -309,21 +309,6 @@ <h6 class="modal-title">
           </button>
         </div>
         <div class="modal-body">
-          <div
-            *ngIf="errorMessage"
-            class="alert alert-warning alert-dismissible"
-            role="alert"
-          >
-            <span [innerHTML]="errorMessage"></span>
-            <button
-              type="button"
-              class="close"
-              data-dismiss="alert"
-              aria-label="Close"
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
           <div class="input-group date">
             <app-date-time-picker
               [(ngModel)]="deploymentDate"

diff --git a/AMW_angular/io/src/app/deployments/deployments-list.component.ts b/AMW_angular/io/src/app/deployments/deployments-list.component.ts
@@ -3,8 +3,7 @@ import { Deployment } from '../deployment/deployment';
 import { DeploymentFilter } from '../deployment/deployment-filter';
 import { ResourceService } from '../resource/resource.service';
 import * as _ from 'lodash';
-import * as moment from 'moment';
-import { DATE_FORMAT } from '../core/amw-constants';
+import { DateTimeModel } from '../shared/date-time-picker/date-time.model';
 
 @Component({
   selector: 'amw-deployments-list',
@@ -34,12 +33,10 @@ export class DeploymentsListComponent {
 
   deployment: Deployment;
 
-  deploymentDate: number;
+  deploymentDate: DateTimeModel = new DateTimeModel();
 
   hasPermissionShakedownTest: boolean = null;
 
-  errorMessage: string = '';
-
   allSelected: boolean = false;
 
   failureReason: { [key: string]: string } = {
@@ -62,6 +59,7 @@ export class DeploymentsListComponent {
 
   showDateChange(deploymentId: number) {
     this.deployment = _.find(this.deployments, ['id', deploymentId]);
+    this.deploymentDate = DateTimeModel.fromEpoch(this.deployment.deploymentDate);
     $('#deploymentDateChange').modal('show');
   }
 
@@ -71,7 +69,6 @@ export class DeploymentsListComponent {
       .canCreateShakedownTest(this.deployment.appServerId)
       .subscribe(
         /* happy path */ (r) => (this.hasPermissionShakedownTest = r),
-        /* error path */ (e) => (this.errorMessage = e),
         /* onComplete */ () => $('#deploymentConfirmation').modal('show')
       );
   }
@@ -87,19 +84,12 @@ export class DeploymentsListComponent {
   }
 
   doDateChange() {
-    debugger;
     if (this.deployment) {
-      this.errorMessage = '';
-      const dateTime = moment(this.deploymentDate, DATE_FORMAT);
-      if (!dateTime || !dateTime.isValid()) {
-        this.errorMessage = 'Invalid date';
-      } else {
-        this.deployment.deploymentDate = dateTime.valueOf();
-        this.editDeploymentDate.emit(this.deployment);
-        $('#deploymentDateChange').modal('hide');
-        delete this.deployment;
-        delete this.deploymentDate;
-      }
+      this.deployment.deploymentDate = this.deploymentDate.toEpoch();
+      this.editDeploymentDate.emit(this.deployment);
+      $('#deploymentDateChange').modal('hide');
+      delete this.deployment;
+      delete this.deploymentDate;
     }
   }
 

diff --git a/AMW_angular/io/src/app/permission/permission.component.ts b/AMW_angular/io/src/app/permission/permission.component.ts
@@ -191,7 +191,6 @@ export class PermissionComponent implements OnInit, OnDestroy, AfterViewInit {
   createRestrictions(restrictionsCreation: RestrictionsCreation) {
     this.clearMessages();
     this.isLoading = true;
-    console.log('createRestrictions ' + JSON.stringify(restrictionsCreation));
     this.permissionService
       .createRestrictions(restrictionsCreation, this.delegationMode)
       .subscribe(

diff --git a/AMW_angular/io/src/app/shared/date-time-picker/dae-time.model.spec.ts b/AMW_angular/io/src/app/shared/date-time-picker/dae-time.model.spec.ts
@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import * as moment from 'moment';
+import { DateTimePickerComponent } from './date-time-picker.component';
+import { DateTimeModel } from "./date-time.model";
+
+describe('DateTimeModel', () => {
+  it('should convert dates correctly', () => {
+    var fixture = TestBed.createComponent(DateTimePickerComponent);
+    var component = fixture.componentInstance;
+    var testDate = '02.01.2017 12:00';
+
+    var m = moment(testDate, component.dateStringFormat);
+    var dateTimeFromString = DateTimeModel.fromLocalString(testDate, component.dateStringFormat);
+    var dateTimeFromEpoch = DateTimeModel.fromEpoch(m.valueOf());
+
+    expect(dateTimeFromString.day).toEqual(m.date());
+    expect(dateTimeFromString.month).toEqual(m.month() + 1);
+
+    expect(dateTimeFromString).toEqual(dateTimeFromEpoch);
+
+    expect(dateTimeFromString.toEpoch()).toEqual(m.valueOf());
+  });
+});
diff --git a/AMW_angular/io/src/app/shared/date-time-picker/date-time-picker.component.html b/AMW_angular/io/src/app/shared/date-time-picker/date-time-picker.component.html
@@ -1,11 +1,18 @@
+<div *ngIf="errorMessage" class="alert alert-warning alert-dismissible" role="alert">
+  <span [innerHTML]="errorMessage"></span>
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
 <div class="input-group mr-2">
   <input
     [ngClass]="ngControl?.valid ? 'ng-valid' : 'ng-invalid'"
     class="form-control"
     (blur)="inputBlur($event)"
-    [ngModel]="dateString | date: inputDatetimeFormat"
-    (change)="onInputChange($event)"
+    [ngModel]="dateString"
+    (change)="onDateStringChange($event)"
     [disabled]="disabled"
+    placeholder="{{ dateStringFormat }}"
   />
 
   <div class="input-group-append">

diff --git a/AMW_angular/io/src/app/shared/date-time-picker/date-time-picker.component.ts b/AMW_angular/io/src/app/shared/date-time-picker/date-time-picker.component.ts
@@ -11,7 +11,7 @@ import {
   NgbTimeStruct,
   NgbPopoverConfig,
   NgbPopover,
-  NgbDatepicker,
+  NgbDateStruct,
 } from '@ng-bootstrap/ng-bootstrap';
 import {
   NG_VALUE_ACCESSOR,
@@ -40,8 +40,9 @@ export class DateTimePickerComponent
   @Input()
   dateString: string;
 
+  // moment js format
   @Input()
-  inputDatetimeFormat = 'dd.MM.yyyy HH:mm';
+  dateStringFormat = 'DD.MM.yyyy HH:mm';
   @Input()
   hourStep = 1;
   @Input()
@@ -50,16 +51,12 @@ export class DateTimePickerComponent
   secondStep = 30;
   @Input()
   seconds = false;
-
   @Input()
   disabled = false;
 
   showTimePickerToggle = false;
-
   datetime = new DateTimeModel();
-
-  @ViewChild(NgbDatepicker)
-  dp: NgbDatepicker;
+  errorMessage = "";
 
   @ViewChild(NgbPopover)
   popover: NgbPopover;
@@ -84,14 +81,11 @@ export class DateTimePickerComponent
     });
   }
 
-  writeValue(newModel: string) {
+  writeValue(newModel: DateTimeModel) {
     if (newModel) {
-      this.datetime = Object.assign(
-        this.datetime,
-        DateTimeModel.fromLocalString(newModel)
-      );
-      this.dateString = newModel;
-      this.setDateStringModel();
+      this.datetime = Object.assign(this.datetime, newModel)
+      //this.datetime = newModel;
+      this.setDateString();
     } else {
       this.datetime = new DateTimeModel();
     }
@@ -114,60 +108,47 @@ export class DateTimePickerComponent
     this.disabled = isDisabled;
   }
 
-  onInputChange($event: any) {
+  // called when user updates the datestring directly
+  onDateStringChange($event: any) {
     const value = $event.target.value;
-    const dt = DateTimeModel.fromLocalString(value);
+    const dt = DateTimeModel.fromLocalString(value, this.dateStringFormat);
+    this.errorMessage = ""
 
     if (dt) {
       this.datetime = dt;
-      this.setDateStringModel();
+      this.onChange(dt);
     } else if (value.trim() === '') {
       this.datetime = new DateTimeModel();
       this.dateString = '';
-      this.onChange(this.dateString);
+      this.onChange(this.datetime);
     } else {
-      this.onChange(value);
+      this.errorMessage = "Invalid date!"
     }
   }
 
-  onDateChange($event) {
-    if ($event.year) {
-      $event = `${$event.year}-${$event.month}-${$event.day}`;
+  onDateChange(event: NgbDateStruct) {
+    if(!event) {
+      return
     }
-
-    const date = DateTimeModel.fromLocalString($event);
-
-    if (!date) {
-      this.dateString = this.dateString;
-      return;
-    }
-
-    if (!this.datetime) {
-      this.datetime = date;
-    }
-
-    this.datetime.year = date.year;
-    this.datetime.month = date.month;
-    this.datetime.day = date.day;
-
-    this.dp.navigateTo({
-      year: this.datetime.year,
-      month: this.datetime.month,
-    });
-    this.setDateStringModel();
+    this.datetime.year = event.year;
+    this.datetime.month = event.month;
+    this.datetime.day = event.day;
+    this.setDateString();
   }
 
   onTimeChange(event: NgbTimeStruct) {
+    if(!event) {
+      return
+    }
     this.datetime.hour = event.hour;
     this.datetime.minute = event.minute;
     this.datetime.second = event.second;
-
-    this.setDateStringModel();
+    this.setDateString();
   }
 
-  setDateStringModel() {
-    this.dateString = this.datetime.toString();
-    this.onChange(this.dateString);
+  setDateString() {
+    this.dateString = this.datetime.toString(this.dateStringFormat);
+    this.onChange(this.datetime);
   }
 
   inputBlur($event) {