fix: Add two digits pipe to time component (#1806)

* Add two digits pipe to time component * Add example on docs * Fix tests * Change title of example
SAP · Jan 13, 2020 · 846be12 · 846be12
1 parent 36caf42
commit 846be12
Show file tree

Hide file tree

Showing 17 changed files with 114 additions and 29 deletions.
diff --git a/...mponent-docs/time/examples/time-two-digits-example/time-two-digits-example.component.html b/...mponent-docs/time/examples/time-two-digits-example/time-two-digits-example.component.html
@@ -0,0 +1,6 @@
+<fd-time
+    [(ngModel)]="time"
+    [keepTwoDigits]="true">
+</fd-time>
+<br />
+Selected Time: {{time.hour}}h {{time.minute}}m {{time.second}}s
diff --git a/...component-docs/time/examples/time-two-digits-example/time-two-digits-example.component.ts b/...component-docs/time/examples/time-two-digits-example/time-two-digits-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'fd-time-two-digits-example',
+  templateUrl: './time-two-digits-example.component.html'
+})
+export class TimeTwoDigitsExampleComponent {
+    time = { hour: 9, minute: 0, second: 0 };
+}
diff --git a/apps/docs/src/app/core/component-docs/time/time-docs.component.html b/apps/docs/src/app/core/component-docs/time/time-docs.component.html
@@ -71,6 +71,20 @@
 
 <separator></separator>
 
+<fd-docs-section-title [id]="'twoDigits'" [componentName]="'time'">
+    Time With Two Digits
+</fd-docs-section-title>
+<description>
+    Add <code>[keepTwoDigits]="true"</code> to always have two digits in hours, minutes and seconds input.
+    It also can be used in <code>TimePicker</code> and <code>DateTimePicker</code> components.
+</description>
+<component-example [name]="'ex7'">
+    <fd-time-two-digits-example></fd-time-two-digits-example>
+</component-example>
+<code-example [exampleFiles]="timeTwoDigits"></code-example>
+
+<separator></separator>
+
 <fd-docs-section-title [id]="'24HourClock'" [componentName]="'time'">
     Internationalization
 </fd-docs-section-title>

diff --git a/apps/docs/src/app/core/component-docs/time/time-docs.component.ts b/apps/docs/src/app/core/component-docs/time/time-docs.component.ts
@@ -15,6 +15,8 @@ import * as timeDisabledSrcTs from '!raw-loader!./examples/time-disabled-example
 import * as timeNoSpinnersSrcTs from '!raw-loader!./examples/time-no-spinners-example.component.ts';
 import * as timeNoSecondsSrcTs from '!raw-loader!./examples/time-no-seconds-example.component.ts';
 import * as timeOnlyHoursSrcTs from '!raw-loader!./examples/time-only-hours-example.component.ts';
+import * as timeTwoDigitsSrcTs from '!raw-loader!./examples/time-two-digits-example/time-two-digits-example.component.ts';
+import * as timeTwoDigitsSrcH from '!raw-loader!./examples/time-two-digits-example/time-two-digits-example.component.html';
 
 import * as timeI18nSrc from '!raw-loader!./examples/time-i18n-example.component.ts';
 import * as timeFormHtmlSrc from '!raw-loader!./examples/time-form-example.component.html';
@@ -108,6 +110,16 @@ export class TimeDocsComponent implements OnInit {
         }
     ];
 
