Hi,

Is this issure resolved? Can we close it?

Dynamic Form Problem Caused by Ivy in Angular UI

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,

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.

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,

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,

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.

The Quick Solution

1. Place the new modal (for Salesforce) inside AppComponent template.
2. Add the following inside your AppComponent class:

isModalOpen: boolean;

openModal() {
  this.isModalOpen = true;
}

3. Change the entity action contributor to this:

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.

The Elaborate Solution

1. Create a folder called identity-extended inside your app folder.
2. Create a file called identity-popups.store.ts in it.
3. Insert the following code in the new file:

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;
}

4. Create a file called identity-extended.module.ts in the same folder.
5. Insert the following code in the new file:

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 {}

6. Change the identity path in your AppRoutingModule to this:

{
  path: 'identity',
  loadChildren: () =>
    import('./identity-extended/identity-extended.module').then(m => m.IdentityExtendedModule),
},

7. Change the entity action contributor to this:

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.