The search pill is used in the tasklist app and the cockpit EE search plugin. It represents a single component of a possibly complex search query.
A search can contain multiple search pills. Search pills have a type, an operator and a value and can optionally have a variable name.
$scope.search1 = { type: { values: [{key: 'foo', value: 'Foo'}, {key: 'bar', value: 'Bar'}], value: null }, operator: { values: [{key:'eq', value: '='}, {key:'neq', value:'!='}], value: null }, value: { value: '' }, valid: false, update: function() { $scope.search1.valid = $scope.search1.type.value !== null && $scope.search1.operator.value !== null && $scope.search1.value.value !== ''; } }; <span cam-widget-search-pill valid="search1.valid" type="search1.type" operator="search1.operator" value="search1.value" on-change="search1.update()" />
$scope.singleOperator = { type: { values: [{key: 'foo', value: 'Foo'}, {key: 'bar', value: 'Bar'}], value: null }, operator: { values: [{key:'eq', value: '='}], value: null }, value: { value: '' }, valid: false, update: function() { $scope.singleOperator.valid = $scope.singleOperator.type.value !== null && $scope.singleOperator.operator.value !== null && $scope.singleOperator.value.value !== ''; } }; <span cam-widget-search-pill valid="singleOperator.valid" type="singleOperator.type" operator="singleOperator.operator" value="singleOperator.value" on-change="singleOperator.update()" />
$scope.search2 = angular.copy($scope.search1); $scope.search2.enforceDates = true; <span cam-widget-search-pill valid="search2.valid" type="search2.type" operator="search2.operator" value="search2.value" enforce-dates="search2.enforceDates" />
$scope.search3 = angular.copy($scope.search1); $scope.search3.allowDates = true; <span cam-widget-search-pill valid="search3.valid" type="search3.type" operator="search3.operator" value="search3.value" allow-dates="search3.allowDates" />
$scope.search4 = angular.copy($scope.search1); $scope.search4.name = { value: '' }; $scope.search4.update = function() { $scope.search4.extended = $scope.search4.type.value && $scope.search4.type.value.key === "bar"; }; <span cam-widget-search-pill valid="search4.valid" name="search4.name" type="search4.type" operator="search4.operator" value="search4.value" extended="search4.extended" on-change="search4.update()" />
$scope.search5 = angular.copy($scope.search1); $scope.search5.potentialNames = [ {key:'name1', value:'Value 1 (name1)'}, {key:'name2', value:'Value 2 (name2)'} ]; $scope.search5.name = { value: '' }; $scope.search5.extended = true; <span cam-widget-search-pill valid="search5.valid" name="search5.name" type="search5.type" operator="search5.operator" value="search5.value" extended="search5.extended" potential-names="search5.potentialNames" />
$scope.search6 = angular.copy($scope.search1); $scope.search6.basic = true; <span cam-widget-search-pill valid="search6.valid" type="search6.type" basic="search6.basic" />
$scope.search7 = angular.copy($scope.search1); $scope.search7.enforceString = true; <span cam-widget-search-pill valid="search7.valid" type="search7.type" operator="search7.operator" value="search7.value" enforce-string="search7.enforceString" />
$scope.search8 = angular.copy($scope.search1); $scope.search8.options = ['yes', 'maybe', 'no']; <span cam-widget-search-pill valid="search7.valid" type="search7.type" operator="search7.operator" value="search7.value" enforce-string="search7.enforceString" />