angular-ngrx-pattern/src/app/pages/users-manager/users-management/users-list/users-list.component.ts

import { GetAllUsersAction } from 'src/app/ngrx/users/users.actions';
import { Router } from '@angular/router';
import { DeleteUsersAction } from './../../../../ngrx/users/users.actions';
import { User } from 'src/app/shared/models/user/user.model';
import { Input } from '@angular/core';
import { Component } from '@angular/core';
import { UserState } from 'src/app/ngrx/users/user.state';
import { Store } from '@ngrx/store';
import { MsgState } from 'src/app/ngrx/msg.state';

@Component({
  selector: 'app-users-list',
  templateUrl: './users-list.component.html',
  styleUrls: ['./users-list.component.css'],
})
export class UsersListComponent {
  @Input() inputUsersList!: User[];

  constructor(
    private store: Store<{ userReducerKey: UserState }>,
    private router: Router
  ) {}

  onUserEdit(user: User) {
    this.router.navigateByUrl('/user-update/' + user.id);
  }

  onUserDelete(user: User) {
    if (
      window.confirm(
        MsgState.CONFIRM_DEL + ' ' + user.firstname + ' ' + user.lastname
      )
    ) {
      this.store.dispatch(new DeleteUsersAction(user));
    }
  }

  firstname!: string;

  onSearch() {
    if(this.firstname==''){
      this.store.dispatch(new GetAllUsersAction({})); //refresh
    }
    else{
      this.inputUsersList = this.inputUsersList.filter((user: User) => {
        return user.firstname
          .toLocaleLowerCase()
          .match(this.firstname.toLocaleLowerCase());
      });
    }
  }
}