ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/data-table/data-table.component.spec.ts

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

package/src/lib/data-table/data-table.component.ts

@@ -0,0 +1,232 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  AfterViewInit,
+  ViewChild
+} from "@angular/core";
+
+import { SelectionModel } from "@angular/cdk/collections";
+import { MatMenuTrigger } from '@angular/material/menu';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { DataTable } from './data-table.model';
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+
+@UntilDestroy()
+@Component({
+  selector: "app-data-table",
+  templateUrl: "./data-table.component.html",
+  styleUrls: ["./data-table.component.scss"]
+})
+export class DataTableComponent implements OnInit, OnChanges, AfterViewInit {
+
+  trigger: MatMenuTrigger;
+
+  @Input() data: any;
+
+  @Input() config: DataTable;
+
+  dataSource: MatTableDataSource<any> = new MatTableDataSource([]);
+
+  @Input() selection: SelectionModel<any>;
+
+  @Output() action = new EventEmitter();
+  @Output() selctionChange = new EventEmitter();
+  @Output() rowClick = new EventEmitter();
+  @Output() tableScroll = new EventEmitter();
+  @Output() sortChanged = new EventEmitter();
+
+  page: number;
+  lastPage: number;
+  perPage: number;
+
+
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  static nextId = 0;
+  @Input() elementId: string = `data-table-${DataTableComponent.nextId++}`;
+
+  constructor() { }
+
+  ngOnInit() { }
+
+  /**Life cycle hook method */
+  ngAfterViewInit() {
+    // Assign the data to the data source for the table to render
+    this.dataSource = new MatTableDataSource(this.data);
+
+    // Emit change in selection
+    if (this.selection) {
+      this.selection.changed.pipe().subscribe((change: any) => {
+        if (this.selection.selected) {
+          this.selctionChange.emit(this.selection.selected);
+        }
+      });
+    }
+
+    if (this.sort) {
+      this.sort.sortChange.pipe(untilDestroyed(this))
+        .subscribe((value: any) => {
+          this.sortChanged.emit(value);
+        })
+    }
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected()
+      ? this.clearSelection()
+      : this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  /**clear selection*/
+  clearSelection() {
+    this.selection.clear();
+    this.selctionChange.emit(this.selection.selected);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.initializeConfig(changes);
+    if (changes.data && !changes.data.isFirstChange() && this.dataSource) {
+      // If not first change
+      this.dataSource.data = changes.data.currentValue;
+    }
+  }
+
+  initializeConfig(changes: SimpleChanges) {
+    if (changes.config && !changes.config.isFirstChange()) {
+      this.config = changes.config.currentValue;
+    }
+    this.page = this.config.page || 1;
+    this.lastPage = this.config.lastPage || this.page;
+    this.perPage = this.config.perPage || 20;
+  }
+
+  onScroll() {
+    if (this.page < this.lastPage) {
+      this.page += 1;
+      this.tableScroll.emit({ page: this.page, lastPage: this.lastPage, perPage: this.perPage });
+    }
+  }
+
+  /**Method invokes when edit action icon is clickes */
+  editClicked(event: any, element: any) {
+    this.action.emit({ action: "edit", value: element });
+    event.stopPropagation();
+  }
+
+  /**Method invokes when view action icon is clickes */
+  viewClicked(event: any, element: any) {
+    this.action.emit({ action: "view", value: element });
+    event.stopPropagation();
+  }
+
+  /**Method invokes when edit action icon is clickes */
+  deactivateClicked(event: any, element: any) {
+    this.action.emit({ action: "deactivate", value: element });
+    event.stopPropagation();
+  }
+
+  /**Method invokes when download action icon is clickes */
+  downloadClicked(event: any, element: any) {
+    this.action.emit({ action: "download", value: element });
+    event.stopPropagation();
+  }
+
+  /**Method invokes when print action icon is clickes */
+  printClicked(event: any, element: any) {
+
+    this.action.emit({ action: 'print', value: element });
+    event.stopPropagation();
+
+  }
+
+  /**Method invokes when a row is clicked */
+  rowClicked(event: any, element: any) {
+    this.rowClick.emit(element);
+    event.stopPropagation();
+  }
+
+  /**Method invokes when menu action icon is hovered */
+  actionMenuClick(event: any, element: any, menuValue: string) {
+    this.action.emit({ action: menuValue, value: element });
+    this.trigger.closeMenu();
+    event.stopPropagation();
+  }
+
+  /**Method invokes when menu action icon is hovered and selects for particular action*/
+  actionMenuTriggerClick(event: any, trigger: MatMenuTrigger) {
+    this.trigger = trigger;
+    event.stopPropagation();
+  }
+
+  checkEdit(ele: any) {
+    if (this.config.editDisableFunction) {
+      return this.config.editDisableFunction(ele);
+    }
+
+    return true;
+  }
+
+  checkView(ele: any) {
+    if (this.config.viewDisableFunction) {
+      return this.config.viewDisableFunction(ele);
+    }
+
+    return true;
+  }
+
+  checkPrint(ele: any) {
+    if (this.config.printDisableFunction) {
+      return this.config.printDisableFunction(ele);
+    }
+
+    return true;
+  }
+
+  checkActions(ele: any) {
+    if (this.config.actionsMenuFunction) {
+      return this.config.actionsMenuFunction(ele);
+    }
+
+    return true;
+  }
+
+  checkActionButton(ele: any, value: any) {
+    if (this.config.actionsMenuButtonFunction) {
+      return this.config.actionsMenuButtonFunction(ele, value);
+    }
+    return true;
+  }
+
+  getValue(ele: any, keyString: string) {
+    keyString = keyString.replace(/\[(\w+)\]/g, ".$1"); // convert indexes to properties
+    keyString = keyString.replace(/^\./, ""); // strip a leading dot
+    const keyList = keyString.split(".");
+    for (let i = 0, n = keyList.length; i < n; ++i) {
+      const key = keyList[i];
+      if (ele && key in ele) {
+        ele = ele[key];
+      } else {
+        return;
+      }
+    }
+    return ele;
+  }
+
+  ngOnDestroy() {
+    //Until Destroy uses it.
+  }
+}

package/{lib/data-table/data-table.model.d.ts → src/lib/data-table/data-table.model.ts}

@@ -1,4 +1,4 @@
-export declare class DataTable {
+export class DataTable {
     displayedColumns: string[];
     columnsConfig: ColumnConfig[];
     actionsConfig?: ActionConfig;
@@ -18,7 +18,8 @@ export declare class DataTable {
     pageSizeOptions?: number[];
     style?: any;
 }
-declare class ColumnConfig {
+
+class ColumnConfig {
     title: string;
     value: string;
     sort?: boolean;
@@ -26,7 +27,8 @@ declare class ColumnConfig {
     currencyField?: boolean;
     format?: string;
 }
-declare class ActionConfig {
+
+class ActionConfig {
     edit?: boolean;
     view?: boolean;
     download?: boolean;
@@ -34,13 +36,14 @@ declare class ActionConfig {
     deactivate?: boolean;
     actionsMenu?: ActionsMenu[];
 }
-declare class ActionsMenu {
+
+class ActionsMenu {
     name: string;
     value: string;
 }
-export declare class PageEvent {
+
+export class PageEvent {
     page: number;
     lastPage?: number;
     perPage: number;
 }
-export {};

package/src/lib/data-table/data-table.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { DataTableComponent } from './data-table.component';
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { MaterialModule } from '../material.module';
+
+
+@NgModule({
+  imports: [
+    FlexLayoutModule,
+    CommonModule,
+    InfiniteScrollModule,
+    MaterialModule
+  ],
+  declarations: [
+    DataTableComponent
+  ],
+  exports: [
+    DataTableComponent
+  ]
+})
+export class DataTableModule { }

package/{lib/data-table/index.d.ts → src/lib/data-table/index.ts}

@@ -1,2 +1,2 @@
 export * from './data-table.component';
-export * from './data-table.model';
+export * from './data-table.model';

package/src/lib/date-validator.ts

@@ -0,0 +1,12 @@
+import { FormControl } from "@angular/forms";
+
+export function DateValidator(): any {
+    return (control: FormControl): { [key: string]: any } => {
+
+        const val: any = new Date(control.value);
+        if (!!control.value && val == 'Invalid Date') {
+            return { invalidDate: true };
+        }
+        return null;
+    };
+}

package/src/lib/document-viewer/document-viewer.component.css

@@ -0,0 +1,5 @@
+.image-fit{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}

package/src/lib/document-viewer/document-viewer.component.html

@@ -0,0 +1,19 @@
+<mat-card *ngIf="viewerType === 'image'">
+    <img [ngStyle]="config.imageStyle" mat-card-image [src]="fileUrl" />
+    <mat-card-actions>
+        <button type="button" mat-raised-button (click)="removeFile()" *ngIf="!disableEdit && !config.hideRemove">
+            Remove
+        </button>
+    </mat-card-actions>
+</mat-card>
+
+<div class="mat-elevation-z1 p-4" *ngIf="viewerType !== 'image'">
+    <a [href]="fileUrl" target="_blank">{{fileName}}</a>
+    <ngx-doc-viewer [ngStyle]="config.viewerStyle" *ngIf="viewerType !== null" [url]="fileUrl" [viewer]="viewerType">
+    </ngx-doc-viewer>
+    <div class="mt-2" *ngIf="!config.hideRemove">
+        <button type="button" mat-raised-button (click)="removeFile()" *ngIf="!disableEdit">
+            Remove
+        </button>
+    </div>
+</div>

package/src/lib/document-viewer/document-viewer.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { ViewerConfig } from './viewer-config.model';
+
+@Component({
+  selector: 'app-document-viewer',
+  templateUrl: './document-viewer.component.html',
+  styleUrls: ['./document-viewer.component.css']
+})
+export class DocumentViewerComponent implements OnInit {
+
+
+  @Input() config!: ViewerConfig;
+
+  @Input() file!: any;
+
+  @Input() fileUrl!: any;
+
+  @Input() disableEdit: boolean;
+
+  @Output() remove = new EventEmitter();
+  viewerType: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.initData();
+  }
+
+  removeFile() {
+    this.remove.emit();
+  }
+
+  initData() {
+    if (this.file) {
+      var ext = this.getFileExtension(this.file);
+      if (ext === 'ppt' || ext === 'pptx' || ext === 'doc' || ext === 'docx' || ext === 'xls' || ext === 'xlsx') {
+        this.viewerType = "office";
+      }
+      else if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif') {
+        this.viewerType = "image";
+      }
+      else if (ext === 'pdf') {
+        this.viewerType = "pdf";
+      }
+      else {
+        this.viewerType = null;
+      }
+    }
+  }
+
+  get fileName() {
+    if (this.file) {
+      let nameArray = this.file.split('/');
+      if (nameArray.length === 2) {
+        return nameArray[1];
+      }
+      return nameArray[0];
+    }
+    return '';
+  }
+
+  getFileExtension(file: any) {
+    return file.split('.').pop();
+  }
+
+}

package/src/lib/document-viewer/document-viewer.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { DocumentViewerComponent } from './document-viewer.component';
+import { NgxDocViewerModule } from 'ngx-doc-viewer';
+import { MaterialModule } from '../material.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    NgxDocViewerModule,
+    MaterialModule
+  ],
+  declarations: [
+    DocumentViewerComponent
+  ],
+  exports: [
+    DocumentViewerComponent
+  ]
+})
+export class DocumentViewerModule { }

package/{lib/document-viewer/index.d.ts → src/lib/document-viewer/index.ts}

@@ -1,2 +1,2 @@
 export * from './document-viewer.component';
-export * from './viewer-config.model';
+export * from './viewer-config.model';

package/src/lib/document-viewer/viewer-config.model.ts

@@ -0,0 +1,5 @@
+export class ViewerConfig {
+  imageStyle?: any;
+  viewerStyle?: any;
+  hideRemove?: boolean;
+}

package/src/lib/email-subscription/email-subscription-for-user/email-subscription-for-user-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthenticationGuard } from '../../core/authentication.guard';
+import { EmailSubscriptionForUserComponent } from './email-subscription-for-user.component';
+
+export const esfur = {
+  permissions: {
+    only: ['client_admin']
+  }
+};
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EmailSubscriptionForUserComponent,
+    canActivate: [AuthenticationGuard],
+    data: esfur
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EmailSubscriptionForUserRoutingModule { }

package/src/lib/email-subscription/email-subscription-for-user/email-subscription-for-user.component.html

@@ -0,0 +1,23 @@
+<div fxLayout="column" class="container my-4">
+
+    <div class="scroll-container" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
+        (scrolled)="onScroll()" [scrollWindow]="false">
+        <mat-list>
+            <div mat-subheader>Available Subscriptions</div>
+            <mat-list-item *ngFor="let sub of subscriptions">
+                <mat-icon mat-list-icon>email</mat-icon>
+                <div mat-line>{{sub?.title}} </div>
+                <div mat-line class="text-secondary">{{sub?.frequency?.title}}</div>
+                <div mat-line> {{sub?.description}} </div>
+                <div fxLayout fxLayoutAlign="end">
+                    <button type="button" *ngIf="!sub?.current_user_subscription" mat-raised-button color="primary"
+                        (click)="subscribe(sub)">Subscribe</button>
+                    <button type="button" *ngIf="sub?.current_user_subscription" mat-stroked-button color="primary"
+                        (click)="unsubscribe(sub)">Unsubscribe</button>
+                </div>
+                <mat-divider></mat-divider>
+            </mat-list-item>
+        </mat-list>
+    </div>
+
+</div>

package/src/lib/email-subscription/email-subscription-for-user/email-subscription-for-user.component.scss

@@ -0,0 +1,4 @@
+.scroll-container{
+    max-height: 800px;
+    overflow-y: auto;
+}

package/src/lib/email-subscription/email-subscription-for-user/email-subscription-for-user.component.spec.ts

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

package/src/lib/email-subscription/email-subscription-for-user/email-subscription-for-user.component.ts

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { HttpService } from '../../core/http.service';
+import { PageEvent } from '../../data-table/data-table.model';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-email-subscription-for-user',
+  templateUrl: './email-subscription-for-user.component.html',
+  styleUrls: ['./email-subscription-for-user.component.scss']
+})
+export class EmailSubscriptionForUserComponent implements OnInit {
+
+  subscriptions: any[] = [];
+  pageEvent: PageEvent = { page: 1, perPage: 25, lastPage: 1 };
+  filters: any = {
+    sort_by: 'created_at|desc',
+    isLoadRelations: true,
+    relations: 'frequency,currentUserSubscription'
+  };
+
+  constructor(
+    private http: HttpService
+  ) { }
+
+  ngOnInit(): void {
+    this.fetchSubscriptions();
+  }
+
+  fetchSubscriptions() {
+    this.http.get(`api/email-subscription-types`, { params: { ...this.filters, ...this.pageEvent } })
+      .pipe(untilDestroyed(this))
+      .subscribe((result: any) => {
+        this.subscriptions = this.subscriptions.concat(result.data);
+        this.pageEvent.page = result.current_page;
+        this.pageEvent.lastPage = result.last_page;
+      });
+  }
+
+  onScroll() {
+    if (this.pageEvent.lastPage > this.pageEvent.page) {
+      this.pageEvent.page += 1;
+      this.fetchSubscriptions();
+    }
+  }
+
+  subscribe(sub: any) {
+    this.http.post(`api/email-subscription-for-user`, { email_type_id: sub?.id })
+      .pipe(untilDestroyed(this))
+      .subscribe((result: any) => {
+        sub.current_user_subscription = result?.item;
+      });
+  }
+
+  unsubscribe(sub: any) {
+    this.http.delete(`api/email-subscription-users/${sub?.current_user_subscription?.id}`)
+      .pipe(untilDestroyed(this))
+      .subscribe((_: any) => {
+        sub.current_user_subscription = null;
+      });
+  }
+
+
+  reload() {
+    this.subscriptions = [];
+    this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
+    this.fetchSubscriptions();
+  }
+
+  ngOnDestroy() {
+    //Until destroyed uses it
+  }
+
+}

package/src/lib/email-subscription/email-subscription-for-user/email-subscription-for-user.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmailSubscriptionForUserRoutingModule } from './email-subscription-for-user-routing.module';
+import { EmailSubscriptionForUserComponent } from './email-subscription-for-user.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from '../../material.module';
+
+
+@NgModule({
+  declarations: [EmailSubscriptionForUserComponent],
+  imports: [
+    CommonModule,
+    InfiniteScrollModule,
+    MaterialModule,
+    FlexLayoutModule,
+    EmailSubscriptionForUserRoutingModule
+  ],
+  exports: [EmailSubscriptionForUserComponent]
+})
+export class EmailSubscriptionForUserModule { }

package/src/lib/email-subscription/email-subscription-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 EmailSubscriptionRoutingModule { }

package/src/lib/email-subscription/email-subscription-type/email-subscription-type-form/email-subscription-type-form-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 EmailSubscriptionTypeFormRoutingModule { }