[ADF-4056][ADF-4060][ADF-3930] Content Node Selector fix (#4293)

* remove target when search

* content panel component infinite pagiantion and dropdown integration

* fix insight karma
This commit is contained in:
Eugenio Romano 2019-02-11 11:14:05 +00:00 committed by GitHub
parent 3263659ac2
commit cd4fb8d06d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 116 additions and 35 deletions

View File

@ -65,6 +65,7 @@
[contextMenuActions]="false"
[contentActions]="false"
[allowDropFiles]="false"
[sorting]="'server'"
[where]="where"
(folderChange)="onFolderChange()"
(ready)="onFolderLoaded()"
@ -89,7 +90,7 @@
</adf-document-list>
<adf-infinite-pagination
[target]="documentList"
[target]="target"
[loading]="loadingSearchResults"
(loadMore)="getNextPageOfSearch($event)"
data-automation-id="content-node-selector-search-pagination">

View File

@ -84,6 +84,7 @@
height: 200px;
overflow: auto;
border: 1px solid mat-color($foreground, base, 0.07);
padding: 1px;
.adf-highlight {
color: mat-color($primary);

View File

@ -116,6 +116,10 @@ describe('ContentNodeSelectorComponent', () => {
fixture.detectChanges();
});
it('should the document list use the server ordering', () => {
expect(component.documentList.sorting).toBe('server');
});
it('should trigger the select event when selection has been made', (done) => {
const expectedNode = <Node> {};
component.select.subscribe((nodes) => {
@ -350,6 +354,13 @@ describe('ContentNodeSelectorComponent', () => {
const expectedDefaultFolderNode = <NodeEntry> { entry: { path: { elements: [] } } };
spyOn(documentListService, 'getFolderNode').and.returnValue(of(expectedDefaultFolderNode));
spyOn(documentListService, 'getFolder').and.returnValue(of({
list: {
pagination: {},
entries: [],
source: {}
}
}));
const sitesService = TestBed.get(SitesService);
spyOn(sitesService, 'getSites').and.returnValue(of({ list: { entries: [] } }));
@ -364,6 +375,8 @@ describe('ContentNodeSelectorComponent', () => {
});
component.currentFolderId = 'cat-girl-nuku-nuku';
component.documentList.ngOnInit();
fixture.detectChanges();
});
@ -775,6 +788,44 @@ describe('ContentNodeSelectorComponent', () => {
const paginationLoading = fixture.debugElement.query(spinnerSelector);
expect(paginationLoading).not.toBeNull();
}));
it('Should infinite pagination target be null when we use it for search ', fakeAsync(() => {
component.showingSearchResults = true;
typeToSearchBox('shenron');
tick(debounceSearch);
fixture.detectChanges();
tick(debounceSearch);
expect(component.target).toBeNull();
}));
it('Should infinite pagination target be present when search finish', fakeAsync(() => {
component.showingSearchResults = true;
typeToSearchBox('shenron');
tick(debounceSearch);
fixture.detectChanges();
typeToSearchBox('');
tick(debounceSearch);
fixture.detectChanges();
expect(component.target).not.toBeNull();
}));
it('Should infinite pagination target on init be the document list', fakeAsync(() => {
component.showingSearchResults = true;
expect(component.target).toEqual(component.documentList);
}));
});
});

View File

@ -21,7 +21,7 @@ import {
UserPreferencesService,
PaginationModel,
UserPreferenceValues,
InfinitePaginationComponent
InfinitePaginationComponent, PaginatedComponent
} from '@alfresco/adf-core';
import { FormControl } from '@angular/forms';
import { Node, NodePaging, Pagination, SiteEntry, SitePaging } from '@alfresco/js-api';
@ -163,6 +163,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
debounceSearch: number = 200;
searchInput: FormControl = new FormControl();
target: PaginatedComponent;
constructor(private contentNodeSelectorService: ContentNodeSelectorService,
private customResourcesService: CustomResourcesService,
private userPreferencesService: UserPreferencesService) {
@ -194,6 +196,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
}
ngOnInit() {
this.target = this.documentList;
this.folderIdToShow = this.currentFolderId;
this.breadcrumbTransform = this.breadcrumbTransform ? this.breadcrumbTransform : null;
@ -232,6 +235,7 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
siteChanged(chosenSite: SiteEntry): void {
this.siteId = chosenSite.entry.guid;
this.updateResults();
}
/**
@ -274,7 +278,6 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
this.searchTerm = '';
this.nodePaging = null;
this.pagination.maxItems = this.pageSize;
this.infinitePaginationComponent.reset();
this.chosenNode = null;
this.showingSearchResults = false;
}
@ -283,6 +286,8 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
* Update the result list depending on the criteria
*/
private updateResults(): void {
this.target = this.searchTerm.length > 0 ? null : this.documentList;
if (this.searchTerm.length === 0) {
this.clear();
} else {
@ -296,7 +301,9 @@ export class ContentNodeSelectorPanelComponent implements OnInit {
private startNewSearch(): void {
this.nodePaging = null;
this.pagination.maxItems = this.pageSize;
if (this.target) {
this.infinitePaginationComponent.reset();
}
this.chosenNode = null;
this.folderIdToShow = null;
this.querySearch();

View File

@ -22,10 +22,13 @@ module.exports = function (config) {
watched: false
},
{pattern: 'node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false},
{pattern: 'node_modules/moment/min/moment.min.js', included: true, watched: false},
{pattern: 'node_modules/pdfjs-dist/build/pdf.worker.js.map', included: false, served: true, watched: false},
{pattern: 'node_modules/pdfjs-dist/build/pdf.js.map', included: false, served: true, watched: false},
{pattern: 'node_modules/pdfjs-dist/web/pdf_viewer.js.map', included: false, served: true, watched: false},
{pattern: 'lib/content-services/i18n/**/en.json', included: false, served: true, watched: false},
{pattern: 'lib/core/assets/images/ft_ic_folder.svg', included: false, served: true, watched: false},
{pattern: 'lib/core/i18n/**/en.json', included: false, served: true, watched: false},
{pattern: 'lib/content-services/**/*.ts', included: false, served: true, watched: false},
{pattern: 'lib/config/app.config.json', included: false, served: true, watched: false},
@ -35,6 +38,7 @@ module.exports = function (config) {
proxies: {
'/base/assets/': '/base/lib/content-services/assets/',
'/base/lib/content-services/assets/images/ft_ic_folder.svg': '/base/lib/core/assets/images/ft_ic_folder.svg',
'/assets/': '/base/lib/content-services/assets/',
'/assets/adf-content-services/i18n/en.json': '/base/lib/content-services/i18n/en.json',
'/assets/adf-core/i18n/en.json': '/base/lib/core/i18n/en.json',

View File

@ -23,7 +23,6 @@ module.exports = function (config) {
watched: false
},
{pattern: 'node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false},
{pattern: 'node_modules/moment/min/moment.min.js', included: true, watched: false},
{pattern: 'lib/core/i18n/**/en.json', included: false, served: true, watched: false},

View File

@ -1,4 +1,5 @@
<div *ngIf="pagination?.hasMoreItems || isLoading" class="adf-infinite-pagination">
<button mat-button
*ngIf="!isLoading"
class="adf-infinite-pagination-load-more"

View File

@ -23,7 +23,7 @@ import { PaginatedComponent } from './paginated-component.interface';
import { BehaviorSubject } from 'rxjs';
import { setupTestBed } from '../testing/setupTestBed';
import { CoreTestingModule } from '../testing/core.testing.module';
import { Component } from '@angular/core';
import { Component, ChangeDetectorRef } from '@angular/core';
import { PaginationModel } from '../models/pagination.model';
import { RequestPaginationModel } from '../models/request-pagination.model';
@ -57,6 +57,7 @@ describe('InfinitePaginationComponent', () => {
let fixture: ComponentFixture<InfinitePaginationComponent>;
let component: InfinitePaginationComponent;
let pagination: Pagination;
let changeDetectorRef: ChangeDetectorRef;
setupTestBed({
imports: [CoreTestingModule],
@ -68,6 +69,7 @@ describe('InfinitePaginationComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(InfinitePaginationComponent);
component = fixture.componentInstance;
changeDetectorRef = fixture.componentRef.injector.get(ChangeDetectorRef);
component.target = TestBed.createComponent(TestPaginatedComponent).componentInstance;
pagination = {
@ -86,7 +88,7 @@ describe('InfinitePaginationComponent', () => {
pagination.hasMoreItems = true;
component.isLoading = true;
component.target = null;
fixture.detectChanges();
changeDetectorRef.detectChanges();
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).not.toBeNull();
@ -96,7 +98,7 @@ describe('InfinitePaginationComponent', () => {
pagination.hasMoreItems = true;
component.target.updatePagination(pagination);
component.isLoading = false;
fixture.detectChanges();
changeDetectorRef.detectChanges();
let loadingSpinner = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-spinner"]'));
expect(loadingSpinner).toBeNull();
@ -106,7 +108,7 @@ describe('InfinitePaginationComponent', () => {
pagination.hasMoreItems = true;
component.target.updatePagination(pagination);
component.isLoading = false;
fixture.detectChanges();
changeDetectorRef.detectChanges();
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).not.toBeNull();
@ -117,7 +119,7 @@ describe('InfinitePaginationComponent', () => {
component.target.pagination.next(pagination);
fixture.detectChanges();
changeDetectorRef.detectChanges();
component.onLoadMore();
@ -133,7 +135,7 @@ describe('InfinitePaginationComponent', () => {
component.target.pagination.next(pagination);
fixture.detectChanges();
changeDetectorRef.detectChanges();
fixture.whenStable().then(() => {
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
@ -145,7 +147,7 @@ describe('InfinitePaginationComponent', () => {
it('should NOT show anything if pagination has NO more items', () => {
pagination.hasMoreItems = false;
component.target.updatePagination(pagination);
fixture.detectChanges();
changeDetectorRef.detectChanges();
let loadMoreButton = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(loadMoreButton).toBeNull();
@ -160,7 +162,7 @@ describe('InfinitePaginationComponent', () => {
component.isLoading = false;
component.pageSize = 5;
fixture.detectChanges();
changeDetectorRef.detectChanges();
component.loadMore.subscribe((newPagination: Pagination) => {
expect(newPagination.skipCount).toBe(0);
@ -178,7 +180,7 @@ describe('InfinitePaginationComponent', () => {
component.isLoading = false;
component.pageSize = 5;
fixture.detectChanges();
changeDetectorRef.detectChanges();
component.loadMore.subscribe((newPagination: RequestPaginationModel) => {
expect(newPagination.merge).toBe(false);

View File

@ -29,6 +29,7 @@ import { PaginationComponentInterface } from './pagination-component.interface';
import { PaginationModel } from '../models/pagination.model';
import { RequestPaginationModel } from '../models/request-pagination.model';
import { UserPreferencesService, UserPreferenceValues } from '../services/user-preferences.service';
import { Pagination } from '@alfresco/js-api';
@Component({
selector: 'adf-infinite-pagination',
@ -40,9 +41,35 @@ import { UserPreferencesService, UserPreferenceValues } from '../services/user-p
})
export class InfinitePaginationComponent implements OnInit, OnDestroy, PaginationComponentInterface {
static DEFAULT_PAGINATION: Pagination = new Pagination({
skipCount: 0,
maxItems: 25,
totalItems: 0
});
_target: PaginatedComponent;
/** Component that provides custom pagination support. */
@Input()
target: PaginatedComponent;
set target(target: PaginatedComponent) {
if (target) {
this._target = target;
this.paginationSubscription = target.pagination.subscribe((pagination: PaginationModel) => {
this.isLoading = false;
this.pagination = pagination;
if (!this.pagination.hasMoreItems) {
this.pagination.hasMoreItems = false;
}
this.cdr.detectChanges();
});
}
}
get target() {
return this._target;
}
/** Number of items that are added with each "load more" event. */
@Input()
@ -56,7 +83,7 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
@Output()
loadMore: EventEmitter<RequestPaginationModel> = new EventEmitter<RequestPaginationModel>();
pagination: PaginationModel;
pagination: PaginationModel = InfinitePaginationComponent.DEFAULT_PAGINATION;
requestPaginationModel: RequestPaginationModel = {
skipCount: 0,
@ -69,19 +96,6 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
}
ngOnInit() {
if (this.target) {
this.paginationSubscription = this.target.pagination.subscribe((pagination: PaginationModel) => {
this.isLoading = false;
this.pagination = pagination;
if (!this.pagination.hasMoreItems) {
this.pagination.hasMoreItems = false;
}
this.cdr.detectChanges();
});
}
this.userPreferencesService.select(UserPreferenceValues.PaginationSize).subscribe((pagSize) => {
this.pageSize = this.pageSize || pagSize;
this.requestPaginationModel.maxItems = this.pageSize;
@ -96,16 +110,19 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
this.loadMore.next(this.requestPaginationModel);
if (this.target) {
if (this._target) {
this.isLoading = true;
this.target.updatePagination(<RequestPaginationModel> this.requestPaginationModel);
this._target.updatePagination(<RequestPaginationModel> this.requestPaginationModel);
}
}
reset() {
this.pagination.skipCount = 0;
this.pagination.maxItems = this.pageSize;
this.target.updatePagination(this.pagination);
if (this._target) {
this._target.updatePagination(this.pagination);
}
}
ngOnDestroy() {

View File

@ -31,7 +31,6 @@ module.exports = function (config) {
watched: false
},
{pattern: '../../node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false},
{pattern: '../../node_modules/moment/min/moment.min.js', included: true, watched: false},
{pattern: './i18n/**/en.json', included: false, served: true, watched: false},

View File

@ -30,7 +30,6 @@ module.exports = function (config) {
watched: false
},
{ pattern: 'node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false },
{ pattern: 'node_modules/moment/min/moment.min.js', included: true, watched: false },
{ pattern: 'lib/core/i18n/**/en.json', included: false, served: true, watched: false },