+    timeTwoDigits: ExampleFile[] = [
+        {
+            language: 'html',
+            fileName: 'time-two-digits-example',
+            code: timeTwoDigitsSrcH,
+            typescriptFileCode: timeTwoDigitsSrcTs,
+            component: 'TimeTwoDigitsExampleComponent'
+        }
+    ];
+
     timeOnlyHours: ExampleFile[] = [
         {
             language: 'html',

diff --git a/apps/docs/src/app/core/core-documentation.module.ts b/apps/docs/src/app/core/core-documentation.module.ts
@@ -413,6 +413,7 @@ import { InputGroupNumberExampleComponent } from './component-docs/input-group/e
 import { InputGroupSearchExampleComponent } from './component-docs/input-group/examples/input-group-search-example/input-group-search-example.component';
 import { DatePickerRangeDisabledExampleComponent } from './component-docs/date-picker/examples/date-picker-range-disabled-example/date-picker-range-disabled-example.component';
 import { DatePickerDisableFuncExampleComponent } from './component-docs/date-picker/examples/date-picker-disable-func-example/date-picker-disable-func-example.component';
+import { TimeTwoDigitsExampleComponent } from './component-docs/time/examples/time-two-digits-example/time-two-digits-example.component';
 
 
 @NgModule({
@@ -772,7 +773,8 @@ import { DatePickerDisableFuncExampleComponent } from './component-docs/date-pic
         PopoverDropdownComponent,
         InputGroupStatesExampleComponent,
         DatePickerRangeDisabledExampleComponent,
-        DatePickerDisableFuncExampleComponent
+        DatePickerDisableFuncExampleComponent,
+        TimeTwoDigitsExampleComponent
     ],
 
     entryComponents: [

diff --git a/libs/core/src/lib/datetime-picker/datetime-picker.component.html b/libs/core/src/lib/datetime-picker/datetime-picker.component.html
@@ -48,6 +48,7 @@
                              [startingDayOfWeek]="startingDayOfWeek"></fd-calendar>
                 <div class="fd-datetime__separator"></div>
                 <fd-time [disabled]="disabled"
+                         [keepTwoDigits]="keepTwoDigitsTime"
                          [meridian]="meridian"
                          [ngModel]="time"
                          (ngModelChange)="handleTimeChange($event)"

diff --git a/libs/core/src/lib/datetime-picker/datetime-picker.component.ts b/libs/core/src/lib/datetime-picker/datetime-picker.component.ts
@@ -162,6 +162,13 @@ export class DatetimePickerComponent implements OnInit, ControlValueAccessor, Va
     @Input()
     allowNull: boolean = true;
 
+    /**
+     * @Input when set to true, time inputs won't allow to have 1 digit
+     * for example 9 will become 09
+     * but 12 will be kept as 12.
+     */
+    @Input() keepTwoDigitsTime: boolean = false;
+
     /**
      *  The state of the form control - applies css classes.
      *  Can be `valid`, `invalid`, `warning`, `information` or blank for default.

diff --git a/libs/core/src/lib/time-picker/time-picker.component.html b/libs/core/src/lib/time-picker/time-picker.component.html
@@ -29,6 +29,7 @@
         <fd-time [disabled]="disabled"
                  [meridian]="meridian"
                  [(ngModel)]="time"
+                 [keepTwoDigits]="keepTwoDigitsTime"
                  (ngModelChange)="timeFromTimeComponentChanged()"
                  [spinners]="spinners"
                  [displayMinutes]="displayMinutes"

diff --git a/libs/core/src/lib/time-picker/time-picker.component.spec.ts b/libs/core/src/lib/time-picker/time-picker.component.spec.ts
@@ -4,11 +4,11 @@ import { FormsModule } from '@angular/forms';
 
 import { PopoverModule } from '../popover/popover.module';
 import { InputGroupModule } from '../input-group/input-group.module';
-import { TimeComponent } from '../time/time.component';
 
 import { TimePickerComponent } from './time-picker.component';
 import { TimeObject } from '../time/time-object';
 import { ButtonModule } from '../button/button.module';
+import { TimeModule } from '../time/time.module';
 
 
 
@@ -18,8 +18,8 @@ describe('TimePickerComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [FormsModule, PopoverModule, InputGroupModule, ButtonModule],
-            declarations: [TimeComponent, TimePickerComponent]
+            imports: [FormsModule, PopoverModule, InputGroupModule, ButtonModule, TimeModule],
+            declarations: [TimePickerComponent]
         }).compileComponents();
     }));
 

diff --git a/libs/core/src/lib/time-picker/time-picker.component.ts b/libs/core/src/lib/time-picker/time-picker.component.ts
@@ -104,6 +104,13 @@ export class TimePickerComponent implements ControlValueAccessor, OnInit {
     @Input()
     buttonFocusable: boolean = true;
 
+    /**
+     * @Input when set to true, time inputs won't allow to have 1 digit
+     * for example 9 will become 09
+     * but 12 will be kept as 12.
+     */
+    @Input() keepTwoDigitsTime: boolean = false;
+
     /** @hidden Whether the input time is valid. Internal use. */
     isInvalidTimeInput: boolean = false;
 

diff --git a/libs/core/src/lib/time/time.component.html b/libs/core/src/lib/time/time.component.html
@@ -11,13 +11,13 @@
                 [size]="'xs'"
                 [attr.aria-label]="timeI18nLabels?.increaseHoursLabel"></button>
     </div>
-    <input [(ngModel)]="displayedHour"
+    <input [ngModel]="displayedHour | twoDigits : keepTwoDigits "
             fd-only-digits
             [ngClass]="{
             'is-disabled': disabled,
             'is-invalid': ((displayedHour > 24 || displayedHour < 0) && validate)
             }"
-            (ngModelChange)="displayedHourChanged()"
+            (ngModelChange)="displayedHourChanged($event)"
             (blur)="inputBlur('hour')"
             class="fd-input fd-time__input"
             type="number"
@@ -49,9 +49,9 @@
                 type="button"
                 [attr.aria-label]="timeI18nLabels?.increaseMinutesLabel"></button>
     </div>
-    <input [(ngModel)]="time.minute"
+    <input [ngModel]="time.minute | twoDigits : keepTwoDigits"
             fd-only-digits
-            (ngModelChange)="minuteModelChange()"
+            (ngModelChange)="minuteModelChange($event)"
             (blur)="inputBlur('minute')"
             [ngClass]="{'is-disabled': disabled, 'is-invalid': ((time.minute > 59 || time.minute < 0) && validate)}"
             class="fd-input fd-time__input"
@@ -83,9 +83,9 @@
                 type="button"
                 [attr.aria-label]="timeI18nLabels?.increaseSecondsLabel"></button>
     </div>
-    <input [(ngModel)]="time.second"
+    <input [ngModel]="time.second | twoDigits : keepTwoDigits"
             fd-only-digits
-            (ngModelChange)="secondModelChange()"
+            (ngModelChange)="secondModelChange($event)"
             (blur)="inputBlur('second')"
             [ngClass]="{'is-disabled': disabled, 'is-invalid': ((time.second > 59 || time.second < 0) && validate)}"
             class="fd-input fd-time__input"

diff --git a/libs/core/src/lib/time/time.component.spec.ts b/libs/core/src/lib/time/time.component.spec.ts
@@ -6,14 +6,15 @@ import { TimeObject } from './time-object';
 import { TimeComponent } from './time.component';
 import { SimpleChange } from '@angular/core';
 import { ButtonModule } from '../button/button.module';
+import { PipeModule } from '../utils/pipes/pipe.module';
 
 describe('TimeComponent', () => {
     let component: TimeComponent;
     let fixture: ComponentFixture<TimeComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [FormsModule, ButtonModule],
+            imports: [FormsModule, ButtonModule, PipeModule],
             declarations: [TimeComponent]
         }).compileComponents();
     }));
