Add grouping ability to extensible-form.component.html

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html

@@ -1,23 +1,42 @@
 <ng-container *ngIf="form">
-  <ng-container *abpPropData="let data; fromList: propList; withRecord: record">
-    <ng-container *ngFor="let prop of propList; let first = first; trackBy: track.by('name')">
-      <ng-container *ngIf="prop.visible(data)">
-        <ng-container
-          [formGroupName]="extraPropertiesKey"
-          *ngIf="extraProperties.controls[prop.name]; else tempDefault"
-        >
-          <abp-extensible-form-prop [prop]="prop" [data]="data"></abp-extensible-form-prop>
+
+  <ng-container *ngFor="let g of groupedPropList.items">
+    <ng-container *abpPropData="let data; fromList: g.formPropList; withRecord: record">
+
+      <div *ngIf="g.group?.className; else withoutClassName"
+           [class]="g.group?.className" [attr.data-name]="g.group?.className">
+        <ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{g:g,data:data}">
         </ng-container>
+      </div>
 
-        <ng-template #tempDefault>
-          <abp-extensible-form-prop
-            *ngIf="form.get(prop.name)"
-            [prop]="prop"
-            [data]="data"
-            [first]="first"
-          ></abp-extensible-form-prop>
-        </ng-template>
-      </ng-container>
+      <ng-template #withoutClassName>
+        <ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{g:g,data:data}">
+        </ng-container>
+      </ng-template>
     </ng-container>
+
   </ng-container>
 </ng-container>
+
+
+<ng-template let-g="g" let-data="data" #propListTemplate>
+  <ng-container *ngFor="let prop of g.formPropList; let first = first; trackBy: track.by('name')">
+    <ng-container *ngIf="prop.visible(data)">
+      <ng-container
+        [formGroupName]="extraPropertiesKey"
+        *ngIf="extraProperties.controls[prop.name]; else tempDefault"
+      >
+        <abp-extensible-form-prop [prop]="prop" [data]="data"></abp-extensible-form-prop>
+      </ng-container>
+
+      <ng-template #tempDefault>
+        <abp-extensible-form-prop
+          *ngIf="form.get(prop.name)"
+          [prop]="prop"
+          [data]="data"
+          [first]="first"
+        ></abp-extensible-form-prop>
+      </ng-template>
+    </ng-container>
+  </ng-container>
+</ng-template>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts

@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 import { ControlContainer, FormGroup } from '@angular/forms';
 import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
-import { FormPropList } from '../../models/form-props';
+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';
@@ -38,14 +38,23 @@ export class ExtensibleFormComponent<R = any> {
   @Input()
   set selectedRecord(record: R) {
     const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
-    this.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.record = record;
   }
 
   extraPropertiesKey = EXTRA_PROPERTIES_KEY;
-  propList!: FormPropList<R>;
+  groupedPropList: GroupedFormPropList;
   record!: R;
 
+  createGroupedList(propList: FormPropList<R>) {
+    const groupedFormPropList = new GroupedFormPropList();
+    propList.forEach(item => {
+      groupedFormPropList.addItem(item.value);
+    });
+    return groupedFormPropList;
+  }
+
   get form(): FormGroup {
     return (this.container ? this.container.control : { controls: {} }) as FormGroup;
   }

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts

@@ -21,6 +21,34 @@ export class FormProps<R = any> extends Props<FormPropList<R>> {
   protected _ctor: Type<FormPropList<R>> = FormPropList;
 }
 
+export interface FormPropGroup {
+  name: string;
+  className?: string;
+}
+
+export class GroupedFormPropList<R = any> {
+  public readonly items: GroupedFormPropItem[] = [];
+  addItem(item: FormProp<R>) {
+    const groupName = item.group?.name;
+    let group = this.items.find(i => i.group?.name === groupName);
+    if (group) {
+      group.formPropList.addTail(item);
+    } else {
+      group = {
+        formPropList: new FormPropList(),
+        group: item.group,
+      };
+      group.formPropList.addHead(item);
+      this.items.push(group);
+    }
+  }
+}
+
+export interface GroupedFormPropItem {
+  group: FormPropGroup;
+  formPropList: FormPropList;
+}
+
 export class CreateFormPropsFactory<R = any> extends PropsFactory<FormProps<R>> {
   protected _ctor: Type<FormProps<R>> = FormProps;
 }
@@ -38,6 +66,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly defaultValue: boolean | number | string | Date;
   readonly options: PropCallback<R, Observable<ABP.Option<any>[]>> | undefined;
   readonly id: string | undefined;
+  readonly group?: FormPropGroup | undefined;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -48,6 +77,7 @@ export class FormProp<R = any> extends Prop<R> {
       options.visible,
       options.isExtra,
     );
+    this.group = options.group;
 
     this.asyncValidators = options.asyncValidators || (_ => []);
     this.validators = options.validators || (_ => []);