ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/note/note-list/note-list.component.ts

@@ -0,0 +1,156 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NoteService } from '../note.service';
+import { MatDialog } from '@angular/material/dialog';
+import { NoteFormComponent } from '../note-form/note-form.component';
+import { ActionPopupComponent } from '../../action-popup/action-popup.component';
+import { ActionPopup } from '../../action-popup/action-popup.model';
+
+@Component({
+  selector: 'app-note-list',
+  templateUrl: './note-list.component.html',
+  styleUrls: ['./note-list.component.css']
+})
+export class NoteListComponent implements OnInit {
+
+  @Input() relatedModelId !: any;
+  @Input() modelType !: any;
+  @Input() readonly: boolean = false;
+  @Input() labelText: string = 'Note';
+  @Input() commentsView: boolean = false;
+
+  notes: any[] = [];
+  filters: any;
+  displayedColumns = [
+    'index',
+    'note',
+    'actions'
+  ];
+
+  page = 1;
+  lastPage = 1;
+
+  constructor(private noteService: NoteService,
+    private dialog: MatDialog
+  ) {
+    this.filters = {};
+    this.filters.sort_by = "created_at|DESC";
+  }
+
+  ngOnInit() {
+    if (this.readonly) {
+      this.displayedColumns = this.displayedColumns.filter(x => x !== 'actions');
+    }
+    this.filters.related_model_id = this.relatedModelId;
+    this.filters.model_type = this.modelType;
+    this.loadData();
+  }
+
+  async loadData() {
+
+    const result: any = await this.noteService.getNotes({ ...this.filters, page: this.page });
+    this.notes = this.notes.concat(result.data);
+    this.page = result.current_page;
+    this.lastPage = result.last_page;
+  }
+
+  addNote() {
+    const dialogRef = this.dialog.open(NoteFormComponent, {
+      width: "400px",
+      data: {
+        note: { related_model_id: this.relatedModelId, model_type: this.modelType },
+        labelText: this.labelText,
+      },
+      autoFocus: false
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.resetScroll();
+        this.loadData();
+      }
+    });
+  }
+
+  editNote(note: any) {
+    const dialogRef = this.dialog.open(NoteFormComponent, {
+      width: "400px",
+      data: {
+        note: note,
+        update: true,
+        labelText: this.labelText
+      },
+      autoFocus: false
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.resetScroll();
+        this.loadData();
+      }
+    });
+  }
+
+  async deleteNote(note: any) {
+    const dialogRef = this.dialog.open(ActionPopupComponent, {
+      width: "400px",
+      data: <ActionPopup>{
+        title: `Delete ${this.labelText}`,
+        message: `Are you sure to delete?`
+      },
+      autoFocus: false
+    });
+
+    dialogRef.afterClosed().subscribe(async result => {
+      if (result) {
+        //Action confirmed
+
+        const result = await this.noteService.deleteNote(note);
+        this.notes = this.notes.filter((item: any) => item.id !== note.id);
+
+      }
+    });
+  }
+
+  resetScroll() {
+    this.page = 1;
+    this.lastPage = 1;
+    this.notes = [];
+  }
+
+  onScroll() {
+    if (this.page < this.lastPage) {
+      this.page += 1;
+      this.loadData();
+    }
+  }
+
+  commentAction(event: any) {
+    if (event.type === "save") {
+      if (event.value.id) {
+        this.editComment(event.value);
+        return;
+      }
+      this.addComment(event.value);
+      return;
+    }
+    this.deleteNote(event.value);
+  }
+
+  async editComment(comment: any) {
+    const result: any = await this.noteService.editNote(comment);
+    let index = this.notes.findIndex(
+      (x: any) => x.id === comment.id
+    );
+    if (index !== -1) {
+      this.notes[index] = result.item;
+    }
+  }
+
+  async addComment(comment: any) {
+    comment.related_model_id = this.relatedModelId;
+    comment.model_type = this.modelType;
+    const result: any = await this.noteService.addNote(comment);
+    this.notes.push(result.item);
+  }
+
+}

package/src/lib/note/note.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NoteListComponent } from './note-list/note-list.component';
+import { NoteFormComponent } from './note-form/note-form.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ActionPopupModule } from '../action-popup/action-popup.module';
+import { MaterialModule } from '../material.module';
+import { CommentFormComponent } from './comment-form/comment-form.component';
+import { ReadMoreModule } from '../read-more/read-more.module';
+
+@NgModule({
+  declarations: [
+    NoteListComponent,
+    NoteFormComponent,
+    CommentFormComponent,
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    InfiniteScrollModule,
+    FlexLayoutModule,
+    ActionPopupModule,
+    MaterialModule,
+    ReadMoreModule
+  ],
+  exports: [
+    NoteListComponent
+  ],
+  entryComponents: [NoteFormComponent]
+})
+export class NoteModule { }

