[ACS-5088] Replaced function calls in templates with variable references (#3227)

* [ACS-5088] Replaced method calls in templates with variables

* [ACS-5088] Replaced method calls in templates with variables

* [ACS-5088] Replaced method calls for *ngIf and *ngFor with variables - Batch 1 (WIP)

* [ACS-5088] Replaced method calls for *ngIf and *ngFor with variables - Batch 2 (WIP)

* [ACS-5088] Replaced instances of $any with cast pipe. Replaced other instances of method calls in templates with variables

* [ACS-5088] Resolved test cases

* [ACS-5088] Resolved test cases in aca-content library

* [ACS-5088] Resolved test cases in aca-shared library

* [ACS-5088] Resolved test cases in aca-folder-rules library

* [ACS-5088] Reverted usage of cast pipe to $any()

* [ACS-5088] Fixed incorrect revert

* [ACS-5088] Resolved code review findings - shortened expressions and made onDestroy subjects use void instead of boolean

* [ACS-5088] Resolved code review findings - changed parameter name in sort function

* [ACS-5088] Resolved code review findings - added 'void' type to onDestroy subjects

* [ACS-5088] Upgraded eslint version to 8.41.0. Added "@angular-eslint/template/no-call-expression" rule to prevent function calls in templates unless needed (reports warnings)

* [ACS-5088] Resolved typo in ToggleFavoriteComponent

projects/aca-content/src/lib/components/toolbar/document-display-mode/document-display-mode.component.spec.ts

@@ -27,22 +27,25 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreModule } from '@alfresco/adf-core';
 import { AppTestingModule } from '../../../testing/app-testing.module';
 import { of } from 'rxjs';
+import { provideMockStore } from '@ngrx/store/testing';
+import { Store } from '@ngrx/store';
 
 describe('DocumentDisplayModeComponent', () => {
-  let component: DocumentDisplayModeComponent;
   let fixture: ComponentFixture<DocumentDisplayModeComponent>;
+  let store: Store;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [CoreModule, AppTestingModule]
+      imports: [CoreModule, AppTestingModule],
+      providers: [provideMockStore()]
     });
 
     fixture = TestBed.createComponent(DocumentDisplayModeComponent);
-    component = fixture.componentInstance;
+    store = TestBed.inject(Store);
   });
 
   it('should show the list button when list', async () => {
-    component.displayMode$ = of('list');
+    spyOn(store, 'select').and.returnValue(of('list'));
     fixture.detectChanges();
     await fixture.whenStable();
 
@@ -50,11 +53,10 @@ describe('DocumentDisplayModeComponent', () => {
     expect(displayButton.title).toBe('APP.ACTIONS.LIST_MODE');
   });
 
-  it('should show the gallery button when list', async () => {
-    component.displayMode$ = of('gallery');
+  it('should show the gallery button when gallery', async () => {
+    spyOn(store, 'select').and.returnValue(of('gallery'));
     fixture.detectChanges();
     await fixture.whenStable();
-
     const displayButton: HTMLButtonElement = fixture.nativeElement.querySelector('#app-document-display-mode-button');
     expect(displayButton.title).toBe('APP.ACTIONS.GALLERY_MODE');
   });

projects/aca-content/src/lib/components/toolbar/document-display-mode/document-display-mode.component.ts

@@ -22,10 +22,11 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, ViewEncapsulation } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { AppStore, ToggleDocumentDisplayMode, getDocumentDisplayMode } from '@alfresco/aca-shared/store';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-document-display-mode',
@@ -33,8 +34,8 @@ import { AppStore, ToggleDocumentDisplayMode, getDocumentDisplayMode } from '@al
     <ng-container *ngIf="displayMode$ | async as displayMode">
       <button
         id="app-document-display-mode-button"
-        [attr.title]="getTitle(displayMode) | translate"
-        [attr.aria-label]="getTitle(displayMode) | translate"
+        [attr.title]="displayModeTitle | translate"
+        [attr.aria-label]="displayModeTitle | translate"
         mat-icon-button
         color="primary"
         (click)="onClick()"
@@ -47,15 +48,24 @@ import { AppStore, ToggleDocumentDisplayMode, getDocumentDisplayMode } from '@al
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-document-display-mode' }
 })
-export class DocumentDisplayModeComponent {
+export class DocumentDisplayModeComponent implements OnInit, OnDestroy {
   displayMode$: Observable<string>;
+  displayModeTitle: string;
 
-  constructor(private store: Store<AppStore>) {
-    this.displayMode$ = store.select(getDocumentDisplayMode);
+  onDestroy$ = new Subject<void>();
+
+  constructor(private store: Store<AppStore>) {}
+
+  ngOnInit(): void {
+    this.displayMode$ = this.store.select(getDocumentDisplayMode);
+    this.displayMode$.pipe(takeUntil(this.onDestroy$)).subscribe((displayMode) => {
+      this.displayModeTitle = displayMode === 'list' ? 'APP.ACTIONS.LIST_MODE' : 'APP.ACTIONS.GALLERY_MODE';
+    });
   }
 
-  getTitle(displayMode: string): string {
-    return displayMode === 'list' ? 'APP.ACTIONS.LIST_MODE' : 'APP.ACTIONS.GALLERY_MODE';
+  ngOnDestroy(): void {
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
   }
 
   onClick() {

projects/aca-content/src/lib/components/toolbar/toggle-edit-offline/toggle-edit-offline.component.ts

@@ -32,11 +32,7 @@ import { AlfrescoApiService } from '@alfresco/adf-core';
 @Component({
   selector: 'app-toggle-edit-offline',
   template: `
-    <button
-      mat-menu-item
-      [attr.title]="(isNodeLocked ? 'APP.ACTIONS.EDIT_OFFLINE_CANCEL' : 'APP.ACTIONS.EDIT_OFFLINE') | translate"
-      (click)="onClick()"
-    >
+    <button mat-menu-item [attr.title]="nodeTitle | translate" (click)="onClick()">
       <ng-container *ngIf="isNodeLocked">
         <mat-icon>cancel</mat-icon>
         <span>{{ 'APP.ACTIONS.EDIT_OFFLINE_CANCEL' | translate }}</span>
@@ -54,6 +50,8 @@ import { AlfrescoApiService } from '@alfresco/adf-core';
 export class ToggleEditOfflineComponent implements OnInit {
   private nodesApi: NodesApi;
   selection: MinimalNodeEntity;
+  nodeTitle = '';
+  isNodeLocked = false;
 
   constructor(private store: Store<AppStore>, private alfrescoApiService: AlfrescoApiService) {
     this.nodesApi = new NodesApi(this.alfrescoApiService.getInstance());
@@ -62,13 +60,11 @@ export class ToggleEditOfflineComponent implements OnInit {
   ngOnInit() {
     this.store.select(getAppSelection).subscribe(({ file }) => {
       this.selection = file;
+      this.isNodeLocked = this.selection && isLocked(this.selection);
+      this.nodeTitle = this.isNodeLocked ? 'APP.ACTIONS.EDIT_OFFLINE_CANCEL' : 'APP.ACTIONS.EDIT_OFFLINE';
     });
   }
 
-  get isNodeLocked(): boolean {
-    return !!(this.selection && isLocked(this.selection));
-  }
-
   async onClick() {
     await this.toggleLock(this.selection);
   }