Changeset 6c1585f for trip-planner-front/src/app/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

Files:

• edit-planner/edit-planner.component.html (modified) (3 diffs)
• edit-planner/edit-planner.component.ts (modified) (2 diffs)
• planner.component.html (modified) (1 diff)
• planner.component.ts (modified) (3 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");
+            }
+        });
 }
+  
+}

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

@@ -11 +11 @@
         </mat-card-content>
         <mat-card-actions class="mt-auto">
-          <button mat-raised-button color="primary" (click)="onClickEditPlanner(planner.id)">
+          <button mat-raised-button color="primary" (click)="onClickEditPlannerGet(planner.id)">
             <mat-icon>edit</mat-icon> Edit
-          </button>
-          
+          </button>        
           <button mat-raised-button color="accent">
             <mat-icon>remove_red_eye</mat-icon>Details

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

@@ -5 +5 @@
 import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
 import { Router } from '@angular/router';
+import { PlannerDto } from '../_models/dto/plannerDto';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 
@@ -15 +17 @@
 
   planners: Planner[];
-  plannerId: number;
+  plannerDto: PlannerDto;
+  editForm: FormGroup;
 
-  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) { 
+
+
+  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router,
+    private fb : FormBuilder) { 
     this.planners = [];
-    this.plannerId = 1;
+    this.plannerDto = new PlannerDto();
+    this.editForm = fb.group({
+      title: fb.control('initial value', Validators.required)
+  });
   };
  
@@ -37 +46 @@
   }
   
-  onClickEditPlanner(id: number){
+  onClickEditPlannerGet(id: number){
     console.log(id);
-   
-         
-          this.router.navigate(['edit/planner/', this.plannerId])
+        this.plannerService.getPlannerById(id).subscribe(
+            data => {
+              
+              this.router.navigate(['edit/planner/', id])
+            }
+     );
     
   }
+
+  
 }