Skip to content

Commit

Permalink
Change the operators between tags (#1291)
Browse files Browse the repository at this point in the history 
* Change the operators between tags

* Fix search

* Fixes

* Fixes remove all
  • Loading branch information
Juanka Rodríguez authored and Jesús Ángel committed Mar 11, 2019
1 parent 5ac87d2 commit 64b208c
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 20 deletions.
18 changes: 12 additions & 6 deletions public/directives/wz-tag-filter/wz-tag-filter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,24 @@
<span class='wz-tag-remove-button fa' ng-class='(tag.type === "filter") ? "fa-filter" : "fa-search"'></span>
<span class=''>{{tag.value.name}} <span ng-show='tag.type === "filter"'>:
{{tag.value.value}}</span></span>
<a class='wz-tag-remove-button' ng-click='removeTag(tag.id, false)'>×</a>
<a class='wz-tag-remove-button' ng-click='removeTag(tag.id, false, $parent.$index, $index)'>×</a>
</div>
<span class='wz-tag-item-connector' ng-show='$index != group.length - 1'>OR</span>
<button ng-click="changeConnector($parent.$index, $index)" class="pointer" ng-show='$index != group.length - 1'><span
class='wz-tag-item-connector'>{{connectors[$parent.$index].subgroup[$index].value ===
';' ? 'AND' : 'OR' }}</span></button>
</div>
<a ng-show='group.length > 1' class='wz-tag-remove-button-group' ng-click='removeTag(group[0].key, true)'>×</a>
<a ng-show='group.length > 1' class='wz-tag-remove-button-group' ng-click='removeTag(group[0].key, true, $index - 1)'>×</a>
</div>
<span class='wz-tag-item-connector' ng-show='$index != groupedTagList.length - 1'> AND </span>
<button ng-click="changeConnector($index)" class="pointer" ng-show='$index != groupedTagList.length - 1'><span
class='wz-tag-item-connector'>
{{connectors[$index].value === ';' ? 'AND' : 'OR'}}
</span></button>
</li>
</ul>
<input id='wz-search-filter-bar-input' class='wz-search-filter-bar-input input' type='text' ng-model='newTag'
ng-focus='showAutocomplete(true)' ng-blur='showAutocomplete(false)'
placeholder='Add filter or search' ng-keyup='!autocompleteEnter && $event.keyCode == 13 ? addTag(true) : addSearchKey($event)' />
ng-focus='showAutocomplete(true)' ng-blur='showAutocomplete(false)' placeholder='Add filter or search'
ng-keyup='!autocompleteEnter && $event.keyCode == 13 ? addTag(true) : addSearchKey($event)' />
<a class='wz-tag-remove-button wz-padding-top-5' ng-click='removeAll()'><i class="fa fa-trash" aria-hidden="true"></i></a>
<div id='wz-search-filter-bar-autocomplete' class='wz-search-filter-bar-autocomplete' ng-show='isAutocomplete && autocompleteContent.list.length > 0'>
<p><b>{{autocompleteContent.title}}</b></p>
<ul id='wz-search-filter-bar-autocomplete-list'>
Expand Down
91 changes: 78 additions & 13 deletions public/directives/wz-tag-filter/wz-tag-filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { uiModules } from 'ui/modules';

const app = uiModules.get('app/wazuh', []);

app.directive('wzTagFilter', function() {
app.directive('wzTagFilter', function () {
return {
restrict: 'E',
scope: {
Expand All @@ -34,6 +34,7 @@ app.directive('wzTagFilter', function() {

$scope.tagList = [];
$scope.groupedTagList = [];
$scope.connectors = [];
$scope.newTag = '';
$scope.isAutocomplete = false;
$scope.dataModel = [];
Expand Down Expand Up @@ -70,7 +71,7 @@ app.directive('wzTagFilter', function() {
};
const idxSearch = $scope.tagList.find(x => x.type === 'search');
if (!isFilter && idxSearch) {
$scope.removeTag(idxSearch.id, false);
$scope.removeTag(idxSearch.id, false, $scope.searchIdx, undefined, true);
}
if (
!$scope.tagList.find(x => {
Expand All @@ -83,6 +84,7 @@ app.directive('wzTagFilter', function() {
) {
$scope.tagList.push(tag);
$scope.groupedTagList = groupBy($scope.tagList, 'key');
$scope.connectors = addConnectors($scope.groupedTagList);
buildQuery($scope.groupedTagList);
}
$scope.showAutocomplete(flag);
Expand All @@ -103,15 +105,14 @@ app.directive('wzTagFilter', function() {
query: '',
search: ''
};
let first = true;
for (const group of groups) {
groups.forEach((group, idx) => {
const search = group.find(x => x.type === 'search');
if (search) {
$scope.searchIdx = idx;
queryObj.search = search.value.name;
if (idx === groups.length - 1)
queryObj.query = queryObj.query.substring(0, queryObj.query.length - 1);
} else {
if (!first) {
queryObj.query += ';';
}
const twoOrMoreElements = group.length > 1;
if (twoOrMoreElements) {
queryObj.query += '(';
Expand All @@ -121,15 +122,17 @@ app.directive('wzTagFilter', function() {
.forEach((tag, idx2) => {
queryObj.query += tag.key + '=' + tag.value.value;
if (idx2 != group.length - 1) {
queryObj.query += ',';
queryObj.query += $scope.connectors[idx].subgroup[idx2].value;
}
});
if (twoOrMoreElements) {
queryObj.query += ')';
}
first = false;
if (idx !== groups.length - 1) {
queryObj.query += $scope.connectors[idx].value;
}
}
}
});
$scope.queryFn({ q: queryObj.query, search: queryObj.search });
} catch (error) {
errorHandler.handle(error, 'Error in query request');
Expand All @@ -156,6 +159,42 @@ app.directive('wzTagFilter', function() {
return result;
};

const addConnectors = (groups) => {
const result = [];
groups
.forEach((group, index) => {
result.push({});
const subGroup = [];
group
.forEach((tag, idx) => {
if (idx != group.length - 1) {
subGroup.push({ value: (((($scope.connectors || [])[index] || {}).subgroup || [])[idx] || {}).value || ',' });
}
});
if (subGroup.length > 0)
result[index].subgroup = subGroup;
if (index != groups.length - 1) {
result[index].value = (($scope.connectors || [])[index] || {}).value || ';';
}
});
return result;
};

$scope.changeConnector = (parentIdx, idx) => {
if ((parentIdx === $scope.searchIdx - 1 || parentIdx === $scope.searchIdx) && idx === undefined) {
$scope.connectors[parentIdx].value = ';';
} else {
if (idx !== undefined) {
const value = $scope.connectors[parentIdx].subgroup[idx].value;
$scope.connectors[parentIdx].subgroup[idx].value = value === ';' ? ',' : ';'
} else {
const value = $scope.connectors[parentIdx].value;
$scope.connectors[parentIdx].value = value === ';' ? ',' : ';'
}
buildQuery($scope.groupedTagList);
}
};

/**
* Add key part of filter to search bar
*/
Expand All @@ -179,13 +218,39 @@ app.directive('wzTagFilter', function() {
/**
* This remove tag from search bar
*/
$scope.removeTag = (id, deleteGroup) => {
$scope.removeTag = (id, deleteGroup, parentIdx, idx, overwrite = false) => {
if (deleteGroup) {
$scope.tagList = $scope.tagList.filter(x => x.key !== id);
$scope.connectors.splice(parentIdx, 1);
} else {
$scope.tagList.splice($scope.tagList.findIndex(x => x.id === id), 1);
if (idx < 0) {
idx = 0;
}
if ($scope.connectors[parentIdx] && $scope.connectors[parentIdx].subgroup) {
$scope.connectors[parentIdx].subgroup.splice(idx, 1);
} else
$scope.connectors.splice(parentIdx, 1);
}
if ($scope.tagList.length <= 1) {
$scope.connectors = [{}];
}
$scope.groupedTagList = groupBy($scope.tagList, 'key');
const search = $scope.tagList.find(x => x.type === 'search');
if (!search) {
$scope.searchIdx = false;
}
$scope.connectors = addConnectors($scope.groupedTagList);
if (!overwrite)
buildQuery($scope.groupedTagList);
$scope.showAutocomplete(false);
};

$scope.removeAll = () => {
$scope.tagList = [];
$scope.connectors = [];
$scope.groupedTagList = [];
$scope.searchIdx = false;
buildQuery($scope.groupedTagList);
$scope.showAutocomplete(false);
};
Expand Down Expand Up @@ -299,7 +364,7 @@ app.directive('wzTagFilter', function() {
/**
* This set to bar a keydown listener to show the autocomplete
*/
$('#wz-search-filter-bar-input').bind('keydown', function(e) {
$('#wz-search-filter-bar-input').bind('keydown', function (e) {
let $current = $('#wz-search-filter-bar-autocomplete-list li.selected');
if ($current.length === 0 && (e.keyCode === 38 || e.keyCode === 40)) {
$('#wz-search-filter-bar-autocomplete-list li')
Expand Down Expand Up @@ -348,4 +413,4 @@ app.directive('wzTagFilter', function() {
},
template
};
});
});
6 changes: 5 additions & 1 deletion public/directives/wz-tag-filter/wz-tag-filter.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@
padding: 0px 5px;
}

.wz-tag-item-connector:hover {
text-decoration: underline;
}

.wz-tag-remove-button{
color: #b2ccd4;
}
Expand Down Expand Up @@ -119,4 +123,4 @@
background: black;
color:#006BB4;
cursor: pointer;
}
}

0 comments on commit 64b208c

Please sign in to comment.