From 0368c951f26bb980f7d7c95929658bd44c9bbbcb Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 26 Aug 2022 17:31:37 +0300
Subject: [PATCH 1/3] Add grouping ability to extensible-form.component.html

---
 .../extensible-form.component.html            | 53 +++++++++++++------
 .../extensible-form.component.ts              | 15 ++++--
 .../extensions/src/lib/models/form-props.ts   | 30 +++++++++++
 3 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
index 259538820b..82d438b7cc 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
+++ b/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>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
index 17131e9aaf..4e95039889 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/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;
   }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
index 44b309d0c2..9973974ab6 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
+++ b/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 || (_ => []);

From 4e2150ea1cd7a0aecf0fb640bc628b102c9ab5a0 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 26 Aug 2022 18:21:07 +0300
Subject: [PATCH 2/3] Add Container Class override ability on
 extensible-form-prop.component

---
 .../extensible-form/extensible-form-prop.component.html    | 2 +-
 .../extensible-form/extensible-form-prop.component.ts      | 7 ++++++-
 .../theme-shared/extensions/src/lib/models/form-props.ts   | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index 4367bd098a..005993e3c8 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -1,5 +1,5 @@
 <div
-  class="mb-3 form-group"
+  [ngClass]="containerClassName"
   *abpPermission="prop.permission; runChangeDetection: false"
   [ngSwitch]="getComponent(prop)"
 >
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index fa679d3dbd..4af5751d54 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -55,6 +55,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
   asterisk = '';
+  
+  containerClassName = 'mb-3 form-group'
 
   options$: Observable<ABP.Option<any>[]> = of([]);
 
@@ -175,7 +177,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   ngOnChanges({ prop }: SimpleChanges) {
     const currentProp = prop?.currentValue;
-    const { options, readonly, disabled, validators } = currentProp || {};
+    const { options, readonly, disabled, validators , className } = currentProp || {};
 
     if (options) this.options$ = options(this.data);
     if (readonly) this.readonly = readonly(this.data);
@@ -187,6 +189,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
       this.validators = validators(this.data);
       this.setAsterisk();
     }
+    if(className !== undefined){
+      this.containerClassName = className;
+    }
 
     const [keyControl, valueControl] = this.getTypeaheadControls();
     if (keyControl && valueControl)
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
index 9973974ab6..8506bdcf4d 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
@@ -67,6 +67,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly options: PropCallback<R, Observable<ABP.Option<any>[]>> | undefined;
   readonly id: string | undefined;
   readonly group?: FormPropGroup | undefined;
+  readonly className?: string;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -78,6 +79,7 @@ export class FormProp<R = any> extends Prop<R> {
       options.isExtra,
     );
     this.group = options.group;
+    this.className = options.className;
 
     this.asyncValidators = options.asyncValidators || (_ => []);
     this.validators = options.validators || (_ => []);

From 6f71053b6e1ac081f98bab5185bd2f7c8411a5ce Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 16 Sep 2022 15:34:07 +0300
Subject: [PATCH 3/3] Change variable name

---
 .../extensible-form.component.html               | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
index f8d6d3c445..c0cdcbea6d 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
@@ -1,16 +1,16 @@
 <ng-container *ngIf="form">
 
-  <ng-container *ngFor="let g of groupedPropList.items">
-    <ng-container *abpPropData="let data; fromList: g.formPropList; withRecord: record">
+  <ng-container *ngFor="let groupedProp of groupedPropList.items">
+    <ng-container *abpPropData="let data; fromList: groupedProp.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}">
+      <div *ngIf="groupedProp.group?.className; else withoutClassName"
+           [class]="groupedProp.group?.className" [attr.data-name]="groupedProp.group?.className">
+        <ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}">
         </ng-container>
       </div>
 
       <ng-template #withoutClassName>
-        <ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{g:g,data:data}">
+        <ng-container [ngTemplateOutlet]="propListTemplate" [ngTemplateOutletContext]="{groupedProp:groupedProp,data:data}">
         </ng-container>
       </ng-template>
     </ng-container>
@@ -19,8 +19,8 @@
 </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-template let-groupedProp="groupedProp" let-data="data" #propListTemplate>
+  <ng-container *ngFor="let prop of groupedProp.formPropList; let first = first; trackBy: track.by('name')">
     <ng-container *ngIf="prop.visible(data)">
       <ng-container
         [formGroupName]="extraPropertiesKey"