mp-common/admin/users/user-list/user-list.component.ts

This is XPO MarketPlace common libary

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { XpoDialog, XpoDialogConfig, XpoDialogRef, BreadCrumbService } from '@xpo/common';
import { UserDialogComponent } from '../user-dialog/user-dialog.component';
import { User, UserService } from '../../shared';
import { PaginatePipe, PaginationService } from '../../../core';

@Pipe({
  name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
  transform(items: any[], criteria: any, field1: any, field2: any, field3: any): any {
    if (items != undefined) {
      return (items.filter(item => {
        if ((item[ field1 ] && ("" + item[ field1 ].toLowerCase()).includes(criteria.toLowerCase()))
          || (item[ field2 ] && ("" + item[ field2 ].toLowerCase()).includes(criteria.toLowerCase()))
          || (item[ field3 ] && ("" + item[ field3 ].toLowerCase()).includes(criteria.toLowerCase()))) {
          return true;
        }
        return false;
      }));
    }
    else
      return [];
  }
}

@Component({
  moduleId: module.id.toString(),
  templateUrl: './user-list.component.html',
  styleUrls: [ './user-list.component.scss' ],
  providers: [ SearchFilter ]
})

export class UserListComponent implements OnInit {

  public editUserInfo: User;
  private dialogConfig: XpoDialogConfig;
  private searchBoxModel: string;
  private allUsersList: User[];
  private usersListLength: number;

  constructor(private dialog: XpoDialog, private userService: UserService, private paginationService: PaginationService, private searchFilter: SearchFilter, private bcService: BreadCrumbService) {
    this.dialogConfig = new XpoDialogConfig();
    this.dialogConfig.width = '500';
    this.searchBoxModel = "";
    this.bcService.setCrumbs({ breadcrumb: [ { name: 'count users', link: './' }] });
  }

  ngOnInit() {
    this.paginationService.total.subscribe(total => this.usersListLength = total);
    this.userService.getUsers().then(user => {
      this.allUsersList = user;
      this.usersListLength = this.allUsersList.length;
    })
  }

  onSearchClick() {
    this.userService.search();
  }

  onNewUser() {
    this.dialogConfig.data = "create";
    let newUser: User = new User(null, "", "", "", "", [ { divisionId: 0, roleId: 0, divisionName: "", roleName: "" }]);
    this.userService.setEditUserInfo(newUser);
    this.dialog
      .open(UserDialogComponent, this.dialogConfig)
      .afterClosed()
      .subscribe((result) => this.ngOnInit);
  }

  onEditUser(userId) {
    this.dialogConfig.data = "edit";
    this.userService.getEditDetails(userId).then(user => {
      this.editUserInfo = user;
      this.userService.setEditUserInfo(this.editUserInfo);
      this.dialog
        .open(UserDialogComponent, this.dialogConfig)
        .afterClosed()
        .subscribe((result) => this.ngOnInit);
    });
  }
}