-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19171 from abpframework/extensible-form/visible
Remove extra element from DOM when prop is invisible
- Loading branch information
Showing
3 changed files
with
96 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
130 changes: 69 additions & 61 deletions
130
...ges/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)); | ||
| } | ||
| } |