From 61c7612395db5e2b7a68f381abc0256b1035ac24 Mon Sep 17 00:00:00 2001 From: masumulu28 Date: Fri, 1 Mar 2024 09:14:20 +0300 Subject: [PATCH] Refactor extensible-form component --- npm/ng-packs/package.json | 2 +- .../extensible-form.component.html | 54 ++++--- .../extensible-form.component.ts | 136 +++++++++--------- 3 files changed, 96 insertions(+), 96 deletions(-) diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json index afaf4dafb1..6b46fa897a 100644 --- a/npm/ng-packs/package.json +++ b/npm/ng-packs/package.json @@ -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", diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html index 53f5f8dd96..4b47e8fbb1 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html @@ -1,9 +1,10 @@ @if (form) { - @for (groupedProp of groupedPropList.items; track $index) { + @for (groupedProp of groupedPropList.items; track i; let i = $index) { - @if(isAnyGroupMemberVisible($index, data) && groupedProp.group?.className){ -
} @else { - - + + } - } + } } @for (prop of groupedProp.formPropList; let first = $first; track prop.name) { - @if(prop.visible(data)) { - - - - - - - - + @if (prop.visible(data)) { + @if (extraProperties.controls[prop.name]) { + + + + } @else { + @if (form.get(prop.name)) { + + } + } } } diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts index 46e7d1ea53..455f8cdd99 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts @@ -1,82 +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 {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"; +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 { + 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; + @ViewChildren(ExtensibleFormPropComponent) + formProps!: QueryList; - @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; - groupedPropListOfArray: FormProp[][]; - record!: R; + extraPropertiesKey = EXTRA_PROPERTIES_KEY; + groupedPropList!: GroupedFormPropList; + groupedPropListOfArray: FormProp[][]; + 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) { - const groupedFormPropList = new GroupedFormPropList(); - propList.forEach(item => { - groupedFormPropList.addItem(item.value); - }); - return groupedFormPropList; - } + get extraProperties(): UntypedFormGroup { + return (this.form.controls.extraProperties || { controls: {} }) as UntypedFormGroup; + } - isAnyGroupMemberVisible(index: number, data){ - const isVisible = this.groupedPropList.items.map(i => i.formPropList.toArray())[index].find(prop => prop.visible(data)); - return isVisible; - } + createGroupedList(propList: FormPropList) { + const groupedFormPropList = new GroupedFormPropList(); + propList.forEach(item => { + groupedFormPropList.addItem(item.value); + }); - get form(): UntypedFormGroup { - return (this.container ? this.container.control : {controls: {}}) as UntypedFormGroup; - } - - 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)); + } }