fix: lint

Signed-off-by: Dafnik <[email protected]>

.eslintrc.json

@@ -2,7 +2,7 @@
   "root": true,
   "reportUnusedDisableDirectives": true,
   "extends": ["prettier"],
-  "ignorePatterns": ["environment.*.ts"],
+  "ignorePatterns": ["environment.*.ts", "postbuild.js"],
   "overrides": [
     {
       "files": ["*.js"],
@@ -50,6 +50,9 @@
         "@angular-eslint/template/no-inline-styles": "off",
         "@angular-eslint/template/no-call-expression": "off",
         "@angular-eslint/template/no-any": "off",
+        "@angular-eslint/template/elements-content": "off",
+        "@angular-eslint/template/click-events-have-key-events": "warn",
+        "@angular-eslint/template/interactive-supports-focus": "warn",
         "@angular-eslint/component-max-inline-declarations": "off",
         "@angular-eslint/prefer-standalone-component": "off",
         "dot-notation": "error",
@@ -70,6 +73,9 @@
         "@angular-eslint/template/no-inline-styles": "off",
         "@angular-eslint/template/no-call-expression": "off",
         "@angular-eslint/template/no-any": "off",
+        "@angular-eslint/template/elements-content": "off",
+        "@angular-eslint/template/click-events-have-key-events": "warn",
+        "@angular-eslint/template/interactive-supports-focus": "warn",
         "@angular-eslint/component-max-inline-declarations": "off"
       }
     },

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Style & commit lint
+name: dev ci
 
 on:
   push:
@@ -62,7 +62,7 @@ jobs:
         with:
           install-ignore-scripts: true
 
-      - name: Validate
+      - name: Style check
         run: pnpm format:check
 
   eslint:
@@ -79,6 +79,20 @@ jobs:
       - name: Lint project
         run: pnpm lint:check
 
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: dafnik/setup-node-pnpm@v2
+        with:
+          install-ignore-scripts: true
+
+      - name: Build project
+        run: pnpm tsc:check
+
   commitlint:
     runs-on: ubuntu-latest
     steps:

angular.json

@@ -122,7 +122,7 @@
           "configurations": {
             "lava": {
               "buildTarget": "WaiterRobot-Web:build:local-lava",
-              "proxyConfig": "src/proxy.lava.js",
+              "proxyConfig": "src/proxy.lava.json",
               "port": 4300
             },
             "production": {

nginx.conf

@@ -40,7 +40,7 @@ server {
     location / {
         try_files $uri$args $uri$args/ /index.html;
 
-        add_header Cache-Control 'max-age=86400'; # one day
+        add_header Cache-Control 'max-age=259200'; # 3 days
     }
 
 }

package.json

@@ -11,6 +11,7 @@
     "build:local": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --configuration local && cp ./LICENSE ./dist/WaiterRobot-Web/ && npm run postbuild",
     "build:stats": "rm -rf ./dist/WaiterRobot-Web/ && mkdir -p ./dist/WaiterRobot-Web && ng build --stats-json",
     "analyze": "npm run build:stats && source-map-explorer dist/WaiterRobot-Web/**/*.js",
+    "tsc:check": "tsc",
     "lint": "eslint '**/*.{js,ts,html,json,md}' --fix",
     "lint:check": "eslint '**/*.{js,ts,html,json,md}'",
     "format:check": "prettier --check .",
@@ -88,7 +89,6 @@
     "purgecss": "5.0.0",
     "source-map-explorer": "2.5.3",
     "swagger-typescript-api": "^13.0.0",
-    "tsc-files": "^1.1.4",
     "typescript": "5.3.3"
   }
 }

src/app/home/_admin/system-notifications/system-notification-edit/system-notification-edit.component.ts

@@ -19,7 +19,7 @@ import {SystemNotificationEditFormComponent} from './system-notification-edit-fo
           <back-button />
 
           <div *isEditing="entity">
-            <button class="btn btn-sm btn-danger" (click)="onDelete(entity.id)">
+            <button type="button" class="btn btn-sm btn-danger" (click)="onDelete(entity.id)">
               <bi name="trash" />
               {{ 'DELETE' | tr }}
             </button>

