Skip to content

Commit

Permalink
- Added "ratio" type to json-table
Browse files Browse the repository at this point in the history 
- Formatted headers of json-table
- Increased version
  • Loading branch information
Manuel Larsen committed Oct 30, 2018
1 parent f70727e commit 49e0399
Show file tree
Hide file tree
Showing 6 changed files with 167 additions and 30 deletions.
2 changes: 1 addition & 1 deletion dist/angular-uikit.min.js
View file

Large diffs are not rendered by default.

19 changes: 12 additions & 7 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ <h1 class="uk-article-title">Sortable</h1>
<article class="uk-article">
<h1 class="uk-article-title">JSON Table Form</h1>
<form name="form" ng-submit="save(mt.machineType)">
<uk-ng-json-table-form model="vm.jsonTableModel" structure="vm.structure" can-reorder="true" submit-on-enter="true" read-only="false">
<uk-ng-json-table-form model="vm.jsonTableModel" structure="vm.structure" compact="true" can-reorder="true" submit-on-enter="true" read-only="false">
<custom-template>
{{m[s.property]}}
</custom-template>
Expand Down Expand Up @@ -76,7 +76,7 @@ <h1 class="uk-article-title">JSON Table Form</h1>
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" };
//vm.source = ['test1', 'test2', 'test3'];

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


vm.sortList = [{
Expand Down Expand Up @@ -159,12 +159,17 @@ <h1 class="uk-article-title">JSON Table Form</h1>
},
{
"label": "Fratello",
"property": "fratello",
"type": "text",
"type": "ratio",
"required": true,
"default": (parent, newItem)=>{
console.log(parent, newItem);
return newItem.autocomplete?newItem.autocomplete.value:null
"first":{
"property": "firstValue",
"default": (parent, newItem)=>{
return newItem.autocomplete?newItem.autocomplete.value:null
}
},
"second":{
"property": "secondValue",
"default": ()=>{return 6}
}
},
{
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-uikit",
"version": "1.4.3",
"version": "1.4.4",
"description": "Angular Uikit binding",
"main": "./dist/angular-uikit.min.js",
"scripts": {
Expand Down
73 changes: 67 additions & 6 deletions src/angular-uikit-jsontableform-compact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<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>
<a ng-class="{'inactive': !selectedIndex}" ng-click="moveSelectedModelElementUp()" class="uk-text-primary uk-icon-hover uk-icon-caret-up uk-icon-small"></a>
</th>
<th data-ng-repeat="h in valuesStructure" ng-class="{'uk-width-1-10': h.type=='sequence'}">
<th data-ng-repeat="h in valuesStructure" ng-class="{'uk-width-1-10': h.type=='sequence'}" class="uk-text-nowrap">
<i ng-if="h.icon" class="uk-icon-{{h.icon}}"></i> {{h.label}}
</th>
<th ng-if="!readOnly"></th>
Expand Down Expand Up @@ -74,6 +74,39 @@
</div>
</div>

<!-- RATIO -->
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
<div class="uk-width-2-5">
<input name="{{s.first.property}}"
data-ng-model="m[s.first.property]"
type="number"
class="uk-form-blank uk-text-right"
data-ng-max="{{s.first.number.max}}"
data-ng-min="{{s.first.number.min}}"
ng-required="s.first.required"
title="{{s.first.property}}"
ng-if="!readOnly">
<div ng-if="readOnly">
{{m[s.first.property]}}
</div>
</div>
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
<div class="uk-width-2-5">
<input name="{{s.second.property}}"
data-ng-model="m[s.second.property]"
type="number"
class="uk-form-blank"
data-ng-max="{{s.second.number.max}}"
data-ng-min="{{s.second.number.min}}"
ng-required="s.second.required"
title="{{s.second.property}}"
ng-if="!readOnly">
<div ng-if="readOnly">
{{m[s.second.property]}}
</div>
</div>
</div>

<!-- TEMPLATE -->

<div ng-switch-when="template" my-ng-init="transcludeTemplate" m="m" s="s"></div>
Expand Down Expand Up @@ -110,13 +143,17 @@
<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}}'}">
<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}}"
ng-class="{'jsontableform-highlight-border-odd': !oddIteration, 'jsontableform-highlight-border-even': oddIteration}">
<span class="uk-float-left">

<div class="uk-flex uk-flex-space-between uk-flex-middle">
<div class="uk-text-nowrap">
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
</div>

<div>
<i ng-hide="accordion.show" class="uk-icon-caret-right"></i>
<i ng-show="accordion.show" class="uk-icon-caret-down"></i>
</span>
<span class="uk-float-left uk-margin-left">
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
</span>
</div>
</div>
</a>
<div class="uk-accordion-content-{{s.property}}">
<div data-uk-ng-json-table-form
Expand Down Expand Up @@ -194,6 +231,30 @@
ng-required="h.required"
title="{{h.property}}">

<!-- RATIO -->
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
<div class="uk-width-2-5">
<input name="{{h.first.property}}"
data-ng-model="newItem[h.first.property]"
type="number"
class="uk-text-right"
data-ng-max="{{h.first.number.max}}"
data-ng-min="{{h.first.number.min}}"
ng-required="h.first.required"
title="{{h.first.property}}">
</div>
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
<div class="uk-width-2-5">
<input name="{{h.second.property}}"
data-ng-model="newItem[h.second.property]"
type="number"
data-ng-max="{{h.second.number.max}}"
data-ng-min="{{h.second.number.min}}"
ng-required="h.second.required"
title="{{h.second.property}}">
</div>
</div>

<!-- TEMPLATE -->

