inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5150] Datatable sub-component each in its own folder (#5734)

Browse Source
This commit is contained in:
Baptiste Mahé
2020-05-28 23:45:32 +02:00
committed by GitHub
parent 75f2165f3f
commit a9a801c34d
24 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
lib/core/datatable/components/datatable/data-cell.event.ts
View File

@@ -1,43 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BaseEvent } from '../../../events';
import { DataColumn } from '../../data/data-column.model';
import { DataRow } from '../../data/data-row.model';
export class DataCellEventModel {
readonly row: DataRow;
readonly col: DataColumn;
actions: any[];
constructor(row: DataRow, col: DataColumn, actions: any[]) {
this.row = row;
this.col = col;
this.actions = actions || [];
}
}
export class DataCellEvent extends BaseEvent<DataCellEventModel> {
constructor(row: DataRow, col: DataColumn, actions: any[]) {
super();
this.value = new DataCellEventModel(row, col, actions);
}
}

44
lib/core/datatable/components/datatable/data-row-action.event.ts
View File

@@ -1,44 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BaseEvent } from '../../../events';
import { DataRow } from '../../data/data-row.model';
export class DataRowActionModel {
row: DataRow;
action: any;
constructor(row: DataRow, action: any) {
this.row = row;
this.action = action;
}
}
export class DataRowActionEvent extends BaseEvent<DataRowActionModel> {
// backwards compatibility with 1.2.0 and earlier
get args(): DataRowActionModel {
return this.value;
}
constructor(row: DataRow, action: any) {
super();
this.value = new DataRowActionModel(row, action);
}
}

118
lib/core/datatable/components/datatable/datatable-cell.component.spec.ts
View File

@@ -1,118 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DateCellComponent } from './date-cell.component';
import { Subject } from 'rxjs';
import { AlfrescoApiServiceMock, AppConfigService, StorageService } from '@alfresco/adf-core';
import { Node } from '@alfresco/js-api';
describe('DataTableCellComponent', () => {
let alfrescoApiService: AlfrescoApiServiceMock;
beforeEach(() => {
alfrescoApiService = new AlfrescoApiServiceMock(new AppConfigService(null), new StorageService());
});
it('should use medium format by default', () => {
const component = new DateCellComponent(null, null, new AppConfigService(null));
expect(component.format).toBe('medium');
});
it('should use column format', () => {
const component = new DateCellComponent(null, <any> {
nodeUpdated: new Subject<any>()
}, new AppConfigService(null));
component.column = {
key: 'created',
type: 'date',
format: 'longTime'
};
component.ngOnInit();
expect(component.format).toBe('longTime');
});
it('should update cell data on alfrescoApiService.nodeUpdated event', () => {
const component = new DateCellComponent(
null,
alfrescoApiService,
new AppConfigService(null)
);
component.column = {
key: 'name',
type: 'text'
};
component.row = <any> {
cache: {
name: 'some-name'
},
node: {
entry: {
id: 'id',
name: 'test-name'
}
}
};
component.ngOnInit();
alfrescoApiService.nodeUpdated.next(<Node> {
id: 'id',
name: 'updated-name'
});
expect(component.row['node'].entry.name).toBe('updated-name');
expect(component.row['cache'].name).toBe('updated-name');
});
it('not should update cell data if ids don`t match', () => {
const component = new DateCellComponent(
null,
alfrescoApiService,
new AppConfigService(null)
);
component.column = {
key: 'name',
type: 'text'
};
component.row = <any> {
cache: {
name: 'some-name'
},
node: {
entry: {
id: 'some-id',
name: 'test-name'
}
}
};
component.ngOnInit();
alfrescoApiService.nodeUpdated.next(<Node> {
id: 'id',
name: 'updated-name'
});
expect(component.row['node'].entry.name).not.toBe('updated-name');
expect(component.row['cache'].name).not.toBe('updated-name');
});
});

119
lib/core/datatable/components/datatable/datatable-cell.component.ts
View File

