VS-7062: Add Angular Formatter

vsd-app/ClientApp/.prettierignore

@@ -0,0 +1,18 @@
+node_modules
+
+package-lock.json
+
+dist
+build
+coverage
+
+openshift
+sonar-runner
+uploads
+
+.vscode
+
+**/vendor
+
+*.html
+

vsd-app/ClientApp/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "never",
+  "endOfLine": "lf",
+  "arrowParens": "always",
+  "htmlWhitespaceSensitivity": "ignore"
+}

vsd-app/ClientApp/package.json

@@ -12,7 +12,9 @@
     "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "format": "prettier --loglevel=warn --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\"",
+    "format-fix": "prettier --loglevel=warn --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss}\""
   },
   "private": true,
   "dependencies": {
@@ -81,6 +83,8 @@
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "mini-css-extract-plugin": "^0.5.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",

vsd-app/ClientApp/src/app/app-routing.module.ts

@@ -16,27 +16,27 @@ const routes: Routes = [
   },
   {
     path: 'victim-application',
-    component: VictimApplicationComponent,
+    component: VictimApplicationComponent
   },
   {
     path: 'ifm-application',
-    component: IfmApplicationComponent,
+    component: IfmApplicationComponent
   },
   {
     path: 'witness-application',
-    component: WitnessApplicationComponent,
+    component: WitnessApplicationComponent
   },
   {
     path: 'submit-invoice',
-    component: SubmitInvoiceComponent,
+    component: SubmitInvoiceComponent
   },
   {
     path: 'application-cancelled',
-    component: ApplicationCancelledComponent,
+    component: ApplicationCancelledComponent
   },
   {
     path: 'application-success',
-    component: ApplicationSuccessComponent,
+    component: ApplicationSuccessComponent
   },
   { path: '**', component: NotFoundComponent }
 ];
@@ -46,4 +46,4 @@ const routes: Routes = [
   exports: [RouterModule],
   providers: []
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

vsd-app/ClientApp/src/app/app.component.scss

@@ -8,7 +8,7 @@ header {
   border-bottom: 4px solid #fcba19;
 }
 
-.warning{
+.warning {
   color: red !important;
 }
 
@@ -23,7 +23,7 @@ header {
   margin-left: 0;
 }
 
-.no-gutter > [class*="col-"] {
+.no-gutter > [class*='col-'] {
   padding-right: 0;
   padding-left: 0;
 }
@@ -698,8 +698,8 @@ textarea.form-control {
     margin-bottom: 5px;
   }
 
-  input[type="checkbox"],
-  input[type="radio"] {
+  input[type='checkbox'],
+  input[type='radio'] {
     margin-right: 5px;
   }
 
@@ -717,7 +717,7 @@ textarea.form-control {
 }
 
 ::ng-deep .terms {
-  input[type="text"] {
+  input[type='text'] {
     margin-left: 15px;
   }
 

vsd-app/ClientApp/src/app/app.component.spec.ts

@@ -1,19 +1,14 @@
 import { TestBed, async } from '@angular/core/testing';
-import {
-    RouterTestingModule
-} from '@angular/router/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { AppComponent } from './app.component';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppComponent,
-        BreadcrumbComponent
-      ],
-      imports: [ RouterTestingModule ]
+      declarations: [AppComponent, BreadcrumbComponent],
+      imports: [RouterTestingModule]
     }).compileComponents();
   }));
 

vsd-app/ClientApp/src/app/app.component.ts

@@ -4,15 +4,15 @@ import { isDevMode } from '@angular/core';
 import 'rxjs/add/operator/filter';
 import { HeaderTitleService } from './services/titile.service';
 import { LookupService } from './services/lookup.service';
-import { ConfigService } from "./services/config.service";
-import { Configuration } from "./interfaces/configuration.interface";
+import { ConfigService } from './services/config.service';
+import { Configuration } from './interfaces/configuration.interface';
 import * as moment from 'moment-timezone';
 import { environment } from '../environments/environment';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
   title = '';
