Skip to content

Commit

Permalink
Work in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
RaphaelGauthier committed Dec 22, 2016
1 parent 3b84a19 commit 252b137
Show file tree
Hide file tree
Showing 10 changed files with 667 additions and 67 deletions.
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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']);")))
}

}
318 changes: 318 additions & 0 deletions rudder-web/src/main/webapp/javascript/rudder/angular/filters.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,318 @@
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();
if(scopeDirectiveTag){
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(
((!$scope.only.key && !$scope.only.value)&&((scopeDirectiveTag.tags[i].key == $scope.tags[j].key)&&(scopeDirectiveTag.tags[i].value == $scope.tags[j].value)))||
($scope.only.key && (scopeDirectiveTag.tags[i].key == $scope.tags[j].key))||
($scope.only.value && (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.updateTag();
}
$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.updateTag();
}
$scope.onlyAll = function(elem){
var button = $(elem.currentTarget);
button.addClass('active');
$scope.only.key = false;
$scope.only.value = false;
$scope.searchTree('#activeTechniquesTree');
$scope.updateTag();
}
$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;
};
};
Loading

0 comments on commit 252b137

Please sign in to comment.