Improve object list behaviour in edit form
authorymh <ymh.work@gmail.com>
Sun, 15 Sep 2013 11:01:02 +0200
changeset 88 1753fcef095a
parent 87 9f456eb41602
child 89 49fda47ceb16
child 90 33a7b2a4af87
Improve object list behaviour in edit form
src/p4l/static/p4l/css/p4l.css
src/p4l/static/p4l/js/p4l.js
src/p4l/static/p4l/templates/objectList.html
src/p4l/static/p4l/templates/objectListTable.html
--- a/src/p4l/static/p4l/css/p4l.css	Fri Sep 13 18:33:41 2013 +0200
+++ b/src/p4l/static/p4l/css/p4l.css	Sun Sep 15 11:01:02 2013 +0200
@@ -31,6 +31,10 @@
 .after-plus {
     margin-top: 5px;
 }
+.after-plus button {
+    margin-right: 5px;
+}
+
 .rotate{
 	transform:rotate(90deg);
 	-ms-transform:rotate(90deg);
--- a/src/p4l/static/p4l/js/p4l.js	Fri Sep 13 18:33:41 2013 +0200
+++ b/src/p4l/static/p4l/js/p4l.js	Sun Sep 15 11:01:02 2013 +0200
@@ -72,20 +72,6 @@
             table: "@table"
         },
         controller: function($scope, $element, $attrs, $transclude) {
-        	// Setup divs table parameters
-        	$scope.headFields = angular.fromJson($scope.objectFields);
-        	$scope.headLabels = angular.fromJson($scope.labelFields);
-        	$scope.headSizes = angular.fromJson($scope.sizeFields);
-        	if($scope.headSizes==undefined){
-        		$scope.headSizes = [];
-        		var n = $scope.headFields.length;
-        		for(var i=0;i<n;i++){
-        			$scope.headSizes.push(2);
-        		}
-        	}
-        	if($scope.headLabels==undefined){
-        		$scope.headLabels = $scope.headFields;
-        	}
         	
             $scope.getStaticTemplateUrl = function(templateName) {
                 return context.urls.base_static+'p4l/templates/'+templateName+".html";
@@ -107,35 +93,67 @@
         	}
         },
         link: function($scope, $element, $attrs) {
+            
+            // Setup divs table parameters
+            $scope.headFields = angular.fromJson($scope.objectFields);
+            $scope.headLabels = angular.fromJson($scope.labelFields);
+            $scope.headSizes = angular.fromJson($scope.sizeFields);
+            if($scope.headSizes==undefined){
+                $scope.headSizes = [];
+                var n = $scope.headFields.length;
+                for(var i=0;i<n;i++){
+                    $scope.headSizes.push(2);
+                }
+            }
+            if($scope.headLabels==undefined){
+                $scope.headLabels = $scope.headFields;
+            }
         	
             $scope.editedObj = null;
+            $scope.editedIndex = -1;
             
             $scope.getEmptyObject = function() {
                 return $scope.getEmptyObjectFromList($scope.headFields);
             };
 
-            $scope.setEditedObject = function(obj) {
-                $scope.editedObj = obj;
+            $scope.setEditedObject = function(obj, index) {
+                
+                var newObj = obj;
+                if(index>=0) {
+                    newObj = angular.copy(obj);
+                }                
+                $scope.editedObj = newObj;
+                $scope.editedIndex = index;
             }
             
             $scope.newEditedObject = function() {
                 var newObj = $scope.getEmptyObject();
-                $scope.list.push(newObj);
-                $scope.setEditedObject(newObj);
+                $scope.setEditedObject(newObj, -1);
             };
             
-            $scope.removeFromList = function(obj) {
-                var i = $scope.list.indexOf(obj);
-                if(i>=0){
-                    $scope.list.splice(i, 1);
+            $scope.removeFromList = function(index) {
+                if(index>=0){
+                    $scope.list.splice(index, 1);
                 }
-                $scope.setEditedObject(null);
+                $scope.setEditedObject(null, -1);
             }
                         
             $scope.onOk = function() {
-                $scope.setEditedObject(null);
+
+                if($scope.editedIndex >= 0) {
+                    $scope.list[$scope.editedIndex] = $scope.editedObj;
+                }
+                else {
+                    $scope.list.push($scope.editedObj);    
+                }
+                
+                $scope.setEditedObject(null, -1);
+                
             }
             
+            $scope.onCancel = function() {
+                $scope.setEditedObject(null, -1);                
+            }
         }
     };
 });
--- a/src/p4l/static/p4l/templates/objectList.html	Fri Sep 13 18:33:41 2013 +0200
+++ b/src/p4l/static/p4l/templates/objectList.html	Sun Sep 15 11:01:02 2013 +0200
@@ -3,13 +3,13 @@
     <li ng-repeat="obj in list">
         <!--ng-include src="getStaticTemplateUrl(dispTemplate)"></ng-include-->
         <object-disp obj="obj" disp-template="dispTemplate"></object-disp>
-        <a ng-click='removeFromList(obj)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a>
-        <a ng-click='setEditedObject(obj)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-pencil"></i></a>
+        <a ng-click='removeFromList($index)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a>
+        <a ng-click='setEditedObject(obj, $index)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-pencil"></i></a>
     </li>
   </ul>
   <a ng-click='newEditedObject()' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></a>
   <div class="after-plus" ng-show="editedObj!==null">
     <ng-include src="getStaticTemplateUrl(formTemplate)"></ng-include>
-    <button ng-click="onOk()" class="btn btn-primary">OK</button>
+    <button ng-click="onOk()" class="btn btn-primary">{{'OK' | translate}}</button><button ng-click="onCancel()" class="btn btn-primary">{{'Cancel' | translate}}</button>
   </div>
 </div>
\ No newline at end of file
--- a/src/p4l/static/p4l/templates/objectListTable.html	Fri Sep 13 18:33:41 2013 +0200
+++ b/src/p4l/static/p4l/templates/objectListTable.html	Sun Sep 15 11:01:02 2013 +0200
@@ -9,14 +9,14 @@
         </span>
         <object-disp ng-if="dispTemplate!=''" obj="obj" disp-template="dispTemplate"></object-disp>
         <div class="col-md-2">
-	        <a ng-click='removeFromList(obj)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a>
-	        <a ng-click='setEditedObject(obj)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-pencil"></i></a>
+	        <a ng-click='removeFromList($index)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a>
+	        <a ng-click='setEditedObject(obj, $index)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-pencil"></i></a>
 	    </div>
     </div>
 </table>
 <a ng-click='newEditedObject()' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></a>
 <div class="after-plus" ng-show="editedObj!==null">
     <ng-include src="getStaticTemplateUrl(formTemplate)"></ng-include>
-    <button ng-click="onOk()" class="btn btn-primary">OK</button>
+    <button ng-click="onOk()" class="btn btn-primary">{{'OK' | translate }}</button><button ng-click="onCancel()" class="btn btn-primary">{{'Cancel' | translate}}</button>
 </div>
 </div>
\ No newline at end of file