Angular Dialog avec Datatable

**Whisper40** · 03/08/2020, 13h29

Bonjour

,

Cette fois-ci j'ai vraiment pas d'idée sur comment résoudre mon problème..

Mon besoin : Afficher un dialog qui permet sur click d'un bouton d'edition de mettre à jour le contenu de la datatable.

Actuellement : Le code html du dialog est OK
Quelques fonctions de mises à jour sont OK
Sur click du bouton d'edition la dialog s'affiche mais sans la data.

Le problème : Je n'ai jamais fais ce type de manipulation avec deux classes dans un meme component.ts.
L'une des classes doit récupérer la data de l'autre classe.

Merci pour l'explication !

Le dialog.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h2 mat-dialog-title>Moficiation du CheckConfig <strong>{{action}}</strong></h2>
<mat-dialog-content class="mat-typography" *ngIf="action != 'Delete'">
  <form #userForm="ngForm">
 
 
    <mat-form-field>
      <mat-label>Status</mat-label>
      <select matNativeControl required name="status" [(ngModel)]="local_data.status">
        <option value="OK">OK</option>
        <option value="KO">KO</option>
        <option value="NotListed">NotListed</option>
      </select>
    </mat-form-field>
    <mat-form-field>
      <input type="text" matInput required id="details" name="details" [(ngModel)]="local_data.details"
        placeholder="Détails">
    </mat-form-field>
 
  </form>
</mat-dialog-content>
 
<div mat-dialog-actions align="end">
  <button mat-button (click)="doAction()" color="warn">{{action}}</button>
  <button mat-button (click)="closeDialog()" mat-flat-button>Cancel</button>
</div>

Le check-config.component.ts

Code angular :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
export class CheckConfigComponent implements OnInit {
...
 constructor(private dataService: RestApiService, private changeDetectorRefs: ChangeDetectorRef, private notification: NotificationsService, public dialog: MatDialog) {     
  }
openDialog(action: string, checkconfig: any) {
    checkconfig.action = action;
    const dialogRef = this.dialog.open(checkconfig, {
      data: checkconfig
  });
 
    dialogRef.afterClosed().subscribe(result => {
        if (result.event === 'Update') {
            this.updateRowData(result.data);
        }});
  }
 
  updateRowData(checkconfig: any) {
    this.dataSource.data = this.dataSource.data.filter((value, key) => {
        if (value.id === checkconfig.id) {
            value.status = checkconfig.status;
            value.details = checkconfig.details;            
        }
        return true;
    });
}
...
...
...
 
@Component({
  // tslint:disable-next-line: component-selector
  selector: 'dialog-content',
  templateUrl: 'dialog-content.html',
})
// tslint:disable-next-line: component-class-suffix
export class DialogContent {
  action: string;
  local_data: any;
 
  constructor(
      public dialogRef: MatDialogRef<any>,
      // @Optional() is used to prevent error if no data is passed
      @Optional() @Inject(MAT_DIALOG_DATA) public data: any) {
      // *console.log(data);
      this.local_data = XXXXX;                                                                  //Problème : Comment y mettre la data que j'ai récupéré dans la classe au dessus ?
      this.action = this.local_data.action;
  }
 
  doAction() {
      this.dialogRef.close({ event: this.action, data: this.local_data });
  }
 
  closeDialog() {
      this.dialogRef.close({ event: 'Cancel' });
  }
 
}
}

**dukoid** · 03/08/2020, 14h17

ou est CheckConfigComponent.html ?

**Whisper40** · 03/08/2020, 14h19

Je ne pensais pas qu'il serait utile à la résolution , le voila

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<mat-card> 
<div fxLayout="row wrap">
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-info text-center" (click)= "btnCategoryClick('')">
        <h1 class="font-light text-white m-0">{{totalCount}}</h1>
        <h6 class="text-white m-0">Total Configs</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-success text-center" (click)= "btnCategoryClick('OK')">
        <h1 class="font-light text-white m-0">{{OK}}</h1>
        <h6 class="text-white m-0">Status : OK</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-danger text-center" (click)= "btnCategoryClick('KO')">
        <h1 class="font-light text-white m-0">{{KO}}</h1>
        <h6 class="text-white m-0">Status : KO</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
  <!-- column -->
  <div fxFlex.gt-sm="25" fxFlex.gt-xs="100" fxFlex="100">
    <mat-card>
      <div class="box p-20 bg-warning text-center" (click)= "btnCategoryClick('Solved')">
        <h1 class="font-light text-white m-0">{{Solved}}</h1>
        <h6 class="text-white m-0">Status : Solved</h6>
      </div>
    </mat-card>
  </div>
  <!-- column -->
