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/8] 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/8] 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 6073143ef9684576ff2b36aa62370a1ae65fdc00 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Thu, 15 Sep 2022 18:19:29 +0300
Subject: [PATCH 3/8] When all child permissions is unchecked, parent should be
 unchecked

---
 .../components/permission-management.component.ts    | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index 496b3bb989..53779cd867 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -153,15 +153,21 @@ export class PermissionManagementComponent
       this.permissions = this.permissions.map(per => {
         if (clickedPermission.name === per.name) {
           return { ...per, isGranted: !per.isGranted };
-        } else if (clickedPermission.name === per.parentName && clickedPermission.isGranted) {
-          return { ...per, isGranted: false };
+        } else if (clickedPermission.name === per.parentName) {
+          return { ...per, isGranted: !clickedPermission.isGranted };
         } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
           return { ...per, isGranted: true };
         }
 
         return per;
+      }).map((per,index,permissions) => {
+        const childrens = permissions
+          .filter(p => p.parentName === per.name);
+          if(childrens.length > 0 && childrens.every(x => !x.isGranted)){
+            return { ...per, isGranted: false };
+          }
+        return  per
       });
-
       this.setTabCheckboxState();
       this.setGrantCheckboxState();
     }, 0);

From 80772ac2c20d685981d3404006932aa2ad2d6e05 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Thu, 15 Sep 2022 19:02:58 +0300
Subject: [PATCH 4/8] add asterix for required fields on email-settins-group

---
 .../email-setting-group/email-setting-group.component.html  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
index 21d3ee1dee..2219cc4bd8 100644
--- a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
+++ b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
@@ -6,13 +6,13 @@
   <div class="mb-3 form-group">
     <label class="form-label">{{
       'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
-      }}</label>
+      }}<span class="ms-1">*</span></label>
     <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
   </div>
   <div class="mb-3 form-group">
     <label class="form-label">{{
       'AbpSettingManagement::DefaultFromAddress' | abpLocalization
-      }}</label>
+      }}<span class="ms-1">*</span></label>
     <input type="text" class="form-control" formControlName="defaultFromAddress" />
   </div>
   <div class="mb-3 form-group">
@@ -20,7 +20,7 @@
     <input type="text" class="form-control" formControlName="smtpHost" />
   </div>
   <div class="mb-3 form-group">
-    <label class="form-label">{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}</label>
+    <label class="form-label">{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}<span class="ms-1">*</span></label>
     <input type="number" class="form-control" formControlName="smtpPort" />
   </div>
 

From da893fe39139ae8cd6f0aab55a3f422d4058251d Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 16 Sep 2022 15:31:29 +0300
Subject: [PATCH 5/8] Update permission-management.component.ts

---
 .../src/lib/components/permission-management.component.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index 53779cd867..34c12bc99c 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -153,8 +153,8 @@ export class PermissionManagementComponent
       this.permissions = this.permissions.map(per => {
         if (clickedPermission.name === per.name) {
           return { ...per, isGranted: !per.isGranted };
-        } else if (clickedPermission.name === per.parentName) {
-          return { ...per, isGranted: !clickedPermission.isGranted };
+        } else if (clickedPermission.name === per.parentName && clickedPermission.isGranted) {
+          return { ...per, isGranted: false };
         } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
           return { ...per, isGranted: true };
         }
@@ -166,7 +166,7 @@ export class PermissionManagementComponent
           if(childrens.length > 0 && childrens.every(x => !x.isGranted)){
             return { ...per, isGranted: false };
           }
-        return  per
+        return per
       });
       this.setTabCheckboxState();
       this.setGrantCheckboxState();

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 6/8] 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"

From 7307b1af17a2fc75f6e972dd9d72ad98e297b530 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 16 Sep 2022 16:59:35 +0300
Subject: [PATCH 7/8] Remove UserNameRegex Validalitor

---
 .../identity/src/lib/defaults/default-users-form-props.ts   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
index 28c73b4320..232785249d 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
@@ -1,9 +1,7 @@
 import { IdentityUserDto } from '@abp/ng.identity/proxy';
 import { getPasswordValidators } from '@abp/ng.theme.shared';
 import { ePropType, FormProp } from '@abp/ng.theme.shared/extensions';
-import { Validators } from '@angular/forms'
-import { AbpValidators } from '@abp/ng.core';
-
+import { Validators } from '@angular/forms';
 
 export const DEFAULT_USERS_CREATE_FORM_PROPS = FormProp.createMany<IdentityUserDto>([
   {
@@ -11,7 +9,7 @@ export const DEFAULT_USERS_CREATE_FORM_PROPS = FormProp.createMany<IdentityUserD
     name: 'userName',
     displayName: 'AbpIdentity::UserName',
     id: 'user-name',
-    validators: () => [Validators.required, Validators.maxLength(256), AbpValidators.username()],
+    validators: () => [Validators.required, Validators.maxLength(256)],
   },
   {
     type: ePropType.Password,

From ed1b0debe9eb2262681a3e4d92869921a2e492c1 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 16 Sep 2022 18:08:15 +0300
Subject: [PATCH 8/8] fix broken className feature

---
 .../extensible-form/extensible-form-prop.component.html       | 4 ++--
 1 file changed, 2 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 c6a19c9307..9cdc06401c 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 @@
 <ng-container [ngSwitch]="getComponent(prop)"
-              [ngClass]="containerClassName"
+
               *abpPermission="prop.permission; runChangeDetection: false">
 
   <ng-template ngSwitchCase="template">
@@ -9,9 +9,9 @@
   </ng-template>
 
   <div
+    [ngClass]="containerClassName"
     class="mb-3 form-group"
   >
-
     <ng-template ngSwitchCase="input">
       <ng-template [ngTemplateOutlet]="label"></ng-template>
       <input