[ACA-2314] display "locked by" in search results (#1732)

* display "locked by" in search results

* Trigger build

projects/aca-shared/src/lib/components/locked-by/locked-by.component.scss

@@ -1,7 +1,6 @@
 .aca-locked-by {
   display: flex;
   align-items: center;
-  padding: 0 10px;
   color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
 
   .locked_by--icon {
@@ -10,6 +9,7 @@
     height: 14px;
   }
 
+  .locked_by--label,
   .locked_by--name {
     font-size: 12px;
     padding: 0 2px;

projects/aca-shared/src/lib/components/locked-by/locked-by.component.ts

@@ -23,15 +23,15 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-
+import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 import { NodeEntry } from '@alfresco/js-api';
 
 @Component({
   selector: 'aca-locked-by',
   template: `
     <mat-icon class="locked_by--icon">lock</mat-icon>
-    <span class="locked_by--name">{{ writeLockedBy() }}</span>
+    <span class="locked_by--label">{{ 'APP.LOCKED_BY' | translate }}</span>
+    <span class="locked_by--name">{{ text }}</span>
   `,
   styleUrls: ['./locked-by.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,19 +40,11 @@ import { NodeEntry } from '@alfresco/js-api';
     class: 'aca-locked-by'
   }
 })
-export class LockedByComponent implements OnInit {
+export class LockedByComponent {
   @Input()
-  context: any;
-
   node: NodeEntry;
 
-  constructor() {}
-
-  ngOnInit() {
-    this.node = this.context.row.node;
-  }
-
-  writeLockedBy() {
+  get text(): string {
     return (
       this.node && this.node.entry.properties && this.node.entry.properties['cm:lockOwner'] && this.node.entry.properties['cm:lockOwner'].displayName
     );

projects/aca-shared/src/lib/components/locked-by/locked-by.module.ts

@@ -27,9 +27,10 @@ import { NgModule } from '@angular/core';
 import { LockedByComponent } from './locked-by.component';
 import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
   declarations: [LockedByComponent],
   exports: [LockedByComponent]
 })

src/app/components/dl-custom-components/name-column/name-column.component.html

@@ -1,19 +1,14 @@
 <div
   class="aca-custom-name-column"
   [ngClass]="{
-    'aca-name-column-container': isFile() && isFileWriteLocked()
+    'aca-name-column-container': isFile && isFileWriteLocked
   }"
 >
   <span
     role="link"
     [attr.aria-label]="
-      (isFile()
-        ? 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FILE_LINK_ARIA_LABEL'
-        : 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FOLDER_LINK_ARIA_LABEL')
-        | translate
-          : {
-              name: displayText$ | async
-            }
+      (isFile ? 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FILE_LINK_ARIA_LABEL' : 'CUSTOM_NAME_COLUMN.ACCESSIBILITY.FOLDER_LINK_ARIA_LABEL')
+        | translate: { name: displayText$ | async }
     "
     class="adf-datatable-cell-value"
     title="{{ node | adfNodeNameTooltip }}"
@@ -23,7 +18,7 @@
     {{ displayText$ | async }}
   </span>
 
-  <ng-container *ngIf="isFile() && isFileWriteLocked()">
-    <aca-locked-by [context]="context"></aca-locked-by>
+  <ng-container *ngIf="isFile && isFileWriteLocked">
+    <aca-locked-by [node]="context.row.node"></aca-locked-by>
   </ng-container>
 </div>

src/app/components/dl-custom-components/name-column/name-column.component.ts

@@ -91,11 +91,11 @@ export class CustomNameColumnComponent extends NameColumnComponent implements On
     this.onDestroy$$.complete();
   }
 
-  isFile(): boolean {
+  get isFile(): boolean {
     return this.node && this.node.entry && !this.node.entry.isFolder;
   }
 
-  isFileWriteLocked(): boolean {
+  get isFileWriteLocked(): boolean {
     return isLocked(this.node);
   }
 }

src/app/components/search/search-results-row/search-results-row.component.html

@@ -1,22 +1,8 @@
 <div class="line">
-  <span
-    tabindex="0"
-    role="link"
-    *ngIf="isFile"
-    (click)="showPreview($event)"
-    (keyup.enter)="showPreview($event)"
-    class="link"
-  >
+  <span tabindex="0" role="link" *ngIf="isFile" (click)="showPreview($event)" (keyup.enter)="showPreview($event)" class="link">
     {{ name$ | async }}
   </span>
-  <span
-    tabindex="0"
-    role="link"
-    *ngIf="!isFile"
-    (click)="navigate($event)"
-    (keyup.enter)="navigate($event)"
-    class="bold link"
-  >
+  <span tabindex="0" role="link" *ngIf="!isFile" (click)="navigate($event)" (keyup.enter)="navigate($event)" class="bold link">
     {{ name$ | async }}
   </span>
   <span>{{ title$ | async }}</span>
@@ -35,6 +21,10 @@
   </span>
 </div>
 
+<div class="line" *ngIf="isFile && isFileWriteLocked">
+  <aca-locked-by [node]="context.row.node"></aca-locked-by>
+</div>
+
 <div class="line">
   {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.LOCATION' | translate }}:
   <aca-location-link [context]="context"></aca-location-link>

src/app/components/search/search-results-row/search-results-row.component.ts

@@ -31,6 +31,7 @@ import { BehaviorSubject, Subject } from 'rxjs';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { takeUntil } from 'rxjs/operators';
 import { Router } from '@angular/router';
+import { isLocked } from '@alfresco/aca-shared';
 
 @Component({
   selector: 'aca-search-results-row',
@@ -55,7 +56,7 @@ export class SearchResultsRowComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.updateValues();
 
-    this.alfrescoApiService.nodeUpdated.pipe(takeUntil(this.onDestroy$)).subscribe((node: any) => {
+    this.alfrescoApiService.nodeUpdated.pipe(takeUntil(this.onDestroy$)).subscribe((node) => {
       const row = this.context.row;
       if (row) {
         const { entry } = row.node;
@@ -110,6 +111,10 @@ export class SearchResultsRowComponent implements OnInit, OnDestroy {
     return this.node.entry.isFile;
   }
 
+  get isFileWriteLocked(): boolean {
+    return isLocked(this.node);
+  }
+
   showPreview(event: MouseEvent) {
     event.stopPropagation();
     this.store.dispatch(new ViewNodeAction(this.node.entry.id, { location: this.router.url }));

src/app/components/search/search-results.module.ts

@@ -27,6 +27,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
 import { ContentModule } from '@alfresco/adf-content-services';
+import { LockedByModule } from '@alfresco/aca-shared';
 import { SearchResultsComponent } from './search-results/search-results.component';
 import { SearchResultsRowComponent } from './search-results-row/search-results-row.component';
 import { SearchLibrariesResultsComponent } from './search-libraries-results/search-libraries-results.component';
@@ -47,7 +48,8 @@ import { ContextMenuModule } from '../context-menu/context-menu.module';
     AppToolbarModule,
     DirectivesModule,
     AppLayoutModule,
-    ContextMenuModule
+    ContextMenuModule,
+    LockedByModule
   ],
   declarations: [SearchResultsComponent, SearchLibrariesResultsComponent, SearchResultsRowComponent],
   exports: [SearchResultsComponent, SearchLibrariesResultsComponent, SearchResultsRowComponent]

src/assets/i18n/en.json

@@ -47,6 +47,7 @@
             "RESET": "Reset",
             "APPLY": "Apply"
         },
+        "LOCKED_BY": "Locked by: ",
         "PREVIEW": {
             "TITLE": "Preview"
         },