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

Refactor extensible-form component

pull/19171/head
masumulu28 3 years ago
parent
36588122e0
commit
61c7612395
3 changed files with 96 additions and 96 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. 2
      npm/ng-packs/package.json
  2. 54
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
  3. 136
      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, "private": true,
"devDependencies": { "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", "@abp/utils": "~8.1.0-rc.2",
"@angular-devkit/build-angular": "~17.1.0", "@angular-devkit/build-angular": "~17.1.0",
"@angular-devkit/core": "~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) { @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"> <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
@if(isAnyGroupMemberVisible($index, data) && groupedProp.group?.className){ @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
<div [ngClass]="groupedProp.group?.className" <div
[attr.data-name]="groupedProp.group?.name || groupedProp.group?.className" [ngClass]="groupedProp.group?.className"
[attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
> >
<ng-container <ng-container
[ngTemplateOutlet]="propListTemplate" [ngTemplateOutlet]="propListTemplate"
@ -12,36 +13,33 @@
</ng-container> </ng-container>
</div> </div>
} @else { } @else {
<ng-container <ng-container
[ngTemplateOutlet]="propListTemplate" [ngTemplateOutlet]="propListTemplate"
[ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }" [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data }"
> >
</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>
@for (prop of groupedProp.formPropList; let first = $first; track prop.name) { @for (prop of groupedProp.formPropList; let first = $first; track prop.name) {
@if(prop.visible(data)) { @if (prop.visible(data)) {
<ng-container @if (extraProperties.controls[prop.name]) {
[formGroupName]="extraPropertiesKey" <ng-container [formGroupName]="extraPropertiesKey">
*ngIf="extraProperties.controls[prop.name]; else tempDefault" <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" />
> </ng-container>
<abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className"> } @else {
</abp-extensible-form-prop> @if (form.get(prop.name)) {
</ng-container> <abp-extensible-form-prop
[class]="prop.className"
<ng-template #tempDefault> [prop]="prop"
<abp-extensible-form-prop [data]="data"
[class]="prop.className" [first]="first"
*ngIf="form.get(prop.name)" />
[prop]="prop" }
[data]="data" }
[first]="first"
></abp-extensible-form-prop>
</ng-template>
} }
} }
</ng-template> </ng-template>

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

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