Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for viewKey and viewValue #78

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
+2,029 −64
Open

Support for viewKey and viewValue #78

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c0e8c43
added viewKey and viewValue for the visualization of an object instea…
marchrius Jul 20, 2016
4238c1d
fix warning for dotted property
marchrius Jul 20, 2016
001f654
updated version + grunt executed
marchrius Jul 20, 2016
a57d091
Fix object / string array suggested values with different key form vi…
marchrius Mar 28, 2018
d07bc8c
Updated package dependencies to latest version
marchrius Mar 28, 2018
a838af0
Cleaning dist directory before build
marchrius Mar 28, 2018
5d3e4bf
Added authors in bower.json file
marchrius Mar 28, 2018
ae83f74
Release v3.0.3
marchrius Mar 28, 2018
8ebbed1
Printing maintainers and contributors in each banner
marchrius Mar 28, 2018
614ee75
Added maintainers
marchrius Mar 28, 2018
678b3c4
Showing $$view.value instead of value due a glitch when $scope.$watch…
marchrius Mar 28, 2018
36d813c
Release v3.0.4
marchrius Mar 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
module.exports = function(grunt) {

var reducer = (a, c) => a+' * - '+c.name+' <'+c.email+'> ('+c.url+')\n';

var pkgConf = grunt.file.readJSON('package.json');
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
pkg: pkgConf,
banner: '/*! \n * <%= pkg.title || pkg.name %> v<%= pkg.version %>\n' +
' * <%= pkg.homepage %>\n' +
' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> <%= pkg.author.url %>\n' +
' * Contributors\n' +
(pkgConf.contributors.reduce(reducer, '')) +
' * Maintainers\n' +
(pkgConf.maintainers.reduce(reducer, '')) +
' * License: <%= pkg.license %>\n' +
' */\n',
jshint: {
all: [
'./src/*.js', '*.js', '*.json'
'./src/*.js', '*.js', '*.json', '!Gruntfile.js'
],
options: {
jshintrc: '.jshintrc'
@@ -86,6 +93,9 @@ module.exports = function(grunt) {
clean: {
temp: {
src: [ 'tmp' ]
},
dist: {
src: [ 'dist' ]
}
},
bump: {
17 changes: 9 additions & 8 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "angular-advanced-searchbox",
"version": "3.0.0",
"homepage": "https://github.com/dnauck/angular-advanced-searchbox",
"version": "3.0.4",
"homepage": "https://github.com/marchrius/angular-advanced-searchbox",
"authors": [
"Daniel Nauck <[email protected]>"
"Daniel Nauck <[email protected]>",
"Matteo Gaggiano <[email protected]>"
],
"description": "A directive for AngularJS providing a advanced visual search box",
"main": [
@@ -27,9 +28,9 @@
"tests"
],
"dependencies": {
"angular": "1",
"jquery": "2",
"bootstrap": "3",
"angular-bootstrap": "1"
}
"angular": "1",
"jquery": "2",
"bootstrap": "3",
"angular-bootstrap": "1"
}
}
80 changes: 77 additions & 3 deletions dist/angular-advanced-searchbox-tpls.js
View file
Original file line number Diff line number Diff line change
@@ -20,6 +20,9 @@ angular.module('angular-advanced-searchbox', [])
parametersLabel: '@',
parametersDisplayLimit: '=?',
placeholder: '@',
trashIconClass: '@',
searchIconClass: '@',
plusIconClass: '@',
searchThrottleTime: '=?'
},
replace: true,
@@ -30,6 +33,14 @@ angular.module('angular-advanced-searchbox', [])
'$scope', '$attrs', '$element', '$timeout', '$filter', 'setFocusFor',
function ($scope, $attrs, $element, $timeout, $filter, setFocusFor) {

$scope.trashIconClass = $scope.trashIconClass || 'glyphicon glyphicon-trash';
$scope.searchIconClass = $scope.searchIconClass || 'glyphicon glyphicon-search';
$scope.plusIconClass = $scope.plusIconClass || 'glyphicon glyphicon-plus';

function returnAsIs(arg0) {
return arg0;
}

$scope.parametersLabel = $scope.parametersLabel || 'Parameter Suggestions';
$scope.parametersDisplayLimit = $scope.parametersDisplayLimit || 8;
$scope.placeholder = $scope.placeholder || 'Search ...';
@@ -165,6 +176,8 @@ angular.module('angular-advanced-searchbox', [])
$scope.searchParams.push(
{
key: searchParam.key,
viewKey: searchParam.viewKey,
viewValue: searchParam.viewValue,
name: searchParam.name,
type: searchParam.type || 'text',
placeholder: searchParam.placeholder,
@@ -311,8 +324,52 @@ angular.module('angular-advanced-searchbox', [])

searchThrottleTimer = $timeout(function () {
angular.forEach(changeBuffer, function (change) {
var searchParam = $filter('filter')($scope.parameters, function (param) { return param.key === key; })[0];
if(searchParam && searchParam.allowMultiple){
var searchParam = $filter('filter')($scope.searchParams, function (param) { return param.key === key; })[0];
var parameter = $filter('filter')($scope.parameters, function (param) { return param.key === key; })[0];
var viewKeyKey = 'key', viewKey, viewValueKey = 'value', viewValue;
// as Object is related to model and not to configuration
var asObject = parameter && parameter.asObject === true;
var isObject = angular.isObject(change.value);
var isDefined = angular.isDefined(change.value);
var isQueryMode = change.key === 'query' && angular.isUndefined(parameter);
var keyTransFn = !isQueryMode && parameter.keyTransformer && angular.isFunction(parameter.keyTransformer) ? parameter.keyTransformer : returnAsIs;
var valueTransFn = !isQueryMode && parameter.valueTransformer && angular.isFunction(parameter.valueTransformer) ? parameter.valueTransformer : returnAsIs;
var viewKeyTransFn = !isQueryMode && parameter.viewKeyTransformer && angular.isFunction(parameter.viewKeyTransformer) ? parameter.viewKeyTransformer : returnAsIs;
var viewValueTransFn = !isQueryMode && parameter.viewValueTransformer && angular.isFunction(parameter.viewValueTransformer) ? parameter.viewValueTransformer : returnAsIs;

var value = change.value;

// activate only if not query mode
if (!isQueryMode) {
if (isDefined) {
if (isObject) {
viewKeyKey = parameter.viewKey;
viewValueKey = parameter.viewValue;
viewValue = value[viewValueKey];
viewKey = value[viewKeyKey];
value = asObject ? value : value[viewKeyKey];
} else {
value = asObject ? { value: value } : value;
}
}

var transformValue = value;
var transformKey = key;
var transformViewKey = viewKey;
var transformViewValue = viewValue;

key = keyTransFn(transformKey);
value = valueTransFn(transformValue);
viewKey = viewKeyTransFn(transformViewKey);
viewValue = viewValueTransFn(transformViewValue);

// restore change model with new properties
change.value = value;
change.key = key;
}


if(parameter && parameter.allowMultiple) {
if(!angular.isArray($scope.model[change.key]))
$scope.model[change.key] = [];

@@ -329,6 +386,15 @@ angular.module('angular-advanced-searchbox', [])
else
$scope.model[change.key] = change.value;
}

if (searchParam) {
searchParam.$$view = {
key: key,
value: value,
viewKey: viewKeyKey,
viewValue: viewValue
};
}
});

changeBuffer.length = 0;
@@ -364,6 +430,14 @@ angular.module('angular-advanced-searchbox', [])
]
};
})
.filter('flattenObject', [
function() {
return function(value, key) {
// suggestedValue[searchParam.viewKey] as suggestedValue[searchParam.viewValue] for suggestedValue in searchParam.suggestedValues | filter:$viewValue
return angular.isObject(value) ? value[key] : value;
};
}
])
.directive('setFocusOn', [
function() {
return {
@@ -444,7 +518,7 @@ angular.module('angular-advanced-searchbox').run(['$templateCache', function($te
'use strict';

$templateCache.put('angular-advanced-searchbox.html',
"<div class=advancedSearchBox ng-class={active:focus} ng-init=\"focus = false\" ng-click=\"!focus ? setFocusFor('searchbox') : null\"><span ng-show=\"searchParams.length < 1 && searchQuery.length === 0\" class=\"search-icon glyphicon glyphicon-search\"></span> <a ng-href=\"\" ng-show=\"searchParams.length > 0 || searchQuery.length > 0\" ng-click=removeAll() role=button><span class=\"remove-all-icon glyphicon glyphicon-trash\"></span></a><div><div class=search-parameter ng-repeat=\"searchParam in searchParams\"><a ng-href=\"\" ng-click=removeSearchParam($index) role=button><span class=\"remove glyphicon glyphicon-trash\"></span></a><div class=key data-key={{searchParam.key}} ng-click=\"enterEditMode($event, $index)\">{{searchParam.name}}:</div><div class=value><span ng-show=!searchParam.editMode ng-click=\"enterEditMode($event, $index)\">{{searchParam.value}}</span> <input name=value type={{searchParam.type}} nit-auto-size-input set-focus-on=\"{{'searchParam:' + searchParam.key}}\" ng-keydown=\"keydown($event, $index)\" ng-blur=\"leaveEditMode($event, $index)\" ng-show=searchParam.editMode ng-change=\"searchParam.restrictToSuggestedValues !== true ? searchParamValueChanged(searchParam) : null\" ng-model=searchParam.value uib-typeahead=\"suggestedValue for suggestedValue in searchParam.suggestedValues | filter:$viewValue\" typeahead-min-length=0 typeahead-on-select=\"searchParamTypeaheadOnSelect($item, searchParam)\" typeahead-editable=\"searchParam.restrictToSuggestedValues !== true\" typeahead-select-on-exact=true typeahead-select-on-blur=\"searchParam.restrictToSuggestedValues !== true ? false : true\" placeholder=\"{{searchParam.placeholder}}\"></div></div><input name=searchbox class=search-parameter-input nit-auto-size-input set-focus-on=searchbox ng-keydown=keydown($event) placeholder={{placeholder}} ng-focus=\"focus = true\" ng-blur=\"focus = false\" uib-typeahead=\"parameter as parameter.name for parameter in parameters | filter:isUnsedParameter | filter:{name:$viewValue} | limitTo:parametersDisplayLimit\" typeahead-on-select=\"searchQueryTypeaheadOnSelect($item, $model, $label)\" ng-change=searchQueryChanged(searchQuery) ng-model=\"searchQuery\"></div><div class=search-parameter-suggestions ng-show=\"parameters && focus\"><span class=title>{{parametersLabel}}:</span> <span class=search-parameter ng-repeat=\"param in parameters | filter:isUnsedParameter | limitTo:parametersDisplayLimit\" data-key={{param.key}} ng-mousedown=addSearchParam(param)>{{param.name}} <i ng-class=\"{'glyphicon glyphicon-plus': param.allowMultiple}\"></i></span></div></div>"
"<div class=advancedSearchBox ng-class={active:focus} ng-init=\"focus = false\" ng-click=\"!focus ? setFocusFor('searchbox') : null\"><span ng-show=\"searchParams.length < 1 && searchQuery.length === 0\" class=\"search-icon {{searchIconClass}}\"></span> <a ng-href=\"\" ng-show=\"searchParams.length > 0 || searchQuery.length > 0\" ng-click=removeAll() role=button><span class=\"remove-all-icon {{trashIconClass}}\"></span></a><div><div class=search-parameter ng-repeat=\"searchParam in searchParams\"><a ng-href=\"\" ng-click=removeSearchParam($index) role=button><span class=\"remove {{trashIconClass}}\"></span></a><div class=key data-nit-key={{searchParam.key}} ng-click=\"enterEditMode($event, $index)\">{{searchParam.name}}:</div><div class=value><span ng-show=!searchParam.editMode ng-click=\"enterEditMode($event, $index)\">{{searchParam.$$view.viewValue || searchParam.$$view.value}}</span> <input name=value type={{searchParam.type}} nit-auto-size-input set-focus-on=\"{{'searchParam:' + searchParam.key}}\" ng-keydown=\"keydown($event, $index)\" ng-click=\"enterEditMode($event, $index)\" ng-blur=\"leaveEditMode($event, $index)\" ng-show=searchParam.editMode ng-change=\"searchParam.restrictToSuggestedValues !== true ? searchParamValueChanged(searchParam) : null\" ng-model=searchParam.value uib-typeahead=\"sv | flattenObject:searchParam.viewKey as sv | flattenObject:searchParam.viewValue for sv in searchParam.suggestedValues | filter:$viewValue\" typeahead-min-length=0 typeahead-on-select=\"searchParamTypeaheadOnSelect($item, searchParam)\" typeahead-editable=\"searchParam.restrictToSuggestedValues !== true\" typeahead-select-on-exact=true typeahead-select-on-blur=\"searchParam.restrictToSuggestedValues !== true ? false : true\" placeholder={{searchParam.placeholder}}></div></div><input name=searchbox class=search-parameter-input nit-auto-size-input set-focus-on=searchbox ng-keydown=keydown($event) placeholder={{placeholder}} ng-focus=\"focus = true\" ng-blur=\"focus = false\" uib-typeahead=\"parameter as parameter.name for parameter in parameters | filter:isUnsedParameter | filter:{name:$viewValue} | limitTo:parametersDisplayLimit\" typeahead-on-select=\"searchQueryTypeaheadOnSelect($item, $model, $label)\" ng-change=searchQueryChanged(searchQuery) ng-model=searchQuery></div><div class=search-parameter-suggestions ng-show=\"parameters && focus\"><span class=title>{{parametersLabel}}:</span> <span class=search-parameter ng-repeat=\"param in parameters | filter:isUnsedParameter | limitTo:parametersDisplayLimit\" data-key={{param.key}} ng-mousedown=addSearchParam(param)>{{param.name}} <i ng-class=\"{ plusIconClass: param.allowMultiple}\"></i></span></div></div>"
);

}]);
13 changes: 9 additions & 4 deletions dist/angular-advanced-searchbox-tpls.min.js
View file

Large diffs are not rendered by default.

15 changes: 8 additions & 7 deletions dist/angular-advanced-searchbox.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<div class="advancedSearchBox" ng-class="{active:focus}" ng-init="focus = false" ng-click="!focus ? setFocusFor('searchbox') : null">
<span ng-show="searchParams.length < 1 && searchQuery.length === 0" class="search-icon glyphicon glyphicon-search"></span>
<span ng-show="searchParams.length < 1 && searchQuery.length === 0" class="search-icon {{searchIconClass}}"></span>
<a ng-href="" ng-show="searchParams.length > 0 || searchQuery.length > 0" ng-click="removeAll()" role="button">
<span class="remove-all-icon glyphicon glyphicon-trash"></span>
<span class="remove-all-icon {{trashIconClass}}"></span>
</a>
<div>
<div class="search-parameter" ng-repeat="searchParam in searchParams">
<a ng-href="" ng-click="removeSearchParam($index)" role="button">
<span class="remove glyphicon glyphicon-trash"></span>
<span class="remove {{trashIconClass}}"></span>
</a>
<div class="key" data-key="{{searchParam.key}}" ng-click="enterEditMode($event, $index)">{{searchParam.name}}:</div>
<div class="key" data-nit-key="{{searchParam.key}}" ng-click="enterEditMode($event, $index)">{{searchParam.name}}:</div>
<div class="value">
<span ng-show="!searchParam.editMode" ng-click="enterEditMode($event, $index)">{{searchParam.value}}</span>
<span ng-show="!searchParam.editMode" ng-click="enterEditMode($event, $index)">{{searchParam.$$view.viewValue || searchParam.$$view.value}}</span>
<input name="value"
type="{{searchParam.type}}"
nit-auto-size-input
set-focus-on="{{'searchParam:' + searchParam.key}}"
ng-keydown="keydown($event, $index)"
ng-click="enterEditMode($event, $index)"
ng-blur="leaveEditMode($event, $index)"
ng-show="searchParam.editMode"
ng-change="searchParam.restrictToSuggestedValues !== true ? searchParamValueChanged(searchParam) : null"
ng-model="searchParam.value"
uib-typeahead="suggestedValue for suggestedValue in searchParam.suggestedValues | filter:$viewValue"
uib-typeahead="sv | flattenObject:searchParam.viewKey as sv | flattenObject:searchParam.viewValue for sv in searchParam.suggestedValues | filter:$viewValue"
typeahead-min-length="0"
typeahead-on-select="searchParamTypeaheadOnSelect($item, searchParam)"
typeahead-editable="searchParam.restrictToSuggestedValues !== true"
@@ -48,7 +49,7 @@
<span class="search-parameter" ng-repeat="param in parameters | filter:isUnsedParameter | limitTo:parametersDisplayLimit"
data-key="{{param.key}}"
ng-mousedown="addSearchParam(param)">
{{param.name}} <i ng-class="{'glyphicon glyphicon-plus': param.allowMultiple}"></i>
{{param.name}} <i ng-class="{ plusIconClass: param.allowMultiple}"></i>
</span>
</div>
</div>
78 changes: 76 additions & 2 deletions dist/angular-advanced-searchbox.js
View file
Original file line number Diff line number Diff line change
@@ -20,6 +20,9 @@ angular.module('angular-advanced-searchbox', [])
parametersLabel: '@',
parametersDisplayLimit: '=?',
placeholder: '@',
trashIconClass: '@',
searchIconClass: '@',
plusIconClass: '@',
searchThrottleTime: '=?'
},
replace: true,
@@ -30,6 +33,14 @@ angular.module('angular-advanced-searchbox', [])
'$scope', '$attrs', '$element', '$timeout', '$filter', 'setFocusFor',
function ($scope, $attrs, $element, $timeout, $filter, setFocusFor) {

$scope.trashIconClass = $scope.trashIconClass || 'glyphicon glyphicon-trash';
$scope.searchIconClass = $scope.searchIconClass || 'glyphicon glyphicon-search';
$scope.plusIconClass = $scope.plusIconClass || 'glyphicon glyphicon-plus';

function returnAsIs(arg0) {
return arg0;
}

$scope.parametersLabel = $scope.parametersLabel || 'Parameter Suggestions';
$scope.parametersDisplayLimit = $scope.parametersDisplayLimit || 8;
$scope.placeholder = $scope.placeholder || 'Search ...';
@@ -165,6 +176,8 @@ angular.module('angular-advanced-searchbox', [])
$scope.searchParams.push(
{
key: searchParam.key,
viewKey: searchParam.viewKey,
viewValue: searchParam.viewValue,
name: searchParam.name,
type: searchParam.type || 'text',
placeholder: searchParam.placeholder,
@@ -311,8 +324,52 @@ angular.module('angular-advanced-searchbox', [])

searchThrottleTimer = $timeout(function () {
angular.forEach(changeBuffer, function (change) {
var searchParam = $filter('filter')($scope.parameters, function (param) { return param.key === key; })[0];
if(searchParam && searchParam.allowMultiple){
var searchParam = $filter('filter')($scope.searchParams, function (param) { return param.key === key; })[0];
var parameter = $filter('filter')($scope.parameters, function (param) { return param.key === key; })[0];
var viewKeyKey = 'key', viewKey, viewValueKey = 'value', viewValue;
// as Object is related to model and not to configuration
var asObject = parameter && parameter.asObject === true;
var isObject = angular.isObject(change.value);
var isDefined = angular.isDefined(change.value);
var isQueryMode = change.key === 'query' && angular.isUndefined(parameter);
var keyTransFn = !isQueryMode && parameter.keyTransformer && angular.isFunction(parameter.keyTransformer) ? parameter.keyTransformer : returnAsIs;
var valueTransFn = !isQueryMode && parameter.valueTransformer && angular.isFunction(parameter.valueTransformer) ? parameter.valueTransformer : returnAsIs;
var viewKeyTransFn = !isQueryMode && parameter.viewKeyTransformer && angular.isFunction(parameter.viewKeyTransformer) ? parameter.viewKeyTransformer : returnAsIs;
var viewValueTransFn = !isQueryMode && parameter.viewValueTransformer && angular.isFunction(parameter.viewValueTransformer) ? parameter.viewValueTransformer : returnAsIs;

var value = change.value;

// activate only if not query mode
if (!isQueryMode) {
if (isDefined) {
if (isObject) {
viewKeyKey = parameter.viewKey;
viewValueKey = parameter.viewValue;
viewValue = value[viewValueKey];
viewKey = value[viewKeyKey];
value = asObject ? value : value[viewKeyKey];
} else {
value = asObject ? { value: value } : value;
}
}

var transformValue = value;
var transformKey = key;
var transformViewKey = viewKey;
var transformViewValue = viewValue;

key = keyTransFn(transformKey);
value = valueTransFn(transformValue);
viewKey = viewKeyTransFn(transformViewKey);
viewValue = viewValueTransFn(transformViewValue);

// restore change model with new properties
change.value = value;
change.key = key;
}


if(parameter && parameter.allowMultiple) {
if(!angular.isArray($scope.model[change.key]))
$scope.model[change.key] = [];

@@ -329,6 +386,15 @@ angular.module('angular-advanced-searchbox', [])
else
$scope.model[change.key] = change.value;
}

if (searchParam) {
searchParam.$$view = {
key: key,
value: value,
viewKey: viewKeyKey,
viewValue: viewValue
};
}
});

changeBuffer.length = 0;
@@ -364,6 +430,14 @@ angular.module('angular-advanced-searchbox', [])
]
};
})
.filter('flattenObject', [
function() {
return function(value, key) {
// suggestedValue[searchParam.viewKey] as suggestedValue[searchParam.viewValue] for suggestedValue in searchParam.suggestedValues | filter:$viewValue
return angular.isObject(value) ? value[key] : value;
};
}
])
.directive('setFocusOn', [
function() {
return {
9 changes: 1 addition & 8 deletions dist/angular-advanced-searchbox.min.css
View file
13 changes: 9 additions & 4 deletions dist/angular-advanced-searchbox.min.js
View file
1,720 changes: 1,720 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

41 changes: 24 additions & 17 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"name": "angular-advanced-searchbox",
"version": "3.0.0",
"version": "3.0.4",
"description": "A directive for AngularJS providing a advanced visual search box",
"main": "dist/angular-advanced-searchbox-tpls.js",
"repository": {
"type": "git",
"url": "https://github.com/dnauck/angular-advanced-searchbox"
"url": "https://github.com/marchrius/angular-advanced-searchbox"
},
"keywords": [
"search",
@@ -16,29 +16,36 @@
"name": "Nauck IT KG",
"url": "http://www.nauck-it.de/"
},
"maintainers": [
{
"name": "Matteo Gaggiano",
"email": "m.gaggiano@marchirus.org",
"url": "http://www.marchrius.org/"
}
],
"contributors": [
{
"name": "Daniel Nauck",
"email": "d.nauck@nauck-it.de",
"url": "http://www.nauck-it.de/"
"name": "Matteo Gaggiano",
"email": "m.gaggiano@marchirus.org",
"url": "http://www.marchrius.org/"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/dnauck/angular-advanced-searchbox/issues"
"url": "https://github.com/marchrius/angular-advanced-searchbox/issues"
},
"homepage": "https://github.com/dnauck/angular-advanced-searchbox",
"homepage": "https://github.com/marchrius/angular-advanced-searchbox",
"devDependencies": {
"bower": "^1.3.12",
"grunt": "^0.4.5",
"grunt-angular-templates": "^0.5.7",
"grunt-bump": "^0.1.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.6.0"
"bower": "^1.8.2",
"grunt": "^1.0.2",
"grunt-angular-templates": "^1.1.0",
"grunt-bump": "^0.8.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^3.3.0"
},
"scripts": {
"postinstall": "bower install"
15 changes: 8 additions & 7 deletions src/angular-advanced-searchbox.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<div class="advancedSearchBox" ng-class="{active:focus}" ng-init="focus = false" ng-click="!focus ? setFocusFor('searchbox') : null">
<span ng-show="searchParams.length < 1 && searchQuery.length === 0" class="search-icon glyphicon glyphicon-search"></span>
<span ng-show="searchParams.length < 1 && searchQuery.length === 0" class="search-icon {{searchIconClass}}"></span>
<a ng-href="" ng-show="searchParams.length > 0 || searchQuery.length > 0" ng-click="removeAll()" role="button">
<span class="remove-all-icon glyphicon glyphicon-trash"></span>
<span class="remove-all-icon {{trashIconClass}}"></span>
</a>
<div>
<div class="search-parameter" ng-repeat="searchParam in searchParams">
<a ng-href="" ng-click="removeSearchParam($index)" role="button">
<span class="remove glyphicon glyphicon-trash"></span>
<span class="remove {{trashIconClass}}"></span>
</a>
<div class="key" data-key="{{searchParam.key}}" ng-click="enterEditMode($event, $index)">{{searchParam.name}}:</div>
<div class="key" data-nit-key="{{searchParam.key}}" ng-click="enterEditMode($event, $index)">{{searchParam.name}}:</div>
<div class="value">
<span ng-show="!searchParam.editMode" ng-click="enterEditMode($event, $index)">{{searchParam.value}}</span>
<span ng-show="!searchParam.editMode" ng-click="enterEditMode($event, $index)">{{searchParam.$$view.viewValue || searchParam.$$view.value}}</span>
<input name="value"
type="{{searchParam.type}}"
nit-auto-size-input
set-focus-on="{{'searchParam:' + searchParam.key}}"
ng-keydown="keydown($event, $index)"
ng-click="enterEditMode($event, $index)"
ng-blur="leaveEditMode($event, $index)"
ng-show="searchParam.editMode"
ng-change="searchParam.restrictToSuggestedValues !== true ? searchParamValueChanged(searchParam) : null"
ng-model="searchParam.value"
uib-typeahead="suggestedValue for suggestedValue in searchParam.suggestedValues | filter:$viewValue"
uib-typeahead="sv | flattenObject:searchParam.viewKey as sv | flattenObject:searchParam.viewValue for sv in searchParam.suggestedValues | filter:$viewValue"
typeahead-min-length="0"
typeahead-on-select="searchParamTypeaheadOnSelect($item, searchParam)"
typeahead-editable="searchParam.restrictToSuggestedValues !== true"
@@ -48,7 +49,7 @@
<span class="search-parameter" ng-repeat="param in parameters | filter:isUnsedParameter | limitTo:parametersDisplayLimit"
data-key="{{param.key}}"
ng-mousedown="addSearchParam(param)">
{{param.name}} <i ng-class="{'glyphicon glyphicon-plus': param.allowMultiple}"></i>
{{param.name}} <i ng-class="{ plusIconClass: param.allowMultiple}"></i>
</span>
</div>
</div>
78 changes: 76 additions & 2 deletions src/angular-advanced-searchbox.js
View file
Original file line number Diff line number Diff line change
@@ -20,6 +20,9 @@ angular.module('angular-advanced-searchbox', [])
parametersLabel: '@',
parametersDisplayLimit: '=?',
placeholder: '@',
trashIconClass: '@',
searchIconClass: '@',
plusIconClass: '@',
searchThrottleTime: '=?'
},
replace: true,
@@ -30,6 +33,14 @@ angular.module('angular-advanced-searchbox', [])
'$scope', '$attrs', '$element', '$timeout', '$filter', 'setFocusFor',
function ($scope, $attrs, $element, $timeout, $filter, setFocusFor) {

$scope.trashIconClass = $scope.trashIconClass || 'glyphicon glyphicon-trash';
$scope.searchIconClass = $scope.searchIconClass || 'glyphicon glyphicon-search';
$scope.plusIconClass = $scope.plusIconClass || 'glyphicon glyphicon-plus';

function returnAsIs(arg0) {
return arg0;
}

$scope.parametersLabel = $scope.parametersLabel || 'Parameter Suggestions';
$scope.parametersDisplayLimit = $scope.parametersDisplayLimit || 8;
$scope.placeholder = $scope.placeholder || 'Search ...';
@@ -165,6 +176,8 @@ angular.module('angular-advanced-searchbox', [])
$scope.searchParams.push(
{
key: searchParam.key,
viewKey: searchParam.viewKey,
viewValue: searchParam.viewValue,
name: searchParam.name,
type: searchParam.type || 'text',
placeholder: searchParam.placeholder,
@@ -311,8 +324,52 @@ angular.module('angular-advanced-searchbox', [])

searchThrottleTimer = $timeout(function () {
angular.forEach(changeBuffer, function (change) {
var searchParam = $filter('filter')($scope.parameters, function (param) { return param.key === key; })[0];
if(searchParam && searchParam.allowMultiple){
var searchParam = $filter('filter')($scope.searchParams, function (param) { return param.key === key; })[0];
var parameter = $filter('filter')($scope.parameters, function (param) { return param.key === key; })[0];
var viewKeyKey = 'key', viewKey, viewValueKey = 'value', viewValue;
// as Object is related to model and not to configuration
var asObject = parameter && parameter.asObject === true;
var isObject = angular.isObject(change.value);
var isDefined = angular.isDefined(change.value);
var isQueryMode = change.key === 'query' && angular.isUndefined(parameter);
var keyTransFn = !isQueryMode && parameter.keyTransformer && angular.isFunction(parameter.keyTransformer) ? parameter.keyTransformer : returnAsIs;
var valueTransFn = !isQueryMode && parameter.valueTransformer && angular.isFunction(parameter.valueTransformer) ? parameter.valueTransformer : returnAsIs;
var viewKeyTransFn = !isQueryMode && parameter.viewKeyTransformer && angular.isFunction(parameter.viewKeyTransformer) ? parameter.viewKeyTransformer : returnAsIs;
var viewValueTransFn = !isQueryMode && parameter.viewValueTransformer && angular.isFunction(parameter.viewValueTransformer) ? parameter.viewValueTransformer : returnAsIs;

var value = change.value;

// activate only if not query mode
if (!isQueryMode) {
if (isDefined) {
if (isObject) {
viewKeyKey = parameter.viewKey;
viewValueKey = parameter.viewValue;
viewValue = value[viewValueKey];
viewKey = value[viewKeyKey];
value = asObject ? value : value[viewKeyKey];
} else {
value = asObject ? { value: value } : value;
}
}

var transformValue = value;
var transformKey = key;
var transformViewKey = viewKey;
var transformViewValue = viewValue;

key = keyTransFn(transformKey);
value = valueTransFn(transformValue);
viewKey = viewKeyTransFn(transformViewKey);
viewValue = viewValueTransFn(transformViewValue);

// restore change model with new properties
change.value = value;
change.key = key;
}


if(parameter && parameter.allowMultiple) {
if(!angular.isArray($scope.model[change.key]))
$scope.model[change.key] = [];

@@ -329,6 +386,15 @@ angular.module('angular-advanced-searchbox', [])
else
$scope.model[change.key] = change.value;
}

if (searchParam) {
searchParam.$$view = {
key: key,
value: value,
viewKey: viewKeyKey,
viewValue: viewValue
};
}
});

changeBuffer.length = 0;
@@ -364,6 +430,14 @@ angular.module('angular-advanced-searchbox', [])
]
};
})
.filter('flattenObject', [
function() {
return function(value, key) {
// suggestedValue[searchParam.viewKey] as suggestedValue[searchParam.viewValue] for suggestedValue in searchParam.suggestedValues | filter:$viewValue
return angular.isObject(value) ? value[key] : value;
};
}
])
.directive('setFocusOn', [
function() {
return {