Skip to content

U
ulakbus-ui
Commit 741fe310 authored by Evren Kutar's avatar Evren Kutar
Browse files
Options

generate modal form for listnode and node

parent cef1f235
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 202 deletions
app/app.js
View file @ 741fe310
...@@ -24,14 +24,14 @@ var app = angular.module( ...@@ -24,14 +24,14 @@ var app = angular.module(
//'ulakbus.version', //'ulakbus.version',
'schemaForm', 'schemaForm',
'gettext', 'gettext',
'templates-prod' //'templates-prod'
]). ]).
/** /**
* RESTURL is the url of rest api to talk * RESTURL is the url of rest api to talk
* Based on the environment it changes from dev to prod * Based on the environment it changes from dev to prod
*/ */
constant("RESTURL", (function () { constant("RESTURL", (function () {
return {url: "http://api.ulakbus.net/"}; return {url: "http://" + window.location.hostname + ":9001/"};
})()). })()).
/** /**
* USER_ROLES and AUTH_EVENTS are constant for auth functions * USER_ROLES and AUTH_EVENTS are constant for auth functions
......
app/index.html
View file @ 741fe310
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<script src="bower_components/tv4/tv4.js"></script> <script src="bower_components/tv4/tv4.js"></script>
<script src="bower_components/objectpath/lib/ObjectPath.js"></script> <script src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script src="bower_components/objectpath/lib/ObjectPath.js"></script> <script src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script src="bower_components/angular-schema-form/dist/schema-form.min.js"></script> <script src="bower_components/angular-schema-form/dist/schema-form.js"></script>
<script src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script> <script src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<!--<script src="bower_components/angular-schema-form-datepicker/bootstrap-datepicker.min.js"></script>--> <!--<script src="bower_components/angular-schema-form-datepicker/bootstrap-datepicker.min.js"></script>-->
<script src="bower_components/angular-gettext/dist/angular-gettext.min.js"></script> <script src="bower_components/angular-gettext/dist/angular-gettext.min.js"></script>
...@@ -99,8 +99,8 @@ ...@@ -99,8 +99,8 @@
<script src="app.js"></script> <script src="app.js"></script>
<script src="app_routes.js"></script> <script src="app_routes.js"></script>
<script src="shared/scripts/theme.js"></script>
<script src="shared/directives.js"></script> <script src="shared/directives.js"></script>
<!--<script src="shared/scripts/theme.js"></script>-->
<script src="zetalib/interceptors.js"></script> <script src="zetalib/interceptors.js"></script>
<script src="zetalib/general.js"></script> <script src="zetalib/general.js"></script>
<script src="zetalib/forms/form_service.js"></script> <script src="zetalib/forms/form_service.js"></script>
......
app/shared/directives.js
View file @ 741fe310
...@@ -42,12 +42,9 @@ app.directive('sidebar', ['$location', function () { ...@@ -42,12 +42,9 @@ app.directive('sidebar', ['$location', function () {
scope: {}, scope: {},
controller: function ($scope, $http, RESTURL) { controller: function ($scope, $http, RESTURL) {
$http.post(RESTURL.url + 'crud/').success(function (data) { $http.post(RESTURL.url + 'crud/').success(function (data) {
//debugger;
$scope.menuItems = data.models; $scope.menuItems = data.models;
}); });
$scope.menuItems = 'dsadkal';
$scope.selectedMenu = 'dashboard'; $scope.selectedMenu = 'dashboard';
$scope.collapseVar = 0; $scope.collapseVar = 0;
$scope.multiCollapseVar = 0; $scope.multiCollapseVar = 0;
......
app/shared/templates/add.html
View file @ 741fe310
<div class="col-md-12"> <h1>{{ schema.title }}</h1>
<h1>{{ schema.title }}</h1> <form name="formgenerated" sf-schema="schema" sf-form="form" sf-model="model"></form>
<button type="button" ng-repeat="node in listnodes" ng-click="openmodal(node)">Add <span>{{node}}</span></button> <div ng-repeat="node in listnodes">
<form name="formgenerated" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(formgenerated)"></form> <h3>{{ node.title }}
<span>
<a href="javascript:void(0);" add-modal-for-list-node={{node.title}}>
<i class="fa fa-plus-circle fa-fw"></i>
</a>
</span>
</h3>
<table class="table table-bordered" style="background-color:#fff;">
<thead>
<tr>
<th colspan="2">#</th>
<th ng-repeat="(key,value) in node.fields">{{ value.title }}</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td width="60">
<label>
<input type="checkbox" style="zoom:1.5; margin:5px 0 0 8px;">
</label>
</td>
<th scope="row" style="text-align:center">1</th>
<td ng-repeat="(key,value) in node.fields">{{ value.value }}</td>
<td>
<a ng-href="#/crud/{{model}}/edit/{{object.key}}">Edit</a><br>
<a ng-href="#/crud/{{model}}/{{object.key}}">Show</a>
<a ng-href="#/crud/{{model}}/{{object.key}}">Delete</a>
</td>
</tr>
</tbody>
</table>
</div> </div>
\ No newline at end of file
app/shared/templates/directives/sidebar.html
View file @ 741fe310
<div class="navbar-default sidebar" role="navigation"> <div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse"> <div class="sidebar-nav navbar-collapse">
<div class="brand"> <div class="brand">
<a href="" class="logo"><img src="../../../img/brand-logo.png" /></a> <a href="" class="logo"><img src="/img/brand-logo.png" /></a>
</div> </div>
<ul class="nav in" id="side-menu"> <ul class="nav in" id="side-menu">
<sidebar-search></sidebar-search> <!--<sidebar-search></sidebar-search>-->
<li ui-sref-active="active"> <li ui-sref-active="active">
<a href="#/dashboard"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a> <a href="#/dashboard"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li> </li>
<li ng-repeat="(key, item) in menuItems" ng-class="{active: collapseVar == key}">{{dropDown}} <li ng-repeat="(key, item) in menuItems" ng-class="{active: collapseVar == key}">
<a href="" ng-click="check(key)"><i class="fa fa-wrench fa-fw"></i> {{ item }}<span <a href="" ng-click="check(key)"><i class="fa fa-wrench fa-fw"></i> {{ item }}<span
class="fa arrow"></span></a> class="fa arrow"></span></a>
<ul class="nav nav-second-level" collapse="collapseVar!={{key}}"> <ul class="nav nav-second-level" collapse="collapseVar!={{key}}">
...@@ -21,51 +21,6 @@ ...@@ -21,51 +21,6 @@
</ul> </ul>
<!-- /.nav-second-level --> <!-- /.nav-second-level -->
</li> </li>
<!--<li ng-class="{active: collapseVar==2}">-->
<!--<a href="" ng-click="check(2)"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span-->
<!--class="fa arrow"></span></a>-->
<!--<ul class="nav nav-second-level" collapse="collapseVar!=2">-->
<!--<li>-->
<!--<a href="">Second Level Item</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="">Second Level Item</a>-->
<!--</li>-->
<!--<li ng-init="third=!third" ng-class="{active: multiCollapseVar==3}">-->
<!--<a href="" ng-click="multiCheck(3)">Third Level <span class="fa arrow"></span></a>-->
<!--<ul class="nav nav-third-level" collapse="multiCollapseVar!=3">-->
<!--<li>-->
<!--<a href="">Third Level Item</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="">Third Level Item</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="">Third Level Item</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="">Third Level Item</a>-->
<!--</li>-->
<!--</ul>-->
<!--&lt;!&ndash; /.nav-third-level &ndash;&gt;-->
<!--</li>-->
<!--</ul>-->
<!--&lt;!&ndash; /.nav-second-level &ndash;&gt;-->
<!--</li>-->
<!--<li ng-class="{active:collapseVar==4}">-->
<!--<a href="" ng-click="check(4)"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span-->
<!--class="fa arrow"></span></a>-->
<!--<ul class="nav nav-second-level" collapse="collapseVar!=4">-->
<!--<li ng-class="{active: selectedMenu=='blank'}">-->
<!--<a ui-sref="dashboard.blank" ng-click="selectedMenu='blank'">Blank Page</a>-->
<!--</li>-->
<!--<li>-->
<!--<a ui-sref="login">Login Page</a>-->
<!--</li>-->
<!--</ul>-->
<!--&lt;!&ndash; /.nav-second-level &ndash;&gt;-->
<!--</li>-->
</ul> </ul>
</div> </div>
<!-- /.sidebar-collapse --> <!-- /.sidebar-collapse -->
......
app/shared/templates/linkedModelModalContent.html
View file @ 741fe310
<div class="modal-body"> <div class="modal-body">
<form name="linkedModelForm" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(linkedModelForm)"></form> <form name="linkedModelForm" sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" ng-click="onSubmit(linkedModelForm)">OK</button>
<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div> </div>
\ No newline at end of file
app/shared/templates/listnodeModalContent.html
View file @ 741fe310
<div class="modal-body"> <div class="modal-body">
<h3>{{schema.title}}</h3>
<form name="listnodeform" sf-schema="schema" sf-form="form" sf-model="model"></form> <form name="listnodeform" sf-schema="schema" sf-form="form" sf-model="model"></form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
......
app/zetalib/forms/form_service.js
View file @ 741fe310
...@@ -13,38 +13,38 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -13,38 +13,38 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
return RESTURL.url + url; return RESTURL.url + url;
}; };
generator.generate = function (scope, forms) { generator.generate = function (scope, forms) {
if (!forms){return scope;} if (!forms) {
return scope;
}
for (var key in forms) for (var key in forms)
scope[key] = forms[key]; scope[key] = forms[key];
scope.initialModel = angular.copy(scope.model); scope.initialModel = angular.copy(scope.model);
scope.form.push(
{
type: "submit",
title: "Save"
}
);
// if fieldset in form, make it collapsable with template // if fieldset in form, make it collapsable with template
scope.listnodeform = {}; //scope.listnodeform = {};
angular.forEach(scope.schema.properties, function(k, v){ angular.forEach(scope.schema.properties, function (k, v) {
// check if type is date and if type date found change it to string // check if type is date and if type date found change it to string
// and give it 'format':'date' property // and give it 'format':'date' property
// todo: make datepicker work below // todo: make datepicker work below
if (k.type == 'date') { if (k.type == 'date') {
k.type="template"; k.type = "string";
k.templateUrl = "shared/templates/datefield.html"; //k.templateUrl = "shared/templates/datefield.html";
//scope.form[scope.form.indexOf(v)] = { //scope.form[scope.form.indexOf(v)] = {
// "key": k.name, // "key": k.name,
// "minDate": "1995-09-01", // "minDate": "1995-09-01",
// "maxDate": new Date(), // "maxDate": new Date(),
// "format": "yyyy-mm-dd" // "format": "yyyy-mm-dd"
//} //}
// clear default value todo: make it in backend
scope.model[v] = null; scope.model[v] = null;
} }
debugger;
if (k.type == 'int') {k.type='number'} if (k.type == 'int') {
k.type = 'number'
}
// if type is model use foreignKey.html template to show them // if type is model use foreignKey.html template to show them
...@@ -62,9 +62,9 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -62,9 +62,9 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
var modelscope = {"url": scope.url, "form_params": {model: k.model_name}}; var modelscope = {"url": scope.url, "form_params": {model: k.model_name}};
// get model objects from db and add to select list // get model objects from db and add to select list
generator.get_list(modelscope).then(function(res){ generator.get_list(modelscope).then(function (res) {
formitem.titleMap = []; formitem.titleMap = [];
angular.forEach(res.data.objects, function(item){ angular.forEach(res.data.objects, function (item) {
formitem.titleMap.push({ formitem.titleMap.push({
"value": item.key, "value": item.key,
"name": item.data.name ? item.data.name : item.data.username "name": item.data.name ? item.data.name : item.data.username
...@@ -75,83 +75,36 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -75,83 +75,36 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
}); });
scope.form[scope.form.indexOf(v)] = formitem; scope.form[scope.form.indexOf(v)] = formitem;
} }
if (k.type == 'ListNode') {
scope.form.splice([scope.form.indexOf(v)], 1);
scope.listnodes = scope.listnodes ? scope.listnodes : {};
scope.listnodes[k.title] = (k);
scope.model[k.title] = {};
}
if (k.type == 'Node') {
scope.form.splice([scope.form.indexOf(v)], 1);
scope.nodes = scope.nodes ? scope.nodes : {};
scope.nodes[k.title] = (k);
scope.model[k.title] = {};
}
}); });
// catch node and listnode and edit their schema and form props
if ((scope.listnode && scope.listnodes[0]) || (scope.nodes && scope.nodes[0])) {
angular.forEach(scope.form, function (key, val) {
if (typeof key == "object" && key.type == "fieldset") {
// change type to use shared template for form
key.type = "template";
key.templateUrl = "shared/templates/fieldset.html";
// check if fieldset in listnodes
if (scope.listnodes.indexOf(key.title) >= 0) {
scope.listnodeform[key.title] = {};
scope.listnodeform[key.title]["schema"] = {
"title": angular.copy(key.title),
"type": "object",
"properties": {},
"required": []
};
angular.forEach(scope.schema.properties, function(k, v){
angular.forEach(key.items, function(item){
if(item.key == v){
scope.listnodeform[key.title]["schema"]["properties"][v] = angular.copy(k);
}
});
});
key.setType = "ListNode";
scope.listnodeform[key.title]["form"] = [angular.copy(key)];
scope.listnodeform[key.title]["model"] = {};
key.type = "list";
delete key.templateUrl;
delete key.items;
}
}
});
}
scope.isCollapsed = true; scope.isCollapsed = true;
scope.object_id = scope.form_params['object_id'];
// open modal with given items and controller
scope.openmodal = function(listnode, nodeID){
var modalInstance = $modal.open({
animation: false,
templateUrl: 'shared/templates/listnodeModalContent.html',
controller: 'ListNodeModalCtrl',
size: 'lg',
resolve: {
items: function () {
if (nodeID){
scope.listnodeform[listnode].model = 1;
}
return scope.listnodeform[listnode];
}
}
});
modalInstance.result.then(function (childmodel, key) { scope.object_id = scope.form_params['object_id'];
angular.forEach(childmodel, function(v, k){
if (scope.model[k]){
scope.model[k][v.idx] = v;
} else {
scope.model[k] = {};
scope.model[k][v.idx] = v;
}
scope.$broadcast('schemaFormRedraw');
});
});
};
return generator.group(scope); return generator.group(scope);
}; };
generator.group = function (formObject) { generator.group = function (formObject) {
return formObject; return formObject;
}; };
generator.dateformatter = function(formObject){ generator.dateformatter = function (formObject) {
//angular.forEach(formObject.objects, function(k, v) { //angular.forEach(formObject.objects, function(k, v) {
// check if date string and convert to date object // check if date string and convert to date object
// todo: catch date object and convert // todo: catch date object and convert
//debugger; //debugger;
//}); //});
return formObject; return formObject;
}; };
...@@ -163,6 +116,7 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -163,6 +116,7 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
// todo: cover all other exceptions (4xx, 5xx) // todo: cover all other exceptions (4xx, 5xx)
}); });
}; };
generator.get_list = function (scope) { generator.get_list = function (scope) {
return $http return $http
.post(generator.makeUrl(scope.url), scope.form_params) .post(generator.makeUrl(scope.url), scope.form_params)
...@@ -199,7 +153,7 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -199,7 +153,7 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
} }
}; };
generator.submit = function ($scope) { generator.submit = function ($scope) {
debugger; // todo: diff for all submits to recognize form change. if no change returns to view with no submit
data = { data = {
"form": $scope.model, "form": $scope.model,
"cmd": $scope.form_params.cmd, "cmd": $scope.form_params.cmd,
...@@ -220,29 +174,17 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout, ...@@ -220,29 +174,17 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
}); });
/** /**
* ListNodeModalCtrl * ModalCtrl
* controller to use with openmodal function of Generator * controller for listnode, node and linkedmodel modal and save data of it
* @params: $scope, $modalInstance, items * @params: $scope, $modalInstance, $route, items
* @returns: return value used in openmodal's result function * @returns: returns value for modal
*/ */
form_generator.controller('ListNodeModalCtrl', function ($scope, $modalInstance, items) { form_generator.controller('ModalCtrl', function ($scope, $modalInstance, $route, items) {
for (var key in items) angular.forEach(["model", "schema", "form"], function (key) {
$scope[key] = items[key];
$scope.onSubmit = function(form){
// send form to modalinstance result function
$modalInstance.close($scope.model, $scope.form.title);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
form_generator.controller('LinkedModelModalCtrl', function ($scope, $modalInstance, $route, items) {
angular.forEach(["model", "schema", "form"], function(key){
$scope[key] = items[key]; $scope[key] = items[key];
}); });
$scope.onSubmit = function(){ $scope.onSubmit = function () {
// send form to modalinstance result function // send form to modalinstance result function
$modalInstance.close($scope); $modalInstance.close($scope);
$route.reload(); $route.reload();
...@@ -253,48 +195,62 @@ form_generator.controller('LinkedModelModalCtrl', function ($scope, $modalInstan ...@@ -253,48 +195,62 @@ form_generator.controller('LinkedModelModalCtrl', function ($scope, $modalInstan
}; };
}); });
// todo: generic modal directive for all forms /**
//form_generator.directive('openmodal', ['Generator', function (Generator, $modal) { * modal directive for listnodes and nodes
// return { * @params: $modal, Generator
// link: function ($modal) { * @return: openmodal directive
// var modalInstance = $modal.open({ */
// animation: false,
// templateUrl: 'shared/templates/modalContent.html', // todo: use generator.openmodal instead
// controller: 'ModalInstanceCtrl', form_generator.directive('addModalForListNode', function ($modal, Generator) {
// size: 'lg', return {
// resolve: { link: function (scope, element, attributes) {
// items: function () { element.on('click', function () {
// return ""; var modalInstance = $modal.open({
// } animation: false,
// } templateUrl: 'shared/templates/listnodeModalContent.html',
// }); controller: 'ModalCtrl',
// size: 'lg',
// modalInstance.result.then(function (selectedItem) { resolve: {
// $scope.selected = selectedItem; items: function () {
// }, function () { // get node from parent scope catch with attribute
// $log.info('Modal dismissed at: ' + new Date()); var node = angular.copy(scope.$parent.$parent.listnodes[attributes['addModalForListNode']]);
// }); var items = {form: ['*'], schema: {properties: {}, title: node.title, type: "object"}, model: {}};
// } angular.forEach(node.fields, function (item) {
// } items.schema.properties[item.name] = item;
//}]); items.model[item.name] = item.value;
});
return Generator.generate(scope, items);
}
}
});
modalInstance.result.then(function (childmodel, key) {
var subfix = scope.schema.title.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
scope.$parent.model[scope.schema.title][subfix+'.idx'] = scope.model;
});
});
}
}
});
/** /**
* modal directive for linked models * modal directive for linked models
* @params: $modal, Generator
* @return: openmodal directive
*/ */
form_generator.directive('addModal', function ($modal, Generator) { form_generator.directive('addModal', function ($modal, Generator) {
return { return {
link: function (scope, element) { link: function (scope, element) {
element .on('click', function () { element.on('click', function () {
debugger;
var modalInstance = $modal.open({ var modalInstance = $modal.open({
animation: false, animation: false,
templateUrl: 'shared/templates/linkedModelModalContent.html', templateUrl: 'shared/templates/linkedModelModalContent.html',
controller: 'LinkedModelModalCtrl', controller: 'ModalCtrl',
size: 'lg', size: 'lg',
resolve: { resolve: {
items: function () { items: function () {
debugger;
scope.url = 'crud'; scope.url = 'crud';
scope.form_params = {'model': scope.form.title, "cmd": "add"}; scope.form_params = {'model': scope.form.title, "cmd": "add"};
return Generator.get_form(scope); return Generator.get_form(scope);
...@@ -304,19 +260,7 @@ form_generator.directive('addModal', function ($modal, Generator) { ...@@ -304,19 +260,7 @@ form_generator.directive('addModal', function ($modal, Generator) {
modalInstance.result.then(function (childmodel, key) { modalInstance.result.then(function (childmodel, key) {
Generator.submit(scope); Generator.submit(scope);
//angular.forEach(childmodel, function(v, k){
// if ($scope.model[k]){
// $scope.model[k][v.idx] = v;
// } else {
// $scope.model[k] = {};
// $scope.model[k][v.idx] = v;
// }
//scope.$broadcast('schemaFormRedraw');
//scope.apply();
//});
}); });
//$scope.$broadcast('schemaFormRedraw');
//$scope.$apply();
}); });
} }
} }
......
app/zetalib/interceptors.js
View file @ 741fe310
...@@ -25,7 +25,7 @@ app.config(['$httpProvider', function ($httpProvider) { ...@@ -25,7 +25,7 @@ app.config(['$httpProvider', function ($httpProvider) {
'response': function (response) { 'response': function (response) {
//Will only be called for HTTP up to 300 //Will only be called for HTTP up to 300
if(response.data.is_login===true){ if(response.data.is_login===true){
$rootScope.loggedInUser = response.data.is_login; //$rootScope.loggedInUser = response.data.is_login;
//$location.replace(); //$location.replace();
if($location.path()==="/login"){ if($location.path()==="/login"){
$location.path("/dashboard"); $location.path("/dashboard");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment