client/src/app/shared/shared-forms/timestamp-input.component.ts

   1 import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import { secondsToTime, timeToInt } from '@shared/core-utils'
   4
   5 @Component({
   6   selector: 'my-timestamp-input',
   7   styleUrls: [ './timestamp-input.component.scss' ],
   8   templateUrl: './timestamp-input.component.html',
   9   providers: [
  10     {
  11       provide: NG_VALUE_ACCESSOR,
  12       useExisting: forwardRef(() => TimestampInputComponent),
  13       multi: true
  14     }
  15   ]
  16 })
  17 export class TimestampInputComponent implements ControlValueAccessor, OnInit {
  18   @Input() maxTimestamp: number
  19   @Input() timestamp: number
  20   @Input() disabled = false
  21
  22   @Output() inputBlur = new EventEmitter()
  23
  24   timestampString: string
  25
  26   constructor (private changeDetector: ChangeDetectorRef) {}
  27
  28   ngOnInit () {
  29     this.writeValue(this.timestamp || 0)
  30   }
  31
  32   propagateChange = (_: any) => { /* empty */ }
  33
  34   writeValue (timestamp: number) {
  35     this.timestamp = timestamp
  36
  37     this.timestampString = secondsToTime(this.timestamp, true, ':')
  38   }
  39
  40   registerOnChange (fn: (_: any) => void) {
  41     this.propagateChange = fn
  42   }
  43
  44   registerOnTouched () {
  45     // Unused
  46   }
  47
  48   onModelChange () {
  49     this.timestamp = timeToInt(this.timestampString)
  50
  51     this.propagateChange(this.timestamp)
  52   }
  53
  54   onBlur () {
  55     if (this.maxTimestamp && this.timestamp > this.maxTimestamp) {
  56       this.writeValue(this.maxTimestamp)
  57
  58       this.changeDetector.detectChanges()
  59
  60       this.propagateChange(this.timestamp)
  61     }
  62
  63     this.inputBlur.emit()
  64   }
  65 }