Skip to content

Commit

Permalink
Revert pseudo merging via rebasing of PR #154
Browse files Browse the repository at this point in the history 
Because the PR is not ready yet, and it should probably be squashed
before merging.
  • Loading branch information
@passiondev2024
passiondev2024 committed Dec 7, 2021
1 parent 1432d0a commit eab49e6
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 123 deletions.
64 changes: 32 additions & 32 deletions projects/natural/src/lib/classes/abstract-list.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {MaterialModule} from '../../../../../src/app/material.module';
import {ActivatedRoute, Data} from '@angular/router';

@Component({
template: `<natural-columns-picker (selectionChange)="selectColumns($event)" [selections]="selectedColumns">
template: ` <natural-columns-picker [(selection)]="selectedColumns" [initialSelection]="initialColumns">
<span naturalColumnsPickerColumn="col1">column 1</span>
<span naturalColumnsPickerColumn="col2" [checked]="false">column 2</span>
<span naturalColumnsPickerColumn="col3">column 3</span>
Expand Down Expand Up @@ -82,15 +82,15 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(defaultColumns);
expect(component.selectedColumns).toEqual(defaultColumns);
expect(persistSpy).toHaveBeenCalledOnceWith('col', null, mockedActivatedRoute, 'test-key');

// Selecting different columns will persist them
component.selectedColumns = ['col1', 'col2'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1', 'col2']);
expect(component.selectedColumns).toEqual(['col1', 'col2']);
expect(persistSpy).toHaveBeenCalledWith('col', 'col1,col2', mockedActivatedRoute, 'test-key');
}

Expand All @@ -103,15 +103,15 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(defaultColumns);
expect(component.selectedColumns).toEqual(defaultColumns);
expect(persistSpy).not.toHaveBeenCalled();

// Selecting different columns will not persist them
component.selectedColumns = ['col1', 'col2'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1', 'col2']);
expect(component.selectedColumns).toEqual(['col1', 'col2']);
expect(persistSpy).not.toHaveBeenCalled();
}

Expand All @@ -130,17 +130,17 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1', 'col3', 'col4', 'hidden']);
expect(component.selectedColumns).toEqual(['col1', 'col3', 'col4', 'hidden']);

selectingDifferentColumnsWillPersistThem(['col1', 'col3', 'col4', 'hidden']);
}));

it('should select all valid selectedColumns', fakeAsync(() => {
component.selectedColumns = ['col1', 'invalid-column'];
it('should select all valid initialColumns', fakeAsync(() => {
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1']);
expect(component.selectedColumns).toEqual(['col1']);

selectingDifferentColumnsWillPersistThem(['col1']);
}));
Expand All @@ -150,16 +150,16 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col2', 'col4']);
expect(component.selectedColumns).toEqual(['col2', 'col4']);
}));

it('should reload selection from persistence even with @Input', fakeAsync(() => {
mockColumnsInPersistence();
component.selectedColumns = ['col1', 'invalid-column'];
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col2', 'col4']);
expect(component.selectedColumns).toEqual(['col2', 'col4']);
}));
});

Expand All @@ -169,18 +169,18 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1', 'col3', 'col4', 'hidden']);
expect(component.selectedColumns).toEqual(['col1', 'col3', 'col4', 'hidden']);

selectingDifferentColumnsWillNotPersistThem(['col1', 'col3', 'col4', 'hidden']);
}));

it('should select all valid selectedColumns', fakeAsync(() => {
it('should select all valid initialColumns', fakeAsync(() => {
component.persistSearch = false;
component.selectedColumns = ['col1', 'invalid-column'];
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1']);
expect(component.selectedColumns).toEqual(['col1']);

selectingDifferentColumnsWillNotPersistThem(['col1']);
}));
Expand All @@ -191,23 +191,23 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1', 'col3', 'col4', 'hidden']);
expect(component.selectedColumns).toEqual(['col1', 'col3', 'col4', 'hidden']);
}));

it('should not reload selection from persistence even with @Input', fakeAsync(() => {
component.persistSearch = false;
mockColumnsInPersistence();
component.selectedColumns = ['col1', 'invalid-column'];
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col1']);
expect(component.selectedColumns).toEqual(['col1']);
}));
});
});

