Changeset e29cc2e for trip-planner-front/src/app/planner

Timestamp:

11/25/21 22:08:24 (3 years ago)

Author:

Ema <ema_spirova@…>

Branches:

master

Children:

8d391a1

Parents:

59329aa

Message:

primeNG components

Location:

trip-planner-front/src/app/planner

Files:

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

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

@@ -42 +42 @@
         </div>
     </div>
-    <button mat-raised-button color="primary" >
-        <mat-icon>edit</mat-icon> Save
-      </button>
+    <button pButton pRipplelabel label="Save" class="p-button-help"></button>
+    <button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" [style]="{'margin-left': '.5em'}"></button>
+
 </form>
 
-   

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

@@ -77 +77 @@
   }
 
+  onClickBack(){
+    console.log("promena");
+    this.router.navigate(['planners']);
+  }
 }

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

@@ -1 +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" >
-  <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 class="mt-auto">
-          <button mat-raised-button color="primary" (click)="onClickEditPlannerGet(planner.id)">
-            <mat-icon>edit</mat-icon> Edit
-          </button>        
-          <button mat-raised-button color="accent">
-            <mat-icon>remove_red_eye</mat-icon>Details
-          </button>
-        </mat-card-actions>
-      </mat-card>
-  </mat-grid-tile>
-</mat-grid-list>
+<button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
+<br>
+<br>
+<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
+  
+  <ng-template pTemplate="body" let-planner>
+      <td >
+        <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
+          <ng-template pTemplate="header">
+          </ng-template>
+          <p>{{planner.description}}</p>
+          <ng-template pTemplate="footer">
+              <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" (click)="onClickEditPlannerGet(planner.id)"></button>
+              <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" label="Delete" [style]="{'margin-left': '.5em'}"></button>
+            </ng-template>
+        </p-card>
+      </td>
+  </ng-template>
+</p-table>
+
+

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

@@ -2 +2 @@
 import { Planner } from '../_models/planner';
 import { PlannerService } from '../_services/planner.service';
-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';
 import { PlannerDto } from '../_models/dto/plannerDto';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { PrimeNGConfig } from 'primeng/api';
 
 
@@ -19 +20 @@
   plannerDto: PlannerDto;
   editForm: FormGroup;
+  ref: DynamicDialogRef;
 
 
-
-  constructor(private plannerService: PlannerService, private dialog: MatDialog, private router: Router,
-    private fb : FormBuilder) { 
+  constructor(private plannerService: PlannerService, private router: Router,
+    private fb: FormBuilder, private dialogService: DialogService, private primengConfig: PrimeNGConfig) {
     this.planners = [];
     this.plannerDto = new PlannerDto();
     this.editForm = fb.group({
       title: fb.control('initial value', Validators.required)
-  });
-  };
- 
-  openDialog(): void {
-    const dialogRef = this.dialog.open(CreateInitialPlannerComponent, {
-      width: '250px',
-      data: {}
     });
+    this.ref = new DynamicDialogRef;   
   }
-  
+
   ngOnInit(): void {
+
+    this.primengConfig.ripple = true;
+
     this.plannerService.getAllPlanners().subscribe(
       data => {
@@ -45 +43 @@
     );
   }
-  
-  onClickEditPlannerGet(id: number){
+
+  onClickEditPlannerGet(id: number) {
     console.log(id);
-        this.plannerService.getPlannerById(id).subscribe(
-            data => {          
-              this.router.navigate(['edit/planner/', id]);
-            }
-     );
-    
+    this.plannerService.getPlannerById(id).subscribe(
+      data => {
+        this.router.navigate(['edit/planner/', id]);
+      }
+    );
+
   }
-
-  
+  show() {
+    this.ref = this.dialogService.open(CreateInitialPlannerComponent, {
+      header: 'Create initial planner',
+      width: '70%',
+      contentStyle: { "max-height": "500px", "overflow": "auto" },
+      baseZIndex: 10000
+    });
+  }
 }