Replace moment.js with date-fns v3 compatibility shim

package.json

@@ -54,12 +54,10 @@
     "chart.js": "^4.1.1",
     "cordova-plugin-file": "^7.0.0",
     "cordova-plugin-nativestorage": "^2.3.2",
-    "date-fns": "^2.29.3",
+    "date-fns": "^3.6.0",
     "file-saver": "^2.0.5",
-    "ion2-calendar": "^3.5.0",
     "ionicons": "^6.0.3",
     "mixpanel-browser": "^2.45.0",
-    "moment": "^2.30.1",
     "ng5-slider": "^1.2.6",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

src/app/app.module.ts

@@ -67,7 +67,6 @@ import {FulltimeLocationPageModule} from './pages/logged-in/fulltimer/fulltime-l
 import { FulltimerSearchPageModule } from './pages/logged-in/fulltimer/fulltimer-search/fulltimer-search.module';
 import { StaffPageModule } from './pages/logged-in/pickers/staff/staff.module';
 import { DateDropdownModule } from './components/date-dropdown/date-dropdown.module';
-import { CalendarModule } from 'ion2-calendar';
 import {CompanyFilterPageModule} from './pages/logged-in/company/company-list/company-filter/company-filter.module';
 import { StoreOptionPageModule } from './pages/logged-in/store/store-option/store-option.module';
 import { StoreModule } from './components/store/store.module';
