Format date fields without patch form

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.ts

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -31,14 +31,14 @@ export class ActivateCenterComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {centersService} CentersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.centerId = this.route.parent.snapshot.params['centerId'];
@@ -65,15 +65,15 @@ export class ActivateCenterComponent implements OnInit {
    * if successful redirects to the center.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const activateCenterData = this.activateCenterForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevactivationDate: Date = this.activateCenterForm.value.activationDate;
-    this.activateCenterForm.patchValue({
-      activationDate: this.datePipe.transform(prevactivationDate, dateFormat),
-    });
+    if (activateCenterData.activationDate instanceof Date) {
+      activateCenterData.activationDate = this.dateUtils.formatDate(prevactivationDate, dateFormat);
+    }
     const data = {
-      ...this.activateCenterForm.value,
+      ...activateCenterData,
       dateFormat,
       locale
     };

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -40,14 +40,14 @@ export class AttachCenterMeetingComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centersActionData: any }) => {
@@ -114,17 +114,17 @@ export class AttachCenterMeetingComponent implements OnInit {
    * Submits the form and attatches the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const centerMeetingFormData = this.centerMeetingForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const title = `centers_${this.centerId}_CollectionMeeting`;
     const typeId = '1';
     const prevStartDate: Date = this.centerMeetingForm.value.startDate;
-    this.centerMeetingForm.patchValue({
-      startDate: this.datePipe.transform(prevStartDate, dateFormat),
-    });
+    if (centerMeetingFormData.startDate instanceof Date) {
+      centerMeetingFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);
+    }
     const data = {
-      ...this.centerMeetingForm.value,
+      ...centerMeetingFormData,
       title,
       typeId,
       dateFormat,

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.ts

@@ -48,7 +48,7 @@ export class CenterAttendanceComponent implements OnInit {
   /**
    * Retrieves the center members data from `resolve`.
    * @param {ActivatedRoute} route Route
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {Router} router Router
    * @param {CentersService} centersService Centers Service
    * @param {SettingsService} settingsService Settings Service.

src/app/centers/centers-view/center-actions/close-center/close-center.component.ts

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -33,14 +33,14 @@ export class CloseCenterComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centeractionData: any }) => {
@@ -67,15 +67,15 @@ export class CloseCenterComponent implements OnInit {
    * Submits the form and closes the center.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const closeCenterFormData = this.closeCenterForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevClosedDate: Date = this.closeCenterForm.value.closureDate;
-    this.closeCenterForm.patchValue({
-      closureDate: this.datePipe.transform(prevClosedDate, dateFormat),
-    });
+    if (closeCenterFormData.closureDate instanceof Date) {
+      closeCenterFormData.closureDate = this.dateUtils.formatDate(prevClosedDate, dateFormat);
+    }
     const data = {
-      ...this.closeCenterForm.value,
+      ...closeCenterFormData,
       dateFormat,
       locale
     };

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.ts

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -38,14 +38,14 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centersActionData: any }) => {
@@ -74,18 +74,20 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
    * Submits the form and updates the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const centerEditMeetingScheduleFormData = this.centerEditMeetingScheduleForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const reschedulebasedOnMeetingDates = true;
     const prevOldDate: Date = new Date(this.centerEditMeetingScheduleForm.value.presentMeetingDate);
+    if (centerEditMeetingScheduleFormData.startDate instanceof Date) {
+      centerEditMeetingScheduleFormData.presentMeetingDate = this.dateUtils.formatDate(prevOldDate, dateFormat);
+    }
     const prevNewDate: Date = this.centerEditMeetingScheduleForm.value.newMeetingDate;
-    this.centerEditMeetingScheduleForm.patchValue({
-      'presentMeetingDate': this.datePipe.transform(prevOldDate, dateFormat),
-      'newMeetingDate': this.datePipe.transform(prevNewDate, dateFormat)
-    });
+    if (centerEditMeetingScheduleFormData.newMeetingDate instanceof Date) {
+      centerEditMeetingScheduleFormData.newMeetingDate = this.dateUtils.formatDate(prevNewDate, dateFormat);
+    }
     const data = {
-      ...this.centerEditMeetingScheduleForm.value,
+      ...centerEditMeetingScheduleFormData,
       reschedulebasedOnMeetingDates,
       dateFormat,
       locale

src/app/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.ts

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -42,14 +42,14 @@ export class EditCenterMeetingComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centersActionData: any }) => {
@@ -119,17 +119,17 @@ export class EditCenterMeetingComponent implements OnInit {
    * Submits the form and updates the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const centerEditMeetingFormData = this.centerEditMeetingForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const title = `centers_${this.centerId}_CollectionMeeting`;
     const typeId = '1';
     const prevStartDate: Date = this.centerEditMeetingForm.value.startDate;
-    this.centerEditMeetingForm.patchValue({
-      startDate: this.datePipe.transform(prevStartDate, dateFormat),
-    });
+    if (centerEditMeetingFormData.startDate instanceof Date) {
+      centerEditMeetingFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);
+    }
     const data = {
-      ...this.centerEditMeetingForm.value,
+      ...centerEditMeetingFormData,
       repeating: true,
       title,
       typeId,

src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts

@@ -50,7 +50,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {CentersService} centersService Centers Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.

src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts

@@ -40,7 +40,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {CentersService} centersService Centers Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
@@ -150,7 +150,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Maps API response to data table form fields.
    * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with date pipe.
+   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
    * @param {any} dataTableEntryObject Additional data table details.
    */
   getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {

src/app/centers/create-center/create-center.component.ts

@@ -2,12 +2,12 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
 import { CentersService } from '../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Center component.
@@ -44,16 +44,16 @@ export class CreateCenterComponent implements OnInit {
    * @param {CentersService} centerService CentersService.
    * @param {SettingsService} settingsService Settings Service.
    * @param {GroupsService} groupService GroupsService.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    */
   constructor(private formBuilder: FormBuilder,
-              private route: ActivatedRoute,
-              private router: Router,
-              private centerService: CentersService,
-              private settingsService: SettingsService,
-              private groupService: GroupsService,
-              private datePipe: DatePipe) {
-    this.route.data.subscribe( (data: { offices: any }) => {
+    private route: ActivatedRoute,
+    private router: Router,
+    private centerService: CentersService,
+    private settingsService: SettingsService,
+    private groupService: GroupsService,
+    private dateUtils: Dates) {
+    this.route.data.subscribe((data: { offices: any }) => {
       this.officeData = data.offices;
     });
   }
@@ -85,8 +85,8 @@ export class CreateCenterComponent implements OnInit {
    * Adds form control Activation Date if active.
    */
   buildDependencies() {
-    this.centerForm.get('officeId').valueChanges.subscribe( (option: any) => {
-      this.groupService.getGroupsByOfficeId(option).subscribe( (data: any) => {
+    this.centerForm.get('officeId').valueChanges.subscribe((option: any) => {
+      this.groupService.getGroupsByOfficeId(option).subscribe((data: any) => {
         this.groupsData = data;
         if (!this.groupsData.length) {
           this.groupChoice.disable();
@@ -94,7 +94,7 @@ export class CreateCenterComponent implements OnInit {
           this.groupChoice.enable();
         }
       });
-      this.centerService.getStaff(option).subscribe( (data: any) => {
+      this.centerService.getStaff(option).subscribe((data: any) => {
         this.staffData = data['staffOptions'];
         if (this.staffData === undefined) {
           this.centerForm.controls['staffId'].disable();
@@ -103,7 +103,7 @@ export class CreateCenterComponent implements OnInit {
         }
       });
     });
-    this.centerForm.get('active').valueChanges.subscribe( (bool: boolean) => {
+    this.centerForm.get('active').valueChanges.subscribe((bool: boolean) => {
       if (bool) {
         this.centerForm.addControl('activationDate', new FormControl('', Validators.required));
       } else {
@@ -133,22 +133,27 @@ export class CreateCenterComponent implements OnInit {
    * if successful redirects to centers.
    */
   submit() {
-      const prevSubmittedOnDate: Date = this.centerForm.value.submittedOnDate;
-      const prevActivationDate: Date = this.centerForm.value.activationDate;
-      // TODO: Update once language and date settings are setup
-      const dateFormat = this.settingsService.dateFormat;
-      this.centerForm.patchValue({
-        submittedOnDate: this.datePipe.transform(prevSubmittedOnDate, dateFormat),
-        activationDate: this.datePipe.transform(prevActivationDate, dateFormat)
-      });
-      const center = this.centerForm.value;
-      center.locale = this.settingsService.language.code;
-      center.dateFormat = dateFormat;
-      center.groupMembers = [];
-      this.groupMembers.forEach((group: any) => center.groupMembers.push(group.id));
-      this.centerService.createCenter(center).subscribe((response: any) => {
-        this.router.navigate(['../centers']);
-      });
+    const centerFormData = this.centerForm.value;
+    const prevSubmittedOnDate: Date = this.centerForm.value.submittedOnDate;
+    const prevActivationDate: Date = this.centerForm.value.activationDate;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    if (centerFormData.submittedOnDate instanceof Date) {
+      centerFormData.submittedOnDate = this.dateUtils.formatDate(prevSubmittedOnDate, dateFormat);
     }
+    if (centerFormData.activationDate instanceof Date) {
+      centerFormData.activationDate = this.dateUtils.formatDate(prevActivationDate, dateFormat);
+    }
+    const data = {
+      ...centerFormData,
+      dateFormat,
+      locale
+    };
+    data.groupMembers = [];
+    this.groupMembers.forEach((group: any) => data.groupMembers.push(group.id));
+    this.centerService.createCenter(data).subscribe((response: any) => {
+      this.router.navigate(['../centers']);
+    });
+  }
 
 }

src/app/centers/edit-center/edit-center.component.ts

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { CentersService } from '../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Center component.
@@ -36,14 +36,14 @@ export class EditCenterComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {CentersService} centerService CentersService.
    * @param {GroupsService} groupService GroupsService.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    */
   constructor(private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private centersService: CentersService,
     private settingsService: SettingsService,
-    private datePipe: DatePipe) {
+    private dateUtils: Dates) {
     this.route.data.subscribe((data: { centerData: any }) => {
       this.centerData = data.centerData;
       this.staffs = this.centerData.staffOptions;
@@ -77,16 +77,17 @@ export class EditCenterComponent implements OnInit {
    * if successful redirects to the center.
    */
   submit() {
+    const editCenterFormData = this.editCenterForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     if (this.centerData.status.value === 'Pending') {
       const prevactivationDate: Date = this.editCenterForm.value.activationDate;
-      this.editCenterForm.patchValue({
-        activationDate: this.datePipe.transform(prevactivationDate, dateFormat),
-      });
+      if (editCenterFormData.activationDate instanceof Date) {
+        editCenterFormData.activationDate = this.dateUtils.formatDate(prevactivationDate, dateFormat);
+      }
     }
     const data = {
-      ...this.editCenterForm.value,
+      ...editCenterFormData,
       name: this.centerData.name,
       dateFormat,
       locale