sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged PR 1433: Kundenanlage: Scanbutton für das scannen der Kundenkarte

Browse Source 
Kundenanlage: Scanbutton für das scannen der Kundenkarte
This commit is contained in:
Lorenz Hilpert
2022-11-03 14:13:58 +00:00
committed by Andreas Schickinger
parent 5bea71e19e
commit c64ff772e7
5 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.html
View File

@@ -1,3 +1,6 @@
<ui-form-control label="Kundenkartencode" requiredMark="*">
<ui-form-control label="Kundenkartencode" requiredMark="*" class="flex-grow">
<input uiInput type="text" [formControl]="control" [tabindex]="tabIndexStart" [readonly]="readonly" [autofocus]="focusAfterInit" />
</ui-form-control>
<button type="button" *ngIf="!readonly && canScan()" (click)="scan()">
<ui-svg-icon icon="barcode-scan" size="32"></ui-svg-icon>
</button>

10
apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.scss
View File

@@ -1,3 +1,11 @@
:host {
@apply block;
@apply block relative;
}
button {
@apply absolute -right-2 top-0 h-14 w-14 border-none outline-none bg-transparent items-center justify-center rounded-full bg-brand;
ui-svg-icon {
@apply flex justify-center items-center text-white;
}
}

16
apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.ts
View File

@@ -1,6 +1,7 @@
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { FormBlockControl } from '../form-block';
import { ScanAdapterService } from '@adapter/scan';
@Component({
selector: 'app-p4m-number-form-block',
@@ -13,7 +14,7 @@ export class P4mNumberFormBlockComponent extends FormBlockControl<string> {
return this.tabIndexStart;
}
constructor() {
constructor(private scanAdapter: ScanAdapterService, private changeDetectorRef: ChangeDetectorRef) {
super();
}
@@ -30,4 +31,15 @@ export class P4mNumberFormBlockComponent extends FormBlockControl<string> {
_patchValue(update: { previous: string; current: string }): void {
this.control.patchValue(update.current);
}
scan() {
this.scanAdapter.scan().subscribe((result) => {
this.control.patchValue(result);
this.changeDetectorRef.markForCheck();
});
}
canScan() {
return this.scanAdapter.isReady();
}
}

3
apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.module.ts
View File

@@ -6,9 +6,10 @@ import { ReactiveFormsModule } from '@angular/forms';
import { UiFormControlModule } from '@ui/form-control';
import { UiInputModule } from '@ui/input';
import { UiCommonModule } from '@ui/common';
import { UiIconModule } from '@ui/icon';
@NgModule({
imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule],
imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, UiIconModule],
exports: [P4mNumberFormBlockComponent],
declarations: [P4mNumberFormBlockComponent],
})

4
apps/ui/icon/src/lib/ui-icon.module.ts
View File

@@ -6,7 +6,7 @@ import { UISvgIconComponent } from './svg-icon.component';
import { IconRegistry } from './icon-registry';
import { UI_ICON_CFG } from './tokens';
import { UiIconConfig } from './icon-config';
import { mdiAccount, mdiPackageVariantClosed } from '@mdi/js';
import { mdiAccount, mdiPackageVariantClosed, mdiMagnify, mdiBarcodeScan } from '@mdi/js';
export function _rootIconRegistryFactory(config: UiIconConfig): IconRegistry {
const registry = new IconRegistry();
@@ -28,6 +28,8 @@ const DEFAULT_ICON_CONFIG: UiIconConfig = {
icons: [
{ name: 'account', data: mdiAccount },
{ name: 'package-variant-closed', data: mdiPackageVariantClosed },
{ name: 'magnify', data: mdiMagnify },
{ name: 'barcode-scan', data: mdiBarcodeScan },
],
};