src/app/home/_admin/tmp-notifications/tmp-notification-view.component.ts

@@ -45,11 +45,11 @@ import {TmpNotificationsService} from './tmp-notifications.service';
 
           <ul #nav="ngbNav" ngbNav class="nav-tabs" [activeId]="1">
             <li [ngbNavItem]="1">
-              <button ngbNavLink>Preview</button>
+              <button type="button" ngbNavLink>Preview</button>
               <ng-template ngbNavContent>
                 <div class="json-box">
                   <div class="d-flex justify-content-end">
-                    <button class="ms-auto btn btn-dark btn-sm" ngbTooltip="Copy" (click)="copy(it.bodyHTML)">
+                    <button type="button" class="ms-auto btn btn-dark btn-sm" ngbTooltip="Copy" (click)="copy(it.bodyHTML)">
                       <bi name="copy" />
                     </button>
                   </div>
@@ -58,11 +58,11 @@ import {TmpNotificationsService} from './tmp-notifications.service';
               </ng-template>
             </li>
             <li [ngbNavItem]="2">
-              <button ngbNavLink>Source</button>
+              <button type="button" ngbNavLink>Source</button>
               <ng-template ngbNavContent>
                 <div class="json-box">
                   <div class="d-flex justify-content-end mb-2">
-                    <button class="ms-auto btn btn-dark btn-sm" ngbTooltip="Copy" (click)="copy(it.bodyHTML)">
+                    <button type="button" class="ms-auto btn btn-dark btn-sm" ngbTooltip="Copy" (click)="copy(it.bodyHTML)">
                       <bi name="copy" />
                     </button>
                   </div>
@@ -82,7 +82,7 @@ import {TmpNotificationsService} from './tmp-notifications.service';
         <div class="d-flex gap-2">
           <div class="json-box" style="width: 50%">
             <div class="d-flex justify-content-end mb-2">
-              <button class="ms-auto btn btn-dark btn-sm" ngbTooltip="Copy" (click)="copy(it.body)">
+              <button type="button" class="ms-auto btn btn-dark btn-sm" ngbTooltip="Copy" (click)="copy(it.body)">
                 <bi name="copy" />
               </button>
             </div>

src/app/home/_admin/users/user-edit/user-edit-form.component.ts

@@ -179,7 +179,11 @@ export class UserEditFormComponent extends AbstractModelEditFormComponent<Create
     super();
 
     this.form.controls.updatePassword.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
