Skip to content

Commit

Permalink
Work in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaphaelGauthier
RaphaelGauthier committed Dec 22, 2016
1 parent 3b84a19 commit 4f064c7
Show file tree
Hide file tree
Showing 10 changed files with 658 additions and 67 deletions.
3 changes: 3 additions & 0 deletions rudder-web/src/main/scala/com/normation/rudder/web/components/DirectiveEditForm.scala
View file
Expand Up @@ -276,6 +276,7 @@ class DirectiveEditForm(
</a> &
"#techniqueDescription *" #> technique.description &
"#nameField" #> {piName.toForm_!} &
"#tagField *" #> tagsEditForm.cfTagsConfiguration &
"#rudderID *" #> {directive.id.value} &
"#shortDescriptionField" #> piShortDescription.toForm_! &
"#longDescriptionField" #> piLongDescription.toForm_! &
Expand Down Expand Up @@ -423,6 +424,8 @@ class DirectiveEditForm(
override def subContainerClassName = "col-xs-12"
}

def tagsEditForm = new TagsEditForm()

def showDeprecatedVersion (version : TechniqueVersion) = {
val deprecationInfo = fullActiveTechnique.techniques(version).deprecrationInfo match {
case Some(_) => "(deprecated)"
Expand Down
10 changes: 5 additions & 5 deletions rudder-web/src/main/scala/com/normation/rudder/web/services/DisplayDirectiveTree.scala
View file
Expand Up @@ -218,7 +218,7 @@ object DisplayDirectiveTree extends Loggable {
}
val htmlId = s"jsTree-${directive.id.value}"
override val attrs = (
("data-jstree" -> """{ "type" : "directive" }""") ::
("data-jstree" -> """{"type":"directive", "tags":[{"key":"environment", "value":"production"},{"key":"customer", "value":"Acme corp"}]}""") ::
( "id" -> htmlId) ::
("class" -> classes ) ::
Nil
Expand All @@ -231,8 +231,8 @@ object DisplayDirectiveTree extends Loggable {
val tooltipId = Helpers.nextFuncName
<span class="treeActions">
<span class="tooltipable treeAction noRight directiveDetails fa fa-pencil" tooltipid={tooltipId} title="" onclick={redirectToDirectiveLink(directive.id).toJsCmd}> </span>
<div class="tooltipContent" id={tooltipId}><div>Configure this Directive.</div></div>
</span>
<div class="tooltipContent" id={tooltipId}><div>Configure this Directive.</div></div>
</span>
} else {
NodeSeq.Empty
}
Expand Down Expand Up @@ -280,7 +280,7 @@ object DisplayDirectiveTree extends Loggable {
<div>Technique version: {directive.techniqueVersion.toString}</div>
<div>{s"Used in ${isAssignedTo} rules" }</div>
{ if(!directive.isEnabled) <div>Disable</div> }
</div>
</div>

}

Expand All @@ -292,7 +292,7 @@ object DisplayDirectiveTree extends Loggable {
}
}

displayCategory(directiveLib, "jstn_0").toXml
displayCategory(directiveLib, "jstn_0").toXml ++ Script(OnLoad(JsRaw("angular.bootstrap('#activeTechniquesTree_actions_zone', ['filters']);")))
}

}
309 changes: 309 additions & 0 deletions rudder-web/src/main/webapp/javascript/rudder/angular/filters.js
View file
@@ -0,0 +1,309 @@
var app = angular.module('filters', []);

app.controller('filterTagCtrl', function ($scope, $http, $location, $timeout) {
$scope.searchStr = "";
$scope.showFilters = false;
$scope.only = {"key":false , "value":false};
$scope.newTag = {"key":"" , "value":""};
$scope.tags = [];
$scope.isEmptyOrBlank = function(str){
return (!str || 0 === str.length || /^\s*$/.test(str));
}
$scope.resetNewTag = function(){
$scope.newTag = {"key":"" , "value":""};
}
$scope.addTag = function(treeId, tag){
var newTag = tag ? tag : $scope.newTag
var alreadyExist = false;
for(var i=0 ; i<$scope.tags.length ; i++){
if((newTag.key==$scope.tags[i].key)&&(newTag.value==$scope.tags[i].value)){
alreadyExist = true;
$scope.tags[i].alreadyExist = true;
(function(i){
$timeout(function() {
$scope.tags[i].alreadyExist = false;
}, 200);
})(i);
}
}
if(!alreadyExist){
$scope.tags.push(newTag);
$scope.searchTree(treeId);
if(!tag){
$scope.resetNewTag();
$scope.updateTag();
}else{
$scope.updateFilter();
}
$timeout(function() {
adjustHeight('#activeTechniquesTree');
},0);
}
}
$scope.updateTag = function(){
var scopeDirectiveTag = angular.element($('[ng-controller="tagsCtrl"]')).scope();
scopeDirectiveTag.$apply(function(){
$scope.updateFunction(scopeDirectiveTag);
})
}
$scope.updateFilter = function(){
var scopeDirectiveTag = angular.element($('[ng-controller="tagsCtrl"]')).scope();
$scope.updateFunction(scopeDirectiveTag);
}
$scope.updateFunction = function(scopeDirectiveTag){
var match;
if(scopeDirectiveTag.tags.length>0){
for(var i=0 ; i<scopeDirectiveTag.tags.length ; i++){
match = false;
for(var j=0 ; j<$scope.tags.length ; j++){
if((scopeDirectiveTag.tags[i].key == $scope.tags[j].key) && (scopeDirectiveTag.tags[i].value == $scope.tags[j].value)){
match = true;
}
}
scopeDirectiveTag.tags[i].match = match;
}
}
}
$scope.removeTag = function(index, treeId, apply){
var tag = $scope.tags[index];
$scope.tags.splice(index, 1);
$scope.searchTree(treeId);
$timeout(function() {
adjustHeight('#activeTechniquesTree');
},0);
if(apply){
$scope.updateFilter();
}else{
$scope.updateTag();
}
}
$scope.toggleFilter = function(event,tree){
$('#form-tag').toggleClass('in');
$($(event.currentTarget).find('span.pull-right')).toggleClass('in');
$scope.showFilters = !$scope.showFilters;
if($scope.showFilters){
$('.input-key').focus();
}
adjustHeight('#activeTechniquesTree');
}
$scope.onlyKey = function(elem){
var button = $(elem.currentTarget);
button.toggleClass('active');
$scope.only.key = !$scope.only.key;
$scope.only.value = false;
$scope.searchTree('#activeTechniquesTree');
}
$scope.onlyValue = function(elem){
var button = $(elem.currentTarget);
button.toggleClass('active');
$scope.only.value = !$scope.only.value;
$scope.only.key = false;
$scope.searchTree('#activeTechniquesTree');
}
$scope.onlyAll = function(elem){
var button = $(elem.currentTarget);
button.addClass('active');
$scope.only.key = false;
$scope.only.value = false;
$scope.searchTree('#activeTechniquesTree');
}
$scope.searchTree = function(treeId) {
$(treeId).jstree('searchtag', $scope.searchStr, $scope.tags, $scope.only);
}
$scope.clearSearchFieldTree = function(treeId) {
$scope.searchStr = "";
$(treeId).jstree('clear_search');
}
$scope.refuseEnter = function(event){
refuseEnter(event);
}
adjustHeight('#activeTechniquesTree');
});

app.config(function($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
})

// Adjust tree height
function adjustHeight(treeId){
var offsetTop = $(treeId).offset().top + 10;
var maxHeight = 'calc(100vh - '+ offsetTop + 'px)';
$(treeId).css('max-height',maxHeight);
}

$(document).ready(function(){
var treeId = '#activeTechniquesTree';
$(window).on('resize',function(){
adjustHeight(treeId);
});
$(treeId).on("searchtag.jstree",function(e, data){
data.res.length>0 ? $('#activeTechniquesTree_alert').hide() : $('#activeTechniquesTree_alert').show();
adjustHeight(treeId);
});
$(treeId).on("clear_search.jstree",function(e, data){
$('#activeTechniquesTree_alert').hide();
adjustHeight(treeId);
});
});
// PLUGIN JSTREE : SEARCH-TAG
$.jstree.plugins.searchtag = function (options, parent) {
var that = this;
this.bind = function () {
parent.bind.call(this);
this._data.searchtag.str = "";
this._data.searchtag.dom = $();
this._data.searchtag.res = [];
this._data.searchtag.opn = [];
this._data.searchtag.som = false;
this._data.searchtag.smc = false;
this._data.searchtag.hdn = [];

this.element
.on("searchtag.jstree", $.proxy(function (e, data) {
if(this._data.searchtag.som && data.res.length) {
var m = this._model.data, i, j, p = [], k, l;
for(i = 0, j = data.res.length; i < j; i++) {
if(m[data.res[i]] && !m[data.res[i]].state.hidden) {
p.push(data.res[i]);
p = p.concat(m[data.res[i]].parents);
if(this._data.searchtag.smc) {
for (k = 0, l = m[data.res[i]].children_d.length; k < l; k++) {
if (m[m[data.res[i]].children_d[k]] && !m[m[data.res[i]].children_d[k]].state.hidden) {
p.push(m[data.res[i]].children_d[k]);
}
}
}
}
}
p = $.vakata.array_remove_item($.vakata.array_unique(p), $.jstree.root);
this._data.searchtag.hdn = this.hide_all(true);
this.show_node(p, true);
this.redraw(true);
}
}, this))
.on("clear_search.jstree", $.proxy(function (e, data) {
if(this._data.searchtag.som && data.res.length) {
this.show_node(this._data.searchtag.hdn, true);
this.redraw(true);
}
}, this));
};
this.searchtag = function (str, tags, filteringTagsOptions, skip_async, show_only_matches, inside, append, show_only_matches_children) {
if((!Array.isArray(tags) || tags.length<=0)&&(str === false || $.trim(str.toString()) === "")) {
return this.clear_search();
}
inside = this.get_node(inside);
inside = inside && inside.id ? inside.id : null;
var str = str.toString();
var s = this.settings.search,
m = this._model.data,
f = null,
r = [],
p = [], i, j;
if(this._data.searchtag.res.length && !append) {
this.clear_search();
}
if(show_only_matches === undefined) {
show_only_matches = s.show_only_matches;
}
if(show_only_matches_children === undefined) {
show_only_matches_children = s.show_only_matches_children;
}
if(!append) {
this._data.searchtag.str = str;
this._data.searchtag.dom = $();
this._data.searchtag.res = [];
this._data.searchtag.opn = [];
this._data.searchtag.som = show_only_matches;
this._data.searchtag.smc = show_only_matches_children;
}
f = new $.vakata.search(str, true, { caseSensitive : s.case_sensitive, fuzzy : s.fuzzy });
$.each(m[inside ? inside : $.jstree.root].children_d, function (ii, i) {
var v = m[i];
var containsTags;
var matchTags = [];
if(v.text && !v.state.hidden && (!s.search_leaves_only || (v.state.loaded && v.children.length === 0)) && (!s.search_callback && f.search(v.text).isMatch) ) {
var directiveTags = v.data.jstree.type=="directive" ? v.data.jstree.tags : false;
if(tags.length>0){
if(directiveTags){
for(var j=0 ; j<tags.length ; j++){
containsTags = false;
for(var k=0 ; k<directiveTags.length ; k++){
if(
((!filteringTagsOptions.key && !filteringTagsOptions.value)&&((tags[j].key == directiveTags[k].key)&&(tags[j].value == directiveTags[k].value)))||
(filteringTagsOptions.key && (tags[j].key == directiveTags[k].key))||
(filteringTagsOptions.value && (tags[j].value == directiveTags[k].value))
){
containsTags = true;
}
}
matchTags.push(containsTags)
}
if($.inArray(false, matchTags) < 0){
r.push(i);
p = p.concat(v.parents);
}
}
}else{
r.push(i);
p = p.concat(v.parents);
}
}
});
if(r.length) {
p = $.vakata.array_unique(p);
for(i = 0, j = p.length; i < j; i++) {
if(p[i] !== $.jstree.root && m[p[i]] && this.open_node(p[i], null, 0) === true) {
this._data.searchtag.opn.push(p[i]);
}
}
if(!append) {
this._data.searchtag.dom = $(this.element[0].querySelectorAll('#' + $.map(r, function (v) { return "0123456789".indexOf(v[0]) !== -1 ? '\\3' + v[0] + ' ' + v.substr(1).replace($.jstree.idregex,'\\$&') : v.replace($.jstree.idregex,'\\$&'); }).join(', #')));
this._data.searchtag.res = r;
}
else {
this._data.searchtag.dom = this._data.searchtag.dom.add($(this.element[0].querySelectorAll('#' + $.map(r, function (v) { return "0123456789".indexOf(v[0]) !== -1 ? '\\3' + v[0] + ' ' + v.substr(1).replace($.jstree.idregex,'\\$&') : v.replace($.jstree.idregex,'\\$&'); }).join(', #'))));
this._data.searchtag.res = $.vakata.array_unique(this._data.searchtag.res.concat(r));
}
this._data.searchtag.dom.children(".jstree-anchor").addClass('jstree-search');
}
this.trigger('searchtag', { nodes : this._data.searchtag.dom, str : str, res : this._data.searchtag.res, show_only_matches : show_only_matches });
};
this.clear_search = function () {
if(this.settings.search.close_opened_onclear) {
this.close_node(this._data.searchtag.opn, 0);
}
this.trigger('clear_search', { 'nodes' : this._data.searchtag.dom, str : this._data.searchtag.str, res : this._data.searchtag.res });
if(this._data.searchtag.res.length) {
this._data.searchtag.dom = $(this.element[0].querySelectorAll('#' + $.map(this._data.searchtag.res, function (v) {
return "0123456789".indexOf(v[0]) !== -1 ? '\\3' + v[0] + ' ' + v.substr(1).replace($.jstree.idregex,'\\$&') : v.replace($.jstree.idregex,'\\$&');
}).join(', #')));
this._data.searchtag.dom.children(".jstree-anchor").removeClass("jstree-search");
}
this._data.searchtag.str = "";
this._data.searchtag.res = [];
this._data.searchtag.opn = [];
this._data.searchtag.dom = $();
};
this.redraw_node = function(obj, deep, callback, force_render) {
obj = parent.redraw_node.apply(this, arguments);
if(obj) {
if($.inArray(obj.id, this._data.searchtag.res) !== -1) {
var i, j, tmp = null;
for(i = 0, j = obj.childNodes.length; i < j; i++) {
if(obj.childNodes[i] && obj.childNodes[i].className && obj.childNodes[i].className.indexOf("jstree-anchor") !== -1) {
tmp = obj.childNodes[i];
break;
}
}
if(tmp) {
tmp.className += ' jstree-search';
}
}
}
return obj;
};
};

0 comments on commit 4f064c7

Please sign in to comment.