ngx-techlify-core 11.5.2 → 14.2.0

package/src/lib/techlify-tagger-tag-selector/techlify-tagger-tag-selector.component.ts

@@ -1,180 +0,0 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, ElementRef, OnInit, Input, OnDestroy, Inject, Optional, Self } from '@angular/core';
-import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
-import { MatFormField, MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material/form-field';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-import { HttpService } from '../core/http.service';
-
-@UntilDestroy()
-@Component({
-  selector: 'app-techlify-tagger-tag-selector',
-  templateUrl: './techlify-tagger-tag-selector.component.html',
-  styleUrls: ['./techlify-tagger-tag-selector.component.scss'],
-  providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagSelectorComponent }],
-})
-export class TechlifyTaggerTagSelectorComponent implements OnInit, ControlValueAccessor, MatFormFieldControl<any>, OnDestroy {
-
-  /**Pass the Categories to filter for a model */
-  @Input() categories: string[] = [];
-  @Input() multiple: boolean = false;
-  @Input() enableSearch: boolean = true;
-  tagSelectorCtrl = new FormControl();
-  @Input() showAllTags: boolean = false;
-  @Input() useSelectButtonStyle: boolean = false;
-
-  tags: any[] = [];
-
-  static nextId = 0;
-  stateChanges = new Subject<void>();
-  focused = false;
-  controlType = 'techlify-tagger-selector';
-  id = `techlify-tagger-selector-${TechlifyTaggerTagSelectorComponent.nextId++}`;
-
-  onChange = (_: any) => { };
-  onTouched = () => { };
-
-  get apiUrl() {
-    if (this.showAllTags) {
-      return 'api/techlify-tagger-tags'
-    }
-    else if (this.categories?.length > 0) {
-      return 'api/techlify-tagger-tags?categories=' + this.categories.join(',');
-    }
-    else {
-      return '';
-    }
-  }
-
-  //Default Getter and Setters for a Form Field Implementation
-  get empty() {
-    return this.value.length == 0;
-  }
-
-  get shouldLabelFloat() {
-    return this.focused || !this.empty;
-  }
-
-  @Input()
-  get required(): boolean {
-    return this._required;
-  }
-  set required(value: boolean) {
-    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.tagSelectorCtrl.disable() : this.tagSelectorCtrl.enable();
-    this.stateChanges.next();
-  }
-  private _disabled = false;
-
-
-  private _value: any;
-  @Input()
-  get value(): any {
-    return this._value;
-  }
-  set value(val: any) {
-    this._value = val;
-    this.tagSelectorCtrl.setValue(val);
-    this.stateChanges.next();
-  }
-
-  get errorState(): boolean {
-    return this.tagSelectorCtrl.dirty && this.required && (this.value.length == 0);
-  }
-
-  @Input()
-  get placeholder(): string {
-    return this._placeholder;
-  }
-  set placeholder(value: string) {
-    this._placeholder = value;
-    this.stateChanges.next();
-  }
-  private _placeholder: string;
-
-
-  ngOnInit(): void {
-    if (this.useSelectButtonStyle) {
-      this.httpService.get(this.apiUrl)
-        .pipe(untilDestroyed(this))
-        .subscribe((res: any) => {
-          this.tags = res.data;
-        })
-    }
-  }
-
-  selectionChange(value: any) {
-    this.value = value;
-    this._handleInput();
-  }
-
-  constructor(
-    private _focusMonitor: FocusMonitor,
-    private _elementRef: ElementRef<HTMLElement>,
-    private httpService: HttpService,
-    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
-    @Optional() @Self() public ngControl: NgControl) {
-
-    //Set Focus Monitor
-    _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
-      if (this.focused && !origin) {
-        this.onTouched();
-      }
-      this.focused = !!origin;
-      this.stateChanges.next();
-    });
-
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-  }
-
-  setDescribedByIds(ids: string[]) {
-    // Just a empty implementation for Mat Form Field Interface
-  }
-
-  onContainerClick() {
-    // Just a empty implementation for Mat Form Field Interface
-  }
-
-  writeValue(val: any): void {
-    this.value = val;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  _handleInput(): void {
-    this.onChange(this.value);
-  }
-
-  static ngAcceptInputType_disabled: BooleanInput;
-  static ngAcceptInputType_required: BooleanInput;
-
-  ngOnDestroy() {
-    this.stateChanges.complete();
-    this._focusMonitor.stopMonitoring(this._elementRef);
-  }
-
-}

