Skip to content
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.

Commit

Permalink
[NG] refactor hideable columns
Browse files Browse the repository at this point in the history 
Signed-off-by: stsogoo <stsogoo@vmware.com>
  • Loading branch information
@Shijir
Shijir committed Apr 19, 2019
1 parent df8ee17 commit 66e2e72
Show file tree
Hide file tree
Showing 46 changed files with 847 additions and 1,781 deletions.
58 changes: 20 additions & 38 deletions golden/clr-angular.d.ts
View file
Expand Up @@ -239,7 +239,7 @@ export declare class ClrDatagrid<T = any> implements AfterContentInit, AfterView
selection: Selection<T>;
singleSelected: T;
singleSelectedChanged: EventEmitter<T>;
constructor(columnService: HideableColumnService, organizer: DatagridRenderOrganizer, items: Items<T>, expandableRows: ExpandableRowsCount, selection: Selection<T>, rowActionService: RowActionService, stateProvider: StateProvider<T>, displayMode: DisplayModeService, renderer: Renderer2, el: ElementRef, commonStrings: ClrCommonStrings);
constructor(organizer: DatagridRenderOrganizer, items: Items<T>, expandableRows: ExpandableRowsCount, selection: Selection<T>, rowActionService: RowActionService, stateProvider: StateProvider<T>, displayMode: DisplayModeService, renderer: Renderer2, el: ElementRef, commonStrings: ClrCommonStrings);
dataChanged(): void;
ngAfterContentInit(): void;
ngAfterViewInit(): void;
Expand All @@ -262,26 +262,20 @@ export declare class ClrDatagridActionOverflow implements OnDestroy {
toggle(event: any): void;
}

