Skip to content

Commit fdcb19c

Browse files
dkamburovdkamburov
authored
Merge pull request #3071 from IgniteUI/pbozhinov/sample-3065
Validator Service Simple Sample
2 parents c947515 + 11f9837 commit fdcb19c

21 files changed

Lines changed: 327 additions & 84 deletions

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,45 @@
11
/* eslint-disable max-len */
22
/* eslint-disable @typescript-eslint/naming-convention */
3-
import {CommonModule} from '@angular/common';
4-
import {HttpClientModule} from '@angular/common/http';
5-
import {Router,
6-
RouterModule} from '@angular/router';
7-
import {IgxActionStripModule,
8-
IgxAvatarModule,
9-
IgxBadgeModule,
10-
IgxButtonGroupModule,
11-
IgxButtonModule,
12-
IgxCheckboxModule,
13-
IgxChipsModule,
14-
IgxComboModule,
15-
IgxCsvExporterService,
16-
IgxDatePickerModule,
17-
IgxDialogModule,
18-
IgxDividerModule,
19-
IgxDragDropModule,
20-
IgxExcelExporterService,
21-
IgxExpansionPanelModule,
22-
IgxFocusModule,
23-
IgxGridModule,
24-
IgxIconModule,
25-
IgxInputGroupModule,
26-
IgxListModule,
27-
IgxOverlayService,
28-
IgxProgressBarModule,
29-
IgxRadioModule,
30-
IgxRippleModule,
31-
IgxSelectModule,
32-
IgxSnackbarModule,
33-
IgxSwitchModule,
34-
IgxTabsModule,
35-
IgxToastModule,
36-
IgxTooltipModule,
37-
IgxToggleModule} from 'igniteui-angular';
38-
import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing';
3+
import { CommonModule } from '@angular/common';
4+
import { HttpClientModule } from '@angular/common/http';
5+
import {
6+
Router,
7+
RouterModule
8+
} from '@angular/router';
9+
import {
10+
IgxActionStripModule,
11+
IgxAvatarModule,
12+
IgxBadgeModule,
13+
IgxButtonGroupModule,
14+
IgxButtonModule,
15+
IgxCheckboxModule,
16+
IgxChipsModule,
17+
IgxComboModule,
18+
IgxCsvExporterService,
19+
IgxDatePickerModule,
20+
IgxDialogModule,
21+
IgxDividerModule,
22+
IgxDragDropModule,
23+
IgxExcelExporterService,
24+
IgxExpansionPanelModule,
25+
IgxFocusModule,
26+
IgxGridModule,
27+
IgxIconModule,
28+
IgxInputGroupModule,
29+
IgxListModule,
30+
IgxOverlayService,
31+
IgxProgressBarModule,
32+
IgxRadioModule,
33+
IgxRippleModule,
34+
IgxSelectModule,
35+
IgxSnackbarModule,
36+
IgxSwitchModule,
37+
IgxTabsModule,
38+
IgxToastModule,
39+
IgxTooltipModule,
40+
IgxToggleModule
41+
} from 'igniteui-angular';
42+
import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing';
3943
export class GridConfigGenerator implements IConfigGenerator {
4044
public additionalImports = {
4145
IgxPreventDocumentScrollModule: '../../src/app/directives/prevent-scroll.directive',
@@ -49,7 +53,7 @@ export class GridConfigGenerator implements IConfigGenerator {
4953
RemoteServiceVirt: '../../src/app/services/remoteVirtualization.service',
5054
FinancialDataService: '../../src/app/services/financial.service',
5155
CRUDService: '../../src/app/services/crud.service'
52-
};
56+
};
5357
public generateConfigs(): Config[] {
5458
const configs = new Array<Config>();
5559

@@ -196,7 +200,7 @@ export class GridConfigGenerator implements IConfigGenerator {
196200
appModuleConfig: new AppModuleConfig({
197201
imports: ['HttpClientModule', 'IgxAvatarModule', 'IgxBadgeModule', 'IgxButtonModule', 'IgxSnackbarModule',
198202
'IgxGridModule', 'IgxIconModule', 'IgxInputGroupModule', 'IgxSwitchModule', 'GridSelectionSampleComponent', 'IgxPreventDocumentScrollModule',
199-
'FinancialDataService'],
203+
'FinancialDataService'],
200204
ngDeclarations: ['GridSelectionSampleComponent'],
201205
ngImports: ['IgxPreventDocumentScrollModule', 'IgxAvatarModule', 'IgxBadgeModule', 'IgxButtonModule', 'IgxGridModule', 'IgxSnackbarModule',
202206
'IgxIconModule', 'IgxInputGroupModule', 'IgxSwitchModule', 'HttpClientModule'],
@@ -1266,7 +1270,7 @@ export class GridConfigGenerator implements IConfigGenerator {
12661270
appModuleConfig: new AppModuleConfig({
12671271
imports: ['GridAddRowSampleComponent', 'IgxGridModule', 'IgxPreventDocumentScrollModule', 'IgxActionStripModule', 'IgxInputGroupModule', 'IgxFocusModule'],
12681272
ngDeclarations: ['GridAddRowSampleComponent'],
1269-
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule','IgxActionStripModule', 'IgxInputGroupModule', 'IgxFocusModule']
1273+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxActionStripModule', 'IgxInputGroupModule', 'IgxFocusModule']
12701274
})
12711275
}));
12721276

@@ -1285,7 +1289,7 @@ export class GridConfigGenerator implements IConfigGenerator {
12851289
component: 'GridSelectComponent',
12861290
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/grid/grid-select/data.ts', '/src/app/grid/grid-select/characters.ts'],
12871291
appModuleConfig: new AppModuleConfig({
1288-
imports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxSelectModule', 'GridSelectComponent' ],
1292+
imports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxSelectModule', 'GridSelectComponent'],
12891293
ngDeclarations: ['GridSelectComponent'],
12901294
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxSelectModule']
12911295
})
@@ -1327,28 +1331,42 @@ export class GridConfigGenerator implements IConfigGenerator {
13271331
component: 'GridRowClassesComponent',
13281332
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/nwindData.ts'],
13291333
appModuleConfig: new AppModuleConfig({
1330-
imports: [ 'IgxGridModule', 'GridRowClassesComponent', 'IgxPreventDocumentScrollModule'],
1334+
imports: ['IgxGridModule', 'GridRowClassesComponent', 'IgxPreventDocumentScrollModule'],
13311335
ngDeclarations: ['GridRowClassesComponent'],
13321336
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
13331337
})
13341338
}));
13351339

13361340
configs.push(new Config({
13371341
component: 'GridRowStylesComponent',
1338-
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/services/financial.service.ts', '/src/app/data/financialData.ts'],
1342+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/services/financial.service.ts', '/src/app/data/financialData.ts'],
13391343
appModuleConfig: new AppModuleConfig({
1340-
imports: [ 'IgxGridModule', 'GridRowStylesComponent', 'IgxPreventDocumentScrollModule', 'FinancialDataService'],
1344+
imports: ['IgxGridModule', 'GridRowStylesComponent', 'IgxPreventDocumentScrollModule', 'FinancialDataService'],
13411345
ngDeclarations: ['GridRowStylesComponent'],
13421346
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule'],
13431347
ngProviders: ['FinancialDataService']
13441348
})
13451349
}));
13461350

1351+
configs.push(new Config({
1352+
component: 'GridValidatorServiceComponent',
1353+
additionalFiles: [
1354+
'/src/app/directives/prevent-scroll.directive.ts',
1355+
'/src/app/data/employeesData.ts'
1356+
1357+
],
1358+
appModuleConfig: new AppModuleConfig({
1359+
imports: ['GridValidatorServiceComponent', 'IgxGridModule', 'IgxFocusModule', 'IgxPreventDocumentScrollModule'],
1360+
ngDeclarations: ['GridValidatorServiceComponent'],
1361+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxFocusModule']
1362+
})
1363+
}));
1364+
13471365
configs.push(new Config({
13481366
component: 'GridColumnAutosizingComponent',
13491367
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/customers.ts'],
13501368
appModuleConfig: new AppModuleConfig({
1351-
imports: [ 'IgxGridModule', 'GridColumnAutosizingComponent', 'IgxPreventDocumentScrollModule'],
1369+
imports: ['IgxGridModule', 'GridColumnAutosizingComponent', 'IgxPreventDocumentScrollModule'],
13521370
ngDeclarations: ['GridColumnAutosizingComponent'],
13531371
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
13541372
})

‎live-editing/configs/HierarchicalGridConfigGenerator.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -934,6 +934,20 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
934934
})
935935
}));
936936

