Customize page Users #126

0

ididsbury created 4 years ago

0

edelivery created 4 years ago

thanks @ididsbury! I have created action. I want show modal when click User Salesforce Hierarchy as below. Please help me

0

alper created 4 years ago

Support Team Director

is it Angular?

0

edelivery created 4 years ago

i'm using angular

0

alper created 4 years ago

Support Team Director

See Angular Entity Action Extensions

0

edelivery created 4 years ago

I have defined abp-modal html as below

how to embed it into Usercomponent

Thanks

0

armanozak created 4 years ago

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

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

isModalOpen: boolean;

openModal() {
  this.isModalOpen = true;
}

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

Create a folder called identity-extended inside your app folder.
Create a file called identity-popups.store.ts in it.
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;
}

Create a file called identity-extended.module.ts in the same folder.
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: `
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;router-outlet name=&quot;popup&quot;&gt;&lt;/router-outlet&gt;
  `,
})
export class IdentityOutletComponent {}

@Component({
  template: `
    &lt;abp-modal [visible]=&quot;isUserSalesforceModalVisible$ | async&quot; (disappear)=&quot;onModalDisappear()&quot;&gt;

      &lt;!-- INSERT YOUR MODAL CONTENT HERE (starting from line 2) --&gt;

    &lt;/abp-modal&gt;
  `,
})
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 {}

Change the identity path in your AppRoutingModule to this:

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

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.

0

edelivery created 4 years ago

that's perfect! Thank you so much

0

edelivery created 4 years ago

Hi armanozak! I upgraded to version 3.1.0 and import IdentityConfigModule like this but when run project I have error

0

armanozak created 4 years ago

Hi edelivery,

This is a completely different topic, so please open a new ticket next time.

As of v3, lazy loading of built-in Angular modules have changed. Please refer to the migration guide for details.

Have a nice week.

10 Answer(s)

The Quick Solution

The Elaborate Solution