@@ -57,34 +58,28 @@ describe('TimeComponent', () => {
 
         component.meridian = true;
 
-        component.displayedHour = 12;
         component.period = 'am';
-        component.displayedHourChanged();
+        component.displayedHourChanged(12);
         expect(component.time.hour).toBe(0);
 
-        component.displayedHour = 1;
         component.period = 'am';
-        component.displayedHourChanged();
+        component.displayedHourChanged(1);
         expect(component.time.hour).toBe(1);
 
-        component.displayedHour = 12;
         component.period = 'pm';
-        component.displayedHourChanged();
+        component.displayedHourChanged(12);
         expect(component.time.hour).toBe(12);
 
-        component.displayedHour = 1;
         component.period = 'pm';
-        component.displayedHourChanged();
+        component.displayedHourChanged(1);
         expect(component.time.hour).toBe(13);
 
         component.meridian = false;
 
-        component.displayedHour = 12;
-        component.displayedHourChanged();
+        component.displayedHourChanged(12);
         expect(component.time.hour).toBe(12);
 
-        component.displayedHour = 1;
-        component.displayedHourChanged();
+        component.displayedHourChanged(1);
         expect(component.time.hour).toBe(1);
     });
 

diff --git a/libs/core/src/lib/time/time.component.ts b/libs/core/src/lib/time/time.component.ts
@@ -45,6 +45,13 @@ export class TimeComponent implements OnChanges, ControlValueAccessor {
      */
     @Input() validate: boolean = true;
 
+    /**
+     * @Input when set to true, time inputs won't allow to have 1 digit
+     * for example 9 will become 09
+     * but 12 will be kept as 12.
+     */
+    @Input() keepTwoDigits: boolean = false;
+
     /**
      * @Input Disables the component.
      */
@@ -170,7 +177,8 @@ export class TimeComponent implements OnChanges, ControlValueAccessor {
     /** @hidden
      * Handles changes of displayed hour value from template.
      */
-    displayedHourChanged(): void {
+    displayedHourChanged(changedHour: number): void {
+        this.displayedHour = changedHour;
         if (!this.meridian) {
             this.time.hour = this.displayedHour;
         } else {
@@ -334,7 +342,8 @@ export class TimeComponent implements OnChanges, ControlValueAccessor {
     /** @hidden
      * Handles minutes model change from template
      * */
-    minuteModelChange(): void {
+    minuteModelChange(minuteChange: number): void {
+        this.time.minute = minuteChange;
         if (!(this.time.minute > 59 || this.time.minute < 0) || !this.validate) {
             this.onChange(this.time);
         }
@@ -343,7 +352,8 @@ export class TimeComponent implements OnChanges, ControlValueAccessor {
     /** @hidden
      * Handles seconds model change from template
      * */
-    secondModelChange(): void {
+    secondModelChange(secondChange: number): void {
+        this.time.second = secondChange;
         if (!(this.time.second > 59 || this.time.second < 0) || !this.validate) {
             this.onChange(this.time);
         }

diff --git a/libs/core/src/lib/time/time.module.ts b/libs/core/src/lib/time/time.module.ts
@@ -6,11 +6,12 @@ import { TimeComponent } from './time.component';
 import { ButtonModule } from '../button/button.module';
 import { OnlyDigitsDirective } from '../utils/directives/only-digits.directive';
 import { FormModule } from '../form/form.module';
+import { PipeModule } from '../utils/pipes/pipe.module';
 
 
 @NgModule({
     declarations: [TimeComponent, OnlyDigitsDirective],
-    imports: [CommonModule, FormsModule, FormModule, ButtonModule],
+    imports: [CommonModule, FormsModule, FormModule, ButtonModule, PipeModule],
     exports: [TimeComponent, OnlyDigitsDirective]
 })
 export class TimeModule {}
diff --git a/libs/core/src/lib/utils/pipes/pipe.module.ts b/libs/core/src/lib/utils/pipes/pipe.module.ts
@@ -2,15 +2,18 @@ import { NgModule } from '@angular/core';
 
 import { DisplayFnPipe } from './displayFn.pipe';
 import { SearchHighlightPipe } from './search-highlight.pipe';
+import { TwoDigitsPipe } from './two-digits.pipe';
 
 @NgModule({
     declarations: [
         DisplayFnPipe,
-        SearchHighlightPipe
+        SearchHighlightPipe,
+        TwoDigitsPipe
     ],
     exports: [
         DisplayFnPipe,
-        SearchHighlightPipe
+        SearchHighlightPipe,
+        TwoDigitsPipe
     ]
 })
 export class PipeModule {}
diff --git a/libs/core/src/lib/utils/pipes/two-digits.pipe.ts b/libs/core/src/lib/utils/pipes/two-digits.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'twoDigits'
+})
+
+export class TwoDigitsPipe implements PipeTransform {
+
+    transform(value: number, enable: boolean = true): string {
+        if ((value || value === 0) && enable) {
+            return value < 10 ? '0' + value : value.toString();
+        } else {
+            return String(value);
+        }
+    }
+}
diff --git a/libs/core/src/lib/utils/public_api.ts b/libs/core/src/lib/utils/public_api.ts
@@ -1,6 +1,7 @@
 export * from './directives/only-digits.directive';
 export * from './pipes/pipe.module';
 export * from './pipes/displayFn.pipe';
+export * from './pipes/two-digits.pipe';
 export * from './pipes/search-highlight.pipe';
 export * from './drag-and-drop/drag-and-drop.module';
 export * from './drag-and-drop/dnd-list/dnd-list.directive';