-      value ? this.form.controls.password.enable() : this.form.controls.password.disable();
+      if (value) {
+        this.form.controls.password.enable();
+      } else {
+        this.form.controls.password.disable();
+      }
     });
 
     this.form.controls.sendInvitation.valueChanges.pipe(takeUntilDestroyed()).subscribe((it) => {

src/app/home/_admin/users/user-edit/user-edit.component.ts

@@ -25,7 +25,7 @@ import {UserEditFormComponent} from './user-edit-form.component';
         <scrollable-toolbar>
           <back-button />
           <div *isEditing="entity">
-            <button class="btn btn-sm btn-outline-danger" (click)="onDelete(entity.id)">
+            <button type="button" class="btn btn-sm btn-outline-danger" (click)="onDelete(entity.id)">
               <bi name="trash" />
               {{ 'DELETE' | tr }}
             </button>

src/app/home/_admin/users/users.component.ts

@@ -75,7 +75,7 @@ import {UsersService} from './services/users.service';
           <ng-container ngbColumnDef="actions">
             <th *ngbHeaderCellDef ngb-header-cell>{{ 'ACTIONS' | tr }}</th>
             <td *ngbCellDef="let user" ngb-cell>
-              <a class="btn btn-sm m-1 btn-outline-success text-body-emphasis" routerLink="../{{ user.id }}" [ngbTooltip]="'EDIT' | tr">
+              <a class="btn btn-sm m-1 btn-outline-success text-body-emphasis" [routerLink]="'../' + user.id" [ngbTooltip]="'EDIT' | tr">
                 <bi name="pencil-square" />
               </a>
               <button
@@ -90,7 +90,7 @@ import {UsersService} from './services/users.service';
           </ng-container>
 
           <tr *ngbHeaderRowDef="columnsToDisplay" ngb-header-row></tr>
-          <tr *ngbRowDef="let user; columns: columnsToDisplay" ngb-row routerLink="../{{ user.id }}"></tr>
+          <tr *ngbRowDef="let user; columns: columnsToDisplay" ngb-row [routerLink]="'../' + user.id"></tr>
         </table>
       </div>
 

src/app/home/_shared/components/button/app-back-button.component.ts

@@ -34,7 +34,7 @@ export class AppBackDirective {
 @Component({
   template: `
     <div>
-      <button class="btn btn-sm btn-dark text-white" back>{{ 'GO_BACK' | tr }}</button>
+      <button type="button" class="btn btn-sm btn-dark text-white" back>{{ 'GO_BACK' | tr }}</button>
     </div>
   `,
   selector: 'back-button',

src/app/home/_shared/components/button/app-qr-code-button.component.ts

@@ -36,6 +36,7 @@ import {QrCodeService} from '../../services/qr-code.service';
       <button
         #c="copy"
         #t="ngbTooltip"
+        type="button"
         class="btn btn-primary btn-sm"
         aria-label="Copy link"
         autoClose="false"

src/app/home/_shared/components/button/app-selectable-btn.component.ts

@@ -13,7 +13,7 @@ import {DfxTr} from 'dfx-translate';
         type="button"
         class="btn btn-sm btn-outline-primary text-body-emphasis"
         container="body"
-        attr.aria-label="{{ 'SELECT' | tr }}"
+        [attr.aria-label]="'SELECT' | tr"
         [ngbTooltip]="'SELECT' | tr"
         [placement]="placement"
         (click)="selectedChange.next(entityId); $event.stopPropagation()"
@@ -25,7 +25,7 @@ import {DfxTr} from 'dfx-translate';
         type="button"
         class="btn btn-sm btn-primary"
         container="body"
-        attr.aria-label="{{ 'CLEAR_SELECTION' | tr }}"
+        [attr.aria-label]="'CLEAR_SELECTION' | tr"
         [ngbTooltip]="'CLEAR_SELECTION' | tr"
         [placement]="placement"
         (click)="selectedChange.next(undefined); $event.stopPropagation()"
@@ -44,7 +44,7 @@ export class AppSelectableBtnComponent {
 
   @Input() selectedId?: number;
 
-  @Output() selectedChange = new EventEmitter<number | undefined>();
+  @Output() readonly selectedChange = new EventEmitter<number | undefined>();
 
   @Input() placement: PlacementArray = 'right';
 }

src/app/home/_shared/components/color/app-text-with-color-indicator.component.ts

@@ -4,7 +4,7 @@ import {AppColorIndicatorComponent} from './app-color-indicator.component';
 
 @Component({
   template: `
-    <div class="d-flex align-items-center" [class]="color ? 'gap-3' : ''">
+    <div [class]="'d-flex align-items-center' + color ? 'gap-3' : ''">
       @if (placement === 'left') {
         @if (color) {
           <app-color-indicator [color]="color" [size]="size" />

src/app/home/_shared/components/color/color-picker.component.ts

@@ -88,7 +88,7 @@ export class AppColorPicker {
   ];
 
   @Output()
-  colorChange: EventEmitter<string> = new EventEmitter<string>();
+  readonly colorChange: EventEmitter<string> = new EventEmitter<string>();
 
   changeColor(event: string): void {
     this.color = event;

src/app/home/_shared/components/datetime-picker/datetime-adapter.ts

@@ -32,7 +32,7 @@ export abstract class NgbDateTimeAdapter<T> {
   abstract toModel(dateTime: NgbDateTimeStruct | null): T | null;
 }
 
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class NgbDateTimeStructAdapter extends NgbDateTimeAdapter<NgbDateTimeStruct> {
   /**
    * Converts a NgbTimeStruct value into NgbTimeStruct value

src/app/home/_shared/components/datetime-picker/datetime-picker.component.ts

@@ -2,8 +2,6 @@ import {NgClass} from '@angular/common';
 import {booleanAttribute, ChangeDetectionStrategy, Component, Input, numberAttribute, Optional, Self} from '@angular/core';
 import {ControlValueAccessor, FormsModule, NgControl} from '@angular/forms';
 
-import {noop} from 'rxjs';
-
 import {
   NgbDateParserFormatter,
   NgbDatepicker,
@@ -16,6 +14,8 @@ import {
 
 import {BiComponent} from 'dfx-bootstrap-icons';
 
+import {noop} from 'rxjs';
+
 import {NgbDateTimeAdapter} from './datetime-adapter';
 import {NgbDateTimeStruct} from './datetime.struct';
 
@@ -113,6 +113,7 @@ export class AppDatetimeInputComponent implements ControlValueAccessor {
     const _dateStruct = this._ngbDateParser.parse(dateTimeValue[0]);
     const _timeStruct: string[] | undefined = dateTimeValue[1]?.split(':');
 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!_dateStruct || !_timeStruct) {
       return null;
     }

src/app/home/_shared/components/navbar-scrollable/app-navbar-scrollable.component.html

@@ -35,20 +35,20 @@
     <div class="edit-container d-flex flex-column gap-3">
       <h5 class="my-0">{{ 'NAV_EDIT_CUSTOMIZE' | tr }}</h5>
       <scrollable-toolbar>
-        <button class="btn btn-sm btn-secondary" (click)="onClose()">{{ 'CLOSE' | tr }}</button>
+        <button type="button" class="btn btn-sm btn-secondary" (click)="onClose()">{{ 'CLOSE' | tr }}</button>
 
-        <button class="btn btn-sm btn-success" (click)="onSave()">
+        <button type="button" class="btn btn-sm btn-success" (click)="onSave()">
           <bi name="save" />
           {{ 'SAVE' | tr }}
         </button>
 
-        <button class="btn btn-sm btn-danger" (click)="onReset()">
+        <button type="button" class="btn btn-sm btn-danger" (click)="onReset()">
           <bi name="arrow-clockwise" />
           {{ 'RESET' | tr }}
         </button>
 
         @if (allowBookmarks) {
-        <button class="btn btn-sm btn-info" (click)="openModal(bookMarkModalContent)">
+        <button type="button" class="btn btn-sm btn-info" (click)="openModal(bookMarkModalContent)">
           <bi name="star-fill" />
           {{ 'NAV_EDIT_BOOKMARK' | tr }}
         </button>
@@ -73,6 +73,7 @@ <h5 class="my-0">{{ 'NAV_EDIT_CUSTOMIZE' | tr }}</h5>
           </ng-template>
           @if (item.bookmark) {
           <button
+            type="button"
             class="btn btn-sm btn-secondary ms-2"
             placement="bottom"
             [ngbTooltip]="'NAV_EDIT_BOOKMARK_DELETE' | tr"

src/app/home/_shared/list/abstract-models-list.component.ts

@@ -3,12 +3,12 @@ import {AfterViewInit, Component, Inject, inject, signal, ViewChild} from '@angu
 import {FormControl} from '@angular/forms';
 import {Router} from '@angular/router';
 
-import {catchError, combineLatest, debounceTime, map, Observable, of, startWith, switchMap, tap, throwError} from 'rxjs';
-
 import {loggerOf} from 'dfts-helper';
 import {NgbPaginator, NgbSort, NgbTableDataSource} from 'dfx-bootstrap-table';
 import {HasGetAll} from 'dfx-helper';
 
+import {catchError, combineLatest, debounceTime, map, Observable, of, startWith, switchMap, tap, throwError} from 'rxjs';
+
 @Component({
   standalone: true,
   template: '',
@@ -81,7 +81,7 @@ export abstract class AbstractModelsListComponent<EntityType> implements AfterVi
         if (this.paginator) {
           dataSource.paginator = this.paginator;
         }
-        dataSource.filter = filterTerm ?? '';
+        dataSource.filter = filterTerm;
 
         this.isLoading.set(false);