Edition and display of tags on documents

This commit is contained in:
jendib 2013-07-30 21:00:16 +02:00
parent 779c45a1e2
commit a8b9148359
9 changed files with 102 additions and 8 deletions

View File

@ -1,5 +1,3 @@
- Client side edition of tags on documents
- Client side displaying of tags on documents
- Client/server side edition of created date - Client/server side edition of created date
- Client/server side search on tags - Client/server side search on tags
- Client/server side search on creation date - Client/server side search on creation date

View File

@ -33,16 +33,18 @@
<script src="js/controller/FileView.js" type="text/javascript"></script> <script src="js/controller/FileView.js" type="text/javascript"></script>
<script src="js/controller/Login.js" type="text/javascript"></script> <script src="js/controller/Login.js" type="text/javascript"></script>
<script src="js/controller/Tag.js" type="text/javascript"></script> <script src="js/controller/Tag.js" type="text/javascript"></script>
<script src="js/controller/Navigation.js" type="text/javascript"></script>
<script src="js/service/User.js" type="text/javascript"></script> <script src="js/service/User.js" type="text/javascript"></script>
<script src="js/service/Tag.js" type="text/javascript"></script> <script src="js/service/Tag.js" type="text/javascript"></script>
<script src="js/filter/Newline.js" type="text/javascript"></script> <script src="js/filter/Newline.js" type="text/javascript"></script>
<script src="js/directive/File.js" type="text/javascript"></script> <script src="js/directive/File.js" type="text/javascript"></script>
<script src="js/directive/SelectTag.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div class="navbar"> <div class="navbar" ng-controller="Navigation">
<div class="navbar-inner"> <div class="navbar-inner">
<a class="brand" href="#">Sismics Docs</a> <a class="brand" href="#">Sismics Docs</a>
<ul class="nav"> <ul class="nav" ng-show="!userInfo.anonymous">
<li ng-class="{active: $uiRoute}" ui-route="/document"><a href="#/document">Documents</a></li> <li ng-class="{active: $uiRoute}" ui-route="/document"><a href="#/document">Documents</a></li>
<li ng-class="{active: $uiRoute}" ui-route="/tag"><a href="#/tag">Tags</a></li> <li ng-class="{active: $uiRoute}" ui-route="/tag"><a href="#/tag">Tags</a></li>
</ul> </ul>

View File

@ -108,7 +108,7 @@ var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.route', 'ui.ke
if(value instanceof Array) { if(value instanceof Array) {
for(i=0; i<value.length; ++i) { for(i=0; i<value.length; ++i) {
subValue = value[i]; subValue = value[i];
fullSubName = name + '[' + i + ']'; fullSubName = name + '[]';
innerObj = {}; innerObj = {};
innerObj[fullSubName] = subValue; innerObj[fullSubName] = subValue;
query += param(innerObj) + '&'; query += param(innerObj) + '&';

View File

@ -3,7 +3,7 @@
/** /**
* Document edition controller. * Document edition controller.
*/ */
App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams, Restangular) { App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams, Restangular, Tag) {
/** /**
* Returns true if in edit mode (false in add mode). * Returns true if in edit mode (false in add mode).
*/ */
@ -25,15 +25,19 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
*/ */
$scope.edit = function() { $scope.edit = function() {
var promise = null; var promise = null;
var document = angular.copy($scope.document);
// Extract ids from tags
document.tags = _.pluck(document.tags, 'id');
if ($scope.isEdit()) { if ($scope.isEdit()) {
promise = Restangular promise = Restangular
.one('document', $stateParams.id) .one('document', $stateParams.id)
.post('', $scope.document); .post('', document);
} else { } else {
promise = Restangular promise = Restangular
.one('document') .one('document')
.put($scope.document); .put(document);
} }
// Upload files after edition // Upload files after edition

View File

@ -0,0 +1,8 @@
'use strict';
/**
* Navigation controller.
*/
App.controller('Navigation', function($scope, User) {
$scope.userInfo = User.userInfo();
});

View File

@ -0,0 +1,64 @@
'use strict';
/**
* Tag selection directive.
*/
App.directive('selectTag', function() {
return {
restrict: 'E',
templateUrl: 'partial/directive.selecttag.html',
replace: true,
scope: {
tags: '=',
ref: '@'
},
controller: function($scope, Tag) {
// Retrieve tags
Tag.tags().then(function(data) {
$scope.allTags = data.tags;
});
/**
* Add a tag.
*/
$scope.addTag = function($event) {
// Does the new tag exists
var tag = _.find($scope.allTags, function(tag) {
if (tag.name == $scope.input) {
return tag;
}
});
// Does the new tag is already in the model
var duplicate = _.find($scope.tags, function(tag2) {
if (tag && tag2.id == tag.id) {
return tag2;
}
});
// Add the new tag
if (tag) {
if (!duplicate) {
$scope.tags.push(tag);
}
$scope.input = '';
}
if ($event) {
$event.preventDefault();
}
}
/**
* Remove a tag.
*/
$scope.deleteTag = function(deleteTag) {
$scope.tags = _.reject($scope.tags, function(tag) {
return tag.id == deleteTag.id;
})
};
},
link: function(scope, element, attr, ctrl) {
}
}
});

View File

@ -0,0 +1,9 @@
<div>
<ul class="inline">
<li ng-repeat="tag in tags"><span class="label label-info">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li>
</ul>
<p class="input-append">
<input type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input" typeahead="tag.name for tag in allTags | filter: $viewValue" ui-keypress="{ 'enter': 'addTag($event)' }" />
<button type="submit" class="btn" ng-click="addTag()">Add</button>
</p>
</div>

View File

@ -17,6 +17,12 @@
<file class="input-block-level" id="inputFiles" multiple="multiple" ng-model="newFiles" accept="image/png,image/jpg,image/jpeg,image/gif" /> <file class="input-block-level" id="inputFiles" multiple="multiple" ng-model="newFiles" accept="image/png,image/jpg,image/jpeg,image/gif" />
</div> </div>
</div> </div>
<div class="control-group">
<label class="control-label" for="inputTags">Tags</label>
<div class="controls">
<select-tag tags="document.tags" class="input-block-level" ref="inputTags" />
</div>
</div>
<div class="form-actions"> <div class="form-actions">
<button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid" ng-click="edit()">{{ isEdit() ? 'Edit' : 'Add' }}</button> <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid" ng-click="edit()">{{ isEdit() ? 'Edit' : 'Add' }}</button>
<button type="submit" class="btn" ng-click="cancel()">Cancel</button> <button type="submit" class="btn" ng-click="cancel()">Cancel</button>

View File

@ -7,6 +7,9 @@
<div class="page-header"> <div class="page-header">
<h1>{{ document.title }} <small>{{ document.create_date | date: 'short' }}</small></h1> <h1>{{ document.title }} <small>{{ document.create_date | date: 'short' }}</small></h1>
<ul class="inline">
<li ng-repeat="tag in document.tags"><span class="label label-info">{{ tag.name }}</span></li>
</ul>
</div> </div>
<p ng-bind-html="document.description | newline"></p> <p ng-bind-html="document.description | newline"></p>