Skip to content

Usage: JSON Schema Tables

Callan Milne edited this page Jun 21, 2017 · 9 revisions
!! NOTE !!
This functionality is currently in DEVELOPMENT
It is available on the *DEV BRANCH ONLY*

appbuilder3 JSON-Schema Table: Product Price

HTML

<section ng-controller="TableContainerCtrl">
  <div id="MyTable"
    ab-schema="schema"
    ab-table="table"
    ab-models="models">
  </div>
</section>

JavaScript

const MyApp = angular.module("MyApp", [
  "AppBuilder3",
]);

MyApp.controller("TableContainerCtrl", TableContainerCtrl);

TableContainerCtrl.$inject = ["$scope", "$timeout", "JsonSchema"];
function TableContainerCtrl (  $scope,   $timeout,   JsonSchema) {

  $scope.schema = productPriceSchema();

  $scope.models = productPrices();

  $scope.table = {
    cols: [
      typeCol(),
      priceCol(),
      currencyCol(),
      validFromCol(),
      validThruCol(),
      isPublicCol(),
    ],
  };

  function priceCol () {
    return col("price", "$ Price", function getCellValue (model, schema) {
      return model.amount.units;
    });
  }

  function currencyCol () {
    return col("currency", "Currency", function getCellValue (model, schema) {
      return model.amount.currency.code;
    });
  }

  function typeCol () {
    return col("type", "Type", function getCellValue (model, schema) {
      return model.type;
    });
  }

  function validFromCol () {
    return col("valid_from", "Valid From", function getCellValue (model, schema) {
      return model.date_from && model.date_from.split("T")[0] || "-";
    });
  }

  function validThruCol () {
    return col("valid_thru", "Valid Thru", function getCellValue (model, schema) {
      return model.date_thru && model.date_thru.split("T")[0] || "-";
    });
  }

  function isPublicCol () {
    return col("is_public", "Public", function getCellValue (model, schema) {
      return model.is_public;
    });
  }

  function col (property, label, getValueFn) {
    return {
      "property": property,
      "headers": {
        "label": label,
      },
      "cells": {
        "value": getValueFn,
        "onClick": function ($event, model, schema) {
          let key = property;
          let value = getValueFn(model, schema);
          alert(
            `Clicked '${key}' column, current value is '${value}' for` +
            ` model ${model}`
          );
        },
      },
    };
  }

  function productPriceSchema () {
    return new JsonSchema({
      "id": "https://raw.githubusercontent.com/eviratec/schema/master/v1/product/price.json#",
      "$schema": "http://json-schema.org/draft-04/schema#",
      "description": "schema for a product price",
      "type": "object",
      "additionalProperties": false,
      "required": [ "id", "type", "amount", "is_public", "date_from", "date_thru" ],
      "properties": {
        "id": {
          "type": "string",
          "format": "uuid"
        },
        "type": {
          "type": "string",
          "maxLength": 18,
        },
        "amount": {
          "id": "https://raw.githubusercontent.com/eviratec/schema/master/v1/currency/amount.json#",
          "$schema": "http://json-schema.org/draft-04/schema#",
          "description": "schema for a currency amount",
          "type": "object",
          "required": [ "currency", "units" ],
          "properties": {
            "currency": {
              "id": "https://raw.githubusercontent.com/eviratec/schema/master/v1/currency.json#",
              "$schema": "http://json-schema.org/draft-04/schema#",
              "description": "schema for a currency",
              "type": "object",
              "additionalProperties": false,
              "required": [ "id", "code", "label", "separator" ],
              "properties": {
                "id": {
                  "type": "string",
                  "format": "uuid"
                },
                "code": {
                  "type": "string",
                  "maxLength": 4
                },
                "label": {
                  "type": "string",
                  "maxLength": 64
                },
                "prefix": {
                  "type": "string",
                  "maxLength": 1
                },
                "separator": {
                  "type": "object",
                  "required": [ "thousands", "decimal" ],
                  "properties": {
                    "thousands": {
                      "type": "string",
                      "minLength": 1,
                      "maxLength": 1
                    },
                    "decimal": {
                      "type": "string",
                      "minLength": 1,
                      "maxLength": 1
                    }
                  }
                }
              }
            },
            "units": {
              "type": "number",
              "minimum": 0
            }
          }
        },
        "is_public": {
          "type": "boolean",
          "value": false
        },
        "date_from": {
          "type": "string",
          "format": "date-time"
        },
        "date_thru": {
          "type": "string",
          "format": "date-time"
        }
      }
    });
  }

  function productPrices () {
    return [{
      "amount": {
        "currency": { "code": "AUD" },
        "units": 120.00,
      },
      "type": "PROMO",
      "date_from": "2017-01-01T00:00:00.000Z",
      "date_thru": "2017-07-01T00:00:00.000Z",
      "is_public": true,
    }, {
      "amount": {
        "currency": { "code": "AUD" },
        "units": 149.00,
      },
      "type": "LIST",
      "date_from": "2016-01-01T00:00:00.000Z",
      "date_thru": null,
      "is_public": true,
    }, {
      "amount": {
        "currency": { "code": "AUD" },
        "units": 61.00,
      },
      "type": "PURCH",
      "date_from": "2016-01-01T00:00:00.000Z",
      "date_thru": null,
      "is_public": true,
    }, {
      "amount": {
        "currency": { "code": "AUD" },
        "units": 229.00,
      },
      "type": "LIST",
      "date_from": null,
      "date_thru": "2016-01-01T00:00:00.000Z",
      "is_public": true,
    }, {
      "amount": {
        "currency": { "code": "AUD" },
        "units": 94.00,
      },
      "type": "PURCH",
      "date_from": null,
      "date_thru": "2016-01-01T00:00:00.000Z",
      "is_public": true,
    }];
  }

}
Clone this wiki locally