Merge pull request #2199 from paperless-ngx/eslint

Chore: migrate to eslint

.github/workflows/ci.yml

@@ -195,6 +195,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: cd src-ui && npm ci
+      - run: cd src-ui && npm run lint
       - run: cd src-ui && npm run test
       - run: cd src-ui && npm run e2e:ci
 

src-ui/.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

src-ui/angular.json

@@ -53,7 +53,8 @@
               "src/favicon.ico",
               "src/apple-touch-icon.png",
               "src/assets",
-							"src/manifest.webmanifest", {
+              "src/manifest.webmanifest",
+              {
                 "glob": "pdf.worker.min.js",
                 "input": "node_modules/pdfjs-dist/build/",
                 "output": "/assets/js/"
@@ -103,7 +104,9 @@
               ]
             },
             "en-US": {
-							"localize": ["en-US"]
+              "localize": [
+                "en-US"
+              ]
             }
           },
           "defaultConfiguration": ""
@@ -171,9 +174,23 @@
             "watch": true,
             "headless": false
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
-	"defaultProject": "paperless-ui"
+  "defaultProject": "paperless-ui",
+  "cli": {
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
+  }
 }

src-ui/package.json

@@ -40,17 +40,23 @@
   "devDependencies": {
     "@angular-builders/jest": "14.1.0",
     "@angular-devkit/build-angular": "~14.2.7",
+    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "14.4.0",
     "@angular/cli": "~14.2.7",
     "@angular/compiler-cli": "~14.2.8",
     "@types/jest": "28.1.6",
     "@types/node": "^18.7.23",
-    "codelyzer": "^6.0.2",
+    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/parser": "5.43.0",
     "concurrently": "7.4.0",
+    "eslint": "^8.28.0",
     "jest": "28.1.3",
     "jest-environment-jsdom": "^29.2.2",
     "jest-preset-angular": "^12.2.3",
     "ts-node": "~10.9.1",
-    "tslint": "~6.1.3",
     "typescript": "~4.8.4",
     "wait-on": "~6.0.1"
   },

src-ui/src/app/app.module.ts

@@ -24,7 +24,7 @@ import { CorrespondentEditDialogComponent } from './components/common/edit-dialo
 import { TagEditDialogComponent } from './components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from './components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
 import { TagComponent } from './components/common/tag/tag.component'
-import { ClearableBadge } from './components/common/clearable-badge/clearable-badge.component'
+import { ClearableBadgeComponent } from './components/common/clearable-badge/clearable-badge.component'
 import { PageHeaderComponent } from './components/common/page-header/page-header.component'
 import { AppFrameComponent } from './components/app-frame/app-frame.component'
 import { ToastsComponent } from './components/common/toasts/toasts.component'
@@ -146,7 +146,7 @@ function initializeApp(settings: SettingsService) {
     DocumentTypeEditDialogComponent,
     StoragePathEditDialogComponent,
     TagComponent,
-    ClearableBadge,
+    ClearableBadgeComponent,
     PageHeaderComponent,
     AppFrameComponent,
     ToastsComponent,

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts

@@ -5,7 +5,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'
   templateUrl: './clearable-badge.component.html',
   styleUrls: ['./clearable-badge.component.scss'],
 })
