Changeset 6a80231 for trip-planner-front/src/app/planner

Timestamp:

11/02/21 22:14:57 (3 years ago)

Author:

Ema <ema_spirova@…>

Branches:

master

Children:

6c1585f

Parents:

188ee53

Message:

create initial planner and routing with angular

Location:

trip-planner-front/src/app/planner

Files:

• detail-planner/detail-planner.component.css (added)
• detail-planner/detail-planner.component.html (added)
• detail-planner/detail-planner.component.spec.ts (added)
• detail-planner/detail-planner.component.ts (added)
• edit-planner/edit-planner.component.css (added)
• edit-planner/edit-planner.component.html (added)
• edit-planner/edit-planner.component.ts (added)
• planner.component.css (modified) (1 diff)
• planner.component.html (modified) (1 diff)
• planner.component.ts (modified) (3 diffs)

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

@@ -1 @@
-.example-card {
-    
-  }
+mat-card  {   
+  width: 280px;   
+  height: 160px; 
+
+}
+.example-card button {
+  box-shadow:none !important;
+  cursor:pointer;
+}

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

@@ +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">
 
 <button mat-raised-button (click)="openDialog()">Create initial planner</button>
 
-<mat-grid-list cols="4" rowHeight="250px">
-  <mat-grid-tile *ngFor="let planner of planners" >
-      <mat-card class="example-card" >
+<mat-grid-list cols="4" >
+  <mat-grid-tile *ngFor="let planner of planners">
+      <mat-card class="d-flex flex-column">
         <mat-card-title>{{planner.name}}</mat-card-title>
         <mat-card-content>
           {{planner.description}}
         </mat-card-content>
-        <mat-card-actions>
-          <button mat-raised-button color="primary">
+        <mat-card-actions class="mt-auto">
+          <button mat-raised-button color="primary" (click)="onClickEditPlanner(planner.id)">
             <mat-icon>edit</mat-icon> Edit
           </button>

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

@@ -4 +4 @@
 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
+import { Router } from '@angular/router';
 
 
@@ -14 +15 @@
 
   planners: Planner[];
-  constructor(private plannerService: PlannerService, public dialog: MatDialog) { 
+  plannerId: number;
+
+  constructor(private plannerService: PlannerService, public dialog: MatDialog, private router: Router) { 
     this.planners = [];
+    this.plannerId = 1;
   };
  
@@ -33 +37 @@
   }
   
+  onClickEditPlanner(id: number){
+    console.log(id);
+   
+         
+          this.router.navigate(['edit/planner/', this.plannerId])
+    
+  }
 }