Merge pull request #14054 from abpframework/auto-merge/rel-6-0/1353

Merge branch dev with rel-6.0

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,

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -160,8 +160,14 @@ export class PermissionManagementComponent
         }
 
         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);

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>
 

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

@@ -1,4 +1,5 @@
 <ng-container [ngSwitch]="getComponent(prop)"
+
               *abpPermission="prop.permission; runChangeDetection: false">
 
   <ng-template ngSwitchCase="template">
@@ -8,9 +9,9 @@
   </ng-template>
 
   <div
+    [ngClass]="containerClassName"
     class="mb-3 form-group"
   >
-
     <ng-template ngSwitchCase="input">
       <ng-template [ngTemplateOutlet]="label"></ng-template>
       <input

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

@@ -60,6 +60,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   asterisk = '';
 
+  containerClassName = 'mb-3 form-group'
+
   options$: Observable<ABP.Option<any>[]> = of([]);
 
   validators: ValidatorFn[] = [];
@@ -183,7 +185,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   ngOnChanges({ prop, data }: SimpleChanges) {
     const currentProp = prop?.currentValue as FormProp;
-    const { options, readonly, disabled, validators, template } = currentProp || {};
+    const { options, readonly, disabled, validators, className, template } = currentProp || {};
     if (template) {
       this.injectorForCustomComponent = Injector.create({
         providers: [
@@ -211,6 +213,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)

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

@@ -1,23 +1,45 @@
 <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 [class]="prop.className" [prop]="prop" [data]="data"></abp-extensible-form-prop>
+
+  <ng-container *ngFor="let groupedProp of groupedPropList.items">
+    <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
+
+      <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 #tempDefault>
-          <abp-extensible-form-prop [class]="prop.className"
-            *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]="{groupedProp:groupedProp,data:data}">
+        </ng-container>
+      </ng-template>
     </ng-container>
+
   </ng-container>
 </ng-container>
+
+
+<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"
+        *ngIf="extraProperties.controls[prop.name]; else tempDefault"
+      >
+        <abp-extensible-form-prop [prop]="prop" [data]="data"
+                                  [class]="prop.className">
+        </abp-extensible-form-prop>
+      </ng-container>
+
+      <ng-template #tempDefault>
+        <abp-extensible-form-prop
+          [class]="prop.className"
+          *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;
 }
@@ -40,6 +68,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly id: string | undefined;
   readonly template?: Type<any>;
   readonly className?: string;
+  readonly group?: FormPropGroup | undefined;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -52,6 +81,8 @@ export class FormProp<R = any> extends Prop<R> {
       options.template,
       options.className,
     );
+    this.group = options.group;
+    this.className = options.className;
 
     this.asyncValidators = options.asyncValidators || (_ => []);
     this.validators = options.validators || (_ => []);