sartography
/
uva-covid19-testing-frontend
mirror of https://github.com/sartography/uva-covid19-testing-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Displays label layout name in select control

This commit is contained in:
Aaron Louie 2020-11-16 11:11:29 -05:00
parent d0f730128c
commit 4ec9c8e16e
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/settings/settings.component.html
View File

@ -28,12 +28,17 @@
#labelLayoutSelect="matSelect"
[formControl]="labelLayoutFormControl"
>
<mat-option *ngFor="let layout of labelLayouts" [value]="layout.id" [ngStyle]="{height: 'inherit', width: 'inherit'}">
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="40px" (click)="selectLabelLayout(layout)">
<div fxFlex="50%" [ngStyle]="{whiteSpace: 'normal', lineHeight: '1.2'}" (click)="selectLabelLayout(layout)">
<mat-select-trigger>{{selectedLabelLayout.name}}</mat-select-trigger>
<mat-option
*ngFor="let layout of labelLayouts"
[value]="layout.id"
[ngStyle]="{height: 'inherit', width: 'inherit'}"
>
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="40px">
<div fxFlex="50%" [ngStyle]="{whiteSpace: 'normal', lineHeight: '1.2'}">
{{layout.name}}
</div>
<div fxFlex="50%" (click)="selectLabelLayout(layout)">
<div fxFlex="50%">
<app-circle-qrcode-single *ngIf="layout.id === 'circle_qrcode_single'" [sample]="fakeSample"></app-circle-qrcode-single>
<app-circle-qrcode-double *ngIf="layout.id === 'circle_qrcode_double'" [sample]="fakeSample"></app-circle-qrcode-double>
<app-rectangle-code128 *ngIf="layout.id === 'rectangle_code128'" [sample]="fakeSample"></app-rectangle-code128>

7
src/app/settings/settings.component.ts
View File

@ -53,6 +53,13 @@ export class SettingsComponent implements AfterViewInit {
return this.numCopiesFormControl.valid && this.locationIdFormControl.valid;
}
get selectedLabelLayout(): LabelLayout {
const selectedLayoutId = this.labelLayoutFormControl.value;
if (selectedLayoutId) {
return this.labelLayouts.find(layout => layout.id === selectedLayoutId);
}
}
ngAfterViewInit(): void {
this.locationIdInput.focus();
this.changeDetector.detectChanges();