File

libs/rucken/ionic/src/lib/entities/users/users-list/users-list.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector users-list
templateUrl users-list.component.html

Inputs

modalItem

Type: IBaseEntityModalOptions

modalView

Type: IBaseEntityModalOptions

title

Constructor

constructor(modalsService: ModalsService, errorsExtractor: ErrorsExtractor, translateService: TranslateService, dynamicRepository: DynamicRepository, usersConfig: IRestProviderOptions, _usersListFiltersModalService: UsersListFiltersModalService)

Methods

setSearchText
setSearchText(event: { detail: { value: string; }; })
Returns: void
onDeleteClickAsync
onDeleteClickAsync(item: CustomUser)
Returns: void
createFiltersModal
createFiltersModal(item: UsersListFiltersModal)
Returns: void
onFilterClickAsync
onFilterClickAsync(data: any)
Returns: void
onFilterClick
onFilterClick(data: any)
Returns: void
onChangeFilter
onChangeFilter(filter: IBaseEntityGridFilter)
Returns: void
onUpdateClickAsync
onUpdateClickAsync(item: CustomUser)
Returns: void

Properties

list
list: EntityListComponent<CustomUser>
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, ViewChild, isDevMode } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { BaseEntityListComponent, ErrorsExtractor, IBaseEntityGridFilter, IBaseEntityModalOptions, interpolate, ModalsService, translate, USERS_CONFIG_TOKEN, BasePromptFormModalComponent } from '@rucken/core';
import { DynamicRepository, IRestProviderOptions } from 'ngx-repository';
import { EntityListComponent } from '../../../components/entity-list/entity-list.component';
import { CustomUser } from '../../../models/custom-user';
import { IonicModalsService } from '../../../modules/modals/modals.service';
import { UserModalComponent } from '../user-modal/user-modal.component';
import { UsersListFiltersModal } from './users-list-filters-modal/users-list-filters-modal';
import { UsersListFiltersModalComponent } from './users-list-filters-modal/users-list-filters-modal.component';
import { UsersListFiltersModalService } from './users-list-filters-modal/users-list-filters-modal.service';
import { BindIoInner } from 'ngx-bind-io';

@BindIoInner()
@Component({
  selector: 'users-list',
  templateUrl: './users-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersListComponent extends BaseEntityListComponent<CustomUser> implements OnInit {

  @ViewChild('list')
  list: EntityListComponent<CustomUser>;
  @Input()
  modalItem: IBaseEntityModalOptions = {
    class: 'primary',
    component: UserModalComponent,
    initialState: {
      hideYes: true,
      hideNo: true
    }
  };
  @Input()
  modalView: IBaseEntityModalOptions = {
    class: 'medium',
    component: UserModalComponent,
    initialState: {
      noClass: 'medium',
      hideYes: true,
      hideNo: true
    }
  };
  @Input()
  title = translate('Users');
  constructor(
    modalsService: ModalsService,
    protected errorsExtractor: ErrorsExtractor,
    protected translateService: TranslateService,
    protected dynamicRepository: DynamicRepository,
    @Inject(USERS_CONFIG_TOKEN) protected usersConfig: IRestProviderOptions<CustomUser>,
    private _usersListFiltersModalService: UsersListFiltersModalService
  ) {
    super(dynamicRepository.fork<CustomUser>(CustomUser), modalsService, CustomUser);
  }
  ngOnInit() {
    if (!this.mockedItems) {
      this.useRest({
        apiUrl: this.apiUrl,
        infinity: true,
        ...this.usersConfig,
        autoload: false
      });
    }
    if (this.mockedItems) {
      this.useMock({
        items: this.mockedItems,
        infinity: true,
        ...this.usersConfig,
        autoload: false
      });
    }
    this.onChangeFilter();
  }
  setSearchText(event: { detail: { value: string } }) {
    this.list.searchField.setValue(
      event.detail.value
    );
  }
  async onDeleteClickAsync(item: CustomUser) {
    const title = interpolate(this.translateService.instant(this.strings.deleteTitle), item);
    const message = interpolate(this.translateService.instant(this.strings.deleteMessage), item);
    try {
      const result = await (this.modalsService as IonicModalsService).confirmAsync({
        title,
        message
      });
      if (result) {
        this.repository.delete(item.id).subscribe(
          deletedItem => {
            if (this.mockedItems) {
              this.mockedItems = this.repository.items;
              this.mockedItemsChange.emit(this.mockedItems);
            }
          },
          error => this.onError(error)
        );
      }
    } catch (error) {
      throw error;
    }
  }
  async createFiltersModal(item?: UsersListFiltersModal) {
    item = item || new UsersListFiltersModal();
    const modalRef = await this.modalsService.createAsync<UsersListFiltersModalComponent>(
      UsersListFiltersModalComponent,
      {
        class: 'secondary',
        initialState: {
          title: translate('Users filters'),
          data: item
        }
      }
    );
    modalRef.instance.group(UsersListFiltersModal);
    modalRef.instance.data = item;
    return modalRef;
  }
  async onFilterClickAsync(data?: any) {
    const modalRef = await this.createFiltersModal(data);
    modalRef.instance.yes.subscribe((modal: UsersListFiltersModalComponent) => {
      modal.hide();
      this.onChangeFilter();
    });
  }
  onFilterClick(data?: any): void {
    this.onFilterClickAsync(data).then();
  }
  onChangeFilter(filter?: IBaseEntityGridFilter) {
    if (!filter) {
      filter = {};
    }
    const usersListFiltersModal = this._usersListFiltersModalService.getCurrent();
    if (usersListFiltersModal.group) {
      filter['group'] = usersListFiltersModal.group.id;
    }
    if (usersListFiltersModal.sortField) {
      filter['sort'] = usersListFiltersModal.sortField.id;
    }
    if (usersListFiltersModal.sortType) {
      filter['sort'] = (usersListFiltersModal.sortType.id === 'asc' ? '' : '-') + filter['sort'];
    }
    super.onChangeFilter(filter);
  }

  async onUpdateClickAsync(item: CustomUser) {
    const useCustomModalComponent = this.modalUpdate.component || this.modalItem.component;
    let modalRef = !useCustomModalComponent ? await this.createUpdateModal(item) : undefined;
    if (!modalRef) {
      modalRef = await this.defaultCreateUpdateModal(item);
      if (isDevMode() && !useCustomModalComponent) {
        console.warn('Method "createUpdateModal" is not defined', this);
      }
    }
    modalRef.instance.yes.subscribe((modal: BasePromptFormModalComponent<CustomUser>) => {
      modal.processing = true;
      this.repository.update(item.id, modal.getData()).subscribe(
        updatedItem => {
          modal.processing = false;
          if (this.mockedItems) {
            this.mockedItems = this.repository.items;
            this.mockedItemsChange.emit(this.mockedItems);
          }
          modal.hide();
        },
        error => this.onUpdateError(modal, error)
      );
    });
  }
}

results matching ""

    No results matching ""