@glance-project/search-client

Search Client

Description

This is the client for the search service. It follows a Component-based Architecture with Vue.js allowing all frontend application code to be divided into independent, reusable, and easily tested components.

Using it on your application

To use the search client on your application, you need to add it as a dependency on your package.json file.

Then, you can import the component on your application following the example on the /src/example/Search.vue file.

You need the search.js file on your api folder in order to communicate with the search service via the search client. You can find an example of this file on the /src/example/api folder.

Explaining the example

The Search.vue file imports the SuperSearch component from the search-client package. All the key search components are wrapped in this component that is placed in a view that passes to the wrapper a JavaScript object with all its configuration including, for example, the available Search Fields, Operators and Values.

<SuperSearch
    table-title="Survey search"
    :headers="headers"
    :search-function="getSearchResultsFunction"
    :filter-options="filterOptions"
    :selectable-rows="false"
    :entity-details-route="'/rp-survey/member/details/:var_id'"
    :search-type="{id: 1, name: 'Survey search'}"
    :save-search-function="saveSearchFunction()"
    :load-searches-function="loadSearchesFunction()"
    :delete-search-function="deleteSearchFunction()"
    :user="user"
    :router="vueRouter"
/>

The headers property is an array of objects that define the table headers. The search-function property is a function that returns a promise with the search results. The filter-options property is an object that defines the available search fields, operators and values. The selectable-rows property defines if the table rows are selectable or not. The entity-details-route property defines the route to the entity details page. The search-type property defines the search type. It should be a value that already exists on your database (SE_SEARCH_TYPE table). The save-search-function property is an API call to the previously mentioned search API. It saves the current search configuration to the user profile. The load-searches-function property is also an API call. It is used for loading the member's saved searches. The delete-search-function is also an API call. It deletes the selected search from the member's saved searches. The user property is an object with the user information, used for fetching, saving and deleting the user saved searches. The router property is the vue router.

headers:

headers: [
    { text: 'Details', value: 'id' },
    { text: 'Description', value: 'description' },
    { text: 'Magnet on?', value: 'magnetOnAsString' },
    { text: 'Started On', value: 'startedOnAsString' },
    { text: 'Beam Off At', value: 'beamOffAtAsString' },
    { text: 'RAMSES Log Link', value: 'ramsesLogLink' },
    { text: 'Responsible Persons', value: 'responsiblePersonsNames' },
],

The text field is how the header will be displayed on the table. The value field is the name of the field on the search results object.

filter-options:

Filter options can be of various types. They should match the search results response from the back-end.

VTextField:

{
    name: 'Description', value: 'description', operators: ['equals', 'different from', 'contains', 'does not contain'], type: 'VTextField',
},

VTextField is useful when searching for strings.

VAutoComplete:

VAutocomplete is useful when searching for values from a list of predefined values. These values can be set on the items property manually.

{
    name: 'Magnet on?',
    value: 'magnetOn',
    operators: ['equals', 'different from', 'is empty', 'is not empty'],
    type: 'VAutocomplete',
    items: [
        { name: 'Yes', value: 'Y' },
        { name: 'No', value: 'N' },
    ],
    optionKey: 'name',
    optionName: 'name',
    optionValue: 'value',
},

Or can be the result of an API call (e.g. fetching all members's information).

{
    name: 'Responsible Persons',
    value: 'responsiblePersonsNames',
    operators: ['contains', 'does not contain'],
    type: 'VAutocomplete',
    loadOptionsFunction: this.getMembers,
    optionKey: 'members',
    optionName: 'name',
    optionValue: 'name',
},

The loadOptionsFunction should be an action performed in the store that returns the items to be used on the auto complete.

...mapActions('member', [
    'getMembers',
]),

The optionKey is the object name. The optionName is the value displayed on the VAutoComplete dropdown menu. The optionValue is the value sent on the query.

Date:

{
    name: 'Started On', value: 'startedOn', operators: ['equals', 'greater or equals', 'less or equals', 'greater than', 'less than', 'different from'], type: 'Date',
},

The date filter is a special case in the sense that it contains pre-defined values for the filter value (e.g. today, one week from now, one week ago, etc) while also allowing custom dates.

More info

This project was the subject of a presentation at the 26th International Conference On Computing In High Energy & Nuclear Physics (CHEP 2023). You can find the event here.