ngx-techlify-core 11.5.0 → 11.5.2

package/src/lib/timeline-filter/timeline-filter.component.ts

@@ -0,0 +1,220 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { DatePipe } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Optional, Output, Self, ViewChild } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormControl, FormGroup, NgControl, Validators } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { TimelineValue, calculateTimeline } from './calculate-timeline';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { Timeline } from './timeline.model';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-timeline-filter',
+  templateUrl: './timeline-filter.component.html',
+  styleUrls: ['./timeline-filter.component.scss'],
+  providers: [
+    {
+      provide: MatFormFieldControl,
+      useExisting: TimelineFilterComponent
+    }
+  ]
+})
+export class TimelineFilterComponent implements OnInit, ControlValueAccessor {
+
+  @ViewChild('picker') picker;
+  @Input() timelineValue: FormControl = new FormControl('');
+  @Input() timelines: any[] = [
+    { value: Timeline.CUSTOM, viewValue: 'Custom' },
+    { value: Timeline.TODAY, viewValue: 'Today' },
+    { value: Timeline.YESTERDAY, viewValue: 'Yesterday' },
+    { value: Timeline.TOMMOROW, viewValue: 'Tomorrow' },
+    { value: Timeline.THIS_WEEK, viewValue: 'This Week' },
+    { value: Timeline.LAST_WEEK, viewValue: 'Last Week' },
+    { value: Timeline.NEXT_WEEK, viewValue: 'Next Week' },
+    { value: Timeline.THIS_MONTH, viewValue: 'This Month' },
+    { value: Timeline.LAST_MONTH, viewValue: 'Last Month' },
+    { value: Timeline.NEXT_MONTH, viewValue: 'Next Month' },
+    { value: Timeline.THIS_QUARTER, viewValue: 'This Quarter' },
+    { value: Timeline.LAST_QUARTER, viewValue: 'Last Quarter' },
+    { value: Timeline.THIS_YEAR, viewValue: 'This Year' },
+    { value: Timeline.LAST_YEAR, viewValue: 'Last Year' },
+    { value: Timeline.ALL, viewValue: 'All dates' },
+  ];
+  @Input() dateFrom: string = 'date_from';
+  @Input() dateTo: string = 'date_to';
+  @Input() appearance: any = "legacy"
+  @Input() showClearbutton: boolean = false;
+  /**
+   * @deprecated  The form input is deprecated.
+   */
+  @Input() form: FormGroup = null;
+  @Input() labelText: string = 'Select Timeline';
+  @Input() selectedValue: any;
+  @Input() touchUi: boolean = true;
+  @Output() selectedValueChange = new EventEmitter();
+  @Output() selectionChange = new EventEmitter();
+
+  selectorForm: FormGroup;
+  onChange: any = () => { };
+  onTouched: any = () => { };
+  static nextId = 0;
+  stateChanges = new Subject<void>();
+  controlType = 'timeline-filter';
+  id = `timeline-filter-${TimelineFilterComponent.nextId++}`;
+  describedBy = '';
+
+  selectedRange: TimelineValue;
+  @Input() set defaultValue(value: any) {
+    this.timelineValue.setValue(value);
+    this.changeTimeline(value);
+  }
+
+  showCustomDateFields: boolean = false;
+
+  constructor(
+    formBuilder: FormBuilder,
+    @Optional() @Self() public ngControl: NgControl,
+    private datePipe: DatePipe
+  ) {
+    this.selectorForm = formBuilder.group({
+      select_value: [null],
+    });
+
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  @Input()
+  get required(): boolean { return this._required; }
+  set required(value: boolean) {
+    this.selectorForm.get('select_value').setValidators(Validators.required);
+    this._required = coerceBooleanProperty(value);
+    this.stateChanges.next();
+  }
+  private _required = false;
+
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+    this._disabled ? this.selectorForm.disable() : this.selectorForm.enable();
+    this.stateChanges.next();
+  }
+  private _disabled = false;
+
+  @Input()
+  get value(): any {
+    if (this.selectorForm.valid) {
+      return this.selectorForm.value.select_value;
+    }
+    return '';
+  }
+  set value(data: any) {
+    this.selectorForm.patchValue({ select_value: data || '' });
+    this._handleInput();
+    this.stateChanges.next();
+  }
+
+  getDateRangeString() {
+    let str = "";
+    if (this.selectedRange?.show_custom_field) {
+      if (this.selectedRange?.date_from.toUTCString() != 'Invalid Date') {
+        str += ' - ' + this.datePipe.transform(this.selectedRange?.date_from?.toUTCString())
+      }
+      if (this.selectedRange?.date_to.toUTCString() != 'Invalid Date') {
+        str += ' - ' + this.datePipe.transform(this.selectedRange?.date_to?.toUTCString())
+      }
+    }
+    return str;
+  }
+
+  resetFieldValue(field: string) {
+    this.form.get(field).setValue('');
+  }
+
+
+  getFieldValue(field: string) {
+    return this.form.get(field).value;
+  }
+
+  setFieldValue(field: string, value: any) {
+    this.form.get(field).setValue(value);
+  }
+
+  changeTimeline(value: any) {
+    const timeline = calculateTimeline(value);
+    if (timeline) {
+      this.setFieldValue(this.dateFrom, timeline.date_from)
+      this.setFieldValue(this.dateTo, timeline.date_to)
+      this.showCustomDateFields = timeline.show_custom_field;
+    }
+  }
+
+  _handleInput(): void {
+    if (this.value == 1) {
+      this.picker.open();
+      return;
+    }
+    const range: TimelineValue = calculateTimeline(this.value);
+    this.selectedRange = range;
+    this.onChange(this.value);
+    this.selectedValueChange.emit(this.selectedValue);
+    this.selectionChange.emit(range);
+  }
+
+  dateRangeChange(dateRangeStart: HTMLInputElement, dateRangeEnd: HTMLInputElement) {
+    const range: TimelineValue = {
+      date_from : new Date(dateRangeStart.value),
+      date_to: new Date(dateRangeEnd.value),
+      show_custom_field: true
+    }
+    this.selectedRange = range;
+    this.onChange(this.value);
+    this.selectedValueChange.emit(this.selectedValue);
+    this.selectionChange.emit(range);
+  }
+
+  onCustomDateChange(event: any) {
+  }
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+
+  onContainerClick(event: MouseEvent) {
+    event.stopPropagation();
+  }
+
+  writeValue(data: any): void {
+    this.value = data;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  ngOnInit(): void {
+    this.timelineValue.valueChanges.
+      pipe(
+        debounceTime(100),
+        distinctUntilChanged(),
+        untilDestroyed(this)
+      ).subscribe(value => this.changeTimeline(value));
+  }
+
+  ngOnDestroy() {
+    this.stateChanges.complete();
+  }
+
+}

package/src/lib/timeline-filter/timeline-filter.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TimelineFilterRoutingModule } from './timeline-filter-routing.module';
+import { TimelineFilterComponent } from './timeline-filter.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MaterialModule } from '../material.module';
+
+
+@NgModule({
+  declarations: [TimelineFilterComponent],
+  imports: [
+    CommonModule,
+    TimelineFilterRoutingModule,
+    FlexLayoutModule,
+    MaterialModule,
+    ReactiveFormsModule
+  ],
+  exports: [TimelineFilterComponent]
+})
+export class TimelineFilterModule { }

