Skip to content

Commit

Permalink
Merge pull request #4 from dhutchison/features/2-NodeDetail
Browse files Browse the repository at this point in the history
Addition of node detail (method) capability on node selection.

Includes deployment version
  • Loading branch information
dhutchison committed Mar 8, 2019
2 parents 6fdfead + 2527096 commit f351270
Show file tree
Hide file tree
Showing 13 changed files with 218 additions and 11 deletions.
4 changes: 2 additions & 2 deletions docs/404.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.4963c1e1ffd00e7d57a1.css"></head>
<link rel="stylesheet" href="styles.a28a5002915fea04e4ea.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.88f2fd7c2945d23e6062.js"></script></body>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.12f4031c93c1c8fa87dc.js"></script></body>
</html>
4 changes: 2 additions & 2 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.4963c1e1ffd00e7d57a1.css"></head>
<link rel="stylesheet" href="styles.a28a5002915fea04e4ea.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.88f2fd7c2945d23e6062.js"></script></body>
<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="es2015-polyfills.4a4cfea0ce682043f4e9.js" nomodule></script><script type="text/javascript" src="polyfills.407a467dedb63cfdd103.js"></script><script type="text/javascript" src="main.12f4031c93c1c8fa87dc.js"></script></body>
</html>

Large diffs are not rendered by default.

Large diffs are not rendered by default.

9 changes: 8 additions & 1 deletion src/app/api-path-tree/api-path-tree.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
<p-tree [value]="apiPathNodes" layout="horizontal">
<p-tree [value]="apiPathNodes" layout="horizontal"
selectionMode="single" [(selection)]="selectedNode">
<ng-template let-node pTemplate="operation">
<span pTooltip="{{ node.tooltip }}">{{ node.label }}</span>
</ng-template>
</p-tree>

