ngx-techlify-core 11.4.8 → 11.5.2

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

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

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

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

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

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

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

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

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

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

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