describe('with route data for col3', () => {
beforeEach(waitForAsync(() => createComponent({selectedColumns: ['col3', 'invalid-column']})));
beforeEach(waitForAsync(() => createComponent({initialColumns: ['col3', 'invalid-column']})));

it('should create', () => {
expect(component).toBeTruthy();
Expand All @@ -218,17 +218,17 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col3']);
expect(component.selectedColumns).toEqual(['col3']);

selectingDifferentColumnsWillPersistThem(['col3']);
}));

it('should ignore direct @Input and select col3 via route data', fakeAsync(() => {
component.selectedColumns = ['col1', 'invalid-column'];
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col3']);
expect(component.selectedColumns).toEqual(['col3']);

selectingDifferentColumnsWillPersistThem(['col3']);
}));
Expand All @@ -238,16 +238,16 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col2', 'col4']);
expect(component.selectedColumns).toEqual(['col2', 'col4']);
}));

it('should reload selection from persistence even with @Input', fakeAsync(() => {
mockColumnsInPersistence();
component.selectedColumns = ['col1', 'invalid-column'];
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col2', 'col4']);
expect(component.selectedColumns).toEqual(['col2', 'col4']);
}));
});

Expand All @@ -257,18 +257,18 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col3']);
expect(component.selectedColumns).toEqual(['col3']);

selectingDifferentColumnsWillNotPersistThem(['col3']);
}));

it('should ignore direct @Input and select col3 via route data', fakeAsync(() => {
component.persistSearch = false;
component.selectedColumns = ['col1', 'invalid-column'];
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col3']);
expect(component.selectedColumns).toEqual(['col3']);

selectingDifferentColumnsWillNotPersistThem(['col3']);
}));
Expand All @@ -279,17 +279,17 @@ describe('NaturalAbstractList', () => {
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col3']);
expect(component.selectedColumns).toEqual(['col3']);
}));

it('should not reload selection from persistence even with @Input', fakeAsync(() => {
component.persistSearch = false;
mockColumnsInPersistence();
component.selectedColumns = ['col1', 'invalid-column'];
component.initialColumns = ['col1', 'invalid-column'];
fixture.detectChanges();
tick(1000);

expect(component.columnsForTable).toEqual(['col3']);
expect(component.selectedColumns).toEqual(['col3']);
}));
});
});
Expand Down
33 changes: 19 additions & 14 deletions projects/natural/src/lib/classes/abstract-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function unwrapNavigable(item: MaybeNavigable): Literal {
* Components inheriting from this class can be used as standalone with input attributes.
*
* Usage :
* <natural-my-listing [forcedVariables]="{filter:...}" [selectedColumns]="['col1']" [persistSearch]="false">
* <natural-my-listing [forcedVariables]="{filter:...}" [initialColumns]="['col1']" [persistSearch]="false">
*/

// @dynamic
Expand Down Expand Up @@ -77,7 +77,7 @@ export class NaturalAbstractList<
/**
* Columns list after interaction with <natural-columns-picker>
*/
public columnsForTable: string[] = [];
private _selectedColumns: string[] = [];

/**
* The default column selection that automatically happened after <natural-columns-picker> initialization
Expand All @@ -89,7 +89,7 @@ export class NaturalAbstractList<
*
* Changing this value after initialization will have no effect at all
*/
@Input() public selectedColumns?: string[];
@Input() public initialColumns?: string[];

/**
* Source of the list
Expand Down Expand Up @@ -419,7 +419,7 @@ export class NaturalAbstractList<
* Uses data provided by router such as:
*
* - `route.data.forcedVariables`
* - `route.data.selectedColumns`
* - `route.data.initialColumns`
*/
protected initFromRoute(): void {
// Variables
Expand All @@ -428,8 +428,8 @@ export class NaturalAbstractList<
}

// Columns
if (this.route.snapshot.data.selectedColumns) {
this.selectedColumns = this.route.snapshot.data.selectedColumns;
if (this.route.snapshot.data.initialColumns) {
this.initialColumns = this.route.snapshot.data.initialColumns;
}
}

Expand Down Expand Up @@ -461,12 +461,6 @@ export class NaturalAbstractList<
this.variablesManager.set('sorting', {sorting} as ExtractVall<TService>);
}

