ngx-techlify-core 11.5.2 → 14.2.0

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

@@ -1,156 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,92 +0,0 @@
-/* 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

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

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

@@ -1,89 +0,0 @@
-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

@@ -1,21 +0,0 @@
-<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

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

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

@@ -1,25 +0,0 @@
-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();
-  });
-});