Ignore:
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
Files:
13 edited

Legend:

Unmodified
Added
Removed

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

    r59329aa re29cc2e  
    33import { BrowserModule } from '@angular/platform-browser';
    44import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
    5 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
    6 import {HttpClient, HttpClientModule} from '@angular/common/http';
     5import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     6import { HttpClient, HttpClientModule } from '@angular/common/http';
    77import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    88import { CategoryService } from './_services/cateogry.service';
    … …  
    1111import { MatIconModule } from '@angular/material/icon';
    1212import { MatSelectModule } from '@angular/material/select';
    13 import {MatInputModule} from '@angular/material/input';
    14 import {MatChipsModule} from '@angular/material/chips';
    15 import {MatTabsModule} from '@angular/material/tabs';
    16 import {MatDialogModule} from '@angular/material/dialog';
    17 import {MatBadgeModule} from '@angular/material/badge';
    18 import {MatDividerModule} from '@angular/material/divider';
    19 import {MatCardModule} from '@angular/material/card';
     13import { MatInputModule } from '@angular/material/input';
     14import { MatChipsModule } from '@angular/material/chips';
     15import { MatTabsModule } from '@angular/material/tabs';
     16import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
     17import { MatBadgeModule } from '@angular/material/badge';
     18import { MatDividerModule } from '@angular/material/divider';
     19import { MatCardModule } from '@angular/material/card';
    2020import { PlannerService } from './_services/planner.service';
    2121import { MatButtonModule } from '@angular/material/button';
    22 import {MatGridListModule} from '@angular/material/grid-list';
     22import { MatGridListModule } from '@angular/material/grid-list';
    2323import { CreateInitialPlannerComponent } from './create-initial-planner/create-initial-planner.component';
    2424import { LocationsFormComponent } from './locations-form/locations-form.component';
    2525import { MatFormFieldModule } from '@angular/material/form-field';
    26 import {MatAutocompleteModule} from '@angular/material/autocomplete';
     26import { MatAutocompleteModule } from '@angular/material/autocomplete';
    2727import { EditPlannerComponent } from './planner/edit-planner/edit-planner.component';
    2828import { DetailPlannerComponent } from './planner/detail-planner/detail-planner.component';
    2929import { AddLocationToPlannerPanelComponent } from './location/add-location-to-planner-panel/add-location-to-planner-panel.component';
    3030import { HomepageComponent } from './homepage/homepage.component';
    31 import {AccordionModule} from 'primeng/accordion';     //accordion and accordion tab
    32 import {MenuItem} from 'primeng/api';
    33 import {CarouselModule} from 'primeng/carousel';
    34 import {ButtonModule} from 'primeng/button';
    35 import {ToastModule} from 'primeng/toast';
    36 import {TabViewModule} from 'primeng/tabview';
     31import { AccordionModule } from 'primeng/accordion';     //accordion and accordion tab
     32import { CarouselModule } from 'primeng/carousel';
     33import { ButtonModule } from 'primeng/button';
     34import { ToastModule } from 'primeng/toast';
     35import { TabViewModule } from 'primeng/tabview';
    3736import { LocationDetailsComponent } from './location/location-details/location-details.component';
    38 import {GalleriaModule} from 'primeng/galleria';
     37import { GalleriaModule } from 'primeng/galleria';
     38import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
     39import { MessageService, SharedModule, ConfirmationService } from 'primeng/api';
     40import { TableModule } from 'primeng/table';
     41import { MessagesModule } from 'primeng/messages';
     42import { MessageModule } from 'primeng/message';
     43import { InputTextModule } from 'primeng/inputtext';
     44import { RippleModule } from 'primeng/ripple';
     45import {PaginatorModule} from 'primeng/paginator';
     46import {CardModule} from 'primeng/card';
    3947
    4048@NgModule({
    … …  
    5058    HomepageComponent,
    5159    LocationDetailsComponent
    52     ],
     60  ],
    5361  imports: [
    5462    BrowserModule,
    … …  
    7785    ToastModule,
    7886    TabViewModule,
    79     GalleriaModule
     87    GalleriaModule,
     88    DynamicDialogModule,
     89    MatIconModule,
     90    SharedModule,
     91    MatDialogModule,
     92    TableModule,
     93    MessagesModule,
     94    MessageModule,
     95    InputTextModule,
     96    RippleModule,
     97    FormsModule,
     98    PaginatorModule,
     99    CardModule
    80100  ],
     101
     102
    81103  providers: [
    82104    CategoryService,
    83     PlannerService
    84    
     105    PlannerService,
     106    {
     107      provide: MatDialogRef,
     108      useValue: {}
     109    },
     110    DialogService,
     111    MessageService,
     112    ConfirmationService
     113
     114  ],
     115 
     116  entryComponents: [
     117    AddLocationToPlannerPanelComponent
    85118  ],
    86119  bootstrap: [AppComponent],
    87   schemas: [NO_ERRORS_SCHEMA]
    88  
     120  schemas: [NO_ERRORS_SCHEMA],
     121
    89122})
    90123export class AppModule { }

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

    r59329aa re29cc2e  
    11<form (ngSubmit)="onFormSubmitPlanner(f)" #f="ngForm">
    2   <h1 mat-dialog-title>Hi </h1>
    32  <div mat-dialog-content>
    43    <p>Planner name</p>
    54    <mat-form-field appearance="fill">
    6       <input matInput required   type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name">
     5      <input matInput required type="text" [(ngModel)]="planner.name" name="name" placeholder="Planner name">
    76    </mat-form-field>
    87    <p>Planner description</p>
    98    <mat-form-field appearance="fill">
    10       <textarea matInput required name="description" [(ngModel)]="planner.description" type="text" placeholder="Planner description"></textarea>
     9      <textarea matInput required name="description" [(ngModel)]="planner.description" type="text"
     10        placeholder="Planner description"></textarea>
    1111    </mat-form-field>
    1212  </div>
    1313  <div mat-dialog-actions>
    14    
    15     <button mat-button type="submit" [disabled]="!f.form.valid" >Save</button>
     14    <button pButton pRipple type="button" label="Save" [disabled]="!f.form.valid"
     15      class="p-button-outlined p-button-rounded p-button-help"></button>
    1616  </div>
    1717</form>
    18 
    19 <button mat-button (click)="onCancelClick()">Cancel</button>

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

    r59329aa re29cc2e  
    1 <form  >
    2     <h1 mat-dialog-title>Please select a planner where u want your location to be saved</h1>
    3    
    4 <table class="table" >
    5   <tbody>
    6     <tr *ngFor="let planner of planners">
    7       <td>{{planner.name}}</td>
    8       <td><button mat-raised-button color="primary" (click)="onFormSavePlanner(planner.id)">Save</button></td>
    9     </tr>
    10    
    11   </tbody>
    12 </table>
    13   </form>
    14  
    15   <button type="button"  mat-button (click)="onCancelClick()">Cancel</button>
     1<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
     2    <ng-template pTemplate="header">
     3        <tr>
     4            <th pSortableColumn="name">Name <p-sortIcon field="vin"></p-sortIcon>
     5            </th>
     6            <th style="width:4em"></th>
     7        </tr>
     8    </ng-template>
     9    <ng-template pTemplate="body" let-planner>
     10        <tr>
     11            <td>{{planner.name}}</td>
     12
     13            <td>
     14                <button pButton pRipple type="button" icon="pi pi-heart"
     15                    class="p-button-rounded p-button-help p-button-text" (click)="selectPlanner(planner)"></button>
     16            </td>
     17        </tr>
     18    </ng-template>
     19</p-table>
     20

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

    r59329aa re29cc2e  
    11import { Component, OnInit } from '@angular/core';
    2 import { MatDialogRef } from '@angular/material/dialog';
    32import { ActivatedRoute } from '@angular/router';
    4 import { PlannerLocationDto } from 'src/app/_models/dto/plannerLocationDto';
    5 import { Location } from 'src/app/_models/location';
    63import { Planner } from 'src/app/_models/planner';
    7 import { LocationService } from 'src/app/_services/location.service';
    84import { PlannerService } from 'src/app/_services/planner.service';
     5import { DynamicDialogRef } from 'primeng/dynamicdialog';
     6
     7
     8
    99
    1010@Component({
    … …  
    1616
    1717  planners: Planner[];
    18   location: Location;
    19   plannerId: number;
    20   locationId: number;
    21   plannerLocationDto: PlannerLocationDto;
    22   locationsInPlanner: Location[];
    2318
    2419
    25   constructor(private dialogRef: MatDialogRef<AddLocationToPlannerPanelComponent>, private plannerService: PlannerService,
    26     private locationService: LocationService, private route: ActivatedRoute) {
     20
     21  constructor(private plannerService: PlannerService,
     22    private route: ActivatedRoute, private ref: DynamicDialogRef) {
    2723    this.planners = [];
    28     this.location = new Location;
    29     this.plannerId = 1;
    30     this.locationId = 1;
    31     this.plannerLocationDto = new PlannerLocationDto();
    32     this.locationsInPlanner = [];
    3324  }
    3425
    3526  ngOnInit(): void {
     27
    3628    this.plannerService.getAllPlanners().subscribe(
    37       data => {
    38         this.planners = data;
     29      planner => {
     30        this.planners = planner;
    3931      }
    4032    );
     33  }
     34
     35  selectPlanner(planner: Planner) {
     36    this.ref.close(planner);
     37  }
    4138
    4239
    43     this.route.queryParams
    44       .subscribe(params => {
    45         this.locationId = params.locationId;
    46       }
    47       );
    48   }
    49 
    50   onCancelClick(): void {
    51     this.dialogRef.close();
    52 
    53   }
    54 
    55   onFormSavePlanner(plannerId: number) {
    56     console.log("PLANNER ID: " + plannerId);
    57     console.log("LOC ID "+ this.locationId);
    58     this.plannerLocationDto.locationId = this.locationId;
    59     this.plannerLocationDto.plannerId = plannerId;
    60     /*
    61     this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
    62       data => {
    63         console.log(data);
    64       }
    65     );
    66     */
    67 
    68    // window.location.reload();
    69     }
    7040
    7141}

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

    r59329aa re29cc2e  
    77    <div class="card">
    88        <h5>More photos</h5>
    9         <p-galleria [value]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}" [numVisible]="5"
    10             [circular]="true" [showItemNavigators]="true">
     9        <p-galleria [value]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{'max-width': '640px'}"
     10            [numVisible]="5" [circular]="true" [showItemNavigators]="true">
    1111            <ng-template pTemplate="item" let-image>
    12                 <img src="data:image/png;base64,{{image.content}}" style="width: 100%; height: 350px; display: block;" />
     12                <img src="data:image/png;base64,{{image.content}}"
     13                    style="width: 100%; height: 350px; display: block;" />
    1314            </ng-template>
    1415            <ng-template pTemplate="thumbnail" let-image>
    1516                <div class="p-grid p-nogutter p-justify-center">
    16                     <img src="data:image/png;base64,{{image.content}}" style="width: 50px; height:50px; display: block;" />
     17                    <img src="data:image/png;base64,{{image.content}}"
     18                        style=" height:50px; display: block;" />
    1719                </div>
    1820            </ng-template>
    1921        </p-galleria>
    2022    </div>
     23

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

    r59329aa re29cc2e  
    1 import { Component, OnInit , ViewEncapsulation} from '@angular/core';
     1import { Component, OnInit, ViewEncapsulation } from '@angular/core';
    22import { ActivatedRoute, Router } from '@angular/router';
    33import { Images } from 'src/app/_models/images';
    … …  
    1616  locationDetails: Location;
    1717  images: Images[];
    18   responsiveOptions;
    1918
    20   constructor(private route: ActivatedRoute, private router: Router, private locationService : LocationService,
    21               private imagesService : ImagesService) {
     19  constructor(private route: ActivatedRoute, private router: Router, private locationService: LocationService,
     20    private imagesService: ImagesService) {
    2221    this.locationId = 1;
    2322    this.locationDetails = new Location();
    2423    this.images = [];
     24  }
    2525
    26     this.responsiveOptions = [
    27       {
     26  responsiveOptions:any[] = [
     27    {
    2828        breakpoint: '1024px',
    2929        numVisible: 5
    … …  
    3737        numVisible: 1
    3838    }
    39   ];
    40    }
    41 
    42 
     39];
    4340  ngOnInit(): void {
    4441    this.route.queryParams
    45     .subscribe(params => {     
    46       this.locationId = params.id;
    47     });
     42      .subscribe(params => {
     43        this.locationId = params.id;
     44      });
    4845
    4946    this.locationService.getLocation(this.locationId).subscribe(
    5047      data => {
    51           this.locationDetails = data;
     48        this.locationDetails = data;
    5249      }
    5350    );
    54    
     51
    5552    this.imagesService.getAllImagesForLocation(this.locationId).subscribe(
    5653      image => {
    57          this.images = image;
     54        this.images = image;
    5855      }
    59    );
     56    );
    6057  }
    6158
    62  
     59
    6360}

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

    r59329aa re29cc2e  
    11<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
    22  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    3 
     3  <p-toast></p-toast>
    44<h3>Here are all locations</h3>
    5 
    6 <table class="table" >
     5<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning" label="Back to my Planners" (click)="onClickBackToMyPlanners()"></button>
     6<table class="table">
    77  <thead>
    88    <tr>
    … …  
    1717      <td>{{location.id}}</td>
    1818      <td>{{location.name}}</td>
    19       <td><button mat-raised-button color="primary" (click)="openDialogSave(location.id)">Add to my planner</button></td>
    20       <td><button mat-raised-button color="primary" (click)="onClickSeeDetails(location.id)">See details</button></td>
    21     </tr> 
     19      <td><button type="button" (click)="show(location)" pButton icon="pi pi-info-circle"
     20          label="Add to my planner"></button></td>
     21      <td><button type="button" color="primary" pButton icon="pi pi-info-circle"
     22          (click)="onClickSeeDetails(location.id)" label="See details"></button></td>
     23    </tr>
    2224  </tbody>
    2325</table>
     26

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

    r59329aa re29cc2e  
    1 import { Component, Input, OnInit, Output } from '@angular/core';
     1import { Component, OnInit } from '@angular/core';
    22import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    3 import { MatDialog } from '@angular/material/dialog';
    43import { ActivatedRoute, Router } from '@angular/router';
     4import { MessageService, PrimeNGConfig } from 'primeng/api';
     5import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
     6import { Planner } from '../_models/planner';
    57import { LocationService } from '../_services/location.service';
    68import { AddLocationToPlannerPanelComponent } from './add-location-to-planner-panel/add-location-to-planner-panel.component';
     9import { Location } from '../_models/location';
     10import { PlannerLocationDto } from '../_models/dto/plannerLocationDto';
     11
    712
    813@Component({
    914  selector: 'app-location',
    1015  templateUrl: './location.component.html',
    11   styleUrls: ['./location.component.css']
     16  styleUrls: ['./location.component.css'],
     17  providers: [DialogService, MessageService]
    1218})
    1319export class LocationComponent implements OnInit {
    1420
    15   form: FormGroup;
    1621  categoryIds: string;
    1722  cityId: number;
    … …  
    2328  regionId: number;
    2429  locationId: number;
     30  plannerLocationDto: PlannerLocationDto;
     31  ref: DynamicDialogRef;
    2532
    26   constructor(private fb: FormBuilder, private route: ActivatedRoute, private locationService: LocationService,
    27     private router: Router, private dialog: MatDialog) {
    28     this.form = fb.group({
    29       title: fb.control('initial value', Validators.required)
    30     });
     33
     34
     35  constructor(private route: ActivatedRoute, private locationService: LocationService,
     36    private router: Router, private dialogService: DialogService, private messageService: MessageService) {
    3137    this.cityId = 1;
    3238    this.companionId = 1;
    … …  
    3642    this.regionId = 1;
    3743    this.locationId = 1;
     44    this.ref = new DynamicDialogRef;
     45    this.plannerLocationDto = new PlannerLocationDto();
     46
    3847  }
    3948
    … …  
    7180  }
    7281
    73   openDialogSave(locationId){
    74    // console.log(locationId);
    75       const dialogRef = this.dialog.open(AddLocationToPlannerPanelComponent, {
    76         width: '250px',
    77         data: {}
    78       });
    79       this.router.navigate(['locations'], {queryParams: {regionId: this.regionId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds, locationId: locationId}});
    80      
     82  onClickSeeDetails(id: number) {
     83    this.router.navigate(['location'], { queryParams: { id: id } });
    8184  }
    8285
    83   onClickSeeDetails(id: number){
    84     this.router.navigate(['location'], {queryParams: {id: id}});
     86  show(location: Location) {
     87    this.ref = this.dialogService.open(AddLocationToPlannerPanelComponent, {
     88      header: 'Choose a Planner',
     89      width: '70%',
     90      contentStyle: { "max-height": "500px", "overflow": "auto" },
     91      baseZIndex: 10000
     92    });
     93
     94    this.ref.onClose.subscribe((planner: Planner) => {
     95
     96      this.plannerLocationDto.locationId = location.id;
     97      this.plannerLocationDto.plannerId = planner.id;
     98      console.log("LOC ID: " + this.plannerLocationDto.locationId);
     99      console.log("PLANNER ID: " + this.plannerLocationDto.plannerId);
     100      this.locationService.postLocationToPlanner(this.plannerLocationDto).subscribe(
     101        data => {
     102          console.log(data);
     103        }
     104      );
     105      if (planner) {
     106        this.messageService.add({ severity: 'success', summary: 'Location ' + location.name +  ' has been added to planner: ' , detail: planner.name });
     107      }
     108    });
     109  }
     110
     111  ngOnDestroy() {
     112    if (this.ref) {
     113      this.ref.close();
     114    }
     115  }
     116
     117  onClickBackToMyPlanners(){
     118    this.router.navigate(['planners']);
    85119  }
    86120}

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

    r59329aa re29cc2e  
    1 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
     1import { Component, OnInit } from '@angular/core';
    22import { FormBuilder, FormControl } from '@angular/forms';
    33import { map, startWith, switchMap } from 'rxjs/operators';
    … …  
    1313import { Region } from '../_models/region';
    1414import { RegionService } from '../_services/region.service';
    15 import { ActivatedRoute, Params, Router } from '@angular/router';
    16 import { Location } from '../_models/location';
     15import { ActivatedRoute, Router } from '@angular/router';
    1716
    1817

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

    r59329aa re29cc2e  
    4242        </div>
    4343    </div>
    44     <button mat-raised-button color="primary" >
    45         <mat-icon>edit</mat-icon> Save
    46       </button>
     44    <button pButton pRipplelabel label="Save" class="p-button-help"></button>
     45    <button pButton pRipple label="Back" class="p-button-info" (click)="onClickBack()" [style]="{'margin-left': '.5em'}"></button>
     46
    4747</form>
    4848
    49    

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

    r59329aa re29cc2e  
    7777  }
    7878
     79  onClickBack(){
     80    console.log("promena");
     81    this.router.navigate(['planners']);
     82  }
    7983}

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

    r59329aa re29cc2e  
    11<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    22
    3 <button mat-raised-button (click)="openDialog()">Create initial planner</button>
    43
    5 <mat-grid-list cols="4" >
    6   <mat-grid-tile *ngFor="let planner of planners">
    7       <mat-card class="d-flex flex-column">
    8         <mat-card-title>{{planner.name}}</mat-card-title>
    9         <mat-card-content>
    10           {{planner.description}}
    11         </mat-card-content>
    12         <mat-card-actions class="mt-auto">
    13           <button mat-raised-button color="primary" (click)="onClickEditPlannerGet(planner.id)">
    14             <mat-icon>edit</mat-icon> Edit
    15           </button>       
    16           <button mat-raised-button color="accent">
    17             <mat-icon>remove_red_eye</mat-icon>Details
    18           </button>
    19         </mat-card-actions>
    20       </mat-card>
    21   </mat-grid-tile>
    22 </mat-grid-list>
     4<button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
     5<br>
     6<br>
     7<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">
     8 
     9  <ng-template pTemplate="body" let-planner>
     10      <td >
     11        <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
     12          <ng-template pTemplate="header">
     13          </ng-template>
     14          <p>{{planner.description}}</p>
     15          <ng-template pTemplate="footer">
     16              <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help" (click)="onClickEditPlannerGet(planner.id)"></button>
     17              <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>
     18            </ng-template>
     19        </p-card>
     20      </td>
     21  </ng-template>
     22</p-table>
     23
     24

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

    r59329aa re29cc2e  
    22import { Planner } from '../_models/planner';
    33import { PlannerService } from '../_services/planner.service';
    4 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
    54import { CreateInitialPlannerComponent } from '../create-initial-planner/create-initial-planner.component';
    65import { Router } from '@angular/router';
    76import { PlannerDto } from '../_models/dto/plannerDto';
    87import { FormBuilder, FormGroup, Validators } from '@angular/forms';
     8import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
     9import { PrimeNGConfig } from 'primeng/api';
    910
    1011
    … …  
    1920  plannerDto: PlannerDto;
    2021  editForm: FormGroup;
     22  ref: DynamicDialogRef;
    2123
    2224
    23 
    24   constructor(private plannerService: PlannerService, private dialog: MatDialog, private router: Router,
    25     private fb : FormBuilder) {
     25  constructor(private plannerService: PlannerService, private router: Router,
     26    private fb: FormBuilder, private dialogService: DialogService, private primengConfig: PrimeNGConfig) {
    2627    this.planners = [];
    2728    this.plannerDto = new PlannerDto();
    2829    this.editForm = fb.group({
    2930      title: fb.control('initial value', Validators.required)
    30   });
    31   };
    32  
    33   openDialog(): void {
    34     const dialogRef = this.dialog.open(CreateInitialPlannerComponent, {
    35       width: '250px',
    36       data: {}
    3731    });
     32    this.ref = new DynamicDialogRef;   
    3833  }
    39  
     34
    4035  ngOnInit(): void {
     36
     37    this.primengConfig.ripple = true;
     38
    4139    this.plannerService.getAllPlanners().subscribe(
    4240      data => {
    … …  
    4543    );
    4644  }
    47  
    48   onClickEditPlannerGet(id: number){
     45
     46  onClickEditPlannerGet(id: number) {
    4947    console.log(id);
    50         this.plannerService.getPlannerById(id).subscribe(
    51             data => {         
    52               this.router.navigate(['edit/planner/', id]);
    53             }
    54      );
    55    
     48    this.plannerService.getPlannerById(id).subscribe(
     49      data => {
     50        this.router.navigate(['edit/planner/', id]);
     51      }
     52    );
     53
    5654  }
    57 
    58  
     55  show() {
     56    this.ref = this.dialogService.open(CreateInitialPlannerComponent, {
     57      header: 'Create initial planner',
     58      width: '70%',
     59      contentStyle: { "max-height": "500px", "overflow": "auto" },
     60      baseZIndex: 10000
     61    });
     62  }
    5963}
Note: See TracChangeset for help on using the changeset viewer.