Merge pull request #265 from jmartinm/244-templating-complex-fields

Add configurable templating for complex fields.

Author: jmartinm

example/app/app.component.html

@@ -0,0 +1,19 @@
+<ng-template let-item="item" #referenceTemplate>
+  <div class="reference-template-container" [ngSwitch]="item.hasIn(['record', '$ref'])">
+    <span *ngSwitchCase="true">
+      <i class="fa fa-check-circle success" aria-hidden="true"></i>
+      <a href="{{item.getIn(['record', '$ref'])}}" target="_blank">{{item.getIn(['reference', 'misc', 0])}}</a>
+    </span>
+    <span *ngSwitchDefault>
+      <i class="fa fa-exclamation-triangle warning" aria-hidden="true"></i>
+      {{item.getIn(['reference', 'misc', 0])}}
+    </span>
+  </div>
+</ng-template>
+<json-editor *ngIf="record && schema"
+  [config]="config.jsonEditorConfig"
+  [record]="record"
+  (onRecordChange)="onRecordChange($event)"
+  [schema]="schema"
+  [templates]="{referenceTemplate: referenceTemplate}">
+</json-editor>

example/app/app.component.scss

@@ -0,0 +1,14 @@
+.fa-check-circle.success {
+  color: green;
+}
+
+.fa-exclamation-triangle.warning {
+  color: orange;
+}
+
+.reference-template-container {
+  background-color: white;
+  box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
+  padding: 5px;
+  margin-bottom: 5px;
+}

example/app/app.component.ts

@@ -33,14 +33,7 @@ import { AppConfig } from './app.config';
   styleUrls: [
     'app.component.scss'
   ],
-  template: `
-    <json-editor *ngIf="record && schema" 
-      [config]="config.jsonEditorConfig"
-      [record]="record"
-      (onRecordChange)="onRecordChange($event)"
-      [schema]="schema">
-    </json-editor>
-  `
+  templateUrl: 'app.component.html'
 })
 export class AppComponent {
   record: Object;

example/app/app.config.ts

@@ -38,8 +38,14 @@ export class AppConfig {
           findMultiple: (value, expression) => {
             return JSON.stringify(value).search(expression) > -1;
           },
-          itemsPerPage: 5,
+          itemsPerPage: 20,
           maxVisiblePageCount: 5
+        },
+        viewTemplateConfig: {
+          itemTemplateName: 'referenceTemplate',
+          showEditForm: (value) => {
+            return !(value.hasIn(['record', '$ref']));
+          }
         }
       },
       '/arxiv_eprints/items/properties/value': {

src/complex-list-field/complex-list-field.component.html

@@ -29,7 +29,7 @@
       </td>
       <td class="navigator-item-right">
         <label>
-          {{paginatedIndices[0] + 1}}-{{paginatedIndices[paginatedIndices.length - 1] + 1}} of {{values.size}} {{path[path.length - 1]}}
+          {{paginatedItems[0].index + 1}}-{{paginatedItems[paginatedItems.length - 1].index + 1}} of {{values.size}} {{path[path.length - 1]}}
         </label>
         <br>
         <pagination [totalItems]="values.size" [ngModel]="currentPage" [maxSize]="navigator.maxVisiblePageCount" [itemsPerPage]="navigator.itemsPerPage"
@@ -39,11 +39,19 @@
     </tr>
   </table>
   <!-- Elements -->
-  <div *ngFor="let pIndex of paginatedIndices; let i = index; trackBy:trackByIndex">
+  <div *ngFor="let item of paginatedItems; trackBy:trackByIndex">
     <div class="complex-list-field-wrapper">
-      <object-field [value]="values.get(pIndex)" [schema]="schema.items" [path]="getElementPath(pIndex)">
-        <list-action-group (onMove)="moveElement(i, $event)" (onDelete)="deleteElement(i)" [canMove]="schema.sortable"></list-action-group>
-      </object-field>
+      <span *ngIf="shouldDisplayTemplate && values.get(item.index).keySeq().size != 0">
+        <ng-template [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{item: values.get(item.index)}"></ng-template>
+        <a href="javascript:void(0)" (click)="item.isEditFormVisible = !item.isEditFormVisible">
+          {{item.isEditFormVisible ? 'Hide Fields' : 'Show Fields'}}
+        </a>
+      </span>
+      <span *ngIf="item.isEditFormVisible">
+        <object-field [value]="values.get(item.index)" [schema]="schema.items" [path]="getElementPath(item.index)">
+          <list-action-group (onMove)="moveElement(item.index, $event)" (onDelete)="deleteElement(item.index)" [canMove]="schema.sortable"></list-action-group>
+        </object-field>
+      </span>
     </div>
   </div>
 </div>

src/complex-list-field/complex-list-field.component.ts

@@ -27,13 +27,14 @@ import {
   OnInit,
   ChangeDetectionStrategy,
   SimpleChanges,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  TemplateRef
 } from '@angular/core';
 import { List, Map, Set } from 'immutable';
 
 import { AbstractListFieldComponent } from '../abstract-list-field';
 import { AppGlobalsService, JsonStoreService, DomUtilService, PathUtilService } from '../shared/services';
-import { LongListNavigatorConfig, JSONSchema } from '../shared/interfaces';
+import { LongListNavigatorConfig, JSONSchema, PaginatedItem } from '../shared/interfaces';
 
 @Component({
   selector: 'complex-list-field',
@@ -49,7 +50,7 @@ export class ComplexListFieldComponent extends AbstractListFieldComponent implem
   @Input() schema: JSONSchema;
   @Input() path: Array<any>;
 
-  paginatedIndices: Array<number>;
+  paginatedItems: Array<PaginatedItem>;
 
   foundIndices: Array<number>;
   currentFound = 0;
@@ -68,12 +69,7 @@ export class ComplexListFieldComponent extends AbstractListFieldComponent implem
 
   ngOnInit() {
     this.navigator = this.schema.longListNavigatorConfig;
-    if (this.navigator) {
-      this.paginatedIndices = this.getIndicesForPage(this.currentPage);
-    } else {
-      // set all indices as paginated indices if pagination is not enabled.
-      this.paginatedIndices = this.values.keySeq().toArray();
-    }
+    this.paginatedItems = this.getItemsForPage(this.currentPage);
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -88,14 +84,10 @@ export class ComplexListFieldComponent extends AbstractListFieldComponent implem
           // change the page if a new element is added and it's not on the last page
           if (curSize > preSize && this.currentPage !== lastPage) {
             this.currentPage = lastPage;
-          } else {
-            this.paginatedIndices = this.getIndicesForPage(this.currentPage);
           }
-        } else {
-          this.paginatedIndices = this.values.keySeq().toArray();
         }
+        this.paginatedItems = this.getItemsForPage(this.currentPage);
       }
-
     }
   }
 
@@ -150,23 +142,46 @@ export class ComplexListFieldComponent extends AbstractListFieldComponent implem
 
   onPageChange(page: number) {
     this.currentPage = page;
-    this.paginatedIndices = this.getIndicesForPage(page);
+    this.paginatedItems = this.getItemsForPage(page);
   }
 
-  getIndicesForPage(page: number): Array<number> {
-    let start = (page - 1) * this.navigator.itemsPerPage;
-    let indices: Array<number> = Array.apply(0, Array(this.navigator.itemsPerPage))
-      .map((el, index) => start + index);
-    // check if the indices includes some numbers that are out of values index range.
-    let lastIndexDiff = indices[indices.length - 1] - (this.values.size - 1);
-    if (lastIndexDiff > 0) {
-      indices.splice(indices.length - lastIndexDiff);
-    }
-    return indices;
-  }
+  getItemsForPage(page: number): Array<PaginatedItem> {
+    let indices = this.getIndicesToDisplay(page);
 
+    return indices.map((index) => {
+      let showEditForm = this.schema.viewTemplateConfig ? this.schema.viewTemplateConfig.showEditForm : undefined;
+      let isEditFormVisible = !showEditForm || showEditForm(this.values.get(index));
+      return {index, isEditFormVisible};
+    });
+  }
 
   getPageForIndex(index: number): number {
     return Math.floor((index / this.navigator.itemsPerPage) + 1);
   }
+
+  get customTemplate(): TemplateRef<any> {
+    return this.appGlobalsService.templates[this.schema.viewTemplateConfig.itemTemplateName];
+  }
+
+  get shouldDisplayTemplate(): boolean {
+    return this.schema.viewTemplateConfig !== undefined;
+  }
+
+  private getIndicesToDisplay(page: number): Array<number> {
+    let indices: Array<number>;
+    if (this.navigator) {
+      let start = (page - 1) * this.navigator.itemsPerPage;
+      indices = Array.apply(0, Array(this.navigator.itemsPerPage))
+        .map((el, index) => start + index);
+      // check if the indices includes some numbers that are out of values index range.
+      let lastIndexDiff = indices[indices.length - 1] - (this.values.size - 1);
+      if (lastIndexDiff > 0) {
+        indices.splice(indices.length - lastIndexDiff);
+      }
+    } else {
+      indices = this.values.keySeq().toArray();
+    }
+
+    return indices;
+  }
 }