package/src/lib/note/note.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NoteService } from './note.service';
+
+describe('NoteService', () => {
+  let service: NoteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NoteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/note/note.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { HttpService } from '../core/http.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NoteService {
+
+  constructor(private http: HttpService) { }
+
+  getNotes(filterModel: any) {
+    return this.http.get('api/notes', { params: filterModel }).toPromise();
+  }
+
+  addNote(note: any) {
+    return this.http.post('api/notes', note).toPromise();
+  }
+
+  editNote(note: any) {
+    return this.http.put(`api/notes/${note.id}`, note).toPromise();
+  }
+
+  deleteNote(note: any) {
+    return this.http.delete(`api/notes/${note.id}`).toPromise();
+  }
+}

package/src/lib/read-more/read-more.component.html

@@ -0,0 +1,3 @@
+<div [innerHTML]="currentText"></div>
+<a href="javascript:;" *ngIf="!hideToggle" class="primary-color hoverable" (click)="toggleView()">Read
+  {{ isCollapsed ? "more" : "less" }}</a>

package/src/lib/read-more/read-more.component.scss

@@ -0,0 +1,8 @@
+div.collapsed {
+    height: 250px;
+    overflow: hidden;
+}
+
+.primary-color {
+  color: #009fdd !important;
+}

package/src/lib/read-more/read-more.component.spec.ts

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

package/src/lib/read-more/read-more.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Input } from "@angular/core";
+
+@Component({
+  selector: "app-read-more",
+  templateUrl: "./read-more.component.html",
+  styleUrls: ["./read-more.component.scss"]
+})
+export class ReadMoreComponent implements OnInit {
+  @Input() text: string;
+  @Input() maxLength: number = 100;
+  currentText: string;
+  hideToggle: boolean = true;
+
+  isCollapsed: boolean = true;
+
+  constructor() {}
+
+  ngOnInit() {
+    this.determineView();
+  }
+
+  toggleView() {
+    this.isCollapsed = !this.isCollapsed;
+    this.determineView();
+  }
+
+  determineView() {
+    if (!this.text || this.text.length <= this.maxLength) {
+      this.currentText = this.text;
+      this.isCollapsed = false;
+      this.hideToggle = true;
+      return;
+    }
+    this.hideToggle = false;
+    if (this.isCollapsed == true) {
+      this.currentText = this.text.substring(0, this.maxLength) + "...";
+    } else if (this.isCollapsed == false) {
+      this.currentText = this.text;
+    }
+  }
+}

package/src/lib/read-more/read-more.module.ts

@@ -0,0 +1,18 @@
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MaterialModule } from '../material.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReadMoreComponent } from './read-more.component';
+
+@NgModule({
+  declarations: [ReadMoreComponent],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FlexLayoutModule
+  ],
+  exports: [
+    ReadMoreComponent
+  ]
+})
+export class ReadMoreModule { }

package/src/lib/request-helper/request-helper.service.ts

@@ -0,0 +1,92 @@
+/* tslint:disable:radix */
+import { Injectable } from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import * as moment from 'moment/moment';
+import {FormGroup} from '@angular/forms';
+import {isNumeric} from 'rxjs/internal-compatibility';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RequestHelperService {
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) { }
+
+  /**
+   * Update the form values from the URL query params.
+   * @param formGroup FormGroup
+   * @param formConfig FormConfig
+   */
+  updateFormWithQueryParams(formGroup: FormGroup, formConfig: any): void {
+    const queryParams = this.activatedRoute.snapshot.queryParams;
+    for (const key in formGroup.controls) {
+      if (Object.prototype.hasOwnProperty.call(formGroup.controls, key) &&
+        Object.prototype.hasOwnProperty.call(queryParams, key)) {
+        formGroup.get(key).patchValue(this.formatValue(queryParams[key], formConfig[key]), { emitEvent: false });
+      }
+    }
+  }
+
+  /**
+   * Convert the object to form data for the request.
+   * @param data Data Object
+   * @return Object
+   */
+  convertToFormData(data: any): any {
+    const newData = {};
+    for (const prop in data) {
+      if (Object.prototype.hasOwnProperty.call(data, prop)) {
+        if (Array.isArray(data[prop])) {
+          // convert array to comma separated string
+          newData[prop] = (data[prop] as []).join(',');
+        } else if (!Number.isInteger(Number.parseInt(data[prop])) && !isNaN(Date.parse(data[prop]))) {
+          // check if value is date and not a number
+          const date  = moment(data[prop]).toISOString();
+          newData[prop] = moment(date).format('Y-MM-DD');
+        } else {
+          newData[prop] = data[prop];
+        }
+      }
+    }
+    return newData;
+  }
+
+  /**
+   * Update URL with the filters.
+   * @param queryParams Query Params
+   * @return Promise
+   */
+  updateQueryParams(queryParams: any): Promise<boolean> {
+    return this.router.navigate(
+      [],
+      {
+        relativeTo: this.activatedRoute,
+        queryParams,
+        queryParamsHandling: 'merge'
+      }
+    );
+  }
+
+  /**
+   * Format value.
+   * @description Convert the comma separated values to array if it is multiple selectable.
+   * @param value Value to be converted
+   * @param formGroupElement Form group element
+   */
+  formatValue(value: string, formGroupElement: any): string | number[] | number | boolean {
+    if (value && formGroupElement?.multiple && formGroupElement?.multiple === true ) {
+      const array = value?.split(',');
+      return array.map((val: string) => isNumeric(val) ? Number.parseInt(val) : val);
+    } else if (value && formGroupElement?.number && formGroupElement?.number === true) {
+      return Number.parseInt(value);
+    } else if (value && formGroupElement?.boolean) {
+      return value === 'true';
+    } else {
+      return value;
+    }
+  }
+}

