ngx-techlify-core 11.5.0 → 11.5.2

package/src/lib/techlify-update/update-notifier/update-notifier-snack/update-notifier-snack.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateNotifierSnackComponent } from './update-notifier-snack.component';
+
+describe('UpdateNotifierSnackComponent', () => {
+  let component: UpdateNotifierSnackComponent;
+  let fixture: ComponentFixture<UpdateNotifierSnackComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UpdateNotifierSnackComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateNotifierSnackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/techlify-update/update-notifier/update-notifier-snack/update-notifier-snack.component.ts

@@ -0,0 +1,76 @@
+import { AlertService } from './../../../core/alert.service';
+import { TechlifyUpdateService } from './../../techlify-update.service';
+import { MatDialog } from '@angular/material/dialog';
+import { Component, EmbeddedViewRef, Inject, OnInit } from '@angular/core';
+import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import { UpdateViewComponent } from '../../update-view/update-view.component';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-update-notifier-snack',
+  templateUrl: './update-notifier-snack.component.html',
+  styleUrls: ['./update-notifier-snack.component.scss']
+})
+export class UpdateNotifierSnackComponent implements OnInit {
+  maxDescriptionLength: any = 70;
+  descriptionText: any = '';
+  techlifyUpdate: any;
+  rootNavUrl: any;
+
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: any,
+    private snackBarRef: MatSnackBarRef<EmbeddedViewRef<any>>,
+    private dialog: MatDialog,
+    private router: Router,
+    private techlifyUpdateService: TechlifyUpdateService,
+    private alertService: AlertService
+  ) { }
+
+  ngOnInit(): void {
+    this.techlifyUpdate = this.data.techlifyUpdate;
+    this.rootNavUrl = this.data.rootNavUrl;
+    this.determineDescription(this.techlifyUpdate?.description)
+  }
+
+  close(): void {
+    this.createUpdateViewRecord();
+    this.snackBarRef.dismiss();
+  }
+
+  determineDescription(description: any) {
+    if (!description || description.length <= this.maxDescriptionLength) {
+      this.descriptionText = description;
+      return;
+    }
+    this.descriptionText = description.substring(0, this.maxDescriptionLength) + "...";
+  }
+
+  openUpdateView(): void {
+    this.close();
+    const dialogRef = this.dialog.open(UpdateViewComponent, {
+      width: "800px",
+      autoFocus: false,
+      data: {
+        techlifyUpdate: this.techlifyUpdate,
+        rootNavUrl: this.data.rootNavUrl
+      } // Any data passed here will be injected into the model
+    });
+  }
+
+  openUpdateHistory(): void {
+    this.close();
+    this.router.navigate([this.rootNavUrl + "/update-history"]);
+  }
+
+  async createUpdateViewRecord() {
+    try {
+      var techlifyUpdateView = {
+        update_id: this.techlifyUpdate?.id
+      };
+      let result: any = await this.techlifyUpdateService.createUpdateViewRecord(techlifyUpdateView);
+    }
+    catch (error) {
+      this.alertService.addAlert("Unable to process, try later", "warn");
+    }
+  }
+}

package/src/lib/techlify-update/update-notifier/update-notifier.component.scss

@@ -0,0 +1,3 @@
+::ng-deep .white-bg {
+    background-color: white;
+}