@@ -28,7 +28,7 @@ export class AppComponent implements OnInit {
     private router: Router,
     private headerTitleService: HeaderTitleService,
     private lookupService: LookupService,
-    private configService: ConfigService,
+    private configService: ConfigService
   ) {
     this.isDevMode = isDevMode();
     this.router.events.subscribe((event) => {
@@ -48,7 +48,7 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.headerTitleService.title.subscribe(updatedTitle => {
+    this.headerTitleService.title.subscribe((updatedTitle) => {
       this.title = updatedTitle;
     });
 
@@ -59,35 +59,41 @@ export class AppComponent implements OnInit {
       }
     });
 
-    this.configService.load()
+    this.configService
+      .load()
       .then((configuration) => {
-        console.log("Fetched Configuration:", configuration);
+        console.log('Fetched Configuration:', configuration);
         this.configuration = configuration;
       })
       .catch((error) => {
-        console.error("Failed to fetch configuration:", error);
+        console.error('Failed to fetch configuration:', error);
         this.error = error;
       });
   }
 
   isOutage() {
-    if (!this.configuration || !this.configuration.outageEndDate || !this.configuration.outageStartDate || !this.configuration.outageMessage) {
+    if (
+      !this.configuration ||
+      !this.configuration.outageEndDate ||
+      !this.configuration.outageStartDate ||
+      !this.configuration.outageMessage
+    ) {
       return false;
     }
-    const currentDate = moment().tz("America/Vancouver");
-    const outageStartDate = moment(this.configuration.outageStartDate).tz("America/Vancouver");
-    const outageEndDate = moment(this.configuration.outageEndDate).tz("America/Vancouver");
+    const currentDate = moment().tz('America/Vancouver');
+    const outageStartDate = moment(this.configuration.outageStartDate).tz('America/Vancouver');
+    const outageEndDate = moment(this.configuration.outageEndDate).tz('America/Vancouver');
     return currentDate.isBetween(outageStartDate, outageEndDate, null, '[]');
   }
 
   generateOutageDateMessage(): string {
-    const startDate = moment(this.configuration.outageStartDate).tz("America/Vancouver").format("MMMM Do YYYY, h:mm a");
-    const endDate = moment(this.configuration.outageEndDate).tz("America/Vancouver").format("MMMM Do YYYY, h:mm a");
-    return "The system will be down for maintenance from " + startDate + " to " + endDate;
+    const startDate = moment(this.configuration.outageStartDate).tz('America/Vancouver').format('MMMM Do YYYY, h:mm a');
+    const endDate = moment(this.configuration.outageEndDate).tz('America/Vancouver').format('MMMM Do YYYY, h:mm a');
+    return 'The system will be down for maintenance from ' + startDate + ' to ' + endDate;
   }
 
   isIE10orLower() {
-    if (window.document["documentMode"]) {
+    if (window.document['documentMode']) {
       return true;
     }
 

vsd-app/ClientApp/src/app/app.module.ts

@@ -68,7 +68,7 @@ import { JusticeApplicationDataService } from './services/justice-application-da
 import { LookupService } from './services/lookup.service';
 import { MedicalInformationComponent } from './shared/medical-information/medical-information.component';
 import { NgBusyModule } from 'ng-busy';
-import { NgxMaskModule } from 'ngx-mask'
+import { NgxMaskModule } from 'ngx-mask';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { PersonalInformationComponent } from './shared/personal-information/personal-information.component';
 import { PhonePipe } from './pipes/phone.pipe';
@@ -124,7 +124,7 @@ import { MessageDialog } from './shared/dialogs/message-dialog/message.dialog';
     ToolTipTriggerComponent,
     VictimApplicationComponent,
     VictimInformationComponent,
-    WitnessApplicationComponent,
+    WitnessApplicationComponent
   ],
   imports: [
     AppRoutingModule,
@@ -174,7 +174,7 @@ import { MessageDialog } from './shared/dialogs/message-dialog/message.dialog';
     BsDatepickerModule.forRoot(),
     NgxMaskModule.forRoot(),
     TooltipModule.forRoot(),
-    TypeaheadModule.forRoot(),
+    TypeaheadModule.forRoot()
   ],
   exports: [
     AppRoutingModule,
@@ -218,7 +218,7 @@ import { MessageDialog } from './shared/dialogs/message-dialog/message.dialog';
     MatToolbarModule,
     MatTooltipModule,
     ReactiveFormsModule,
-    TooltipModule,
+    TooltipModule
   ],
   providers: [
     AEMService,
@@ -228,7 +228,7 @@ import { MessageDialog } from './shared/dialogs/message-dialog/message.dialog';
     LookupService,
     StateService,
     HeaderTitleService,
-    Title,
+    Title
   ],
   entryComponents: [
     CancelApplicationDialog,
@@ -237,8 +237,8 @@ import { MessageDialog } from './shared/dialogs/message-dialog/message.dialog';
     GSTWarningDialog,
     MessageDialog,
     SignPadDialog,
-    SummaryOfBenefitsDialog,
+    SummaryOfBenefitsDialog
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

vsd-app/ClientApp/src/app/application-cancelled/application-cancelled.component.scss

@@ -1,19 +1,19 @@
 .contact-info-box {
-    background-color: #f1f1f2;
-    color: #000;
-    margin-top: 50px;
-    margin-bottom: 20px;
-    padding: 30px;
-    padding-top: 20px;
+  background-color: #f1f1f2;
+  color: #000;
+  margin-top: 50px;
+  margin-bottom: 20px;
+  padding: 30px;
+  padding-top: 20px;
 
-    h3 {
-        margin-top: 10px;
-        margin-bottom: 20px;
-        font-weight: 600;
-    }
+  h3 {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    font-weight: 600;
+  }
 
-    p {
-        margin: 20px 0;
-        font-size: 16px;
-    }
+  p {
+    margin: 20px 0;
+    font-size: 16px;
+  }
 }

vsd-app/ClientApp/src/app/application-cancelled/application-cancelled.component.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed, async, ComponentFixture, ComponentFixtureAutoDetect } from '@angular/core/testing';
-import { BrowserModule, By } from "@angular/platform-browser";
+import { BrowserModule, By } from '@angular/platform-browser';
 import { ApplicationCancelledComponent } from './application-cancelled.component';
 
 let component: ApplicationCancelledComponent;
@@ -10,9 +10,7 @@ describe('ApplicationCancelled component', () => {
     TestBed.configureTestingModule({
       declarations: [ApplicationCancelledComponent],
       imports: [BrowserModule],
-      providers: [
-        { provide: ComponentFixtureAutoDetect, useValue: true }
-      ]
+      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
     });
     fixture = TestBed.createComponent(ApplicationCancelledComponent);
     component = fixture.componentInstance;