Refactor schema template

lib/components/JsonSchema/json-schema.html

@@ -1,4 +1,6 @@
-<span *ngIf="schema.isFile" class="param-wrap">
+<ng-container [ngSwitch]="schema._widgetType">
+  <template ngSwitchCase="file">
+    <span class="param-wrap">
       <span class="param-type-file">file</span>
       <div *ngIf="schema._produces && !isRequestSchema" class="file produces">
         <ul>
@@ -11,7 +13,9 @@
         </ul>
       </div>
     </span>
-<span *ngIf="schema.isTrivial && !schema.isFile" class="param-wrap">
+  </template>
+  <template ngSwitchCase="trivial">
+    <span class="param-wrap">
       <span class="param-type param-type-trivial {{schema.type}}"
         [ngClass]="{'with-hint': schema._displayTypeHint}"
         title="{{schema._displayTypeHint}}">{{schema._displayType}} {{schema._displayFormat}}
@@ -21,17 +25,25 @@
         <span *ngFor="let enumItem of schema.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
       </div>
     </span>
-<div *ngIf="schema._isTuple" class="params-wrap params-array array-tuple">
+  </template>
+  <template ngSwitchCase="tuple">
+    <div class="params-wrap params-array array-tuple">
       <template ngFor [ngForOf]="schema.items" let-item="$implicit" let-idx="index" [ngForTrackBy]="trackByIdx">
         <div class="tuple-item">
           <span class="tuple-item-index"> [{{idx}}]: </span>
-      <json-schema class="nested-schema" [pointer]="item._pointer" [isArray]='item._isArray'
+          <json-schema class="nested-schema" [pointer]="item._pointer"
           [nestOdd]="!nestOdd" [isRequestSchema]="isRequestSchema">
           </json-schema>
         </div>
       </template>
     </div>
-<table *ngIf="!schema.isTrivial && !schema.isTuple" class="params-wrap" [ngClass]="{'params-array': _isArray}">
+  </template>
+  <template ngSwitchCase="array">
+    <json-schema class="nested-schema" [pointer]="schema._pointer" [isArray]='true'
+    [nestOdd]="!nestOdd" [isRequestSchema]="isRequestSchema"> </json-schema>
+  </template>
+  <template ngSwitchCase="object">
+    <table class="params-wrap" [ngClass]="{'params-array': schema._isArray}">
       <!-- <caption> {{_displayType}} </caption> -->
       <template ngFor [ngForOf]="properties" let-prop="$implicit" let-last="last" [ngForTrackBy]="trackByIdx">
         <tr class="param" [ngClass]="{'last': last,
@@ -73,7 +85,7 @@
         <tr class="param-schema" [ngClass]="{'last': last}" [hidden]="!prop._pointer">
           <td colspan="2">
             <zippy #subSchema title="Expand" [headless]="true" (open)="lazySchema.load()" [visible]="autoExpand">
-          <json-schema-lazy #lazySchema [auto]="autoExpand" class="nested-schema" [pointer]="prop._pointer" [isArray]='prop._isArray'
+              <json-schema-lazy #lazySchema [auto]="autoExpand" class="nested-schema" [pointer]="prop._pointer"
               [nestOdd]="!nestOdd" [isRequestSchema]="isRequestSchema">
               </json-schema-lazy>
             </zippy>
@@ -90,3 +102,6 @@
         </td>
       </tr>
     </table>
+  </template>
+
+</ng-container>

lib/components/JsonSchema/json-schema.scss

@@ -212,7 +212,7 @@ li:before {
 
   > span {
     flex: 0;
-    padding: 10px 15px;
+    padding: 10px 15px 10px 0;
     font-family: monospace;
   }
 

lib/components/JsonSchema/json-schema.ts

@@ -22,7 +22,6 @@ export class JsonSchema extends BaseComponent {
   _hasSubSchemas: boolean = false;
   properties: any;
   _isArray: boolean;
-  @Input() isArray: boolean;
   @Input() final: boolean = false;
   @Input() nestOdd: boolean;
   @Input() childFor: string;
@@ -89,7 +88,6 @@ export class JsonSchema extends BaseComponent {
     }
 
     this.properties = this.schema._properties;
-    this._isArray = this.isArray || this.schema._isArray;
     if (this.isRequestSchema) {
       this.properties = this.properties && this.properties.filter(prop => !prop.readOnly);
     }

lib/services/schema-helper.service.ts

@@ -69,6 +69,7 @@ const injectors = {
         || JsonPointer.join(propertySchema._pointer || propPointer, ['items']);
 
       SchemaHelper.runInjectors(injectTo, propertySchema.items, propPointer);
+      injectTo._widgetType = 'array';
     }
   },
   tuple: {
@@ -83,7 +84,7 @@ const injectors = {
         let itemSchema = propertySchema.items[i];
         itemSchema._pointer = itemSchema._pointer || JsonPointer.join(itemsPtr, [i.toString()]);
       }
-
+      injectTo._widgetType = 'tuple';
       // SchemaHelper.runInjectors(injectTo, propertySchema.items, propPointer);
     }
   },
@@ -94,14 +95,16 @@ const injectors = {
     inject: (injectTo, propertySchema = injectTo) => {
       let baseName = propertySchema._pointer && JsonPointer.baseName(propertySchema._pointer);
       injectTo._displayType = propertySchema.title || baseName || 'object';
+      injectTo._widgetType = 'object';
     }
   },
   noType: {
     check: (propertySchema) => !propertySchema.type,
     inject: (injectTo) => {
-      injectTo._displayType = '< * >';
+      injectTo._displayType = '< anything >';
       injectTo._displayTypeHint = 'This field may contain data of any type';
       injectTo.isTrivial = true;
+      injectTo._widgetType = 'trivial';
     }
   },
   simpleType: {
@@ -119,6 +122,7 @@ const injectors = {
         injectTo._displayType = propertySchema.title ?
           `${propertySchema.title} (${propertySchema.type})` : propertySchema.type;
       }
+      injectTo._widgetType = 'trivial';
     }
   },
   integer: {
@@ -176,7 +180,7 @@ const injectors = {
       let root = SpecManager.instance().schema;
       injectTo._produces = parentParam && parentParam.produces || root.produces;
       injectTo._consumes = parentParam && parentParam.consumes || root.consumes;
-
+      injectTo._widgetType = 'file';
     }
   }
 };