Hi,
Before we begin, I would like point out that the openModal
method of UsersComponent
is only for the user form, so we cannot do what you want using that particular method. There are two ways to do it: A quick one and an elaborate one.
AppComponent
template.AppComponent
class:isModalOpen: boolean;
openModal() {
this.isModalOpen = true;
}
const modal = new EntityAction<Identity.UserItem>({
text: 'User Salesforce Hierarchy',
action: data => {
const component = data.getInjected(AppComponent);
component.openModal();
},
});
That should work. However, there is a longer but lazy-loading solution, and we are going to use NGXS for it.
identity-extended
inside your app folder.identity-popups.store.ts
in it.import { Action, Selector, State, StateContext } from '@ngxs/store';
export class ShowUserSalesforceModal {
static readonly type = '[IdentityPopups] ShowModal';
constructor(public readonly payload: boolean) {}
}
@State<IdentityPopupsStateModel>({
name: 'IdentityPopups',
defaults: {
showUserSalesforceModal: false,
},
})
export class IdentityPopupsState {
@Selector()
static isUserSalesforceModalVisible(state: IdentityPopupsStateModel) {
return state.showUserSalesforceModal;
}
@Action(ShowUserSalesforceModal)
toggleModal(
context: StateContext<IdentityPopupsStateModel>,
{ payload }: ShowUserSalesforceModal,
) {
context.patchState({ showUserSalesforceModal: payload });
}
}
interface IdentityPopupsStateModel {
showUserSalesforceModal: boolean;
}
identity-extended.module.ts
in the same folder.import { CoreModule } from '@abp/ng.core';
import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { Component, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { NgxsModule, Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { IdentityPopupsState, ShowUserSalesforceModal } from './identity-popups.store';
@Component({
template: `
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
`,
})
export class IdentityOutletComponent {}
@Component({
template: `
<abp-modal [visible]="isUserSalesforceModalVisible$ | async" (disappear)="onModalDisappear()">
<!-- INSERT YOUR MODAL CONTENT HERE (starting from line 2) -->
</abp-modal>
`,
})
export class IdentityPopupsComponent {
@Select(IdentityPopupsState.isUserSalesforceModalVisible)
isUserSalesforceModalVisible$: Observable<boolean>;
constructor(private store: Store) {}
onModalDisappear() {
this.store.dispatch(new ShowUserSalesforceModal(false));
}
}
@NgModule({
declarations: [IdentityPopupsComponent, IdentityOutletComponent],
imports: [
CoreModule,
ThemeSharedModule,
NgxsModule.forFeature([IdentityPopupsState]),
RouterModule.forChild([
{
path: '',
component: IdentityOutletComponent,
children: [
{
path: '',
outlet: 'popup',
component: IdentityPopupsComponent,
},
{
path: '',
loadChildren: () => import('@volo/abp.ng.identity').then(m => m.IdentityModule),
},
],
},
]),
],
})
export class IdentityExtendedModule {}
identity
path in your AppRoutingModule
to this:{
path: 'identity',
loadChildren: () =>
import('./identity-extended/identity-extended.module').then(m => m.IdentityExtendedModule),
},
const modal = new EntityAction<Identity.UserItem>({
text: 'User Salesforce Hierarchy',
action: data => {
const store = data.getInjected(Store);
store.dispatch(new ShowUserSalesforceModal(true));
},
});
It should now be working well with lazy-loading.
P.S. You may split the files as you wish. I have described them as one file just to make it quicker to explain.
Hi,
We have noticed that, due to this open issue on Angular, the DisabledDirective
breaks all dynamic forms when Ivy is enabled.
We have fixed the problem with one of the workarounds suggested in the thread of that issue and have released v2.7.2 for the commercial-ui package.
Please remove yarn.lock (or package-lock.json) in your project and reinstall npm packages.
Sorry for the inconvenience.
Hi,
We have noticed that, due to this open issue on Angular, the DisabledDirective
breaks all dynamic forms when Ivy is enabled.
We have fixed the problem with one of the workarounds suggested in the thread of that issue and have released v2.7.2 for the commercial-ui package.
Please remove yarn.lock (or package-lock.json) in your project and reinstall npm packages.
Sorry for the inconvenience.
Hi,
We could not reproduce this problem. However, with v2.7.1 we have replaced this form with a dynamic one and the password field is now right after the username (that's how we've noticed you are using 2.7.0).
Could you please remove yarn.lock (or package-lock.json) in your project and reinstall npm packages? You should not have that issue after the upgrade.
P.S. This is the validation error we are getting when rule is lowercase only and all number keys are pressed:
Hi,
The issue you have referred was only about Permissions button and is fixed as of 2.7.0. We could not reproduce any issues with both of these action buttons.
Could you please check the console and share if any errors are logged?
Thanks.
Hello,
We have noticed that, due to this open issue on Angular, the DisabledDirective
breaks all dynamic forms in v2.7 of the Angular UI, when Ivy is enabled.
We have implemented one of the workarounds suggested in the thread of that issue and released v2.7.2 for the commercial-ui package which fixes the problem.
If you observe anything similar, please remove yarn.lock (or package-lock.json) in your project and reinstall npm packages.
Sorry for the inconvenience.
Hi,
Is this issure resolved? Can we close it?
Hi,
Is this issure resolved? Can we close it?
Gravatar @alper, yes.
Hi Ian,
Please run the following command in your terminal:
npx ng add @angular/pwa
Then get a new production build and the service worker should normally be ready. You should see a tiny "plus" icon in the address bar and can audit PWA via Lighthouse.