edit-message-template

frontend/angular/.angular-cli.json

@@ -19,7 +19,7 @@
             "testTsconfig": "tsconfig.spec.json",
             "prefix": "app",
             "styles": [
-                "styles.css",
+                "styles.scss",
                 "../node_modules/primeng/resources/primeng.min.css",
                 "../node_modules/font-awesome/css/font-awesome.min.css",
                 "../node_modules/fullcalendar/dist/fullcalendar.min.css",
@@ -73,4 +73,4 @@
         "styleExt": "css",
         "component": {}
     }
-}
\ No newline at end of file
+}

frontend/angular/package-lock.json

@@ -488,6 +488,11 @@
         }
       }
     },
+    "angular-tslint-rules": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/angular-tslint-rules/-/angular-tslint-rules-1.20.1.tgz",
+      "integrity": "sha512-9TdNT3Xg+tMrAtMOtmIEZerpofVVC2tW/YsTIRarwynsGs+wcQlnH6/1//4YPkquJy/vQprhO240lQGtZhCsNg=="
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",

frontend/angular/package.json

@@ -21,6 +21,7 @@
         "@angular/platform-browser": "^5.2.0",
         "@angular/platform-browser-dynamic": "^5.2.0",
         "@angular/router": "^5.2.0",
+        "angular-tslint-rules": "^1.20.1",
         "bootstrap": "^4.1.0",
         "chart.js": "2.7.1",
         "core-js": "^2.4.1",

frontend/angular/src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 
-import { ConfirmationService } from 'primeng/primeng';
+import { ConfirmationService, EditorModule, OverlayPanelModule } from 'primeng/primeng';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing';
+import { AppService } from './app.service';
+import { EditMessageTemplateComponent } from "./components/edit-message-template/edit-message-template.component";
+import { EditMessageTemplateService } from "./components/edit-message-template/edit-message-template.service";
 
 import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component';
 import { OneITModule } from './oneit/oneit.module';
 
 
 @NgModule({
-    imports: [
-        AppRoutingModule,
-        OneITModule
-    ],
-    declarations: [
-        AppComponent,
-        FullLayoutComponent
-    ],
-    providers: [
-        FormBuilder,
-        ConfirmationService,
-    ],
-    bootstrap: [AppComponent]
+  imports: [
+    AppRoutingModule,
+    OneITModule,
+    EditorModule,
+    OverlayPanelModule
+  ],
+  declarations: [
+    AppComponent,
+    FullLayoutComponent,
+    EditMessageTemplateComponent
+  ],
+  providers: [
+    FormBuilder,
+    ConfirmationService,
+    AppService,
+    EditMessageTemplateService
+  ],
+  bootstrap: [AppComponent]
 })
 
 export class AppModule {
-    constructor() {
+  constructor() {
 
-    }
-}
\ No newline at end of file
+  }
+}

frontend/angular/src/app/app.routing.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { EditMessageTemplateComponent } from "./components/edit-message-template/edit-message-template.component";
 
 import { AccessDeniedComponent } from './oneit/components/access-denied/access-denied.component';
 import { FullLayoutComponent } from './oneit/components/full-layout/full-layout.component';
@@ -10,67 +11,55 @@ import { AuthGuard } from './oneit/guards/auth.guard';
 
 
 export const routes: Routes = [
-    {
-        path: '',
-        redirectTo: 'home',
-        pathMatch: 'full',
+  {
+    path: '',
+    redirectTo: 'home',
+    pathMatch: 'full',
+  },
+  {
+    path: '',
+    component: FullLayoutComponent,
+    data: {
+      showDefaultHeader: true,
+      showDefaultFooter: true,
+      showMenu: true,
+      showFeedback: true
     },
-    {
-        path: '',
-        component: FullLayoutComponent,
-        data: {
-            showDefaultHeader: true,
-            showDefaultFooter: true,
-            showMenu: true,
-            showFeedback: true
-        },
-        children: [
-            {
-                path: 'access-denied',
-                component: AccessDeniedComponent
-            },
-            {
-                path: 'home',
-                canActivate: [AuthGuard],
-                component: HomeComponent
-            },
-            {
-                path: 'iframe-page/:url',
-                canActivate: [AuthGuard],
-                component: IframePageComponent,
-                runGuardsAndResolvers: 'always'
-            }
-            // Project ROUTES will appear here, serach-client added for example
-            // {
-            //     path: 'search-client',
-            //     component: SearchClientComponent,
-            //     canActivate: [AuthGuard],
-            //     data: {privs: [Constants.PRIV_SALES_MANAGER, Constants.PRIV_READ_ONLY]}
-            // }
-        ]
-    },
-    // CUSTOM HEADER Example e.g. Public Page
-    // {
-    //     path: '',
-    //     component: FullLayoutComponent,
-    //     data: {
-    //         defaultFooter : false,
-    //         defaultHeader: false,
-    //         customHeader: CustomHeaderComponent
-    //     },
-    //     children: [
-    //         {
-    //             path: 'publicPage',
-    //             component: PublicPageComponent
-    //         }
-    //     ]
-    // }
-    // Don't forget to add below line in app.module.ts
-    // entryComponents: [CustomHeaderComponent],
+    children: [
+      {
+        path: 'access-denied',
+        component: AccessDeniedComponent
+      },
+      {
+        path: 'home',
+        canActivate: [AuthGuard],
+        component: HomeComponent
+      },
+      {
+        path: 'iframe-page/:url',
+        canActivate: [AuthGuard],
+        component: IframePageComponent,
+        runGuardsAndResolvers: 'always'
+      },
+      {
+        path: 'edit-message-template',
+        component: EditMessageTemplateComponent,
+        canActivate: [AuthGuard]
+      },
+      {
+        path: 'edit-message-template/:id',
+        component: EditMessageTemplateComponent,
+        canActivate: [AuthGuard]
+      }
+    ]
+  }
+  // Don't forget to add below line in app.module.ts
+  // entryComponents: [CustomHeaderComponent],
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' })],
-    exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes, {useHash: true, onSameUrlNavigation: 'reload'})],
+  exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

frontend/angular/src/app/app.service.ts

+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PlaceholderOptionsModel } from './models/placeholderOptions.model';
+import { TemplateTypeModel } from './models/templateTypeModel';
+import { EnumService } from './oneit/services/enum.service';
+
+@Injectable()
+
+export class AppService {
+
+  HiringTeam = 'ID:37952977';
+
+  constructor(
+    private enumService: EnumService
+  ) {
+
+  }
+
+  getMessageTemplateTypeEnum(): Observable<Array<TemplateTypeModel>> {
+    return this.enumService.getEnums('TemplateTypes', true);
+  }
+
+  getPlaceholderOptionsEnum(): Observable<Array<PlaceholderOptionsModel>> {
+    return this.enumService.getEnums('PlaceholderOptions', true);
+  }
+
+  // Helper functions
+
+  moveCreatedToUpdated(data, createdObjs, updatedObjs, deletedObjs = null): void {
+    Object.keys(createdObjs)
+      .forEach(nData => {
+        if (data.created[nData]) {
+          updatedObjs[data.created[nData]] = createdObjs[nData];
+          updatedObjs[data.created[nData]].ObjectID = data.created[nData];
+          // tslint:disable-next-line:no-dynamic-delete
+          delete createdObjs[nData];
+        }
+      });
+    if (deletedObjs) {
+      Object.keys(deletedObjs)
+        .forEach(nData => {
+          if (data.deleted.indexOf(nData) > -1) {
+            // tslint:disable-next-line:no-dynamic-delete
+            delete deletedObjs[nData];
+          }
+        });
+    }
+  }
+}

frontend/angular/src/app/components/base/base.component.ts

