refactor(eslint): code adaptions to respect "no-negated-async" rule

- https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/docs/rules/no-negated-async.md

BREAKING CHANGE: Switch linting from `tslint` to `eslint`.

projects/organization-management/src/app/components/budget-widget/budget-widget.component.html

@@ -1,7 +1,7 @@
 <ish-error-message [error]="error$ | async"></ish-error-message>
 <ish-info-box heading="account.requisitions.widget.budget_title" class="infobox-wrapper" cssClass="infobox-widget">
   <div class="loading-container">
-    <div *ngIf="!(budgetLoading$ | async); else loading">
+    <div *ngIf="(budgetLoading$ | async) !== true; else loading">
       <div class="row">
         <div class="col-12">
           <ish-user-budget progressBarClass="background-inverse" [budget]="userBudget$ | async"></ish-user-budget>

projects/organization-management/src/app/components/cost-center-widget/cost-center-widget.component.html

@@ -1,6 +1,6 @@
 <ish-info-box heading="account.costcenter.widget.title" class="infobox-wrapper" cssClass="infobox-widget">
   <div class="loading-container">
-    <div *ngIf="!(loading$ | async); else loading">
+    <div *ngIf="(loading$ | async) !== true; else loading">
       <ng-container *ngIf="costCenters$ | async as costCenters; else emptyList">
         <ng-container *ngIf="costCenters.length; else emptyList">
           <ng-container *ngFor="let cc of costCenters$ | async">

projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.html

@@ -41,7 +41,7 @@ <h1>{{ 'account.costcenter.details.buyers.heading' | translate }}</h1>
   </div>
 </ng-container>
 <ng-template #emptyList>
-  <p *ngIf="!(error$ | async)" data-testing-id="empty-buyer-list">
+  <p *ngIf="!!(error$ | async) === false" data-testing-id="empty-buyer-list">
     {{ 'account.costcenter.details.add.buyers.list.empty' | translate }}
   </p>
 

projects/organization-management/src/app/pages/cost-centers/cost-centers-page.component.html

@@ -1,8 +1,12 @@
 <h1>
   {{ 'account.organization.cost_center_management' | translate }}
-  <a *ngIf="!(error$ | async)" routerLink="create" class="btn btn-secondary" data-testing-id="add-cost-center-link">{{
-    'account.costcenter.list.link.add' | translate
-  }}</a>
+  <a
+    *ngIf="!!(error$ | async) === false"
+    routerLink="create"
+    class="btn btn-secondary"
+    data-testing-id="add-cost-center-link"
+    >{{ 'account.costcenter.list.link.add' | translate }}</a
+  >
 </h1>
 
 <div class="loading-container">

projects/organization-management/src/app/pages/users/users-page.component.html

@@ -1,8 +1,12 @@
 <h1>
   {{ 'account.organization.user_management' | translate }}
-  <a *ngIf="!(error$ | async)" routerLink="create" class="btn btn-secondary" data-testing-id="add-user-link">{{
-    'account.user.list.link.add_user' | translate
-  }}</a>
+  <a
+    *ngIf="!!(error$ | async) === false"
+    routerLink="create"
+    class="btn btn-secondary"
+    data-testing-id="add-user-link"
+    >{{ 'account.user.list.link.add_user' | translate }}</a
+  >
 </h1>
 
 <ish-error-message [error]="error$ | async"></ish-error-message>

projects/requisition-management/src/app/components/approval-widget/approval-widget.component.html

@@ -4,7 +4,7 @@
   cssClass="infobox-color-widget d-flex flex-column"
 >
   <div class="loading-container mt-auto">
-    <div *ngIf="!(requisitionsLoading$ | async); else loading">
+    <div *ngIf="(requisitionsLoading$ | async) !== true; else loading">
       <div class="row align-items-end">
         <div class="col">
           <div class="infobox-count-large" data-testing-id="pending-counter">

projects/requisition-management/src/app/components/requisition-widget/requisition-widget.component.html

@@ -4,7 +4,7 @@
   cssClass="infobox-color-widget d-flex flex-column"
 >
   <div class="loading-container mt-auto">
-    <div *ngIf="!(requisitionsLoading$ | async); else loading">
+    <div *ngIf="(requisitionsLoading$ | async) !== true; else loading">
       <div class="row align-items-end">
         <div class="col">
           <div class="infobox-count-large" data-testing-id="pending-counter">

src/app/extensions/order-templates/shared/order-template-widget/order-template-widget.component.html

@@ -4,7 +4,7 @@
   cssClass="infobox-color-widget d-flex flex-column"
 >
   <div class="loading-container">
