File
Implements
Metadata
| selector |
app-visit-edit |
| styleUrls |
./visit-edit.component.css |
| templateUrl |
./visit-edit.component.html |
Methods
|
gotoOwnerDetail
|
gotoOwnerDetail()
|
|
|
|
|
|
onSubmit
|
onSubmit(visit: Visit)
|
|
|
Parameters :
| Name |
Type |
Optional |
| visit |
Visit
|
No
|
|
|
currentOwner
|
Type : Owner
|
|
|
|
updateSuccess
|
Default value : false
|
|
|
import {Component, OnInit} from '@angular/core';
import {Visit} from '../visit';
import {Pet} from '../../pets/pet';
import {Owner} from '../../owners/owner';
import {PetType} from '../../pettypes/pettype';
import {VisitService} from '../visit.service';
import {ActivatedRoute, Router} from '@angular/router';
import * as moment from 'moment';
@Component({
selector: 'app-visit-edit',
templateUrl: './visit-edit.component.html',
styleUrls: ['./visit-edit.component.css']
})
export class VisitEditComponent implements OnInit {
visit: Visit;
currentPet: Pet;
currentOwner: Owner;
currentPetType: PetType;
updateSuccess = false;
errorMessage: string;
constructor(private visitService: VisitService, private route: ActivatedRoute, private router: Router) {
this.visit = {} as Visit;
this.currentPet = {} as Pet;
this.currentOwner = {} as Owner;
this.currentPetType = {} as PetType;
}
ngOnInit() {
const visitId = this.route.snapshot.params.id;
this.visitService.getVisitById(visitId).subscribe(
response => {
this.visit = response;
this.currentPet = this.visit.pet;
this.currentPetType = this.currentPet.type;
this.currentOwner = this.currentPet.owner;
},
error => this.errorMessage = error as any);
}
onSubmit(visit: Visit) {
visit.pet = this.currentPet;
// format output from datepicker to short string yyyy/mm/dd format
visit.date = moment(visit.date).format('YYYY/MM/DD');
this.visitService.updateVisit(visit.id.toString(), visit).subscribe(
res => this.gotoOwnerDetail(),
error => this.errorMessage = error as any);
}
gotoOwnerDetail() {
this.router.navigate(['/owners', this.currentOwner.id]);
}
}
<!--
~ /*
~ * Copyright 2016-2017 the original author or authors.
~ *
~ * Licensed under the Apache License, Version 2.0 (the "License");
~ * you may not use this file except in compliance with the License.
~ * You may obtain a copy of the License at
~ *
~ * http://www.apache.org/licenses/LICENSE-2.0
~ *
~ * Unless required by applicable law or agreed to in writing, software
~ * distributed under the License is distributed on an "AS IS" BASIS,
~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ * See the License for the specific language governing permissions and
~ * limitations under the License.
~ */
-->
<div class="container-fluid">
<div class="container xd-container">
<h2>Edit Visit</h2>
<b>Pet</b>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Birth Date</th>
<th>Type</th>
<th>Owner</th>
</tr>
</thead>
<tr>
<td>{{ currentPet.name }}</td>
<td>{{ currentPet.birthDate }}</td>
<td>{{ currentPetType.name }}</td>
<td>{{ currentOwner.firstName }} {{ currentOwner.lastName }}</td>
</tr>
</table>
<form id="visit" class="form-horizontal" (ngSubmit)="onSubmit(visitForm.value)" #visitForm="ngForm">
<div class="form-group has-feedback">
<div class="form-group ">
<label class="col-sm-2 control-label">Date</label>
<div class="col-sm-10">
<input matInput [matDatepicker]="visitDateDatepicker" [ngModel]="visit.date | date:'yyyy-MM-dd'" name="date">
<mat-datepicker-toggle matSuffix [for]="visitDateDatepicker"></mat-datepicker-toggle>
<mat-datepicker #visitDateDatepicker></mat-datepicker>
</div>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input id="description" name="description" class="form-control" type="text"
[(ngModel)]="visit.description"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="hidden" name="id" id="id" [(ngModel)]="visit.id"/>
<input type="hidden" name="pet" id="pet" [(ngModel)]="visit.pet"/>
<button class="btn btn-default" type="button" (click)="gotoOwnerDetail()">Back</button>
<button class="btn btn-default" type="submit">Update Visit</button>
</div>
</div>
</form>
</div>
</div>
/*
*
* * Copyright 2016-2017 the original author or authors.
* *
* * Licensed under the Apache License, Version 2.0 (the "License");
* * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* *
* * http://www.apache.org/licenses/LICENSE-2.0
* *
* * Unless required by applicable law or agreed to in writing, software
* * distributed under the License is distributed on an "AS IS" BASIS,
* * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* * See the License for the specific language governing permissions and
* * limitations under the License.
*
*/
Legend
Html element with directive