package/src/lib/techlify-tagger-tag-selector/techlify-tagger-tag-selector.module.ts

@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TechlifyTaggerTagSelectorComponent } from './techlify-tagger-tag-selector.component';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MaterialModule } from '../material.module';
-import { SearchableSelectorModule } from '../searchable-selector/searchable-selector.module';
-
-
-
-@NgModule({
-  declarations: [
-    TechlifyTaggerTagSelectorComponent
-  ],
-  imports: [
-    CommonModule,
-    MaterialModule,
-    FlexLayoutModule,
-    MatAutocompleteModule,
-    ReactiveFormsModule,
-    SearchableSelectorModule,
-    MatButtonToggleModule
-  ],
-  exports: [TechlifyTaggerTagSelectorComponent]
-})
-export class TechlifyTaggerTagSelectorModule { }

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

@@ -1,78 +0,0 @@
-<form [formGroup]="techlifyUpdateForm" (ngSubmit)="submit()">
-  <div fxLayout="column" class="mat-typography">
-    <div mat-dialog-title class="text-center">
-      <h2>
-        App Update Form
-      </h2>
-    </div>
-    <div mat-dialog-content fxLayout="column" fxLayoutGap="1rem">
-      <mat-form-field fxFlex="100%">
-        <mat-label>Title</mat-label>
-        <input matInput formControlName="title" placeholder="Title" autocomplete="off" required />
-        <button mat-button *ngIf="getFieldValue('title')" matSuffix mat-icon-button (click)="resetFieldValue('title')">
-          <mat-icon>close</mat-icon>
-        </button>
-        <mat-error *ngIf="isFieldValid('title')">
-          {{getErrorMessage('title')}}
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="100%">
-        <input matInput [matDatepicker]="released_on" formControlName="released_on" placeholder="Released on" readonly
-          (click)="released_on.open()" required />
-        <mat-datepicker-toggle matSuffix [for]="released_on"></mat-datepicker-toggle>
-        <mat-datepicker #released_on></mat-datepicker>
-        <button mat-button *ngIf="getFieldValue('released_on')" matSuffix mat-icon-button
-          (click)="resetFieldValue('released_on')">
-          <mat-icon>close</mat-icon>
-        </button>
-        <mat-error *ngIf="isFieldValid('released_on')">
-          {{getErrorMessage('released_on')}}
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="100%">
-        <mat-label>Version</mat-label>
-        <input matInput formControlName="version" placeholder="Version" autocomplete="off" required />
-        <button mat-button *ngIf="getFieldValue('version')" matSuffix mat-icon-button
-          (click)="resetFieldValue('version')">
-          <mat-icon>close</mat-icon>
-        </button>
-        <mat-error *ngIf="isFieldValid('version')">
-          {{getErrorMessage('version')}}
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field fxFlex="100%">
-        <mat-label>Learn more link</mat-label>
-        <input matInput formControlName="learn_more_link" placeholder="Learn More Link" autocomplete="off" />
-        <button mat-button *ngIf="getFieldValue('learn_more_link')" matSuffix mat-icon-button
-          (click)="resetFieldValue('learn_more_link')">
-          <mat-icon>close</mat-icon>
-        </button>
-        <mat-error *ngIf="isFieldValid('learn_more_link')">
-          {{getErrorMessage('learn_more_link')}}
-        </mat-error>
-      </mat-form-field>
-
-      <div fxFlex="100%">
-        <div class="NgxEditor__Wrapper">
-          <ngx-editor-menu [toolbar]="toolbar" [editor]="editor"> </ngx-editor-menu>
-          <ngx-editor formControlName="description" [editor]="editor" placeholder="Description">
-          </ngx-editor>
-        </div>
-        <mat-error *ngIf="isFieldValid('description')">
-          {{getErrorMessage('description')}}
-        </mat-error>
-      </div>
-    </div>
-    <div mat-dialog-actions fxFlex="100%" fxLayout fxLayoutAlign="end" fxLayoutGap="1rem">
-      <button mat-button class="mt-2" type="button" (click)="dialogRef.close()">
-        Cancel
-      </button>
-      <button mat-raised-button type="submit" class="btn-primary mt-2">
-        Save
-      </button>
-    </div>
-  </div>
-</form>

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

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

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