package/src/lib/techlify-update/update-notifier/update-notifier.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateNotifierComponent } from './update-notifier.component';
+
+describe('UpdateNotifierComponent', () => {
+  let component: UpdateNotifierComponent;
+  let fixture: ComponentFixture<UpdateNotifierComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UpdateNotifierComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateNotifierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/techlify-update/update-notifier/update-notifier.component.ts

@@ -0,0 +1,56 @@
+import { UpdateNotifierSnackComponent } from './update-notifier-snack/update-notifier-snack.component';
+import { TechlifyUpdateService } from './../techlify-update.service';
+import { Component, Input, OnInit } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { AlertService } from '../../core/alert.service';
+
+@Component({
+  selector: 'app-update-notifier',
+  templateUrl: './update-notifier.component.html',
+  styleUrls: ['./update-notifier.component.scss']
+})
+export class UpdateNotifierComponent implements OnInit {
+  techlifyUpdate: any;
+  @Input() rootNavUrl: string = '/techlify-updates';
+
+  constructor(
+    private snackBar: MatSnackBar,
+    private techlifyUpdateService: TechlifyUpdateService,
+    private alertService: AlertService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(x => {
+      this.getNewUpdate();
+    }, 5000);
+  }
+
+  async getNewUpdate() {
+    try {
+      let result: any = await this.techlifyUpdateService.getNewUpdateForCurrentUser();
+      this.techlifyUpdate = result.item;
+      if (this.techlifyUpdate) {
+        this.showUpdate();
+      }
+    }
+    catch (error) {
+      console.log("Current user updates failed");
+    }
+  }
+
+  showUpdate() {
+    this.snackBar.openFromComponent(UpdateNotifierSnackComponent, {
+      data: {
+        techlifyUpdate: this.techlifyUpdate,
+        rootNavUrl: this.rootNavUrl
+      },
+      horizontalPosition: 'right',
+      verticalPosition: 'top',
+      panelClass: ['white-bg']
+    });
+  }
+
+}

package/src/lib/techlify-update/update-notifier/update-notifier.module.ts

@@ -0,0 +1,27 @@
+import { ActionPopupModule } from './../../action-popup/action-popup.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from './../../material.module';
+import { UpdateViewModule } from './../update-view/update-view.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdateNotifierComponent } from './update-notifier.component';
+import { UpdateNotifierSnackComponent } from './update-notifier-snack/update-notifier-snack.component';
+
+
+@NgModule({
+  declarations: [UpdateNotifierComponent, UpdateNotifierSnackComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    UpdateViewModule,
+    FlexLayoutModule,
+    ActionPopupModule
+  ],
+  exports: [
+    UpdateNotifierComponent,
+  ],
+  entryComponents: [
+    UpdateNotifierSnackComponent
+  ]
+})
+export class UpdateNotifierModule { }

package/src/lib/techlify-update/update-view/update-view.component.html

@@ -0,0 +1,63 @@
+<div fxLayout="column">
+  <div mat-dialog-title class="text-center">
+    <div fxLayout="row wrap" fxLayoutAlign="space-between">
+      <div fxFlex="80%">
+        <div fxLayout="row wrap" fxLayoutGap="1rem">
+          <span fxFlex="calc(10%-1rem)" fxLayoutAlign="start center">
+            <mat-icon class="large-icon primary-color">
+              <span class="material-icons-outlined">
+                grading
+              </span>
+            </mat-icon>
+          </span>
+          <div fxFlex="calc(90%-1rem)">
+            <div fxLayout="column" fxLayoutAlign="start">
+              <div fxLayout>
+                <h5 class="primary-color" style="margin-bottom:0;text-align: left;">
+                  App Update: {{techlifyUpdate?.title}}
+                </h5>
+              </div>
+              <div fxLayout="row" fxLayoutGap="1rem">
+                <small class="text-muted">
+                  <b>Release On</b> : {{techlifyUpdate?.released_on | date: 'mediumDate'}}
+                </small>
+                <small class="text-muted">
+                  <b>Version</b> : {{techlifyUpdate?.version}}
+                </small>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div fxLayoutAlign="end center" class="text-muted">
+        <button mat-icon-button type="button" (click)="close()">
+          <mat-icon>clear</mat-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div mat-dialog-content style="height: 500px;overflow: auto;">
+    <div fxLayout="column" class="text-muted" style="margin-top: 1rem;" [innerHtml]="techlifyUpdate?.description">
+    </div>
+  </div>
+
+  <div mat-dialog-actions fxLayout="row" [fxLayoutAlign]="!this.data?.isFromHistory ? 'space-between' : 'end'">
+    <button type="button" mat-button class="primary-color" (click)="openUpdateHistory()"
+      *ngIf="!this.data?.isFromHistory">
+      <mat-icon>
+        history
+      </mat-icon>
+      Update History
+    </button>
+    <a *ngIf="techlifyUpdate?.learn_more_link" [href]="techlifyUpdate?.learn_more_link" target="_blank"
+      style="text-decoration: none;">
+      <button type="button" mat-button class="text-muted">
+        Learn More
+      </button>
+    </a>
+    <button type="button" mat-stroked-button class="primary-color" (click)="close()">
+      OK
+    </button>
+  </div>
+</div>

package/src/lib/techlify-update/update-view/update-view.component.scss

@@ -0,0 +1,19 @@
+.large-icon {
+    transform: scale(2.3);
+}
+
+.primary-color {
+    color: #009fdd !important;
+}
+
+.primary-bg {
+    background-color: #009fdd !important;
+}
+
+.text-muted {
+    color: lightgrey;
+}
+
+.text-white {
+    color: lightgrey;
+}

package/src/lib/techlify-update/update-view/update-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateViewComponent } from './update-view.component';
+
+describe('UpdateViewComponent', () => {
+  let component: UpdateViewComponent;
+  let fixture: ComponentFixture<UpdateViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UpdateViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/techlify-update/update-view/update-view.component.ts

@@ -0,0 +1,36 @@
+import { Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-update-view',
+  templateUrl: './update-view.component.html',
+  styleUrls: ['./update-view.component.scss']
+})
+export class UpdateViewComponent implements OnInit {
+  techlifyUpdate: any;
+  rootNavUrl: any;
+
+  constructor(
+    public dialogRef: MatDialogRef<UpdateViewComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.techlifyUpdate = this.data.techlifyUpdate;
+    this.rootNavUrl = this.data.rootNavUrl;
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+
+  openUpdateHistory(): void {
+    this.close();
+    this.router.navigate([this.rootNavUrl + "/update-history"]);
+  }
+
+}

package/src/lib/techlify-update/update-view/update-view.module.ts

@@ -0,0 +1,23 @@
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from './../../material.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdateViewComponent } from './update-view.component';
+
+
+
+@NgModule({
+  declarations: [UpdateViewComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FlexLayoutModule
+  ],
+  exports: [
+    UpdateViewComponent
+  ],
+  entryComponents: [
+    UpdateViewComponent
+  ]
+})
+export class UpdateViewModule { }

package/src/lib/timeline-filter/README.md

@@ -0,0 +1,60 @@
+# Timeline Filter
+
+Timeline filter module is a Techlify core feature which is designed and developed to help developers to integrate the timeline selector component.
+## Installation
+The Timeline filter module module is contained within the [ngx-techlify-core](npmjs.com/package/ngx-techlify-core). The npm package `ngx-techlify-core` can be installed by going into the terminal (press ctrl+` to view terminal in vs-code) and writing the below command.
+
+```sh
+npm install --save ngx-techlify-core
+```
+## How to use
+Import the `TimelineFilterModule` in the specific module where you want to use it.
+`app.component.module`
+```sh
+import { TimelineFilterModule } from 'ngx-techlify-core'; 
+```
+Use the component selector in the component template.
+`app.component.html`
+ ```sh
+<app-timeline-filter formControlName="duration"
+                    [timelines]="timelineOptions"
+                    labelText="Due Date"
+                    [touchUi]="true"
+                    appearance="fill"
+                    (selectionChange)="onDateChange($event)">
+</app-timeline-filter>
+ ```
+`app.component.ts`
+ ```sh
+import { Component, OnInit } from '@angular/core';
+import { Timeline, TimelineValue } from 'ngx-techlify-core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class InvoiceListFilterComponent implements OnInit {
+    form: FilterForm;
+    constructor(private fb: FormBuilder) {
+        // add this controls to your form group
+        this.form = this.fb.group({
+            ...
+           duration: new FormControl(Timeline.THIS_WEEK),
+           date_from: new FormControl(''),
+           date_to: new FormControl('')
+            ...
+        });
+    }
+    
+    /**
+    * Handle on date change.
+    * @param range
+    */
+    onDateChange(range: TimelineValue) {
+        // you update the date_from and date_to of your form here.
+    }
+}
+ ```
+That's It!

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

@@ -0,0 +1,109 @@
+import * as moment_ from 'moment';
+const moment = moment_;
+import { Timeline } from "./timeline.model";
+
+
+export interface TimelineValue {
+  date_from: Date,
+  date_to: Date,
+  show_custom_field: boolean
+}
+export function calculateTimeline(value: any) {
+  const date = new Date();
+  const data: any = {
+    'date_from': date,
+    'date_to': date,
+    'show_custom_field': false
+  };
+  switch (value) {
+    case Timeline.CUSTOM: { //Custom
+      data.show_custom_field = true;
+      break;
+    }
+    case Timeline.TODAY: { // Today
+      let now = moment();
+      data.date_from = now.startOf('day').toISOString();
+      data.date_to = now.endOf('day').toISOString();
+      break;
+    }
+    case Timeline.YESTERDAY: { // Yesterday
+      let now = moment().subtract(1, 'day');
+      data.date_from = now.startOf('day').toISOString();
+      data.date_to = now.endOf('day').toISOString();
+      break;
+    }
+    case Timeline.THIS_WEEK: { // This Week
+      let now = moment();
+      data.date_from = now.startOf('isoWeek').toISOString();
+      data.date_to = now.endOf('isoWeek').toISOString();
+      break;
+    }
+    case Timeline.LAST_WEEK: { // Last Week
+      let now = moment().subtract(1, 'week');
+      data.date_from = now.startOf('isoWeek').toISOString();
+      data.date_to = now.endOf('isoWeek').toISOString();
+      break;
+    }
+    case Timeline.THIS_MONTH: { //This Month
+      let now = moment();
+      data.date_from = now.startOf('month').toISOString();
+      data.date_to = now.endOf('month').toISOString();
+      break;
+    }
+    case Timeline.LAST_MONTH: { // Last Month
+      let now = moment().subtract(1, 'month');
+      data.date_from = now.startOf('month').toISOString();
+      data.date_to = now.endOf('month').toISOString();
+      break;
+    }
+    case Timeline.THIS_QUARTER: { // This Quarter
+      let now = moment();
+      data.date_from = now.startOf('quarter').toISOString();
+      data.date_to = now.endOf('quarter').toISOString();
+      break;
+    }
+    case Timeline.LAST_QUARTER: { // Last Quarter
+      let now = moment().subtract(1, 'quarter');
+      data.date_from = now.startOf('quarter').toISOString();
+      data.date_to = now.endOf('quarter').toISOString();
+      break;
+    }
+    case Timeline.THIS_YEAR: { // This Year
+      let now = moment();
+      data.date_from = now.startOf('year').toISOString();
+      data.date_to = now.endOf('year').toISOString();
+      break;
+    }
+    case Timeline.LAST_YEAR: { // Last Year
+      let now = moment().subtract(1, 'year');
+      data.date_from = now.startOf('year').toISOString();
+      data.date_to = now.endOf('year').toISOString();
+      break;
+    }
+    case Timeline.TOMMOROW: {
+      let now = moment().add(1, 'day');
+      data.date_from = now.startOf('day').toISOString();
+      data.date_to = now.endOf('day').toISOString();
+      break;
+    }
+    case Timeline.NEXT_WEEK: {
+      let now = moment().add(1, 'week');
+      data.date_from = now.startOf('isoWeek').toISOString();
+      data.date_to = now.endOf('isoWeek').toISOString();
+      break;
+    }
+    case Timeline.NEXT_MONTH: {
+      let now = moment().add(1, 'month');
+      data.date_from = now.startOf('month').toISOString();
+      data.date_to = now.endOf('month').toISOString();
+      break;
+    }
+    default: { // All
+      data.date_from = '';
+      data.date_to = '';
+      break;
+    }
+
+  }
+  return data;
+}

package/{lib/timeline-filter/index.d.ts → src/lib/timeline-filter/index.ts}

@@ -1,3 +1,3 @@
-export * from './calculate-timeline';
-export * from './timeline.model';
-export * from './timeline-filter.component';
+export * from './calculate-timeline';
+export * from './timeline.model';
+export * from './timeline-filter.component';

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TimelineFilterRoutingModule { }

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

@@ -0,0 +1,54 @@
+<ng-container *ngIf="form" [formGroup]="form">
+  <mat-form-field [appearance]="appearance">
+      <mat-label>{{labelText}}</mat-label>
+      <mat-select [formControl]="timelineValue">
+          <mat-option *ngFor="let timeline of timelines" [value]="timeline.value">
+              {{timeline.viewValue}}
+          </mat-option>
+      </mat-select>
+      <button mat-button *ngIf="showClearbutton && timelineValue.value" matSuffix mat-icon-button
+          (click)="timelineValue.setValue('')">
+          <mat-icon>close</mat-icon>
+      </button>
+  </mat-form-field>
+
+  <ng-container *ngIf="showCustomDateFields">
+      <mat-form-field [appearance]="appearance">
+          <mat-label>From Date</mat-label>
+          <input matInput formControlName="{{dateFrom}}" [matDatepicker]="fromPicker" (click)="fromPicker.open()"
+              placeholder="From Date" readonly />
+          <mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
+          <mat-datepicker #fromPicker></mat-datepicker>
+          <button mat-button *ngIf="getFieldValue(dateFrom)" matSuffix mat-icon-button
+              (click)="resetFieldValue(dateFrom)">
+              <mat-icon>close</mat-icon>
+          </button>
+      </mat-form-field>
+
+      <mat-form-field [appearance]="appearance">
+          <mat-label>To Date</mat-label>
+          <input matInput formControlName="{{dateTo}}" [matDatepicker]="toPicker" (click)="toPicker.open()"
+              placeholder="To Date" readonly />
+          <mat-datepicker-toggle matSuffix [for]=""></mat-datepicker-toggle>
+          <mat-datepicker #toPicker></mat-datepicker>
+          <button mat-button *ngIf="getFieldValue(dateTo)" matSuffix mat-icon-button
+              (click)="resetFieldValue(dateTo)">
+              <mat-icon>close</mat-icon>
+          </button>
+      </mat-form-field>
+
+  </ng-container>
+</ng-container>
+<div *ngIf="!form" [formGroup]="selectorForm">
+  <mat-select formControlName="select_value" focused="false" [required]="required"
+      autocomplete="off" (selectionChange)="_handleInput()">
+      <mat-option *ngFor="let timeline of timelines" [value]="timeline?.value">
+          {{ timeline?.viewValue }} {{ selectedRange?.show_custom_field && timeline?.value == 1 ? getDateRangeString() : '' }}
+      </mat-option>
+  </mat-select>
+  <mat-date-range-input hidden (dateChange)="onCustomDateChange($event)" [rangePicker]="picker">
+      <input matStartDate #customStartDate>
+      <input matEndDate (dateChange)="dateRangeChange(customStartDate, customEndDate)" #customEndDate>
+  </mat-date-range-input>
+  <mat-date-range-picker #picker [touchUi]="touchUi"></mat-date-range-picker>
+</div>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimelineFilterComponent } from './timeline-filter.component';
+
+describe('TimelineFilterComponent', () => {
+  let component: TimelineFilterComponent;
+  let fixture: ComponentFixture<TimelineFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TimelineFilterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TimelineFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});