Changeset 6c1585f for trip-planner-front/src/app/planner/edit-planner

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/planner/edit-planner

Files:

• edit-planner.component.html (modified) (3 diffs)
• edit-planner.component.ts (modified) (2 diffs)

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

@@ -3 +3 @@
 <h3>Here you can edit your planner</h3>
 
-<form>
+<form [formGroup] = "form" (ngSubmit)="onSubmit()">
     <div class="form-gorup">
         <p>Planner name</p>
         <mat-form-field appearance="fill">
-          <input matInput required   type="text" name="name"  placeholder="Planner name">
+          <input matInput required type="text" formControlName="name"  placeholder="Planner name">
         </mat-form-field>
         <p>Planner description</p>
         <mat-form-field appearance="fill">
-          <textarea matInput required name="description"  type="text" placeholder="Planner description"></textarea>
+          <textarea matInput required formControlName="description"  type="text" placeholder="Planner description"></textarea>
         </mat-form-field>
     </div>
@@ -25 +25 @@
                         </thead>
                         <tbody>
-                        <tr>
-                            
+                        <tr>                           
                             <td> <button mat-raised-button color="primary" (click)="onClickAddLocation()">
                                  Add locations
@@ -38 +37 @@
         </div>
     </div>
-    <button mat-raised-button color="primary" (click)="onClickSavePlanner()">
+    <button mat-raised-button color="primary" >
         <mat-icon>edit</mat-icon> Save
       </button>

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

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PlannerDto } from 'src/app/_models/dto/plannerDto';
 import { Planner } from 'src/app/_models/planner';
+import { PlannerService } from 'src/app/_services/planner.service';
 
 @Component({
@@ -11 +14 @@
 
   planner: Planner;
+  planners: Planner[];
+  form: FormGroup;
+  plannerDto: PlannerDto;
+  id: number;
 
 
-  constructor(private router: Router) { 
+  constructor(private router: Router, private route: ActivatedRoute ,private fb: FormBuilder, private plannerService: PlannerService) { 
     this.planner = new Planner();
+    this.planners = [];
+    this.form = fb.group({
+      title: fb.control('initial value', Validators.required)
+  });
+    this.plannerDto = new PlannerDto();
+    this.id = 1;
   }
 
   ngOnInit(): void {
+    this.id = this.route.snapshot.params['id'];
+
+    this.form = this.fb.group({
+        name: [''],
+        description: [''],
+        locationList: []
+    });
+
+    this.plannerService.getPlannerById(this.id)
+    .pipe()
+    .subscribe(x => this.form.patchValue(x));
   }
 
 
-  onClickSavePlanner(){
-      this.router.navigate(['planners']);
+  onSubmit(){
+    this.updatePlanner();
+      
   }
 
-  onClickAddLocation(){
+  onClickAddLocation()
+  {
     this.router.navigate(['form']);
   }
+
+  private updatePlanner() {
+    this.plannerService.updatePlanner(this.id, this.form.value)
+        .pipe()
+        .subscribe({
+            next: () => {
+              this.router.navigate(['planners']);
+            },
+            error: error => {
+                console.log("error");
+            }
+        });
 }
+  
+}