// Columns
const persistedColumns = this.persistenceService.get('col', this.route, storageKey);
if (typeof persistedColumns === 'string') {
this.selectedColumns = persistedColumns.split(',');
}

// Natural search : ns
this.naturalSearchSelections = fromUrl(this.persistenceService.get('ns', this.route, storageKey));
this.translateSearchAndRefreshList(this.naturalSearchSelections, true);
Expand Down Expand Up @@ -541,8 +535,12 @@ export class NaturalAbstractList<
}
}

public selectColumns(columns: string[]): void {
this.columnsForTable = columns;
public get selectedColumns(): string[] {
return this._selectedColumns;
}

public set selectedColumns(columns: string[]) {
this._selectedColumns = columns;

if (!this.persistSearch || this.isPanel) {
return;
Expand All @@ -551,6 +549,13 @@ export class NaturalAbstractList<
// The first selection we receive is the default one made by <natural-columns-picker>
if (!this.defaultSelectedColumns) {
this.defaultSelectedColumns = columns;

// Now that we know the defaults, we can try to reload from persistence
const storageKey = this.getStorageKey();
const persistedColumns = this.persistenceService.get('col', this.route, storageKey);
if (typeof persistedColumns === 'string') {
this.selectedColumns = persistedColumns.split(',');
}
} else {
// Persist only if wanted columns are different from default selection
const value = isEqual(this.defaultSelectedColumns, columns) ? null : columns.join(',');
Expand Down
30 changes: 7 additions & 23 deletions projects/natural/src/lib/modules/columns-picker/columns-picker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,35 +28,19 @@ export class NaturalColumnsPickerComponent implements AfterViewInit, OnDestroy {
}

/**
* Define preselected (checked) columns at start
*/
private _selections?: string[];
@Input()
public set selections(columns: string[] | undefined) {
this._selections = columns;

if (!columns || !this.availableColumns) {
return;
}

this.selection = columns;
this.updateColumns();
}

/**
* Emit a list of column keys whenever the selection changes in the dropdown menu
* Emit a list of column keys whenever the selection changes
*/
@Output() public readonly selectionChange = new EventEmitter<string[]>();
@Output() public readonly defaultSelectionChange = new EventEmitter<string[]>();

/**
* Available columns are defined by options in the template
* Filter available columns
*/
@Input() public initialSelection?: string[];

@ContentChildren(NaturalColumnsPickerColumnDirective)
public availableColumns: QueryList<NaturalColumnsPickerColumnDirective> | null = null;

/**
* Displayed options in the dropdown menu
*/
public displayedColumns: NaturalColumnsPickerColumnDirective[] = [];

private ngUnsubscribe = new Subject<void>();
Expand All @@ -73,15 +57,15 @@ export class NaturalColumnsPickerComponent implements AfterViewInit, OnDestroy {

private initColumns(): void {
this.availableColumns?.forEach(col => {
col.checked = this._selections?.length ? this._selections.includes(col.key) : col.checked;
col.checked = this.initialSelection ? this.initialSelection.includes(col.key) : col.checked;
});

// Show options only for columns that are not hidden
this.displayedColumns = this.availableColumns?.filter(col => !col.hidden) ?? [];
}

public updateColumns(): void {
const selectedColumns = this.availableColumns?.filter(col => col.checked).map(col => col.key);

this.selectionChange.emit(selectedColumns);
}

Expand Down
2 changes: 1 addition & 1 deletion src/app/app-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const routes: Routes = [
component: ListComponent,
data: {
title: 'Listing of something else',
selectedColumns: ['name', 'description', 'hidden'],
initialColumns: ['name', 'description', 'hidden'],
},
},
],
Expand Down
2 changes: 1 addition & 1 deletion src/app/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
</a>

<a
[routerLink]="['/nested/anyValue', {cat: 'cat'}, 'list', {dog: 'dog'}]"
[routerLink]="['/nested/listParamValue', {cat: 'cat'}, 'list', {dog: 'dog'}]"
mat-list-item
>
<natural-icon mat-list-icon name="list"></natural-icon>
Expand Down
Loading

0 comments on commit eab49e6

Please sign in to comment.