package/src/lib/timeline-filter/timeline.model.ts

@@ -0,0 +1,17 @@
+export class Timeline {
+    public static CUSTOM: number = 1;
+    public static TODAY: number = 2;
+    public static YESTERDAY: number = 3;
+    public static THIS_WEEK: number = 4;
+    public static LAST_WEEK: number = 5;
+    public static THIS_MONTH: number = 6;
+    public static LAST_MONTH: number = 7;
+    public static THIS_QUARTER: number = 8;
+    public static LAST_QUARTER: number = 9;
+    public static THIS_YEAR: number = 10;
+    public static LAST_YEAR: number = 11;
+    public static ALL: number = 12;
+    public static TOMMOROW: number = 13;
+    public static NEXT_WEEK: number = 14;
+    public static NEXT_MONTH: number = 15;
+}

package/src/lib/utility/date-utils.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Service that provides utility functions for dates
+ * 
+ * @author Joshua Kissoon
+ * @since 20170726
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class DateUtils {
+
+    /**
+     * Takes in a date object and outputs the string value
+     */
+    getYYYYMMDDString(inputDate: Date): string {
+        var year = inputDate.getFullYear();
+        var month = (inputDate.getMonth() + 1) < 10 ? ("0" + (inputDate.getMonth() + 1)) : (inputDate.getMonth() + 1);
+        var date = inputDate.getDate() < 10 ? ("0" + inputDate.getDate()) : inputDate.getDate();
+
+        return year + "-" + month + "-" + date;
+    }
+
+    /**
+     * Takes in a date object and outputs the year
+     */
+    getYYYY(inputDate: Date): number {
+        var year = inputDate.getFullYear();
+        return year;
+    }
+
+    /**
+     * Takes in a date object and outputs the Month
+     */
+    getMM(inputDate: Date): number {
+        var month = inputDate.getMonth() + 1;
+        return month;
+    }
+    //         var n = this.rfidCardUseManualEntry.manual_date.toLocaleTimeString();
+
+    getDateTime(inputDate: Date): string {
+        var year = inputDate.getFullYear();
+        var month = (inputDate.getMonth() + 1) < 10 ? ("0" + (inputDate.getMonth() + 1)) : (inputDate.getMonth() + 1);
+        var date = inputDate.getDate() < 10 ? ("0" + inputDate.getDate()) : inputDate.getDate();
+        var time = inputDate.toLocaleTimeString();
+
+        return year + "-" + month + "-" + date + " " + time;
+    }
+
+}