937+
configs.push(new Config({
938+
component: 'HierarchicalGridValidatorServiceComponent',
939+
additionalFiles: [
940+
'/src/app/directives/prevent-scroll.directive.ts',
941+
'/src/app/data/hierarchical-data.ts'
942+
],
943+
appModuleConfig: new AppModuleConfig({
944+
imports: ['HierarchicalGridValidatorServiceComponent', 'IgxHierarchicalGridModule', 'IgxPreventDocumentScrollModule'],
945+
ngDeclarations: ['HierarchicalGridValidatorServiceComponent'],
946+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
947+
})
948+
}));
949+
950+
937951
configs.push(new Config({
938952
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/hierarchical-data.ts'],
939953
appModuleConfig: new AppModuleConfig({

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,45 @@
11
/* eslint-disable @typescript-eslint/naming-convention */
22
/* eslint-disable max-len */
3-
import {IgxActionStripModule,
4-
IgxAvatarModule,
5-
IgxBadgeModule,
6-
IgxButtonGroupModule,
7-
IgxButtonModule,
8-
IgxCheckboxModule,
9-
IgxChipsModule,
10-
IgxCsvExporterService,
11-
IgxDatePickerModule,
12-
IgxDialogModule,
13-
IgxDragDropModule,
14-
IgxExcelExporterService,
15-
IgxGridModule,
16-
IgxIconModule,
17-
IgxInputGroupModule,
18-
IgxListModule,
19-
IgxOverlayService,
20-
IgxRadioModule,
21-
IgxRippleModule,
22-
IgxSelectModule,
23-
IgxSnackbarModule,
24-
IgxSwitchModule,
25-
IgxToastModule,
26-
IgxTooltipModule,
27-
IgxTreeGridModule,
28-
IgxToggleModule} from 'igniteui-angular';
29-
import {IgxSparklineCoreModule,
30-
IgxSparklineModule} from 'igniteui-angular-charts';
31-
import {Router, RouterModule} from '@angular/router';
32-
import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing';
3+
import {
4+
IgxActionStripModule,
5+
IgxAvatarModule,
6+
IgxBadgeModule,
7+
IgxButtonGroupModule,
8+
IgxButtonModule,
9+
IgxCheckboxModule,
10+
IgxChipsModule,
11+
IgxCsvExporterService,
12+
IgxDatePickerModule,
13+
IgxDialogModule,
14+
IgxDragDropModule,
15+
IgxExcelExporterService,
16+
IgxGridModule,
17+
IgxIconModule,
18+
IgxInputGroupModule,
19+
IgxListModule,
20+
IgxOverlayService,
21+
IgxRadioModule,
22+
IgxRippleModule,
23+
IgxSelectModule,
24+
IgxSnackbarModule,
25+
IgxSwitchModule,
26+
IgxToastModule,
27+
IgxTooltipModule,
28+
IgxTreeGridModule,
29+
IgxToggleModule
30+
} from 'igniteui-angular';
31+
import {
32+
IgxSparklineCoreModule,
33+
IgxSparklineModule
34+
} from 'igniteui-angular-charts';
35+
import { Router, RouterModule } from '@angular/router';
36+
import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing';
3337
export class TreeGridConfigGenerator implements IConfigGenerator {
3438
public additionalImports = {
3539
IgxPreventDocumentScrollModule: '../../src/app/directives/prevent-scroll.directive',
3640
RemoteValuesService: '../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service',
3741
TreeGridContextmenuComponent: '../../src/app/tree-grid/tree-grid-sorting-sample/tree-grid-contextmenu/tree-grid-contextmenu.component'
38-
};
42+
};
3943
public generateConfigs(): Config[] {
4044
const configs = new Array<Config>();
4145

@@ -789,9 +793,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
789793
appModuleConfig: new AppModuleConfig({
790794
imports: ['IgxPreventDocumentScrollModule', 'TreeGridCellSelectionComponent', 'IgxGridModule', 'IgxSwitchModule',
791795
'IgxIconModule', 'IgxButtonGroupModule', 'IgxAvatarModule', 'IgxTreeGridModule'],
792-
ngDeclarations: ['TreeGridCellSelectionComponent' ],
796+
ngDeclarations: ['TreeGridCellSelectionComponent'],
793797
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxIconModule', 'IgxSwitchModule',
794-
'IgxButtonGroupModule', 'IgxAvatarModule', 'IgxTreeGridModule']
798+
'IgxButtonGroupModule', 'IgxAvatarModule', 'IgxTreeGridModule']
795799
})
796800
}));
797801

@@ -1071,7 +1075,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
10711075
'IgxInputGroupModule', 'IgxCheckboxModule', 'IgxDatePickerModule', 'IgxActionStripModule'],
10721076
ngDeclarations: ['TreeGridAddRowSampleComponent'],
10731077
ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxDialogModule',
1074-
'IgxInputGroupModule', 'IgxCheckboxModule', 'IgxDatePickerModule', 'IgxActionStripModule']
1078+
'IgxInputGroupModule', 'IgxCheckboxModule', 'IgxDatePickerModule', 'IgxActionStripModule']
10751079
}),
10761080
component: 'TreeGridAddRowSampleComponent',
10771081
shortenComponentPathBy: '/tree-grid/'
@@ -1142,6 +1146,20 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
11421146
})
11431147
}));
11441148