<app-node-method-detail *ngIf="selectedNode"
[(method)]="selectedNode.method"
[(path)]="selectedNode.path"
[(node)]="selectedNode.operation">
</app-node-method-detail>
1 change: 1 addition & 0 deletions src/app/api-path-tree/api-path-tree.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export class ApiPathTreeComponent implements OnInit {
* Object hoilding the tree nodes to display
*/
apiPathNodes: TreeNode[] = [];
selectedNode: TreeNode;

constructor(
private fileReaderService: FileReaderService,
Expand Down
11 changes: 10 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,35 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { ButtonModule } from 'primeng/button';
import {FieldsetModule} from 'primeng/fieldset';
import { PanelModule } from 'primeng/panel';
import { TooltipModule } from 'primeng/tooltip';
import { TreeModule } from 'primeng/tree';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FileChooserComponent } from './file-chooser/file-chooser.component';
import { ApiPathTreeComponent } from './api-path-tree/api-path-tree.component';
import { NodeMethodDetailComponent } from './node-method-detail/node-method-detail.component';

@NgModule({
declarations: [
AppComponent,
FileChooserComponent,
ApiPathTreeComponent
ApiPathTreeComponent,
NodeMethodDetailComponent
],
imports: [
BrowserModule,
AppRoutingModule,

BrowserAnimationsModule,

ButtonModule,
FieldsetModule,
PanelModule,
TooltipModule,
TreeModule
],
Expand Down
53 changes: 53 additions & 0 deletions src/app/node-method-detail/node-method-detail.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<div *ngIf="node">
<p-panel styleClass="http-{{method | lowercase}}" [toggleable]="true">
<p-header>
<p-button label="{{method | uppercase}}" style="display: inline-block" ></p-button>
<p class="path" style="display: inline-block">{{path}}</p>
<p style="display: inline-block">{{node.summary}}</p>
</p-header>
<p>{{node.description}}</p>

<p-fieldset [toggleable]="true">
<p-header>Parameters</p-header>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of node.parameters">
<td class="key">
<dl>
<dt>{{p.name}} <span *ngIf="p.required" class="required">* <sup>required</sup></span></dt>
<dd>({{p.in}})</dd>
</dl>
</td>
<td>{{p.description}}</td>
</tr>
</tbody>
</table>
</p-fieldset>

<p-fieldset [toggleable]="true">
<p-header>
Responses
</p-header>
<table>
<thead>
<tr>
<th>Code</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="key" *ngFor="let item of node.responses | keyvalue">
<td>{{item.key}}</td>
<td>{{item.value.description}}</td>
</tr>
</tbody>
</table>
</p-fieldset>
</p-panel>
</div>
35 changes: 35 additions & 0 deletions src/app/node-method-detail/node-method-detail.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
span.required {
color: red;
}

.path {
font-weight: bold;
margin: 1em;
}

p-fieldset {
margin:1em;
}
p-fieldset dt {
font-weight: bold;
}
p-fieldset dd {
font-style: italic;
font-size: 0.8em;
margin:0.5em;
}

table {
width: 100%;
}

th {
border-bottom: 1px solid #CCC;
}

th {
text-align: left;
}
td {
padding:0.5em;
}
25 changes: 25 additions & 0 deletions src/app/node-method-detail/node-method-detail.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { NodeMethodDetailComponent } from './node-method-detail.component';

describe('NodeMethodDetailComponent', () => {
let component: NodeMethodDetailComponent;
let fixture: ComponentFixture<NodeMethodDetailComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NodeMethodDetailComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(NodeMethodDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
20 changes: 20 additions & 0 deletions src/app/node-method-detail/node-method-detail.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Component, OnInit, Input } from '@angular/core';
import { TreeNode } from 'primeng/api';

@Component({
selector: 'app-node-method-detail',
templateUrl: './node-method-detail.component.html',
styleUrls: ['./node-method-detail.component.scss']
})
export class NodeMethodDetailComponent implements OnInit {

@Input() method: String;
@Input() path;
@Input() node: TreeNode;

constructor() { }

ngOnInit() {
}

}
14 changes: 11 additions & 3 deletions src/app/services/openapi-treenode-converter.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export class OpenapiTreenodeConverterService {
if (apiPath[method]) {
/* Definition exists for the http method */
pathNode.children.push(
this.createHttpMethodNode(method.toUpperCase(), apiPath[method]));
this.createHttpMethodNode(key, method.toUpperCase(), apiPath[method]));
}
});
}
Expand Down Expand Up @@ -196,13 +196,16 @@ export class OpenapiTreenodeConverterService {
* @param method the HTTP method
* @param operation the details of the Operation
*/
private createHttpMethodNode(method: string, operation: OperationObject): TreeNode {
private createHttpMethodNode(path:string, method: string, operation: OperationObject): TreeNode {

const node: OperationTreeNode = {
label: method,
leaf: true,
type: 'operation',
styleClass: 'ui-treenode-http-method'
styleClass: 'ui-treenode-http-method',
operation: operation,
method: method,
path: path
};

/* Add a tooltip */
Expand All @@ -220,4 +223,9 @@ export class OpenapiTreenodeConverterService {

export interface OperationTreeNode extends TreeNode {
tooltip?: string;

//Additional fields to supply details to Node Detail Rendering
method?:string;
path?:string;
operation?: OperationObject;
}
49 changes: 49 additions & 0 deletions src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,53 @@
.ui-corner-all {
border-radius: 10px;
}
}

.http-post {
.ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
border-color:#49cc90;
background:rgba(73,204,144,.1);
}

.ui-widget-header button {
background:#49cc90;
border-color:#49cc90;
padding: 0 0.5em
}
}

.http-put {
.ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
border-color:#fca130;
background:rgba(252,161,48,.1);
}
.ui-widget-header .ui-button {
border-color:#fca130;
background: #fca130;
padding: 0 0.5em
}
}

.http-get {
.ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
border-color:#61affe;
background:rgba(97,175,254,.1);
}
.ui-widget-header .ui-button {
border-color:#61affe;
background: #61affe;
padding: 0 0.5em
}
}

.http-delete {
.ui-panel, .ui-widget-header, .ui-panel-content, .ui-panel-footer {
border-color:#f93e3e;
background:rgba(249,62,62,.1);
}
.ui-widget-header .ui-button {
border-color:#f93e3e;
background: #f93e3e;
padding: 0 0.5em
}
}

0 comments on commit f351270

Please sign in to comment.