consolidate search components (#495)

* rename search to search-results

* move search components to the same folder

* layout and performance improvemetns for result row

* update vs code settings

.vscode/settings.json

@@ -1,6 +1,4 @@
 {
     "javascript.preferences.quoteStyle": "single",
-    "typescript.preferences.quoteStyle": "single",
-    "javascript.preferences.importModuleSpecifier": "relative",
-    "typescript.preferences.importModuleSpecifier": "relative"
+    "typescript.preferences.quoteStyle": "single"
 }

src/app/app.module.ts

@@ -47,12 +47,11 @@ import { LayoutComponent } from './components/layout/layout.component';
 import { SidenavViewsManagerDirective } from './components/layout/sidenav-views-manager.directive';
 import { HeaderComponent } from './components/header/header.component';
 import { CurrentUserComponent } from './components/current-user/current-user.component';
-import { SearchInputComponent } from './components/search-input/search-input.component';
-import { SearchInputControlComponent } from './components/search-input-control/search-input-control.component';
+import { SearchInputComponent } from './components/search/search-input/search-input.component';
+import { SearchInputControlComponent } from './components/search/search-input-control/search-input-control.component';
 import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { AboutComponent } from './components/about/about.component';
 import { LocationLinkComponent } from './components/location-link/location-link.component';
-import { CustomDlRowComponent } from './components/custom-dl-row/custom-dl-row.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { NodeCopyDirective } from './common/directives/node-copy.directive';
 import { NodeDeleteDirective } from './common/directives/node-delete.directive';
@@ -66,7 +65,7 @@ import { BrowsingFilesService } from './common/services/browsing-files.service';
 import { ContentManagementService } from './common/services/content-management.service';
 import { NodeActionsService } from './common/services/node-actions.service';
 import { NodePermissionService } from './common/services/node-permission.service';
-import { SearchComponent } from './components/search/search.component';
+import { SearchResultsComponent } from './components/search/search-results/search-results.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { ProfileResolver } from './common/services/profile.resolver';
 import { ExperimentalGuard } from './common/services/experimental-guard.service';
@@ -84,6 +83,7 @@ import { ContentApiService } from './services/content-api.service';
 import { ExtensionsModule } from './extensions.module';
 import { ExtensionService } from './extensions/extension.service';
 import { CoreExtensionsModule } from './extensions/core.extensions';
+import { SearchResultsRowComponent } from './components/search/search-results-row/search-results-row.component';
 
 @NgModule({
     imports: [
@@ -122,7 +122,7 @@ import { CoreExtensionsModule } from './extensions/core.extensions';
         PreviewComponent,
         AboutComponent,
         LocationLinkComponent,
-        CustomDlRowComponent,
+        SearchResultsRowComponent,
         NodeCopyDirective,
         NodeDeleteDirective,
         NodeMoveDirective,
@@ -131,7 +131,7 @@ import { CoreExtensionsModule } from './extensions/core.extensions';
         NodeUnshareDirective,
         NodeVersionsDirective,
         NodeVersionsDialogComponent,
-        SearchComponent,
+        SearchResultsComponent,
         SettingsComponent,
         InfoDrawerComponent,
         SharedLinkViewComponent,

src/app/app.routes.ts

@@ -40,7 +40,7 @@ import { AboutComponent } from './components/about/about.component';
 import { LoginComponent } from './components/login/login.component';
 import { PreviewComponent } from './components/preview/preview.component';
 import { GenericErrorComponent } from './components/generic-error/generic-error.component';
-import { SearchComponent } from './components/search/search.component';
+import { SearchResultsComponent } from './components/search/search-results/search-results.component';
 import { SettingsComponent } from './components/settings/settings.component';
 
 import { ProfileResolver } from './common/services/profile.resolver';
@@ -243,7 +243,7 @@ export const APP_ROUTES: Routes = [
                 children: [
                     {
                         path: '',
-                        component: SearchComponent,
+                        component: SearchResultsComponent,
                         data: {
                             title: 'APP.BROWSE.SEARCH.TITLE'
                         }

src/app/components/custom-dl-row/custom-dl-row.component.html

@@ -1,21 +0,0 @@
-<div class="app-custom-search-row">
-    <div class="line">
-        <span *ngIf="isFile" (click)="showPreview()" class="link"> {{ name }} </span>
-
-        <span *ngIf="!isFile" class="bold"> {{ name }} </span>
-
-        <span *ngIf="hasTitle"> ( {{ title }} ) </span>
-    </div>
-
-    <div *ngIf="hasDescription" class="line">  {{ description }} </div>
-
-    <div class="line">
-        {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.MODIFIED' | translate }}: {{ modifiedAt | date:'medium' }}
-
-        by <span> {{ user }}  </span>
-
-        <span *ngIf="size">| {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.SIZE' | translate }}: {{ size | adfFileSize }} </span>
-    </div>
-
-    <div class="line">{{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.LOCATION' | translate }}: <aca-location-link [context]="context"></aca-location-link></div>
-</div>

src/app/components/search/search-input/search-input.component.spec.ts

@@ -27,9 +27,9 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed, async, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 
 import { SearchInputComponent } from './search-input.component';
-import { AppTestingModule } from '../../testing/app-testing.module';
+import { AppTestingModule } from '../../../testing/app-testing.module';
 import { Actions, ofType } from '@ngrx/effects';
-import { ViewNodeAction, VIEW_NODE, NAVIGATE_FOLDER, NavigateToFolder } from '../../store/actions';
+import { ViewNodeAction, VIEW_NODE, NAVIGATE_FOLDER, NavigateToFolder } from '../../../store/actions';
 import { map } from 'rxjs/operators';
 
 describe('SearchInputComponent', () => {

src/app/components/search/search-input/search-input.component.ts

@@ -31,8 +31,8 @@ import {
 import { MinimalNodeEntity } from 'alfresco-js-api';
 import { SearchInputControlComponent } from '../search-input-control/search-input-control.component';
 import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states/app.state';
-import { SearchByTermAction, ViewNodeAction, NavigateToFolder } from '../../store/actions';
+import { AppStore } from '../../../store/states/app.state';
+import { SearchByTermAction, ViewNodeAction, NavigateToFolder } from '../../../store/actions';
 
 @Component({
     selector: 'aca-search-input',

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

@@ -0,0 +1,17 @@
+<div class="line">
+    <span *ngIf="isFile" (click)="showPreview()" class="link"> {{ name }} </span>
+    <span *ngIf="!isFile" class="bold"> {{ name }} </span>
+    <span *ngIf="hasTitle"> ( {{ title }} ) </span>
+</div>
+
+<div *ngIf="hasDescription" class="line">  {{ description }} </div>
+
+<div class="line">
+    {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.MODIFIED' | translate }}: {{ modifiedAt | date:'medium' }}
+
+    by <span> {{ user }}  </span>
+
+    <span *ngIf="size">| {{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.SIZE' | translate }}: {{ size | adfFileSize }} </span>
+</div>
+
+<div class="line">{{ 'APP.BROWSE.SEARCH.CUSTOM_ROW.LOCATION' | translate }}: <aca-location-link [context]="context"></aca-location-link></div>

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

@@ -1,6 +1,6 @@
 @import 'mixins';
 
-.app-custom-search-row {
+.aca-search-results-row {
     @include flex-column;
 }
 

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

@@ -23,22 +23,24 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-import { ViewNodeAction } from '../../store/actions/viewer.actions';
+import { ViewNodeAction } from '../../../store/actions/viewer.actions';
 import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states/app.state';
+import { AppStore } from '../../../store/states/app.state';
 
 @Component({
-    selector: 'app-custom-dl-row',
-    templateUrl: './custom-dl-row.component.html',
-    styleUrls: ['./custom-dl-row.component.scss']
+    selector: 'aca-search-results-row',
+    templateUrl: './search-results-row.component.html',
+    styleUrls: ['./search-results-row.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'aca-search-results-row' }
 })
-export class CustomDlRowComponent implements OnInit {
+export class SearchResultsRowComponent implements OnInit {
     private node: MinimalNodeEntryEntity;
 
-    @Input()
-    context: any;
+    @Input() context: any;
 
     constructor(private store: Store<AppStore>) {}
 
@@ -46,7 +48,6 @@ export class CustomDlRowComponent implements OnInit {
         this.node = this.context.row.node.entry;
     }
 
-
     get name() {
         return this.getValue('name');
     }
@@ -88,12 +89,14 @@ export class CustomDlRowComponent implements OnInit {
     }
 
     showPreview() {
-        const { id, name} = this.node;
+        const { id, name } = this.node;
 
-        this.store.dispatch(new ViewNodeAction({
-            id,
-            name
-        }));
+        this.store.dispatch(
+            new ViewNodeAction({
+                id,
+                name
+            })
+        );
     }
 
     private getValue(path) {
@@ -103,6 +106,6 @@ export class CustomDlRowComponent implements OnInit {
             .replace('[', '.')
             .replace(']', '')
             .split('.')
-            .reduce((acc, part) => acc ? acc[part] : null, this.node);
+            .reduce((acc, part) => (acc ? acc[part] : null), this.node);
     }
 }

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

@@ -114,7 +114,7 @@
                                 key
                                 type="text">
                                     <ng-template let-context>
-                                        <app-custom-dl-row [context]="context"></app-custom-dl-row>
+                                        <aca-search-results-row [context]="context"></aca-search-results-row>
                                     </ng-template>
                             </data-column>
 

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

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SearchComponent } from './search.component';
+import { SearchResultsComponent } from './search-results.component';
 
 describe('SearchComponent', () => {
-  let component: SearchComponent;
-  let fixture: ComponentFixture<SearchComponent>;
+  let component: SearchResultsComponent;
+  let fixture: ComponentFixture<SearchResultsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SearchComponent ]
+      declarations: [ SearchResultsComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SearchComponent);
+    fixture = TestBed.createComponent(SearchResultsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -27,19 +27,19 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { NodePaging, Pagination, MinimalNodeEntity } from 'alfresco-js-api';
 import { ActivatedRoute, Params } from '@angular/router';
 import { SearchQueryBuilderService, SearchComponent as AdfSearchComponent, NodePermissionService } from '@alfresco/adf-content-services';
-import { PageComponent } from '../page.component';
+import { PageComponent } from '../../page.component';
 import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states/app.state';
-import { NavigateToFolder } from '../../store/actions';
-import { ExtensionService } from '../../extensions/extension.service';
+import { AppStore } from '../../../store/states/app.state';
+import { NavigateToFolder } from '../../../store/actions';
+import { ExtensionService } from '../../../extensions/extension.service';
 
 @Component({
-  selector: 'app-search',
-  templateUrl: './search.component.html',
-  styleUrls: ['./search.component.scss'],
+  selector: 'aca-search-results',
+  templateUrl: './search-results.component.html',
+  styleUrls: ['./search-results.component.scss'],
   providers: [SearchQueryBuilderService]
 })
-export class SearchComponent extends PageComponent implements OnInit {
+export class SearchResultsComponent extends PageComponent implements OnInit {
 
     @ViewChild('search')
     search: AdfSearchComponent;

src/app/ui/application.scss

@@ -19,7 +19,7 @@ app-root,
 app-about,
 app-layout,
 adf-layout-container,
-app-search,
+aca-search-results,
 ng-component {
     @include flex-column;
 }

src/app/ui/custom-theme.scss

@@ -4,7 +4,7 @@
 @import '../components/sidenav/sidenav.component.theme';
 @import '../components/about/about.component.theme';
 @import '../components/generic-error/generic-error.component.theme';
-@import '../components/search-input/search-input.component.theme';
+@import '../components/search/search-input/search-input.component.theme';
 @import '../components/settings/settings.component.theme';
 @import '../components/current-user/current-user.component.theme';
 @import '../components/header/header.component.theme';