Ignore:
Timestamp:
11/04/21 23:10:39 (3 years ago)
Author:
Ema <ema_spirova@…>
Branches:
master
Children:
ceaed42
Parents:
6a80231
Message:

edit planner form with angular

Location:
trip-planner-front/src/app
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trip-planner-front/src/app/_services/planner.service.ts

    r6a80231 r6c1585f  
    1616    }
    1717
    18     postInitialPlanner(plannerDto: PlannerDto): Observable<Object>{     
     18    postInitialPlanner(planner: Planner, locationList: Location[]): Observable<Object>{     
    1919        let url = "http://localhost:8080/api/planner/new";
    20         return this.httpClient.post<Planner>(url, plannerDto);
     20        return this.httpClient.post<Planner>(url, planner);
    2121    }
    2222
    23     updatePlanner(id: number):Observable<Planner>{   
     23    updatePlanner(id: number, plannerDto : PlannerDto):Observable<Planner>{   
    2424    let url = "http://localhost:8080/api/edit/planner/" + id;
    25     return this.httpClient.put<Planner>(url, null);
     25    return this.httpClient.put<Planner>(url, plannerDto);
     26    }
     27
     28    getPlannerById(id:number):Observable<Planner>{
     29        let url = "http://localhost:8080/api/planner/" + id;
     30        return this.httpClient.get<Planner>(url);
    2631    }
    2732}

  • trip-planner-front/src/app/app-routing.module.ts

    r6a80231 r6c1585f  
    11import { NgModule } from '@angular/core';
    22import { RouterModule, Routes } from '@angular/router';
     3import { LocationComponent } from './location/location.component';
    34import { LocationsFormComponent } from './locations-form/locations-form.component';
    45import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
    … …  
    89  {path: 'planners', component: PlannerComponent},
    910  {path: 'form', component: LocationsFormComponent},
    10   {path: 'edit/planner/:id', component: EditPlannerComponent}
     11  {path: 'edit/planner/:id', component: EditPlannerComponent},
     12  {path: 'locations', component: LocationComponent}
    1113];
    1214

  • trip-planner-front/src/app/app.component.html

    r6a80231 r6c1585f  
    1 
    21  <router-outlet></router-outlet>
    32

  • trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.html

    r6a80231 r6c1585f  
    44    <p>Planner name</p>
    55    <mat-form-field appearance="fill">
    6       <input matInput required   type="text" [(ngModel)]="plannerDto.name" name="name" placeholder="Planner name">
     6      <input matInput required   type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name">
    77    </mat-form-field>
    88    <p>Planner description</p>
    99    <mat-form-field appearance="fill">
    10       <textarea matInput required name="description" [(ngModel)]="plannerDto.description" type="text" placeholder="Planner description"></textarea>
     10      <textarea matInput required name="description" [(ngModel)]="planner.description" type="text" placeholder="Planner description"></textarea>
    1111    </mat-form-field>
    1212  </div>

  • trip-planner-front/src/app/create-initial-planner/create-initial-planner.component.ts

    r6a80231 r6c1585f  
    4040  onFormSubmitPlanner(form: NgForm){
    4141   console.log(this.planner);
    42       this.plannerService.postInitialPlanner(this.plannerDto).subscribe(
     42      this.plannerService.postInitialPlanner(this.planner, this.locations).subscribe(
    4343        data=>{
    4444          console.log(data);

  • trip-planner-front/src/app/location/location.component.html

    r6a80231 r6c1585f  
    1 <div *ngFor="let category of categories">
    2   {{category.name}}
    3   </div>
     1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    42
    5   <hr>
     3<h3>Here are all locations</h3>
    64
    7   <div *ngFor="let companion of companions">
    8     {{companion.type}}
    9   </div>
     5<div class="container">
     6  <table mat-table  class="mat-elevation-z8">
     7
     8    <!--- Note that these columns can be defined in any order.
     9          The actual rendered columns are set as a property on the row definition" -->
     10 
     11    <!-- Position Column -->
     12    <ng-container matColumnDef="position">
     13      <th mat-header-cell *matHeaderCellDef> Location name </th>
     14      <td mat-cell *matCellDef="let element">  </td>
     15    </ng-container>
     16 
     17 
     18    <!-- Symbol Column -->
     19    <ng-container matColumnDef="symbol">
     20      <th mat-header-cell *matHeaderCellDef> Symbol </th>
     21      <td mat-cell *matCellDef="let element">  </td>
     22    </ng-container>
     23 
     24    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     25    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     26  </table>
     27</div>

  • trip-planner-front/src/app/location/location.component.ts

    r6a80231 r6c1585f  
    1616export class LocationComponent implements OnInit {
    1717
    18   categories: Category[];
    19   companions: Companion[];
    20   constructor(private categoryService: CategoryService, private companionService : CompanionService) {
    21     this.categories = [];
    22     this.companions = [];
     18  constructor() {
     19   
    2320   }
    2421   
    2522  ngOnInit(): void {
    26     this.categoryService.getAllCategories().subscribe(
    27       data => {
    28         this.categories = data;
    29         console.log(data);
    30       }
    31     );
    32 
    33     this.companionService.getAllCompanions().subscribe(
    34       data => {
    35         this.companions = data;
    36       }
    37     );
     23   
    3824  }
    3925}

  • trip-planner-front/src/app/locations-form/locations-form.component.html

    r6a80231 r6c1585f  
    1313  <br>
    1414  <br>
    15   <!--
    16   <mat-form-field class="example-full-width" appearance="fill">
    17     <mat-label>Please select a place</mat-label>
    18     <input type="text"
    19            placeholder="Pick one"
    20            aria-label="Place"
    21            matInput
    22            [formControl]="myControl"
    23            [matAutocomplete]="auto">
    24     <mat-autocomplete autoActiveFirstOption  #auto="matAutocomplete">
    25       <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
    26         {{option.name}}
    27       </mat-option>
    28     </mat-autocomplete>
    29   </mat-form-field>
    30   -->
    31 
    3215
    3316  <div *ngIf="cityOption">
    … …  
    4023    </mat-form-field>
    4124  </div>
    42 
    4325
    4426  <div *ngIf="regionOption">

  • trip-planner-front/src/app/locations-form/locations-form.component.ts

    r6a80231 r6c1585f  
    1616import { Region } from '../_models/region';
    1717import { RegionService } from '../_services/region.service';
     18import { Router } from '@angular/router';
    1819
    1920@Component({
    … …  
    4748  constructor(private cityService : CityService, private regionService: RegionService,
    4849              private companionService : CompanionService, private categoryService : CategoryService,
    49               private locationService: LocationService){
     50              private locationService: LocationService, private router : Router){
    5051    this.filteredOptions = new Observable<City[]>();
    5152    this.cities = [];
    … …  
    99100 
    100101  filter(val: string): Observable<City[]> {
    101   // call the service which makes the http-request
     102    // call the service which makes the http-request
    102103    return this.cityService.getAllCities()
    103     .pipe(
    104     map(response => response.filter(option => {
    105       return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
    106     }))
    107   )
    108  
    109  } 
     104      .pipe(
     105        map(response => response.filter(option => {
     106          return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
     107        }))
     108      )
     109
     110  }
    110111
    111112 toggleSelection(chip: MatChip, category: Category){
    112113  chip.toggleSelected();
    113114 
    114   if(this.chipsSeletion.length > 0){
    115     if(this.chipsSeletion.indexOf(category.id) <= -1){
    116       this.chipsSeletion.push(category.id);
    117     }else{
    118       const index = this.chipsSeletion.indexOf(category.id);
    119       this.chipsSeletion.splice(index, 1);
    120     }
    121   }else{
    122     this.chipsSeletion.push(category.id);
    123   }
    124   console.log(this.chipsSeletion);
     115   if (this.chipsSeletion.length > 0) {
     116     if (this.chipsSeletion.indexOf(category.id) <= -1) {
     117       this.chipsSeletion.push(category.id);
     118     } else {
     119       const index = this.chipsSeletion.indexOf(category.id);
     120       this.chipsSeletion.splice(index, 1);
     121     }
     122   } else {
     123     this.chipsSeletion.push(category.id);
     124   }
     125   console.log(this.chipsSeletion);
    125126 }
    126127
    127128
    128  createMyPlanner(){
    129    this.categoryIds = this.chipsSeletion.join(',');
    130    console.log(this.categoryIds);
    131    
    132    if(this.cityOption){
    133     this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
    134       result => {
    135         console.log(result);
    136       }
    137     );
    138    }else if(this.regionOption){
    139  
    140     this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
    141       result => {
    142         console.log(result);
    143       }
    144     );
    145    }
    146  }
    147  
    148  chooseCityOption(){
    149    this.cityOption = true;
    150    this.regionOption = false;
    151  }
     129  createMyPlanner() {
     130    this.categoryIds = this.chipsSeletion.join(',');
     131    console.log(this.categoryIds);
     132
     133    if (this.cityOption) {
     134      this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
     135        result => {
     136          console.log(result);
     137          this.router.navigate(['locations']);
     138        }
     139      );
     140    } else if (this.regionOption) {
     141      this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
     142        result => {
     143          console.log(result);
     144          this.router.navigate(['locations']);
     145        }
     146      );
     147    }
     148
     149
     150
     151  }
     152
     153  chooseCityOption() {
     154    this.cityOption = true;
     155    this.regionOption = false;
     156  }
    152157  chooseRegionOption() {
    153158    this.regionOption = true;
    … …  
    155160  }
    156161
    157   constraintMaxNumberDays(){
    158      if(this.value > this.max){
    159        this.value = this.max;
    160      }
     162  constraintMaxNumberDays() {
     163    if (this.value > this.max) {
     164      this.value = this.max;
     165    }
    161166  }
    162167

  • trip-planner-front/src/app/planner/edit-planner/edit-planner.component.html

    r6a80231 r6c1585f  
    33<h3>Here you can edit your planner</h3>
    44
    5 <form>
     5<form [formGroup] = "form" (ngSubmit)="onSubmit()">
    66    <div class="form-gorup">
    77        <p>Planner name</p>
    88        <mat-form-field appearance="fill">
    9           <input matInput required   type="text" name="name"  placeholder="Planner name">
     9          <input matInput required type="text" formControlName="name"  placeholder="Planner name">
    1010        </mat-form-field>
    1111        <p>Planner description</p>
    1212        <mat-form-field appearance="fill">
    13           <textarea matInput required name="description"  type="text" placeholder="Planner description"></textarea>
     13          <textarea matInput required formControlName="description"  type="text" placeholder="Planner description"></textarea>
    1414        </mat-form-field>
    1515    </div>
    … …  
    2525                        </thead>
    2626                        <tbody>
    27                         <tr>
    28                            
     27                        <tr>                           
    2928                            <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
    3029                                 Add locations
    … …  
    3837        </div>
    3938    </div>
    40     <button mat-raised-button color="primary" (click)="onClickSavePlanner()">
     39    <button mat-raised-button color="primary" >
    4140        <mat-icon>edit</mat-icon> Save
    4241      </button>

  • trip-planner-front/src/app/planner/edit-planner/edit-planner.component.ts

    r6a80231 r6c1585f  
    11import { Component, OnInit } from '@angular/core';
    2 import { Router } from '@angular/router';
     2import { FormBuilder, FormGroup, Validators } from '@angular/forms';
     3import { ActivatedRoute, Router } from '@angular/router';
     4import { PlannerDto } from 'src/app/_models/dto/plannerDto';
    35import { Planner } from 'src/app/_models/planner';
     6import { PlannerService } from 'src/app/_services/planner.service';
    47
    58@Component({
    … …  
    1114
    1215  planner: Planner;
     16  planners: Planner[];
     17  form: FormGroup;
     18  plannerDto: PlannerDto;
     19  id: number;
    1320
    1421
    15   constructor(private router: Router) {
     22  constructor(private router: Router, private route: ActivatedRoute ,private fb: FormBuilder, private plannerService: PlannerService) {
    1623    this.planner = new Planner();
     24    this.planners = [];
     25    this.form = fb.group({
     26      title: fb.control('initial value', Validators.required)
     27  });
     28    this.plannerDto = new PlannerDto();
     29    this.id = 1;
    1730  }
    1831
    1932  ngOnInit(): void {
     33    this.id = this.route.snapshot.params['id'];
     34
     35    this.form = this.fb.group({
     36        name: [''],
     37        description: [''],
     38        locationList: []
     39    });
     40
     41    this.plannerService.getPlannerById(this.id)
     42    .pipe()
     43    .subscribe(x => this.form.patchValue(x));
    2044  }
    2145
    2246
    23   onClickSavePlanner(){
    24       this.router.navigate(['planners']);
     47  onSubmit(){
     48    this.updatePlanner();
     49     
    2550  }
    2651
    27   onClickAddLocation(){
     52  onClickAddLocation()
     53  {
    2854    this.router.navigate(['form']);
    2955  }
     56
     57  private updatePlanner() {
     58    this.plannerService.updatePlanner(this.id, this.form.value)
     59        .pipe()
     60        .subscribe({
     61            next: () => {
     62              this.router.navigate(['planners']);
     63            },
     64            error: error => {
     65                console.log("error");
     66            }
     67        });
    3068}
     69 
     70}

  • trip-planner-front/src/app/planner/planner.component.html

    r6a80231 r6c1585f  
    1111        </mat-card-content>
    1212        <mat-card-actions class="mt-auto">
    13           <button mat-raised-button color="primary" (click)="onClickEditPlanner(planner.id)">
     13          <button mat-raised-button color="primary" (click)="onClickEditPlannerGet(planner.id)">
    1414            <mat-icon>edit</mat-icon> Edit
    15           </button>
    16          
     15          </button>       
    1716          <button mat-raised-button color="accent">
    1817            <mat-icon>remove_red_eye</mat-icon>Details

  • trip-planner-front/src/app/planner/planner.component.ts

    r6a80231 r6c1585f  
    55import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
    66import { Router } from '@angular/router';
     7import { PlannerDto } from '../_models/dto/plannerDto';
     8import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    79
    810
    … …  
    1517
    1618  planners: Planner[];
    17   plannerId: number;
     19  plannerDto: PlannerDto;
     20  editForm: FormGroup;
    1821
    19   constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) {
     22
     23
     24  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router,
     25    private fb : FormBuilder) {
    2026    this.planners = [];
    21     this.plannerId = 1;
     27    this.plannerDto = new PlannerDto();
     28    this.editForm = fb.group({
     29      title: fb.control('initial value', Validators.required)
     30  });
    2231  };
    2332 
    … …  
    3746  }
    3847 
    39   onClickEditPlanner(id: number){
     48  onClickEditPlannerGet(id: number){
    4049    console.log(id);
    41    
    42          
    43           this.router.navigate(['edit/planner/', this.plannerId])
     50        this.plannerService.getPlannerById(id).subscribe(
     51            data => {
     52             
     53              this.router.navigate(['edit/planner/', id])
     54            }
     55     );
    4456   
    4557  }
     58
     59 
    4660}
Note: See TracChangeset for help on using the changeset viewer.