1149+
configs.push(new Config({
1150+
component: 'TreeGridValidatorServiceComponent',
1151+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts',
1152+
'/src/app/data/utils.ts',
1153+
'/src/app/tree-grid/data/employees-flat.ts'
1154+
],
1155+
appModuleConfig: new AppModuleConfig({
1156+
imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridValidatorServiceComponent',
1157+
'IgxButtonModule'],
1158+
ngDeclarations: ['TreeGridValidatorServiceComponent'],
1159+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule']
1160+
})
1161+
}));
1162+
11451163
return configs;
11461164
}
11471165
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,6 @@ export const gridsRoutesData = {
118118
'grid-rowClasses-sample': { displayName: 'Grid rowClasses', parentName: 'Grid'},
119119
'grid-rowStyles-sample': { displayName: 'Grid rowStyles', parentName: 'Grid'},
120120
'grid-columnAutoResizing-sample': { displayName: 'Grid Column Autoresizing', parentName: 'Grid'},
121-
'grid-with-rating': { displayName: 'Grid with Rating', parentName: 'Rating' }
121+
'grid-with-rating': { displayName: 'Grid with Rating', parentName: 'Rating' },
122+
'grid-validator-service': { displayName: 'Grid Validator Service', parentName: 'Grid'}
122123
};

