Skip to content

Commit 5ea7d5e

Browse files
Svetloslav15Svetloslav15
committed
feat(grid): add sample with state persistance
1 parent a432961 commit 5ea7d5e

7 files changed

Lines changed: 192 additions & 2 deletions

File tree

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1421,6 +1421,17 @@ export class GridConfigGenerator implements IConfigGenerator {
14211421
})
14221422
}));
14231423

1424+
configs.push(new Config({
1425+
component: 'GridStatePersistenceSampleComponent',
1426+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/financialData.ts', '/src/app/services/financial.service.ts'],
1427+
appModuleConfig: new AppModuleConfig({
1428+
imports: ['GridStatePersistenceSampleComponent', 'IgxAvatarModule', 'IgxGridModule', 'IgxSwitchModule',
1429+
'IgxExcelExporterService', 'IgxCsvExporterService', 'IgxPreventDocumentScrollModule', 'FinancialDataService'],
1430+
ngDeclarations: ['GridStatePersistenceSampleComponent'],
1431+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxAvatarModule', 'IgxGridModule', 'IgxSwitchModule'],
1432+
ngProviders: ['FinancialDataService']
1433+
})
1434+
}));
14241435

14251436
return configs;
14261437
}

‎src/app/grid/grid-routes-data.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,5 +123,6 @@ export const gridsRoutesData = {
123123
'grid-cross-field-validator-service': { displayName: 'Grid Cross Field Validator Service ', parentName: 'Grid' },
124124
'grid-validation-style': { displayName: 'Grid with Validation Styles', parentName: 'Grid' },
125125
'grid-validator-service-extended': { displayName: 'Grid Validator Service Extended', parentName: 'Grid'},
126-
'grid-summary-export': { displayName: 'Grid Summary Export', parentName: 'Grid'}
126+
'grid-summary-export': { displayName: 'Grid Summary Export', parentName: 'Grid'},
127+
'grid-state-persistence': { displayName: 'Grid State Persistence', parentName: 'Grid'}
127128
};

‎src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<div class="switches">
2+
<button igxButton="raised" (click)="restoreState()">
3+
<igx-icon class="btn-icon">restore</igx-icon>
4+
<span>Restore</span>
5+
</button>
6+
<button igxButton="raised" (click)="saveState()">
7+
<igx-icon class="btn-icon">save</igx-icon>
8+
<span>Save</span>
9+
</button>
10+
<button igxButton="raised" (click)="clearStorage()">
11+
<igx-icon class="btn-icon">delete</igx-icon>
12+
<span>Clear</span>
13+
</button>
14+
</div>
15+
16+
<div class="grid__wrapper">
17+
<igx-grid [igxPreventDocumentScroll]="true" [igxGridState]="options" [sortStrategy]="customStrategy" #grid [data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false' [allowFiltering]="true">
18+
<igx-column [field]="'Category'" [width]="'120px'"></igx-column>
19+
<igx-column [field]="'Type'" [width]="'150px'" [filterable]='false'></igx-column>
20+
<igx-column [field]="'Open Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency">
21+
</igx-column>
22+
<igx-column [field]="'Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency"></igx-column>
23+
<igx-column [field]="'Change'" [width]="'120px'" dataType="number" [headerClasses]="'headerAlignSyle'">
24+
<ng-template igxHeader>
25+
<span>Change</span>
26+
</ng-template>
27+
28+
<ng-template igxCell let-val>
29+
<div class="currency-badge-container">
30+
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
31+
<igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
32+
<span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}</span>
33+
</div>
34+
</ng-template>
35+
</igx-column>
36+
<igx-column [field]="'Change(%)'" [width]="'130px'" dataType="number" [formatter]="formatNumber">
37+
<ng-template igxHeader>
38+
<span>Change(%)</span>
39+
</ng-template>
40+
41+
<ng-template igxCell let-val>
42+
<span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
43+
</ng-template>
44+
</igx-column>
45+
<igx-column [field]="'Change On Year(%)'" [width]="'150px'" dataType="number" [formatter]="formatNumber">
46+
<ng-template igxCell let-val>
47+
<div class="currency-badge-container">
48+
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
49+
<igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
50+
<span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
51+
</div>
52+
</ng-template>
53+
</igx-column>
54+
<igx-column [field]="'Buy'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
55+
<igx-column [field]="'Sell'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
56+
<igx-column [field]="'Spread'" [width]="'130px'" dataType="number" [formatter]="formatNumber"></igx-column>
57+
<igx-column [field]="'Volume'" [width]="'130px'" dataType="number" [formatter]="formatNumber"></igx-column>
58+
<igx-column [field]="'High(D)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
59+
<igx-column [field]="'Low(D)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
60+
<igx-column [field]="'High(Y)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
61+
<igx-column [field]="'Low(Y)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
62+
<igx-column [field]="'Start(Y)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
63+
</igx-grid>
64+
<br />
65+
</div>

