Merge with cae920b543068c169d5d09fdbb2fd7c4eac7e147 and enhance add sem directive
--- a/src/p4l/static/p4l/css/p4l.css Mon Sep 09 18:46:02 2013 +0200
+++ b/src/p4l/static/p4l/css/p4l.css Tue Sep 10 10:57:45 2013 +0200
@@ -44,3 +44,8 @@
.flag.flag-es {background-position: -16px 0}
.flag.flag-fr {background-position: 0 -11px}
.flag.flag-en {background-position: -16px -11px}
+
+/* css class to avoid angular flicker */
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+ display: none !important;
+}
--- a/src/p4l/static/p4l/css/semantictree.css Mon Sep 09 18:46:02 2013 +0200
+++ b/src/p4l/static/p4l/css/semantictree.css Tue Sep 10 10:57:45 2013 +0200
@@ -1,7 +1,7 @@
-.ng-scope {
+/*.ng-scope {
border: 1px dashed red;
}
-/*@charset "UTF-8";
+@charset "UTF-8";
.large_25 {
width: 25px;
--- a/src/p4l/static/p4l/js/p4l.js Mon Sep 09 18:46:02 2013 +0200
+++ b/src/p4l/static/p4l/js/p4l.js Tue Sep 10 10:57:45 2013 +0200
@@ -1,4 +1,4 @@
-
+//"use strict";
// initialize the app
var app = angular.module("recordApp", ['ngResource', 'ngRoute', 'pascalprecht.translate'])
@@ -24,53 +24,96 @@
this.uriLabels = context.uri_labels;
});
-app.directive('objectForm', function(RecordModel, context) {
+
+app.directive('objectDisp', ['$compile', '$http', '$templateCache', 'context', function($compile, $http, $templateCache, context) {
+
+ var getTemplate = function(templateName) {
+ var templateLoader,
+ templateUrl = context.urls.base_static+'p4l/templates/'+templateName+'.html';
+ templateLoader = $http.get(templateUrl, {cache: $templateCache});
+
+ return templateLoader;
+ }
+
+ var linker = function(scope, element, attrs) {
+
+ var loader = getTemplate(scope.dispTemplate);
+
+ var promise = loader.success(function(html) {
+ element.html(html);
+ }).then(function (response) {
+ element.replaceWith($compile(element.html())(scope));
+ });
+ }
+
+ return {
+ restrict: 'E',
+ scope: {
+ dispTemplate: "=",
+ obj: "="
+ },
+ link: linker
+ };
+}]);
+
+
+app.directive('objectList', function(RecordModel, context) {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
- obj:"=editedObject",
- onOk: "&"
+ list:"=objectList",
+ dispTemplate: "@dispTemplate",
+ formTemplate: "@formTemplate",
+ objectFields: "@objectFields"
+ },
+ controller: function($scope, $element, $attrs, $transclude) {
+ $scope.getStaticTemplateUrl = function(templateName) {
+ return context.urls.base_static+'p4l/templates/'+templateName+".html";
+ }
+ $scope.getEmptyObjectFromList = function(fieldList) {
+ var res = {};
+ for ( var field in fieldList) {
+ res[field] = "";
+ }
+ return res;
+ }
},
- //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) {
+ templateUrl: context.urls.base_static+'p4l/templates/objectList.html',
+ link: function($scope, $element, $attrs) {
+ $scope.editedObj = null;
+
+ $scope.getEmptyObject = function() {
+ return $scope.getEmptyObjectFromList(angular.fromJson($scope.objectFields));
+ };
+
+ $scope.setEditedObject = function(obj) {
+ $scope.editedObj = obj;
+ }
+
+ $scope.newEditedObject = function() {
+ var newObj = $scope.getEmptyObject();
+ $scope.list.push(newObj);
+ $scope.setEditedObject(newObj);
+ };
+
+ $scope.removeFromList = function(obj) {
+ var i = $scope.list.indexOf(obj);
+ if(i>=0){
+ $scope.list.splice(i, 1);
+ }
+ $scope.setEditedObject(null);
+ }
+
+ $scope.onOk = function() {
+ $scope.setEditedObject(null);
+ }
}
};
});
-app.controller("RecordCtrl", function($scope, RecordModel, context){
-
- $scope.record = RecordModel.record;
- $scope.uriLabels = RecordModel.uriLabels;
- $scope.editedImprint = null;
-
-
- $scope.submitRecord = function() {
- $scope.record.$save({recordId: context.record_id});
- }
-
- $scope.removeFromList = function(uri, list) {
- i = list.indexOf(uri);
- if(i>=0){
- 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.directive('addSemUri', function(RecordModel, context){
return {
@@ -113,7 +156,20 @@
};
}
}
- });
+});
+
+
+app.controller("RecordCtrl", function($scope, RecordModel, context){
+
+ $scope.record = RecordModel.record;
+ $scope.uriLabels = RecordModel.uriLabels;
+
+ $scope.submitRecord = function() {
+ $scope.record.$save({recordId: context.record_id});
+ }
+
+
+});
app.config(['$routeProvider', function($routeProvider) {
// $routeProvider.when('/', {controller: 'RecordCtrl', templateUrl: 'partials/record.html'});
--- a/src/p4l/static/p4l/templates/addSemanticUriForm.html Mon Sep 09 18:46:02 2013 +0200
+++ b/src/p4l/static/p4l/templates/addSemanticUriForm.html Tue Sep 10 10:57:45 2013 +0200
@@ -1,15 +1,20 @@
-<form class="form-inline" role="form" >
- <div class="form-group col-md-8">
- <input id="id_{{ $id }}" ng-model="addUriText" class="semantic-tree form-control col-md-10" type="text" placeholder="{{'Add a new theme' | translate}}"
- data-url="{{ dataurl }}" data-query="{{ dataquery }}" data-root-query="{{ datarootquery }}"
- data-childs-query="{{ datachildsquery }}" data-child-count-query="{{ datachildcountquery }}" />
- {{ 'or' | translate}}
- <span id="dialog-link-container-{{ $id }}" class="dialog-link-container ui-state-default ui-corner-all">
- <a href="#" id="dialog-link-{{ $id }}" class="btn dialog-link" title="Browse">{{'Browse' | translate}}</a>
- </span>
- <span id="dialog-{{ $id }}" class="dialog" title="Select term"><span id="term-tree-{{ $id }}"></span></span>
- </div>
- <div class="form-group">
- <button type="submit" class="btn btn-primary" ng-click="addUriToList()">{{'Add' | translate}}</button>
- </div>
-</form>
\ No newline at end of file
+<div>
+ <ul>
+ <li ng-repeat="item in list">{{uriLabels[item]}} <small class="text-muted">({{item}})</small> <a ng-click='removeFromList(item, list)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a></li>
+ </ul>
+ <form class="form-inline" role="form">
+ <div class="form-group col-md-8">
+ <input id="id_{{ $id }}" ng-model="addUriText" class="semantic-tree form-control col-md-10" type="text" placeholder="{{'Add a new theme' | translate}}"
+ data-url="{{ dataurl }}" data-query="{{ dataquery }}" data-root-query="{{ datarootquery }}"
+ data-childs-query="{{ datachildsquery }}" data-child-count-query="{{ datachildcountquery }}" />
+ {{ 'or' | translate}}
+ <span id="dialog-link-container-{{ $id }}" class="dialog-link-container ui-state-default ui-corner-all">
+ <a href="#" id="dialog-link-{{ $id }}" class="btn dialog-link" title="Browse">{{'Browse' | translate}}</a>
+ </span>
+ <span id="dialog-{{ $id }}" class="dialog" title="Select term"><span id="term-tree-{{ $id }}"></span></span>
+ </div>
+ <div class="form-group">
+ <button type="submit" class="btn btn-primary" ng-click="addUriToList()">{{'Add' | translate}}</button>
+ </div>
+ </form>
+</div>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/documentCodeDisp.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,1 @@
+<div>{{'document code'|translate}} : {{obj.documentCode}}</div>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/documentCodeForm.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,5 @@
+ <form class="well span3">
+ <div class="span3 row">
+ <label for="document-code-{{$id}}">{{'document code'|translate}}</label><input type="text" placeholder="{{'document code'|translate}}" ng_model="editedObj.documentCode" name="documentCode" id="document-code-{{$id}}" class="span3"/>
+ </div>
+ </form>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/imprintDisp.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,6 @@
+<ul class="list-unstyled">
+ <li>{{'City'|translate}} : {{ obj.imprintCity }}</li>
+ <li>{{'Publisher'|translate}} : {{ obj.publisher }}</li>
+ <li>{{'Date'|translate}} : {{ obj.imprintDate }}</li>
+ <li>{{'Language'|translate}} : {{ obj.lang }}</li>
+</ul>
--- a/src/p4l/static/p4l/templates/imprintForm.html Mon Sep 09 18:46:02 2013 +0200
+++ b/src/p4l/static/p4l/templates/imprintForm.html Tue Sep 10 10:57:45 2013 +0200
@@ -1,9 +1,10 @@
-<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
+ <form class="well span6">
+ <div class="span3 row">
+ <label for="imprint-city-{{$id}}">{{'City'|translate}}</label><input type="text" placeholder="{{'City'|translate}}" ng_model="editedObj.imprintCity" name="imprintCity" id="imprint-city-{{$id}}" class="span3"/>
+ <label for="imprint-publisher-{{$id}}">{{'Publisher'|translate}}</label><input type="text" placeholder="{{'Publisher'|translate}}" ng_model="editedObj.publisher" name="publisher" id="imprint-publisher-{{$id}}" class="span3"/>
+ </div>
+ <div class="span3 row">
+ <label for="imprint-date-{{$id}}">{{'Date'|translate}}</label><input type="text" placeholder="{{'Date'|translate}}" ng_model="editedObj.imprintDate" name="imprintDate" id="imprint-date-{{$id}}" class="span3"/>
+ <label for="imprint-lang-{{$id}}">{{'Language'|translate}}</label><input type="text" placeholder="{{'Language'|translate}}" ng_model="editedObj.lang" name="lang" id="imprint-lang-{{$id}}" class="span3"/>
+ </div>
+ </form>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/isbnDisp.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,1 @@
+<div>{{'isbn'|translate}} : {{obj.isbn}}</div>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/isbnForm.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,5 @@
+ <form class="well span3">
+ <div class="span3 row">
+ <label for="isbn-{{$id}}">{{'isbn'|translate}}</label><input type="text" placeholder="{{'isbn'|translate}}" ng_model="editedObj.isbn" name="isbn" id="isbn-{{$id}}" class="span3"/>
+ </div>
+ </form>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/issnDisp.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,1 @@
+<div>{{'issn'|translate}} : {{obj.issn}}</div>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/issnForm.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,5 @@
+ <form class="well span3">
+ <div class="span3 row">
+ <label for="issn-{{$id}}">{{'issn'|translate}}</label><input type="text" placeholder="{{'issn'|translate}}" ng_model="editedObj.issn" name="issn" id="issn-{{$id}}" class="span3"/>
+ </div>
+ </form>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/p4l/static/p4l/templates/objectList.html Tue Sep 10 10:57:45 2013 +0200
@@ -0,0 +1,15 @@
+<div>
+<ul>
+ <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>
+ </li>
+</ul>
+<a ng-click='newEditedObject()' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-plus-sign"></i></a>
+<div ng-show="editedObj!==null">
+ <ng-include src="getStaticTemplateUrl(formTemplate)"></ng-include>
+ <button ng-click="onOk()" class="btn btn-primary">OK</button>
+</div>
+</div>
\ No newline at end of file
--- a/src/p4l/templates/p4l/record_update_form.html Mon Sep 09 18:46:02 2013 +0200
+++ b/src/p4l/templates/p4l/record_update_form.html Tue Sep 10 10:57:45 2013 +0200
@@ -41,7 +41,7 @@
{% block content %}
{% verbatim %}
-<div ng-app="recordApp" ng-controller="RecordCtrl">
+<div ng-app="recordApp" ng-controller="RecordCtrl" ng-cloak>
<table class="table record-table">
<thead>
<tr><td>{{'property' | translate}}</td><td>{{'value' | translate }}</td></tr>
@@ -58,18 +58,12 @@
<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>
<add-sem-uri list="record.subjects" listname="subjects"></add-sem-uri>
</td>
</tr>
<tr>
<td>{{'themes' | translate}}</td>
<td>
- <ul ng-repeat="theme in record.themes">
- <li>{{ uriLabels[theme] }} <small class="text-muted">({{theme}})</small> <a ng-click='removeFromList(theme, record.themes)' class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></a></li>
- </ul>
<add-sem-uri list="record.themes" listname="themes"></add-sem-uri>
</td>
</tr>
@@ -78,23 +72,21 @@
<td><textarea id="record-notes-input" class="form-control" ng-model="record.notes"></textarea></td>
</tr>
<tr>
+ <td>{{ 'issns' | translate }}</td>
+ <td><object-list form-template="issnForm" disp-template="issnDisp" object-list="record.issns" object-fields='["issn"]'></object-list></td>
+ </tr>
+ <tr>
+ <td>{{ 'isbns' | translate }}</td>
+ <td><object-list form-template="isbnForm" disp-template="isbnDisp" object-list="record.isbns" object-fields='["isbn"]'></object-list></td>
+ </tr>
+ <tr>
+ <td>{{'document code' | translate }}</td>
+ <td><object-list form-template="documentCodeForm" disp-template="documentCodeDisp" object-list="record.documentCodes" object-fields='["documentCode"]'></object-list></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>
+ <td><object-list form-template="imprintForm" disp-template="imprintDisp" object-list="record.imprints" object-fields='["imprintCity","publisher","imprintDate", "lang"]'></object-list></td>
+ </tr>
</tbody>
</table>
<button ng-click="submitRecord()">{{ 'Save' | translate }}</button>