</div>
 
    <mat-card-content *ngIf='dataSource.data.length > 0'>
    <mat-card-title>Voici l'ensemble des problèmes de configuration identifiés</mat-card-title>
 
	    <mat-form-field class="filter">
    	    <input type="text" placeholder="Filtrez l'information de votre choix" (keyup)="applyFilteringDataTable($event.target.value)" matInput autocomplete="off">
        </mat-form-field>
 
        <mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8" #exporter="matTableExporter" >  
 
            <ng-container matColumnDef="namespacename">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Namespace</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.namespacename}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="servicename">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Composant</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.servicename}} </mat-cell>
            </ng-container>    
 
            <ng-container matColumnDef="typeverification">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Type de Vérification</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.typeverification}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.status}} </mat-cell>
            </ng-container>  
 
            <ng-container matColumnDef="details">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Détails</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.details}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="reportdate">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Date du signalement</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.reportdate}} </mat-cell>
            </ng-container>
 
            <ng-container matColumnDef="action">
                <mat-header-cell *matHeaderCellDef mat-sort-header>Confirmer la correction</mat-header-cell>
                    <mat-cell *matCellDef="let element"> 
                    <a (click)="openDialog('Update',element)" class="m-r-10 cursor-pointer"><i class="fa fa-pencil"></i></a>  
                        <button mat-icon-button color="warn" (click)='putComponentsConfig(element)' aria-label="Confirmer la correction">
                            <mat-icon>verified</mat-icon>
                        </button>
                    </mat-cell>
            </ng-container>
 
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
 
        </mat-table>
 
        <div fxLayout="row">
	        <div fxFlex.gt-sm="100%" >
                <mat-card>
                    <mat-card-content>
                        <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 15, 100]" showFirstLastButtons></mat-paginator>     
                        <div class="button-row align-center">
                            <button mat-raised-button color="accent" matTooltip="Excel, format propriétaire !" matTooltipPosition="above" (click)="exporter.exportTable('xlsx', {fileName:'Liste de l\'ensemble des namespaces', sheet: 'Services', Props: {Author: 'DevOps Team'}})">Excel</button>
                            <button mat-raised-button color="accent" matTooltip="CSV, le format libre des tableurs !" matTooltipPosition="above" (click)="exporter.exportTable('csv', {fileName:'Liste de l\'ensemble des namespaces'})">Csv</button>
                            <button mat-raised-button color="accent" matTooltip="Json, le format structuré de données !" matTooltipPosition="above" (click)="exporter.exportTable('json', {fileName:'Liste de l\'ensemble des namespaces'})">Json</button>
                            <button mat-raised-button color="accent" matTooltip="Txt, un export basique adapté à Teams !" matTooltipPosition="above" (click)="exporter.exportTable('txt', {fileName:'Liste de l\'ensemble des namespaces'})">Txt</button>
                        </div>
                    </mat-card-content>
                </mat-card>
            </div>
        </div>
    </mat-card-content>
</mat-card>

**dukoid** · 03/08/2020, 14h49

je cherche à comprendre qui imbrique quoi ?

CheckConfigComponent c'est l'affichage principale
donc on ouvre une boite de dialog depuis cette page

je n'ai jamais essayé, peut être comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
openDialog(action: string, checkconfig: any) {
    checkconfig.action = action;
    const dialogRef = this.dialog.open(
      checkconfig, 
     { data: checkconfig },
      myDataxxxx
});

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 constructor(
      public dialogRef: MatDialogRef<any>,  @Optional() @Inject(MAT_DIALOG_DATA) public data: any,   myDataXXXX: any) {
      console.log(myDataXXXX);
      this.local_data = myDataXXXX;                                                                  //Problème : Comment y mettre la data que j'ai récupéré dans la classe au dessus ?
      this.action = this.local_data.action;
  }

**Whisper40** · 03/08/2020, 14h55

Page principale: check-config.component.html
Dialog qui se rajoute par dessus : dialog.component.html

Voila un tuto en ligne qui montre le résultat final :https://www.freakyjolly.com/angular-...-using-dialog/
Ce sera beaucoup plus clair, ta modif dans le opendialog me semble trés étrange

La variable "checkconfig" correspond à ma DATA.

**dukoid** · 03/08/2020, 17h31

le code précédent que j'ai mis n'est pas bon.

Angular Dialog avec Datatable

Angular

Vue hybride

Discussions similaires

Partager

Partager