src/shared/interfaces/index.ts

@@ -19,3 +19,4 @@ export { Tab } from './tab';
 export { JSONSchema } from './json-schema';
 export { CategorizedValidationErrors } from './categorized-validation-errors';
 export { ValidationError } from './validation-error';
+export { PaginatedItem } from './paginated-item';

src/shared/interfaces/paginated-item.ts

@@ -0,0 +1,4 @@
+export interface PaginatedItem {
+  index?: number;
+  isEditFormVisible?: boolean;
+}

src/shared/interfaces/schema-option.ts

@@ -1,5 +1,6 @@
 import { AutocompletionConfig } from './autocompletion-config';
 import { LongListNavigatorConfig } from './long-list-navigator-config';
+import { ViewTemplateConfig } from './view-template-config';
 import { RefConfig } from './ref-config';
 import { OnValueChangeFunction } from './on-value-change-function';
 
@@ -89,4 +90,9 @@ export interface SchemaOption {
    * - It is `false` by default.
    */
   sortable?: boolean;
+
+  /**
+   * Configuration for custom templates in complex list fields.
+   */
+  viewTemplateConfig?: ViewTemplateConfig;
 }

src/shared/interfaces/view-template-config.ts

@@ -0,0 +1,19 @@
+import { Map } from 'immutable';
+
+export interface ViewTemplateConfig {
+    /**
+     * Used for complex list fields only (list of nested objects).
+     * The template needs to be defined with <ng-template #myTemplate></ng-template> and passed to the json-editor like so:
+     * <json-editor [templates]="{myTemplate: myTemplate}"></json-editor>
+     *
+     * - template parameter: `item: Immutable.Map<string, any>`
+     */
+    itemTemplateName: string;
+    /**
+     * Used for complex list fields only (list of nested objects).
+     * Function that receives an immutable Map representing the JSON document and returns:
+     * - true if the fields to edit should be visible by default
+     * - false if the fields to edit should be hidden by default
+     */
+    showEditForm?: (item: Map<string, any>) => boolean;
+  };