@@ -1,119 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
ChangeDetectionStrategy,
Component,
Input,
OnInit,
ViewEncapsulation,
OnDestroy
} from '@angular/core';
import { DataColumn } from '../../data/data-column.model';
import { DataRow } from '../../data/data-row.model';
import { DataTableAdapter } from '../../data/datatable-adapter';
import { AlfrescoApiService } from '../../../services/alfresco-api.service';
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'adf-datatable-cell',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container>
<span *ngIf="copyContent; else defaultCell"
adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
[clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
[attr.aria-label]="value$ | async"
[title]="tooltip"
class="adf-datatable-cell-value"
>{{ value$ | async }}</span>
</ng-container>
<ng-template #defaultCell>
<span
[attr.aria-label]="value$ | async"
[title]="tooltip"
class="adf-datatable-cell-value"
>{{ value$ | async }}</span>
</ng-template>
`,
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-datatable-content-cell' }
})
export class DataTableCellComponent implements OnInit, OnDestroy {
/** Data table adapter instance. */
@Input()
data: DataTableAdapter;
/** Data that defines the column. */
@Input()
column: DataColumn;
/** Data that defines the row. */
@Input()
row: DataRow;
value$ = new BehaviorSubject<any>('');
/** Enables/disables a Clipboard directive to allow copying of the cell's content. */
@Input()
copyContent: boolean;
/** Text for the cell's tooltip. */
@Input()
tooltip: string;
/** Custom resolver function which is used to parse dynamic column objects */
@Input()
resolverFn: (row: DataRow, col: DataColumn) => any = null;
protected onDestroy$ = new Subject<boolean>();
constructor(protected alfrescoApiService: AlfrescoApiService) {}
ngOnInit() {
this.updateValue();
this.alfrescoApiService.nodeUpdated
.pipe(takeUntil(this.onDestroy$))
.subscribe(node => {
if (this.row) {
if (this.row['node'].entry.id === node.id) {
this.row['node'].entry = node;
this.row['cache'][this.column.key] = this.column.key.split('.').reduce((source, key) => source[key], node);
this.updateValue();
}
}
});
}
protected updateValue() {
if (this.column && this.column.key && this.row && this.data) {
const value = this.data.getValue(this.row, this.column, this.resolverFn);
this.value$.next(value);
if (!this.tooltip) {
this.tooltip = value;
}
}
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
}

123
lib/core/datatable/components/datatable/datatable-row.component.spec.ts
View File

@@ -1,123 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DataTableRowComponent } from './datatable-row.component';
import { DataRow } from '../../data/data-row.model';
import { TestBed, ComponentFixture } from '@angular/core/testing';
describe('DataTableRowComponent', () => {
let fixture: ComponentFixture<DataTableRowComponent>;
let component: DataTableRowComponent;
const row: DataRow = {
isSelected: false,
hasValue: jasmine.createSpy('hasValue'),
getValue: () => {}
};
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [DataTableRowComponent]
});
fixture = TestBed.createComponent(DataTableRowComponent);
component = fixture.componentInstance;
});
it('should add select class when row is selected', () => {
row.isSelected = true;
component.row = row;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected')).toBe(true);
});
it('should not have select class when row is not selected', () => {
row.isSelected = false;
component.row = row;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected'))
.not.toBe(true);
});
it('should not have select class when row data is null', () => {
row.isSelected = false;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected'))
.not.toBe(true);
});
it('should set aria selected to true when row is selected', () => {
row.isSelected = true;
component.row = row;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.getAttribute('aria-selected')).toBe('true');
});
it('should set aria selected to false when row is not selected', () => {
row.isSelected = false;
component.row = row;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.getAttribute('aria-selected')).toBe('false');
});
it('should set aria selected to false when row is null', () => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.getAttribute('aria-selected')).toBe('false');
});
it('should set aria label', () => {
spyOn(row, 'getValue').and.returnValue('some-name');
component.row = row;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.getAttribute('aria-label')).toBe('some-name');
});
it('should set tabindex as focusable when row is not disabled', () => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.getAttribute('tabindex')).toBe('0');
});
it('should not set tabindex when row is disabled', () => {
component.disabled = true;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement.getAttribute('tabindex')).toBe(null);
});
it('should focus element', () => {
expect(document.activeElement.classList.contains('adf-datatable-row')).toBe(false);
component.focus();
expect(document.activeElement.classList.contains('adf-datatable-row')).toBe(true);
});
it('should emit keyboard space event', () => {
spyOn(component.select, 'emit');
const event = new KeyboardEvent('keydown', {
key: ' ',
code: 'Space'
});
fixture.debugElement.nativeElement.dispatchEvent(event);
expect(component.select.emit).toHaveBeenCalledWith(event);
});
});

95
lib/core/datatable/components/datatable/datatable-row.component.ts
View File

@@ -1,95 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
Component,
ViewEncapsulation,
ElementRef,
Input,
HostBinding,
HostListener,
Output,
EventEmitter
} from '@angular/core';
import { FocusableOption } from '@angular/cdk/a11y';
import { DataRow } from '../../data/data-row.model';
@Component({
selector: 'adf-datatable-row',
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
host: {
class: 'adf-datatable-row',
tabindex: '0',
role: 'row'
}
})
export class DataTableRowComponent implements FocusableOption {
@Input() row: DataRow;
@Input() disabled = false;
@Output()
select: EventEmitter<any> = new EventEmitter<any>();
@HostBinding('class.adf-is-selected')
get isSelected(): boolean {
if (!this.row) {
return false;
}
return this.row.isSelected;
}
@HostBinding('attr.aria-selected')
get isAriaSelected(): boolean {
if (!this.row) {
return false;
}
return this.row.isSelected;
}
@HostBinding('attr.aria-label')
get ariaLabel(): string|null {
if (!this.row) {
return null;
}
if (this.row.isSelected) {
return this.row.getValue('name') + ' selected' || '';
} else {
return this.row.getValue('name') || '';
}
}
@HostBinding('attr.tabindex')
get tabindex(): number|null {
return this.disabled ? null : 0;
}
@HostListener('keydown.space', ['$event'])
onKeyDown(event: KeyboardEvent) {
if ((event.target as Element).tagName === this.element.nativeElement.tagName) {
event.preventDefault();
this.select.emit(event);
}
}
constructor(private element: ElementRef) {}
focus() {
this.element.nativeElement.focus();
}
}

6
lib/core/datatable/components/datatable/datatable.component.ts
View File

@@ -29,12 +29,12 @@ import { DataRowEvent } from '../../data/data-row-event.model';
import { DataRow } from '../../data/data-row.model';
import { DataSorting } from '../../data/data-sorting.model';
import { DataTableAdapter } from '../../data/datatable-adapter';
import { DataTableRowComponent } from './datatable-row.component';
import { DataTableRowComponent } from '../datatable-row/datatable-row.component';
import { ObjectDataRow } from '../../data/object-datarow.model';
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
import { DataCellEvent } from './data-cell.event';
import { DataRowActionEvent } from './data-row-action.event';
import { DataCellEvent } from '../data-cell.event';
import { DataRowActionEvent } from '../data-row-action.event';
import { share, buffer, map, filter, debounceTime } from 'rxjs/operators';
export enum DisplayMode {

83
lib/core/datatable/components/datatable/date-cell.component.ts
View File

@@ -1,83 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, ViewEncapsulation } from '@angular/core';
import { DataTableCellComponent } from './datatable-cell.component';
import {
UserPreferencesService,
UserPreferenceValues
} from '../../../services/user-preferences.service';
import { AlfrescoApiService } from '../../../services/alfresco-api.service';
import { AppConfigService } from '../../../app-config/app-config.service';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'adf-date-cell',
template: `
<ng-container>
<span
[attr.aria-label]="value$ | async | adfTimeAgo: currentLocale"
title="{{ tooltip | adfLocalizedDate: 'medium' }}"
class="adf-datatable-cell-value"
*ngIf="format === 'timeAgo'; else standard_date">
{{ value$ | async | adfTimeAgo: currentLocale }}
</span>
</ng-container>
<ng-template #standard_date>
<span
class="adf-datatable-cell-value"
title="{{ tooltip | adfLocalizedDate: format }}"
class="adf-datatable-cell-value"
[attr.aria-label]="value$ | async | adfLocalizedDate: format">
{{ value$ | async | adfLocalizedDate: format }}
</span>
</ng-template>
`,
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-date-cell adf-datatable-content-cell' }
})
export class DateCellComponent extends DataTableCellComponent {
static DATE_FORMAT = 'medium';
currentLocale: string;
dateFormat: string;
get format(): string {
if (this.column) {
return this.column.format || this.dateFormat;
}
return this.dateFormat;
}
constructor(
userPreferenceService: UserPreferencesService,
alfrescoApiService: AlfrescoApiService,
appConfig: AppConfigService
) {
super(alfrescoApiService);
this.dateFormat = appConfig.get('dateValues.defaultDateFormat', DateCellComponent.DATE_FORMAT);
if (userPreferenceService) {
userPreferenceService
.select(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.currentLocale = locale);
}
}
}

90
lib/core/datatable/components/datatable/drop-zone.directive.ts
View File

@@ -1,90 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Directive, Input, ElementRef, NgZone, OnInit, OnDestroy } from '@angular/core';
import { DataRow } from '../../data/data-row.model';
import { DataColumn } from '../../data/data-column.model';
@Directive({
selector: '[adf-drop-zone]'
})
export class DropZoneDirective implements OnInit, OnDestroy {
private element: HTMLElement;
@Input()
dropTarget: 'header' | 'cell' = 'cell';
@Input()
dropRow: DataRow;
@Input()
dropColumn: DataColumn;
constructor(elementRef: ElementRef, private ngZone: NgZone) {
this.element = elementRef.nativeElement;
}
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
this.element.addEventListener('dragover', this.onDragOver.bind(this));
this.element.addEventListener('drop', this.onDrop.bind(this));
});
}
ngOnDestroy() {
this.element.removeEventListener('dragover', this.onDragOver);
this.element.removeEventListener('drop', this.onDrop);
}
onDragOver(event: Event) {
const domEvent = new CustomEvent(`${this.dropTarget}-dragover`, {
detail: {
target: this.dropTarget,
event,
column: this.dropColumn,
row: this.dropRow
},
bubbles: true
});
this.element.dispatchEvent(domEvent);
if (domEvent.defaultPrevented) {
event.preventDefault();
event.stopPropagation();
}
}
onDrop(event: Event) {
const domEvent = new CustomEvent(`${this.dropTarget}-drop`, {
detail: {
target: this.dropTarget,
event,
column: this.dropColumn,
row: this.dropRow
},
bubbles: true
});
this.element.dispatchEvent(domEvent);
if (domEvent.defaultPrevented) {
event.preventDefault();
event.stopPropagation();
}
}
}

6
lib/core/datatable/components/datatable/empty-list.component.html
View File

@@ -1,6 +0,0 @@
<div class="adf-empty-list_template">
<ng-content select="[adf-empty-list-header]"></ng-content>
<ng-content select="[adf-empty-list-body]"></ng-content>
<ng-content select="[adf-empty-list-footer]"></ng-content>
<ng-content></ng-content>
</div>

5
lib/core/datatable/components/datatable/empty-list.component.scss
View File

@@ -1,5 +0,0 @@
.adf-empty-list_template {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}

55
lib/core/datatable/components/datatable/empty-list.component.spec.ts
View File

@@ -1,55 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EmptyListComponent } from './empty-list.component';
import { setupTestBed } from '../../../testing/setup-test-bed';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
describe('EmptyListComponentComponent', () => {
let component: EmptyListComponent;
let fixture: ComponentFixture<EmptyListComponent>;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
beforeEach(() => {
fixture = TestBed.createComponent(EmptyListComponent);
component = fixture.componentInstance;
});
afterEach(() => {
fixture.destroy();
});
it('should be defined', () => {
expect(component).toBeDefined();
});
it('should render the input values', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.adf-empty-list_template')).toBeDefined();
});
}));
});

30
lib/core/datatable/components/datatable/empty-list.component.ts
View File

@@ -1,30 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Directive, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-empty-list',
styleUrls: ['./empty-list.component.scss'],
templateUrl: './empty-list.component.html',
encapsulation: ViewEncapsulation.None
})
export class EmptyListComponent {}
@Directive({ selector: '[adf-empty-list-header]' }) export class EmptyListHeaderDirective {}
@Directive({ selector: '[adf-empty-list-body]' }) export class EmptyListBodyDirective {}
@Directive({ selector: '[adf-empty-list-footer]' }) export class EmptyListFooterDirective {}

40
lib/core/datatable/components/datatable/filesize-cell.component.ts
View File

@@ -1,40 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, ViewEncapsulation } from '@angular/core';
import { DataTableCellComponent } from './datatable-cell.component';
import { AlfrescoApiService } from '../../../services/alfresco-api.service';
@Component({
selector: 'adf-filesize-cell',
template: `
<ng-container *ngIf="(value$ | async | adfFileSize) as fileSize">
<span
[title]="tooltip"
[attr.aria-label]="fileSize"
>{{ fileSize }}</span
>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-filesize-cell' }
})
export class FileSizeCellComponent extends DataTableCellComponent {
constructor(alfrescoApiService: AlfrescoApiService) {
super(alfrescoApiService);
}
}

