mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-23 18:05:09 +00:00
[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:
parent
3263659ac2
commit
cd4fb8d06d
@ -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">
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}));
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -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;
|
||||
this.infinitePaginationComponent.reset();
|
||||
if (this.target) {
|
||||
this.infinitePaginationComponent.reset();
|
||||
}
|
||||
this.chosenNode = null;
|
||||
this.folderIdToShow = null;
|
||||
this.querySearch();
|
||||
|
@ -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',
|
||||
|
@ -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},
|
||||
|
@ -1,4 +1,5 @@
|
||||
<div *ngIf="pagination?.hasMoreItems || isLoading" class="adf-infinite-pagination">
|
||||
|
||||
<button mat-button
|
||||
*ngIf="!isLoading"
|
||||
class="adf-infinite-pagination-load-more"
|
||||
|
@ -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);
|
||||
|
@ -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() {
|
||||
|
@ -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},
|
||||
|
@ -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 },
|
||||
|
Loading…
x
Reference in New Issue
Block a user