Order property of schema is not taken into account #175

Author: aeberhart

projects/dashjoin/json-schema-form/src/lib/object/object.component.html

@@ -1,7 +1,21 @@
-<div
+<div *ngIf="!state.schema.order"
     [ngStyle]="{display:'flex', 'flex-wrap': 'wrap', 'flex-direction': this.state.schema.layout === 'vertical' ? 'column':'row'}">
     <div *ngFor="let s of states; let i = index">
         <app-wrapper *ngIf="show(i)" [state]="s"></app-wrapper>
         &nbsp;
     </div>
+</div>
+<div *ngIf="state.schema.order"
+    [ngStyle]="{display:'flex', 'flex-wrap': 'wrap', 'flex-direction': this.state.schema.layout === 'vertical' ? 'column':'row'}">
+    <div *ngFor="let o of this.state.schema.order">
+        <app-wrapper *ngIf="getState(o)" [state]="getState(o)!"></app-wrapper>
+        <div
+            [ngStyle]="{display:'flex', 'flex-wrap': 'wrap', 'flex-direction': this.state.schema.layout === 'vertical' ? 'row':'column'}">
+            <div *ngFor="let oo of getArray(o)">
+                <app-wrapper [state]="getState(oo)!"></app-wrapper>
+                &nbsp;
+            </div>
+        </div>
+        &nbsp;
+    </div>
 </div>

projects/dashjoin/json-schema-form/src/lib/object/object.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
 import { BaseComponent } from '../base/base.component';
 import { State } from '../state';
 
@@ -48,4 +47,17 @@ export class ObjectComponent extends BaseComponent implements OnInit {
     }
     return true
   }
+
+  getState(o: string | string[]): State | undefined {
+    for (const state of this.states)
+      if (state.name === o)
+        return state
+    return undefined
+  }
+
+  getArray(o: string | string[]): string[] | undefined {
+    if (Array.isArray(o))
+      return o
+    return undefined
+  }
 }

src/app/app.component.html

@@ -138,9 +138,7 @@
         Layout:
       </td>
       <td>
-        <!--
         <button (click)="select('order')">order</button>
-        -->
         <button (click)="select('tab')">tab</button>
         <button (click)="select('table')">table</button>
         <button (click)="select('vertical')">vertical</button>