File

src/app/visits/visit-edit/visit-edit.component.ts

Implements

OnInit

Metadata

selector app-visit-edit
styleUrls ./visit-edit.component.css
templateUrl ./visit-edit.component.html

Index

Properties
Methods

Constructor

constructor(visitService: VisitService, route: ActivatedRoute, router: Router)
Parameters :
Name Type Optional
visitService VisitService No
route ActivatedRoute No
router Router No

Methods

gotoOwnerDetail
gotoOwnerDetail()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onSubmit
onSubmit(visit: Visit)
Parameters :
Name Type Optional
visit Visit No
Returns : void

Properties

currentOwner
Type : Owner
currentPet
Type : Pet
currentPetType
Type : PetType
errorMessage
Type : string
updateSuccess
Default value : false
visit
Type : Visit
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>

./visit-edit.component.css

/*
 *
 *  * 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
Component
Html element with directive

result-matching ""

    No results matching ""