8
lib/core/datatable/components/datatable/json-cell.component.scss
View File

@@ -1,8 +0,0 @@
.adf-datatable-json-cell {
white-space: pre-wrap;
word-wrap: break-word;
}
.adf-datatable-cell-value {
position: relative;
}

92
lib/core/datatable/components/datatable/json-cell.component.spec.ts
View File

@@ -1,92 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ObjectDataTableAdapter } from './../../data/object-datatable-adapter';
import { ObjectDataColumn } from './../../data/object-datacolumn.model';
import { setupTestBed } from '../../../testing/setup-test-bed';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { JsonCellComponent } from './json-cell.component';
import { TranslateModule } from '@ngx-translate/core';
describe('JsonCellComponent', () => {
let component: JsonCellComponent;
let fixture: ComponentFixture<JsonCellComponent>;
let dataTableAdapter: ObjectDataTableAdapter;
let rowData;
let columnData;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
beforeEach(async(() => {
fixture = TestBed.createComponent(JsonCellComponent);
component = fixture.componentInstance;
}));
beforeEach(() => {
rowData = {
name: '1',
entity: {
'name': 'test',
'description': 'this is a test',
'version': 1
}
};
columnData = { format: '/somewhere', type: 'json', key: 'entity'};
dataTableAdapter = new ObjectDataTableAdapter(
[rowData],
[new ObjectDataColumn(columnData)]
);
component.column = dataTableAdapter.getColumns()[0];
component.data = dataTableAdapter;
component.row = dataTableAdapter.getRows()[0];
});
afterEach(() => {
fixture.destroy();
});
it('should set value', () => {
fixture.detectChanges();
component.value$.subscribe( (result) => {
expect(result).toBe(rowData.entity);
});
});
it('should render json button inside cell', () => {
fixture.detectChanges();
const button: HTMLElement = fixture.debugElement.nativeElement.querySelector('.mat-button');
expect(button).toBeDefined();
});
it('should not setup cell when has no data', () => {
rowData.entity = {};
fixture.detectChanges();
component.value$.subscribe( (result) => {
expect(result).toEqual({});
});
});
});

