Skip to content

Commit b6fc5d3

Browse files
AnthropicAnthropic
committed
Update the example with more testing examples
These examples will soon be moved out of this repo, but I need them here for now.
1 parent 75feb17 commit b6fc5d3

File tree

4 files changed

+237
-0
lines changed

4 files changed

+237
-0
lines changed

‎examples/add-on/calculate.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/**
2+
* I calculate a field value based on a provided mathematical string
3+
*
4+
* @homepage https://github.com/Anthropic/angular-schema-form-calculate
5+
* @example
6+
* {
7+
* "type":"calculate",
8+
* "key":"area", // the key to COPY the RESULT to (doesn't need 'model' prefix)
9+
* "watch":["length","width"], // The KEYS to WATCH for changes
10+
* "calculate":"model.length * model.width"
11+
* }
12+
*/
13+
angular
14+
.module('schemaForm')
15+
.run(function($templateCache) {
16+
// A template to use
17+
$templateCache.put('calculated-fields.html','<calculate sf-field-model model="model" form="form" />');
18+
})
19+
.directive('calculate', ['$compile', '$http', 'sfBuilder', 'sfSelect', '$interpolate', 'schemaFormDecorators',
20+
function($compile, $http, sfBuilder, sfSelect, $interpolate, schemaFormDecoratorsProvider) {
21+
return {
22+
restrict: 'E',
23+
scope: true,
24+
link: {
25+
post: function(scope, element, attrs, ctrl) {
26+
var watchKeys = scope.form.watch,
27+
key,
28+
i;
29+
30+
scope.form.format = scope.form.format || 'number';
31+
32+
for (i=0; i < watchKeys.length; i++) {
33+
key = watchKeys[i];
34+
35+
scope.$watch(function() {
36+
return $interpolate('{{' + key + '}}', false, null, true)({
37+
model: scope.model,
38+
$i: scope.$i,
39+
$index: scope.$index,
40+
path: scope.path
41+
});
42+
},
43+
function (val, old) {
44+
var newValue = $interpolate('{{' + scope.form.calculate + '}}', false, null, true)({
45+
model: scope.model,
46+
$i: scope.$i,
47+
$index: scope.$index,
48+
path: scope.path
49+
});
50+
51+
if(scope.form.lookup) {
52+
scope.model.calculated = encodeURIComponent(newValue);
53+
var lookup = $interpolate(scope.form.lookup, false, null, true)(scope.model);
54+
$http.get(lookup, { responseType: 'json' })
55+
.success(function(response, status) {
56+
if(response.data) update(response.data);
57+
})
58+
.error(function(data, status) {
59+
scope.form.options = [];
60+
scope.form.selectedOption = '';
61+
});
62+
}
63+
else {
64+
update(newValue);
65+
};
66+
67+
function update(value) {
68+
if(scope.form.format == 'number') value = Number(value);
69+
sfSelect(scope.form.key, scope.model, value);
70+
};
71+
});
72+
};
73+
}
74+
}
75+
};
76+
}
77+
])
78+
.config([ 'schemaFormDecoratorsProvider', 'sfBuilderProvider',
79+
function(schemaFormDecoratorsProvider, sfBuilderProvider) {
80+
var sfField = sfBuilderProvider.builders.sfField;
81+
var ngModel = sfBuilderProvider.builders.ngModel;
82+
var ngModelOptions = sfBuilderProvider.builders.ngModelOptions;
83+
var defaults = [ sfField, ngModel ];
84+
85+
schemaFormDecoratorsProvider.defineAddOn(
86+
'bootstrapDecorator',
87+
'calculate',
88+
'calculated-fields.html',
89+
defaults
90+
);
91+
}
92+
]);

‎examples/data/array-radiobuttons.json‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"schema": {
3+
"type":"object",
4+
"properties":{
5+
"field1":{
6+
"type":"array",
7+
"items":{"type":"object",
8+
"properties":{
9+
"field":{"type":"string",
10+
"title":"Radio 1 Example",
11+
"enum":["valA","valB","valC"]
12+
}
13+
}
14+
}
15+
},
16+
"field2":{"type":"array",
17+
"items":{"type":"object",
18+
"properties":{
19+
"field":{"type":"string",
20+
"title":"Radio 2 Example",
21+
"enum":["val1","val2","val3"]
22+
}
23+
}
24+
}
25+
}
26+
}
27+
},
28+
"form": [
29+
{
30+
"key":"field1",
31+
"add":null,
32+
"notitle":true,
33+
"items":[
34+
{
35+
"key":"field1[].field",
36+
"type": "radiobuttons",
37+
"titleMap": [
38+
{ "value": "valA", "name": "Value A" },
39+
{ "value": "valB", "name": "Value B" },
40+
{ "value": "valC", "name": "Value C" }
41+
]
42+
}
43+
]
44+
},
45+
{
46+
"key":"field2",
47+
"add":"new",
48+
"notitle":true,
49+
"items":[
50+
{
51+
"key":"field2[].field",
52+
"type": "radios",
53+
"titleMap": [
54+
{ "value": "val1", "name": "Value 1" },
55+
{ "value": "val2", "name": "Value 2" },
56+
{ "value": "val3", "name": "Value 3" }
57+
]
58+
}
59+
]
60+
}
61+
]
62+
}

‎examples/data/calculate.json‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"schema": {
3+
"type": "object",
4+
"title": "Comment",
5+
"required": [ "property" ],
6+
"properties": {
7+
"width": {
8+
"title": "Width",
9+
"type": "number"
10+
},
11+
"length": {
12+
"title": "Length",
13+
"type": "number"
14+
},
15+
"area": {
16+
"title": "Area",
17+
"type": "number"
18+
},
19+
"property": {
20+
"type": "array",
21+
"items": {
22+
"type": "object",
23+
"properties": {
24+
"name": {
25+
"title": "Name",
26+
"type": "string"
27+
},
28+
"width": {
29+
"title": "Width",
30+
"type": "number"
31+
},
32+
"length": {
33+
"title": "Length",
34+
"type": "number"
35+
},
36+
"area": {
37+
"title": "Area",
38+
"type": "number"
39+
}
40+
},
41+
"required": [ "name" ]
42+
}
43+
}
44+
}
45+
},
46+
"form": [
47+
{
48+
"type": "help",
49+
"helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>"
50+
},
51+
{
52+
"key": "area",
53+
"type": "calculate",
54+
"watch": [ "property[0].width", "property[0].length" ],
55+
"calculate": "model.property[0].width * model.property[0].length"
56+
},
57+
"width",
58+
"length",
59+
"area",
60+
{
61+
"key": "property",
62+
"type": "tabarray",
63+
"add": "New",
64+
"style": {
65+
"add": "btn-success"
66+
},
67+
"items": [
68+
"property[].name",
69+
"property[].width",
70+
"property[].length",
71+
"property[].area"
72+
]
73+
},
74+
{
75+
"type": "submit",
76+
"style": "btn-info",
77+
"title": "OK"
78+
}
79+
]
80+
}

‎examples/example.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,7 @@ <h3>Schema</h3>
223223

224224
<script type="text/javascript" src="../dist/schema-form.js"></script>
225225
<script type="text/javascript" src="../dist/angular-schema-form-bootstrap.js"></script>
226+
<script type="text/javascript" src="add-on/calculate.js"></script>
226227
<!-- <script type="text/javascript" src="../bower_components/angular-schema-form-datepicker/bootstrap-datepicker.min.js"></script> -->
227228
<!-- <script type="text/javascript" src="../bower_components/angular-schema-form-colorpicker/bootstrap-colorpicker.min.js"></script> -->
228229

@@ -235,6 +236,8 @@ <h3>Schema</h3>
235236
app.controller('TestCtrl', function($scope, $http, $location) {
236237

237238
$scope.tests = [
239+
{ name: "Array Radio-Buttons", data: 'data/array-radiobuttons.json' },
240+
{ name: "Calculate", data: 'data/calculate.json' },
238241
{ name: "Deep Array", data: 'data/deep-array.json' },
239242
{ name: "Simple", data: 'data/simple.json' },
240243
{ name: "Basic JSON Schema Type", data: 'data/types.json' },

0 commit comments

Comments
 (0)