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(
//'ulakbus.version',
'schemaForm',
'gettext',
'templates-prod'
//'templates-prod'
]).
/**
* RESTURL is the url of rest api to talk
* Based on the environment it changes from dev to prod
*/
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
......
app/index.html
View file @ 741fe310
......@@ -82,7 +82,7 @@
<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/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-datepicker/bootstrap-datepicker.min.js"></script>-->
<script src="bower_components/angular-gettext/dist/angular-gettext.min.js"></script>
......@@ -99,8 +99,8 @@
<script src="app.js"></script>
<script src="app_routes.js"></script>
<script src="shared/scripts/theme.js"></script>
<script src="shared/directives.js"></script>
<!--<script src="shared/scripts/theme.js"></script>-->
<script src="zetalib/interceptors.js"></script>
<script src="zetalib/general.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 () {
scope: {},
controller: function ($scope, $http, RESTURL) {
$http.post(RESTURL.url + 'crud/').success(function (data) {
//debugger;
$scope.menuItems = data.models;
});
$scope.menuItems = 'dsadkal';
$scope.selectedMenu = 'dashboard';
$scope.collapseVar = 0;
$scope.multiCollapseVar = 0;
......
app/shared/templates/add.html
View file @ 741fe310
<div class="col-md-12">
<h1>{{ schema.title }}</h1>
<button type="button" ng-repeat="node in listnodes" ng-click="openmodal(node)">Add <span>{{node}}</span></button>
<form name="formgenerated" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(formgenerated)"></form>
<h1>{{ schema.title }}</h1>
<form name="formgenerated" sf-schema="schema" sf-form="form" sf-model="model"></form>
<div ng-repeat="node in listnodes">
<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>
\ No newline at end of file
app/shared/templates/directives/sidebar.html
View file @ 741fe310
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<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>
<ul class="nav in" id="side-menu">
<sidebar-search></sidebar-search>
<!--<sidebar-search></sidebar-search>-->
<li ui-sref-active="active">
<a href="#/dashboard"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</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
class="fa arrow"></span></a>
<ul class="nav nav-second-level" collapse="collapseVar!={{key}}">
......@@ -21,51 +21,6 @@
</ul>
<!-- /.nav-second-level -->
</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>
</div>
<!-- /.sidebar-collapse -->
......
app/shared/templates/linkedModelModalContent.html
View file @ 741fe310
<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>
\ No newline at end of file
app/shared/templates/listnodeModalContent.html
View file @ 741fe310
<div class="modal-body">
<h3>{{schema.title}}</h3>
<form name="listnodeform" sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
<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,
return RESTURL.url + url;
};
generator.generate = function (scope, forms) {
if (!forms){return scope;}
if (!forms) {
return scope;
}
for (var key in forms)
scope[key] = forms[key];
scope.initialModel = angular.copy(scope.model);
scope.form.push(
{
type: "submit",
title: "Save"
}
);
// 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
// and give it 'format':'date' property
// todo: make datepicker work below
if (k.type == 'date') {
k.type="template";
k.templateUrl = "shared/templates/datefield.html";
k.type = "string";
//k.templateUrl = "shared/templates/datefield.html";
//scope.form[scope.form.indexOf(v)] = {
// "key": k.name,
// "minDate": "1995-09-01",
// "maxDate": new Date(),
// "format": "yyyy-mm-dd"
//}
// clear default value todo: make it in backend
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
......@@ -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}};
// 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 = [];
angular.forEach(res.data.objects, function(item){
angular.forEach(res.data.objects, function (item) {
formitem.titleMap.push({
"value": item.key,
"name": item.data.name ? item.data.name : item.data.username
......@@ -75,83 +75,36 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
});
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.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);
};
generator.group = function (formObject) {
return formObject;
};
generator.dateformatter = function(formObject){
generator.dateformatter = function (formObject) {
//angular.forEach(formObject.objects, function(k, v) {
// check if date string and convert to date object
// todo: catch date object and convert
//debugger;
// check if date string and convert to date object
// todo: catch date object and convert
//debugger;
//});
return formObject;
};
......@@ -163,6 +116,7 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
// todo: cover all other exceptions (4xx, 5xx)
});
};
generator.get_list = function (scope) {
return $http
.post(generator.makeUrl(scope.url), scope.form_params)
......@@ -199,7 +153,7 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
}
};
generator.submit = function ($scope) {
debugger;
// todo: diff for all submits to recognize form change. if no change returns to view with no submit
data = {
"form": $scope.model,
"cmd": $scope.form_params.cmd,
......@@ -220,29 +174,17 @@ form_generator.factory('Generator', function ($http, $q, $log, $modal, $timeout,
});
/**
* ListNodeModalCtrl
* controller to use with openmodal function of Generator
* @params: $scope, $modalInstance, items
* @returns: return value used in openmodal's result function
* ModalCtrl
* controller for listnode, node and linkedmodel modal and save data of it
* @params: $scope, $modalInstance, $route, items
* @returns: returns value for modal
*/
form_generator.controller('ListNodeModalCtrl', function ($scope, $modalInstance, items) {
for (var key in items)
$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){
form_generator.controller('ModalCtrl', function ($scope, $modalInstance, $route, items) {
angular.forEach(["model", "schema", "form"], function (key) {
$scope[key] = items[key];
});
$scope.onSubmit = function(){
$scope.onSubmit = function () {
// send form to modalinstance result function
$modalInstance.close($scope);
$route.reload();
......@@ -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) {
// return {
// link: function ($modal) {
// var modalInstance = $modal.open({
// animation: false,
// templateUrl: 'shared/templates/modalContent.html',
// controller: 'ModalInstanceCtrl',
// size: 'lg',
// resolve: {
// items: function () {
// return "";
// }
// }
// });
//
// modalInstance.result.then(function (selectedItem) {
// $scope.selected = selectedItem;
// }, function () {
// $log.info('Modal dismissed at: ' + new Date());
// });
// }
// }
//}]);
/**
* modal directive for listnodes and nodes
* @params: $modal, Generator
* @return: openmodal directive
*/
// todo: use generator.openmodal instead
form_generator.directive('addModalForListNode', function ($modal, Generator) {
return {
link: function (scope, element, attributes) {
element.on('click', function () {
var modalInstance = $modal.open({
animation: false,
templateUrl: 'shared/templates/listnodeModalContent.html',
controller: 'ModalCtrl',
size: 'lg',
resolve: {
items: function () {
// get node from parent scope catch with attribute
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
* @params: $modal, Generator
* @return: openmodal directive
*/
form_generator.directive('addModal', function ($modal, Generator) {
return {
link: function (scope, element) {
element .on('click', function () {
debugger;
element.on('click', function () {
var modalInstance = $modal.open({
animation: false,
templateUrl: 'shared/templates/linkedModelModalContent.html',
controller: 'LinkedModelModalCtrl',
controller: 'ModalCtrl',
size: 'lg',
resolve: {
items: function () {
debugger;
scope.url = 'crud';
scope.form_params = {'model': scope.form.title, "cmd": "add"};
return Generator.get_form(scope);
......@@ -304,19 +260,7 @@ form_generator.directive('addModal', function ($modal, Generator) {
modalInstance.result.then(function (childmodel, key) {
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) {
'response': function (response) {
//Will only be called for HTTP up to 300
if(response.data.is_login===true){
$rootScope.loggedInUser = response.data.is_login;
//$rootScope.loggedInUser = response.data.is_login;
//$location.replace();
if($location.path()==="/login"){
$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