+import { OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { UtilsService } from '../../oneit/services/utils.service';
+
+export class BaseComponent implements OnDestroy {
+
+  isLoading = false;
+  subscriptions: Array<Subscription> = [];
+
+  constructor(
+    protected utilService: UtilsService
+  ) {
+  }
+
+  ngOnDestroy(): void {
+    this.utilService.unsubscribeSubscriptions(this.subscriptions);
+  }
+
+}

frontend/angular/src/app/components/edit-message-template/edit-message-template.component.html

+<form #form="ngForm">
+  <div class="ui-g ui-fluid">
+    <div class="ui-g-12 nopad">
+      <p-toolbar>
+        <div class="ui-toolbar-group-left">
+          {{editMode ? "Edit" : "Add"}} Message Template
+        </div>
+      </p-toolbar>
+    </div>
+  </div>
+  <div class="ui-g form-group">
+    <div class="ui-g-12 ui-md-3">
+      <img data-elementID="image_sidePanel" title="sidePanel"
+           src="/assets/images/SelectPanel_MessageFlow.png"/>
+    </div>
+    <div class="ui-g-12 ui-md-9">
+      <div class="ui-g form-group">
+        <div class="ui-g-12 ui-md-4 s-a-center">
+          <label>Message Template</label>
+        </div>
+        <div class="ui-g-12 ui-md-4 ui-fluid">
+          <input [(ngModel)]="messageTemplate.TemplateName" name="MessageTemplate{{messageTemplate.ObjectID}}"
+                 fieldLabel="Message Template" type="text" [disabled]="showLoader" pInputText
+                 class="form-control ui-inputtext" id="MessageTemplate{{messageTemplate.ObjectID}}">
+        </div>
+      </div>
+      <div class="ui-g form-group">
+        <div class="ui-g-12 ui-md-4">
+          <label>Message Template Type</label>
+        </div>
+        <div class="ui-g-12 ui-md-4 ui-fluid">
+          <p-dropdown [(ngModel)]="messageTemplate.TemplateType"
+                      name="MessageTemplateType{{messageTemplate.ObjectID}}" fieldLabel="Message Template Type"
+                      [options]="messageTemplateTypes" optionLabel="Description" [disabled]="showLoader"
+                      (onChange)="storeMessageContent()">
+          </p-dropdown>
+        </div>
+      </div>
+      <div class="ui-g form-group" *ngIf="emailTemplateType()">
+        <div class="ui-g-12 ui-md-4 s-a-center">
+          <label>Subject</label>
+        </div>
+        <div class="ui-g-12 ui-md-4 ui-fluid">
+          <input id="subjectInputId" [(ngModel)]="messageTemplate.Subject" name="Subject{{messageTemplate.ObjectID}}"
+                 fieldLabel="Subject" placeholder="Subject" type="text" pInputText class="form-control ui-inputtext"
+                 [disabled]="showLoader">
+        </div>
+        <div class="ui-g-12 ui-md-4">
+          <p-dropdown [(ngModel)]="subjectPlaceholder" name="SubjectOption{{messageTemplate.ObjectID}}"
+                      [options]="subjectPlaceholderOptions" optionLabel="Description"
+                      (onChange)="addPlaceholderInSubject()" [disabled]="showLoader">
+          </p-dropdown>
+        </div>
+      </div>
+      <div class="ui-g form-group">
+        <div class="ui-g-12 ui-md-4">
+          <label> Message Content </label>
+        </div>
+        <div class="ui-g-12 ui-md-4" *ngIf="emailTemplateType()">
+        </div>
+        <div class="ui-g-12 ui-md-4">
+          <p-dropdown [(ngModel)]="contentPlaceholder" name="ContentOption{{messageTemplate.ObjectID}}"
+                      [options]="contentPlaceholderOptions" optionLabel="Description"
+                      (onChange)="addPlaceholderInMessageContent($event)" [disabled]="showLoader">
+          </p-dropdown>
+          <p-overlayPanel #contentLinkModal>
+            <label class="ui-g-12" style="padding-left: 0;">Please enter anchor text</label>
+            <input pInputText name="contentLinkModal" type="text" class="ui-g-12"
+                   style="font-size:15px !important;height:25px !important;" [(ngModel)]="this.linkText" id="overlay">
+            <p-button class="ui-button-success"
+                      (click)="addAnchorText(true); contentLinkModal.hide()">Add
+            </p-button>
+            <p-button class="ui-button-danger"
+                      (click)="addAnchorText(false); contentLinkModal.hide()">Cancel
+            </p-button>
+          </p-overlayPanel>
+        </div>
+      </div>
+      <div class="ui-g form-group">
+        <div class="ui-g-12 ui-md-12">
+          <p-editor *ngIf="emailTemplateType()" [(ngModel)]="messageTemplate.MessageContent"
+                    name="MessageContent{{messageTemplate.ObjectID}}"
+                    #messageContent
+                    fieldLabel="Message Content">
+            <p-header>
+              <span class="ql-formats">
+                <button class="ql-bold" aria-label="Bold"></button>
+                <button class="ql-italic" aria-label="Italic"></button>
+                <button class="ql-underline" aria-label="Underline"></button>
+              </span>
+              <span class="ql-formats">
+                <button class="ql-list" aria-label="Bullet" value="bullet"></button>
+                <button class="ql-link" aria-label="Link"></button>
+              </span>
+            </p-header>
+          </p-editor>
+          <textarea id="messageContentTxtAreaId" *ngIf="smsTemplateType()" pInputTextarea
+                    [(ngModel)]="messageTemplate.MessageContent"
+                    name="MessageContent{{messageTemplate.ObjectID}}"
+                    fieldLabel="Message Content" style="width: 100%" placeholder="Message Content"></textarea>
+        </div>
+      </div>
+      <div class="ui-g form-group">
+        <div class="ui-g-12 ui-md-12">
+          <div class="ui-g form-group">
+            <div class="ui-g-12 ui-md-3 ui-fluid">
+              <p-button label="Cancel" [disabled]="showLoader" routerLink="/edit-message-template"></p-button>
+            </div>
+            <div class="ui-g-12 ui-md-3 ui-fluid">
+              <p-button *ngIf="showSaveBtn()" label="Save" [disabled]="showLoader"
+                        (onClick)="saveMessageTemplate()">
+              </p-button>
+            </div>
+            <div class="ui-g-12 ui-md-3 ui-fluid">
+              <p-button *ngIf="showSaveCopyBtn()" label="Save As a Copy" [disabled]="showLoader"
+                        (onClick)="saveMessageTemplate(true)"
+              >
+              </p-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="showPlainText"></div>
+  <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
+</form>

frontend/angular/src/app/components/edit-message-template/edit-message-template.model.ts

+export class MessageTemplate {
+  ObjectID: string;
+  ObjectClass = 'MessageTemplate';
+  SidePanel: any;
+  MessageTemplate: string;
+  MessageTemplateType: any;
+  Subject: string;
+  MessageContent: string;
+}

frontend/angular/src/app/components/edit-message-template/edit-message-template.service.ts

+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { MessageTemplateModel } from '../../models/messageTemplateModel';
+import { TemplateTypeModel } from '../../models/templateTypeModel';
+
+import { SearchService } from '../../oneit/services/search.service';
+import { UtilsService } from '../../oneit/services/utils.service';
+
+@Injectable()
+export class EditMessageTemplateService {
+
+  constructor(
+    private searchService: SearchService,
+    private utilsService: UtilsService
+  ) {
+  }
+
+  getMessageTemplateByID(id, assocs): Observable<any> {
+    return this.searchService.getObjectById('MessageTemplates', id, assocs)
+      .map(
+        data => {
+          const objs = this.utilsService.convertResponseToObjects(data, assocs);
+
+          if (objs && objs.length > 0) {
+            return objs[0];
+          }
+        }
+      );
+  }
+
+}

frontend/angular/src/app/constants.ts

+export const CLASSES = {
+  MESSAGE_TEMPLATE: 'performa.orm.MessageTemplate',
+  TEMPLATE_TYPE: 'performa.orm.types.TemplateType',
+  APPLICATION_STATUS: 'performa.orm.types.ApplicationStatus',
+  HIRING_TEAM: 'performa.orm.HiringTeam',
+  PLACEHOLDER_OPTIONS: 'performa.orm.types.PlaceholderOptions'
+};
+
+export const SERVICES = {
+  SAVE_MESSAGE_AS_COPY: 'SaveMessageAsCopy',
+  SAVE: 'Save'
+};

frontend/angular/src/app/models/applicationStatus.ts

+export class ApplicationStatusModel {
+  Name: string;
+  Value: string;
+  Description: string;
+  Disabled: boolean;
+}

frontend/angular/src/app/models/hiringTeamModel.ts

+export class HiringTeamModel {
+  HiringTeamName: string;
+}

frontend/angular/src/app/models/messageTemplateModel.ts

+import { CLASSES } from '../constants';
+import { ApplicationStatusModel } from './applicationStatus';
+import { HiringTeamModel } from './hiringTeamModel';
+import { TemplateTypeModel } from './templateTypeModel';
+
+export class MessageTemplateModel {
+  ObjectID: string;
+  ObjectClass = CLASSES.MESSAGE_TEMPLATE;
+  id: string;
+  MessageID: number;
+  TemplateName: string;
+  Subject: string;
+  ApplicationStatus: ApplicationStatusModel;
+  DelayHrs: number;
+  DelayMin: number;
+  Variance: number;
+  BusinessHoursOnly: boolean;
+  MessageContent: string;
+  TemplateType: TemplateTypeModel;
+  RelatedToJob: boolean;
+  IsSystemGenerated: boolean;
+  HiringTeam: HiringTeamModel | string;
+}

frontend/angular/src/app/models/placeholderOptions.model.ts

+export class PlaceholderOptionsModel {
+  Name: string;
+  Value: string;
+  Description: string;
+  Disabled: boolean;
+  Placeholder: string;
+  ShowForSubject: boolean;
+  ShowForContent: boolean;
+  IsLink: boolean;
+}

frontend/angular/src/app/models/templateTypeModel.ts

+export class TemplateTypeModel {
+  Name: string;
+  Value: string;
+  Description: string;
+  Disabled: boolean;
+}

frontend/angular/src/assets/css/custom.scss

+/** Importing fonts */
+
+@font-face {
+  font-family: 'Usual-Bold';
+  src: url('/assets/fonts/Usual-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Usual-Light';
+  src: url('/assets/fonts/Usual-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Usual-Medium';
+  src: url('/assets/fonts/Usual-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Usual-Regular';
+  src: url('/assets/fonts/Usual-Regular.woff2') format('woff2');
+}
+
+* {
+  font-family: "Usual-Regular";
+
+  label {
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 5px;
+    font-family: "Usual-Medium";
+    font-weight: 500;
+  }
+
+  input {
+    font-family: "Usual-Light" !important;
+  }
+}
+
+form {
+  background-color: #e9ecef;
+
+  .form-control {
+    height: 50px;
+    border-radius: 2px;
+    box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.08);
+    border: solid 1px #dbdbdf;
+    display: block;
+    width: 100%;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+
+    &:focus {
+      background-color: #ffffff;
+      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+      box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.08);
+      border: solid 1px rgba(3, 160, 231, 0.5);
+      outline: 0;
+    }
+  }
+
+  button, input, textarea {
+    font-family: "Usual-Light";
+  }
+}

frontend/angular/src/assets/css/helper.scss

+.s-a-center {
+  align-self: center;
+}

frontend/angular/src/styles.css → frontend/angular/src/styles.scss

+@import "assets/css/custom.scss";
+@import "assets/css/helper.scss";
 /* You can add global styles to this file, and also import other style files */
 
 table .ui-inputtext {
-    width: 100%;
+  width: 100%;
 }
 
 .ui-fluid .ui-inputtext {
-    min-height: 25px;
+  min-height: 25px;
 }
 
 /* input.error-input, .error-input input, input.ng-invalid.ng-touched, select.ng-invalid.ng-touched
@@ -14,19 +16,19 @@ table .ui-inputtext {
 } */
 
 .showErrors input.ng-invalid, .showErrors textarea.ng-invalid, .showErrors select.ng-invalid, .showErrors p-calendar.ng-invalid input, .showErrors p-inputmask.ng-invalid input, .showErrors p-autocomplete.ng-invalid .ui-inputtext, .showErrors p-dropdown.ng-invalid .ui-dropdown {
-    background-image: linear-gradient(to bottom, #e62a10, #e62a10), linear-gradient(to bottom, #e62a10, #e62a10);
+  background-image: linear-gradient(to bottom, #e62a10, #e62a10), linear-gradient(to bottom, #e62a10, #e62a10);
 }
 
 .showErrors p-editor.ng-invalid .ui-editor-toolbar, .showErrors p-editor.ng-invalid .ui-editor-content {
-    border-color: #e62a10;
+  border-color: #e62a10;
 }
 
 /* When showErrorAfterTouched is true in config.json */
 
-/* input.ng-invalid.ng-touched, 
-textarea.ng-invalid.ng-touched, 
-select.ng-invalid.ng-touched, 
-p-calendar.ng-invalid.ng-touched input, 
+/* input.ng-invalid.ng-touched,
+textarea.ng-invalid.ng-touched,
+select.ng-invalid.ng-touched,
+p-calendar.ng-invalid.ng-touched input,
 p-inputmask.ng-invalid.ng-touched input,
 p-autocomplete.ng-invalid.ng-touched input,
 p-dropdown.ng-invalid.ng-touched .ui-dropdown
@@ -34,7 +36,7 @@ p-dropdown.ng-invalid.ng-touched .ui-dropdown
     background-image: linear-gradient(to bottom, #e62a10, #e62a10), linear-gradient(to bottom, #e62a10, #e62a10);
 }
 
-.showErrors p-editor.ng-invalid.ng-touched .ui-editor-toolbar, 
+.showErrors p-editor.ng-invalid.ng-touched .ui-editor-toolbar,
 .showErrors p-editor.ng-invalid.ng-touched .ui-editor-content
 {
     border-color: #e62a10;
@@ -42,89 +44,89 @@ p-dropdown.ng-invalid.ng-touched .ui-dropdown
 */
 
 .color-red {
-    color: #e62a10;
+  color: #e62a10;
 }
 
-.ui-tabview-left>.ui-tabview-nav {
-    width: 15% !important;
-    height: auto !important;
+.ui-tabview-left > .ui-tabview-nav {
+  width: 15% !important;
+  height: auto !important;
 }
 
-.ui-tabview-left>.ui-tabview-panels {
-    width: 85% !important;
+.ui-tabview-left > .ui-tabview-panels {
+  width: 85% !important;
 }
 
 p-inputmask {
-    padding: 0px !important;
-    background-image: none !important;
+  padding: 0px !important;
+  background-image: none !important;
 }
 
 p-inputmask[ng-reflect-disabled="true"] {
-    background-image: none;
-    cursor: auto !important;
+  background-image: none;
+  cursor: auto !important;
 }
 
 .ui-dropdown {
-    max-width: 95%;
+  max-width: 95%;
 }
 
 p-autocomplete[oneitautocomplete] .ui-autocomplete-dropdown {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 p-autocomplete[oneitautocomplete] .ui-autocomplete-dropdown .pi.pi-caret-down:before {
-    content: "\e94c";
-    font-family: primeicons;
-    font-size: 1.3rem;
-    margin-bottom: 15px;
+  content: "\e94c";
+  font-family: primeicons;
+  font-size: 1.3rem;
+  margin-bottom: 15px;
 }
 
 p-autocomplete[oneitautocomplete] .ui-autocomplete-dropdown.ui-widget:disabled, p-autocomplete[oneitautocomplete] .ui-autocomplete-dropdown.ui-state:disabled {
-    opacity: 1;
+  opacity: 1;
 }
 
 .ui-toolbar-group-right.actionBtn {
-    margin-right: 50px;
+  margin-right: 50px;
 }
 
-.ui-table-vertical .ui-table-tbody>tr>td {
-    text-align: left;
-    display: block;
-    border: 0 none;
-    width: 100% !important;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    float: left;
-    clear: left;
+.ui-table-vertical .ui-table-tbody > tr > td {
+  text-align: left;
+  display: block;
+  border: 0 none;
+  width: 100% !important;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  float: left;
+  clear: left;
 }
 
-.ui-table-vertical .ui-table-tbody>tr>td .ui-column-vertical-title {
-    padding: .4em;
-    min-width: 30%;
-    display: inline-block;
-    margin: -.4em 1em -.4em -.4em;
-    font-weight: bold;
+.ui-table-vertical .ui-table-tbody > tr > td .ui-column-vertical-title {
+  padding: .4em;
+  min-width: 30%;
+  display: inline-block;
+  margin: -.4em 1em -.4em -.4em;
+  font-weight: bold;
 }
 
 .ui-table-vertical .no-bg-border {
-    background: none !important;
+  background: none !important;
 }
 
 .ui-table-vertical .no-bg-border td {
-    border: none !important;
+  border: none !important;
 }
 
 p-tabview {
-    width: 100%;
+  width: 100%;
 }
 
-.overflowYAuto { 
-    overflow-y: auto;
-    max-height: 70vh;
+.overflowYAuto {
+  overflow-y: auto;
+  max-height: 70vh;
 }
 
 p-progressSpinner {
-    bottom: calc(100vh/2) !important;
-    right: calc(100vw/2) !important;
-    position: fixed !important;
+  bottom: calc(100vh / 2) !important;
+  right: calc(100vw / 2) !important;
+  position: fixed !important;
 }

frontend/angular/tslint.json

 {
-  "rulesDirectory": [
-    "node_modules/codelyzer"
-  ],
+  "rulesDirectory": "node_modules/codelyzer",
+  "extends": "angular-tslint-rules",
   "rules": {
-    "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
     "comment-format": [
       true,
-      "check-space"
-    ],
-    "curly": true,
-    "deprecation": {
-      "severity": "warn"
-    },
-    "eofline": true,
-    "forin": true,
-    "import-blacklist": [
-      true,
-      "rxjs",
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-over-type-literal": true,
-    "label-position": true,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
+      "check-space",
       {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
+        "ignore-words": [
+          "TODO"
         ]
       }
     ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
-    "no-empty": false,
-    "no-empty-interface": true,
-    "no-eval": true,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-string-throw": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unnecessary-initializer": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "prefer-const": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": true,
-    "semicolon": [
-      true,
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "unified-signatures": true,
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
     "directive-selector": [
       true,
       "attribute",
-      "app",
+      [
+        "app",
+        "test"
+      ],
       "camelCase"
     ],
     "component-selector": [
       true,
       "element",
-      "app",
+      [
+        "app",
+        "test"
+      ],
       "kebab-case"
     ],
-    "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true
+    "template-use-track-by-function": true,
+    "template-no-call-expression": false,
+    "no-implicit-dependencies": false,
+    "no-floating-promises": false,
+    "no-import-side-effect": false,
+    "no-null-keyword": false,
+    "prefer-readonly": false,
+    "no-void-expression": false,
+    "unnecessary-else": true,
+    "cyclomatic-complexity": false,
+    "variable-name": false,
+    "template-i18n": [
+      false
+    ],
+    "comment-type": [
+      true,
+      "multiline",
+      "singleline",
+      "doc"
+    ]
   }
 }