‎src/app/grid/grid-validator-service/grid-validator-service.component.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div class="top-row">
2+
<igx-switch [(ngModel)]="rowEdit">Row edit</igx-switch>
3+
</div>
4+
<div class="grid-wrapper">
5+
<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'480px'" [autoGenerate]="false" [batchEditing]="true"
6+
[rowEditable]="rowEdit" [primaryKey]="'id'">
7+
<igx-column field="Avatar" header="Photo" dataType="string" width="80" [editable]="false">
8+
<ng-template igxCell let-cell="cell">
9+
<div>
10+
<igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
11+
</div>
12+
</ng-template>
13+
</igx-column>
14+
<igx-column field="name" header="Name" [editable]="true" required></igx-column>
15+
<igx-column field="company" header="Company" [editable]="true"></igx-column>
16+
<igx-column field="email" width="190" header="Email" [editable]="true" required email></igx-column>
17+
<igx-column field="fax" header="Phone" [editable]="true"></igx-column>
18+
<igx-column field="created_on" header="Date of Registration" width="170" [editable]="true"
19+
[dataType]="'date'" required>
20+
<ng-template igxCell let-cell>
21+
{{ cell | date: 'longDate' }}
22+
</ng-template>
23+
</igx-column>
24+
<igx-column field="last_activity" header="Last Active" width="170" [editable]="true" [dataType]="'date'"
25+
required>
26+
<ng-template igxCell let-cell>
27+
{{ cell | date: 'longDate' }}
28+
</ng-template>
29+
</igx-column>
30+
<igx-column field="estimated_sales" header="Estimated Sales" [editable]="true" [dataType]="'number'" required min="0"></igx-column>
31+
<igx-column field="deals_lost" header="Deals Lost" [editable]="true" [dataType]="'number'" required min="0">
32+
</igx-column>
33+
<igx-column field="deals_won" header="Deals Won" [editable]="true" [dataType]="'number'" required min="0">
34+
</igx-column>
35+
<igx-column field="deals_pending" header="Deals Pending" [editable]="true" [dataType]="'number'" required
36+
min="0"></igx-column>
37+
</igx-grid>
38+
</div>

‎src/app/grid/grid-validator-service/grid-validator-service.component.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.top-row,
2+
.grid-wrapper {
3+
padding: 16px;
4+
}
5+
6+
.grid-wrapper {
7+
margin: 0 auto;
8+
padding: 16px;
9+
}

‎src/app/grid/grid-validator-service/grid-validator-service.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component } from '@angular/core';
2+
import { employeesData } from '../../data/employeesData';
3+
4+
@Component({
5+
selector: 'app-grid-validator-service',
6+
styleUrls: ['./grid-validator-service.component.scss'],
7+
templateUrl: './grid-validator-service.component.html'
8+
})
9+
export class GridValidatorServiceComponent {
10+
public data: any[];
11+
public employeesData: any[];
12+
public rowEdit: boolean = true;
13+
14+
constructor() {
15+
this.data = employeesData;
16+
}
17+
}

0 commit comments

Comments
 (0)