refactor: renamve Method to Operation

README.md

@@ -138,7 +138,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
   * **function**: A getter function. Must return a number representing the offset (in pixels);
 * `suppress-warnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
 * `lazy-rendering` - if set, enables lazy rendering mode in ReDoc. This mode is useful for APIs with big number of operations (e.g. > 50). In this mode ReDoc shows initial screen ASAP and then renders the rest operations asynchronously while showing progress bar on the top. Check out the [demo](\\rebilly.github.io/ReDoc) for the example.
-* `hide-hostname` - if set, the protocol and hostname is not shown in the method definition.
+* `hide-hostname` - if set, the protocol and hostname is not shown in the operation definition.
 * `expand-responses` - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. `expand-responses="200,201"`. Special value `"all"` expands all responses by default. Be careful: this option can slow-down documentation rendering time.
 * `required-props-first` - show required properties first ordered in the same order as in `required` array.
 

lib/components/EndpointLink/endpoint-link.html

@@ -1,7 +1,7 @@
-<div class="method-endpoint" (click)="handleClick()">
+<div class="operation-endpoint" (click)="handleClick()">
   <h5 class="http-verb" [ngClass]="verb">{{verb}}</h5>
   <span><!--
-  --><span class="method-api-url-path">{{path}}</span><!--
+  --><span class="operation-api-url-path">{{path}}</span><!--
 --></span>
 </div>
 <svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
@@ -11,7 +11,7 @@ <h5 class="http-verb" [ngClass]="verb">{{verb}}</h5>
   <div *ngFor="let server of servers" class="server-item">
     <div class="description" [innerHtml]="server.description | marked"></div>
     <div select-on-click class="url">
-      <span class="method-api-url"> {{server.url}}</span>{{path}}
+      <span class="operation-api-url"> {{server.url}}</span>{{path}}
     </div>
   </div>
 </div>

lib/components/EndpointLink/endpoint-link.scss

@@ -6,7 +6,7 @@
   cursor: pointer;
 }
 
-.method-endpoint {
+.operation-endpoint {
   padding: 10px 30px 10px 20px;
   border-radius: $border-radius*2;
   background-color: darken($black, 2%);
@@ -18,7 +18,7 @@
   border: 1px solid transparent;
 }
 
-.method-endpoint > .method-params-subheader {
+.operation-endpoint > .operation-params-subheader {
   padding-top: 1px;
   padding-bottom: 0;
   margin: 0;
@@ -29,7 +29,7 @@
   border-radius: $border-radius;
 }
 
-.method-api-url {
+.operation-api-url {
   color: rgba($black, .8);
   &-path {
     font-family: $headers-font, $headers-font-family;
@@ -96,7 +96,7 @@
   transition: all 0.25s ease;
 }
 :host.expanded {
-  > .method-endpoint {
+  > .operation-endpoint {
     border-color: $side-bar-bg-color;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;

lib/components/EndpointLink/endpoint-link.spec.ts

@@ -72,11 +72,11 @@ describe('Redoc components', () => {
 });
 
 
-/** Test component that contains a Method. */
+/** Test component that contains an Operation. */
 @Component({
   selector: 'test-app',
   template:
-      `<method pointer='#/paths/~1user~1{username}/put'></method>`
+      `<operation pointer='#/paths/~1user~1{username}/put'></operation>`
 })
 class TestAppComponent {
 }

lib/components/JsonSchema/json-schema-lazy.spec.ts

@@ -45,7 +45,7 @@ describe('Redoc components', () => {
 });
 
 
-/** Test component that contains a Method. */
+/** Test component that contains a lazy schema. */
 @Component({
   selector: 'test-app',
   template:

lib/components/JsonSchema/json-schema.spec.ts

@@ -57,7 +57,7 @@ describe('Redoc components', () => {
 });
 
 
-/** Test component that contains a Method. */
+/** Test component that contains a json schema. */
 @Component({
   selector: 'test-app',
   template:

lib/components/Operation/operation.html

@@ -0,0 +1,30 @@
+<div class="operation" *ngIf="operation">
+  <div class="operation-content">
+    <h2 class="operation-header sharable-header">
+        <a class="share-link" href="#{{operation.anchor}}"></a>{{operation.summary}}
+    </h2>
+    <div class="operation-tags" *ngIf="operation.info.tags.length">
+        <a *ngFor="let tag of operation.info.tags" attr.href="#tag/{{tag}}"> {{tag}} </a>
+    </div>
+    <p *ngIf="operation.info.description" class="operation-description"
+    [innerHtml]="operation.info.description | marked">
+    </p>
+    <redoc-externalDocs [docs]="operation.externalDocs"></redoc-externalDocs>
+    <params-list pointer="{{pointer}}/parameters"> </params-list>
+    <responses-list pointer="{{pointer}}/responses"> </responses-list>
+  </div>
+  <div class="operation-samples">
+    <h4 class="operation-params-subheader">Definition</h4>
+
+    <endpoint-link [verb]="operation.verb" [path]="operation.path"> </endpoint-link>
+
+    <div>
+        <request-samples [pointer]="pointer" [schemaPointer]="operation.bodyParam?._pointer">
+        </request-samples>
+    </div>
+    <div>
+        <br>
+        <responses-samples pointer="{{pointer}}/responses"> </responses-samples>
+    </div>
+  </div>
+</div>

lib/components/Method/method.scss → lib/components/Operation/operation.scss

@@ -14,11 +14,11 @@
 //   border-bottom: 0;
 // }
 
-.method-header {
+.operation-header {
   margin-bottom: calc(1em - 6px);
 }
 
-.method-tags {
+.operation-tags {
   margin-top: 20px;
 
   > a {
@@ -39,45 +39,45 @@
   }
 }
 
-.method-content, .method-samples {
+.operation-content, .operation-samples {
   display: block;
   box-sizing: border-box;
   float: left;
 }
 
-.method-content {
+.operation-content {
   width: 100% - $samples-panel-width;
   padding: $section-spacing;
 }
 
-.method-samples {
+.operation-samples {
   color: $sample-panel-color;
   width: 40%;
   padding: $section-spacing;
   background: $samples-panel-bg-color;
 }
 
-.method-samples header,
-.method-samples > h5 {
+.operation-samples header,
+.operation-samples > h5 {
   color: $sample-panel-headers-color;
   text-transform: uppercase;
 }
 
-.method-samples > h5 {
+.operation-samples > h5 {
     margin-bottom: 8px;
 }
 
-.method-samples schema-sample {
+.operation-samples schema-sample {
   display: block;
 }
 
-.method:after {
+.operation:after {
   content: "";
   display: table;
   clear:both;
 }
 
-.method-description {
+.operation-description {
   padding: 6px 0 10px 0;
   margin: 0;
 }
@@ -87,15 +87,15 @@
 }
 
 @media (max-width: $right-panel-squash-breakpoint) {
-  .methods:before {
+  .operations:before {
     display: none;
   }
 
-  .method-samples, .method-content  {
+  .operation-samples, .operation-content  {
     width: 100%;
   }
 
-  .method-samples {
+  .operation-samples {
     margin-top: 2em;
   }
 

lib/components/Method/method.spec.ts → lib/components/Operation/operation.spec.ts

@@ -9,17 +9,17 @@ import {
 
 import { getChildDebugElement } from '../../../tests/helpers';
 
-import { Method } from './method';
+import { Operation } from './operation';
 import { SpecManager } from '../../utils/spec-manager';;
 import { LazyTasksService } from '../../shared/components/LazyFor/lazy-for';;
 
 describe('Redoc components', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({ declarations: [ TestAppComponent ] });
   });
-  describe('Method Component', () => {
+  describe('Operation Component', () => {
     let builder;
-    let component: Method;
+    let component: Operation;
     let specMgr;
 
     beforeEach(async(inject([SpecManager, LazyTasksService], (_specMgr, lazyTasks) => {
@@ -33,7 +33,7 @@ describe('Redoc components', () => {
 
     beforeEach(() => {
       let fixture = TestBed.createComponent(TestAppComponent);
-      component = getChildDebugElement(fixture.debugElement, 'method').componentInstance;
+      component = getChildDebugElement(fixture.debugElement, 'operation').componentInstance;
       fixture.detectChanges();
     });
 
@@ -43,23 +43,23 @@ describe('Redoc components', () => {
     });
 
     it('should init basic component data', () => {
-      component.method.verb.should.be.equal('put');
-      component.method.path.should.be.equal('/user/{username}');
+      component.operation.verb.should.be.equal('put');
+      component.operation.path.should.be.equal('/user/{username}');
     });
 
 
     it('should main tag', () => {
-      component.method.info.tags.should.be.empty();
+      component.operation.info.tags.should.be.empty();
     });
   });
 });
 
 
-/** Test component that contains a Method. */
+/** Test component that contains a Operation. */
 @Component({
   selector: 'test-app',
   template:
-      `<method pointer='#/paths/~1user~1{username}/put'></method>`
+      `<operation pointer='#/paths/~1user~1{username}/put'></operation>`
 })
 class TestAppComponent {
 }

lib/components/Method/method.ts → lib/components/Operation/operation.ts

@@ -6,7 +6,7 @@ import { SchemaHelper } from '../../services/schema-helper.service';
 import { OptionsService, MenuService } from '../../services/';
 
 
-interface MethodInfo {
+interface OperationInfo {
   verb: string;
   path: string;
   info: {
@@ -23,18 +23,18 @@ interface MethodInfo {
 }
 
 @Component({
-  selector: 'method',
-  templateUrl: './method.html',
-  styleUrls: ['./method.css'],
+  selector: 'operation',
+  templateUrl: './operation.html',
+  styleUrls: ['./operation.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class Method extends BaseComponent implements OnInit {
+export class Operation extends BaseComponent implements OnInit {
   @Input() pointer :string;
   @Input() parentTagId :string;
 
   @HostBinding('attr.operation-id') operationId;
 
-  method: MethodInfo;
+  operation: OperationInfo;
 
   constructor(
     specMgr:SpecManager,
@@ -46,23 +46,23 @@ export class Method extends BaseComponent implements OnInit {
   init() {
     this.operationId = this.componentSchema.operationId;
 
-    this.method = {
+    this.operation = {
       verb: JsonPointer.baseName(this.pointer),
       path: JsonPointer.baseName(this.pointer, 2),
       info: {
         description: this.componentSchema.description,
         tags: this.filterMainTags(this.componentSchema.tags)
       },
       bodyParam: this.findBodyParam(),
-      summary: SchemaHelper.methodSummary(this.componentSchema),
+      summary: SchemaHelper.operationSummary(this.componentSchema),
       anchor: this.buildAnchor(),
       externalDocs: this.componentSchema.externalDocs
     };
   }
 
   buildAnchor():string {
     return this.menu.hashFor(this.pointer,
-      { type: 'method', operationId: this.operationId, pointer: this.pointer },
+      { type: 'operation', operationId: this.operationId, pointer: this.pointer },
       this.parentTagId );
   }
 
@@ -73,8 +73,8 @@ export class Method extends BaseComponent implements OnInit {
   }
 
   findBodyParam() {
-    let pathParams = this.specMgr.getMethodParams(this.pointer);
-    let bodyParam = pathParams.find(param => param.in === 'body');
+    let params = this.specMgr.getOperationParams(this.pointer);
+    let bodyParam = params.find(param => param.in === 'body');
     return bodyParam;
   }
 

lib/components/MethodsList/methods-list.html → lib/components/OperationsList/operations-list.html

@@ -1,12 +1,12 @@
-<div class="methods">
+<div class="operations">
   <div class="tag" *ngFor="let tag of tags; trackBy:trackByTagName" [attr.section]="tag.id">
     <div class="tag-info" *ngIf="tag.name">
       <h1 class="sharable-header"> <a class="share-link" href="#{{tag.id}}"></a>{{tag.name}} </h1>
       <p *ngIf="tag.description" [innerHtml]="tag.description | marked"> </p>
       <redoc-externalDocs [docs]="tag.metadata.externalDocs"></redoc-externalDocs>
     </div>
-    <method *lazyFor="let methodItem of tag.items; let ready = ready;"
-    [hidden]="!ready" [pointer]="methodItem.metadata.pointer"
-    [parentTagId]="tag.id" [attr.section]="methodItem.id"></method>
+    <operation *lazyFor="let operation of tag.items; let ready = ready;"
+    [hidden]="!ready" [pointer]="operation.metadata.pointer"
+    [parentTagId]="tag.id" [attr.section]="operation.id"></operation>
   </div>
 </div>