Conga Digital Commerce 202405.2.0 on Conga Revenue Lifecycle Platform
  1. Components
  2. ProductSearchComponent

File

projects/congarevenuecloud/elements/src/lib/product-search/product-search.component.ts

Description

Product Search Component can be used to render typeahead search implementation, while searching for a list of products matching a given input string. This component can search for products matching a product name, product code or product description. The minimum number of characters in the search string must be 3.

Preview

Usage

Example :
import { ProductSearchModule } from '@congarevenuecloud/elements';

@NgModule({
imports: [ProductSearchModule, ...]
})
export class AppModule {}
Example :
```typescript
<apt-product-search></apt-product-search>
Example :

Implements

OnInit

Metadata

encapsulation ViewEncapsulation.None
selector apt-product-search
styleUrls ./product-search.component.scss
templateUrl ./product-search.component.html

Index

Properties
Inputs

Constructor

constructor(modalService: BsModalService, productService: ProductService, router: Router, config: ConfigurationService, sanitizer: DomSanitizer)
Parameters :
Name Type Optional
modalService BsModalService No
productService ProductService No
router Router No
config ConfigurationService No
sanitizer DomSanitizer No

Inputs

typeAheadLimit
Type : number
Default value : 5

The property specifies the maximum number of search results to be shown (defaults to 5).

Properties

keyupEvent
Type : any

Event to specify any key is pressed.
noResult
Type : boolean
Default value : false
searchBox
Type : ElementRef
Decorators :
@ViewChild('searchBox', {static: false})

Element refrence for input box of search dailog
searchModal
Type : ElementRef
Decorators :
@ViewChild('searchModal', {static: false})

Element refrence for search dailog
searchQuery
Type : string

Query for search a product.
searchString
Type : string

Search string to search a product.
typeahead$
Type : Observable<Array<Product>>
Default value : new Observable<Array<Product>>()

Observable instance of type Product to show result based on search.
typeAheadItem
Type : TypeaheadDirective
Decorators :
@ViewChild('typeAheadItem', {static: false})

Bootstrap typeAhead directive refrence to show matched product with search string
typeaheadLoading
Type : boolean
Default value : false

Flag to show loader.

 
<button class="btn btn-link px-0" id="searchButton" (click)="openModal(searchModal)">
  <i class="fa fa-search fa-lg"></i>
</button>

<ng-template #searchModal>
  <form role="document" (ngSubmit)="doSearch()" class="search-container">
    <div class="modal-header d-flex flex-row-reverse px-0 pb-1">
      <button type="button" class="close close-button pull-right pt-3" (click)="modalRef.hide()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body pt-0 bg-white custom-border-bottom-radius-0">
      <h5 class="modal-title font-weight-bold pb-3 pt-2" id="searchModalLabel">{{'HEADER.PRODUCT_SERACH' | translate}}
      </h5>
      <div class="d-flex justify-content-between input-icons">
        <apt-spinner [large]="false" [color]="'text-secondary'" *ngIf="typeaheadLoading"
          class="pr-sm-5 pr-5 pr-md-0 pr-lg-0"></apt-spinner>
        <i class="fa fa-search icon"></i>
        <input type="search" class="form-control" placeholder="{{'HEADER.ENTER_YOUR_SEARCH_TERM' | translate}}"
          (typeaheadLoading)="typeaheadLoading = $event" (keyup)="onInputChange($event)"
          (typeaheadOnSelect)="typeaheadOnSelect($event)" [typeaheadIsFirstItemActive]="false"
          [typeaheadItemTemplate]="typeAheadItem" [typeahead]="typeahead$" [typeaheadOptionsLimit]="5" minlength="2"
          [typeaheadWaitMs]="1000" [typeaheadOptionField]="Name" [(ngModel)]="searchQuery" name="searchQuery"
          (typeaheadNoResults)="typeaheadNoResults($event)" #searchBox aptAutoFocus autocomplete="off" />
        <div class="pl-3 d-block d-sm-block d-md-none d-lg-none">
          <button type="button" class="btn button btn-primary btn-raised px-1 m-0" type="submit"
            [disabled]="searchQuery?.length < 3">{{'HEADER.SUBMIT' | translate}}</button>
        </div>
      </div>
      <div class="pt-1">
        <div class="media w-100 border" *ngIf="noResult && searchQuery.length >=3 && !typeaheadLoading">
          <div class="truncates px-2">
            <span class="pl-3">{{'COMMON.NO_RESULT'
              | translate}} {{searchQuery}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer border-top bg-white p-lg-2 p-sm-0 p-md-2 p-0">
      <button type="button" class="btn btn-link px-3 m-0 d-none d-sm-none d-md-block d-lg-block" data-dismiss="modal"
        (click)="modalRef.hide()">{{'COMMON.CANCEL' |
        translate}}</button>
      <button type="button" class="btn button btn-primary btn-raised px-1 m-0 d-none d-sm-none d-md-block d-lg-block"
        type="submit" [disabled]="searchQuery?.length < 3">{{'HEADER.SUBMIT' | translate}}</button>
    </div>
  </form>
</ng-template>

<ng-template #typeAheadItem let-model="item" let-index="index" let-last="last" let-match="match">
  <div class="media w-100 p-2" (click)="onTemplateMatch(match)">
    <img class="mr-3 align-self-center thumbnail" [src]="model.IconId | image: true: true: model.Id"
      [alt]="model.IconId">
    <div class="media-body truncate">
      <h6 class="m-0">{{model?.Name}}</h6>
      <small class="d-block">{{model?.ProductCode}}</small>
    </div>
  </div>
</ng-template>

./product-search.component.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""