-export class ClearableBadge {
+export class ClearableBadgeComponent {
   constructor() {}
 
   @Input()

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts

@@ -22,7 +22,7 @@ export abstract class EditDialogComponent<T extends ObjectWithId>
   object: T
 
   @Output()
-  success = new EventEmitter()
+  succeeded = new EventEmitter()
 
   networkActive = false
 
@@ -95,7 +95,7 @@ export abstract class EditDialogComponent<T extends ObjectWithId>
     serverResponse.subscribe({
       next: (result) => {
         this.activeModal.close()
-        this.success.emit(result)
+        this.succeeded.emit(result)
       },
       error: (error) => {
         this.error = error.error

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html

@@ -6,7 +6,7 @@
   </div>
   <div class="modal-body">
 
-    <p *ngIf="this.dialogMode == 'edit'" i18n>
+    <p *ngIf="this.dialogMode === 'edit'" i18n>
       <em>Note that editing a path does not apply changes to stored files until you have run the 'document_renamer' utility. See the <a target="_blank" href="https://docs.paperless-ngx.com/administration/#renamer">documentation</a>.</em>
     </p>
 

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -321,7 +321,7 @@ export class FilterableDropdownComponent {
   apply = new EventEmitter<ChangedItems>()
 
   @Output()
-  open = new EventEmitter()
+  opened = new EventEmitter()
 
   get operatorToggleEnabled(): boolean {
     return (
@@ -356,7 +356,7 @@ export class FilterableDropdownComponent {
       if (this.editing) {
         this.selectionModel.reset()
       }
-      this.open.next(this)
+      this.opened.next(this)
     } else {
       this.filterText = ''
       if (this.applyOnClose && this.selectionModel.isDirty()) {

src-ui/src/app/components/common/select-dialog/select-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 
@@ -7,7 +7,7 @@ import { ObjectWithId } from 'src/app/data/object-with-id'
   templateUrl: './select-dialog.component.html',
   styleUrls: ['./select-dialog.component.scss'],
 })
-export class SelectDialogComponent implements OnInit {
+export class SelectDialogComponent {
   constructor(public activeModal: NgbActiveModal) {}
 
   @Output()
@@ -24,8 +24,6 @@ export class SelectDialogComponent implements OnInit {
 
   selected: number
 
-  ngOnInit(): void {}
-
   cancelClicked() {
     this.activeModal.close()
   }

src-ui/src/app/components/common/tag/tag.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
 
 @Component({
@@ -6,7 +6,7 @@ import { PaperlessTag } from 'src/app/data/paperless-tag'
   templateUrl: './tag.component.html',
   styleUrls: ['./tag.component.scss'],
 })
-export class TagComponent implements OnInit {
+export class TagComponent {
   constructor() {}
 
   @Input()
@@ -17,6 +17,4 @@ export class TagComponent implements OnInit {
 
   @Input()
   clickable: boolean = false
-
-  ngOnInit(): void {}
 }

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html

@@ -1,6 +1,6 @@
 <app-widget-frame title="Statistics" [loading]="loading" i18n-title>
   <ng-container content>
-    <p class="card-text" i18n *ngIf="statistics?.documents_inbox != null">Documents in inbox: {{statistics?.documents_inbox}}</p>
+    <p class="card-text" i18n *ngIf="statistics?.documents_inbox !== null">Documents in inbox: {{statistics?.documents_inbox}}</p>
     <p class="card-text" i18n>Total documents: {{statistics?.documents_total}}</p>
   </ng-container>
 </app-widget-frame>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -1,6 +1,5 @@
-import { HttpEventType } from '@angular/common/http'
+import { Component } from '@angular/core'
-import { Component, OnInit } from '@angular/core'
+import { NgxFileDropEntry } from 'ngx-file-drop'
-import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'
 import {
   ConsumerStatusService,
   FileStatus,
@@ -15,7 +14,7 @@ const MAX_ALERTS = 5
   templateUrl: './upload-file-widget.component.html',
   styleUrls: ['./upload-file-widget.component.scss'],
 })
-export class UploadFileWidgetComponent implements OnInit {
+export class UploadFileWidgetComponent {
   alertsExpanded = false
 
   constructor(
@@ -109,8 +108,6 @@ export class UploadFileWidgetComponent implements OnInit {
     this.consumerStatusService.dismissCompleted()
   }
 
-  ngOnInit(): void {}
-
   public fileOver(event) {}
 
   public fileLeave(event) {}

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 
 @Component({
@@ -6,8 +6,6 @@ import { TourService } from 'ngx-ui-tour-ng-bootstrap'
   templateUrl: './welcome-widget.component.html',
   styleUrls: ['./welcome-widget.component.scss'],
 })
-export class WelcomeWidgetComponent implements OnInit {
+export class WelcomeWidgetComponent {
   constructor(public readonly tourService: TourService) {}
-
-  ngOnInit(): void {}
 }

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'app-widget-frame',
   templateUrl: './widget-frame.component.html',
   styleUrls: ['./widget-frame.component.scss'],
 })
-export class WidgetFrameComponent implements OnInit {
+export class WidgetFrameComponent {
   constructor() {}
 
   @Input()
@@ -13,6 +13,4 @@ export class WidgetFrameComponent implements OnInit {
 
   @Input()
   loading: boolean = false
-
-  ngOnInit(): void {}
 }

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -1,5 +1,5 @@
 <app-page-header [(title)]="title">
-    <div class="input-group input-group-sm me-5 d-none d-md-flex" *ngIf="getContentType() == 'application/pdf' && !useNativePdfViewer">
+    <div class="input-group input-group-sm me-5 d-none d-md-flex" *ngIf="getContentType() === 'application/pdf' && !useNativePdfViewer">
       <div class="input-group-text" i18n>Page</div>
       <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
       <div class="input-group-text" i18n>of {{previewNumPages}}</div>
@@ -149,9 +149,9 @@
 
                 <li [ngbNavItem]="4" class="d-md-none">
                     <a ngbNavLink>Preview</a>
-                    <ng-template ngbNavContent *ngIf="pdfPreview.offsetParent == undefined">
+                    <ng-template ngbNavContent *ngIf="pdfPreview.offsetParent === undefined">
                         <div class="position-relative">
-                            <ng-container *ngIf="getContentType() == 'application/pdf'">
+                            <ng-container *ngIf="getContentType() === 'application/pdf'">
                                 <div class="preview-sticky pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer">
                                     <pdf-viewer [src]="{ url: previewUrl, password: password }" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (error)="onError($event)" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
                                 </div>
@@ -159,7 +159,7 @@
                                     <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
                                 </ng-template>
                             </ng-container>
-                            <ng-container *ngIf="getContentType() == 'text/plain'">
+                            <ng-container *ngIf="getContentType() === 'text/plain'">
                                 <object [data]="previewUrl | safeUrl" type="text/plain" class="preview-sticky bg-white" width="100%"></object>
                             </ng-container>
                             <div *ngIf="requiresPassword" class="password-prompt">
@@ -180,14 +180,14 @@
 
             <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
-            <button type="button" class="btn btn-outline-secondary" (click)="discard()" i18n [disabled]="networkActive || !(isDirty$ | async)">Discard</button>&nbsp;
+            <button type="button" class="btn btn-outline-secondary" (click)="discard()" i18n [disabled]="networkActive || (isDirty$ | async) === false">Discard</button>&nbsp;
-            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()" i18n [disabled]="networkActive || !(isDirty$ | async) || error">Save & next</button>&nbsp;
+            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()" i18n [disabled]="networkActive || (isDirty$ | async) === false || error">Save & next</button>&nbsp;
-            <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive || !(isDirty$ | async) || error">Save</button>&nbsp;
+            <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive || (isDirty$ | async) === false || error">Save</button>&nbsp;
         </form>
     </div>
 
     <div class="col-md-6 col-xl-8 mb-3 d-none d-md-block position-relative" #pdfPreview>
-        <ng-container *ngIf="getContentType() == 'application/pdf'">
+        <ng-container *ngIf="getContentType() === 'application/pdf'">
             <div class="preview-sticky pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer">
                 <pdf-viewer [src]="{ url: previewUrl, password: password }" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (error)="onError($event)" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
             </div>
@@ -195,7 +195,7 @@
                 <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
             </ng-template>
         </ng-container>
-        <ng-container *ngIf="getContentType() == 'text/plain'">
+        <ng-container *ngIf="getContentType() === 'text/plain'">
             <object [data]="previewUrl | safeUrl" type="text/plain" class="preview-sticky bg-white" width="100%"></object>
         </ng-container>
         <div *ngIf="requiresPassword" class="password-prompt">

src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'app-metadata-collapse',
   templateUrl: './metadata-collapse.component.html',
   styleUrls: ['./metadata-collapse.component.scss'],
 })
-export class MetadataCollapseComponent implements OnInit {
+export class MetadataCollapseComponent {
   constructor() {}
 
   expand = false
@@ -15,6 +15,4 @@ export class MetadataCollapseComponent implements OnInit {
 
   @Input()
   title = $localize`Metadata`
-
-  ngOnInit(): void {}
 }

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { PaperlessTag } from 'src/app/data/paperless-tag'
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type'
@@ -33,7 +33,7 @@ import { first, Subject, takeUntil } from 'rxjs'
   templateUrl: './bulk-editor.component.html',
   styleUrls: ['./bulk-editor.component.scss'],
 })
-export class BulkEditorComponent {
+export class BulkEditorComponent implements OnInit, OnDestroy {
   tags: PaperlessTag[]
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -2,7 +2,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
   ViewChild,
 } from '@angular/core'
@@ -20,7 +19,7 @@ import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
     '../popover-preview/popover-preview.scss',
   ],
 })
-export class DocumentCardLargeComponent implements OnInit {
+export class DocumentCardLargeComponent {
   constructor(
     private documentService: DocumentService,
     private settingsService: SettingsService
@@ -71,8 +70,6 @@ export class DocumentCardLargeComponent implements OnInit {
     }
   }
 
-  ngOnInit(): void {}
-
   getIsThumbInverted() {
     return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
   }

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -2,7 +2,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
   ViewChild,
 } from '@angular/core'
@@ -21,7 +20,7 @@ import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
     '../popover-preview/popover-preview.scss',
   ],
 })
-export class DocumentCardSmallComponent implements OnInit {
+export class DocumentCardSmallComponent {
   constructor(
     private documentService: DocumentService,
     private settingsService: SettingsService
@@ -55,8 +54,6 @@ export class DocumentCardSmallComponent implements OnInit {
   mouseOnPreview = false
   popoverHidden = true
 
-  ngOnInit(): void {}
-
   getIsThumbInverted() {
     return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
   }

src-ui/src/app/components/document-list/document-list.component.html

@@ -53,7 +53,7 @@
       </div>
       <div>
         <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSortField(f.field)"
-          [class.active]="list.sortField == f.field">{{f.name}}
+          [class.active]="list.sortField === f.field">{{f.name}}
         </button>
       </div>
     </div>
@@ -94,7 +94,7 @@
       </ng-container>
       <span i18n *ngIf="list.selected.size > 0">{list.collectionSize, plural, =1 {Selected {{list.selected.size}} of one document} other {Selected {{list.selected.size}} of {{list.collectionSize || 0}} documents}}</span>
       <ng-container *ngIf="!list.isReloading">
-        <span i18n *ngIf="list.selected.size == 0">{list.collectionSize, plural, =1 {One document} other {{{list.collectionSize || 0}} documents}}</span>&nbsp;<span i18n *ngIf="isFiltered">(filtered)</span>
+        <span i18n *ngIf="list.selected.size === 0">{list.collectionSize, plural, =1 {One document} other {{{list.collectionSize || 0}} documents}}</span>&nbsp;<span i18n *ngIf="isFiltered">(filtered)</span>
       </ng-container>
     </p>
     <ngb-pagination *ngIf="list.collectionSize" [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
@@ -111,52 +111,52 @@
 </ng-container>
 
 <ng-template #documentListNoError>
-  <div *ngIf="displayMode == 'largeCards'">
+  <div *ngIf="displayMode === 'largeCards'">
     <app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickStoragePath)="clickStoragePath($event)" (clickMoreLike)="clickMoreLike(d.id)">
     </app-document-card-large>
   </div>
 
-  <table class="table table-sm align-middle border shadow-sm" *ngIf="displayMode == 'details'">
+  <table class="table table-sm align-middle border shadow-sm" *ngIf="displayMode === 'details'">
     <thead>
       <th></th>
       <th class="d-none d-lg-table-cell"
-        sortable="archive_serial_number"
+        appSortable="archive_serial_number"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>ASN</th>
       <th class="d-none d-md-table-cell"
-        sortable="correspondent__name"
+        appSortable="correspondent__name"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Correspondent</th>
       <th
-        sortable="title"
+        appSortable="title"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Title</th>
       <th class="d-none d-xl-table-cell"
-        sortable="document_type__name"
+        appSortable="document_type__name"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Document type</th>
       <th class="d-none d-xl-table-cell"
-        sortable="storage_path__name"
+        appSortable="storage_path__name"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Storage path</th>
       <th
-        sortable="created"
+        appSortable="created"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
         i18n>Created</th>
       <th class="d-none d-xl-table-cell"
-        sortable="added"
+        appSortable="added"
         [currentSortField]="list.sortField"
         [currentSortReverse]="list.sortReverse"
         (sort)="onSort($event)"
@@ -202,7 +202,7 @@
     </tbody>
   </table>
 
-  <div class="row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
+  <div class="row row-cols-paperless-cards" *ngIf="displayMode === 'smallCards'">
     <app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickStoragePath)="clickStoragePath($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
   </div>
   <div *ngIf="list.documents?.length > 15" class="mt-3">

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -5,10 +5,10 @@
            <div ngbDropdown>
             <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
             <div class="dropdown-menu shadow" ngbDropdownMenu>
-              <button *ngFor="let t of textFilterTargets" ngbDropdownItem [class.active]="textFilterTarget == t.id" (click)="changeTextFilterTarget(t.id)">{{t.name}}</button>
+              <button *ngFor="let t of textFilterTargets" ngbDropdownItem [class.active]="textFilterTarget === t.id" (click)="changeTextFilterTarget(t.id)">{{t.name}}</button>
             </div>
           </div>
-          <select *ngIf="textFilterTarget == 'asn'" class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()">
+          <select *ngIf="textFilterTarget === 'asn'" class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()">
             <option *ngFor="let m of textFilterModifiers" ngbDropdownItem [value]="m.id">{{m.label}}</option>
           </select>
           <button *ngIf="_textFilter" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
@@ -16,7 +16,7 @@
               <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
             </svg>
           </button>
-          <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget == 'fulltext-morelike'">
+          <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget === 'fulltext-morelike'">
          </div>
      </div>
   </div>

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -16,10 +16,10 @@
 <table class="table table-striped align-middle border shadow-sm">
   <thead>
     <tr>
-      <th scope="col" sortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" appSortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
-      <th scope="col" class="d-none d-sm-table-cell" sortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" class="d-none d-sm-table-cell" appSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
-      <th scope="col" sortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" appSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
-      <th scope="col" *ngFor="let column of extraColumns" sortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
+      <th scope="col" *ngFor="let column of extraColumns" appSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
       <th scope="col" i18n>Actions</th>
     </tr>
   </thead>

src-ui/src/app/components/manage/settings/settings.component.html

@@ -24,7 +24,7 @@
           <div class="col">
 
             <select class="form-select" formControlName="displayLanguage">
-              <option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale != 'en-US'"> - {{lang.englishName}}</span></option>
+              <option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale !== 'en-US'"> - {{lang.englishName}}</span></option>
             </select>
 
             <small *ngIf="displayLanguageIsDirty" class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
@@ -215,7 +215,7 @@
               </div>
             </div>
 
-            <div *ngIf="savedViews && savedViews.length == 0" i18n>No saved views defined.</div>
+            <div *ngIf="savedViews && savedViews.length === 0" i18n>No saved views defined.</div>
 
             <div *ngIf="!savedViews">
               <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
@@ -264,7 +264,7 @@
                 </div>
               </li>
 
-              <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
+              <div *ngIf="mailAccounts.length === 0" i18n>No mail accounts defined.</div>
           </ul>
 
           <h4 class="mt-4">
@@ -299,7 +299,7 @@
                 </div>
               </li>
 
-              <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
+              <div *ngIf="mailRules.length === 0" i18n>No mail rules defined.</div>
           </ul>
         </ng-container>
 
@@ -314,5 +314,5 @@
 
   <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
 
-  <button type="submit" class="btn btn-primary mb-2" [disabled]="!(isDirty$ | async)" i18n>Save</button>
+  <button type="submit" class="btn btn-primary mb-2" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
 </form>

src-ui/src/app/components/manage/tasks/tasks.component.html

@@ -1,11 +1,11 @@
 <app-page-header title="File Tasks" i18n-title>
   <div class="btn-toolbar col col-md-auto">
-    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size == 0">
+    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
       <svg class="sidebaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#x"/>
       </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
     </button>
-    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" [disabled]="tasksService.total == 0">
+    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" [disabled]="tasksService.total === 0">
       <svg class="sidebaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
       </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
@@ -33,13 +33,13 @@
       <tr>
         <th scope="col">
           <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length == 0" (click)="toggleAll($event); $event.stopPropagation();">
+            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
             <label class="form-check-label" for="all-tasks"></label>
           </div>
         </th>
         <th scope="col" i18n>Name</th>
         <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
-        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab != 'started' && activeTab != 'queued'" i18n>Results</th>
+        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'" i18n>Results</th>
         <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
         <th scope="col" i18n>Actions</th>
       </tr>
@@ -55,7 +55,7 @@
         </th>
         <td class="overflow-auto">{{ task.task_file_name }}</td>
         <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
-        <td class="d-none d-lg-table-cell" *ngIf="activeTab != 'started' && activeTab != 'queued'">
+        <td class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'">
           <div *ngIf="task.result?.length > 50" class="result" (click)="expandTask(task); $event.stopPropagation();"
             [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
             <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
@@ -89,7 +89,7 @@
         </td>
       </tr>
       <tr>
-        <td class="p-0" [class.border-0]="expandedTask != task.id" colspan="5">
+        <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
           <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
         </td>
       </tr>

src-ui/src/app/components/not-found/not-found.component.ts

@@ -1,12 +1,10 @@
-import { Component, OnInit } from '@angular/core'
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.scss'],
 })
-export class NotFoundComponent implements OnInit {
+export class NotFoundComponent {
   constructor() {}
-
-  ngOnInit(): void {}
 }

src-ui/src/app/directives/sortable.directive.ts

@@ -1,4 +1,11 @@
-import { Directive, EventEmitter, Input, Output } from '@angular/core'
+import {
+  Directive,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core'
 
 export interface SortEvent {
   column: string
@@ -6,18 +13,13 @@ export interface SortEvent {
 }
 
 @Directive({
-  selector: 'th[sortable]',
+  selector: 'th[appSortable]',
-  host: {
-    '[class.asc]': 'currentSortField == sortable && !currentSortReverse',
-    '[class.des]': 'currentSortField == sortable && currentSortReverse',
-    '(click)': 'rotate()',
-  },
 })
 export class SortableDirective {
   constructor() {}
 
   @Input()
-  sortable: string = ''
+  appSortable: string = ''
 
   @Input()
   currentSortReverse: boolean = false
@@ -27,11 +29,20 @@ export class SortableDirective {
 
   @Output() sort = new EventEmitter<SortEvent>()
 
-  rotate() {
+  @HostBinding('class.asc') get asc() {
-    if (this.currentSortField != this.sortable) {
+    return (
-      this.sort.emit({ column: this.sortable, reverse: false })
+      this.currentSortField === this.appSortable && !this.currentSortReverse
+    )
+  }
+  @HostBinding('class.des') get des() {
+    return this.currentSortField === this.appSortable && this.currentSortReverse
+  }
+
+  @HostListener('click') rotate() {
+    if (this.currentSortField != this.appSortable) {
+      this.sort.emit({ column: this.appSortable, reverse: false })
     } else if (
-      this.currentSortField == this.sortable &&
+      this.currentSortField == this.appSortable &&
       !this.currentSortReverse
     ) {
       this.sort.emit({ column: this.currentSortField, reverse: true })

src-ui/tslint.json

@@ -1,152 +0,0 @@
-{
-  "extends": "tslint:recommended",
-  "rulesDirectory": [
-    "codelyzer"
-  ],
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-return-shorthand": true,
-    "curly": true,
-    "deprecation": {
-      "severity": "warning"
-    },
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "max-classes-per-file": false,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": {
-      "options": {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    },
-    "typedef": [
-      true,
-      "call-signature"
-    ],
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    },
-    "component-class-suffix": true,
-    "contextual-lifecycle": true,
-    "directive-class-suffix": true,
-    "no-conflicting-lifecycle": true,
-    "no-host-metadata-property": true,
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "template-banana-in-box": true,
-    "template-no-negated-async": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ]
-  }
-}