tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #18996 from abpframework/auto-merge/prerel-8-1/2481 

Merge branch dev with prerel-8.1
pull/19027/head
maliming 3 years ago
committed by GitHub
parent
6a898e4a47 cbc2a5b7b8
commit
f2937be3db
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
2 changed files with 63 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
  2. 50
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html

66
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
View File

@ -1,5 +1,11 @@
import {EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA} from './../../tokens/extensions.token'; import { EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA } from './../../tokens/extensions.token';
import {ABP, LocalizationModule, PermissionDirective, ShowPasswordDirective, TrackByService} from '@abp/ng.core'; import {
ABP,
LocalizationModule,
PermissionDirective,
ShowPasswordDirective,
TrackByService,
} from '@abp/ng.core';
import { import {
AfterViewInit, AfterViewInit,
ChangeDetectionStrategy, ChangeDetectionStrategy,
@ -18,6 +24,7 @@ import {
import { import {
ControlContainer, ControlContainer,
FormGroupDirective, FormGroupDirective,
FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
ValidatorFn, ValidatorFn,
} from '@angular/forms'; } from '@angular/forms';
@ -28,20 +35,20 @@ import {
NgbTimepickerModule, NgbTimepickerModule,
NgbTypeaheadModule, NgbTypeaheadModule,
} from '@ng-bootstrap/ng-bootstrap'; } from '@ng-bootstrap/ng-bootstrap';
import {Observable, of} from 'rxjs'; import { Observable, of } from 'rxjs';
import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import {DateAdapter, DisabledDirective, TimeAdapter} from '@abp/ng.theme.shared'; import { DateAdapter, DisabledDirective, TimeAdapter } from '@abp/ng.theme.shared';
import {EXTRA_PROPERTIES_KEY} from '../../constants/extra-properties'; import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
import {FormProp} from '../../models/form-props'; import { FormProp } from '../../models/form-props';
import {PropData} from '../../models/props'; import { PropData } from '../../models/props';
import {selfFactory} from '../../utils/factory.util'; import { selfFactory } from '../../utils/factory.util';
import {addTypeaheadTextSuffix} from '../../utils/typeahead.util'; import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
import {eExtensibleComponents} from '../../enums/components'; import { eExtensibleComponents } from '../../enums/components';
import {ExtensibleDateTimePickerComponent} from '../date-time-picker/extensible-date-time-picker.component'; import { ExtensibleDateTimePickerComponent } from '../date-time-picker/extensible-date-time-picker.component';
import {NgxValidateCoreModule} from '@ngx-validate/core'; import { NgxValidateCoreModule } from '@ngx-validate/core';
import {ExtensibleFormPropService} from '../../services/extensible-form-prop.service'; import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
import {CreateInjectorPipe} from '../../pipes/create-injector.pipe'; import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
import { CommonModule} from '@angular/common'; import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'abp-extensible-form-prop', selector: 'abp-extensible-form-prop',
@ -60,6 +67,7 @@ import { CommonModule} from '@angular/common';
PermissionDirective, PermissionDirective,
LocalizationModule, LocalizationModule,
CommonModule, CommonModule,
FormsModule,
], ],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ExtensibleFormPropService], providers: [ExtensibleFormPropService],
@ -69,8 +77,8 @@ import { CommonModule} from '@angular/common';
useFactory: selfFactory, useFactory: selfFactory,
deps: [[new Optional(), new SkipSelf(), ControlContainer]], deps: [[new Optional(), new SkipSelf(), ControlContainer]],
}, },
{provide: NgbDateAdapter, useClass: DateAdapter}, { provide: NgbDateAdapter, useClass: DateAdapter },
{provide: NgbTimeAdapter, useClass: TimeAdapter}, { provide: NgbTimeAdapter, useClass: TimeAdapter },
], ],
}) })
export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit { export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
@ -103,8 +111,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
} }
setTypeaheadValue(selectedOption: ABP.Option<string>) { setTypeaheadValue(selectedOption: ABP.Option<string>) {
this.typeaheadModel = selectedOption || {key: null, value: null}; this.typeaheadModel = selectedOption || { key: null, value: null };
const {key, value} = this.typeaheadModel; const { key, value } = this.typeaheadModel;
const [keyControl, valueControl] = this.getTypeaheadControls(); const [keyControl, valueControl] = this.getTypeaheadControls();
if (valueControl?.value && !value) valueControl.markAsDirty(); if (valueControl?.value && !value) valueControl.markAsDirty();
keyControl?.setValue(key); keyControl?.setValue(key);
@ -114,10 +122,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
search = (text$: Observable<string>) => search = (text$: Observable<string>) =>
text$ text$
? text$.pipe( ? text$.pipe(
debounceTime(300), debounceTime(300),
distinctUntilChanged(), distinctUntilChanged(),
switchMap(text => this.prop?.options?.(this.data, text) || of([])), switchMap(text => this.prop?.options?.(this.data, text) || of([])),
) )
: of([]); : of([]);
typeaheadFormatter = (option: ABP.Option<any>) => option.key; typeaheadFormatter = (option: ABP.Option<any>) => option.key;
@ -130,7 +138,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
} }
private getTypeaheadControls() { private getTypeaheadControls() {
const {name} = this.prop; const { name } = this.prop;
const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`; const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
const keyControl = const keyControl =
this.form.get(addTypeaheadTextSuffix(extraPropName)) || this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
@ -158,9 +166,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
return this.service.getType(prop); return this.service.getType(prop);
} }
ngOnChanges({prop, data}: SimpleChanges) { ngOnChanges({ prop, data }: SimpleChanges) {
const currentProp = prop?.currentValue as FormProp; const currentProp = prop?.currentValue as FormProp;
const {options, readonly, disabled, validators, className, template} = currentProp || {}; const { options, readonly, disabled, validators, className, template } = currentProp || {};
if (template) { if (template) {
this.injectorForCustomComponent = Injector.create({ this.injectorForCustomComponent = Injector.create({
providers: [ providers: [
@ -172,7 +180,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
provide: EXTENSIONS_FORM_PROP_DATA, provide: EXTENSIONS_FORM_PROP_DATA,
useValue: (data?.currentValue as PropData)?.record, useValue: (data?.currentValue as PropData)?.record,
}, },
{provide: ControlContainer, useExisting: FormGroupDirective}, { provide: ControlContainer, useExisting: FormGroupDirective },
], ],
parent: this.injector, parent: this.injector,
}); });
@ -194,6 +202,6 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
const [keyControl, valueControl] = this.getTypeaheadControls(); const [keyControl, valueControl] = this.getTypeaheadControls();
if (keyControl && valueControl) if (keyControl && valueControl)
this.typeaheadModel = {key: keyControl.value, value: valueControl.value}; this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
} }
} }

50
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
View File

@ -1,33 +1,35 @@
<ng-container *ngIf="form"> @if (form) {
@for (groupedProp of groupedPropList.items; track $index) {
<ng-container *ngFor="let groupedProp of groupedPropList.items">
<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record"> <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
@if(groupedProp.group?.className) {
<div *ngIf="groupedProp.group?.className; else withoutClassName" <div [ngClass]="groupedProp.group?.className"
[class]="groupedProp.group?.className" [attr.data-name]="groupedProp.group?.className"> [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
<ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}"> >
</ng-container> <ng-container
</div> [ngTemplateOutlet]="propListTemplate"
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
<ng-template #withoutClassName> >
<ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}"> </ng-container>
</ng-container> </div>
</ng-template> } @else {
<ng-container
[ngTemplateOutlet]="propListTemplate"
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
>
</ng-container>
}
</ng-container> </ng-container>
}
</ng-container> }
</ng-container>
<ng-template let-groupedProp="groupedProp" let-data="data" #propListTemplate> <ng-template let-groupedProp="groupedProp" let-data="data" #propListTemplate>
<ng-container *ngFor="let prop of groupedProp.formPropList; let first = first; trackBy: track.by('name')"> @for (prop of groupedProp.formPropList; let first = $first; track prop.name) {
<ng-container *ngIf="prop.visible(data)"> @if(prop.visible(data)) {
<ng-container <ng-container
[formGroupName]="extraPropertiesKey" [formGroupName]="extraPropertiesKey"
*ngIf="extraProperties.controls[prop.name]; else tempDefault" *ngIf="extraProperties.controls[prop.name]; else tempDefault"
> >
<abp-extensible-form-prop [prop]="prop" [data]="data" <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className">
[class]="prop.className">
</abp-extensible-form-prop> </abp-extensible-form-prop>
</ng-container> </ng-container>
@ -40,6 +42,6 @@
[first]="first" [first]="first"
></abp-extensible-form-prop> ></abp-extensible-form-prop>
</ng-template> </ng-template>
</ng-container> }
</ng-container> }
</ng-template> </ng-template>

Write Preview
Loading…
Cancel
Save