src/lib/search/sz-search/sz-search-identifiers-picker.component.ts
Provides a component that allows the user to select what "Identity Types" are displayed in the search form. Uses Angular Material "Dialog" to load in to view.
Example :// (Angular) SzSearchIdentifiersPickerDialogComponent
const dialogRef = this.dialog.open(SzSearchIdentifiersPickerDialogComponent, {
width: '375px',
height: '50vh',
data: {
attributeTypes: this._attributeTypesFromServer,
selected: this.allowedTypeAttributes
}
});| selector | sz-search-identifiers-picker-dialog |
| styleUrls | ./sz-search-identifiers-picker.component.scss |
| templateUrl | ./sz-search-identifiers-picker.component.html |
Properties |
|
Methods |
|
Accessors |
constructor(dialogRef?: MatDialogRef<SzSearchIdentifiersPickerDialogComponent>, data?: AttrData)
|
|||||||||
|
Parameters :
|
| Public attributeCodeAsText | ||||||
attributeCodeAsText(attrCode: string)
|
||||||
|
takes an attributeCode string and applies formatting
Parameters :
Returns :
any
|
| onApplyClick |
onApplyClick()
|
|
when the user clicks the Apply button
Returns :
void
|
| onNoClick |
onNoClick()
|
|
when the user clicks the Cancel button
Returns :
void
|
| Protected _dataModel |
Type : AttrRow[]
|
| Public Optional data |
Type : AttrData
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
| Public Optional dialogRef |
Type : MatDialogRef<SzSearchIdentifiersPickerDialogComponent>
|
| Public showButtons |
Type : boolean
|
Default value : true
|
| checkedAttributeTypes |
getcheckedAttributeTypes()
|
|
get an array of selected attributes from the list |
| allOptionsSelected | ||||||
getallOptionsSelected()
|
||||||
|
are all attributes selected in the list
Returns :
boolean
|
||||||
setallOptionsSelected(value: boolean)
|
||||||
|
select or deselect all available attrs in the list
Parameters :
Returns :
void
|
| anyOptionsSelected |
getanyOptionsSelected()
|
|
Are any attribute options selected in the list
Returns :
boolean
|
| orderedData |
getorderedData()
|
|
get the current attribute list ordered alphabetically
Returns :
AttrRow[]
|
<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 ----</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;
}