Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fddd8b4

Browse files
customer edit page created
1 parent f5e3664 commit fddd8b4

File tree

4 files changed

+107
-7
lines changed

4 files changed

+107
-7
lines changed

‎src/AspnetRun.Web/src/app/views/customer/customer-detail/customer-detail.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<div class="navbar">
88
<ul class="nav navbar-nav">
99
<li class="toolbar-item">
10-
<a [routerLink]="['/customer-order',customer.id]">
10+
<a [routerLink]="['/customer/customer-order',customer.id]">
1111
<span class="glyphicon glyphicon-plus"></span> Customer Orders
1212
</a>
1313
</li>
1414
<li class="toolbar-item">
15-
<a [routerLink]="['/customer-edit',customer.id]">
15+
<a [routerLink]="['/customer/customer-edit',customer.id]">
1616
<span class="glyphicon glyphicon-plus"></span> Edit Customer
1717
</a>
1818
</li>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.customer-form input[type='text'],
2+
.customer-form input[type='number'],
3+
.customer-form input[type='email'],
4+
.customer-form select {
5+
width:100%;
6+
}
7+
8+
.customer-form .ng-invalid {
9+
border-left: 5px solid #a94442;
10+
}
11+
12+
.customer-form .ng-valid {
13+
border-left: 5px solid #42A948;
14+
}
Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,47 @@
1-
<p>customer-edit works!</p>
1+
<div>
2+
<form (ngSubmit)="submit()" #customerForm="ngForm" class="customer-form" novalidate>
3+
<div class="form-group">
4+
<label>First Name</label>
5+
<input type="text" class="form-control" name="firstName" [(ngModel)]="customer.firstName" #firstName="ngModel" required>
6+
<div class="alert alert-danger" [hidden]="firstName.pristine || firstName.valid">First Name is required</div>
7+
</div>
8+
<div class="form-group">
9+
<label>Last Name</label>
10+
<input type="text" class="form-control" name="lastName" [(ngModel)]="customer.lastName" #lastName="ngModel" required>
11+
<div class="alert alert-danger" [hidden]="lastName.pristine || lastName.valid">Last Name is required</div>
12+
</div>
13+
<div class="form-group">
14+
<label>Address</label>
15+
<input type="text" class="form-control" name="address" [(ngModel)]="customer.address" #address="ngModel" required>
16+
<div class="alert alert-danger" [hidden]="address.pristine || address.valid">Address is required</div>
17+
</div>
18+
<div class="form-group">
19+
<label>City</label>
20+
<input type="text" class="form-control" name="city" [(ngModel)]="customer.city" #city="ngModel" required>
21+
<div class="alert alert-danger" [hidden]="city.pristine || city.valid">City is required</div>
22+
</div>
23+
<!-- <div class="form-group">
24+
<label>State</label>
25+
<select class="form-control"
26+
[(ngModel)]="customer.state.abbreviation"
27+
name="state"
28+
required>
29+
<option *ngFor="let state of states" [ngValue]="state.abbreviation">{{state.name}}</option>
30+
</select>
31+
</div> -->
32+
<div *ngIf="customer">
33+
<div class="alert alert-warning" *ngIf="customer.id && deleteMessageEnabled">
34+
Delete Customer?&nbsp;&nbsp;<button class="btn btn-danger" (click)="delete($event)">Yes</button>&nbsp;&nbsp;
35+
<button class="btn btn-default" (click)="deleteMessageEnabled = false">No</button>
36+
</div>
37+
<button class="btn btn-danger" *ngIf="customer.id && !deleteMessageEnabled" (click)="deleteMessageEnabled = true">Delete</button>&nbsp;&nbsp;
38+
39+
<div class="pull-right" *ngIf="!deleteMessageEnabled">
40+
<button class="btn btn-default" (click)="cancel($event)">Cancel</button>&nbsp;&nbsp;
41+
<button type="submit" class="btn btn-success" [disabled]="customerForm.pristine || !customerForm.valid">{{ operationText }}</button>
42+
</div>
43+
</div>
44+
<div class="alert alert-danger" *ngIf="errorMessage != null">{{ errorMessage }}</div>
45+
</form>
46+
<br />
47+
</div>
Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,55 @@
1-
import { Component, OnInit } from '@angular/core';
21

3-
@Component({
4-
selector: 'app-customer-edit',
2+
import { Component, OnInit, ViewChild } from '@angular/core';
3+
import { Router, ActivatedRoute, Params } from '@angular/router';
4+
import { NgForm } from '@angular/forms';
5+
6+
import { ICustomer, IState } from 'src/app/shared/interfaces';
7+
import { CustomerDataService } from 'src/app/core/services/customer-data.services';
8+
9+
@Component({
510
templateUrl: './customer-edit.component.html',
611
styleUrls: ['./customer-edit.component.css']
712
})
813
export class CustomerEditComponent implements OnInit {
914

10-
constructor() { }
15+
customer: ICustomer =
16+
{
17+
id: 0,
18+
firstName: '',
19+
lastName: '',
20+
gender: '',
21+
address: '',
22+
city: '',
23+
state: {
24+
abbreviation: '',
25+
name: ''
26+
}
27+
};
28+
29+
states: IState[];
30+
errorMessage: string;
31+
deleteMessageEnabled: boolean;
32+
operationText = 'Insert';
33+
@ViewChild('customerForm', { static : true }) customerForm: NgForm;
34+
35+
constructor(private router: Router,
36+
private route: ActivatedRoute,
37+
private dataService: CustomerDataService) { }
1138

1239
ngOnInit() {
40+
this.route.params.subscribe((params: Params) => {
41+
const id = +params['id'];
42+
if (id !== 0) {
43+
this.operationText = 'Update';
44+
this.getCustomer(id);
45+
}
46+
});
47+
}
48+
49+
getCustomer(id: number) {
50+
this.dataService.getCustomerById(id).subscribe((customer : ICustomer) => {
51+
this.customer = customer
52+
});
1353
}
1454

1555
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /