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 #19179 from abpframework/auto-merge/rel-8-1/2550 

Merge branch dev with rel-8.1
pull/19180/head
maliming 2 years ago
committed by GitHub
parent
a1e09aaa21 496462e9c6
commit
8264c47341
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
3 changed files with 96 additions and 90 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. 2
      npm/ng-packs/package.json
  2. 54
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
  3. 130
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts

2
npm/ng-packs/package.json
View File

@ -44,7 +44,7 @@
},
"private": true,
"devDependencies": {
"@abp/ng.theme.lepton-x": "~3.0.4",
"@abp/ng.theme.lepton-x": "~3.1.0-rc.2",
"@abp/utils": "~8.1.0-rc.2",
"@angular-devkit/build-angular": "~17.1.0",
"@angular-devkit/core": "~17.1.0",

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

@ -1,9 +1,10 @@
@if (form) {
@for (groupedProp of groupedPropList.items; track $index) {
@for (groupedProp of groupedPropList.items; track i; let i = $index) {
<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
@if(groupedProp.group?.className) {
<div [ngClass]="groupedProp.group?.className"
[attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
@if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
<div
[ngClass]="groupedProp.group?.className"
[attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
>
<ng-container
[ngTemplateOutlet]="propListTemplate"
@ -12,36 +13,33 @@
</ng-container>
</div>
} @else {
<ng-container
[ngTemplateOutlet]="propListTemplate"
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
>
</ng-container>
<ng-container
[ngTemplateOutlet]="propListTemplate"
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
>
</ng-container>
}
</ng-container>
}
}
}
<ng-template let-groupedProp="groupedProp" let-data="data" #propListTemplate>
@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>
</ng-container>
<ng-template #tempDefault>
<abp-extensible-form-prop
[class]="prop.className"
*ngIf="form.get(prop.name)"
[prop]="prop"
[data]="data"
[first]="first"
></abp-extensible-form-prop>
</ng-template>
@if (prop.visible(data)) {
@if (extraProperties.controls[prop.name]) {
<ng-container [formGroupName]="extraPropertiesKey">
<abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" />
</ng-container>
} @else {
@if (form.get(prop.name)) {
<abp-extensible-form-prop
[class]="prop.className"
[prop]="prop"
[data]="data"
[first]="first"
/>
}
}
}
}
</ng-template>

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

@ -1,76 +1,84 @@
import {TrackByService} from '@abp/ng.core';
import { TrackByService } from '@abp/ng.core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component, inject,
Input,
Optional,
QueryList,
SkipSelf,
ViewChildren,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
inject,
Input,
Optional,
QueryList,
SkipSelf,
ViewChildren,
} from '@angular/core';
import {ControlContainer, ReactiveFormsModule, UntypedFormGroup} from '@angular/forms';
import {EXTRA_PROPERTIES_KEY} from '../../constants/extra-properties';
import {FormPropList, GroupedFormPropList} from '../../models/form-props';
import {ExtensionsService} from '../../services/extensions.service';
import {EXTENSIONS_IDENTIFIER} from '../../tokens/extensions.token';
import {selfFactory} from '../../utils/factory.util';
import {ExtensibleFormPropComponent} from './extensible-form-prop.component';
import {CommonModule} from "@angular/common";
import {PropDataDirective} from "../../directives/prop-data.directive";
import { ControlContainer, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
import { FormProp, FormPropList, GroupedFormPropList } from '../../models/form-props';
import { ExtensionsService } from '../../services/extensions.service';
import { EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
import { selfFactory } from '../../utils/factory.util';
import { ExtensibleFormPropComponent } from './extensible-form-prop.component';
import { CommonModule } from '@angular/common';
import { PropDataDirective } from '../../directives/prop-data.directive';
@Component({
exportAs: 'abpExtensibleForm',
selector: 'abp-extensible-form',
templateUrl: './extensible-form.component.html',
standalone:true,
imports:[CommonModule, PropDataDirective,ReactiveFormsModule,ExtensibleFormPropComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
viewProviders: [
{
provide: ControlContainer,
useFactory: selfFactory,
deps: [[new Optional(), new SkipSelf(), ControlContainer]],
},
],
standalone: true,
exportAs: 'abpExtensibleForm',
selector: 'abp-extensible-form',
templateUrl: './extensible-form.component.html',
imports: [CommonModule, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
viewProviders: [
{
provide: ControlContainer,
useFactory: selfFactory,
deps: [[new Optional(), new SkipSelf(), ControlContainer]],
},
],
})
export class ExtensibleFormComponent<R = any> {
public readonly cdRef = inject(ChangeDetectorRef);
public readonly track = inject(TrackByService);
private readonly container = inject(ControlContainer);
private readonly extensions = inject(ExtensionsService);
private readonly identifier = inject(EXTENSIONS_IDENTIFIER);
@ViewChildren(ExtensibleFormPropComponent)
formProps!: QueryList<ExtensibleFormPropComponent>;
@ViewChildren(ExtensibleFormPropComponent)
formProps!: QueryList<ExtensibleFormPropComponent>;
@Input()
set selectedRecord(record: R) {
const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
this.groupedPropList = this.createGroupedList(propList);
this.record = record;
}
@Input()
set selectedRecord(record: R) {
const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
this.groupedPropList = this.createGroupedList(propList);
this.record = record;
}
extraPropertiesKey = EXTRA_PROPERTIES_KEY;
groupedPropList!: GroupedFormPropList;
record!: R;
extraPropertiesKey = EXTRA_PROPERTIES_KEY;
groupedPropList!: GroupedFormPropList;
groupedPropListOfArray: FormProp<any>[][];
record!: R;
public readonly cdRef = inject(ChangeDetectorRef)
public readonly track = inject(TrackByService)
private container = inject(ControlContainer)
private extensions = inject(ExtensionsService);
private identifier = inject(EXTENSIONS_IDENTIFIER)
get form(): UntypedFormGroup {
return (this.container ? this.container.control : { controls: {} }) as UntypedFormGroup;
}
createGroupedList(propList: FormPropList<R>) {
const groupedFormPropList = new GroupedFormPropList();
propList.forEach(item => {
groupedFormPropList.addItem(item.value);
});
return groupedFormPropList;
}
get extraProperties(): UntypedFormGroup {
return (this.form.controls.extraProperties || { controls: {} }) as UntypedFormGroup;
}
get form(): UntypedFormGroup {
return (this.container ? this.container.control : {controls: {}}) as UntypedFormGroup;
}
createGroupedList(propList: FormPropList<R>) {
const groupedFormPropList = new GroupedFormPropList();
propList.forEach(item => {
groupedFormPropList.addItem(item.value);
});
get extraProperties(): UntypedFormGroup {
return (this.form.controls.extraProperties || {controls: {}}) as UntypedFormGroup;
}
return groupedFormPropList;
}
//TODO: Reactor this method
isAnyGroupMemberVisible(index: number, data) {
const { items } = this.groupedPropList;
const formPropList = items[index].formPropList.toArray();
return formPropList.some(prop => prop.visible(data));
}
}

Write Preview
Loading…
Cancel
Save