‎src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.cellAlignSyle {
2+
text-align: right;
3+
float:right;
4+
}
5+
.cellAlignSyle > span {
6+
float:right;
7+
}
8+
.up {
9+
color: green;
10+
}
11+
.down {
12+
color: red;
13+
}
14+
.headerAlignSyle {
15+
text-align: right !important;
16+
}
17+
18+
.grid__wrapper {
19+
margin: 0 auto;
20+
padding: 16px;
21+
}
22+
23+
.currency-badge-container {
24+
width: 80px;
25+
float: right;
26+
}
27+
28+
.badge-left {
29+
float: left;
30+
}
31+
32+
.switches {
33+
display: flex;
34+
justify-content: flex-start;
35+
align-items: center;
36+
flex: 1 0 0%;
37+
min-width: 100%;
38+
padding-right: 20px;
39+
font-size: 0.9rem;
40+
margin: 10px;
41+
42+
>button {
43+
margin-right: 10px;
44+
}
45+
}

‎src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
3+
import { IGridStateOptions, IgxGridStateDirective, IgxGridComponent, NoopSortingStrategy } from 'igniteui-angular';
4+
import { Observable } from 'rxjs';
5+
import { take } from 'rxjs/operators';
6+
import { FinancialDataService } from '../../services/financial.service';
7+
8+
@Component({
9+
providers: [FinancialDataService],
10+
selector: 'app-grid-state-persistance-sample',
11+
styleUrls: ['./grid-state-persistance-sample.component.scss'],
12+
templateUrl: 'grid-state-persistance-sample.component.html'
13+
})
14+
15+
export class GridStatePersistenceSampleComponent {
16+
@ViewChild('grid', { static: true })
17+
public grid: IgxGridComponent;
18+
@ViewChild(IgxGridStateDirective, { static: true })
19+
public state!: IgxGridStateDirective;
20+
21+
public data: Observable<any[]>;
22+
public customStrategy = NoopSortingStrategy.instance();
23+
public options: IGridStateOptions = {
24+
rowSelection: true,
25+
filtering: true,
26+
sorting: true,
27+
columnSelection: true
28+
};
29+
30+
constructor(private localService: FinancialDataService) {
31+
this.localService.getData(100000);
32+
this.data = this.localService.records;
33+
}
34+
35+
public formatNumber(value: number) {
36+
return value.toFixed(2);
37+
}
38+
39+
public formatCurrency(value: number) {
40+
return '$' + value.toFixed(2);
41+
}
42+
43+
public saveState() {
44+
const state = this.state.getState() as string;
45+
window.sessionStorage.setItem('grid-state', state);
46+
}
47+
48+
public restoreState() {
49+
const state = window.sessionStorage.getItem('grid-state');
50+
this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
51+
parsedState.sorting.forEach(expression => expression.strategy = NoopSortingStrategy.instance());
52+
});
53+
this.state.setState(state as string);
54+
}
55+
56+
public clearStorage() {
57+
window.sessionStorage.removeItem('grid-state');
58+
}
59+
}

‎src/app/grid/grids-routing.module.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ import { GridValidatorServiceCrossFieldComponent } from './grid-validator-servic
129129
import { GridValidationStyleComponent } from './grid-validation-style/grid-validation-style.component';
130130
import { GridValidatorServiceExtendedComponent } from './grid-validator-service-extended/grid-validator-service-extended.component';
131131
import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
132+
import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component';
133+
132134
// tslint:enable:max-line-length
133135

134136
export const gridsRoutes: Routes = [
@@ -746,6 +748,11 @@ export const gridsRoutes: Routes = [
746748
component: GridSummaryExportComponent,
747749
data: gridsRoutesData['grid-summary-export'],
748750
path: 'grid-summary-export'
751+
},
752+
{
753+
component: GridStatePersistenceSampleComponent,
754+
data: gridsRoutesData['grid-state-persistence'],
755+
path: 'grid-state-persistence'
749756
}
750757
];
751758

‎src/app/grid/grids.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ import { GridValidatorServiceCrossFieldComponent } from './grid-validator-servic
138138
import { GridValidationStyleComponent } from './grid-validation-style/grid-validation-style.component';
139139
import { GridValidatorServiceExtendedComponent, PhoneFormatDirective } from './grid-validator-service-extended/grid-validator-service-extended.component';
140140
import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
141+
import { GridStatePersistenceSampleComponent } from './grid-state-persistence-sample/grid-state-persistance-sample.component';
141142

142143
@NgModule({
143144
declarations: [
@@ -266,7 +267,8 @@ import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-e
266267
GridValidationStyleComponent,
267268
GridValidatorServiceExtendedComponent,
268269
PhoneFormatDirective,
269-
GridSummaryExportComponent
270+
GridSummaryExportComponent,
271+
GridStatePersistenceSampleComponent
270272
],
271273
imports: [
272274
CommonModule,

0 commit comments

Comments
 (0)