Search Pill

Description

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.

Usage

Options

= valid
Boolean flag which indicates whether the search pill is valid or not. Invalid pills are rendered differently
= extended
If set to true, the pill will contain an additional name field
= basic
If set to true, the pill will only contain the type field (no operator and no value field)
= allow-dates
Allows the user to enter date values via a datepicker in addition to standard text input
= enforce-dates
Enforces the date picker as input method.
= enforce-string
Enforces that the input is parsed as string.
@ invalid-text
Text which will be rendered as tooltip when the valid flag is set to false
@ delete-text
Text which will be rendered as tooltip when the user hovers over the delete button
= type
An object specifying possible types for the search pill. Keys of this object must be values, which contains an array of key/value-pairs of possible type values, and value, which will contain the selected type. Can also specify an optional tooltip field.
= name
An object containing a value and an optional tooltip field. Only used in combination with the extended flag.
= operator
An object specifying possible operators for the search pill. Keys of this object must be values, which contains an array of key/value-pairs of possible oeprator values, and value, which will contain the selected operator. Can also specify an optional tooltip field.
= value
An object containing a value and an optional tooltip field.
=? potential-names
An array containing key,value pairs of possible values that can be used in the name field. This list is non-exclusive, the user can still enter names not in the array.
= options
An array containing possible choices for value. If sets value field becomes select field.
& on-change
Function which is called whenever a component of the search pill is changed. Gets the arguments field, before and value.
& on-delete
Function which is called when the delete button is clicked.

Examples

Basic Search Pill

$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()" />

Single operator

$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()" />

Enforcing Dates

$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" />

Allowing Dates

$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" />

Extended

$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()" />

Potential Names

$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" />

Basic

$scope.search6 = angular.copy($scope.search1);
$scope.search6.basic = true;

<span cam-widget-search-pill
            valid="search6.valid"
            type="search6.type"
            basic="search6.basic" />

Enforce String

$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" />

Options

$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" />