Skip to content

Commit 49e0399

Browse files
author
Manuel Larsen
committed
- Added "ratio" type to json-table
- Formatted headers of json-table - Increased version
1 parent f70727e commit 49e0399

6 files changed

+167
-30
lines changed

‎dist/angular-uikit.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+12-7
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h1 class="uk-article-title">Sortable</h1>
4646
<article class="uk-article">
4747
<h1 class="uk-article-title">JSON Table Form</h1>
4848
<form name="form" ng-submit="save(mt.machineType)">
49-
<uk-ng-json-table-form model="vm.jsonTableModel" structure="vm.structure" can-reorder="true" submit-on-enter="true" read-only="false">
49+
<uk-ng-json-table-form model="vm.jsonTableModel" structure="vm.structure" compact="true" can-reorder="true" submit-on-enter="true" read-only="false">
5050
<custom-template>
5151
{{m[s.property]}}
5252
</custom-template>
@@ -76,7 +76,7 @@ <h1 class="uk-article-title">JSON Table Form</h1>
7676
vm.selected = { "userId": 2, "id": 12, "title": "in quibusdam tempore odit est dolorem", "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio" };
7777
//vm.source = ['test1', 'test2', 'test3'];
7878

79-
vm.source = [{ id: 1, pippo: 'test1', value: 'primo' }, { id: 56, pippo: 'test2', value: 'secondo' }, { id: 123, pippo: 'test3', value: 'terzo' }];
79+
vm.source = [{ id: 1, pippo: 'test1', value: 4 }, { id: 56, pippo: 'test2', value: 'secondo' }, { id: 123, pippo: 'test3', value: 'terzo' }];
8080

8181

8282
vm.sortList = [{
@@ -159,12 +159,17 @@ <h1 class="uk-article-title">JSON Table Form</h1>
159159
},
160160
{
161161
"label": "Fratello",
162-
"property": "fratello",
163-
"type": "text",
162+
"type": "ratio",
164163
"required": true,
165-
"default": (parent, newItem)=>{
166-
console.log(parent, newItem);
167-
return newItem.autocomplete?newItem.autocomplete.value:null
164+
"first":{
165+
"property": "firstValue",
166+
"default": (parent, newItem)=>{
167+
return newItem.autocomplete?newItem.autocomplete.value:null
168+
}
169+
},
170+
"second":{
171+
"property": "secondValue",
172+
"default": ()=>{return 6}
168173
}
169174
},
170175
{

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-uikit",
3-
"version": "1.4.3",
3+
"version": "1.4.4",
44
"description": "Angular Uikit binding",
55
"main": "./dist/angular-uikit.min.js",
66
"scripts": {

‎src/angular-uikit-jsontableform-compact.html

+67-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<a ng-class="{'inactive': selectedIndex==null || selectedIndex==model.length-1}" ng-click="moveSelectedModelElementDown()" class="uk-text-primary uk-icon-small uk-icon-hover uk-icon-caret-down"></a>
88
<a ng-class="{'inactive': !selectedIndex}" ng-click="moveSelectedModelElementUp()" class="uk-text-primary uk-icon-hover uk-icon-caret-up uk-icon-small"></a>
99
</th>
10-
<th data-ng-repeat="h in valuesStructure" ng-class="{'uk-width-1-10': h.type=='sequence'}">
10+
<th data-ng-repeat="h in valuesStructure" ng-class="{'uk-width-1-10': h.type=='sequence'}" class="uk-text-nowrap">
1111
<i ng-if="h.icon" class="uk-icon-{{h.icon}}"></i> {{h.label}}
1212
</th>
1313
<th ng-if="!readOnly"></th>
@@ -74,6 +74,39 @@
7474
</div>
7575
</div>
7676

77+
<!-- RATIO -->
78+
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
79+
<div class="uk-width-2-5">
80+
<input name="{{s.first.property}}"
81+
data-ng-model="m[s.first.property]"
82+
type="number"
83+
class="uk-form-blank uk-text-right"
84+
data-ng-max="{{s.first.number.max}}"
85+
data-ng-min="{{s.first.number.min}}"
86+
ng-required="s.first.required"
87+
title="{{s.first.property}}"
88+
ng-if="!readOnly">
89+
<div ng-if="readOnly">
90+
{{m[s.first.property]}}
91+
</div>
92+
</div>
93+
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
94+
<div class="uk-width-2-5">
95+
<input name="{{s.second.property}}"
96+
data-ng-model="m[s.second.property]"
97+
type="number"
98+
class="uk-form-blank"
99+
data-ng-max="{{s.second.number.max}}"
100+
data-ng-min="{{s.second.number.min}}"
101+
ng-required="s.second.required"
102+
title="{{s.second.property}}"
103+
ng-if="!readOnly">
104+
<div ng-if="readOnly">
105+
{{m[s.second.property]}}
106+
</div>
107+
</div>
108+
</div>
109+
77110
<!-- TEMPLATE -->
78111

79112
<div ng-switch-when="template" my-ng-init="transcludeTemplate" m="m" s="s"></div>
@@ -110,13 +143,17 @@
110143
<div class="uk-accordion" ng-if="!readOnly || m[s.property].length>0" data-uk-accordion="{showfirst: false, collapse: false, toggle: '.uk-accordion-title-{{s.property}}', containers:'.uk-accordion-content-{{s.property}}'}">
111144
<a ng-init="accordion.show = false" ng-click="accordion.show=!accordion.show" class="uk-width-1-1 uk-button uk-button-large uk-accordion-title-{{s.property}}"
112145
ng-class="{'jsontableform-highlight-border-odd': !oddIteration, 'jsontableform-highlight-border-even': oddIteration}">
113-
<span class="uk-float-left">
146+
147+
<div class="uk-flex uk-flex-space-between uk-flex-middle">
148+
<div class="uk-text-nowrap">
149+
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
150+
</div>
151+
152+
<div>
114153
<i ng-hide="accordion.show" class="uk-icon-caret-right"></i>
115154
<i ng-show="accordion.show" class="uk-icon-caret-down"></i>
116-
</span>
117-
<span class="uk-float-left uk-margin-left">
118-
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
119-
</span>
155+
</div>
156+
</div>
120157
</a>
121158
<div class="uk-accordion-content-{{s.property}}">
122159
<div data-uk-ng-json-table-form
@@ -194,6 +231,30 @@
194231
ng-required="h.required"
195232
title="{{h.property}}">
196233

234+
<!-- RATIO -->
235+
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
236+
<div class="uk-width-2-5">
237+
<input name="{{h.first.property}}"
238+
data-ng-model="newItem[h.first.property]"
239+
type="number"
240+
class="uk-text-right"
241+
data-ng-max="{{h.first.number.max}}"
242+
data-ng-min="{{h.first.number.min}}"
243+
ng-required="h.first.required"
244+
title="{{h.first.property}}">
245+
</div>
246+
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
247+
<div class="uk-width-2-5">
248+
<input name="{{h.second.property}}"
249+
data-ng-model="newItem[h.second.property]"
250+
type="number"
251+
data-ng-max="{{h.second.number.max}}"
252+
data-ng-min="{{h.second.number.min}}"
253+
ng-required="h.second.required"
254+
title="{{h.second.property}}">
255+
</div>
256+
</div>
257+
197258
<!-- TEMPLATE -->
198259

199260
<div ng-switch-when="template" my-ng-init="transcludeInsertTemplate" m="newItem" s="h"></div>

‎src/angular-uikit-jsontableform.html

+69-9
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<a ng-class="{'inactive': selectedIndex==null || selectedIndex==model.length-1}" ng-click="moveSelectedModelElementDown()" class="uk-text-primary uk-icon-small uk-icon-hover uk-icon-caret-down"></a>
88
<a ng-class="{'inactive': !selectedIndex}" ng-click="moveSelectedModelElementUp()" class="uk-text-primary uk-icon-hover uk-icon-caret-up uk-icon-small"></a>
99
</th>
10-
<th data-ng-repeat="h in structure">
10+
<th data-ng-repeat="h in structure" class="uk-text-nowrap">
1111
<div ng-switch="h.type">
1212
<div ng-switch-when="array" ng-init="table.hasChild = true"></div>
1313
<span ng-switch-default><i ng-if="h.icon" class="uk-icon-{{h.icon}}"></i> {{h.label}}</span>
@@ -42,14 +42,16 @@
4242
<div class="uk-accordion" ng-if="!readOnly || m[s.property].length>0"
4343
data-uk-accordion="{showfirst: false, collapse: false, toggle: '.uk-accordion-title-{{s.property}}', containers:'.uk-accordion-content-{{s.property}}'}">
4444
<a ng-init="accordion.show = false" ng-click="accordion.show=!accordion.show" class="uk-width-1-1 uk-button uk-button-primary uk-button-large uk-accordion-title-{{s.property}}">
45-
<span class="uk-float-left">
46-
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
47-
</span>
48-
49-
<span class="uk-float-right">
50-
<i ng-hide="accordion.show" class="uk-icon-caret-right"></i>
51-
<i ng-show="accordion.show" class="uk-icon-caret-down"></i>
52-
</span>
45+
<div class="uk-flex uk-flex-space-between uk-flex-middle">
46+
<div class="uk-text-nowrap">
47+
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
48+
</div>
49+
50+
<div>
51+
<i ng-hide="accordion.show" class="uk-icon-caret-right"></i>
52+
<i ng-show="accordion.show" class="uk-icon-caret-down"></i>
53+
</div>
54+
</div>
5355
</a>
5456
<div class="uk-accordion-content-{{s.property}}">
5557
<div data-uk-ng-json-table-form
@@ -140,6 +142,39 @@
140142
</div>
141143
</div>
142144

145+
<!-- RATIO -->
146+
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
147+
<div class="uk-width-2-5">
148+
<input name="{{s.first.property}}"
149+
data-ng-model="m[s.first.property]"
150+
type="number"
151+
class="uk-form-blank uk-text-right"
152+
data-ng-max="{{s.first.number.max}}"
153+
data-ng-min="{{s.first.number.min}}"
154+
ng-required="s.first.required"
155+
title="{{s.first.property}}"
156+
ng-if="!readOnly">
157+
<div ng-if="readOnly">
158+
{{m[s.first.property]}}
159+
</div>
160+
</div>
161+
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
162+
<div class="uk-width-2-5">
163+
<input name="{{s.second.property}}"
164+
data-ng-model="m[s.second.property]"
165+
type="number"
166+
class="uk-form-blank"
167+
data-ng-max="{{s.second.number.max}}"
168+
data-ng-min="{{s.second.number.min}}"
169+
ng-required="s.second.required"
170+
title="{{s.second.property}}"
171+
ng-if="!readOnly">
172+
<div ng-if="readOnly">
173+
{{m[s.second.property]}}
174+
</div>
175+
</div>
176+
</div>
177+
143178
<!-- TEMPLATE -->
144179

145180
<div ng-switch-when="template" my-ng-init="transcludeTemplate" m="m" s="s"></div>
@@ -227,6 +262,31 @@
227262
ng-required="h.required"
228263
title="{{h.property}}">
229264

265+
266+
<!-- RATIO -->
267+
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
268+
<div class="uk-width-2-5">
269+
<input name="{{h.first.property}}"
270+
data-ng-model="newItem[h.first.property]"
271+
type="number"
272+
class="uk-text-right"
273+
data-ng-max="{{h.first.number.max}}"
274+
data-ng-min="{{h.first.number.min}}"
275+
ng-required="h.first.required"
276+
title="{{h.first.property}}">
277+
</div>
278+
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
279+
<div class="uk-width-2-5">
280+
<input name="{{h.second.property}}"
281+
data-ng-model="newItem[h.second.property]"
282+
type="number"
283+
data-ng-max="{{h.second.number.max}}"
284+
data-ng-min="{{h.second.number.min}}"
285+
ng-required="h.second.required"
286+
title="{{h.second.property}}">
287+
</div>
288+
</div>
289+
230290
<!-- TEMPLATE -->
231291

232292
<div ng-switch-when="template" my-ng-init="transcludeInsertTemplate" m="newItem" s="h"></div>

‎src/angular-uikit-jsontableform.js

+17-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import "./angular-uikit-jsontableform.scss";
2+
23
var templateUrl = require('ngtemplate-loader!html-loader!./angular-uikit-jsontableform.html');
34
var compactTemplateUrl = require('ngtemplate-loader!html-loader!./angular-uikit-jsontableform-compact.html');
45

@@ -66,15 +67,25 @@ export default function ukNgJsonTableForm($compile, $timeout) {
6667
scope.newItem = {};
6768
};
6869

69-
7070
scope.$watch('newItem', function () {
71-
for(let h of scope.structure){
72-
if(h.default && scope.newItem && !scope.newItem[h.property]){
73-
scope.newItem[h.property] = typeof h.default === "function"?h.default(scope.parent, scope.newItem):h.default;
71+
for (let h of scope.structure) {
72+
if (h.type === "ratio") {
73+
scope.injectDefault(h.first);
74+
scope.injectDefault(h.second);
75+
} else {
76+
scope.injectDefault(h)
7477
}
7578
}
7679
}, true);
7780

81+
82+
scope.injectDefault = function (h) {
83+
if (h.default && scope.newItem && !scope.newItem[h.property]) {
84+
scope.newItem[h.property] = typeof h.default === "function" ? h.default(scope.parent, scope.newItem) : h.default;
85+
}
86+
87+
};
88+
7889
scope.removeItem = function removeItem(index) {
7990
UIkit.modal.confirm(scope.deleteConfirmLabel || "Are you sure?", function () {
8091
$timeout(function () {
@@ -96,7 +107,7 @@ export default function ukNgJsonTableForm($compile, $timeout) {
96107
arr.forEach(function (s) {
97108
if (s.type !== 'array') {
98109
if (first) {
99-
firstRow.push({ colspan: 1 });
110+
firstRow.push({colspan: 1});
100111
}
101112
secondRow.push(s);
102113
} else {
@@ -113,7 +124,7 @@ export default function ukNgJsonTableForm($compile, $timeout) {
113124
});
114125
};
115126
recur(struct);
116-
return { firstRow: firstRow, secondRow: secondRow };
127+
return {firstRow: firstRow, secondRow: secondRow};
117128
};
118129

119130
scope.objectify = function (el) {

0 commit comments

Comments
 (0)