File

src/lib/search/sz-search-results/sz-search-results.component.ts

Description

Provides a graphical search results component. Data can be provided a number of ways. The simplest of which is to bind the results input setter to the output of the SzSearchComponent resultsChange event.

Example :

<!-- (Angular) SzSearchComponent -->
<sz-search
name="Isa Creepr"
(resultsChange)="resultsOfSearch=$event"></sz-search>
<sz-search-results [results]="resultsOfSearch"></sz-search-results>

Example :

<!-- (WC javascript) SzSearchComponent and SzSearchResultsComponent combo -->
<sz-wc-search
id="sz-search"
name="Isa Creepr"></sz-wc-search>
<sz-wc-search-results id="sz-search-results"></sz-wc-search-results>
<script>
 var szSearchComponent = document.getElementById('sz-search');
 var szSearchResultsComponent = document.getElementById('sz-search-results');
 szSearchComponent.addEventListener('resultsChange', (evt) => {
   console.log('search results: ', evt);
   szSearchResultsComponent.results = evt.detail;
 });
</script>

Implements

OnInit OnDestroy

Metadata

selector	`sz-search-results`
styleUrls	`./sz-search-results.component.scss`
templateUrl	`./sz-search-results.component.html`

Index

Constructor

constructor(titleCasePipe: TitleCasePipe, prefs: SzPrefsService, cd: ChangeDetectorRef, dialog: MatDialog)

Parameters :

Name	Type	Optional
titleCasePipe	`TitleCasePipe`	No
prefs	`SzPrefsService`	No
cd	`ChangeDetectorRef`	No
dialog	`MatDialog`	No

Inputs

openWhyComparisonModalOnClick

Type : (value: boolean) => void

whether or not to automatically open a modal with the entity comparison on "Why" button click. (disable for custom implementation/action)

parameters

Type : SzEntitySearchParams

The current search parameters being used. used for displaying the parameters being searched on above result list.

results

Type : SzAttributeSearchResult[]

The results of a search response to display in the component.

showDataSources

Type : boolean

Default value : true

Shows or hides the datasource lists in the result items header.

showHowButton

Type : boolean | string

Shows or hides the multi-select "Why" comparison button.

showMatchKeys

Type : boolean

Shows or hides the match keys in the result items header.

showWhyComparisonButton

Type : boolean | string

Shows or hides the multi-select "Why" comparison button.

Outputs

howButtonClick

Type : EventEmitter

(Event Emitter) when the user clicks on the "How" button

resultClick

Type : EventEmitter<SzAttributeSearchResult>

Occurs when a search result item is clicked.

whyButtonClick

Type : EventEmitter

(Event Emitter) when the user clicks on the "Why" button

Methods

Public clearSelected

clearSelected()

clear any selected entity results if "_showWhyComparisonButton" set to true

Returns : void

Public isSelected

isSelected(entityResult: SzAttributeSearchResult)

is a search result already selected

Parameters :

Name	Type	Optional
entityResult	`SzAttributeSearchResult`	No

Returns : boolean

ngOnDestroy

ngOnDestroy()

unsubscribe when component is destroyed

Returns : void

ngOnInit

ngOnInit()

Returns : void

Public onCompareClick

onCompareClick(evt: any)

when the compare button is clicked

Parameters :

Name	Type	Optional
evt	`any`	No

Returns : void

Public onComparisonModeActiveChange

onComparisonModeActiveChange(isActive: boolean)

when the user clicks the multi-select button to enable/disable click to select behavior this handler is invoked

Parameters :

Name	Type	Optional
isActive	`boolean`	No

Returns : void

Public onComparisonModeToggleClick

onComparisonModeToggleClick(evt: any)

for multi-select the user has to click the button to change the default row behavior from click->go to detail to click->select for comparison

Parameters :

Name	Type	Optional
evt	`any`	No

Returns : void

Public onHowClicked

onHowClicked(event: howClickEvent)

when the "how" button is clicked

Parameters :

Name	Type	Optional
event	`howClickEvent`	No

Returns : void

Public onResultClick

onResultClick(evt: any, resData: SzAttributeSearchResult)

DOM click handler which then triggers the "resultClick" event emitter.

Parameters :

Name	Type	Optional
evt	`any`	No
resData	`SzAttributeSearchResult`	No

Returns : void

openWhyComparisonModalOnClick

openWhyComparisonModalOnClick(value: boolean)

Decorators :

@Input()

whether or not to automatically open a modal with the entity comparison on "Why" button click. (disable for custom implementation/action)

Parameters :

Name	Type	Optional
value	`boolean`	No

Returns : void

Public toggleSelected

toggleSelected(entityResult: SzAttributeSearchResult)

add entity to selection if not already in it. remove entity from selection if already in selection

Parameters :

Name	Type	Optional
entityResult	`SzAttributeSearchResult`	No

Returns : void

Properties

Public _searchResults

Type : SzAttributeSearchResult[]