@@ -119,7 +118,6 @@ declare global {
     IonicModule.forRoot(),
     AppRoutingModule,
     HttpClientModule,
-    CalendarModule,
     BrowserTransferStateModule,
     IonicStorageModule.forRoot({
       name: '__payroll_staff',

src/app/components/date-range-refinement-list/date-range-refinement-list.component.ts

@@ -2,9 +2,9 @@ import { Component, Input, Inject, forwardRef, EventEmitter, Output, OnInit, Opt
 import { connectRange } from 'instantsearch.js/es/connectors';
 import { BaseWidget, NgAisIndex, NgAisInstantSearch } from 'angular-instantsearch';
 import { parseNumberInput, noop } from 'angular-instantsearch/esm2015/utils';
-import {CalendarModal, CalendarModalOptions, CalendarResult} from 'ion2-calendar';
-import { ModalController } from '@ionic/angular';
+import { AlertController } from '@ionic/angular';
 import {Options} from "ng5-slider";
+import { presentDateAlert } from 'src/app/util/date-alert';
 
 @Component({
   selector: 'date-range-refinement-list',
@@ -51,7 +51,7 @@ export class DateRangeRefinementListComponent extends BaseWidget {
       public instantSearchInstance,
       @Optional()
         public parentIndex: NgAisIndex,
-      public modalCtrl: ModalController
+      public alertCtrl: AlertController
   ) {
       super('RangeRefinementComponent');
 
@@ -212,36 +212,17 @@ export class DateRangeRefinementListComponent extends BaseWidget {
    */
   async openCalendarPopup(string) {
 
-    const options: CalendarModalOptions = {
-      canBackwardsSelected: true,
-      pickMode: 'single',
-      title: '',
-      //defaultScrollTo: new Date(this.value.upper),
-      defaultDateRange: {
-        from: new Date(this.value.lower),
-        to:  new Date(this.value.upper)
-      }
-    };
-
-    const myCalendar = await this.modalCtrl.create({
-      component: CalendarModal,
-      cssClass: 'modal-calender',
-      componentProps: { options }
-    });
-
-    myCalendar.present();
-
-    const eventCloseData: any = await myCalendar.onDidDismiss();
-    const date = eventCloseData.data;
+    const defaultDate = string === 'l' ? this.value.lower : this.value.upper;
+    const date = await presentDateAlert(this.alertCtrl, new Date(defaultDate * 1000));
 
     if (date) {
 
-      if (string =='l') {
-        this.lowerDate = date.string;
-        this.value.lower = date.unix;
-      } else if (string =='h') {
-        this.upperDate = date.string;
-        this.value.upper = date.unix;
+      if (string === 'l') {
+        this.lowerDate = date;
+        this.value.lower = Math.floor(new Date(date).getTime() / 1000);
+      } else if (string === 'h') {
+        this.upperDate = date;
+        this.value.upper = Math.floor(new Date(date).getTime() / 1000);
       }
       //this.value.upper = date.unix + (60*60*24);
 

src/app/pages/logged-in/candidate/candidate-view/candidate-view.page.ts

@@ -11,12 +11,8 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {
-  CalendarModal,
-  CalendarModalOptions,
-  CalendarResult,
-  CalendarComponentOptions
-} from 'ion2-calendar';
+import { format, parseISO } from 'date-fns';
+import { presentDateAlert } from 'src/app/util/date-alert';
 
 // models
 import { Store } from 'src/app/models/store';
@@ -1721,28 +1717,21 @@ export class CandidateViewPage implements OnInit {
         {
           text: 'Ok',
           handler: async (data) => {
-              const options: CalendarModalOptions = {
-                title: 'Select Date',
-                canBackwardsSelected: false,
-              };
-
-              const myCalendar = await this.modalCtrl.create({
-                component: CalendarModal,
-                componentProps: { options },
-                cssClass: "popup-modal"
-              });
-
-              myCalendar.present();
-
-              const event: any = await myCalendar.onDidDismiss();
-              const date: CalendarResult = event.data;
+              const defaultDate = this.candidate?.candidate_civil_expiry_date
+                ? new Date(this.candidate.candidate_civil_expiry_date)
+                : undefined;
+              const date = await presentDateAlert(this.alertCtrl, defaultDate);
               if (date) {
+                const formattedDate = format(parseISO(date), 'yyyy-MM-dd');
                 const loading = await this.loadingCtrl.create();
                 loading.present();
 
-                this.candidateService.updateCivilExpiry(date.string, this.candidate_id).subscribe(res => {
+                this.candidateService.updateCivilExpiry(formattedDate, this.candidate_id).subscribe(res => {
                     if (res.operation == 'success') {
-                      this.candidate.candidate_civil_expiry_date = date.string;
+                      this.candidate.candidate_civil_expiry_date =
+                        res.candidate_civil_expiry_date
+                        || res.data?.candidate_civil_expiry_date
+                        || formattedDate;
                     }
                     this.toastCtrl.create({
                       message: this.authService.errorMessage(res.message),

src/app/pages/logged-in/leave-request/leave-request.page.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AlertController, ModalController } from '@ionic/angular';
-import { CalendarModal, CalendarModalOptions } from 'ion2-calendar';
 import { AnalyticsService } from 'src/app/providers/analytics.service';
+import { presentDateRangeAlert } from 'src/app/util/date-alert';
 //services
 import { AuthService } from 'src/app/providers/auth.service';
 import { DailyStandupService } from 'src/app/providers/logged-in/daily-standup.service';
@@ -103,35 +103,17 @@ export class LeaveRequestPage implements OnInit {
     // Set it to one month ago
     fromDate.setMonth(fromDate.getMonth() - 1);
 
-    const options: CalendarModalOptions = {
-      canBackwardsSelected: true,
-      pickMode: 'range',
-      title: '',
-      defaultScrollTo: new Date(),
-      defaultDateRange: {
-        from: fromDate,
-        to: new Date()
-      }
-    };
-
-    const myCalendar = await this.modalCtrl.create({
-      component: CalendarModal,
-      cssClass: 'modal-calender',
-      componentProps: { options }
+    const date = await presentDateRangeAlert(this.alertCtrl, {
+      from: fromDate,
+      to: new Date()
     });
 
-    myCalendar.present();
-
-    const eventCloseData: any = await myCalendar.onDidDismiss();
-
-    const date = eventCloseData.data;
-
     if (date) {
       // this.form.value.from_date
-      this.form.controls['from_date'].setValue(date.from.string);
-      this.form.controls['to_date'].setValue(date.to.string);
+      this.form.controls['from_date'].setValue(date.from);
+      this.form.controls['to_date'].setValue(date.to);
 
-      this.range = date.from.string + '-' + date.to.string;
+      this.range = date.from + '-' + date.to;
     }
   }
 

src/app/pages/logged-in/leave/leave-request-form/leave-request-form.page.ts

@@ -3,12 +3,12 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {DailyStandupService} from "src/app/providers/logged-in/daily-standup.service";
 import {AuthService} from "src/app/providers/auth.service";
 import {AlertController, ModalController, NavController} from "@ionic/angular";
-import {CalendarModal, CalendarModalOptions} from "ion2-calendar";
 import {StaffLeaveService} from "../../../../providers/logged-in/staff-leave.service";
 import {AwsService} from "../../../../providers/aws.service";
 import {Subscription} from "rxjs";
 import {SentryErrorhandlerService} from "../../../../providers/sentry.errorhandler.service";
 import { AnalyticsService } from 'src/app/providers/analytics.service';
+import { presentDateRangeAlert } from 'src/app/util/date-alert';
 
 @Component({
   selector: 'app-leave-request-form',
@@ -140,35 +140,17 @@ export class LeaveRequestFormPage implements OnInit, OnDestroy {
     // Set it to one month ago
     fromDate.setMonth(fromDate.getMonth() - 1);
 
-    const options: CalendarModalOptions = {
-      canBackwardsSelected: true,
-      pickMode: 'range',
-      title: '',
-      defaultScrollTo: new Date(),
-      defaultDateRange: {
-        from: fromDate,
-        to: new Date()
-      }
-    };
-
-    const myCalendar = await this.modalCtrl.create({
-      component: CalendarModal,
-      cssClass: 'modal-calender',
-      componentProps: { options }
+    const date = await presentDateRangeAlert(this.alertCtrl, {
+      from: fromDate,
+      to: new Date()
     });
 
-    myCalendar.present();
-
-    const eventCloseData: any = await myCalendar.onDidDismiss();
-
-    const date = eventCloseData.data;
-
     if (date) {
       // this.form.value.from_date
-      this.form.controls['from_date'].setValue(date.from.string);
-      this.form.controls['to_date'].setValue(date.to.string);
+      this.form.controls['from_date'].setValue(date.from);
+      this.form.controls['to_date'].setValue(date.to);
 
-      this.range = date.from.string + '-' + date.to.string;
+      this.range = date.from + '-' + date.to;
     }
   }
 

src/app/pages/logged-in/transfer/transfer-form/transfer-form.page.ts

@@ -11,7 +11,6 @@ import {
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { CustomValidator } from 'src/app/validators/custom.validator';
-import { CalendarModal, CalendarModalOptions } from 'ion2-calendar';
 import { Subscription } from 'rxjs';
 // models
 import { Transfer } from 'src/app/models/transfer';
@@ -27,6 +26,7 @@ import { EventService } from '../../../../providers/event.service';
 import { TranslateLabelService } from 'src/app/providers/translate-label.service';
 import { SentryErrorhandlerService } from 'src/app/providers/sentry.errorhandler.service';
 import { AnalyticsService } from 'src/app/providers/analytics.service';
+import { presentDateRangeAlert } from 'src/app/util/date-alert';
 
 
 @Component({
@@ -59,7 +59,7 @@ export class TransferFormPage implements OnInit {
   public endDate; // max date
   public selected; // max date
   dateRange: { from: string; to: string; };
-  type: 'string'; // 'string' | 'js-date' | 'moment' | 'time' | 'object'
+  type: 'string';
 
   public borderLimit: boolean = false;
 
@@ -544,42 +544,24 @@ export class TransferFormPage implements OnInit {
     // Set it to one month ago
     fromDate.setMonth(fromDate.getMonth() - 1);
 
-    const options: CalendarModalOptions = {
-      canBackwardsSelected: true,
-      pickMode: 'range',
-      title: '',
-      defaultScrollTo: new Date(),
-      defaultDateRange: {
-        from: fromDate,
-        to: new Date()
-      }
-    };
-
-    const myCalendar = await this.modalCtrl.create({
-      component: CalendarModal,
-      cssClass: 'modal-calender',
-      componentProps: { options }
+    const date = await presentDateRangeAlert(this._alertCtrl, {
+      from: fromDate,
+      to: new Date()
     });
 
-    myCalendar.present();
-
-    const eventCloseData: any = await myCalendar.onDidDismiss();
-
-    const date = eventCloseData.data;
-
     if (date) {
       // this.startDate
 
       console.log(this.form)
       if (this.form && this.form.controls && this.form.controls['start_date']) {
-        this.form.controls['start_date'].setValue(date.from.string);
-        this.form.controls['end_date'].setValue(date.to.string);
+        this.form.controls['start_date'].setValue(date.from);
+        this.form.controls['end_date'].setValue(date.to);
       }
 
-      this.startDate = date.from.string;
-      this.endDate = date.to.string;
+      this.startDate = date.from;
+      this.endDate = date.to;
 
-      this.range = date.from.string + '-' + date.to.string;
+      this.range = date.from + '-' + date.to;
     }
   }