diff --git a/docs/en/Modules/OpenIddict.md b/docs/en/Modules/OpenIddict.md index 2c8ae7572e..22cb22bf55 100644 --- a/docs/en/Modules/OpenIddict.md +++ b/docs/en/Modules/OpenIddict.md @@ -330,7 +330,19 @@ public class MyClaimDestinationsProvider : IAbpOpenIddictClaimDestinationsProvid { public virtual Task SetDestinationsAsync(AbpOpenIddictClaimDestinationsProviderContext context) { - // ... + foreach (var claim in context.Claims) + { + if (claim.Type == MyClaims.MyClaimsType) + { + claim.SetDestinations(OpenIddictConstants.Destinations.AccessToken, OpenIddictConstants.Destinations.IdentityToken); + } + + if (claim.Type == MyClaims.MyClaimsType2) + { + claim.SetDestinations(OpenIddictConstants.Destinations.AccessToken); + } + } + return Task.CompletedTask; } } diff --git a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts index c09dede3cb..e4b18a717b 100644 --- a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts +++ b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts @@ -13,6 +13,8 @@ import { RegisterComponent } from './components/register/register.component'; import { ResetPasswordComponent } from './components/reset-password/reset-password.component'; import { eAccountComponents } from './enums/components'; import { AuthenticationFlowGuard } from './guards/authentication-flow.guard'; +import { AccountExtensionsGuard } from './guards'; + const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'login' }, @@ -68,7 +70,7 @@ const routes: Routes = [ { path: 'manage', component: ReplaceableRouteContainerComponent, - canActivate: [AuthGuard], + canActivate: [AuthGuard, AccountExtensionsGuard], data: { replaceableComponent: { key: eAccountComponents.ManageProfile, diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts index bfa37d4bfa..bdf3c39792 100644 --- a/npm/ng-packs/packages/account/src/lib/account.module.ts +++ b/npm/ng-packs/packages/account/src/lib/account.module.ts @@ -15,6 +15,10 @@ import { accountConfigOptionsFactory } from './utils/factory-utils'; import { AuthenticationFlowGuard } from './guards/authentication-flow.guard'; import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component'; import { ResetPasswordComponent } from './components/reset-password/reset-password.component'; +import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions'; +import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token'; +import { AccountExtensionsGuard } from './guards/extensions.guard'; +import { PersonalSettingsHalfRowComponent } from './components/personal-settings/personal-settings-half-row.component'; const declarations = [ LoginComponent, @@ -24,6 +28,7 @@ const declarations = [ PersonalSettingsComponent, ForgotPasswordComponent, ResetPasswordComponent, + PersonalSettingsHalfRowComponent, ]; @NgModule({ @@ -34,6 +39,7 @@ const declarations = [ ThemeSharedModule, NgbDropdownModule, NgxValidateCoreModule, + UiExtensionsModule, ], exports: [...declarations], }) @@ -49,6 +55,11 @@ export class AccountModule { useFactory: accountConfigOptionsFactory, deps: [ACCOUNT_CONFIG_OPTIONS], }, + { + provide: ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, + useValue: options.editFormPropContributors, + }, + AccountExtensionsGuard, ], }; } diff --git a/npm/ng-packs/packages/account/src/lib/components/index.ts b/npm/ng-packs/packages/account/src/lib/components/index.ts index 098ee8a202..d74263b052 100644 --- a/npm/ng-packs/packages/account/src/lib/components/index.ts +++ b/npm/ng-packs/packages/account/src/lib/components/index.ts @@ -4,4 +4,5 @@ export * from './login/login.component'; export * from './manage-profile/manage-profile.component'; export * from './register/register.component'; export * from './personal-settings/personal-settings.component'; +export * from './personal-settings/personal-settings-half-row.component'; export * from './reset-password/reset-password.component'; diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts new file mode 100644 index 0000000000..a000e353d6 --- /dev/null +++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts @@ -0,0 +1,37 @@ +import { Component, Inject } from '@angular/core'; +import { + EXTENSIONS_FORM_PROP, + FormProp, + EXTENSIBLE_FORM_VIEW_PROVIDER, +} from '@abp/ng.theme.shared/extensions'; +import { FormGroup } from '@angular/forms'; + +@Component({ + selector: 'abp-personal-settings-half-row', + template: `
+
+ + +
+
`, + styles: [], + viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER], +}) +export class PersonalSettingsHalfRowComponent { + public displayName: string; + public name: string; + public id: string; + public formGroup: FormGroup; + + constructor(@Inject(EXTENSIONS_FORM_PROP) private propData: FormProp) { + this.displayName = propData.displayName; + this.name = propData.name; + this.id = propData.id; + } +} diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html index 0b70ad41e8..e166a49545 100644 --- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html @@ -1,55 +1,11 @@ -
-
- * -
-
-
-
- -
-
-
-
- -
-
-
-
- * -
-
- -
+ + + {{ 'AbpIdentity::Save' | abpLocalization }} diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts index d15df99878..1688ef5741 100644 --- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts +++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts @@ -1,17 +1,27 @@ -import { ProfileService } from '@abp/ng.account.core/proxy'; +import { ProfileDto, ProfileService } from '@abp/ng.account.core/proxy'; import { ToasterService } from '@abp/ng.theme.shared'; -import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Component, Injector, OnInit, ViewEncapsulation } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; import { finalize } from 'rxjs/operators'; import { Account } from '../../models/account'; import { ManageProfileStateService } from '../../services/manage-profile.state.service'; - -const { maxLength, required, email } = Validators; +import { + EXTENSIONS_IDENTIFIER, + FormPropData, + generateFormFromProps, +} from '@abp/ng.theme.shared/extensions'; +import { eAccountComponents } from '../../enums'; @Component({ selector: 'abp-personal-settings-form', templateUrl: './personal-settings.component.html', exportAs: 'abpPersonalSettingsForm', + providers: [ + { + provide: EXTENSIONS_IDENTIFIER, + useValue: eAccountComponents.PersonalSettings, + }, + ], }) export class PersonalSettingsComponent implements @@ -19,6 +29,8 @@ export class PersonalSettingsComponent Account.PersonalSettingsComponentInputs, Account.PersonalSettingsComponentOutputs { + selected: ProfileDto; + form: FormGroup; inProgress: boolean; @@ -28,21 +40,20 @@ export class PersonalSettingsComponent private toasterService: ToasterService, private profileService: ProfileService, private manageProfileState: ManageProfileStateService, + protected injector: Injector, ) {} - ngOnInit() { - this.buildForm(); + buildForm() { + this.selected = this.manageProfileState.getProfile(); + if (!this.selected) { + return; + } + const data = new FormPropData(this.injector, this.selected); + this.form = generateFormFromProps(data); } - buildForm() { - const profile = this.manageProfileState.getProfile(); - this.form = this.fb.group({ - userName: [profile.userName, [required, maxLength(256)]], - email: [profile.email, [required, email, maxLength(256)]], - name: [profile.name || '', [maxLength(64)]], - surname: [profile.surname || '', [maxLength(64)]], - phoneNumber: [profile.phoneNumber || '', [maxLength(16)]], - }); + ngOnInit(): void { + this.buildForm(); } submit() { diff --git a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts new file mode 100644 index 0000000000..59c196f2bd --- /dev/null +++ b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts @@ -0,0 +1,47 @@ +import { ePropType, FormProp } from '@abp/ng.theme.shared/extensions'; +import { UpdateProfileDto } from '@abp/ng.account.core/proxy'; +import { Validators } from '@angular/forms'; +import { PersonalSettingsHalfRowComponent } from '../components/personal-settings/personal-settings-half-row.component'; + +const { maxLength, required, email } = Validators; +export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany([ + { + type: ePropType.String, + name: 'userName', + displayName: 'AbpIdentity::DisplayName:UserName', + id: 'username', + validators: () => [required, maxLength(256)], + }, + { + type: ePropType.String, + name: 'name', + displayName: 'AbpIdentity::DisplayName:Name', + id: 'name', + validators: () => [maxLength(64)], + template: PersonalSettingsHalfRowComponent, + className: 'd-inline-block w-50', + }, + { + type: ePropType.String, + name: 'surname', + displayName: 'AbpIdentity::DisplayName:Surname', + id: 'surname', + validators: () => [maxLength(64)], + className: 'd-inline-block w-50 ps-4', + template: PersonalSettingsHalfRowComponent, + }, + { + type: ePropType.String, + name: 'email', + displayName: 'AbpIdentity::DisplayName:Email', + id: 'email-address', + validators: () => [required, email, maxLength(256)], + }, + { + type: ePropType.String, + name: 'phoneNumber', + displayName: 'AbpIdentity::DisplayName:PhoneNumber', + id: 'phone-number', + validators: () => [maxLength(16)], + }, +]); diff --git a/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts new file mode 100644 index 0000000000..7c50eadf5e --- /dev/null +++ b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts @@ -0,0 +1,46 @@ +import { Injectable, Injector } from '@angular/core'; +import { CanActivate } from '@angular/router'; +import { Observable } from 'rxjs'; +import { + ExtensionsService, + getObjectExtensionEntitiesFromStore, + mapEntitiesToContributors, + mergeWithDefaultProps, +} from '@abp/ng.theme.shared/extensions'; +import { ConfigStateService } from '@abp/ng.core'; +import { tap, map, mapTo } from 'rxjs/operators'; +import { + ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, + DEFAULT_ACCOUNT_FORM_PROPS, +} from '../tokens/extensions.token'; +import { AccountEditFormPropContributors } from '../models/config-options'; +import { eAccountComponents } from '../enums/components'; + +@Injectable() +export class AccountExtensionsGuard implements CanActivate { + constructor(private injector: Injector) {} + + canActivate(): Observable { + const extensions: ExtensionsService = this.injector.get(ExtensionsService); + + const editFormContributors: AccountEditFormPropContributors = + this.injector.get(ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, null) || {}; + + const configState = this.injector.get(ConfigStateService); + return getObjectExtensionEntitiesFromStore(configState, 'Identity').pipe( + map(entities => ({ + [eAccountComponents.PersonalSettings]: entities.User, + })), + mapEntitiesToContributors(configState, 'AbpIdentity'), + tap(objectExtensionContributors => { + mergeWithDefaultProps( + extensions.editFormProps, + DEFAULT_ACCOUNT_FORM_PROPS, + objectExtensionContributors.editForm, + editFormContributors, + ); + }), + mapTo(true), + ); + } +} diff --git a/npm/ng-packs/packages/account/src/lib/guards/index.ts b/npm/ng-packs/packages/account/src/lib/guards/index.ts index 382170b2b1..275cd2f8e8 100644 --- a/npm/ng-packs/packages/account/src/lib/guards/index.ts +++ b/npm/ng-packs/packages/account/src/lib/guards/index.ts @@ -1 +1,2 @@ export * from './authentication-flow.guard'; +export * from './extensions.guard'; diff --git a/npm/ng-packs/packages/account/src/lib/models/config-options.ts b/npm/ng-packs/packages/account/src/lib/models/config-options.ts index 898021b04e..f3af14a71e 100644 --- a/npm/ng-packs/packages/account/src/lib/models/config-options.ts +++ b/npm/ng-packs/packages/account/src/lib/models/config-options.ts @@ -1,3 +1,11 @@ +import { eAccountComponents } from '../enums'; +import { EditFormPropContributorCallback } from '@abp/ng.theme.shared/extensions'; +import { UpdateProfileDto } from '@abp/ng.account.core/proxy'; + export interface AccountConfigOptions { redirectUrl?: string; + editFormPropContributors?: AccountEditFormPropContributors; } +export type AccountEditFormPropContributors = Partial<{ + [eAccountComponents.PersonalSettings]: EditFormPropContributorCallback[]; +}>; \ No newline at end of file diff --git a/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts new file mode 100644 index 0000000000..78acb7feaa --- /dev/null +++ b/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts @@ -0,0 +1,17 @@ +import { eAccountComponents } from '../enums'; +import { DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS } from '../defaults/default-personal-settings-form-props'; +import { InjectionToken } from '@angular/core'; +import { EditFormPropContributorCallback } from '@abp/ng.theme.shared/extensions'; +import { UpdateProfileDto } from '@abp/ng.account.core/proxy'; + +export const DEFAULT_ACCOUNT_FORM_PROPS = { + [eAccountComponents.PersonalSettings]: DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS, +}; + +export const ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS = new InjectionToken( + 'ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS', +); + +type EditFormPropContributors = Partial<{ + [eAccountComponents.PersonalSettings]: EditFormPropContributorCallback[]; +}>; diff --git a/npm/ng-packs/packages/account/src/lib/tokens/index.ts b/npm/ng-packs/packages/account/src/lib/tokens/index.ts index 0a88318130..4381d1bc77 100644 --- a/npm/ng-packs/packages/account/src/lib/tokens/index.ts +++ b/npm/ng-packs/packages/account/src/lib/tokens/index.ts @@ -1 +1,2 @@ export * from './config-options.token'; +export * from './extensions.token'; diff --git a/npm/ng-packs/packages/core/src/lib/utils/common-utils.ts b/npm/ng-packs/packages/core/src/lib/utils/common-utils.ts index 31a1970fdc..b373b6c04a 100644 --- a/npm/ng-packs/packages/core/src/lib/utils/common-utils.ts +++ b/npm/ng-packs/packages/core/src/lib/utils/common-utils.ts @@ -11,6 +11,10 @@ export function isNullOrUndefined(obj) { return obj === null || obj === undefined; } +export function isNullOrEmpty(obj){ + return obj === null || obj === undefined || obj === ''; +} + export function exists(obj) { return !isNullOrUndefined(obj); } diff --git a/npm/ng-packs/packages/core/src/lib/validators/index.ts b/npm/ng-packs/packages/core/src/lib/validators/index.ts index fb06e7f1d8..69880dbf84 100644 --- a/npm/ng-packs/packages/core/src/lib/validators/index.ts +++ b/npm/ng-packs/packages/core/src/lib/validators/index.ts @@ -5,6 +5,7 @@ import { validateRange } from './range.validator'; import { validateRequired } from './required.validator'; import { validateStringLength } from './string-length.validator'; import { validateUrl } from './url.validator'; +import { validateUsername } from './username.validator'; export * from './age.validator'; export * from './credit-card.validator'; export * from './range.validator'; @@ -20,4 +21,5 @@ export const AbpValidators = { required: validateRequired, stringLength: validateStringLength, url: validateUrl, + username: validateUsername, }; diff --git a/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts index bf2a4b47ee..4e2b1931db 100644 --- a/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts +++ b/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts @@ -9,9 +9,11 @@ export interface RequiredOptions { } export function validateRequired({ allowEmptyStrings }: RequiredOptions = {}): ValidatorFn { - return (control: AbstractControl): RequiredError | null => { + // note: please do not remove name of the function, it is used in function compare with type 'RequiredError' + const required = (control: AbstractControl): RequiredError | null => { return isValidRequired(control.value, allowEmptyStrings) ? null : { required: true }; }; + return required; } function isValidRequired(value: any, allowEmptyStrings: boolean): boolean { diff --git a/npm/ng-packs/packages/core/src/lib/validators/url.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/url.validator.ts index 705d07e17a..da941aee6f 100644 --- a/npm/ng-packs/packages/core/src/lib/validators/url.validator.ts +++ b/npm/ng-packs/packages/core/src/lib/validators/url.validator.ts @@ -1,4 +1,5 @@ import { AbstractControl, ValidatorFn } from '@angular/forms'; +import { isNullOrUndefined } from '../utils'; export interface UrlError { url: true; @@ -6,11 +7,11 @@ export interface UrlError { export function validateUrl(): ValidatorFn { return (control: AbstractControl): UrlError | null => { - if (['', null, undefined].indexOf(control.value) > -1) return null; + if (isNullOrUndefined(control.value)) return null; return isValidUrl(control.value) ? null : { url: true }; }; -} +} function isValidUrl(value: string): boolean { if (/^http(s)?:\/\/[^/]/.test(value) || /^ftp:\/\/[^/]/.test(value)) { diff --git a/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts new file mode 100644 index 0000000000..4e943769d2 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts @@ -0,0 +1,29 @@ +import { AbstractControl, ValidatorFn } from '@angular/forms'; +import { isNullOrEmpty } from '../utils'; + +export interface UsernamePatternError { + usernamePattern: { + actualValue: string; + }; +} + +export interface UsernameOptions { + pattern?: RegExp; +} + +const onlyLetterAndNumberRegex = /^[a-zA-Z0-9]+$/; + +export function validateUsername( + { pattern }: UsernameOptions = { pattern: onlyLetterAndNumberRegex }, +): ValidatorFn { + return (control: AbstractControl): UsernamePatternError | null => { + const isValid = isValidUserName(control.value, pattern); + return isValid ? null : { usernamePattern: { actualValue: control.value } }; + }; +} + +function isValidUserName(value: any, pattern: RegExp): boolean { + if (isNullOrEmpty(value)) return true; + + return pattern.test(value); +} diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index 99d435c891..7873adf6ea 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -39,7 +39,7 @@ >
- +
  • {{ 'AbpIdentity::UserInformations' | abpLocalization }} diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts index 75065272f4..9fd6987d19 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts @@ -61,9 +61,6 @@ export class UsersComponent implements OnInit { entityDisplayName: string; - blueprints = { pattern: 'AbpIdentity::Volo.Abp.Identity:InvalidUserName[{{ actualValue }}]' }; - - trackByFn: TrackByFunction = (index, item) => Object.keys(item)[0] || index; onVisiblePermissionChange = event => { 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 f42c761498..28c73b4320 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,9 @@ 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 { Validators } from '@angular/forms' +import { AbpValidators } from '@abp/ng.core'; -const onlyLetterAndNumberRegex = /^[a-zA-Z0-9]+$/; export const DEFAULT_USERS_CREATE_FORM_PROPS = FormProp.createMany([ { @@ -11,7 +11,7 @@ export const DEFAULT_USERS_CREATE_FORM_PROPS = FormProp.createMany [Validators.required, Validators.maxLength(256), Validators.pattern(onlyLetterAndNumberRegex)], + validators: () => [Validators.required, Validators.maxLength(256), AbpValidators.username()], }, { type: ePropType.Password, 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..a5eeffa31c 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,142 +1,152 @@ -
    - - - - + - - + + + - -
    +
    + + + - -
    - + - - - - + + + + + +
    + + +
    +     - - - - {{ option.key }} - - - + + + - - -
    - + + + + + + +
    + + +
    +     + + + + - -
    -     + - - - - + + + + - - - - + + + + - - - - + + + + +
    - - - - -
    + - {{ prop.displayName | abpLocalization }} {{ asterisk }} 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..9cb65f1b5e 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 @@ -1,3 +1,4 @@ +import { EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_FORM_PROP } from './../../tokens/extensions.token'; import { ABP, AbpValidators, ConfigStateService, TrackByService } from '@abp/ng.core'; import { AfterViewInit, @@ -5,6 +6,7 @@ import { ChangeDetectorRef, Component, ElementRef, + Injector, Input, OnChanges, Optional, @@ -54,6 +56,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit { @ViewChild('field') private fieldRef!: ElementRef; + public injectorForCustomComponent: Injector; + asterisk = ''; options$: Observable[]> = of([]); @@ -62,15 +66,15 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit { readonly!: boolean; - disabledFn = (data:PropData) => false; - - get disabled() { - return this.disabledFn(this.data) - } + typeaheadModel: any; private readonly form: FormGroup; - typeaheadModel: any; + disabledFn = (data: PropData) => false; + + get disabled() { + return this.disabledFn(this.data); + } setTypeaheadValue(selectedOption: ABP.Option) { this.typeaheadModel = selectedOption || { key: null, value: null }; @@ -108,6 +112,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit { public readonly track: TrackByService, protected configState: ConfigStateService, groupDirective: FormGroupDirective, + private injector: Injector, ) { this.form = groupDirective.form; } @@ -133,6 +138,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit { } getComponent(prop: FormProp): string { + if (prop.template) { + return 'template'; + } switch (prop.type) { case ePropType.Boolean: return 'checkbox'; @@ -173,13 +181,29 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit { } } - ngOnChanges({ prop }: SimpleChanges) { - const currentProp = prop?.currentValue; - const { options, readonly, disabled, validators } = currentProp || {}; + ngOnChanges({ prop, data }: SimpleChanges) { + const currentProp = prop?.currentValue as FormProp; + const { options, readonly, disabled, validators, template } = currentProp || {}; + if (template) { + this.injectorForCustomComponent = Injector.create({ + providers: [ + { + provide: EXTENSIONS_FORM_PROP, + useValue: currentProp, + }, + { + provide: EXTENSIONS_FORM_PROP_DATA, + useValue: (data?.currentValue as PropData)?.record, + }, + { provide: ControlContainer, useExisting: FormGroupDirective }, + ], + parent: this.injector, + }); + } if (options) this.options$ = options(this.data); if (readonly) this.readonly = readonly(this.data); - + if (disabled) { this.disabledFn = disabled; } @@ -195,5 +219,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit { } function isRequired(validator: ValidatorFn) { - return validator === Validators.required || validator === AbpValidators.required; + return ( + validator === Validators.required || + validator === AbpValidators.required || + validator.name === 'required' + ); } 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..69ad86da5c 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 @@ -6,11 +6,11 @@ [formGroupName]="extraPropertiesKey" *ngIf="extraProperties.controls[prop.name]; else tempDefault" > - + - implements OnChanges { value, }; if (prop.value.component) { - const injector = Injector.create( - [ + + const injector = Injector.create({ + providers: [ { provide: PROP_DATA_STREAM, useValue: value, }, ], - this.injector, - ); + parent: this.injector, + }); record[propKey].injector = injector; record[propKey].component = prop.value.component; } 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..bfc9f46dba 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 @@ -38,6 +38,8 @@ export class FormProp extends Prop { readonly defaultValue: boolean | number | string | Date; readonly options: PropCallback[]>> | undefined; readonly id: string | undefined; + readonly template?: Type; + readonly className?: string; constructor(options: FormPropOptions) { super( @@ -47,6 +49,8 @@ export class FormProp extends Prop { options.permission, options.visible, options.isExtra, + options.template, + options.className, ); this.asyncValidators = options.asyncValidators || (_ => []); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts index 66fc4f2c67..3799c419a7 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts @@ -33,6 +33,8 @@ export abstract class Prop { public readonly permission: string, public readonly visible: PropPredicate = _ => true, public readonly isExtra = false, + public readonly template?: Type, + public readonly className?: string, ) { this.displayName = this.displayName || this.name; } diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensible-form-view-provider.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensible-form-view-provider.token.ts new file mode 100644 index 0000000000..9db2949731 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensible-form-view-provider.token.ts @@ -0,0 +1,3 @@ +import { ControlContainer, FormGroupDirective } from "@angular/forms"; + +export const EXTENSIBLE_FORM_VIEW_PROVIDER = { provide: ControlContainer, useExisting: FormGroupDirective } diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts index d2cbbe87bd..0a2df45a00 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts @@ -3,6 +3,7 @@ import { ActionCallback, ReadonlyActionData as ActionData } from '../models/acti import { ExtensionsService } from '../services/extensions.service'; import { Observable } from 'rxjs'; import { ePropType } from '../enums/props.enum'; +import { FormProp } from '../models/form-props'; export const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER'); export type ActionKeys = Extract<'entityActions' | 'toolbarActions', keyof ExtensionsService>; @@ -24,3 +25,6 @@ export const ENTITY_PROP_TYPE_CLASSES = new InjectionToken( factory: () => ({} as EntityPropTypeClass), }, ); + +export const EXTENSIONS_FORM_PROP = new InjectionToken('EXTENSIONS_FORM_PROP'); +export const EXTENSIONS_FORM_PROP_DATA = new InjectionToken('EXTENSIONS_FORM_PROP_DATA'); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts b/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts index b19f8eb0d9..f786eb4ac8 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts +++ b/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts @@ -64,6 +64,7 @@ export { export * from './lib/pipes/create-injector.pipe'; export * from './lib/services/extensions.service'; export * from './lib/tokens/extensions.token'; +export * from './lib/tokens/extensible-form-view-provider.token'; export * from './lib/ui-extensions.module'; export * from './lib/utils/actions.util'; export * from './lib/utils/form-props.util'; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts index 33c6e1741c..7822c10e36 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts @@ -17,4 +17,5 @@ export const DEFAULT_VALIDATION_BLUEPRINTS = { passwordRequiresUpper: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresUpper', passwordRequiresDigit: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresDigit', passwordRequiresNonAlphanumeric: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresNonAlphanumeric', + usernamePattern: 'AbpIdentity::Volo.Abp.Identity:InvalidUserName[{{ actualValue }}]', };