export declare class ClrDatagridCell implements OnInit, OnDestroy {
export declare class ClrDatagridCell implements OnInit {
readonly _view: any;
hideableColumnService: HideableColumnService;
id: string;
signpost: QueryList<ClrSignpost>;
constructor(hideableColumnService: HideableColumnService, _el: ElementRef, _renderer: Renderer2, vcr: ViewContainerRef);
ngOnDestroy(): void;
constructor(vcr: ViewContainerRef);
ngOnInit(): void;
}

export declare class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, DatagridStringFilterImpl<T>> implements OnDestroy, OnInit {
readonly _view: any;
readonly ariaSort: "none" | "ascending" | "descending";
columnId: string;
customFilter: boolean;
field: string;
filterValue: string;
filterValueChange: EventEmitter<{}>;
readonly hidden: boolean;
hideable: DatagridHideableColumnModel;
projectedFilter: any;
sortBy: ClrDatagridComparatorInterface<T> | string;
sortIcon: any;
Expand All @@ -297,22 +291,18 @@ export declare class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<
sort(reverse?: boolean): void;
}

export declare class ClrDatagridColumnToggle implements OnInit, OnDestroy {
allColumnsVisible: boolean;
export declare class ClrDatagridColumnToggle {
anchorPoint: Point;
buttons: QueryList<ClrDatagridColumnToggleButton>;
columns: DatagridHideableColumnModel[];
commonStrings: ClrCommonStrings;
hideableColumnService: HideableColumnService;
customToggleButton: ClrDatagridColumnToggleButton;
customToggleTitle: ClrDatagridColumnToggleTitle;
readonly hasOnlyOneVisibleColumn: boolean;
readonly hideableColumnStates: ColumnState[];
open: boolean;
popoverPoint: Point;
title: ClrDatagridColumnToggleTitle;
constructor(hideableColumnService: HideableColumnService, columnToggleButtons: ColumnToggleButtonsService, commonStrings: ClrCommonStrings);
ngOnDestroy(): void;
ngOnInit(): void;
selectAll(): void;
toggleColumn(event: boolean, column: DatagridHideableColumnModel): void;
toggleUI(): void;
constructor(commonStrings: ClrCommonStrings, columnsService: ColumnsService);
toggleColumnState(columnState: ColumnState, event: boolean): void;
toggleSwitchPanel(): void;
}

export interface ClrDatagridComparatorInterface<T> {
Expand Down Expand Up @@ -340,27 +330,23 @@ export interface ClrDatagridFilterInterface<T, S = any> {
isActive(): boolean;
}

export declare class ClrDatagridFooter<T = any> implements OnInit {
export declare class ClrDatagridFooter<T = any> {
SELECTION_TYPE: typeof SelectionType;
activeToggler: boolean;
cdr: ChangeDetectorRef;
hideableColumnService: HideableColumnService;
readonly hasHideableColumns: boolean;
selection: Selection<T>;
toggle: ClrDatagridColumnToggle;
constructor(selection: Selection<T>, hideableColumnService: HideableColumnService, cdr: ChangeDetectorRef);
ngOnDestroy(): void;
ngOnInit(): void;
constructor(selection: Selection<T>, columnsService: ColumnsService);
}

export declare class ClrDatagridHideableColumn {
export declare class ClrDatagridHideableColumn implements OnDestroy {
clrDgHidden: boolean;
clrDgHideableColumn: {
hidden: boolean;
};
column: DatagridHideableColumnModel;
columnId: string;
hiddenChange: EventEmitter<boolean>;
constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef, dgColumn: ClrDatagridColumn<any>);
constructor(titleTemplateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef, columnsService: ColumnsService, columnState: BehaviorSubject<ColumnState>);
ngOnDestroy(): void;
ngOnInit(): void;
}

export declare class ClrDatagridItems<T> implements DoCheck, OnDestroy {
Expand Down Expand Up @@ -414,7 +400,6 @@ export declare class ClrDatagridRow<T = any> implements AfterContentInit, AfterV
expanded: boolean;
expandedChange: EventEmitter<boolean>;
globalExpandable: ExpandableRowsCount;
hideableColumnService: HideableColumnService;
id: string;
item: T;
radioId: string;
Expand All @@ -423,30 +408,27 @@ export declare class ClrDatagridRow<T = any> implements AfterContentInit, AfterV
selected: boolean;
selectedChanged: EventEmitter<boolean>;
selection: Selection<T>;
constructor(selection: Selection<T>, rowActionService: RowActionService, globalExpandable: ExpandableRowsCount, expand: Expand, hideableColumnService: HideableColumnService, displayMode: DisplayModeService, vcr: ViewContainerRef, renderer: Renderer2, el: ElementRef, commonStrings: ClrCommonStrings);
constructor(selection: Selection<T>, rowActionService: RowActionService, globalExpandable: ExpandableRowsCount, expand: Expand, displayMode: DisplayModeService, vcr: ViewContainerRef, renderer: Renderer2, el: ElementRef, commonStrings: ClrCommonStrings);
ngAfterContentInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
ngOnInit(): void;
toggle(selected?: boolean): void;
toggleExpand(): void;
updateCellsForColumns(columnList: DatagridHideableColumnModel[]): void;
}

export declare class ClrDatagridRowDetail<T = any> implements AfterContentInit, OnDestroy {
SELECTION_TYPE: typeof SelectionType;
cells: QueryList<ClrDatagridCell>;
expand: Expand;
expandableRows: ExpandableRowsCount;
hideableColumnService: HideableColumnService;
replace: boolean;
replacedRow: boolean;
rowActionService: RowActionService;
selection: Selection;
constructor(selection: Selection, rowActionService: RowActionService, expand: Expand, hideableColumnService: HideableColumnService, expandableRows: ExpandableRowsCount);
constructor(selection: Selection, rowActionService: RowActionService, expand: Expand, expandableRows: ExpandableRowsCount);
ngAfterContentInit(): void;
ngOnDestroy(): void;
updateCellsForColumns(columnList: DatagridHideableColumnModel[]): void;
}

export declare enum ClrDatagridSortOrder {
Expand Down
18 changes: 9 additions & 9 deletions src/clr-angular/data/datagrid/_datagrid.clarity.scss
View file
Expand Up @@ -394,10 +394,6 @@
flex: 0 0 auto;
}

&--hidden {
display: none;
}

&.datagrid-fixed-column {
flex: 0 0 $clr-datagrid-fixed-column-size;
max-width: $clr-datagrid-fixed-column-size;
Expand Down Expand Up @@ -501,10 +497,6 @@
flex: 0 0 auto;
}

&--hidden {
display: none;
}

&.datagrid-fixed-column {
flex: 0 0 $clr-datagrid-fixed-column-size;
max-width: $clr-datagrid-fixed-column-size;
Expand Down Expand Up @@ -566,6 +558,13 @@
background-image: generateEmptyDatagridPlaceholder();
}
}

.datagrid-hidden-column {
&.datagrid-column,
&.datagrid-cell {
display: none;
}
}
}

.datagrid-row-replaced {
Expand All @@ -582,7 +581,7 @@
.datagrid-cell {
display: block;
padding-top: 11px;
&--hidden {
&.datagrid-hidden-column {
display: none;
}
}
Expand Down Expand Up @@ -658,6 +657,7 @@
}

.column-switch-wrapper {
position: relative;
flex: 0 0 auto;

&.active {
Expand Down
6 changes: 0 additions & 6 deletions src/clr-angular/data/datagrid/all.spec.ts
View file
Expand Up @@ -25,7 +25,6 @@ import DatagridColumnSpecs from './datagrid-column.spec';
import DatagridColumnSeparatorSpecs from './datagrid-column-separator.spec';
import DatagridFilterSpecs from './datagrid-filter.spec';
import DatagridFooterSpecs from './datagrid-footer.spec';
import DatagridHideableColumnSpec from './datagrid-hideable-column.model.spec';
import DatagridHideableColumnDirectiveSpec from './datagrid-hideable-column.spec';
import DatagridItemsTrackBySpecs from './datagrid-items-trackby.spec';
import DatagridItemsSpecs from './datagrid-items.spec';
Expand All @@ -37,10 +36,8 @@ import DatagridRowDetailSpecs from './datagrid-row-detail.spec';
import DatagridRowSpecs from './datagrid-row.spec';
import DatagridSpecs from './datagrid.spec';
import { addHelpers } from './helpers.spec';
import ColumnToggleButtonsServiceSpecs from './providers/column-toggle-buttons.service.spec';
import DisplayModeServiceSpecs from './providers/display-mode.service.spec';
import FiltersProviderSpecs from './providers/filters.spec';
import DatagridHideableColumnServiceSpecs from './providers/hideable-column.service.spec';
import ItemsProviderSpecs from './providers/items.spec';
import PageProviderSpecs from './providers/page.spec';
import SelectionProviderSpecs from './providers/selection.spec';
Expand All @@ -67,8 +64,6 @@ describe('Datagrid', function() {
PageProviderSpecs();
ItemsProviderSpecs();
SelectionProviderSpecs();
DatagridHideableColumnServiceSpecs();
ColumnToggleButtonsServiceSpecs();
DisplayModeServiceSpecs();
TableSizeServiceSpec();
ColumnResizerServiceSpecs();
Expand All @@ -90,7 +85,6 @@ describe('Datagrid', function() {
DatagridFooterSpecs();
DatagridPlaceholderSpecs();
DatagridSpecs();
DatagridHideableColumnSpec();
DatagridColumnToggleSpecs();
DatagridColumnToggleButtonSpecs();
DatagridHideableColumnDirectiveSpec();
Expand Down
14 changes: 1 addition & 13 deletions src/clr-angular/data/datagrid/datagrid-cell.spec.ts
View file
Expand Up @@ -6,18 +6,15 @@
import { Component } from '@angular/core';

import { ClrDatagridCell } from './datagrid-cell';
import { DatagridHideableColumnModel } from './datagrid-hideable-column.model';
import { TestContext } from './helpers.spec';
import { HideableColumnService } from './providers/hideable-column.service';
import { DatagridRenderOrganizer } from './render/render-organizer';

export default function(): void {
describe('ClrDatagridCell component', function() {
let context: TestContext<ClrDatagridCell, SimpleTest>;
let hideableColumnService: HideableColumnService;

beforeEach(function() {
context = this.create(ClrDatagridCell, SimpleTest, [DatagridRenderOrganizer, HideableColumnService]);
context = this.create(ClrDatagridCell, SimpleTest, [DatagridRenderOrganizer]);
});

it('provides a wrapped view for the content', function() {
Expand All @@ -33,15 +30,6 @@ export default function(): void {
expect(context.clarityElement.classList.contains('datagrid-cell')).toBeTruthy();
});

it('adds the .datagrid-cell--hidden class to the host', function() {
const testColumn: DatagridHideableColumnModel[] = [new DatagridHideableColumnModel(null, 'dg-col-0', true)];
hideableColumnService = context.getClarityProvider(HideableColumnService);
hideableColumnService.updateColumnList(testColumn);
context.clarityDirective.id = 'dg-col-0';
context.detectChanges();
expect(context.clarityElement.classList.contains('datagrid-cell--hidden')).toBeTruthy();
});

it('does only adds .datagrid-signpost-trigger class when there is a signpost', function() {
expect(context.clarityElement.classList.contains('datagrid-signpost-trigger')).toBeFalsy();
context.testComponent.signpostTest = true;
Expand Down
67 changes: 3 additions & 64 deletions src/clr-angular/data/datagrid/datagrid-cell.ts
View file
Expand Up @@ -3,23 +3,10 @@
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import {
Component,
ContentChildren,
ElementRef,
Injector,
OnDestroy,
OnInit,
QueryList,
Renderer2,
ViewContainerRef,
} from '@angular/core';
import { Subscription } from 'rxjs';
import { Component, ContentChildren, Injector, OnInit, QueryList, ViewContainerRef } from '@angular/core';

import { ClrSignpost } from '../../popover/signpost/signpost';
import { HostWrapper } from '../../utils/host-wrapping/host-wrapper';

import { HideableColumnService } from './providers/hideable-column.service';
import { WrappedCell } from './wrapped-cell';

@Component({
Expand All @@ -33,7 +20,7 @@ import { WrappedCell } from './wrapped-cell';
role: 'cell',
},
})
export class ClrDatagridCell implements OnInit, OnDestroy {
export class ClrDatagridCell implements OnInit {
/*********
* @property signpost
*
Expand All @@ -44,62 +31,14 @@ export class ClrDatagridCell implements OnInit, OnDestroy {
*/
@ContentChildren(ClrSignpost) signpost: QueryList<ClrSignpost>;

/**
* @property id
*
* @description
* An identifier for an instance of this cell that maps it to a specific column
*
*/
private _id: string;

set id(value: string) {
this._id = value;
this.mapHideableColumn(this._id);
}

private hiddenStateSubscription: Subscription;

constructor(
public hideableColumnService: HideableColumnService,
private _el: ElementRef,
private _renderer: Renderer2,
private vcr: ViewContainerRef
) {}

private mapHideableColumn(columnId: string) {
if (!columnId) {
return;
}

const hideableColumn = this.hideableColumnService.getColumnById(this._id);

this.setHiddenClass(hideableColumn.hidden);
this.hiddenStateSubscription = hideableColumn.hiddenChangeState.subscribe(() => {
this.setHiddenClass(hideableColumn.hidden);
});
}

private setHiddenClass(hideableColumnValue: boolean) {
if (hideableColumnValue) {
this._renderer.addClass(this._el.nativeElement, 'datagrid-cell--hidden');
} else {
this._renderer.removeClass(this._el.nativeElement, 'datagrid-cell--hidden');
}
}
constructor(private vcr: ViewContainerRef) {}

private wrappedInjector: Injector;

ngOnInit() {
this.wrappedInjector = new HostWrapper(WrappedCell, this.vcr);
}

ngOnDestroy() {
if (this.hiddenStateSubscription) {
this.hiddenStateSubscription.unsubscribe();
}
}

public get _view() {
return this.wrappedInjector.get(WrappedCell, this.vcr).cellView;
}
Expand Down

0 comments on commit 66e2e72

Please sign in to comment.