sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

#1086 Add Option To Change Meldenummer With Suggestion and Validation

Browse Source
This commit is contained in:
Sebastian
2020-10-07 23:47:12 +02:00
parent 512e6fecdb
commit 9af1bec78b
13 changed files with 362 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/sales/src/app/modules/shelf/components/edit-order-item/edit-order-item.component.html
View File

@@ -9,22 +9,43 @@
<hr class="isa-content-spacer last" />
<form [formGroup]="orderItemForm" *ngIf="isGroupOpen">
<app-ui-text-input formControlName="quantity" label="Menge" suffix="x"></app-ui-text-input>
<app-ui-text-input
formControlName="quantity"
label="Menge"
suffix="x"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="price" label="Preis" suffix="EUR"></app-ui-text-input>
<app-ui-text-input
formControlName="price"
label="Preis"
suffix="EUR"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="ean" label="ISBN/EAN"></app-ui-text-input>
<app-ui-text-input
formControlName="ean"
label="ISBN/EAN"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="targetBranch" label="Zielfiliale"></app-ui-text-input>
<app-ui-text-input
formControlName="targetBranch"
label="Zielfiliale"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="supplier" label="Lieferant"></app-ui-text-input>
<app-ui-text-input
formControlName="supplier"
label="Lieferant"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="ssc" label="Meldenummer"></app-ui-text-input>
<app-ui-text-input
formControlName="ssc"
[suffix]="sscText"
label="Meldenummer"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-select-input
@@ -39,7 +60,10 @@
</app-ui-select-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="comment" label="Anmerkung"></app-ui-text-input>
<app-ui-text-input
formControlName="comment"
label="Anmerkung"
></app-ui-text-input>
<hr class="isa-content-spacer" />
</form>
</ng-container>

3
apps/sales/src/app/modules/shelf/components/edit-order-item/edit-order-item.component.ts
View File