83
lib/core/datatable/components/datatable/json-cell.component.ts
View File

@@ -1,83 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { DataTableCellComponent } from './datatable-cell.component';
import { MatDialog } from '@angular/material';
import { EditJsonDialogComponent, EditJsonDialogSettings } from '../../../dialogs/edit-json/edit-json.dialog';
import { AlfrescoApiService } from '../../../services/alfresco-api.service';
@Component({
selector: 'adf-json-cell',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container *ngIf="value$ | async as value; else editEmpty">
<button mat-button color="primary" (click)="view()">json</button>
</ng-container>
<ng-template #editEmpty>
<button *ngIf="editable" mat-button color="primary" (click)="view()">json</button>
</ng-template>
`,
styleUrls: ['./json-cell.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-datatable-content-cell' }
})
export class JsonCellComponent extends DataTableCellComponent implements OnInit {
/** Editable JSON. */
@Input()
editable: boolean = false;
constructor(
private dialog: MatDialog,
alfrescoApiService: AlfrescoApiService
) {
super(alfrescoApiService);
}
ngOnInit() {
if (this.column && this.column.key && this.row && this.data) {
this.value$.next(this.data.getValue(this.row, this.column, this.resolverFn));
}
}
view() {
const rawValue: string | object = this.data.getValue(this.row, this.column, this.resolverFn);
const value = typeof rawValue === 'object'
? JSON.stringify(rawValue || {}, null, 2)
: rawValue;
const settings: EditJsonDialogSettings = {
title: this.column.title,
editable: this.editable,
value
};
this.dialog.open(EditJsonDialogComponent, {
data: settings,
minWidth: '50%',
minHeight: '50%'
}).afterClosed().subscribe((/*result: string*/) => {
if (typeof rawValue === 'object') {
// todo: update cell value as object
} else {
// todo: update cell value as string
}
});
}
}

142
lib/core/datatable/components/datatable/location-cell.component.spec.ts
View File

@@ -1,142 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ObjectDataTableAdapter } from './../../data/object-datatable-adapter';
import { ObjectDataColumn } from './../../data/object-datacolumn.model';
import { LocationCellComponent } from './location-cell.component';
import { setupTestBed } from '../../../testing/setup-test-bed';
import { CoreTestingModule } from '../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
describe('LocationCellComponent', () => {
let component: LocationCellComponent;
let fixture: ComponentFixture<LocationCellComponent>;
let dataTableAdapter: ObjectDataTableAdapter;
let rowData;
let columnData;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
beforeEach(async(() => {
fixture = TestBed.createComponent(LocationCellComponent);
component = fixture.componentInstance;
}));
beforeEach(() => {
rowData = {
name: '1',
path: {
elements: [
{ id: '1', name: 'path' },
{ id: '2', name: 'to' },
{ id: '3', name: 'location' }
],
name: '/path/to/location'
}
};
columnData = { format: '/somewhere', type: 'location', key: 'path'};
dataTableAdapter = new ObjectDataTableAdapter(
[rowData],
[ new ObjectDataColumn(columnData) ]
);
component.link = [];
component.column = dataTableAdapter.getColumns()[0];
component.data = dataTableAdapter;
component.row = dataTableAdapter.getRows()[0];
});
afterEach(() => {
fixture.destroy();
});
it('should set tooltip', () => {
fixture.detectChanges();
expect(component.tooltip).toEqual(rowData.path.name);
});
it('should set router link', () => {
fixture.detectChanges();
expect(component.link).toEqual([ columnData.format , rowData.path.elements[2].id ]);
});
it('should not setup cell when path has no data', (done) => {
rowData.path = {};
fixture.detectChanges();
expect(component.tooltip).toBeUndefined();
expect(component.link).toEqual([]);
component.value$.subscribe((value) => {
expect(value).toBe('');
done();
});
});
it('should not setup cell when path is missing required properties', (done) => {
rowData.path = { someProp: '' };
fixture.detectChanges();
expect(component.tooltip).toBeUndefined();
expect(component.link).toEqual([]);
component.value$.subscribe((value) => {
expect(value).toBe('');
done();
});
});
it('should not setup cell when path data is missing one of the property', () => {
rowData.path = {
name: 'some-name'
};
let value = '';
component.value$.subscribe((val) => {
value = val;
});
fixture.detectChanges();
expect(value).toBe('');
expect(component.tooltip).toBeUndefined();
expect(component.link).toEqual([]);
rowData.path = {
elements: []
};
fixture.detectChanges();
expect(value).toBe('');
expect(component.tooltip).toBeUndefined();
expect(component.link).toEqual([]);
});
});

71
lib/core/datatable/components/datatable/location-cell.component.ts
View File

@@ -1,71 +0,0 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
ChangeDetectionStrategy,
Component,
Input,
OnInit,
ViewEncapsulation
} from '@angular/core';
import { PathInfoEntity } from '@alfresco/js-api';
import { DataTableCellComponent } from './datatable-cell.component';
import { AlfrescoApiService } from '../../../services/alfresco-api.service';
@Component({
selector: 'adf-location-cell',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container>
<a href="" [title]="tooltip" [routerLink]="link">
{{ value$ | async }}
</a>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-location-cell adf-datatable-content-cell' }
})
export class LocationCellComponent extends DataTableCellComponent implements OnInit {
@Input()
link: any[];
constructor(alfrescoApiService: AlfrescoApiService) {
super(alfrescoApiService);
}
/** @override */
ngOnInit() {
if (this.column && this.column.key && this.row && this.data) {
const path: PathInfoEntity = this.data.getValue(
this.row,
this.column,
this.resolverFn
);
if (path && path.name && path.elements) {
this.value$.next(path.name.split('/').pop());
if (!this.tooltip) {
this.tooltip = path.name;
}
const parent = path.elements[path.elements.length - 1];
this.link = [this.column.format, parent.id];
}
}
}
}