Public _searchValue

Type : SzEntitySearchParams

Public attributeDisplay

Type : literal type[]

Public dialog

Type : MatDialog

Public searchResultsJSON

Public unsubscribe$

Default value : new Subject<void>()

subscription to notify subscribers to unbind

Accessors

showMatchKeys

getshowMatchKeys()

setshowMatchKeys(value: boolean)

Shows or hides the match keys in the result items header.

Parameters :

Name	Type	Optional
value	`boolean`	No

Returns : void

showWhyComparisonButton

getshowWhyComparisonButton()

setshowWhyComparisonButton(value: boolean | string)

Shows or hides the multi-select "Why" comparison button.

Parameters :

Name	Type	Optional
value	`boolean \| string`	No

Returns : void

showHowButton

getshowHowButton()

setshowHowButton(value: boolean | string)

Shows or hides the multi-select "Why" comparison button.

Parameters :

Name	Type	Optional
value	`boolean \| string`	No

Returns : void

entitySelectActive

getentitySelectActive()

selectedEntities

getselectedEntities()

get the entities selected during a multi-select operation such as when "Why" comparison mode select is active.

Returns : SzAttributeSearchResult[]

searchResults

getsearchResults()

The search results being displayed in the component.

Returns : SzAttributeSearchResult[]

setsearchResults(value: SzAttributeSearchResult[])

The results of a search response to display in the component.

Parameters :

Name	Type	Optional
value	`SzAttributeSearchResult[]`	No

Returns : void

matches

getmatches()

A list of the search results that are matches.

Returns : SzAttributeSearchResult[]

possibleMatches

getpossibleMatches()

A list of the search results that are possible matches.

Returns : SzAttributeSearchResult[]

discoveredRelationships

getdiscoveredRelationships()

A list of the search results that are related.

Returns : SzAttributeSearchResult[]

nameOnlyMatches

getnameOnlyMatches()

A list of the search results that are name only matches.

Returns : SzAttributeSearchResult[]

searchValue

getsearchValue()

The current search parameters being used.

Returns : SzEntitySearchParams

setsearchValue(value: SzEntitySearchParams)

The current search parameters being used. used for displaying the parameters being searched on above result list.

Parameters :

Name	Type	Optional
value	`SzEntitySearchParams`	No

Returns : void

searchResultsTotal

getsearchResultsTotal()

Total number of search results being displayed.

Returns : number

<div [class.select-mode-active]="entitySelectActive">
    <!-- @senzing/sdk/search/sz-search-results -->
    <div class="sz-search-results-head">
      <div class="sz-search-results-total-summary">
        <div class="sz-search-results-total" *ngIf="searchResults && searchValue">
          <span class="sz-search-results-total-bold">{{searchResultsTotal}} Results </span>found for
          <div>
            <ng-container *ngFor="let attribute of attributeDisplay">{{attribute?.attr}}
              <span *ngIf="attribute?.value">:</span>
              <span class="sz-search-results-parameter-value">{{attribute?.value}}&nbsp;</span>
            </ng-container>
          </div>
        </div>
      </div>
      <!-- start "entity select control" mechanism -->
      <sz-button-multi-select *ngIf="showWhyComparisonButton"
        (onSelectActiveChange)="onComparisonModeActiveChange($event)"
        (onSelectedClick)="onCompareClick($event)"
        [selectedCount]="this.selectedEntities.length"
        aria-hidden="false" 
        aria-label="Select Entities for Why comparison"
        text="Compare Entities"
        selectedItemTypeSingular="entity"
        selectedItemTypePlural="entities"
        selectedActionVerb="why comparison"
        selectedActionVerbCTA="compare Why"
        mat-icon="compare_arrows"
        ></sz-button-multi-select>
      <!-- end "entity select control" mechanism -->
    </div>
    <!--<div *ngIf="entitySelectActive">
      <ul>
        <li *ngFor="let selectedEntity of this.selectedEntities; let i = index">
          {{ selectedEntity.nameData }}
        </li>
      </ul>
    </div>-->
    <div class="search-result__section-header matches"
      *ngIf="this.matches?.length > 0"><span>Matches</span></div>
    <sz-search-result-card
      class="matches"
      *ngFor="let searchResult of this.matches; let i = index"
      (click)="onResultClick($event, searchResult)"
      (howClick)="onHowClicked($event)"
      [searchResult]="searchResult"
      [cardTitle]="'Match'"
      [class.selected]="isSelected(searchResult)"
      [showDataSources]="showDataSources"
      [showMatchKey]="showMatchKeys">
    </sz-search-result-card>

    <div class="search-result__section-header possible-match"
      *ngIf="this.possibleMatches?.length > 0"><span>Possible Match</span></div>
    <sz-search-result-card
      class="possible-match"
      *ngFor="let searchResult of this.possibleMatches; let i = index"
      (click)="onResultClick($event, searchResult)"
      (howClick)="onHowClicked($event)"
      [searchResult]="searchResult"
      [cardTitle]="'Possible Matches'"
      [class.selected]="isSelected(searchResult)"
      [showDataSources]="showDataSources"
      [showMatchKey]="showMatchKeys">
    </sz-search-result-card>

    <div class="search-result__section-header possibly-related"
      *ngIf="this.discoveredRelationships?.length > 0"><span>Possibly Related</span></div>
    <sz-search-result-card
      class="possibly-related"
      *ngFor="let searchResult of this.discoveredRelationships; let i = index"
      (click)="onResultClick($event, searchResult)"
      (howClick)="onHowClicked($event)"
      [searchResult]="searchResult"
      [cardTitle]="'Discovered Relationships'"
      [class.selected]="isSelected(searchResult)"
      [showDataSources]="showDataSources"
      [showMatchKey]="showMatchKeys">
    </sz-search-result-card>

    <div class="search-result__section-header name-only-matches"
      *ngIf="this.nameOnlyMatches?.length > 0"><span>Name Only Matches</span></div>
    <sz-search-result-card
      class="name-only"
      *ngFor="let searchResult of this.nameOnlyMatches; let i = index"
      (click)="onResultClick($event, searchResult)"
      (howClick)="onHowClicked($event)"
      [searchResult]="searchResult"
      [cardTitle]="'Name Only Matches'"
      [class.selected]="isSelected(searchResult)"
      [showDataSources]="showDataSources"
      [showMatchKey]="showMatchKeys"></sz-search-result-card>
