github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the edit form and delete dialog work again

Browse Source
This commit is contained in:
SteveSandersonMS
2016-01-26 11:17:01 +00:00
parent 381b7b884e
commit ea4c668a63
4 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-delete-prompt/album-delete-prompt.ts
View File

@@ -10,17 +10,15 @@ import * as models from '../../../models/models';
directives: [NgIf]
})
export class AlbumDeletePrompt {
private modalElement: any;
public album: models.Album;
constructor(@ng.Inject(ng.ElementRef) elementRef: ng.ElementRef) {
if (typeof window !== 'undefined') {
this.modalElement = (<any>window).jQuery(".modal", elementRef.nativeElement);
}
constructor(@ng.Inject(ng.ElementRef) private _elementRef: ng.ElementRef) {
}
public show(album: models.Album) {
this.album = album;
this.modalElement.modal();
// Consider rewriting this using Angular 2's "Renderer" API so as to avoid direct DOM access
(<any>window).jQuery(".modal", this._elementRef.nativeElement).modal();
}
}

12
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html
View File

@@ -1,34 +1,34 @@
<h2>Album <small>Edit</small></h2>
<hr />
<form class="form-horizontal" [ngFormModel]="form" (ng-submit)="onSubmitModelBased()">
<form class="form-horizontal" [ngFormModel]="form" (ngSubmit)="onSubmitModelBased()">
<form-field label="Artist" [validate]="form.controls.ArtistId">
<select class="form-control" ng-control="ArtistId">
<select class="form-control" ngControl="ArtistId">
<option value="0">-- choose Artist --</option>
<option *ngFor="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
</select>
</form-field>
<form-field label="Genre" [validate]="form.controls.GenreId">
<select class="form-control" ng-control="GenreId">
<select class="form-control" ngControl="GenreId">
<option value="0">-- choose Genre --</option>
<option *ngFor="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
</select>
</form-field>
<form-field label="Title" [validate]="form.controls.Title">
<input class="form-control" type="text" ng-control="Title">
<input class="form-control" type="text" ngControl="Title">
</form-field>
<form-field label="Price" [validate]="form.controls.Price">
<div class="input-group">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" ng-control="Price">
<input class="form-control" type="text" ngControl="Price">
</div>
</form-field>
<form-field label="Album Art URL" [validate]="form.controls.AlbumArtUrl">
<input class="form-control" ng-control="AlbumArtUrl">
<input class="form-control" ngControl="AlbumArtUrl">
</form-field>
<form-field label="Album Art">

23
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts
View File

@@ -1,4 +1,5 @@
import * as ng from 'angular2/core';
import { Observable } from 'rxjs';
import { Control, ControlGroup, FormBuilder, Validators, NgIf, NgFor, FORM_DIRECTIVES } from 'angular2/common';
import * as router from 'angular2/router';
import * as models from '../../../models/models';
@@ -20,6 +21,7 @@ export class AlbumEdit {
public genres: models.Genre[];
public originalAlbum: models.Album;
public changesSaved: boolean;
public formErrors: string[] = [];
private _http: Http;
@@ -69,12 +71,10 @@ export class AlbumEdit {
var controls = this.form.controls;
var albumId = this.originalAlbum.AlbumId;
this._putJson(`/api/albums/${ albumId }/update`, this.form.value).subscribe(response => {
if (response.status === 200) {
this.changesSaved = true;
} else {
AspNet.Validation.showValidationErrors(response, this.form);
}
this._putJson(`/api/albums/${ albumId }/update`, this.form.value).subscribe(successResponse => {
this.changesSaved = true;
}, errorResponse => {
AspNet.Validation.showValidationErrors(errorResponse, this.form);
});
}
}
@@ -84,18 +84,13 @@ export class AlbumEdit {
}
// Need feedback on whether this really is the easiest way to PUT some JSON
private _putJson(url: string, body: any): Subscribable<Response> {
private _putJson(url: string, body: any): Observable<Response> {
return this._http.put(url, JSON.stringify(body), {
headers: new Headers({ 'Content-Type': 'application/json' })
});
}
public get formErrors(): string[] {
return this.form.dirty ? Object.keys(this.form.errors || {}) : [];
private ngDoCheck() {
this.formErrors = this.form.dirty ? Object.keys(this.form.errors || {}) : [];
}
}
// TODO: Figure out what type declaration is provided by Angular/RxJs and use that instead
interface Subscribable<T> {
subscribe(callback: (response: Response) => void): void;
}

5
samples/angular/MusicStore/wwwroot/ng-app/components/admin/form-field/form-field.ts
View File

@@ -10,11 +10,12 @@ import { NgIf, NgFor, AbstractControl } from 'angular2/common';
directives: [NgIf, NgFor]
})
export class FormField {
public errorMessages: string[] = [];
private validate: AbstractControl;
public get errorMessages() {
private ngDoCheck() {
var errors = (this.validate && this.validate.dirty && this.validate.errors) || {};
return Object.keys(errors).map(key => {
this.errorMessages = Object.keys(errors).map(key => {
return 'Error: ' + key;
});
}