<div ng-switch-when="template" my-ng-init="transcludeInsertTemplate" m="newItem" s="h"></div>
Expand Down
78 changes: 69 additions & 9 deletions src/angular-uikit-jsontableform.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<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>
<a ng-class="{'inactive': !selectedIndex}" ng-click="moveSelectedModelElementUp()" class="uk-text-primary uk-icon-hover uk-icon-caret-up uk-icon-small"></a>
</th>
<th data-ng-repeat="h in structure">
<th data-ng-repeat="h in structure" class="uk-text-nowrap">
<div ng-switch="h.type">
<div ng-switch-when="array" ng-init="table.hasChild = true"></div>
<span ng-switch-default><i ng-if="h.icon" class="uk-icon-{{h.icon}}"></i> {{h.label}}</span>
Expand Down Expand Up @@ -42,14 +42,16 @@
<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}}'}">
<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}}">
<span class="uk-float-left">
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
</span>

<span class="uk-float-right">
<i ng-hide="accordion.show" class="uk-icon-caret-right"></i>
<i ng-show="accordion.show" class="uk-icon-caret-down"></i>
</span>
<div class="uk-flex uk-flex-space-between uk-flex-middle">
<div class="uk-text-nowrap">
<i ng-if="s.icon" class="uk-icon-{{s.icon}}"></i> {{m[s.property].length}} {{s.label}}
</div>

<div>
<i ng-hide="accordion.show" class="uk-icon-caret-right"></i>
<i ng-show="accordion.show" class="uk-icon-caret-down"></i>
</div>
</div>
</a>
<div class="uk-accordion-content-{{s.property}}">
<div data-uk-ng-json-table-form
Expand Down Expand Up @@ -140,6 +142,39 @@
</div>
</div>

<!-- RATIO -->
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
<div class="uk-width-2-5">
<input name="{{s.first.property}}"
data-ng-model="m[s.first.property]"
type="number"
class="uk-form-blank uk-text-right"
data-ng-max="{{s.first.number.max}}"
data-ng-min="{{s.first.number.min}}"
ng-required="s.first.required"
title="{{s.first.property}}"
ng-if="!readOnly">
<div ng-if="readOnly">
{{m[s.first.property]}}
</div>
</div>
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
<div class="uk-width-2-5">
<input name="{{s.second.property}}"
data-ng-model="m[s.second.property]"
type="number"
class="uk-form-blank"
data-ng-max="{{s.second.number.max}}"
data-ng-min="{{s.second.number.min}}"
ng-required="s.second.required"
title="{{s.second.property}}"
ng-if="!readOnly">
<div ng-if="readOnly">
{{m[s.second.property]}}
</div>
</div>
</div>

<!-- TEMPLATE -->

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


<!-- RATIO -->
<div ng-switch-when="ratio" class="uk-grid uk-grid-collapse">
<div class="uk-width-2-5">
<input name="{{h.first.property}}"
data-ng-model="newItem[h.first.property]"
type="number"
class="uk-text-right"
data-ng-max="{{h.first.number.max}}"
data-ng-min="{{h.first.number.min}}"
ng-required="h.first.required"
title="{{h.first.property}}">
</div>
<div class="uk-width-1-5 uk-text-center uk-text-large">:</div>
<div class="uk-width-2-5">
<input name="{{h.second.property}}"
data-ng-model="newItem[h.second.property]"
type="number"
data-ng-max="{{h.second.number.max}}"
data-ng-min="{{h.second.number.min}}"
ng-required="h.second.required"
title="{{h.second.property}}">
</div>
</div>

<!-- TEMPLATE -->

<div ng-switch-when="template" my-ng-init="transcludeInsertTemplate" m="newItem" s="h"></div>
Expand Down
23 changes: 17 additions & 6 deletions src/angular-uikit-jsontableform.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import "./angular-uikit-jsontableform.scss";

var templateUrl = require('ngtemplate-loader!html-loader!./angular-uikit-jsontableform.html');
var compactTemplateUrl = require('ngtemplate-loader!html-loader!./angular-uikit-jsontableform-compact.html');

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


scope.$watch('newItem', function () {
for(let h of scope.structure){
if(h.default && scope.newItem && !scope.newItem[h.property]){
scope.newItem[h.property] = typeof h.default === "function"?h.default(scope.parent, scope.newItem):h.default;
for (let h of scope.structure) {
if (h.type === "ratio") {
scope.injectDefault(h.first);
scope.injectDefault(h.second);
} else {
scope.injectDefault(h)
}
}
}, true);


scope.injectDefault = function (h) {
if (h.default && scope.newItem && !scope.newItem[h.property]) {
scope.newItem[h.property] = typeof h.default === "function" ? h.default(scope.parent, scope.newItem) : h.default;
}

};

scope.removeItem = function removeItem(index) {
UIkit.modal.confirm(scope.deleteConfirmLabel || "Are you sure?", function () {
$timeout(function () {
Expand All @@ -96,7 +107,7 @@ export default function ukNgJsonTableForm($compile, $timeout) {
arr.forEach(function (s) {
if (s.type !== 'array') {
if (first) {
firstRow.push({ colspan: 1 });
firstRow.push({colspan: 1});
}
secondRow.push(s);
} else {
Expand All @@ -113,7 +124,7 @@ export default function ukNgJsonTableForm($compile, $timeout) {
});
};
recur(struct);
return { firstRow: firstRow, secondRow: secondRow };
return {firstRow: firstRow, secondRow: secondRow};
};

scope.objectify = function (el) {
Expand Down

0 comments on commit 49e0399

Please sign in to comment.