Moved from tslint to eslint as tslint was depreciated.

Added prettier and also prettied all the typescript files using prettier

ESLint is using the AirBnB rules which are the most strict to lint the files.

overlord/src/app/receipt/receipt.component.html

@@ -1,18 +1,34 @@
 <mat-card>
   <mat-card-title-group>
     <mat-card-title>Receipt</mat-card-title>
-    <mat-icon matSuffix (click)="voucher.isStarred = !voucher.isStarred" class="pointer"
-              [class.gold]="voucher.isStarred">
+    <mat-icon
+      matSuffix
+      (click)="voucher.isStarred = !voucher.isStarred"
+      class="pointer"
+      [class.gold]="voucher.isStarred"
+    >
       {{ voucher.isStarred ? 'star' : 'star_border' }}
     </mat-icon>
   </mat-card-title-group>
   <mat-card-content>
     <form [formGroup]="form" fxLayout="column">
-      <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
-           fxLayoutGap.lt-md="0px">
+      <div
+        fxLayout="row"
+        fxLayoutAlign="space-around start"
+        fxLayout.lt-md="column"
+        fxLayoutGap="20px"
+        fxLayoutGap.lt-md="0px"
+      >
         <mat-form-field fxFlex="40">
-          <input matInput [matDatepicker]="date" placeholder="Date" formControlName="date" autocomplete="off"
-                 #dateElement (focus)="dateElement.select()">
+          <input
+            matInput
+            [matDatepicker]="date"
+            placeholder="Date"
+            formControlName="date"
+            autocomplete="off"
+            #dateElement
+            (focus)="dateElement.select()"
+          />
           <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
@@ -26,44 +42,70 @@
         <mat-form-field fxFlex="20">
           <mat-label>Receipt Amount</mat-label>
           <span matPrefix>₹ </span>
-          <input type="text" matInput formControlName="receiptAmount">
+          <input type="text" matInput formControlName="receiptAmount" />
         </mat-form-field>
       </div>
 
-      <div formGroupName="addRow" fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column"
-           fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
+      <div
+        formGroupName="addRow"
+        fxLayout="row"
+        fxLayoutAlign="space-around start"
+        fxLayout.lt-md="column"
+        fxLayoutGap="20px"
+        fxLayoutGap.lt-md="0px"
+      >
         <mat-form-field fxFlex="55">
-          <input type="text" matInput placeholder="Account" #accountElement [matAutocomplete]="auto"
-                 formControlName="account" autocomplete="off">
+          <input
+            type="text"
+            matInput
+            placeholder="Account"
+            #accountElement
+            [matAutocomplete]="auto"
+            formControlName="account"
+            autocomplete="off"
+          />
           <mat-hint *ngIf="accBal">
-            Balance as on Date: <strong>{{accBal.date | currency:'INR' | accounting}}</strong> /
-            Final balance: <strong>{{accBal.total | currency:'INR' | accounting}}</strong>
+            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> /
+            Final balance: <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
           </mat-hint>
         </mat-form-field>
-        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayAccount"
-                          (optionSelected)="accountSelected($event)">
-          <mat-option *ngFor="let account of accounts | async" [value]="account">{{account.name}}</mat-option>
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          autoActiveFirstOption
+          [displayWith]="displayAccount"
+          (optionSelected)="accountSelected($event)"
+        >
+          <mat-option *ngFor="let account of accounts | async" [value]="account">{{
+            account.name
+          }}</mat-option>
         </mat-autocomplete>
         <mat-form-field fxFlex="25">
           <mat-label>Amount</mat-label>
           <span matPrefix>₹ </span>
-          <input type="text" matInput placeholder="Amount" formControlName="amount" autocomplete="off">
+          <input
+            type="text"
+            matInput
+            placeholder="Amount"
+            formControlName="amount"
+            autocomplete="off"
+          />
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" fxFlex="20">Add</button>
       </div>
       <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-
         <!-- Account Column -->
         <ng-container matColumnDef="account">
           <mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
-          <mat-cell *matCellDef="let row">{{row.account.name}}</mat-cell>
+          <mat-cell *matCellDef="let row">{{ row.account.name }}</mat-cell>
         </ng-container>
 
         <!-- Amount Column -->
         <ng-container matColumnDef="amount">
           <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-          <mat-cell *matCellDef="let row" class="right">{{row.amount | currency:'INR'}}</mat-cell>
+          <mat-cell *matCellDef="let row" class="right">{{
+            row.amount | currency: 'INR'
+          }}</mat-cell>
         </ng-container>
 
         <!-- Action Column -->
@@ -80,16 +122,21 @@
         </ng-container>
 
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       </mat-table>
       <mat-form-field>
         <mat-label>Narration</mat-label>
-        <textarea matInput matTextareaAutosize matAutosizeMinRows="5" placeholder="Narration"
-                  formControlName="narration"></textarea>
+        <textarea
+          matInput
+          matTextareaAutosize
+          matAutosizeMinRows="5"
+          placeholder="Narration"
+          formControlName="narration"
+        ></textarea>
       </mat-form-field>
       <div fxLayout="row" fxLayoutGap="0.5%" fxLayoutAlign="center">
         <div class="img-container" fxFlex="20%" *ngFor="let item of voucher.files">
-          <img [src]="item.thumbnail" (click)="zoomImage(item)">
+          <img [src]="item.thumbnail" (click)="zoomImage(item)" />
           <button mat-icon-button class="overlay" (click)="deleteImage(item)">
             <mat-icon>delete</mat-icon>
           </button>
@@ -97,29 +144,47 @@
         <div class="img-container" fxFlex="20%">
           <label ng-href for="fileUp">
             <img
-              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg==">
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
+            />
           </label>
-          <input type="file" id="fileUp" multiple accept="image/*" style="display: none;"
-                 (change)="detectFiles($event)">
+          <input
+            type="file"
+            id="fileUp"
+            multiple
+            accept="image/*"
+            style="display: none"
+            (change)="detectFiles($event)"
+          />
         </div>
       </div>
     </form>
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
-      {{(voucher.id) ? 'Update' : 'Save'}}
+      {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button mat-raised-button (click)="post()" *ngIf="voucher.id"
-            [disabled]="voucher.posted || auth.user.perms.indexOf('post-vouchers') === -1">
-      {{(voucher.posted) ? 'Posted' : 'Post'}}
+    <button
+      mat-raised-button
+      (click)="post()"
+      *ngIf="voucher.id"
+      [disabled]="voucher.posted || auth.user.perms.indexOf('post-vouchers') === -1"
+    >
+      {{ voucher.posted ? 'Posted' : 'Post' }}
     </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
+    <button
+      mat-raised-button
+      color="warn"
+      (click)="confirmDelete()"
+      *ngIf="voucher.id"
+      [disabled]="!canSave()"
+    >
       Delete
     </button>
   </mat-card-actions>
   <mat-card-subtitle *ngIf="voucher.id">
-    Created on <strong>{{voucher.creationDate | localTime}}</strong> and
-    Last Edited on <strong>{{voucher.lastEditDate | localTime}}</strong>
-    by <strong>{{voucher.user.name}}</strong>. {{(voucher.poster) ? 'Posted by ' + voucher.poster : ''}}
+    Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
+    <strong>{{ voucher.lastEditDate | localTime }}</strong> by
+    <strong>{{ voucher.user.name }}</strong
+    >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
   </mat-card-subtitle>
 </mat-card>