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 #18995 from abpframework/auto-merge/rel-8-0/2480 

Merge branch prerel-8.1 with rel-8.0
pull/18996/head
maliming 2 years ago
committed by GitHub
parent
97f434a3c0 2ce2913b02
commit
cbc2a5b7b8
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
Split 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 {ABP, LocalizationModule, PermissionDirective, ShowPasswordDirective, TrackByService} from '@abp/ng.core';
import { EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA } from './../../tokens/extensions.token';
import {
ABP,
LocalizationModule,
PermissionDirective,
ShowPasswordDirective,
TrackByService,
} from '@abp/ng.core';
import {
AfterViewInit,
ChangeDetectionStrategy,
@ -18,6 +24,7 @@ import {
import {
ControlContainer,
FormGroupDirective,
FormsModule,
ReactiveFormsModule,
ValidatorFn,
} from '@angular/forms';
@ -28,20 +35,20 @@ import {
NgbTimepickerModule,
NgbTypeaheadModule,
} from '@ng-bootstrap/ng-bootstrap';
import {Observable, of} from 'rxjs';
import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {DateAdapter, DisabledDirective, TimeAdapter} from '@abp/ng.theme.shared';
import {EXTRA_PROPERTIES_KEY} from '../../constants/extra-properties';
import {FormProp} from '../../models/form-props';
import {PropData} from '../../models/props';
import {selfFactory} from '../../utils/factory.util';
import {addTypeaheadTextSuffix} from '../../utils/typeahead.util';
import {eExtensibleComponents} from '../../enums/components';
import {ExtensibleDateTimePickerComponent} from '../date-time-picker/extensible-date-time-picker.component';
import {NgxValidateCoreModule} from '@ngx-validate/core';
import {ExtensibleFormPropService} from '../../services/extensible-form-prop.service';
import {CreateInjectorPipe} from '../../pipes/create-injector.pipe';
import { CommonModule} from '@angular/common';
import { Observable, of } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { DateAdapter, DisabledDirective, TimeAdapter } from '@abp/ng.theme.shared';
import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
import { FormProp } from '../../models/form-props';
import { PropData } from '../../models/props';
import { selfFactory } from '../../utils/factory.util';
import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
import { eExtensibleComponents } from '../../enums/components';
import { ExtensibleDateTimePickerComponent } from '../date-time-picker/extensible-date-time-picker.component';
import { NgxValidateCoreModule } from '@ngx-validate/core';
import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service';
import { CreateInjectorPipe } from '../../pipes/create-injector.pipe';
import { CommonModule } from '@angular/common';
@Component({
selector: 'abp-extensible-form-prop',
@ -60,6 +67,7 @@ import { CommonModule} from '@angular/common';
PermissionDirective,
LocalizationModule,
CommonModule,
FormsModule,
],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ExtensibleFormPropService],
@ -69,8 +77,8 @@ import { CommonModule} from '@angular/common';
useFactory: selfFactory,
deps: [[new Optional(), new SkipSelf(), ControlContainer]],
},
{provide: NgbDateAdapter, useClass: DateAdapter},
{provide: NgbTimeAdapter, useClass: TimeAdapter},
{ provide: NgbDateAdapter, useClass: DateAdapter },
{ provide: NgbTimeAdapter, useClass: TimeAdapter },
],
})
export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
@ -103,8 +111,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
}
setTypeaheadValue(selectedOption: ABP.Option<string>) {
this.typeaheadModel = selectedOption || {key: null, value: null};
const {key, value} = this.typeaheadModel;
this.typeaheadModel = selectedOption || { key: null, value: null };
const { key, value } = this.typeaheadModel;
const [keyControl, valueControl] = this.getTypeaheadControls();
if (valueControl?.value && !value) valueControl.markAsDirty();
keyControl?.setValue(key);
@ -114,10 +122,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
search = (text$: Observable<string>) =>
text$
? text$.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(text => this.prop?.options?.(this.data, text) || of([])),
)
debounceTime(300),
distinctUntilChanged(),
switchMap(text => this.prop?.options?.(this.data, text) || of([])),
)
: of([]);
typeaheadFormatter = (option: ABP.Option<any>) => option.key;
@ -130,7 +138,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
}
private getTypeaheadControls() {
const {name} = this.prop;
const { name } = this.prop;
const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
const keyControl =
this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
@ -158,9 +166,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
return this.service.getType(prop);
}
ngOnChanges({prop, data}: SimpleChanges) {
ngOnChanges({ prop, data }: SimpleChanges) {
const currentProp = prop?.currentValue as FormProp;
const {options, readonly, disabled, validators, className, template} = currentProp || {};
const { options, readonly, disabled, validators, className, template } = currentProp || {};
if (template) {
this.injectorForCustomComponent = Injector.create({
providers: [
@ -172,7 +180,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
provide: EXTENSIONS_FORM_PROP_DATA,
useValue: (data?.currentValue as PropData)?.record,
},
{provide: ControlContainer, useExisting: FormGroupDirective},
{ provide: ControlContainer, useExisting: FormGroupDirective },
],
parent: this.injector,
});
@ -194,6 +202,6 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
const [keyControl, valueControl] = this.getTypeaheadControls();
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">
<ng-container *ngFor="let groupedProp of groupedPropList.items">
@if (form) {
@for (groupedProp of groupedPropList.items; track $index) {
<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
<div *ngIf="groupedProp.group?.className; else withoutClassName"
[class]="groupedProp.group?.className" [attr.data-name]="groupedProp.group?.className">
<ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}">
</ng-container>
</div>
<ng-template #withoutClassName>
<ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}">
</ng-container>
</ng-template>
@if(groupedProp.group?.className) {
<div [ngClass]="groupedProp.group?.className"
[attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
>
<ng-container
[ngTemplateOutlet]="propListTemplate"
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
>
</ng-container>
</div>
} @else {
<ng-container
[ngTemplateOutlet]="propListTemplate"
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
>
</ng-container>
}
</ng-container>
</ng-container>
</ng-container>
}
}
<ng-template let-groupedProp="groupedProp" let-data="data" #propListTemplate>
<ng-container *ngFor="let prop of groupedProp.formPropList; let first = first; trackBy: track.by('name')">
<ng-container *ngIf="prop.visible(data)">
@for (prop of groupedProp.formPropList; let first = $first; track prop.name) {
@if(prop.visible(data)) {
<ng-container
[formGroupName]="extraPropertiesKey"
*ngIf="extraProperties.controls[prop.name]; else tempDefault"
>
<abp-extensible-form-prop [prop]="prop" [data]="data"
[class]="prop.className">
<abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className">
</abp-extensible-form-prop>
</ng-container>
@ -40,6 +42,6 @@
[first]="first"
></abp-extensible-form-prop>
</ng-template>
</ng-container>
</ng-container>
}
}
</ng-template>

Write Preview
Loading…
Cancel
Save