[ACS-5088] Replaced function calls in templates with variable referen…

…ces (#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
Alfresco · Jun 6, 2023 · d125fe5 · d125fe5
1 parent e9dce5f
commit d125fe5
Show file tree

Hide file tree

Showing 52 changed files with 313 additions and 296 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -315,10 +315,12 @@
         "*.html"
       ],
       "extends": ["plugin:@nrwl/nx/angular-template", "plugin:@angular-eslint/template/accessibility"],
+      "parser": "@angular-eslint/template-parser",
       "rules": {
         "@angular-eslint/template/no-negated-async": "off",
         "@angular-eslint/template/no-positive-tabindex": "error",
-        "@angular-eslint/template/eqeqeq": "error"
+        "@angular-eslint/template/eqeqeq": "error",
+        "@angular-eslint/template/no-call-expression": "warn"
       }
     },
     {

diff --git a/projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.html b/projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.html
@@ -1,8 +1,8 @@
-<ng-container *ngIf="selection$ | async as selection">
+<ng-container *ngIf="selectionState">
   <ng-container *ngIf="!data.iconButton">
-    <button mat-menu-item data-automation-id="share-action-button" (click)="editSharedNode(selection, '.adf-context-menu-source')">
+    <button mat-menu-item data-automation-id="share-action-button" (click)="editSharedNode(selectionState, '.adf-context-menu-source')">
       <mat-icon>link</mat-icon>
-      <ng-container *ngIf="isShared(selection); else not_shared">
+      <ng-container *ngIf="isShared; else not_shared">
         <span>{{ 'APP.ACTIONS.SHARE_EDIT' | translate }}</span>
       </ng-container>
     </button>
@@ -12,9 +12,9 @@
     <button
       mat-icon-button
       data-automation-id="share-action-button"
-      (click)="editSharedNode(selection, '#share-action-button')"
-      [attr.aria-label]="getLabel(selection) | translate"
-      [attr.title]="getLabel(selection) | translate"
+      (click)="editSharedNode(selectionState, '#share-action-button')"
+      [attr.aria-label]="selectionLabel | translate"
+      [attr.title]="selectionLabel | translate"
       id="share-action-button"
     >
       <mat-icon>link</mat-icon>

diff --git a/projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.spec.ts b/projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.spec.ts
@@ -56,14 +56,14 @@ describe('ToggleSharedComponent', () => {
   it('should return false when entry is not shared', () => {
     component.ngOnInit();
 
-    expect(component.isShared({ first: { entry } })).toBe(false);
+    expect(component.isShared).toBe(false);
   });
 
   it('should return true when entry is shared', () => {
     entry.properties['qshare:sharedId'] = 'some-id';
     component.ngOnInit();
 
-    expect(component.isShared({ first: { entry } })).toBe(true);
+    expect(component.isShared).toBe(true);
   });
 
   it('should dispatch `SHARE_NODE` action on share', () => {
@@ -74,15 +74,15 @@ describe('ToggleSharedComponent', () => {
 
   it('should get action label for unshared file', () => {
     component.ngOnInit();
-    const label = component.getLabel({ first: { entry } });
+    const label = component.selectionLabel;
 
     expect(label).toBe('APP.ACTIONS.SHARE');
   });
 
   it('should get action label for shared file', () => {
     entry.properties['qshare:sharedId'] = 'some-id';
     component.ngOnInit();
-    const label = component.getLabel({ first: { entry } });
+    const label = component.selectionLabel;
 
     expect(label).toBe('APP.ACTIONS.SHARE_EDIT');
   });

diff --git a/projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.ts b/projects/aca-content/src/lib/components/common/toggle-shared/toggle-shared.component.ts
@@ -22,8 +22,8 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, Input } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { SelectionState } from '@alfresco/adf-extensions';
 import { AppStore, ShareNodeAction, getAppSelection } from '@alfresco/aca-shared/store';
@@ -32,45 +32,51 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   standalone: true,
   imports: [CommonModule, MatMenuModule, MatIconModule, TranslateModule, MatButtonModule],
   selector: 'app-toggle-shared',
   templateUrl: './toggle-shared.component.html'
 })
-export class ToggleSharedComponent implements OnInit {
+export class ToggleSharedComponent implements OnInit, OnDestroy {
   @Input()
   data: {
     iconButton?: string;
   };
 
   selection$: Observable<SelectionState>;
+  selectionState: SelectionState;
+  selectionLabel = '';
+  isShared = false;
+
+  onDestroy$ = new Subject<void>();
 
   constructor(private store: Store<AppStore>) {}
 
   ngOnInit() {
     this.selection$ = this.store.select(getAppSelection);
-  }
+    this.selection$.pipe(takeUntil(this.onDestroy$)).subscribe((selectionState) => {
+      this.selectionState = selectionState;
 
-  isShared(selection: SelectionState) {
-    // workaround for shared files
-    if (selection.first && selection.first.entry && (selection.first.entry as any).sharedByUser) {
-      return true;
-    }
+      this.isShared =
+        (this.selectionState.first && this.selectionState.first.entry && (this.selectionState.first.entry as any).sharedByUser) ||
+        !!this.selectionState?.first?.entry?.properties?.['qshare:sharedId'];
 
-    return selection.first && selection.first.entry && selection.first.entry.properties && !!selection.first.entry.properties['qshare:sharedId'];
+      this.selectionLabel = this.isShared ? 'APP.ACTIONS.SHARE_EDIT' : 'APP.ACTIONS.SHARE';
+    });
   }
 
+  ngOnDestroy(): void {
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+  }
   editSharedNode(selection: SelectionState, focusedElementOnCloseSelector: string) {
     this.store.dispatch(
       new ShareNodeAction(selection.first, {
         focusedElementOnCloseSelector
       })
     );
   }
-
-  getLabel(selection: SelectionState): string {
-    return this.isShared(selection) ? 'APP.ACTIONS.SHARE_EDIT' : 'APP.ACTIONS.SHARE';
-  }
 }
diff --git a/.../aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.ts b/.../aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.ts
@@ -46,12 +46,17 @@ import { TranslateModule } from '@ngx-translate/core';
 export class CustomNameColumnComponent extends NameColumnComponent implements OnInit, OnDestroy {
   private onDestroy$$ = new Subject<boolean>();
 
+  isFile: boolean;
+  isFileWriteLocked: boolean;
+
   constructor(element: ElementRef, private cd: ChangeDetectorRef, private actions$: Actions, private nodesService: NodesApiService) {
     super(element, nodesService);
   }
 
   ngOnInit() {
     this.updateValue();
+    this.isFile = this.node?.entry && !this.node.entry.isFolder;
+    this.isFileWriteLocked = isLocked(this.node);
 
     this.nodesService.nodeUpdated.pipe(takeUntil(this.onDestroy$$)).subscribe((node: any) => {
       const row = this.context.row;
@@ -65,6 +70,9 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
           row.node = { entry };
           this.updateValue();
         }
+
+        this.isFile = this.node?.entry && !this.node.entry.isFolder;
+        this.isFileWriteLocked = isLocked(this.node);
       }
     });
 
@@ -75,6 +83,7 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
         takeUntil(this.onDestroy$$)
       )
       .subscribe(() => {
+        this.isFileWriteLocked = isLocked(this.node);
         this.cd.detectChanges();
       });
   }
@@ -90,12 +99,4 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
     this.onDestroy$$.next(true);
     this.onDestroy$$.complete();
   }
-
-  get isFile(): boolean {
-    return this.node && this.node.entry && !this.node.entry.isFolder;
-  }
-
-  get isFileWriteLocked(): boolean {
-    return isLocked(this.node);
-  }
 }
diff --git a/.../aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.ts b/.../aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.ts
@@ -22,31 +22,32 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ShareDataRow, TagModule } from '@alfresco/adf-content-services';
-import { ChangeDetectorRef, Component, Input, ViewEncapsulation } from '@angular/core';
+import { TagModule } from '@alfresco/adf-content-services';
+import { ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 
 @Component({
   standalone: true,
   imports: [TagModule],
   selector: 'aca-tags-column',
   template: `
-    <adf-tag-node-list [showDelete]="false" [limitTagsDisplayed]="true" [nodeId]="getNodeId(context.row)" (results)="onTagsLoaded()">
-    </adf-tag-node-list>
+    <adf-tag-node-list [showDelete]="false" [limitTagsDisplayed]="true" [nodeId]="nodeId" (results)="onTagsLoaded()"> </adf-tag-node-list>
   `,
   styleUrls: ['./tags-column.component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: {
     class: 'adf-datatable-content-cell aca-tags-name-column'
   }
 })
-export class TagsColumnComponent {
+export class TagsColumnComponent implements OnInit {
   @Input()
   context: any;
 
+  nodeId: string;
+
   constructor(private cd: ChangeDetectorRef) {}
 
-  getNodeId(row: ShareDataRow): string {
-    return row.id;
+  ngOnInit(): void {
+    this.nodeId = this.context?.row?.id;
   }
 
   onTagsLoaded(): void {

diff --git a/projects/aca-content/src/lib/components/files/files.component.html b/projects/aca-content/src/lib/components/files/files.component.html
@@ -72,7 +72,7 @@
             </ng-container>
           </data-columns>
 
-          <adf-custom-empty-content-template *ngIf="isFilterHeaderActive()">
+          <adf-custom-empty-content-template *ngIf="isFilterHeaderActive">
             <ng-container>
               <div class="empty-search__block" aria-live="polite">
                 <p class="empty-search__text">

diff --git a/projects/aca-content/src/lib/components/files/files.component.ts b/projects/aca-content/src/lib/components/files/files.component.ts
@@ -46,6 +46,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
   private nodePath: PathElement[];
 
   columns: DocumentListPresetRef[] = [];
+  isFilterHeaderActive = false;
 
   constructor(private route: ActivatedRoute, private contentApi: ContentApiService, private nodeActionsService: NodeActionsService) {
     super();
@@ -306,9 +307,11 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
   onFilterSelected(activeFilters: FilterSearch[]) {
     if (activeFilters.length) {
       this.showHeader = ShowHeaderMode.Always;
+      this.isFilterHeaderActive = true;
       this.navigateToFilter(activeFilters);
     } else {
       this.router.navigate(['.'], { relativeTo: this.route });
+      this.isFilterHeaderActive = false;
       this.showHeader = ShowHeaderMode.Data;
       this.onAllFilterCleared();
     }
@@ -329,10 +332,6 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
     this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
   }
 
-  isFilterHeaderActive(): boolean {
-    return this.showHeader === ShowHeaderMode.Always;
-  }
-
   onError() {
     this.isValidPath = false;
   }

diff --git a/...ts/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.spec.ts b/...ts/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.spec.ts
@@ -83,22 +83,26 @@ describe('CommentsTabComponent', () => {
       expect(component.canUpdateNode).toBe(false);
     });
 
-    it('should check [update] permission if node selected is a not locked file', () => {
+    it('should check [update] permission if node selected is a not locked file', async () => {
       component.node = {
         id: 'test-node-id',
         isFile: true,
         isFolder: false
       } as Node;
+      fixture.detectChanges();
+      await fixture.whenStable();
       expect(component.canUpdateNode).toBe(true);
       expect(checked).toContain('update');
     });
 
-    it('should check [update] permission if node selected is a folder', () => {
+    it('should check [update] permission if node selected is a folder', async () => {
       component.node = {
         id: 'test-node-id',
         isFile: false,
         isFolder: true
       } as Node;
+      fixture.detectChanges();
+      await fixture.whenStable();
       expect(component.canUpdateNode).toBe(true);
       expect(checked).toContain('update');
     });

diff --git a/projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts b/projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts
@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';
 import { NodePermissionService, isLocked } from '@alfresco/aca-shared';
 import { MatCardModule } from '@angular/material/card';
@@ -34,20 +34,20 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
   selector: 'app-comments-tab',
   template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`
 })
-export class CommentsTabComponent {
+export class CommentsTabComponent implements OnInit {
   @Input()
   node: MinimalNodeEntryEntity;
 
+  canUpdateNode = false;
+
   constructor(private permission: NodePermissionService) {}
 
-  get canUpdateNode(): boolean {
+  ngOnInit(): void {
     if (!this.node) {
-      return false;
+      this.canUpdateNode = false;
     }
-
     if (this.node.isFolder || (this.node.isFile && !isLocked({ entry: this.node }))) {
-      return this.permission.check(this.node, ['update']);
+      this.canUpdateNode = this.permission.check(this.node, ['update']);
     }
-    return false;
   }
 }
diff --git a/.../src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html b/.../src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
@@ -47,7 +47,7 @@
             </span>
 
             <span class="mat-input-element">
-              {{ getVisibilityLabel(form.controls.visibility.value) | translate }}
+              {{ visibilityLabel | translate }}
             </span>
           </div>
         </div>

diff --git a/...nt/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts b/...nt/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
@@ -92,15 +92,12 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
   });
 
   matcher = new InstantErrorStateMatcher();
+  canUpdateLibrary = false;
+  visibilityLabel = '';
 
   onDestroy$: Subject<boolean> = new Subject<boolean>();
 
   constructor(private alfrescoApiService: AlfrescoApiService, protected store: Store<AppStore>) {}
-
-  get canUpdateLibrary() {
-    return this.node && this.node.entry && this.node.entry.role === 'SiteManager';
-  }
-
   getVisibilityLabel(value: string) {
     return this.libraryType.find((type) => type.value === value).label;
   }
@@ -136,6 +133,8 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
           this.libraryTitleExists = false;
         }
       });
+    this.canUpdateLibrary = this.node?.entry?.role === 'SiteManager';
+    this.visibilityLabel = this.libraryType.find((type) => type.value === this.form.controls['visibility'].value).label;
   }
 
   ngOnDestroy() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,7 @@ @@
                 </span>
                 <span class="mat-input-element">
-                  {{ getVisibilityLabel(form.controls.visibility.value) | translate }}
+                  {{ visibilityLabel | translate }}
                 </span>
               </div>
             </div>
@@ Expand Down @@