Senzing SDK Components
  1. Components
  2. SzSearchIdentifiersPickerSheetComponent

File

src/lib/search/sz-search/sz-search-identifiers-picker.component.ts

Description

Provides a component that allows the user to select what "Identity Types" are displayed in the search form. Uses Angular Material "Bottom Sheet" to load in to view.

Example :
// (Angular) SzSearchIdentifiersPickerSheetComponent
  const bottomSheetRef = this.bottomSheet.open(SzSearchIdentifiersPickerSheetComponent, {
      ariaLabel: 'Identifier Types',
      panelClass: ['sz-search-identifiers-picker-sheet'],
      backdropClass: 'sz-search-identifiers-picker-sheet-backdrop',
      hasBackdrop: false,
      data: {
        attributeTypes: this._attributeTypesFromServer,
        selected: this.allowedTypeAttributes
      }
});

Extends

SzSearchIdentifiersPickerDialogComponent

Metadata

selector sz-search-identifiers-picker-sheet
styleUrls ./sz-search-identifiers-picker.component.scss
templateUrl ./sz-search-identifiers-picker.component.html

Index

Properties
Methods
HostBindings

Constructor

constructor(sheetRef: MatBottomSheetRef<SzSearchIdentifiersPickerSheetComponent>, data: AttrData)
Parameters :
Name Type Optional
sheetRef MatBottomSheetRef<SzSearchIdentifiersPickerSheetComponent> No
data AttrData No

HostBindings

class.isMatSheet
Type : any

Methods

onApplyClick
onApplyClick()

when the user clicks the Apply button

Returns : void
onNoClick
onNoClick()

when the user clicks the Cancel button

Returns : void
Public attributeCodeAsText
attributeCodeAsText(attrCode: string)

takes an attributeCode string and applies formatting

Parameters :
Name Type Optional
attrCode string No
Returns : any
Protected extendInputData
extendInputData(value: SzAttributeType[], selected: string[])

used for taking a plain list of SzAttributeType[] and converting it to a type of AttrRow[] which can hold checkbox state as well as SzAttributeType properties.

Parameters :
Name Type Optional Description
value SzAttributeType[] No

SzAttributeType[]
selected string[] No

array of attributeCode strings that are selected
Returns : Array<AttrRow>

Properties

Public data
Type : AttrData
Decorators :
@Inject(MAT_BOTTOM_SHEET_DATA)
Public sheetRef
Type : MatBottomSheetRef<SzSearchIdentifiersPickerSheetComponent>
true
Decorators :
@HostBinding('class.isMatSheet')
Protected _dataModel
Type : AttrRow[]
Public Optional dialogRef
Type : MatDialogRef<SzSearchIdentifiersPickerDialogComponent>
Public showButtons
Type : boolean
Default value : true 
<h1 mat-dialog-title class="mat-dialog-title">Identifier Types</h1>
<div mat-dialog-content class="mat-dialog-content">
  <p>Select which identifiers appear in the dropdown</p>
  <!--<mat-form-field>
    <mat-label>Favorite Animal</mat-label>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>-->
  <div class="value-pair hide-on-modal toggle-all-list-header">
    <div class="value-pair-row">
      <mat-checkbox [(ngModel)]="allOptionsSelected" class="toggle-all">
        <span *ngIf="allOptionsSelected">---- DESELECT ALL ----</span>
        <span *ngIf="!allOptionsSelected">---- SELECT ALL &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;----</span>
      </mat-checkbox>
    </div>
  </div>
  <div class="value-pair" *ngFor="let attrRow of orderedData">
    <div class="value-pair-row">
      <mat-checkbox [(ngModel)]="attrRow.checked">
        {{attributeCodeAsText(attrRow.attributeCode) | uppercase}}
      </mat-checkbox>
    </div>
  </div>
</div>
<div *ngIf="showButtons" mat-dialog-actions class="mat-dialog-actions">
  <button mat-button color="basic" class="toggle-all hide-on-sheet">
    <mat-checkbox [(ngModel)]="allOptionsSelected" class="toggle-all">
      <span *ngIf="allOptionsSelected">Deselect All</span>
      <span *ngIf="!allOptionsSelected">Select All</span>
    </mat-checkbox>
  </button>
  <button mat-button class="cancel" color="basic" (click)="onNoClick()">Cancel</button>
  <button mat-button class="accept" color="primary" (click)="onApplyClick()" cdkFocusInitial>Apply</button>
</div>

./sz-search-identifiers-picker.component.scss 

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

/* default view is modal */
:host {
    /*position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;*/

    .hide-on-modal {
        display: none;
    }

    .mat-mdc-dialog-actions {
        /*position: absolute;
        bottom: 0px;
        display: flex;*/
        flex-direction: row;
        justify-content: flex-end;
        position: relative;
    }

    button.mat-primary {
        background-color: colors.$blue;
        color: colors.$white;
    }
    button.toggle-all {
        left: 0px;
        position: absolute;
        top: 15px;
    }
}

/* 
    when the size view is narrow(ie mobile) modal is opened as a full panel
*/
:host.isMatSheet {
    display: block;
    height: calc(100vh - 13px);
    position: relative;
    margin: 0;
    /*overflow: auto;*/

    .hide-on-sheet {
        display: none;
    }
    .hide-on-modal {
        display: unset;
    }
    .toggle-all-list-header {
        display: block;
        margin-bottom: 20px;
    }

    .mat-mdc-dialog-actions {
        display: flex;
        width: 100%;
        position: absolute;
        right: 20px;
        top: 0px;

        button {
            margin-left: 10px;
        }
    }
}

:host ::ng-deep .mat-mdc-dialog-content {
    height: calc(100% - 96px);
}

:host.isMatSheet ::ng-deep .mat-mdc-dialog-content {
    height: calc(100vh - 32px - 0.67em - 0.67em - 16px);
    max-height: calc(100vh - 32px - 0.67em - 0.67em - 16px);

    overflow: auto;
}

:host mat-checkbox.toggle-all ::ng-deep .mat-ripple-element {
    background-color: transparent;
}

::ng-deep .mat-bottom-sheet-container.sz-search-identifiers-picker-sheet {
    max-height: 100vh;
    height: 100vh;
    padding: 0 0 0 20px;
}

::ng-deep .sz-search-identifiers-picker-sheet-backdrop {
    border: 1px solid #eee;
}

results matching ""

    No results matching ""