opt-cc/static/src/app/manage/users/user-list/user-list.component.ts

import {Component} from '@angular/core';

import {FormControl} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {UserService} from '../../../services/army-management/user.service';
import {User} from '../../../models/model-interfaces';
import {ADD_ARRAY, LOAD} from '../../../services/stores/generic-store';
import {Fraction} from '../../../utils/fraction.enum';
import {MatButtonToggleGroup} from '@angular/material';
import {UIHelpers} from '../../../utils/global.helpers';
import {TranslateService} from '@ngx-translate/core';

@Component({
  selector: 'cc-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss']
})
export class UserListComponent {

  selectedUserId: string | number = null;

  users$: Observable<User[]>;

  searchTerm = new FormControl();

  radioModel = '';

  readonly throttle = 300;

  readonly scrollDistance = 1;

  offset = 0;

  limit = 20;

  readonly fraction = Fraction;

  constructor(private userService: UserService,
              private router: Router,
              private route: ActivatedRoute,
              private translate: TranslateService) {
    this.users$ = this.userService.users$;
  }

  initObservable(observables: any) {
    Observable.merge(observables.params as Observable<string>, observables.searchTerm)
              .distinctUntilChanged()
              .switchMap(query => this.filterUsers())
              .subscribe();
  }

  openNewUserForm() {
    this.selectedUserId = null;
    this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
  }

  selectUser(userId: string) {
    this.selectedUserId = userId;
    this.router.navigate([{outlets: {'right': ['edit', userId]}}], {relativeTo: this.route});
  }

  awardUser(userId) {
    this.selectedUserId = userId;
    this.router.navigate([{outlets: {'right': ['award', userId]}}], {relativeTo: this.route});
  }

  deleteUser(user: User) {
    this.translate.get('users.list.delete.confirm', {name: user.username}).subscribe((confirmQuestion) => {
      if (confirm(confirmQuestion)) {
        this.userService.deleteUser(user)
            .subscribe((res) => {
            });
      }
    });
  }

  filterUsers(action?, group?: MatButtonToggleGroup) {
    if (!action || action === LOAD) {
      this.offset = 0;
      this.limit = 20;
    }
    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
    return this.users$ = this.userService.findUsers({
      query: this.searchTerm.value,
      fraction: this.radioModel
    }, this.limit, this.offset, action);
  }

  onScrollDown() {
    if (this.offset + this.limit > this.userService.totalCount) {
      this.limit = this.userService.totalCount - this.offset;
    }
    if (this.limit !== 0) {
      this.offset += this.limit;
      this.filterUsers(ADD_ARRAY);
    }
  }
}