</div>

./sz-search-results.component.scss

@use "../../scss/colors";

:host {
  display: block;
  padding: var(--sz-search-results-padding);
  color: var(--sz-search-results-color);
  font-family: var(--sz-search-results-font-family);

  textarea {
    width: 1000px;
    height: 400px;
  }
  .label-title {
    text-transform: uppercase;
  }

  .sz-search-results-head {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    sz-button-multi-select { width: 165px; }
  }

  .sz-search-results-total-summary {

    color: var(--sz-search-results-header-color);
    display: var(--sz-search-results-header-display);
    justify-content: space-between;
    align-items: center;
    padding: var(--sz-search-results-header-padding);
    margin: var(--sz-search-results-header-margin);

    .sz-search-results-total {
      font-size: var(--sz-search-results-header-font-size);
    }
    .action-buttons__wrapper {
      display: flex;
    }
  }

  .sz-search-results-parameter-value {
    color: var( --sz-search-results-header-parameter-value-color);
    font-weight: 600;
    margin: 0 .5em 0 .5em;
  }

  .search-result__section-header {
    display: flex;
    width: var(--sz-search-results-header-width);
    font-size: var(--sz-search-results-header-font-size);
    font-weight: 600;
    height: 40px;
    align-items: center;
    color: var(--sz-search-results-section-header-color);
    padding: var(--sz-search-results-section-header-padding);
    span {
      opacity: var(--sz-search-results-section-header-text-opacity);
    }

    &.matches {
      background-color: var(--sz-search-results-matches-header-background-color);
    }
    &.possible-match {
      background-color: var(--sz-search-results-possible-match-header-background-color);
    }
    &.possibly-related {
      background-color: var(--sz-search-results-possibly-related-header-background-color);
    }
    &.name-only-matches {
      background-color: var(--sz-search-results-name-only-matches-header-background-color);
    }
  }

  .select-mode-active {
    sz-search-result-card { 
      opacity: .5;
      cursor: copy;
      &:hover {
        opacity: .9;
      }
      &.selected {
        background-color: #0b95ed2e;
        opacity: 1;
        /*cursor: zoom-out;*/
      }
    }
  }

  sz-search-result-card {
    cursor: var(--sz-search-results-card-cursor);
    background: colors.$white;

    &:hover {
      color: var(--sz-search-results-card-hover-color);
      cursor: var(--sz-search-results-card-hover-cursor);
      /* give implementers option of "per-type" rollover colors */      
      &.matches {
        color: var(--sz-search-results-matches-card-hover-color);
      }
      &.possible-match {
        color: var(--sz-search-results-possible-match-card-hover-color);
      }
      &.possibly-related {
        color: var(--sz-search-results-possibly-related-card-hover-color);
      }
      &.name-only {
        color: var(--sz-search-results-name-only-matches-card-hover-color);
      }
    }
  }

  .main-card__label {
    min-height: 150px;
    width: 200px;
    min-width: 200px;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: colors.$white;
    &.search {
      background-color: colors.$green;
    }
    &.insights {
      background-color: colors.$orange;
    }
    &.suggestions {
      background-color: colors.$brown;
    }
    &.data {
      background-color: colors.$dark2;
    }
    &.health {
      background-color: colors.$dark-blue;
    }
  }

}

File

Description

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Accessors

Constructor

Inputs

Outputs

Methods

Properties

Accessors

results matching ""

No results matching ""