Boolean input and multi items for for array object input.

Author: dhcode

projects/openapi-viewer/src/lib/openapi-viewer.scss

@@ -460,6 +460,10 @@ oav-method-header {
     box-sizing: border-box;
   }
 
+  oav-code-input {
+    flex-grow: 1;
+  }
+
   button {
     color: #fff;
     background-color: #a7a7ac;
@@ -475,6 +479,10 @@ oav-method-header {
   }
 }
 
+.small-editor .CodeMirror {
+  height: 50px;
+}
+
 .oav-add-btn {
   color: #fff;
   background-color: #a7a7ac;

projects/openapi-viewer/src/lib/parameter/parameter.component.html

@@ -29,6 +29,10 @@
       <input type="number" [formControlName]="parameter.name" [placeholder]="parameter.name" [name]="parameter.name" />
     </ng-container>
 
+    <ng-container *ngIf="displayMode === 'boolean'">
+      <input type="checkbox" [formControlName]="parameter.name" [name]="parameter.name" />
+    </ng-container>
+
     <ng-container *ngIf="displayMode === 'file'">
       <input type="file" [formControlName]="parameter.name" [placeholder]="parameter.name" [name]="parameter.name" />
     </ng-container>
@@ -43,14 +47,14 @@
       </select>
     </ng-container>
 
-    <ng-container *ngIf="displayMode === 'arrayWithPrimitive'">
-      <oav-multi-items-input [formControlName]="parameter.name"></oav-multi-items-input>
+    <ng-container *ngIf="displayMode === 'arrayWithPrimitive' || displayMode === 'arrayWithObject'">
+      <oav-multi-items-input [formControlName]="parameter.name" [type]="itemType"></oav-multi-items-input>
     </ng-container>
   </div>
   <div class="description">
     <markdown [data]="parameter.description"></markdown>
 
-    <ng-container *ngIf="displayMode === 'object' || displayMode === 'array'">
+    <ng-container *ngIf="displayMode === 'object' || displayMode === 'array' || displayMode === 'arrayWithObject'">
       <oav-json-schema [schema]="parameter.schema"></oav-json-schema>
     </ng-container>
   </div>

projects/openapi-viewer/src/lib/parameter/parameter.component.ts

@@ -22,6 +22,8 @@ export class ParameterComponent implements OnChanges, OnDestroy {
 
   enum: any[] = null;
 
+  itemType: string;
+
   constructor() {}
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -32,6 +34,9 @@ export class ParameterComponent implements OnChanges, OnDestroy {
     if (this.displayMode === 'object' || this.displayMode === 'array') {
       this.value = JSON.stringify(this.value, null, 2);
     }
+    if (this.displayMode === 'arrayWithObject') {
+      this.itemType = 'object';
+    }
 
     const validators = [];
     if (this.parameter.required) {

projects/openapi-viewer/src/lib/shared-components/multi-items-input/multi-items-input.component.html

@@ -1,7 +1,12 @@
 <ng-container [formGroup]="formGroup">
   <div [formArrayName]="name">
     <div class="multi-item-entry" *ngFor="let control of controls; let i = index">
-      <input type="text" [formControlName]="i.toString()" (blur)="onTouched()" />
+      <ng-container *ngIf="type === 'object'">
+        <oav-code-input [formControlName]="i.toString()" mode="json" class="small-editor"></oav-code-input>
+      </ng-container>
+      <ng-container *ngIf="type !== 'object'">
+        <input type="text" [formControlName]="i.toString()" (blur)="onTouched()" />
+      </ng-container>
       <button type="button" (click)="removeValue(i)" [disabled]="disabled">-</button>
     </div>
   </div>

projects/openapi-viewer/src/lib/shared-components/multi-items-input/multi-items-input.component.ts

@@ -15,6 +15,8 @@ import { AbstractControl, ControlValueAccessor, FormArray, FormControl, FormGrou
 export class MultiItemsInputComponent implements OnInit, OnDestroy, ControlValueAccessor {
   @Input() name: string;
 
+  @Input() type: string;
+
   @Input() required;
 
   disabled = false;

projects/openapi-viewer/src/lib/util/parameter-input.util.ts

@@ -29,6 +29,12 @@ const displayModes = [
     checkV3: (param: BaseParameterObject) => schemaType(param) === 'integer',
     getDefault: (param: BaseParameterObject, mediaType: string) => getExample(param, mediaType)
   },
+  {
+    mode: 'boolean',
+    checkV2: (param: BaseParameterObject) => param.type === 'boolean',
+    checkV3: (param: BaseParameterObject) => schemaType(param) === 'boolean',
+    getDefault: (param: BaseParameterObject, mediaType: string) => getExample(param, mediaType)
+  },
   {
     mode: 'object',
     checkV2: (param: BaseParameterObject) => param.type === 'object',
@@ -47,6 +53,12 @@ const displayModes = [
     checkV3: (param: BaseParameterObject) => schemaType(param) === 'array' && primitiveTypes.includes(itemsType(param.schema)),
     getDefault: (param: BaseParameterObject, mediaType: string) => getExample(param, mediaType)
   },
+  {
+    mode: 'arrayWithObject',
+    checkV2: (param: BaseParameterObject) => param.type === 'array' && itemsType(param) === 'object',
+    checkV3: (param: BaseParameterObject) => schemaType(param) === 'array' && itemsType(param.schema) === 'object',
+    getDefault: (param: BaseParameterObject, mediaType: string) => getExample(param, mediaType, true)
+  },
   {
     mode: 'array',
     checkV2: (param: BaseParameterObject) => param.type === 'array',
@@ -81,7 +93,17 @@ function itemsType(obj: { items?: any } | any) {
   console.warn('items type not found', obj);
 }
 
-function getExample(param: BaseParameterObject, mediaType: string): any {
+function getExample(param: BaseParameterObject, mediaType: string, onlyDefault = false): any {
+  if (param.type === 'array' && param.items && 'default' in param.items) {
+    return [param.items.default];
+  }
+  if (isPrimitiveType(param.type) && param.items && 'default' in param.items) {
+    return param.items.default;
+  }
+  if (onlyDefault) {
+    return;
+  }
+
   if (param.example !== undefined) {
     return param.example;
   }
@@ -91,12 +113,6 @@ function getExample(param: BaseParameterObject, mediaType: string): any {
   if (param.schema) {
     return exampleFromSchema(param.schema);
   }
-  if (param.type === 'array' && param.items && 'default' in param.items) {
-    return [param.items.default];
-  }
-  if (isPrimitiveType(param.type) && param.items && 'default' in param.items) {
-    return param.items.default;
-  }
   return exampleFromSchema(param as any);
 }
 

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { OpenAPIObject } from 'openapi3-ts';
 import { ActivatedRoute } from '@angular/router';
-import { query } from '@angular/animations';
 
 @Component({
   selector: 'app-root',