-    <div *ngIf="!(loading$ | async); else loading" class="pb-2">
+    <div *ngIf="(loading$ | async) !== true; else loading" class="pb-2">
       <ng-container *ngIf="orderTemplates$ | async as orderTemplates; else emptyList">
         <ng-container *ngIf="orderTemplates.length; else emptyList">
           <div *ngFor="let orderTemplate of orderTemplates" class="mb-2">

src/app/extensions/order-templates/shared/order-template-widget/order-template-widget.component.spec.ts

@@ -29,6 +29,7 @@ describe('Order Template Widget Component', () => {
   beforeEach(async () => {
     orderTemplatesFacade = mock(OrderTemplatesFacade);
     when(orderTemplatesFacade.orderTemplates$).thenReturn(of(orderTemplates));
+    when(orderTemplatesFacade.orderTemplateLoading$).thenReturn(of(false));
 
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, TranslateModule.forRoot()],

src/app/extensions/quoting/shared/quote-view/quote-view.component.html

@@ -30,7 +30,7 @@
 
     <ng-template #quotePending>
       <ish-info-message
-        *ngIf="state === 'Responded' && !(isQuoteStarted$ | async)"
+        *ngIf="state === 'Responded' && (isQuoteStarted$ | async) === false"
         message="quote.error.not_started"
         [toast]="false"
       ></ish-info-message>

src/app/extensions/quoting/shared/quote-widget/quote-widget.component.html

@@ -4,7 +4,7 @@
   cssClass="infobox-color-widget d-flex flex-column"
 >
   <div class="loading-container mt-auto">
-    <div *ngIf="!(loading$ | async); else loading">
+    <div *ngIf="(loading$ | async) !== true; else loading">
       <div class="row align-items-end no-gutters">
         <div class="col">
           <div class="infobox-count" data-testing-id="responded-counter">

src/app/extensions/quoting/shared/quote-widget/quote-widget.component.spec.ts

@@ -22,6 +22,7 @@ describe('Quote Widget Component', () => {
   beforeEach(async () => {
     quotingFacade = mock(QuotingFacade);
     when(quotingFacade.quotingEntities$()).thenReturn(of([]));
+    when(quotingFacade.loading$).thenReturn(of(false));
 
     await TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],

src/app/pages/checkout-shipping/checkout-shipping-page.component.html

@@ -11,7 +11,7 @@ <h1>{{ 'checkout.shipping.pagetitle' | translate }}</h1>
     <div class="col-md-12 col-lg-8">
       <div class="section" *ngIf="shippingMethods$ | async as shippingMethods">
         <div *ngIf="shippingMethods.length; else noShippingMethods" class="shipping-methods">
-          <div *ngIf="!(basketError$ | async) && nextDisabled" role="alert" class="alert alert-danger">
+          <div *ngIf="(basketError$ | async) === undefined && nextDisabled" role="alert" class="alert alert-danger">
             {{ 'checkout.shipping_method.no_Selection.error' | translate }}
           </div>
           <h3>{{ 'checkout.shipping_method.selection.heading' | translate }}</h3>

src/app/pages/login/login-page.component.html

@@ -8,7 +8,7 @@ <h1>&nbsp;</h1>
   <div class="row" data-testing-id="account-login-page">
     <div class="col-lg-6">
       <div class="section">
-        <div *ngIf="!(isLoggedIn$ | async)">
+        <div *ngIf="(isLoggedIn$ | async) !== true">
           <h2>{{ 'account.login.signin.heading' | translate }}</h2>
           <p *ngIf="loginMessageKey$ | async as loginMessageKey" class="alert alert-info">
             {{ loginMessageKey | translate }}

src/app/pages/login/login-page.component.spec.ts

@@ -2,7 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
-import { instance, mock } from 'ts-mockito';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { AppFacade } from 'ish-core/facades/app.facade';
@@ -16,8 +17,12 @@ describe('Login Page Component', () => {
   let fixture: ComponentFixture<LoginPageComponent>;
   let component: LoginPageComponent;
   let element: HTMLElement;
+  let accountFacade: AccountFacade;
 
   beforeEach(async () => {
+    accountFacade = mock(AccountFacade);
+    when(accountFacade.isLoggedIn$).thenReturn(of(false));
+
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, TranslateModule.forRoot()],
       declarations: [
@@ -26,7 +31,7 @@ describe('Login Page Component', () => {
         MockComponent(LoadingComponent),
       ],
       providers: [
-        { provide: AccountFacade, useFactory: () => instance(mock(AccountFacade)) },
+        { provide: AccountFacade, useFactory: () => instance(accountFacade) },
         { provide: AppFacade, useFactory: () => instance(mock(AppFacade)) },
       ],
     }).compileComponents();

src/app/pages/product/product-page.component.html

@@ -15,5 +15,5 @@
 </div>
 
 <ng-container *ishFeature="'recently'"
-  ><ish-recently-viewed *ngIf="!(productLoading$ | async)"></ish-recently-viewed
+  ><ish-recently-viewed *ngIf="(productLoading$ | async) !== true"></ish-recently-viewed
 ></ng-container>

src/app/pages/product/product-page.component.spec.ts

@@ -29,6 +29,7 @@ describe('Product Page Component', () => {
   beforeEach(async () => {
     context = mock(ProductContextFacade);
     when(context.select('product')).thenReturn(EMPTY);
+    when(context.select('loading')).thenReturn(of(false));
 
     await TestBed.configureTestingModule({
       imports: [FeatureToggleModule.forTesting('recently')],

src/app/pages/search/search-page.component.html

@@ -10,6 +10,6 @@
 
   <!-- empty search result -->
   <ng-template #noResult>
-    <ish-search-no-result *ngIf="!(searchLoading$ | async)" [searchTerm]="searchTerm"></ish-search-no-result>
+    <ish-search-no-result *ngIf="(searchLoading$ | async) === false" [searchTerm]="searchTerm"></ish-search-no-result>
   </ng-template>
 </ng-container>

src/app/pages/search/search-page.component.spec.ts

@@ -21,6 +21,7 @@ describe('Search Page Component', () => {
   beforeEach(async () => {
     shoppingFacade = mock(ShoppingFacade);
     when(shoppingFacade.searchTerm$).thenReturn(of('search'));
+    when(shoppingFacade.searchLoading$).thenReturn(of(false));
 
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule],

src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html

@@ -33,7 +33,7 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
     data-testing-id="create-invoice-address-link"
     class="btn btn-link"
     (click)="showAddressForm()"
-    [attr.aria-expanded]="!(collapseChange | async)"
+    [attr.aria-expanded]="(collapseChange | async) === false"
     aria-controls="collapseBasic"
   >
     {{ 'checkout.create_address.link' | translate }}

src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html

@@ -1,7 +1,7 @@
 <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
 <ng-container *ngIf="shippingAddress$ | async as address">
   <div class="address-box">
-    <ng-container *ngIf="!(basketInvoiceAndShippingAddressEqual$ | async)">
+    <ng-container *ngIf="(basketInvoiceAndShippingAddressEqual$ | async) === false">
       <div class="float-right">
         <!-- edit shipping address -->
         <a
@@ -67,7 +67,7 @@ <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
     data-testing-id="create-shipping-address-link"
     class="btn btn-link"
     (click)="showAddressForm()"
-    [attr.aria-expanded]="!(collapseChange | async)"
+    [attr.aria-expanded]="(collapseChange | async) === false"
     aria-controls="collapseBasic"
   >
     {{ 'checkout.create_address.link' | translate }}

src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.spec.ts

@@ -29,6 +29,7 @@ describe('Basket Shipping Address Widget Component', () => {
     checkoutFacade = mock(CheckoutFacade);
     when(checkoutFacade.basket$).thenReturn(EMPTY);
     when(checkoutFacade.basketShippingAddress$).thenReturn(EMPTY);
+    when(checkoutFacade.basketInvoiceAndShippingAddressEqual$).thenReturn(of(false));
 
     accountFacade = mock(AccountFacade);
     when(accountFacade.addresses$()).thenReturn(EMPTY);

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.html

@@ -10,7 +10,7 @@
     data-testing-id="addToCartButton"
     (click)="addToBasket()"
   >
-    <ng-container *ngIf="!(displaySpinner$ | async); else spinning">
+    <ng-container *ngIf="(displaySpinner$ | async) !== true; else spinning">
       <!-- Add to Cart button -->
       <ng-container *ngIf="displayIcon; else defaultButton">
         <fa-icon [icon]="['fas', 'shopping-cart']"></fa-icon>

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
-import { of } from 'rxjs';
+import { EMPTY, of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
@@ -19,7 +19,7 @@ describe('Product Add To Basket Component', () => {
 
   beforeEach(async () => {
     const checkoutFacade = mock(CheckoutFacade);
-    when(checkoutFacade.basketLoading$).thenReturn(of(false));
+    when(checkoutFacade.basketLoading$).thenReturn(EMPTY);
 
     context = mock(ProductContextFacade);
     when(context.select('displayProperties', 'addToBasket')).thenReturn(of(true));

src/app/shared/components/product/product-list/product-list.component.html

@@ -1,6 +1,6 @@
 <div class="product-list row">
   <div *ngIf="!products.length">
-    <ng-container *ngIf="!(listingLoading$ | async)">
+    <ng-container *ngIf="(listingLoading$ | async) !== true">
       {{ 'search.noresult.filtered_products.message' | translate }}
     </ng-container>
   </div>