fix: #366 masking input texts

Author: enriquezrene

package-lock.json

@@ -23,24 +23,25 @@
     "@ngrx/effects": "^9.0.0",
     "@ngrx/store": "^9.0.0",
     "@ngrx/store-devtools": "^9.0.0",
+    "@types/datatables.net-buttons": "^1.4.3",
     "angular-datatables": "^9.0.2",
     "angular-ng-autocomplete": "^2.0.1",
     "bootstrap": "^4.4.1",
     "datatables.net": "^1.10.21",
+    "datatables.net-buttons": "^1.6.2",
+    "datatables.net-buttons-dt": "^1.6.2",
     "datatables.net-dt": "^1.10.21",
     "jquery": "^3.5.1",
+    "jszip": "^3.4.0",
     "minimist": "^1.2.5",
     "moment": "^2.25.3",
     "msal": "^1.2.1",
+    "ngx-mask": "^9.1.2",
     "ngx-pagination": "^5.0.0",
     "ngx-toastr": "^12.0.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2",
-    "jszip": "^3.4.0",
-    "datatables.net-buttons": "^1.6.2",
-    "datatables.net-buttons-dt": "^1.6.2",
-    "@types/datatables.net-buttons": "^1.4.3"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.901.7",

package.json

@@ -1,3 +1,4 @@
+import { NgxMaskModule, IConfig } from 'ngx-mask';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
 import {CommonModule, DatePipe} from '@angular/common';
@@ -66,6 +67,10 @@ import {InputDateComponent} from './modules/shared/components/input-date/input-d
 import {TimeRangeFormComponent} from './modules/reports/components/time-range-form/time-range-form.component';
 import {TimeEntriesTableComponent} from './modules/reports/components/time-entries-table/time-entries-table.component';
 
+const maskConfig: Partial<IConfig> = {
+  validation: false,
+};
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -109,6 +114,7 @@ import {TimeEntriesTableComponent} from './modules/reports/components/time-entri
     TimeEntriesTableComponent,
   ],
   imports: [
+    NgxMaskModule.forRoot(maskConfig),
     CommonModule,
     BrowserModule,
     BrowserAnimationsModule,

src/app/app.module.ts

@@ -69,6 +69,11 @@
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Time in</span>
     </div>
     <input
+    [clearIfNotMatch]="true"
+      [showMaskTyped] = "true"
+      [dropSpecialCharacters]="false"
+      matInput
+      mask="Hh:m0"
       formControlName="start_hour"
       id="start_hour"
       type="text"
@@ -82,6 +87,11 @@
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Time out</span>
     </div>
     <input
+    [clearIfNotMatch]="true"
+      [showMaskTyped] = "true"
+      [dropSpecialCharacters]="false"
+      matInput
+      mask="Hh:m0"
       formControlName="end_hour"
       type="text"
       id="end_hour"

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -47,8 +47,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       activity_id: '',
       description: '',
       entry_date: '',
-      start_hour: '00:00',
-      end_hour: '00:00',
+      start_hour: '',
+      end_hour: '',
       uri: '',
       technology: '',
     });