package/src/lib/searchable-selector/index.ts

@@ -0,0 +1,2 @@
+export * from './searchable-selector.component';
+export * from './mat-select-infinite-scroll.directive';

package/src/lib/searchable-selector/mat-select-infinite-scroll.directive.ts

@@ -0,0 +1,89 @@
+import { AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
+import { MatSelect, SELECT_ITEM_HEIGHT_EM } from '@angular/material/select';
+import { debounceTime, takeUntil, tap } from 'rxjs/operators';
+import { fromEvent, Subject } from 'rxjs';
+
+@Directive({
+  selector: '[msInfiniteScroll]'
+})
+export class MatSelectInfiniteScrollDirective implements OnInit, OnDestroy, AfterViewInit {
+
+  @Input() threshold = '15%';
+  @Input() debounceTime = 150;
+  @Input() complete: boolean;
+  @Output() infiniteScroll = new EventEmitter<void>();
+
+  private panel: Element;
+  private thrPx = 0;
+  private thrPc = 0;
+  private singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
+
+  private destroyed$ = new Subject<boolean>();
+
+  constructor(private matSelect: MatSelect, private ngZone: NgZone) {
+  }
+
+  ngOnInit() {
+    this.evaluateThreshold();
+  }
+
+  ngAfterViewInit() {
+    this.matSelect.openedChange.pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe((opened) => {
+      if (opened) {
+        this.panel = this.matSelect.panel.nativeElement;
+        this.singleOptionHeight = this.getSelectItemHeightPx();
+        this.registerScrollListener();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroyed$.next(true);
+    this.destroyed$.complete();
+  }
+
+  evaluateThreshold() {
+    if (this.threshold.lastIndexOf('%') > -1) {
+      this.thrPx = 0;
+      this.thrPc = (parseFloat(this.threshold) / 100);
+
+    } else {
+      this.thrPx = parseFloat(this.threshold);
+      this.thrPc = 0;
+    }
+  }
+
+  registerScrollListener() {
+    fromEvent(this.panel, 'scroll').pipe(
+      takeUntil(this.destroyed$),
+      debounceTime(this.debounceTime),
+      tap((event) => {
+        this.handleScrollEvent(event);
+      })
+    ).subscribe();
+  }
+
+  handleScrollEvent(event) {
+    this.ngZone.runOutsideAngular(() => {
+      if (this.complete) {
+        return;
+      }
+      const countOfRenderedOptions = this.matSelect.options.length;
+      const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
+      const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
+
+      const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
+
+      if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
+        this.ngZone.run(() => this.infiniteScroll.emit());
+      }
+    });
+  }
+
+  getSelectItemHeightPx(): number {
+    return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
+  }
+
+}

package/src/lib/searchable-selector/searchable-selector.component.html

@@ -0,0 +1,21 @@
+<div [formGroup]="selectorForm" class="searchable-selctor-container">
+    <mat-select formControlName="select_value" focused="false" [multiple]="multiple" [required]="required"
+        autocomplete="off" (selectionChange)="_handleInput()" msInfiniteScroll (infiniteScroll)="onScroll()"
+        (openedChange)="openedChange($event)">
+        <mat-form-field *ngIf="enableSearch" class="p-1 w-100">
+            <input matInput formControlName="search" placeholder="Search..." (keydown)="$event.stopPropagation();"
+                autocomplete="off">
+        </mat-form-field>
+        <div>
+            <!-- TODO:Implement scroll only for options and have search fixed -->
+            <mat-option *ngFor=" let item of dataItems" [value]="getPropertyValue(item,valueField)">
+                {{getPropertyValue(item,titleField)}}
+            </mat-option>
+        </div>
+        <div fxlayout="column" class="w-100" fxLayoutAlign="center center">
+            <mat-spinner class="my-4" color="primary" diameter="30" *ngIf="isLoading"></mat-spinner>
+        </div>
+    </mat-select>
+    <mat-icon *ngIf="add" class="relative-icon" matSuffix (click)="addItem($event)">add_circle_outline</mat-icon>
+    <mat-icon *ngIf="edit && selectedValue" class="relative-icon" matSuffix (click)="editItem($event)">edit</mat-icon>
+</div>

package/src/lib/searchable-selector/searchable-selector.component.scss

@@ -0,0 +1,8 @@
+.searchable-selctor-container {
+  display: flex;
+}
+
+.relative-icon{
+  position: relative;
+  top: -4px;
+}

package/src/lib/searchable-selector/searchable-selector.component.spec.ts

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