@@ -25,6 +25,7 @@ export class ShelfEditOrderItemComponent implements OnInit, OnChanges {
@Input() onlyChild: boolean;
@Input() firstChild: boolean;
@Input() vatOptions: VATDTO[];
@Input() sscText: string;
vatLabelPipe: VatTypeToDisplayNamePipe;
vatOptionsPipe = new VatDtoToVatValuePipe();
@@ -38,7 +39,7 @@ export class ShelfEditOrderItemComponent implements OnInit, OnChanges {
constructor() {}
ngOnChanges({ vatOptions }: SimpleChanges) {
if (vatOptions.currentValue) {
if (vatOptions && vatOptions.currentValue) {
this.vatLabelPipe = new VatTypeToDisplayNamePipe();
}
}

60
apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.component.html
View File

@@ -7,35 +7,59 @@
<div class="layout-content">
<ng-container *ngIf="form">
<form [formGroup]="form">
<app-ui-text-input formControlName="compartmentCode" label="Abholfachnummer"></app-ui-text-input>
<app-ui-text-input
formControlName="compartmentCode"
label="Abholfachnummer"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="orderNumber" label="Vorgang-ID"></app-ui-text-input>
<app-ui-text-input
formControlName="orderNumber"
label="Vorgang-ID"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="orderDate" label="Bestelldatum"></app-ui-text-input>
<app-ui-text-input
formControlName="orderDate"
label="Bestelldatum"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="clientChannel" label="Bestellkanal"></app-ui-text-input>
<app-ui-text-input
formControlName="clientChannel"
label="Bestellkanal"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="buyerNumber" label="Kundennummer"></app-ui-text-input>
<app-ui-text-input
formControlName="buyerNumber"
label="Kundennummer"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-select-input
formControlName="processingStatus"
label="Status"
[options]="formService.processingStatus | processingStatusOptionsPipe"
[options]="
formService.processingStatus | processingStatusOptionsPipe
"
[labelPipe]="processingStatusPipe"
[optionsPipe]="processingStatusPipe"
></app-ui-select-input>
<hr class="isa-content-spacer" />
<ng-container *ngIf="+form.get('processingStatus').value === 16 || +form.get('processingStatus').value === 8192">
<ng-container
*ngIf="
+form.get('processingStatus').value === 16 ||
+form.get('processingStatus').value === 8192
"
>
<app-ui-select-input
formControlName="estimatedShippingDate"
label="Vsl. Lieferdatum"
[options]="form.get('estimatedShippingDate').value | getExtendPickUpOptions"
[options]="
form.get('estimatedShippingDate').value | getExtendPickUpOptions
"
[labelPipe]="datePipe"
[optionsPipe]="dateOptionsPipe"
></app-ui-select-input>
@@ -46,7 +70,9 @@
<app-ui-select-input
formControlName="pickUpDeadline"
label="Abholfrist"
[options]="form.get('pickUpDeadline').value | getExtendPickUpOptions"
[options]="
form.get('pickUpDeadline').value | getExtendPickUpOptions
"
[labelPipe]="datePipe"
[optionsPipe]="dateOptionsPipe"
></app-ui-select-input>
@@ -54,12 +80,19 @@
</ng-container>
<div formArrayName="items">
<ng-container *ngFor="let item of items.controls; let index = index">
<ng-container
*ngFor="let item of items.controls; let index = index"
>
<app-shelf-edit-order-item
[orderItemForm]="item"
[onlyChild]="items.controls.length === 1"
[firstChild]="index === 0"
[vatOptions]="formService.vats$ | async"
[sscText]="
item?.get('ssc')?.value
| sscToSscText: item?.get('supplierId')?.value
| async
"
></app-shelf-edit-order-item>
</ng-container>
</div>
@@ -68,5 +101,10 @@
</div>
<div class="spacing"></div>
</div>
<app-shelf-edit-actions [disabled]="!form || !form.valid" (cancel)="onAbortEdit()" (save)="onSubmit()"> </app-shelf-edit-actions>
<app-shelf-edit-actions
[disabled]="!form || !form.valid"
(cancel)="onAbortEdit()"
(save)="onSubmit()"
>
</app-shelf-edit-actions>
</div>

88
apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.component.ts
View File

@@ -1,11 +1,28 @@
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import {
Component,
OnInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { filter, map, distinctUntilChanged, shareReplay, take, withLatestFrom, first } from 'rxjs/operators';
import {
filter,
map,
distinctUntilChanged,
shareReplay,
take,
withLatestFrom,
first,
} from 'rxjs/operators';
import { isNullOrUndefined } from 'util';
import { ShelfEditFormService } from '../../services';
import { FormGroup, FormArray } from '@angular/forms';
import { ProcessingStatusPipe, PickUpDateOptionsToDisplayValuesPipe, ProcessingStatusOptionsPipe } from '../../pipes';
import {
ProcessingStatusPipe,
PickUpDateOptionsToDisplayValuesPipe,
ProcessingStatusOptionsPipe,
} from '../../pipes';
import { DatePipe } from '@angular/common';
import { ShelfNavigationService } from '../../shared/services';
import { OrderItemProcessingStatusValue } from '@swagger/oms';
@@ -49,7 +66,10 @@ export class ShelfEditCompartmentComponent implements OnInit {
get processingStatus$() {
return this.activatedRoute.params.pipe(
map((params) => Number(params.processingStatus) as OrderItemProcessingStatusValue),
map(
(params) =>
Number(params.processingStatus) as OrderItemProcessingStatusValue
),
distinctUntilChanged(),
shareReplay()
);
@@ -60,16 +80,27 @@ export class ShelfEditCompartmentComponent implements OnInit {
}
async loadCompartmentAndInitForm() {
const compartmentCode = await this.compartmentCode$.pipe(take(1)).toPromise();
const processingStatus = await this.processingStatus$.pipe(take(1)).toPromise();
const compartmentCode = await this.compartmentCode$
.pipe(take(1))
.toPromise();
const processingStatus = await this.processingStatus$
.pipe(take(1))
.toPromise();
this.populateFormData(compartmentCode, processingStatus);
}
async onSubmit() {
const compartmentCode = await this.compartmentCode$.pipe(first()).toPromise();
const processingStatus = await this.processingStatus$.pipe(first()).toPromise();
const submitResult = await this.formService.submit(this.form, processingStatus);
const compartmentCode = await this.compartmentCode$
.pipe(first())
.toPromise();
const processingStatus = await this.processingStatus$
.pipe(first())
.toPromise();
const submitResult = await this.formService.submit(
this.form,
processingStatus
);
let newValues: {
orderNumber?: string;
@@ -78,8 +109,10 @@ export class ShelfEditCompartmentComponent implements OnInit {
};
if (submitResult.result) {
newValues = {
compartmentCode: this.form.get('compartmentCode').value || compartmentCode,
processingStatus: this.form.get('processingStatus').value || processingStatus,
compartmentCode:
this.form.get('compartmentCode').value || compartmentCode,
processingStatus:
this.form.get('processingStatus').value || processingStatus,
};
this.shelfNavigationService.navigateBackToDetails(newValues, {
@@ -98,23 +131,36 @@ export class ShelfEditCompartmentComponent implements OnInit {
}
onAbortEdit() {
return this.compartmentCode$.pipe(take(1), withLatestFrom(this.processingStatus$)).subscribe(([compartmentCode, processingStatus]) =>
this.shelfNavigationService.navigateBackToDetails({
compartmentCode,
processingStatus,
})
);
return this.compartmentCode$
.pipe(take(1), withLatestFrom(this.processingStatus$))
.subscribe(([compartmentCode, processingStatus]) =>
this.shelfNavigationService.navigateBackToDetails({
compartmentCode,
processingStatus,
})
);
}
private async populateFormData(compartmentCode: string, processingStatus: OrderItemProcessingStatusValue) {
this.form = await this.formService.createFormByCompartmentCode(compartmentCode, processingStatus);
private async populateFormData(
compartmentCode: string,
processingStatus: OrderItemProcessingStatusValue
) {
this.form = await this.formService.createFormByCompartmentCode(
compartmentCode,
processingStatus
);
this.items = this.formService.getItemsForm(compartmentCode);
this.customerName = this.formService.getCustomerName(compartmentCode);
this.cdr.detectChanges();
}
private showSubmitError(error: { message: string; code: number; invalidProperties: { [key: string]: string } }) {
const invalidProperties = Object.values(error.invalidProperties).join(', ') || undefined;
private showSubmitError(error: {
message: string;
code: number;
invalidProperties: { [key: string]: string };
}) {
const invalidProperties =
Object.values(error.invalidProperties).join(', ') || undefined;
this.errorService.addErrors(error.code, error.message, invalidProperties);
}

60
apps/sales/src/app/modules/shelf/pages/shelf-edit-order/shelf-edit-order.component.html
View File

@@ -7,35 +7,59 @@
<div class="layout-content">
<ng-container *ngIf="form">
<form [formGroup]="form">
<app-ui-text-input formControlName="compartmentCode" label="Abholfachnummer"></app-ui-text-input>
<app-ui-text-input
formControlName="compartmentCode"
label="Abholfachnummer"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="orderNumber" label="Vorgang-ID"></app-ui-text-input>
<app-ui-text-input
formControlName="orderNumber"
label="Vorgang-ID"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="orderDate" label="Bestelldatum"></app-ui-text-input>
<app-ui-text-input
formControlName="orderDate"
label="Bestelldatum"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="clientChannel" label="Bestellkanal"></app-ui-text-input>
<app-ui-text-input
formControlName="clientChannel"
label="Bestellkanal"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-text-input formControlName="buyerNumber" label="Kundennummer"></app-ui-text-input>
<app-ui-text-input
formControlName="buyerNumber"
label="Kundennummer"
></app-ui-text-input>
<hr class="isa-content-spacer" />
<app-ui-select-input
formControlName="processingStatus"
label="Status"
[options]="formService.processingStatus | processingStatusOptionsPipe"
[options]="
formService.processingStatus | processingStatusOptionsPipe
"
[labelPipe]="processingStatusPipe"
[optionsPipe]="processingStatusPipe"
></app-ui-select-input>
<hr class="isa-content-spacer" />
<ng-container *ngIf="+form.get('processingStatus').value === 16 || +form.get('processingStatus').value === 8192">
<ng-container
*ngIf="
+form.get('processingStatus').value === 16 ||
+form.get('processingStatus').value === 8192
"
>
<app-ui-select-input
formControlName="estimatedShippingDate"
label="Vsl. Lieferdatum"
[options]="form.get('estimatedShippingDate').value | getExtendPickUpOptions"
[options]="
form.get('estimatedShippingDate').value | getExtendPickUpOptions
"
[labelPipe]="datePipe"
[optionsPipe]="dateOptionsPipe"
></app-ui-select-input>
@@ -46,19 +70,28 @@
<app-ui-select-input
formControlName="pickUpDeadline"
label="Abholfrist"
[options]="form.get('pickUpDeadline').value | getExtendPickUpOptions"
[options]="
form.get('pickUpDeadline').value | getExtendPickUpOptions
"
[labelPipe]="datePipe"
[optionsPipe]="dateOptionsPipe"
></app-ui-select-input>
<hr class="isa-content-spacer" />
</ng-container>
<div formArrayName="items">
<ng-container *ngFor="let item of items.controls; let index = index">
<ng-container
*ngFor="let item of items.controls; let index = index"
>
<app-shelf-edit-order-item
[orderItemForm]="item"
[onlyChild]="items.controls.length === 1"
[firstChild]="index === 0"
[vatOptions]="formService.vats$ | async"
[sscText]="
item?.get('ssc')?.value
| sscToSscText: item?.get('supplierId')?.value
| async
"
></app-shelf-edit-order-item>
</ng-container>
</div>
@@ -67,5 +100,10 @@
</div>
<div class="spacing"></div>
</div>
<app-shelf-edit-actions [disabled]="!form || !form.valid" (cancel)="onAbortEdit()" (save)="onSubmit()"> </app-shelf-edit-actions>
<app-shelf-edit-actions
[disabled]="!form || !form.valid"
(cancel)="onAbortEdit()"
(save)="onSubmit()"
>
</app-shelf-edit-actions>
</div>

1
apps/sales/src/app/modules/shelf/pipes/index.ts
View File

@@ -11,4 +11,5 @@ export * from './vat-dto-to-vat-type.pipe';
export * from './vat-dto-to-vat-value.pipe';
export * from './vat-type-to-display-name.pipe';
export * from './vat-type.pipe';
export * from './ssc-text.pipe';
// end:ng42.barrel

8
apps/sales/src/app/modules/shelf/pipes/shelf-pipes.module.ts
View File

@@ -10,8 +10,12 @@ import { VatDtoToVatValuePipe } from './vat-dto-to-vat-value.pipe';
import { VatTypeToDisplayNamePipe } from './vat-type-to-display-name.pipe';
import { VatDtoToVatTypePipe } from './vat-dto-to-vat-type.pipe';
import { VatTypePipe } from './vat-type.pipe';
import { ProcessingStatusOptionsPipe, ProcessingStatusOptionsKeyValuePipe } from './processing-status-options.pipe';
import {
ProcessingStatusOptionsPipe,
ProcessingStatusOptionsKeyValuePipe,
} from './processing-status-options.pipe';
import { TitlePipe } from './title.pipe';
import { SscToSscTextPipe } from './ssc-text.pipe';
@NgModule({
imports: [CommonModule],
@@ -28,6 +32,7 @@ import { TitlePipe } from './title.pipe';
VatTypePipe,
ProcessingStatusOptionsKeyValuePipe,
TitlePipe,
SscToSscTextPipe,
],
declarations: [
VatTypeToDisplayNamePipe,
@@ -42,6 +47,7 @@ import { TitlePipe } from './title.pipe';
VatTypePipe,
ProcessingStatusOptionsKeyValuePipe,
TitlePipe,
SscToSscTextPipe,
],
})
export class ShelfPipesModule {}

29
apps/sales/src/app/modules/shelf/pipes/ssc-text.pipe.ts Normal file
View File

@@ -0,0 +1,29 @@
import { Pipe, PipeTransform } from '@angular/core';
import { Observable, of } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ShelfEditFormService } from '../services';
@Pipe({
name: 'sscToSscText',
})
export class SscToSscTextPipe implements PipeTransform {
constructor(private readonly shelfFormService: ShelfEditFormService) {}
transform(sscCode: string, supplierId: number): Observable<string> {
if (!sscCode || !supplierId) {
return of('');
}
const sscCodes$ = this.shelfFormService.fetchSscCodes$(supplierId);
return sscCodes$.pipe(
filter((sscCodes) => !!sscCodes),
map((sscCodes) => {
const code = sscCodes.find(
(c) => !!sscCode && c.code === sscCode.trim()
);
return code ? `- ${code.supplierDescription}` : '';
})
);
}
}

84
apps/sales/src/app/modules/shelf/services/shelf-edit-form.service.ts
View File

@@ -5,8 +5,10 @@ import {
Validators,
FormArray,
AbstractControl,
ValidationErrors,
FormControl,
} from '@angular/forms';
import { Observable } from 'rxjs';
import { interval, Observable, of } from 'rxjs';
import {
OrderItemListItemDTO,
VATDTO,
@@ -16,9 +18,11 @@ import {
EnvironmentChannel,
VATType,
OrderItemSubsetDTO,
OrderService,
StockStatusCodeDTO,
} from '@swagger/oms';
import { DetailsFacade } from '@shelf-store/details';
import { take, filter } from 'rxjs/operators';
import { take, filter, map, shareReplay, switchMap } from 'rxjs/operators';
import { isNullOrUndefined } from 'util';
import { EnvironmentChannelPipe } from '../pipes/environment-channel.pipe';
import { DatePipe } from '@angular/common';
@@ -32,6 +36,7 @@ import { ActionResult } from '../../../core/models/action-result.model';
export class ShelfEditFormService {
@Select(VatState.getVats) vats$: Observable<VATDTO[]>;
forms = new Map<string, FormGroup>();
sscCodes = new Map<number, StockStatusCodeDTO[]>();
public get processingStatus(): number[] {
return Array.from(ProcessingStatusNameMap.keys());
@@ -53,7 +58,8 @@ export class ShelfEditFormService {
constructor(
private formBuilder: FormBuilder,
private detailsStoreFacade: DetailsFacade
private detailsStoreFacade: DetailsFacade,
private orderService: OrderService
) {}
public getItemsForm(compartmentCode: string): FormArray {
@@ -80,6 +86,10 @@ export class ShelfEditFormService {
};
}
public getForm(compartmentCode: string): FormGroup {
return this.forms.get(compartmentCode);
}
async createFormByOrderNumber(
orderNumber: string,
processingStatus: OrderItemProcessingStatusValue
@@ -249,11 +259,11 @@ export class ShelfEditFormService {
title: [{ value: orderItem.product.name, disabled: true }],
ssc: [
{
value: orderItem.ssc
? orderItem.ssc + ' - ' + (orderItem.sscText || '')
: '-',
value: orderItem.ssc,
disabled: false,
},
[],
[this.validateMeldenummer.bind(this, orderItem.supplierId)],
],
clientChannel: [{ value: orderItem.clientChannel, disabled: true }],
targetBranch: [{ value: orderItem.targetBranch, disabled: true }],
@@ -264,6 +274,7 @@ export class ShelfEditFormService {
},
],
comment: [{ value: orderItem.specialComment, disabled: false }],
supplierId: [{ value: orderItem.supplierId, disabled: false }],
});
}
@@ -285,10 +296,8 @@ export class ShelfEditFormService {
): OrderItemSubsetDTO & { orderItemId: number } {
const sscFull: string = ctrl.get('ssc').value;
let ssc = sscFull.split('-')[0];
let sscText = sscFull.substr(ssc.length + 1);
ssc = ssc.trim();
sscText = sscText.trim();
return {
id: Number(ctrl.get('orderItemSubsetId').value),
@@ -301,7 +310,6 @@ export class ShelfEditFormService {
: null,
specialComment: String(ctrl.get('comment').value || ''),
ssc,
sscText,
};
}
@@ -336,7 +344,6 @@ export class ShelfEditFormService {
}
}
} catch (error) {
console.log('%cSubmit Error: ', 'color: red; font-weight: bold', error);
return {
error: true,
errorReasons: error.invalidProperties || {},
@@ -411,4 +418,61 @@ export class ShelfEditFormService {
data: { processingStatus } as StatusValues,
}));
}
fetchSscCodes$(supplierId: number): Observable<StockStatusCodeDTO[]> {
const existingSscCodes = this.sscCodes.get(supplierId);
if (existingSscCodes) {
return of(existingSscCodes);
}
return interval(1000).pipe(
switchMap(() => {
if (this.sscCodes.get(supplierId)) {
return of(this.sscCodes.get(supplierId));
}
return this.orderService.OrderGetStockStatusCodes({ supplierId }).pipe(
shareReplay(),
map((response) => response.result),
map((result) => {
this.sscCodes.set(supplierId, result);
return this.sscCodes.get(supplierId);
})
);
})
);
}
validateMeldenummer(
supplierId: number,
{ value }: FormControl
): Observable<ValidationErrors | null> {
const validator = (
codes: StockStatusCodeDTO[]
): ValidationErrors | null => {
const matchingCode = codes.find(
(code) => !!value && String(code.code) === value.trim()
);
if (matchingCode) {
return null;
}
return { Meldenummer: 'Meldenummer nicht gültig' };
};
const sscCodes = this.sscCodes.get(supplierId);
if (sscCodes) {
return of(validator(sscCodes));
}
return this.fetchSscCodes$(supplierId).pipe(
map((codes) => {
if (codes) {
return validator(codes);
}
return null;
})
);
}
}

37
apps/sales/src/app/modules/ui/text-input/text-input.component.component.ts
View File

@@ -1,5 +1,16 @@
import { Component, ChangeDetectionStrategy, forwardRef, Input, ChangeDetectorRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import {
Component,
ChangeDetectionStrategy,
forwardRef,
Input,
Injector,
OnInit,
} from '@angular/core';
import {
NG_VALUE_ACCESSOR,
ControlValueAccessor,
NgControl,
} from '@angular/forms';
import { asyncScheduler } from 'rxjs';
@Component({
@@ -15,22 +26,39 @@ import { asyncScheduler } from 'rxjs';
},
],
})
export class UiTextInputComponent implements ControlValueAccessor {
export class UiTextInputComponent implements ControlValueAccessor, OnInit {
@Input() label = '';
@Input() suffix: string;
@Input() placeholder = '';
@Input() fullWidth = true;
constructor(private cdr: ChangeDetectorRef) {}
constructor(private readonly injector: Injector) {}
public value: string;
public editable = true;
public touched = false;
public focussed = false;
protected get isInvalid(): boolean {
return (
!this.ngControl.valid &&
!this.ngControl.disabled &&
!!this.ngControl.dirty
);
}
protected get errorMessage(): string {
return Object.values(this.ngControl.errors).join('| ');
}
private ngControl: NgControl;
private onChange: (value: string) => void;
private onTouched: () => void;
ngOnInit() {
this.ngControl = this.injector.get(NgControl);
}
handleInput() {
this.onChange(this.value);
}
@@ -45,7 +73,6 @@ export class UiTextInputComponent implements ControlValueAccessor {
this.touched = true;
}
this.focussed = isFocussed;
// this.cdr.detectChanges();
}
writeValue(val: string): void {

7
apps/sales/src/app/modules/ui/text-input/text-input.component.html
View File

@@ -12,9 +12,14 @@
[placeholder]="placeholder"
/>
<span class="isa-font-weight-bold suffix">{{ suffix }}</span>
<span class="error" *ngIf="isInvalid">{{ errorMessage }}</span>
</label>
<button *ngIf="editable && value?.length && touched && focussed" class="isa-input-reset-sm" (click)="reset()"></button>
<button
*ngIf="editable && value?.length && touched && focussed"
class="isa-input-reset-sm"
(click)="reset()"
></button>
<span *ngIf="!editable" class="status">Nicht Änderbar</span>
</div>

13
apps/sales/src/app/modules/ui/text-input/text-input.component.scss
View File

@@ -8,6 +8,7 @@ input {
}
label {
position: relative;
&.expand {
display: flex;
align-items: center;
@@ -20,6 +21,7 @@ label {
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
margin-right: 10px;
padding-top: 0;
&:disabled {
@@ -30,6 +32,13 @@ label {
opacity: 1;
}
}
.error {
position: absolute;
right: 0;
color: $isa-neutral-info;
font-weight: $font-weight-bold;
}
}
.status {
@@ -37,7 +46,9 @@ label {
}
.suffix {
margin-left: -30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
button {

6
apps/sales/src/app/shared/directives/input-resize.directive.ts
View File

@@ -35,7 +35,7 @@ export class InputResizeDirective implements OnChanges {
return this.renderer.setStyle(
element,
'width',
this.calculatePxFromLength(value.length)
this.calculatePxFromLength(value.replace(',', '').length)
);
}
@@ -43,7 +43,7 @@ export class InputResizeDirective implements OnChanges {
}
private calculatePxFromLength(length: number): string {
const lengthMultiplier = 16;
return String(Math.max(40, length * lengthMultiplier)) + 'px';
const lengthMultiplier = 10;
return String(Math.max(10, length * lengthMultiplier)) + 'px';
}
}