Skip to content

Commit

Permalink
fix: make preset details more readable
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefanoslig
stefanoslig committed May 26, 2024
1 parent bb8ab95 commit 8612158
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 91 deletions.
106 changes: 62 additions & 44 deletions src/app/presets/details/details.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,68 @@
<h2>Preset: {{data.name}}</h2>
<h2 mat-dialog-title>Preset: {{ data.name }}</h2>
<mat-dialog-content>
<mat-tab-group>
<mat-tab label="Mocks details">
<mat-table [dataSource]="mocksDataSource" matSort class="mocks">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Name</mat-header-cell
>
<mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
</ng-container>

<ng-container matColumnDef="scenario">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Scenario</mat-header-cell
>
<mat-cell *matCellDef="let element">{{ element.scenario }}</mat-cell>
</ng-container>

<ng-container matColumnDef="delay">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Delay</mat-header-cell
>
<mat-cell *matCellDef="let element">{{ element.delay }}</mat-cell>
</ng-container>

<h4>Mocks details</h4>
<mat-table [dataSource]="mocksDataSource" matSort class="mocks">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="echo">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Echo</mat-header-cell
>
<mat-cell *matCellDef="let element">{{ element.echo }}</mat-cell>
</ng-container>

<ng-container matColumnDef="scenario">
<mat-header-cell *matHeaderCellDef mat-sort-header> Scenario</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.scenario}}</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="mocksDisplayedColumns"
></mat-header-row>
<mat-row *matRowDef="let row; columns: mocksDisplayedColumns"></mat-row>
</mat-table>
</mat-tab>
<mat-tab label="Variables details">
<mat-table [dataSource]="variablesDataSource" matSort class="variables">
<ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Key</mat-header-cell
>
<mat-cell *matCellDef="let element">{{ element.key }}</mat-cell>
</ng-container>

<ng-container matColumnDef="delay">
<mat-header-cell *matHeaderCellDef mat-sort-header> Delay</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.delay}}</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef mat-sort-header>
Value</mat-header-cell
>
<mat-cell *matCellDef="let element">{{ element.value }}</mat-cell>
</ng-container>

<ng-container matColumnDef="echo">
<mat-header-cell *matHeaderCellDef mat-sort-header> Echo</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.echo}}</mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="mocksDisplayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: mocksDisplayedColumns;"></mat-row>

</mat-table>

<ng-container *ngIf="variablesDataSource.data.length > 0">
<h4>Variables details</h4>
<mat-table [dataSource]="variablesDataSource" matSort class="variables">
<ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef mat-sort-header> Key</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.key}}</mat-cell>
</ng-container>

<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.value}}</mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="variablesDisplayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: variablesDisplayedColumns;"></mat-row>

</mat-table>
</ng-container>
<br />
<mat-header-row
*matHeaderRowDef="variablesDisplayedColumns"
></mat-header-row>
<mat-row
*matRowDef="let row; columns: variablesDisplayedColumns"
></mat-row>
</mat-table>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>
17 changes: 0 additions & 17 deletions src/app/presets/details/details.component.scss
View file

This file was deleted.

62 changes: 32 additions & 30 deletions src/app/presets/details/details.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,41 @@
import { Preset } from '@ng-apimock/core/dist/preset/preset';

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { Preset } from "@ng-apimock/core/dist/preset/preset";
import { Component, Inject } from "@angular/core";
import { MAT_DIALOG_DATA, MatDialogModule } from "@angular/material/dialog";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MockState } from "@ng-apimock/core/dist/state/mock.state";
import { NgIf } from '@angular/common';
import { MatButton } from "@angular/material/button";
import { MatTabsModule } from "@angular/material/tabs";

@Component({
selector: 'apimock-presets-details',
templateUrl: './details.component.html',
styleUrls: ['./details.component.scss'],
standalone: true,
imports: [MatTableModule, NgIf],
selector: "apimock-presets-details",
templateUrl: "./details.component.html",
standalone: true,
imports: [MatTableModule, MatDialogModule, MatButton, MatTabsModule],
})
export class PresetDetailsComponent {
mocksDataSource: MatTableDataSource<any>;
mocksDisplayedColumns = ["name", "scenario", "delay", "echo"];

mocksDataSource: MatTableDataSource<any>;
mocksDisplayedColumns = ['name', 'scenario', 'delay', 'echo'];

variablesDataSource: MatTableDataSource<any>;
variablesDisplayedColumns = ['key', 'value'];
variablesDataSource: MatTableDataSource<any>;
variablesDisplayedColumns = ["key", "value"];

constructor(
@Inject(MAT_DIALOG_DATA) public data: Preset
) {
this.mocksDataSource = new MatTableDataSource([] as { [name: string]: MockState; }[]);
this.mocksDataSource.data = Object.keys(this.data.mocks).map(key => ({
name: key,
...this.data.mocks[key]
}));
constructor(@Inject(MAT_DIALOG_DATA) public data: Preset) {
this.mocksDataSource = new MatTableDataSource(
[] as { [name: string]: MockState }[]
);
this.mocksDataSource.data = Object.keys(this.data.mocks).map((key) => ({
name: key,
...this.data.mocks[key],
}));

this.variablesDataSource = new MatTableDataSource([] as { [key: string]: any }[]);
this.variablesDataSource.data = Object.keys(this.data.variables).map(key => ({
key: key,
value: this.data.variables[key]
}));
}
this.variablesDataSource = new MatTableDataSource(
[] as { [key: string]: any }[]
);
this.variablesDataSource.data = Object.keys(this.data.variables).map(
(key) => ({
key: key,
value: this.data.variables[key],
})
);
}
}

0 comments on commit 8612158

Please # to comment.