feature/SKOOP-208 (#119)

* Start and end date properties were added for `Membership` to let user set a period of the membership. Tests. * Whitespaces fixed.
T-Systems-MMS · Jul 3, 2019 · fb3aee3 · fb3aee3
1 parent 4007f82
commit fb3aee3
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 12 deletions.
diff --git a/src/app/memberships/membership.ts b/src/app/memberships/membership.ts
@@ -1,6 +1,10 @@
+import { Moment } from 'moment';
+
 export interface Membership {
   id?: string;
   name: string;
   description?: string;
+  startDate?: Moment;
+  endDate?: Moment;
   link?: string;
 }
diff --git a/src/app/memberships/memberships-edit.component.html b/src/app/memberships/memberships-edit.component.html
@@ -6,6 +6,21 @@
         <input matInput id="memberships-edit-title" placeholder="Organisation, web-site, blog, etc." formControlName="name" [required]="true">
       </mat-form-field>
     </div>
+    <div fxFlex fxLayout="row" fxLayoutGap="10px">
+      <mat-form-field class="publications-new-form-field">
+        <input matInput [matDatepicker]="startDatePicker" [max]="membershipForm.controls.endDate.value"  placeholder="Start date" formControlName="startDate">
+        <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #startDatePicker></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field class="publications-new-form-field">
+        <input matInput [matDatepicker]="endDatePicker" [min]="membershipForm.controls.startDate.value" [max]="maxDate"  placeholder="End date" formControlName="endDate">
+        <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #endDatePicker></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-error *ngIf="membershipForm.hasError('endDateCannotBeDefinedWithoutStartDate')">End date cannot be defined without start date.</mat-error>
+    </div>
     <div fxFlex>
       <app-skill-select-input [parentForm]="membershipForm"></app-skill-select-input>
     </div>

diff --git a/src/app/memberships/memberships-edit.component.spec.ts b/src/app/memberships/memberships-edit.component.spec.ts
@@ -14,7 +14,8 @@ import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bott
 import { of } from 'rxjs';
 import { MembershipService } from './membership.service';
 import { MembershipRequest } from './membership-request';
-
+import * as moment from 'moment';
+import { Util } from '../util/util';
 
 @Component({
   selector: 'app-skill-select-input',
@@ -36,7 +37,9 @@ const membershipEditData: MembershipResponse = {
       description: 'Java programming language.',
       skillGroups: null
     }
-  ]
+  ],
+  startDate: Util.ignoreTimezone(moment('2019-07-01')),
+  endDate: Util.ignoreTimezone(moment('2019-08-01'))
 };
 
 describe('MembershipsEditComponent', () => {
@@ -88,6 +91,8 @@ describe('MembershipsEditComponent', () => {
     expect(component.membershipForm.get('description').value).toBe(membershipEditData.description);
     expect(component.membershipForm.get('link').value).toBe(membershipEditData.link);
     expect(component.membershipForm.get('skills').value).toEqual(membershipEditData.skills.map(item => item.name));
+    expect(component.membershipForm.get('startDate').value).toEqual(membershipEditData.startDate);
+    expect(component.membershipForm.get('endDate').value).toEqual(membershipEditData.endDate);
   });
 
   it('should send a request to update a membership', () => {
@@ -96,13 +101,17 @@ describe('MembershipsEditComponent', () => {
       name: 'new title',
       description: membershipEditData.description,
       link: 'https://www.new-google.com',
-      skills: ['Skill1']
+      skills: ['Skill1'],
+      startDate: membershipEditData.startDate,
+      endDate: membershipEditData.endDate
     };
 
     component.membershipForm.get('name').setValue(membershipRequest.name);
     component.membershipForm.get('description').setValue(membershipRequest.description);
     component.membershipForm.get('link').setValue(membershipRequest.link);
     component.membershipForm.get('skills').setValue(membershipRequest.skills);
+    component.membershipForm.get('startDate').setValue(membershipRequest.startDate);
+    component.membershipForm.get('endDate').setValue(membershipRequest.endDate);
 
     component.editMembership();
     const membershipService: MembershipService = TestBed.get(MembershipService);

diff --git a/src/app/memberships/memberships-edit.component.ts b/src/app/memberships/memberships-edit.component.ts
@@ -1,11 +1,14 @@
 import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { MembershipService } from './membership.service';
 import { GlobalErrorHandlerService } from '../error/global-error-handler.service';
 import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bottom-sheet';
 import { MembershipResponse } from './membership-response';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MembershipRequest } from './membership-request';
+import { Util } from '../util/util';
+import { Moment } from 'moment';
+import * as moment from 'moment';
 
 @Component({
   selector: 'app-memberships-edit',
@@ -16,6 +19,7 @@ export class MembershipsEditComponent implements OnInit {
 
   membershipForm: FormGroup;
   errorMessage: string = null;
+  maxDate: Date = new Date();
 
   constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public membership: MembershipResponse,
               private membershipService: MembershipService,
@@ -31,6 +35,13 @@ export class MembershipsEditComponent implements OnInit {
       description: new FormControl(this.membership.description),
       link: new FormControl(this.membership.link),
       skills: new FormControl((this.membership.skills || []).map(item => item.name)),
+      startDate: new FormControl(moment(this.membership.startDate).isValid() ? moment(this.membership.startDate) : null),
+      endDate: new FormControl(moment(this.membership.endDate).isValid() ? moment(this.membership.endDate) : null)
+    }, { validators: (control: FormGroup): ValidationErrors | null => {
+        const startDate = control.get('startDate');
+        const endDate = control.get('endDate');
+        return endDate && startDate && !startDate.value && endDate.value ? { 'endDateCannotBeDefinedWithoutStartDate': true } : null;
+      }
     });
   }
 
@@ -59,7 +70,9 @@ export class MembershipsEditComponent implements OnInit {
       name: this.membershipForm.get('name').value,
       description: this.membershipForm.get('description').value,
       link: this.membershipForm.get('link').value,
-      skills: this.skillsArray || []
+      skills: this.skillsArray || [],
+      startDate: Util.ignoreTimezone(this.membershipForm.get('startDate').value as Moment),
+      endDate: Util.ignoreTimezone(this.membershipForm.get('endDate').value as Moment)
     } as MembershipRequest;
   }
 

diff --git a/src/app/memberships/memberships-new.component.html b/src/app/memberships/memberships-new.component.html
@@ -6,6 +6,21 @@
         <input matInput id="memberships-new-title" placeholder="Organisation, web-site, blog, etc." formControlName="name" [required]="true">
       </mat-form-field>
     </div>
+    <div fxFlex fxLayout="row" fxLayoutGap="10px">
+      <mat-form-field class="publications-new-form-field">
+        <input matInput [matDatepicker]="startDatePicker" [max]="membershipForm.controls.endDate.value"  placeholder="Start date" formControlName="startDate">
+        <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #startDatePicker></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field class="publications-new-form-field">
+        <input matInput [matDatepicker]="endDatePicker" [min]="membershipForm.controls.startDate.value" [max]="maxDate"  placeholder="End date" formControlName="endDate">
+        <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #endDatePicker></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-error *ngIf="membershipForm.hasError('endDateCannotBeDefinedWithoutStartDate')">End date cannot be defined without start date.</mat-error>
+    </div>
     <div fxFlex>
       <app-skill-select-input [parentForm]="membershipForm"></app-skill-select-input>
     </div>

diff --git a/src/app/memberships/memberships-new.component.spec.ts b/src/app/memberships/memberships-new.component.spec.ts
@@ -14,6 +14,8 @@ import { GlobalErrorHandlerService } from '../error/global-error-handler.service
 import { of } from 'rxjs';
 import { MatBottomSheetRef } from '@angular/material/bottom-sheet';
 import { MembershipService } from './membership.service';
+import * as moment from 'moment';
+import { Util } from '../util/util';
 
 @Component({
   selector: 'app-skill-select-input',
@@ -27,7 +29,9 @@ const membershipRequest: MembershipRequest = {
   name: 'membership name',
   description: 'Additional Information',
   link: 'https://www.google.com',
-  skills: ['Skill1', 'Skill2']
+  skills: ['Skill1', 'Skill2'],
+  startDate: Util.ignoreTimezone(moment('2019-07-01')),
+  endDate: Util.ignoreTimezone(moment('2019-08-01'))
 };
 
 const membershipResponse: MembershipResponse = {
@@ -44,7 +48,9 @@ const membershipResponse: MembershipResponse = {
       id: '4325345345',
       name: 'Skill2'
     },
-  ]
+  ],
+  startDate: Util.ignoreTimezone(moment('2019-07-01')),
+  endDate: Util.ignoreTimezone(moment('2019-08-01'))
 };
 
 describe('MembershipsNewComponent', () => {
@@ -92,6 +98,8 @@ describe('MembershipsNewComponent', () => {
     component.membershipForm.get('description').setValue(membershipRequest.description);
     component.membershipForm.get('link').setValue(membershipRequest.link);
     component.membershipForm.get('skills').setValue(membershipRequest.skills);
+    component.membershipForm.get('startDate').setValue(membershipRequest.startDate);
+    component.membershipForm.get('endDate').setValue(membershipRequest.endDate);
 
     component.addMembership();
 

diff --git a/src/app/memberships/memberships-new.component.ts b/src/app/memberships/memberships-new.component.ts
@@ -1,10 +1,12 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { GlobalErrorHandlerService } from '../error/global-error-handler.service';
 import { MatBottomSheetRef } from '@angular/material/bottom-sheet';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MembershipService } from './membership.service';
 import { MembershipRequest } from './membership-request';
+import { Util } from '../util/util';
+import { Moment } from 'moment';
 
 @Component({
   selector: 'app-memberships-new',
@@ -15,6 +17,7 @@ export class MembershipsNewComponent implements OnInit {
 
   membershipForm: FormGroup;
   errorMessage: string = null;
+  maxDate: Date = new Date();
 
   constructor(private membershipService: MembershipService,
               private formBuilder: FormBuilder,
@@ -28,7 +31,14 @@ export class MembershipsNewComponent implements OnInit {
       name: new FormControl('', Validators.required),
       description: new FormControl(''),
       link: new FormControl(''),
-      skills: new FormControl([])
+      skills: new FormControl([]),
+      startDate: new FormControl(),
+      endDate: new FormControl()
+    }, { validators: (control: FormGroup): ValidationErrors | null => {
+        const startDate = control.get('startDate');
+        const endDate = control.get('endDate');
+        return endDate && startDate && !startDate.value && endDate.value ? { 'endDateCannotBeDefinedWithoutStartDate': true } : null;
+      }
     });
   }
 
@@ -56,7 +66,9 @@ export class MembershipsNewComponent implements OnInit {
       name: this.membershipForm.get('name').value,
       description: this.membershipForm.get('description').value,
       link: this.membershipForm.get('link').value,
-      skills: this.skillsArray || []
+      skills: this.skillsArray || [],
+      startDate: Util.ignoreTimezone(this.membershipForm.get('startDate').value as Moment),
+      endDate: Util.ignoreTimezone(this.membershipForm.get('endDate').value as Moment)
     } as MembershipRequest;
   }
 

diff --git a/src/app/memberships/memberships.component.html b/src/app/memberships/memberships.component.html
@@ -21,6 +21,10 @@ <h2 class="memberships-heading">{{ membership.name }}</h2>
       </div>
       <div fxLayout="row">
         <div fxFlex>
+          <div fxLayout="row" *ngIf="membership.startDate">
+            <div class="memberships-description-label">Period:</div>
+            <div>{{membership.startDate | date:'dd.MM.yyyy'}} - {{membership.endDate ? (membership.endDate | date:'dd.MM.yyyy') : 'N/A'}}</div>
+          </div>
           <div fxLayout="row">
             <div class="memberships-description-label">Description:</div>
             <div>{{membership.description}}</div>

diff --git a/src/app/memberships/memberships.component.spec.ts b/src/app/memberships/memberships.component.spec.ts
@@ -20,6 +20,8 @@ import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { MatDialog } from '@angular/material/dialog';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { PopupNotificationService } from '../shared/popup-notification.service';
+import * as moment from 'moment';
+import { Util } from '../util/util';
 
 @Component({
   selector: 'app-skill-select-input',
@@ -35,7 +37,9 @@ const membershipResponses: MembershipResponse[] = [
     name: 'Membership name',
     description: 'Additional Information',
     link: 'https://www.google.com',
-    'skills': []
+    'skills': [],
+    startDate: Util.ignoreTimezone(moment('2019-07-01')),
+    endDate: Util.ignoreTimezone(moment('2019-08-01'))
   },
   {
     id: '369710e0-5808-4318-961e-0161f9f81f1c',
@@ -49,7 +53,9 @@ const membershipResponses: MembershipResponse[] = [
         description: 'Java programming language.',
         skillGroups: null
       }
-    ]
+    ],
+    startDate: Util.ignoreTimezone(moment('2020-07-01')),
+    endDate: Util.ignoreTimezone(moment('2020-08-01'))
   }
 ];