@@ -1,113 +0,0 @@
-import { AlertService } from "../../core/alert.service";
-import { TechlifyUpdateService } from './../techlify-update.service';
-import { FormControl, Validators } from '@angular/forms';
-import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { FormValidatorService } from '../../core/form-validator.service';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Editor, Toolbar } from 'ngx-editor';
-
-const errorMessages: any = {
-  title: {
-    required: "Title is required",
-  },
-  released_on: {
-    required: "Released On is required",
-  },
-  version: {
-    required: "Version is required",
-  },
-  description: {
-    required: "Description is required",
-  },
-  learn_more_link: {
-    pattern: "Please enter valid link",
-  }
-}
-
-@Component({
-  selector: 'app-techlify-update-form',
-  templateUrl: './techlify-update-form.component.html',
-  styleUrls: ['./techlify-update-form.component.scss']
-})
-export class TechlifyUpdateFormComponent implements OnInit {
-
-  @Output() onSave = new EventEmitter<any>();
-  techlifyUpdateForm: FormGroup;
-  isUpdateMode: boolean = false;
-  editor: Editor;
-  toolbar: Toolbar = [
-    ['bold', 'italic'],
-    ['bullet_list'],
-  ];
-
-  constructor(
-    public dialogRef: MatDialogRef<TechlifyUpdateFormComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    private fb: FormBuilder,
-    private formValidatorService: FormValidatorService,
-    private alertService: AlertService,
-    private techlifyUpdateService: TechlifyUpdateService
-  ) {
-    this.createForm();
-  }
-
-  private createForm() {
-    this.techlifyUpdateForm = this.fb.group({
-      id: new FormControl(''),
-      title: new FormControl('', Validators.required),
-      description: new FormControl('', Validators.required),
-      version: new FormControl('', Validators.required),
-      released_on: new FormControl('', Validators.required),
-      learn_more_link: new FormControl('', Validators.compose([Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')])),
-    });
-    if (this.data.techlifyUpdateDetails) {
-      this.isUpdateMode = true;
-      this.techlifyUpdateForm.patchValue(this.data.techlifyUpdateDetails);
-    }
-  }
-
-  ngOnInit() {
-    this.editor = new Editor();
-  }
-
-  async submit() {
-    if (this.techlifyUpdateForm.valid) {
-      let result;
-      const model = this.techlifyUpdateForm.value;
-
-      try {
-        result = this.isUpdateMode ? await this.techlifyUpdateService.updateTechlifyUpdate(model)
-          : await this.techlifyUpdateService.createTechlifyUpdate(model);
-        this.alertService.addAlert(
-          "Techlify app update saved successfully",
-          "success"
-        );
-      } catch (error) {
-        this.alertService.addAlert("Unable to process, try later", "warn");
-      } finally {
-        if (result) {
-          this.dialogRef.close(result);
-        }
-      }
-    }
-  }
-
-  resetFieldValue(field: string) {
-    this.techlifyUpdateForm.get(field).setValue('');
-  }
-
-  getFieldValue(field: string) {
-    return this.techlifyUpdateForm.get(field).value;
-  }
-
-  /** Method to evaluate form fields*/
-  isFieldValid(field: string) {
-    return this.formValidatorService.isFieldValid(field, this.techlifyUpdateForm, true);
-  }
-  /** Method to find error in form fields*/
-  getErrorMessage(field: string) {
-    return this.formValidatorService.getErrorMessage(field, this.techlifyUpdateForm, errorMessages);
-  }
-
-}

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

@@ -1,25 +0,0 @@
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from './../../material.module';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TechlifyUpdateFormComponent } from './techlify-update-form.component';
-import { NgxEditorModule } from 'ngx-editor';
-
-@NgModule({
-  declarations: [TechlifyUpdateFormComponent],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    MaterialModule,
-    FlexLayoutModule,
-    NgxEditorModule,
-  ],
-  exports: [
-    TechlifyUpdateFormComponent
-  ],
-  entryComponents: [
-    TechlifyUpdateFormComponent
-  ]
-})
-export class TechlifyUpdateFormModule { }

package/src/lib/techlify-update/techlify-update-history/index.ts

@@ -1 +0,0 @@
-export * from './techlify-update-history.module';

package/src/lib/techlify-update/techlify-update-history/techlify-update-history-routing.module.ts

@@ -1,21 +0,0 @@
-import { TechlifyUpdateHistoryComponent } from './techlify-update-history.component';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  { path: '', redirectTo: 'update-history', pathMatch: 'full' },
-  { path: 'update-history', component: TechlifyUpdateHistoryComponent },
-
-  //fallback
-  {
-    path: '**',
-    redirectTo: 'all',
-    pathMatch: 'full'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class TechlifyUpdateHistoryRoutingModule { }

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

@@ -1,94 +0,0 @@
-<section class="p-4" fxLayout="column">
-  <h3 class="primary-color text-center">
-    App Updates
-  </h3>
-  <form [formGroup]="filterFormGroup" fxLayout="row wrap" fxLayoutGap="0.5rem" fxFlex="100%" style="font-size: 12px;">
-    <mat-form-field fxFlex="0 1 calc(100% - 0.5rem)" fxFlex.gt-md="0 1 calc(15% - 0.5rem)" appearance="outline"
-      fxFlex.gt-sm="0 1 calc(20% - 0.5rem)">
-      <input type="text" matInput formControlName="search" placeholder="Title" autocomplete="off" />
-      <button mat-button *ngIf="filterFormGroup.get('search').value" matSuffix mat-icon-button
-        (click)="resetFieldValue('search')">
-        <mat-icon>close</mat-icon>
-      </button>
-    </mat-form-field>
-    <mat-form-field fxFlex="0 1 calc(100% - 0.5rem)" fxFlex.gt-md="0 1 calc(15% - 0.5rem)" appearance="outline"
-      fxFlex.gt-sm="0 1 calc(20% - 0.5rem)">
-      <input type="text" matInput formControlName="version" placeholder="Version" autocomplete="off" />
-      <button mat-button *ngIf="filterFormGroup.get('version').value" matSuffix mat-icon-button
-        (click)="resetFieldValue('version')">
-        <mat-icon>close</mat-icon>
-      </button>
-    </mat-form-field>
-  </form>
-
-  <table mat-table [dataSource]="techlifyUpdates" class="mat-elevation-z8 w-100" matSort multiTemplateDataRows
-    (matSortChange)="sortColumn($event)" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
-    (scrolled)="onScroll()">
-
-    <!-- Index Column -->
-    <ng-container matColumnDef="index">
-      <th mat-header-cell *matHeaderCellDef> # </th>
-      <td mat-cell *matCellDef="let element;let i=dataIndex"> {{ i+1 }} </td>
-    </ng-container>
-
-    <!-- Course Column -->
-    <ng-container matColumnDef="title">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>
-      <td mat-cell *matCellDef="let element"> {{element?.title}} </td>
-    </ng-container>
-
-    <!-- Version Column -->
-    <ng-container matColumnDef="version">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>
-      <td mat-cell *matCellDef="let element"> {{element?.version}} </td>
-    </ng-container>
-
-    <!-- Released On Column -->
-    <ng-container matColumnDef="released_on">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>
-      <td mat-cell *matCellDef="let element"> {{element?.released_on | date:'mediumDate'}} </td>
-    </ng-container>
-
-    <!-- Learn More Link Column -->
-    <ng-container matColumnDef="learn_more_link">
-      <th mat-header-cell *matHeaderCellDef> Learn more link </th>
-      <td mat-cell *matCellDef="let element">
-        <a [href]="element?.learn_more_link" target="_blank">
-          {{element?.learn_more_link}}
-        </a>
-      </td>
-    </ng-container>
-
-    <!-- Description Column -->
-    <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> Description </th>
-      <td mat-cell *matCellDef="let element">
-        <app-read-more [text]="element?.description" [maxLength]="50"></app-read-more>
-      </td>
-    </ng-container>
-
-    <!-- Creator Column -->
-    <ng-container matColumnDef="creator">
-      <th mat-header-cell *matHeaderCellDef> Creator </th>
-      <td mat-cell *matCellDef="let element">
-        {{element?.creator?.name}}
-        <div fxLayout class="small">
-          {{element?.created_at | date : 'mediumDate'}}
-        </div>
-      </td>
-    </ng-container>
-
-    <!-- Actions Column -->
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let element" class="secondary-color">
-        <button type="button" class="secondary-color" mat-icon-button (click)="openUpdateView(element)">
-          <mat-icon>remove_red_eye</mat-icon>
-        </button>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-</section>