ui/src/app/master-checkbox.component.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import { Component, Input, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';

interface Checkable {
  checked: boolean;
}

@Component({
  selector: 'app-master-checkbox',
  template: `
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="{{id}}-select-all" #masterCheckbox [(ngModel)]="selected" (change)="clicked()">
    <label class="custom-control-label" for="{{id}}-select-all"></label>
  </div>
`
})
export class MasterCheckboxComponent {
  @Input() id: string;
  @Input() list: Map<String, Checkable>;
  @Output() changed = new EventEmitter<number>();

  @ViewChild('masterCheckbox') masterCheckbox: ElementRef;
  selected: boolean;

  clicked() {
    this.list.forEach(item => item.checked = this.selected);
    this.selectionChanged();
  }

  selectionChanged() {
    if (!this.masterCheckbox)
      return;
    let checked: number = 0;
    this.list.forEach(item => { if(item.checked) checked++ });
    this.selected = checked > 0 && checked == this.list.size;
    this.masterCheckbox.nativeElement.indeterminate = checked > 0 && checked < this.list.size;
    this.changed.emit(checked);
  }
}

@Component({
  selector: 'app-slave-checkbox',
  template: `
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="{{master.id}}-{{id}}-select" [(ngModel)]="checkable.checked" (change)="master.selectionChanged()">
    <label class="custom-control-label" for="{{master.id}}-{{id}}-select"></label>
  </div>
`
})
export class SlaveCheckboxComponent {
  @Input() id: string;
  @Input() master: MasterCheckboxComponent;
  @Input() checkable: Checkable;
}