package/{lib/utility/index.d.ts → src/lib/utility/index.ts}

@@ -1,3 +1,3 @@
-export * from './num-items-selector.component';
-export * from './date-utils.service';
-export * from './number-selector.component';
+export * from './num-items-selector.component';
+export * from './date-utils.service';
+export * from './number-selector.component';

package/src/lib/utility/num-items-selector.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+
+/**
+ * Component to generate a num items selector
+ * 
+ * @author Floyd Kissoon
+ * @since 20170817
+ */
+@Component({
+    selector: "num-items-selector",
+    templateUrl: "./num-items-selector.html"
+})
+export class NumItemsSelector {
+    @Input() numItems: number;
+    @Output() numItemsChange: EventEmitter<number>;
+
+    constructor() {
+        this.numItemsChange = new EventEmitter<number>();
+    }
+
+    /**
+     * Called when an item has been selected
+     */
+    numItemsChanged() {
+        this.numItemsChange.emit(this.numItems);
+    }
+
+
+}

package/src/lib/utility/num-items-selector.html

@@ -0,0 +1,13 @@
+<select [(ngModel)]="numItems" class="form-control" id="numItems" name="numItems" (change)="numItemsChanged()">
+    <option value="25">25</option>
+    <option value="50">50</option>
+    <option value="100">100</option>
+    <option value="250">250</option>
+    <option value="500">500</option>
+    <option value="1000">1000</option>
+    <option value="2000">2000</option>
+    <option value="3000">3000</option>
+    <option value="4000">4000</option>
+    <option value="5000">5000</option>
+    <option value="5000000000">All</option>
+</select> 

package/src/lib/utility/number-selector.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
+
+/**
+ * Component to generate a number selector
+ * 
+ * @author Floyd Kissoon
+ * @since 20180628
+ */
+@Component({
+    selector: "number-selector",
+    templateUrl: "./number-selector.html"
+})
+export class NumberSelector implements OnInit {
+    @Input() start_value: number;
+    @Input() end_value: number
+    @Output() selectedValueChange: EventEmitter<number>;
+    @Input() selectedValue: number;
+
+    items = new Array();
+
+    constructor() {
+        this.selectedValueChange = new EventEmitter<number>();
+    }
+
+    /**
+     * Called when an item has been selected
+     */
+    numChanged() {
+        this.selectedValueChange.emit(this.selectedValue);
+    }
+
+
+    ngOnInit() {
+        for (var i = this.start_value; i < this.end_value + 1; i++) {
+            this.items.push(i);
+        }
+    }
+}

package/src/lib/utility/number-selector.html

@@ -0,0 +1,6 @@
+<div class="number-selector-wrapper">
+    <select name="selectedValue" [(ngModel)]="selectedValue" class="form-control" (change)="numChanged()">
+        <option value="">-- Student Status --</option>
+        <option *ngFor="let start_value of items;" value="{{start_value}}">{{start_value}}</option>
+    </select>
+</div>

package/src/lib/utility/utility.module.ts

@@ -0,0 +1,20 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+/* Selectors */
+import { NumItemsSelector } from './num-items-selector.component';
+import { NumberSelector } from './number-selector.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+    ],
+    declarations: [
+        NumItemsSelector, NumberSelector,
+    ],
+    exports: [NumItemsSelector, NumberSelector]
+})
+export class UtilityModule { }