Add directive to edit objects
authorymh <ymh.work@gmail.com>
Mon, 09 Sep 2013 14:17:47 +0200
changeset 50 2e52a8a10f8e
parent 49 fcfa68f39f6b
child 51 634e0994c1c8
Add directive to edit objects
src/p4l/static/p4l/js/p4l.js
src/p4l/static/p4l/templates/imprintForm.html
src/p4l/templates/p4l/record_update_form.html
--- a/src/p4l/static/p4l/js/p4l.js	Mon Sep 09 02:39:50 2013 +0200
+++ b/src/p4l/static/p4l/js/p4l.js	Mon Sep 09 14:17:47 2013 +0200
@@ -24,10 +24,30 @@
     this.uriLabels = context.uri_labels;
 });
 
+app.directive('objectForm', function(RecordModel, context) {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        scope: {
+            obj:"=editedObject",
+            onOk: "&"
+        },
+        //templateUrl: context.urls.base_static+'p4l/templates/imprintForm.html',
+        templateUrl: function(tElement, tAttrs) {
+            return context.urls.base_static+'p4l/templates/'+ tAttrs.templateName +'.html';  
+        },
+        link: function(scope, element, attrs) {
+            
+        }
+    };
+});
+
 app.controller("RecordCtrl", function($scope, RecordModel, context){
     
     $scope.record = RecordModel.record;
     $scope.uriLabels = RecordModel.uriLabels;
+    $scope.editedImprint = null;
     
         
     $scope.submitRecord = function() {
@@ -40,6 +60,16 @@
     		list.splice(i, 1);
     	}
     };
+    
+    $scope.setEditedObject = function(obj, prop) {
+        $scope[prop] = obj;
+    }
+    
+    $scope.newEditedObject = function(templ, list, prop) {
+        list.push(templ);
+        $scope[prop] = templ;
+    }
+    
 });
 
 app.controller("ThesaurusCtrl", function($scope, RecordModel) {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/imprintForm.html	Mon Sep 09 14:17:47 2013 +0200
@@ -0,0 +1,9 @@
+<div>
+    <form>
+        <label for="imprint-city">{{'City'|translate}}</label><input type="text" ng_model="obj.imprintCity" name="imprintCity" id="imprint-city"/>
+        <label for="imprint-publisher">{{'Publisher'|translate}}</label><input type="text" ng_model="obj.publisher" name="publisher" id="imprint-publisher"/>
+        <label for="imprint-date">{{'Date'|translate}}</label><input type="text" ng_model="obj.imprintDate" name="imprintDate" id="imprint-date"/>
+        <label for="imprint-lang">{{'Language'|translate}}</label><input type="text" ng_model="obj.lang" name="lang" id="imprint-lang"/>        
+    </form>
+    <button ng-click="onOk()">OK</button>
+</div>
\ No newline at end of file
--- a/src/p4l/templates/p4l/record_update_form.html	Mon Sep 09 02:39:50 2013 +0200
+++ b/src/p4l/templates/p4l/record_update_form.html	Mon Sep 09 14:17:47 2013 +0200
@@ -27,8 +27,9 @@
             uri_labels: angular.fromJson('{{uri_labels | safe | addslashes}}'),
             csrf_token: "{{ csrf_token }}",
             urls: {
-                record_api: "{% url 'record-detail' identifier=':recordId' %}".replace("\%3A",":")
-            }
+                base_static: "{% get_static_prefix %}",
+                record_api: "{% url 'record-detail' identifier=':recordId' %}".replace("\%3A",":"),                
+            },
         })
         .config(['$translateProvider', function($translateProvider) {
             $translateProvider.translations(catalog); //catalog is declared in django.views.i18n.javascript_catalog
@@ -62,8 +63,8 @@
     <tr>
       <td>{{'subjects' | translate}}</td>
       <td>
-          <ul ng-repeat="subject in record.subjects">
-              <li>{{uriLabels[subject]}} <small class="text-muted">({{subject}})</small> <a ng-click='removeFromList(subject, record.subjects)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a></li>
+          <ul>
+              <li ng-repeat="subject in record.subjects">{{uriLabels[subject]}} <small class="text-muted">({{subject}})</small> <a ng-click='removeFromList(subject, record.subjects)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a></li>
           </ul>
           <form class="form-inline" role="form" ng-submit="addSubject()" ng-controller="ThesaurusCtrl">
 	        <div class="form-group col-md-8">
@@ -84,6 +85,24 @@
         <td>{{'notes' | translate}}</td>
         <td><textarea id="record-notes-input" class="form-control" ng-model="record.notes"></textarea></td>
     </tr>
+    <tr>
+        <td>{{'imprints' | translate}}</td>
+        <td><ul>
+          <li ng-repeat="imprint in record.imprints">
+            <ul class="list-unstyled">
+              <li>{{'City'|translate}} : {{ imprint.imprintCity }}</li>
+              <li>{{'Publisher'|translate}} : {{ imprint.publisher }}</li>
+              <li>{{'Date'|translate}} : {{ imprint.imprintDate }}</li>
+              <li>{{'Language'|translate}} : {{ imprint.lang }}</li>
+            </ul>
+            <a ng-click='removeFromList(imprint, record.imprints)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a>
+            <a ng-click='setEditedObject(imprint,"editedImprint")' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-pencil"></i></a>
+          </li>
+        </ul>
+        <a ng-click='newEditedObject({imprintCity:"", publisher:"", imprintDate:"", lang:""}, record.imprints, "editedImprint")' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></a>
+        <object-form edited-object="editedImprint" on-ok="editedImprint=null" ng-show="obj!==null" template-name="imprintForm"></imprint-form>
+        </td>
+    </tr>
   </tbody>
 </table>
 <button ng-click="submitRecord()">{{ 'Save' | translate }}</button>