Skip to content

Commit

Permalink
refactor: remove moment, add luxon
Browse files Browse the repository at this point in the history 
* Refactors the date validator.

Co-Authored-by: Bertrand Zuchuat <[email protected]>
  • Loading branch information
@Garfield-fr
Garfield-fr committed Oct 21, 2024
1 parent 3b5b8ed commit 8a8ae84
Show file tree
Hide file tree
Showing 11 changed files with 275 additions and 110 deletions.
18 changes: 9 additions & 9 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
"@angular/platform-browser": "^17.1.0",
"@angular/platform-browser-dynamic": "^17.1.0",
"@angular/router": "^17.1.0",
"@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
"@ngx-formly/core": "^6.3.6",
"@ngx-formly/primeng": "^6.3.6",
"@ngx-translate/core": "^15.0.0",
Expand All @@ -35,8 +34,8 @@
"font-awesome": "^4.7.0",
"js-generate-password": "^0.1.0",
"lodash-es": "^4.17.21",
"luxon": "^3.5.0",
"marked": "^10.0.0",
"moment": "^2.30.1",
"ngx-spinner": "^16.0.2",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
Expand All @@ -56,6 +55,7 @@
"@angular/cli": "^17.1.0",
"@angular/compiler-cli": "^17.1.0",
"@angular/language-service": "^17.1.0",
"@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
"@ngx-formly/schematics": "^6.3.6",
"@types/jasmine": "^5.1.4",
"@typescript-eslint/eslint-plugin": "^6.19.1",
Expand Down
76 changes: 12 additions & 64 deletions projects/rero/ng-core/src/lib/record/editor/extensions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ import { UntypedFormControl } from '@angular/forms';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { FormlyExtension, FormlyFieldConfig } from '@ngx-formly/core';
import { TranslateService } from '@ngx-translate/core';
import moment from 'moment';
import { isObservable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { RecordService } from '../record.service';
import { isEmpty, removeEmptyValues } from './utils';
import { Validators } from '../../validator/validators';

export class NgCoreFormlyExtension {

Expand Down Expand Up @@ -252,10 +252,10 @@ export class NgCoreFormlyExtension {
* @param field - FormlyFieldConfig
*/
private _setCustomValidators(field: FormlyFieldConfig): void {
if (field.props == null || field.props.customValidators == null) {
if (field.props == null || field.props.validation == null) {
return;
}
const customValidators = field.props.customValidators ? field.props.customValidators : {};
const customValidators = field.props.validation.validators || {};
// asyncValidators: valueAlreadyExists
if (customValidators.valueAlreadyExists) {
const { filter, limitToValues, term } = customValidators.valueAlreadyExists;
Expand Down Expand Up @@ -326,69 +326,17 @@ export class NgCoreFormlyExtension {
};
}
// The start date must be less than the end date.
if (customValidators.dateMustBeLessThan) {
const startDate: string = customValidators.dateMustBeLessThan.startDate;
const endDate: string = customValidators.dateMustBeLessThan.endDate;
const strict: boolean = customValidators.dateMustBeLessThan.strict || false;
const updateOn: 'change' | 'blur' | 'submit' = customValidators.dateMustBeLessThan.strict || 'blur';
if (customValidators.datesGreaterThan) {
const dateFirst: string = customValidators.datesGreaterThan.dateFirst;
const dateLast: string = customValidators.datesGreaterThan.dateLast;
const strict: boolean = customValidators.datesGreaterThan.strict || false;
const updateOn: 'change' | 'blur' | 'submit' = customValidators.datesGreaterThan.updateOn || 'blur';
const fieldKey = String(field.key);
field.validators = {
dateMustBeLessThan: {
datesGreaterThan: {
updateOn,
expression: (control: UntypedFormControl) => {
const startDateFc = control.parent.get(startDate);
const endDateFc = control.parent.get(endDate);
if (startDateFc.value !== null && endDateFc.value !== null) {
const dateStart = moment(startDateFc.value, 'YYYY-MM-DD');
const dateEnd = moment(endDateFc.value, 'YYYY-MM-DD');
const isMustLessThan = strict
? dateStart >= dateEnd
? false
: true
: dateStart > dateEnd
? false
: true;
if (isMustLessThan) {
endDateFc.setErrors(null);
endDateFc.markAsDirty();
}
return isMustLessThan;
}
return false;
},
},
};
}

// The end date must be greater than the start date.
if (customValidators.dateMustBeGreaterThan) {
const startDate: string = customValidators.dateMustBeGreaterThan.startDate;
const endDate: string = customValidators.dateMustBeGreaterThan.endDate;
const strict: boolean = customValidators.dateMustBeGreaterThan.strict || false;
const updateOn: 'change' | 'blur' | 'submit' = customValidators.dateMustBeGreaterThan.strict || 'blur';
field.validators = {
datesMustBeGreaterThan: {
updateOn,
expression: (control: UntypedFormControl) => {
const startDateFc = control.parent.get(startDate);
const endDateFc = control.parent.get(endDate);
if (startDateFc.value !== null && endDateFc.value !== null) {
const dateStart = moment(startDateFc.value, 'YYYY-MM-DD');
const dateEnd = moment(endDateFc.value, 'YYYY-MM-DD');
const isMustBeGreaterThan = strict
? dateStart <= dateEnd
? true
: false
: dateStart < dateEnd
? true
: false;
if (isMustBeGreaterThan) {
startDateFc.setErrors(null);
startDateFc.markAsDirty();
}
return isMustBeGreaterThan;
}
return false;
},
expression: (control: UntypedFormControl) => Validators.datesGreaterThan(dateFirst, dateLast, fieldKey, strict)(control),
message: () => field.props.validation.messages.datesGreaterThan
},
};
}
Expand Down
24 changes: 6 additions & 18 deletions projects/rero/ng-core/src/lib/record/editor/formly/primeng/date-picker/date-picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { CommonModule } from '@angular/common';
import { Component, inject, LOCALE_ID, NgModule, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ChangeDetectionStrategy, Component, inject, LOCALE_ID, NgModule, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FieldType, FormlyFieldConfig, FormlyFieldProps, FormlyModule } from '@ngx-formly/core';
import { CalendarModule } from 'primeng/calendar';

Expand Down Expand Up @@ -54,16 +54,15 @@ export interface IDateTimePickerProps extends FormlyFieldProps {
selector: 'ng-core-date-picker',
template: `
<p-calendar
[(ngModel)]="model"
[formControl]="formControl"
[formlyAttributes]="field"
[clearButtonStyleClass]="props.clearButtonStyleClass"
[dataType]="props.dataType"
[dateFormat]="props.dateFormat"
[defaultDate]="props.defaultDate"
[disabled]="props.disabled"
[disabledDates]="disabledDates"
[disabledDays]="props.disabledDays"
[firstDayOfWeek]="props.firstDayOfWeek"
[formlyAttributes]="field"
[hourFormat]="props.hourFormat"
[inline]="props.inline"
[inputStyleClass]="props.inputStyleClass"
Expand All @@ -86,6 +85,7 @@ export interface IDateTimePickerProps extends FormlyFieldProps {
[view]="props.view"
/>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DatePickerComponent extends FieldType<FormlyFieldConfig<IDateTimePickerProps>> implements OnInit {

Expand Down Expand Up @@ -116,25 +116,12 @@ export class DatePickerComponent extends FieldType<FormlyFieldConfig<IDateTimePi
},
};

private fieldModel: Date | Date[];

set model(value: Date | Date[]) {
this.formControl.patchValue(value);
}

get model(): Date | Date[] {
return this.fieldModel;
}

defaultDate: Date = undefined;
disabledDates: Date[] = undefined;
maxDate: Date = undefined;
minDate: Date = undefined;

ngOnInit(): void {
if (this.formControl.value) {
this.fieldModel = this.formControl.value;
}
if (!this.formControl.value && this.props.defaultDate) {
this.defaultDate = this.processDate(this.props.defaultDate);
}
Expand All @@ -161,6 +148,7 @@ export class DatePickerComponent extends FieldType<FormlyFieldConfig<IDateTimePi
CommonModule,
CalendarModule,
FormsModule,
ReactiveFormsModule,
FormlyModule.forChild({
types: [
{
Expand Down
8 changes: 4 additions & 4 deletions projects/rero/ng-core/src/lib/translate/translate-service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { TestBed } from "@angular/core/testing";
import { NgCoreTranslateService } from "./translate-service";
import { PrimeNGConfig } from "primeng/api";
import { TranslateModule } from "@ngx-translate/core";
import moment from "moment";
import { DateTime } from "luxon";
import { PrimeNGConfig } from "primeng/api";
import { NgCoreTranslateService } from "./translate-service";

describe('NgCoreTranslateService', () => {
let service: NgCoreTranslateService;
Expand Down Expand Up @@ -46,6 +46,6 @@ describe('NgCoreTranslateService', () => {
it('should have changed the local service', () => {
service.use('fr');
expect(primeConfig.translation.today).toEqual("Aujourd'hui");
expect(moment().locale()).toEqual('fr');
expect(DateTime.locale).toEqual('fr');
});
});
6 changes: 3 additions & 3 deletions projects/rero/ng-core/src/lib/translate/translate-service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeEn from '@angular/common/locales/en-GB';
import localeFr from '@angular/common/locales/fr';
import localeIt from '@angular/common/locales/it';
import { inject, Injectable } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import moment from "moment";
import { DateTime } from "luxon";
import de from 'primelocale/de.json';
import en from 'primelocale/en.json';
import fr from 'primelocale/fr.json';
import it from 'primelocale/it.json';
import { PrimeNGConfig } from "primeng/api";
import { Observable } from "rxjs";
import { CoreConfigService } from "../core-config.service";
import { registerLocaleData } from '@angular/common';

@Injectable({
providedIn: 'root'
Expand Down Expand Up @@ -62,7 +62,7 @@ export class NgCoreTranslateService extends TranslateService {
}

use(lang: string): Observable<any> {
moment.locale(lang);
DateTime.locale = lang;
this.primengConfig.setTranslation(this.locales[lang].primeng[lang]);

return super.use(lang);
Expand Down
Loading

0 comments on commit 8a8ae84

Please sign in to comment.