| ID | 8 |Name | 9 |Head Chapter? | 10 |Guild | 11 |Founded | 12 |
|---|---|---|---|---|
| {{chapter.id}} | 17 |{{chapter.name}} | 18 |{{chapter.headChapter ? 'Yes' : 'No'}} | 19 |{{guilds[ chapter.guildId ].name}} | 20 |{{chapter.founded}} | 21 |
| ID | 9 |Name | 10 |Incorporated | 11 |Expenses | 12 |Revenue | 13 |Profit | 14 |Actions | 16 ||
|---|---|---|---|---|---|---|---|
| {{guild.id}} | 21 |{{guild.name}} | 22 |{{guild.incorporationYear}} | 23 |{{guild.expenses | currency:USD:true:'.2-2' }} | 24 |{{guild.revenue | currency:USD:true:'.2-2' }} | 25 |{{guild.profit | currency:USD:true:'.2-2'}} | 26 |{{guild.email}} | 27 |Edit | 28 |
| ID | 8 |First Name | 9 |Last Name | 10 |Guild | 11 |Chapter | 12 |Active? | 13 |
|---|---|---|---|---|---|
| {{member.id}} | 18 |{{member.firstName}} | 19 |{{member.lastName}} | 20 |{{guilds[chapters[member.chapterId].guildId].name}} | 21 |{{chapters[member.chapterId].name}} | 22 |{{member.isActive ? 'Yes' : 'No'}} | 23 |
{{chapterList}}
3 |
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-list/chapter-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { SandboxService } from '../sandbox.service';
3 |
4 | @Component({
5 | moduleId: module.id,
6 | selector: 'app-chapter-list',
7 | templateUrl: 'chapter-list.component.html',
8 | styleUrls: ['chapter-list.component.css']
9 | })
10 | export class ChapterListComponent implements OnInit {
11 |
12 | chapterList;
13 |
14 | constructor( private sandboxService: SandboxService ) { }
15 |
16 | ngOnInit() {
17 | this.sandboxService.getChapters().then( chapters => this.chapterList = JSON.stringify( chapters, null, 2 ) );
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from './chapter-list.component';
2 |
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-member-list/chapter-member-list.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bcswartz/angular2-sandbox-guildrunner/c57c5ff1083b1b6ae5a1b6d5ae93adc9e547efa8/src/app/sandbox/chapter-member-list/chapter-member-list.component.css
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-member-list/chapter-member-list.component.html:
--------------------------------------------------------------------------------
1 | {{memberList}}
3 |
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-member-list/chapter-member-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { SandboxService } from '../sandbox.service';
3 |
4 | @Component({
5 | moduleId: module.id,
6 | selector: 'app-chapter-member-list',
7 | templateUrl: 'chapter-member-list.component.html',
8 | styleUrls: ['chapter-member-list.component.css']
9 | })
10 | export class ChapterMemberListComponent implements OnInit {
11 |
12 | memberList;
13 |
14 | constructor( private sandboxService: SandboxService ) { }
15 |
16 | ngOnInit() {
17 | this.sandboxService.getChapterMembers().then( members => this.memberList = JSON.stringify( members, null, 2 ) );
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-member-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from './chapter-member-list.component';
2 |
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-reactive-form/chapter-reactive-form.component.css:
--------------------------------------------------------------------------------
1 | div.alert-danger {
2 | padding: 8px;
3 | }
4 |
5 | ul {
6 | list-style-type: none;
7 | margin-left: 0px;
8 | padding-left: 0px;
9 | }
10 |
11 | .form-group {
12 | padding-bottom:7px;
13 | }
14 |
15 | .rawErrors {
16 | border: 1px solid #999;
17 | margin-top:6px;
18 | padding:4px;
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/sandbox/chapter-reactive-form/chapter-reactive-form.component.html:
--------------------------------------------------------------------------------
1 | {{guildList}}
3 |
4 |
--------------------------------------------------------------------------------
/src/app/sandbox/guild-list/guild-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { SandboxService } from '../sandbox.service';
3 |
4 | @Component({
5 | moduleId: module.id,
6 | selector: 'app-guild-list',
7 | templateUrl: 'guild-list.component.html',
8 | styleUrls: ['guild-list.component.css']
9 | })
10 | export class GuildListComponent implements OnInit {
11 |
12 | guildList;
13 |
14 | constructor( private sandboxService: SandboxService ) { }
15 |
16 | ngOnInit() {
17 | this.sandboxService.getGuilds().then( guilds => this.guildList = JSON.stringify( guilds, null, 2 ) );
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/sandbox/guild-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from './guild-list.component';
2 |
--------------------------------------------------------------------------------
/src/app/sandbox/sandbox.module.ts:
--------------------------------------------------------------------------------
1 | //Modules and routing imports
2 | import { NgModule } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { sandboxRouting } from './sandbox.routing'
5 | import { ReactiveFormsModule } from '@angular/forms';
6 |
7 | //Declarations (components, directives, and pipes)
8 | import { GuildListComponent } from "./guild-list/guild-list.component";
9 | import { ChapterMemberListComponent } from "./chapter-member-list/chapter-member-list.component";
10 | import { ChapterListComponent } from "./chapter-list/chapter-list.component";
11 | import { ChapterReactiveFormComponent } from "./chapter-reactive-form/chapter-reactive-form.component";
12 |
13 | //Providers (services
14 | import { SandboxService } from './sandbox.service';
15 |
16 |
17 | @NgModule({
18 | imports: [
19 | sandboxRouting,
20 | BrowserModule,
21 | ReactiveFormsModule
22 | ],
23 |
24 | declarations: [
25 | GuildListComponent,
26 | ChapterListComponent,
27 | ChapterMemberListComponent,
28 | ChapterReactiveFormComponent
29 | ],
30 |
31 | providers: [
32 | SandboxService
33 | ]
34 | })
35 |
36 | export class SandboxModule {}
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/app/sandbox/sandbox.routing.ts:
--------------------------------------------------------------------------------
1 | import { Routes, RouterModule } from '@angular/router';
2 |
3 | import { GuildListComponent} from "./guild-list/guild-list.component";
4 | import { ChapterListComponent } from "./chapter-list/chapter-list.component";
5 | import { ChapterMemberListComponent } from "./chapter-member-list/chapter-member-list.component";
6 | import { ChapterReactiveFormComponent } from "./chapter-reactive-form/chapter-reactive-form.component";
7 |
8 |
9 | const sandboxRoutes: Routes = [
10 | { path: 'sandbox-guildlist', component: GuildListComponent },
11 | { path: 'sandbox-chapterlist', component: ChapterListComponent },
12 | { path: 'sandbox-memberlist', component: ChapterMemberListComponent},
13 | { path: 'sandbox-reactivechapter', component: ChapterReactiveFormComponent }
14 | ];
15 |
16 | export const sandboxRouting = RouterModule.forChild( sandboxRoutes );
17 |
--------------------------------------------------------------------------------
/src/app/sandbox/sandbox.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http } from '@angular/http';
3 |
4 | import 'rxjs/add/operator/toPromise';
5 |
6 | @Injectable()
7 | export class SandboxService {
8 |
9 | private guildUrl = 'app/guilds';
10 | private chapterUrl = 'app/chapters';
11 | private memberUrl = 'app/chapterMembers';
12 |
13 | constructor( private http: Http) {}
14 |
15 | /*
16 | So this gets the raw data (useful for diagnostic display), but if we type it to the object, then what?
17 | */
18 | getGuilds() {
19 | return this.http.get( this.guildUrl )
20 | .toPromise()
21 | .then(response => response.json().data )
22 | .catch(this.handleError);
23 | }
24 |
25 | getChapters() {
26 | return this.http.get( this.chapterUrl )
27 | .toPromise()
28 | .then(response => response.json().data )
29 | .catch(this.handleError);
30 | }
31 |
32 | getChapterMembers() {
33 | return this.http.get( this.memberUrl )
34 | .toPromise()
35 | .then(response => response.json().data )
36 | .catch(this.handleError);
37 | }
38 |
39 |
40 | private handleError(error: any) {
41 | console.error('An error occurred', error);
42 | return Promise.reject(error.message || error);
43 | }
44 |
45 | }
46 |
--------------------------------------------------------------------------------
/src/app/shared/index.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bcswartz/angular2-sandbox-guildrunner/c57c5ff1083b1b6ae5a1b6d5ae93adc9e547efa8/src/app/shared/index.ts
--------------------------------------------------------------------------------
/src/app/vadacl/interfaces.ts:
--------------------------------------------------------------------------------
1 | /*
2 | Interfaces that can be used by the TypeScript compiler to enforce the proper key/value pairs for the validation options.
3 | */
4 | interface RequiredSettings {
5 | message ?: string
6 | }
7 |
8 | interface MinLengthSettings {
9 | minLength : number,
10 | message ?: string
11 | }
12 |
13 | interface MaxLengthSettings {
14 | maxLength : number,
15 | message ?: string
16 | }
17 |
18 | interface PatternSettings {
19 | pattern : string,
20 | message ?: string
21 | }
22 |
23 | interface WithinLengthSettings {
24 | minLength : number,
25 | maxLength : number,
26 | message ?: string
27 | }
28 |
29 | /*
30 | Interface for defining any and all known validation methods for a given domain object property
31 | */
32 | interface PropertyValidations {
33 | required ?: RequiredSettings,
34 | minLength ?: MinLengthSettings,
35 | maxLength ?: MaxLengthSettings,
36 | pattern ?: PatternSettings,
37 | withinLength ?: WithinLengthSettings
38 | }
39 |
40 | /*
41 | Interface that can be implemented by domain classes to enforce the presence of a "validations" property object literal.
42 | */
43 | interface Validatable {
44 | validations: { [ index: string ]: any };
45 | }
46 |
47 | export { PropertyValidations, Validatable }
48 |
49 |
--------------------------------------------------------------------------------
/src/app/vadacl/messages/messages-en.ts:
--------------------------------------------------------------------------------
1 | let Messages = {
2 |
3 | /* DEFAULT VALIDATOR ERROR MESSAGES */
4 | required: 'A value is required',
5 | minLength: 'The value is too short.',
6 | maxLength: 'The value is too long.',
7 | pattern: 'The value does not match the pattern.',
8 | withinLength: 'The value does not meet the size requirements',
9 |
10 | };
11 |
12 | export { Messages };
13 |
14 |
--------------------------------------------------------------------------------
/src/app/vadacl/patterns/patterns-en.ts:
--------------------------------------------------------------------------------
1 | let Patterns = {
2 | /*
3 | Define pattern strings used throughout your application (email, url, etc.).
4 | */
5 | };
6 |
7 | export { Patterns }
8 |
--------------------------------------------------------------------------------
/src/app/vadacl/vadacl.ts:
--------------------------------------------------------------------------------
1 |
2 | import { AbstractControl, FormGroup, FormArray } from '@angular/forms';
3 | import { ValidationMethods } from './validation-methods';
4 |
5 | /*
6 | The Vadacl class can be used as the superclass for a component that implements validation, or as an injected service.
7 | */
8 | export class Vadacl {
9 |
10 | applyRules(domainClass: any, propertyName: string, validationOverrides ?: any ) : any[] {
11 | let validators: any[] = [];
12 |
13 | //Collect the property validations defined in the domain class (if any).
14 | let propertyValidations = domainClass.validations ? ( domainClass.validations[ propertyName ] || {} ) : {};
15 |
16 | //Apply any validation overrides and additional validations.
17 | let mergedValidations = this.mergeValidations( propertyValidations, validationOverrides );
18 |
19 | for( let mv in mergedValidations ) {
20 | //Parse the argument values to apply to the validation method.
21 | let validatorArguments = this.getValidatorArguments( this.getMethodDeclaredArguments( ValidationMethods[ mv ] ), mergedValidations[ mv ] );
22 | /*
23 | Execute the validation method, which will return a validator that the Angular reactive form classes will
24 | trigger on a value change, and add that validator to the validators array.
25 | */
26 | validators.push( ValidationMethods[ mv ].apply( null, validatorArguments ) );
27 | }
28 |
29 | return validators;
30 | }
31 |
32 | /*
33 | Converts function to a string and then uses regular expressions to pull out the argument names. The argument names
34 | are denoted as object literal properties with values equal to their position in the list of arguments (the positions
35 | are needed to help place the validation method argument values in the correct order).
36 | */
37 | getMethodDeclaredArguments( fn: any ) : any {
38 | let methodDeclarationRegExp = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
39 | let argumentSplit = /,/;
40 | let stripCommentsRegExp = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
41 |
42 | let methodArguments = {};
43 | let argumentPosition = 0;
44 |
45 | let methodAsString = fn.toString().replace( stripCommentsRegExp, '' );
46 | let methodDeclaration = methodAsString.match( methodDeclarationRegExp );
47 | let argumentArray = methodDeclaration[ 1 ].split( argumentSplit );
48 |
49 | for( let argIndex in argumentArray) {
50 | methodArguments[ argumentArray[ argIndex ].replace(/\s/g,'') ] = argumentPosition++;
51 | }
52 |
53 | return methodArguments;
54 | }
55 |
56 | /*
57 | The arguments passed into the call to the validation method are organized in the proper order based on the order
58 | of the argument names in the validation method.
59 | */
60 | getValidatorArguments( argumentDeclarations: any, validatorArguments: any ) : any[] {
61 | let executionArguments: any[] = [];
62 | for( let arg in argumentDeclarations ) {
63 | executionArguments[ argumentDeclarations[ arg ] ] = validatorArguments[ arg ] || null;
64 | }
65 | return executionArguments;
66 | }
67 |
68 | /*
69 | Merges the previous validation settings with any new settings.
70 | */
71 | mergeValidations( baseValidations: any, overrideValidations: any ) : any {
72 | for( let validation in overrideValidations ) {
73 | if( baseValidations[ validation ] == undefined ) {
74 | baseValidations[ validation ] = overrideValidations[ validation ]
75 | } else {
76 | for( let setting in overrideValidations[ validation ] ) {
77 | baseValidations[ validation ][ setting ] = overrideValidations[ validation ][ setting ]
78 | }
79 | }
80 | }
81 | return baseValidations;
82 | }
83 |
84 | /*
85 | Determines whether the errors for the form element should be displayed. By default, returns false
86 | if the element is still marked as untouched.
87 | */
88 | showErrors( formElement: AbstractControl|FormGroup|FormArray, onlyAfterTouched: boolean = true ) : boolean {
89 | let elementActive = onlyAfterTouched ? formElement.touched : true;
90 | return ( formElement.dirty && formElement.invalid && elementActive ) ? true : false
91 | }
92 |
93 | /*
94 | Returns array of error messages. By default, error messages only returned when control is dirty.
95 | */
96 | getControlErrors( control: AbstractControl, onlyWhenDirty: boolean = true ) : string[] {
97 | let errorMessages: string[] = [];
98 | if( ( !onlyWhenDirty || control.dirty ) && control.errors ) {
99 | let errorArray = Object.keys( control.errors );
100 | for ( let err in errorArray ) {
101 | if ( control.errors[ errorArray[ err ] ].message ) {
102 | errorMessages.push( control.errors[ errorArray[ err ] ].message );
103 | }
104 | }
105 | }
106 | return errorMessages;
107 | }
108 |
109 | /*
110 | Ensures a programmatic change to an AbstractControl value is marked as dirty (and by default as touched)
111 | prior to the change, properly invoking validation and the display of any validation errors.
112 | */
113 | changeControlValue( control: AbstractControl, value: any, markTouched: boolean = true ) : void {
114 | control.markAsDirty();
115 | control.markAsTouched( markTouched );
116 | control.setValue( value );
117 | }
118 |
119 | }
120 |
--------------------------------------------------------------------------------
/src/app/vadacl/validation-methods.ts:
--------------------------------------------------------------------------------
1 |
2 | import { AbstractControl, Validators } from '@angular/forms';
3 | import { Messages } from './messages/messages-en';
4 |
5 | /*
6 | The ValidationMethods class contains all of the validation methods defined for use by vadacl. Validation methods
7 | provided in Angular 2 are wrapped and leveraged whenever practical.
8 | */
9 | export class ValidationMethods {
10 |
11 | //Modeled after the official Angular 2 Required validators value checks
12 | static isEmpty( control: AbstractControl ) {
13 | let v = control.value;
14 | if ( v === undefined || v === null || ( typeof v === 'string' && v == '' ) ) {
15 | return true;
16 | } else {
17 | return false;
18 | }
19 | }
20 |
21 | static required( message ?: string ) {
22 | let msg = message || Messages.required;
23 | return function ( control: AbstractControl ) {
24 | return ValidationMethods.isEmpty( control ) ? { 'required': { 'isEmpty': true, 'message': msg } } : null;
25 | }
26 | }
27 |
28 | static minLength( minLength: number, message ?: string ) {
29 | let msg = message || Messages.minLength;
30 | return function ( control: AbstractControl ) {
31 | //Use and invoke the official Angular 2 minLength Validator
32 | let baseValidator = Validators.minLength( minLength );
33 | let outcome = baseValidator( control) ;
34 | if ( outcome ) {
35 | //Append the message
36 | outcome[ 'minlength' ].message = msg;
37 | }
38 | return outcome;
39 | }
40 | }
41 |
42 | static maxLength( maxLength: number, message ?: string ) {
43 | let msg = message || Messages.maxLength;
44 | return function ( control: AbstractControl ) {
45 | //Use and invoke the official Angular 2 maxLength Validator
46 | let baseValidator = Validators.maxLength( maxLength );
47 | let outcome = baseValidator( control) ;
48 | if ( outcome ) {
49 | //Append the message
50 | outcome[ 'maxlength' ].message = msg;
51 | }
52 | return outcome;
53 | }
54 | }
55 |
56 | static pattern( pattern: string, message ?: string ) {
57 | let msg = message || Messages.pattern;
58 | return function ( control: AbstractControl ) {
59 | //Use and invoke the official Angular 2 pattern Validator
60 | let baseValidator = Validators.pattern( pattern );
61 | let outcome = baseValidator( control) ;
62 | if ( outcome ) {
63 | //Append the message
64 | outcome[ 'pattern' ].message = msg;
65 | }
66 | return outcome;
67 | }
68 | }
69 |
70 | static withinLength( minLength: number, maxLength: number, message ?: string ) {
71 | let msg = message || Messages.withinLength;
72 | return function ( control: AbstractControl ) {
73 | //Do not display if the control is empty
74 | if( ValidationMethods.isEmpty( control ) ){
75 | return null;
76 | }
77 | let v = control.value;
78 | return v.length < minLength || v.length > maxLength ?
79 | { 'withinlength': { 'minLength': minLength, 'maxLength': maxLength, 'actualLength': v.length, 'message': msg } } :
80 | null
81 | }
82 | }
83 |
84 | }
85 |
86 |
87 |
--------------------------------------------------------------------------------
/src/app/version/index.ts:
--------------------------------------------------------------------------------
1 | export * from './version.component';
2 |
--------------------------------------------------------------------------------
/src/app/version/version.component.html:
--------------------------------------------------------------------------------
1 | Version: {{versionNumber}}
2 | -------------------------------------------------------------------------------- /src/app/version/version.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { By } from '@angular/platform-browser'; 4 | import { DebugElement } from '@angular/core'; 5 | import { addProviders, async, inject } from '@angular/core/testing'; 6 | import { VersionComponent } from './version.component'; 7 | import { VersionService } from './version.service'; 8 | import { Http } from '@angular/http'; 9 | 10 | let http = {} as Http; 11 | let versionService = new VersionService( http ); 12 | 13 | describe('Component: Version', () => { 14 | it('should create an instance', () => { 15 | let component = new VersionComponent( versionService ); 16 | expect(component).toBeTruthy(); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/app/version/version.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { VersionService } from './version.service'; 3 | 4 | @Component({ 5 | moduleId: module.id, 6 | selector: 'app-version', 7 | templateUrl: 'version.component.html', 8 | }) 9 | export class VersionComponent implements OnInit { 10 | 11 | versionNumber = '-.-.-'; 12 | 13 | constructor( private versionService: VersionService ) { } 14 | 15 | ngOnInit() { 16 | this.versionService.getVersion().then( versions => this.versionNumber = versions[0].name ); 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/version/version.service.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { addProviders, async, inject } from '@angular/core/testing'; 4 | import { VersionService } from './version.service'; 5 | import { HTTP_PROVIDERS } from '@angular/http'; 6 | 7 | describe('Service: Version', () => { 8 | beforeEach(() => { 9 | addProviders([VersionService, HTTP_PROVIDERS ]); 10 | }); 11 | 12 | it('should instantiate the service', 13 | inject([VersionService], 14 | (service: VersionService) => { 15 | expect(service).toBeTruthy(); 16 | })); 17 | }); 18 | -------------------------------------------------------------------------------- /src/app/version/version.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | 6 | @Injectable() 7 | export class VersionService { 8 | 9 | private versionUrl = 'app/version'; 10 | 11 | constructor( private http: Http ) { } 12 | 13 | getVersion() { 14 | return this.http.get(this.versionUrl) 15 | .toPromise() 16 | .then(response => response.json().data ) 17 | .catch(this.handleError); 18 | } 19 | 20 | private handleError(error: any) { 21 | console.error('An error occurred', error); 22 | return Promise.reject(error.message || error); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcswartz/angular2-sandbox-guildrunner/c57c5ff1083b1b6ae5a1b6d5ae93adc9e547efa8/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |