Criteria Segmented Control

The segmented control generates criteria based on the selected item. This criteria can be used to filter data from a Genesis dataserver endpoint.

Use cases:

• Visually and structurally group related interactive criteria.

Examples

Select optionOutput:

Genesis

Declaration

 <criteria-segmented-control></criteria-segmented-control>

Usage

  import { CriteriaSegmentedControlOption, Serialisers } from '@genesislcap/foundation-criteria';

  @customElement({
    name: 'my-element',
    template: html`
        <criteria-segmented-control
          :criteriaOptions=${(x) => x.toolbarOptions}
          :value=${sync((x) => x.criteriaFilter)}
          @change=${(x) => x.onChange()}
          >
        </criteria-segmented-control>
      `,
  })
  export class MyElement extends GenesisElement {
    criteriaFilter: string;
    toolbarOptions: CriteriaSegmentedControlOption[] = [
      { label: 'A', field: 'CHOSEN_OPTION', value: 'option-A', serialiser: Serialisers.EQ },
      { label: 'B', field: 'CHOSEN_OPTION', value: 'option-B', serialiser: Serialisers.EQ },
      { label: 'C', field: 'CHOSEN_OPTION', value: 'option-C', serialiser: Serialisers.EQ },
    ];

    onChange() {
      console.log(this.criteriaFilter)
    }
  }

React

Declaration

  <criteria-segmented-control></criteria-segmented-control>

Usage

  import { CriteriaSegmentedControlOption, Serialisers } from '@genesislcap/foundation-criteria';

  export function MyComponent() {

    const criteriaOptions = [
      { label: 'A', field: 'CHOSEN_OPTION', value: 'option-A', serialiser: Serialisers.EQ },
      { label: 'B', field: 'CHOSEN_OPTION', value: 'option-B', serialiser: Serialisers.EQ },
      { label: 'C', field: 'CHOSEN_OPTION', value: 'option-C', serialiser: Serialisers.EQ },
    ];

    const handleCriteriaChange = (event) => {
      console.log(event.target.value)
    }

    return (
      <criteria-segmented-control criteriaOptions={{criteriaOptions}} onClick={handleCriteriaChange}>
        <label slot="label">Select option</label>
      </criteria-segmented-control>
    );
  }

Angular

Declaration

  <criteria-segmented-control></criteria-segmented-control>

Usage

  import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { CriteriaSegmentedControlOption, Serialisers } from '@genesislcap/foundation-criteria';
  @Component({
    selector: 'my-root',
    template: `
          <criteria-segmented-control
            [criteriaOptions]="criteriaOptions"
            (change)="handleCriteriaChange($event)">
            <label slot="label">Filter by instrument name</label>
          </criteria-segmented-control>
        `,
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
  })
  export class AppComponent {

    const criteriaOptions = [
      { label: 'A', field: 'CHOSEN_OPTION', value: 'option-A', serialiser: Serialisers.EQ },
      { label: 'B', field: 'CHOSEN_OPTION', value: 'option-B', serialiser: Serialisers.EQ },
      { label: 'C', field: 'CHOSEN_OPTION', value: 'option-C', serialiser: Serialisers.EQ },
    ];

    handleCriteriaChange(event: Event) {
      const target = event.target as HTMLInputElement;
      console.log(target.value);
    }
  }

Criteria options are JSON objecst constructed using serialisers

The choice of serialisers are:

    Serialisers.AND
    Serialisers.OR
    Serialisers.NOT
    Serialisers.GT
    Serialisers.GE
    Serialisers.LT
    Serialisers.LE
    Serialisers.NE
    Serialisers.EQ
    Serialisers.equals
    Serialisers.equalsIgnoreCase
    Serialisers.contains
    Serialisers.fieldContains
    Serialisers.containsIgnoreCase
    Serialisers.dateIsEqual
    Serialisers.dateIsGreaterEqual
    Serialisers.dateIsLessEqual

Further details on criteria matching can be found here

API

Attributes

This component doesn't have any attributes.

Properties:

Name	Type	Description	Example
criteriaOptions	Array<CriteriaSegmentedControlOption>	Array of criteria objects that can be selected	<criteria-segmented-control :criteriaOptions=${(x) => x.sampleCriteriaOptions)}>
value	string	The value of the constructed criteria expression	<criteria-segmented-control :value=${sync((x) => x.criteriaFilter)}>
selectedLabel	string	The selected options label. If you only need to work with the value for a form then use the value property, but you can use this property to set the default selected value, or set the selection when rehydrating state.	<criteria-segmented-control :selectedLabel=${(x) => defaultSelected}>

Slots

Slot	Description
label	The label

Parts

There are no parts.

Events fired

Event	Type	Use	Example
change	event	Emits a custom change event when the component state changes.	<criteria-segmented-control @change="${(x) => x.myChangeHandler(event)}">

Events listened to

This component doesn't listen to any events.