ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/techlify-feature/techlify-feature-listing.component.ts

@@ -0,0 +1,174 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+import { TechlifyFeatureService } from './techlify-feature.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { debounceTime } from 'rxjs/operators';
+import { ActionPopup, ActionPopupComponent } from '../action-popup';
+import { DataManager } from '../core/dataManager.service';
+import { ErrorHandlerService } from '../core/error-handler.service';
+import { AlertService } from '../core/alert.service';
+import { StorageService } from '../core/storage.service';
+@UntilDestroy()
+@Component({
+  selector: 'app-techlify-listing-feature',
+  templateUrl: './techlify-feature-listing.component.html',
+  styleUrls: ['./techlify-feature-listing.component.scss']
+})
+export class TechlifyFeatureListingComponent implements OnInit {
+
+  features: any[] = []
+  displayedColumns: string[] = [
+    'index',
+    'feature',
+    'description',
+    'actions',
+  ]
+
+  dataSource = new MatTableDataSource()
+
+  page: number = 1;
+  lastPage: number;
+  perPage: number = 25;
+
+  isWorking: boolean = false
+  filterFormGroup: FormGroup;
+  featureToggleForm: FormGroup;
+
+  constructor(
+    private dataManager: DataManager,
+    private errorHandler: ErrorHandlerService,
+    private fb: FormBuilder,
+    private alertService: AlertService,
+    private dialog: MatDialog,
+    private storage: StorageService,
+    private featureService: TechlifyFeatureService
+  ) {
+    this.filterFormGroup = this.fb.group({
+      num_items: [""]
+    })
+  }
+
+  ngOnInit() {
+    this.loadData()
+    this.listenForChanges()
+  }
+
+  listenForChanges() {
+    this.filterFormGroup.valueChanges
+      .pipe(debounceTime(500), untilDestroyed(this))
+      .subscribe((changes) => {
+        this.reload()
+      })
+  }
+
+  async loadData() {
+    let result;
+    try {
+      this.isWorking = true
+      var filter = this.filterFormGroup.value
+      filter.page = this.page;
+      filter.perPage = this.perPage;
+      result = await this.dataManager.GET(`api/features`, filter);
+      this.features = this.features.concat(result.data);
+      this.dataSource = new MatTableDataSource(this.features);
+
+      if (!this.storage.getItem('features')) {
+        this.setStorage(this.features);
+      }
+
+      this.isWorking = false
+    } catch (error) {
+      this.errorHandler.handleError(error);
+    } finally {
+      this.isWorking = false;
+    }
+  }
+
+  async toggeleFeature(element, feature) {
+    let status = element ? 'Off' : "On";
+    let data;
+    const dialogRef = this.dialog.open(ActionPopupComponent, {
+      width: "400px",
+      data: <ActionPopup>{
+        title: `Turn this feature ${status}?`,
+        message: `Would you like to turn ${feature.title} feature ${status}`
+      }
+    })
+
+    dialogRef.afterClosed().subscribe(async result => {
+      if (result) {
+        try {
+          data = element
+            ? await this.featureService.disableFeature(feature.id)
+            : await this.featureService.enableFeature(feature.id);
+        } catch (error) {
+          this.errorHandler.handleError(error);
+        } finally {
+          this.alertService.addAlert(`You have just turned ${status} the feature ${feature.title}`, 'success');
+          this.reload();
+          this.storage.removeItem('features');
+          this.setStorage(this.features);
+          this.isWorking = false;
+        }
+      } else {
+        this.reload();
+      }
+    })
+  }
+
+  setStorage(features) {
+    let localFeatures = [];
+    for (let feature of features) {
+      if (!feature.client_feature) {
+        if (feature.is_enabled_default) {
+          localFeatures.push(feature.code);
+        }
+      } else {
+        if (feature.client_feature.is_enabled) {
+          localFeatures.push(feature.code);
+        }
+      }
+
+    }
+    this.storage.setItem("features", localFeatures);
+  }
+
+  reload() {
+    this.features = [];
+    this.page = 1;
+    if (!this.isWorking) {
+      this.loadData();
+    }
+  }
+
+  onScroll() {
+    if (!this.isWorking && this.page < this.lastPage) {
+      this.page += 1;
+      this.loadData();
+    }
+  }
+
+  sortColumn(event) {
+    var direction = event.direction.toString().toUpperCase()
+    this.assignFilter(event.active, direction)
+    this.reload()
+  }
+
+  assignFilter(column, direction) {
+    switch (column) {
+      case 'name': {
+        return this.filterFormGroup
+          .get('sort_by')
+          .setValue('first_name|' + direction)
+      }
+      case 'added_on': {
+        return this.filterFormGroup
+          .get('sort_by')
+          .setValue('created_at|' + direction)
+      }
+    }
+  }
+
+}

package/src/lib/techlify-feature/techlify-feature.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TechlifyFeatureListingComponent } from './techlify-feature-listing.component';
+
+import { TechlifyFeatureRoutes } from './techlify-feature.routing';
+import { OnOffSwitchComponent } from './on-off-switch/on-off-switch.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { TechlifyFeatureEnabledDirective } from './techlify-feature-enabled.directive';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MaterialModule } from '../material.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FlexLayoutModule,
+    TechlifyFeatureRoutes,
+    MatSlideToggleModule,
+    FormsModule,
+    ReactiveFormsModule,
+    InfiniteScrollModule
+  ],
+  declarations: [TechlifyFeatureListingComponent, OnOffSwitchComponent, TechlifyFeatureEnabledDirective],
+  exports: [TechlifyFeatureListingComponent, TechlifyFeatureEnabledDirective]
+})
+export class TechlifyFeatureModule { }

package/src/lib/techlify-feature/techlify-feature.routing.ts

@@ -0,0 +1,13 @@
+import { AuthenticationGuard } from './../core/authentication.guard';
+import { Routes, RouterModule } from '@angular/router';
+import { TechlifyFeatureListingComponent } from './techlify-feature-listing.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TechlifyFeatureListingComponent,
+    canActivate: [AuthenticationGuard]
+  },
+];
+
+export const TechlifyFeatureRoutes = RouterModule.forChild(routes);

package/src/lib/techlify-feature/techlify-feature.service.ts

@@ -0,0 +1,23 @@
+import { DataManager } from './../core/dataManager.service';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TechlifyFeatureService {
+
+  constructor(private dataManager: DataManager) { }
+
+  getFeatures() {
+    return this.dataManager.GET(`api/features`);
+  }
+
+  disableFeature(id: any) {
+    return this.dataManager.GET(`api/feature/${id}/disable`);
+  }
+
+  enableFeature(id: any) {
+    return this.dataManager.GET(`api/feature/${id}/enable`);
+  }
+
+}

package/src/lib/techlify-tagger-tag-form-field/techlify-tagger-tag-form-config.model.ts

@@ -0,0 +1,25 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+
+export class TechlifyTaggerTagFormConfigModel {
+    selectable: boolean;
+    removable: boolean;
+    separatorKeysCodes: number[];
+    placeholder: string;
+    apiUrl: string;
+    isCreateable: boolean;
+    createApiUrl: string;
+    isCacheTags: boolean;
+    isSingle: boolean;
+
+    constructor() {
+        this.selectable = true;
+        this.removable = true;
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.placeholder = 'Enter new Tag..';
+        this.apiUrl = 'api/techlify-tagger-tags';
+        this.createApiUrl = 'api/techlify-tagger-tags';
+        this.isCreateable = true;
+        this.isCacheTags = false;
+        this.isSingle = false;
+    }
+}

package/src/lib/techlify-tagger-tag-form-field/techlify-tagger-tag-form-field.component.html

@@ -0,0 +1,18 @@
+<mat-chip-list #chipList aria-label="Tag Selection">
+    <mat-chip *ngFor="let tag of tags" [selectable]="config.selectable" [removable]="config.removable"
+        (removed)="remove(tag)">
+        {{tag.title}}
+        <button matChipRemove *ngIf="config.removable" class="border-0">
+            <mat-icon class="mat-relative-icon">cancel</mat-icon>
+        </button>
+    </mat-chip>
+    <input placeholder="{{config.isCreateable? config.placeholder:''}}" #tagInput [formControl]="tagInputCtrl"
+        [matAutocomplete]="auto" [matChipInputFor]="chipList"
+        [matChipInputSeparatorKeyCodes]="config.separatorKeysCodes" (matChipInputTokenEnd)="add($event)"
+        #trigger="matAutocompleteTrigger" (click)="trigger.openPanel()">
+</mat-chip-list>
+<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+    <mat-option *ngFor="let tag of filteredTags" [value]="tag.id">
+        {{tag.title}}
+    </mat-option>
+</mat-autocomplete>

package/src/lib/techlify-tagger-tag-form-field/techlify-tagger-tag-form-field.component.scss

@@ -0,0 +1,6 @@
+.mat-relative-icon{
+    position: relative;
+    top: -3px;
+    right: 7px;
+    font-size: 20px;
+}

package/src/lib/techlify-tagger-tag-form-field/techlify-tagger-tag-form-field.component.spec.ts

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

package/src/lib/techlify-tagger-tag-form-field/techlify-tagger-tag-form-field.component.ts

@@ -0,0 +1,308 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, Inject, Optional, Self, OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatChipInputEvent } from '@angular/material/chips';
+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';
+import { TechlifyTaggerTagFormConfigModel } from './techlify-tagger-tag-form-config.model';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-techlify-tagger-tag-form-field',
+  templateUrl: './techlify-tagger-tag-form-field.component.html',
+  styleUrls: ['./techlify-tagger-tag-form-field.component.scss'],
+  providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagFormFieldComponent }],
+})
+export class TechlifyTaggerTagFormFieldComponent implements OnInit, ControlValueAccessor, MatFormFieldControl<any>, OnDestroy, OnChanges {
+
+  static nextId = 0;
+  stateChanges = new Subject<void>();
+  focused = false;
+  controlType = 'techlify-tagger-form-field';
+  id = `techlify-tagger-form-field-${TechlifyTaggerTagFormFieldComponent.nextId++}`;
+
+  onChange = (_: any) => { };
+  onTouched = () => { };
+
+  tagInputCtrl = new FormControl();
+  filterString: any;
+  @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
+
+  /**Pass the configuration for Techlify Tagger */
+  @Input() config: TechlifyTaggerTagFormConfigModel = new TechlifyTaggerTagFormConfigModel();
+  /**Pass the Model Type for Techlify Tagger, Required */
+  @Input() modelType!: string;
+  /**Pass the Model ID for Techlify Tagger */
+  @Input() modelId: string;
+
+  /**Pass the default list of tags */
+  private _allTags: any[] = [];
+  @Input()
+  get allTags() {
+    return this._allTags;
+  }
+  set allTags(value) {
+    this._allTags = value;
+  }
+
+  /**Pass the Categories to filter for a model */
+  @Input() categories: string[] = [];
+  /**Pass default category to be used for assigning the tags, when we filter by more than one category */
+  @Input() defaultCreateCategory: string;
+
+  get tags() {
+    return this.allTags.filter(x => this.value.some(y => y == x.id));
+  }
+
+  //Default Getter and Setters for a Form Field Implementation
+  get empty() {
+    return this.value.length == 0;
+  }
+
+  get shouldLabelFloat() {
+    return this.focused || !this.empty || this.tagInputCtrl.value;
+  }
+
+  @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.tagInputCtrl.disable() : this.tagInputCtrl.enable();
+    this.stateChanges.next();
+  }
+  private _disabled = false;
+
+
+  private _value: any[] = [];
+  @Input()
+  get value(): any[] {
+    return this._value;
+  }
+  set value(tagIds: any[]) {
+    this._value = tagIds || [];
+    this.stateChanges.next();
+  }
+
+  get errorState(): boolean {
+    return this.tagInputCtrl.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 {
+
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+
+    //API to load all tags for the model type
+    if (this.allTags.length == 0) {
+      this.httpService
+        .cache(!this.config.isCacheTags)
+        .get(this.config.apiUrl, {
+          params: {
+            categories: this.categories.join(','),
+            perPage: '1000'
+          }
+        }).pipe(
+          debounceTime(500),
+          untilDestroyed(this)
+        ).subscribe((result: any) => {
+          this.allTags = result.data;
+        });
+    }
+
+    //API to load only the selected tags for the model
+    if (this.modelId && this.value.length == 0) {
+      //Model Id is passed and no tags are present, so we query db for the avilable tags for the model ID.
+      this.httpService
+        .cache(!this.config.isCacheTags)
+        .get(this.config.apiUrl, {
+          params: {
+            categories: this.categories.join(','),
+            model_type: this.modelType,
+            model_id: this.modelId,
+            perPage: '1000'
+          }
+        }).pipe(
+          debounceTime(500),
+          untilDestroyed(this)
+        ).subscribe((result: any) => {
+          this.value = (result?.data || []).map((x: any) => x.id);
+          this._handleInput();
+        });
+    }
+  }
+
+  init() {
+    if (this.modelId && this.allTags.length == 0) {
+      //Model Id is passed and no tags are passed, so we query db for the avilable tags for the model ID.
+      this.httpService
+        .cache(!this.config.isCacheTags)
+        .get(this.config.apiUrl, {
+          params: {
+            categories: this.categories.join(','),
+            model_type: this.modelType,
+            model_id: this.modelId
+          }
+        }).pipe(
+          untilDestroyed(this)
+        ).subscribe((result: any) => {
+          this.allTags = result.data;
+        });
+    }
+  }
+
+  get filteredTags(): any[] {
+    return this._filter();
+  }
+
+  constructor(
+    private _focusMonitor: FocusMonitor,
+    private _elementRef: ElementRef<HTMLElement>,
+    private httpService: HttpService,
+    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
+    @Optional() @Self() public ngControl: NgControl) {
+
+    this.tagInputCtrl.valueChanges
+      .subscribe(filterValue => {
+        this.filterString = filterValue;
+      });
+
+    //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
+  }
+
+
+  async add(event: MatChipInputEvent) {
+    const value = (event.value || '').trim();
+    // Add our tag
+    // Validate for single mode
+    if (!this.config.isSingle || (this.value.length === 0)) {
+      if (value && this.config.isCreateable) {
+        const tags = this.allTags;
+        let tag = tags.find((item: any) => item.title.toLowerCase() == value.toLowerCase());
+        if (!tag) {
+          //No tag present in the list
+          try {
+            const result: any = await this.httpService.post(this.config.createApiUrl, {
+              title: value,
+              description: value,
+              category_title: (this.categories.length > 0) ? (this.defaultCreateCategory ? this.defaultCreateCategory : this.categories[0]) : ''
+            }).toPromise();
+            tag = result.item;
+          } catch (error) {
+            return;
+          }
+          this.allTags.push(tag);
+        } else {
+          //Optionally clean the existing value, to avoid duplicate
+          this.remove(tag);
+        }
+        this.value.push(tag.id);
+        this._handleInput();
+      }
+    }
+
+    // Clear the input value
+    event.input.value = '';
+
+    this.tagInputCtrl.setValue(null);
+  }
+
+  remove(tag: any): void {
+    this.value = this.value.filter(x => x !== tag.id);
+    this._handleInput();
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void {
+    // Validate for single mode
+    if (!this.config.isSingle || (this.value.length === 0)) {
+      //Clean the existing value, to avoid duplicate
+      this.remove({ id: event.option.value });
+      this.value.push(event.option.value);
+      this._handleInput();
+    }
+    this.tagInput.nativeElement.value = '';
+    this.tagInputCtrl.setValue(null);
+  }
+
+  private _filter(): any[] {
+    const filterValue = this.filterString ? this.filterString.toString().toLowerCase() : null;
+    const availableTags = this.allTags.filter((tag: any) => !this.value.some((item: any) => item == tag.id));
+    return filterValue ? availableTags.filter((tag: any) => tag.title.toLowerCase().includes(filterValue)) : availableTags;
+  }
+
+  writeValue(tagIds: any[]): void {
+    this.value = tagIds || [];
+  }
+
+  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-form-field/techlify-tagger-tag-form-field.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TechlifyTaggerTagFormFieldComponent } from './techlify-tagger-tag-form-field.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MaterialModule } from '../material.module';
+
+
+
+@NgModule({
+  declarations: [
+    TechlifyTaggerTagFormFieldComponent
+  ],
+  imports: [
+    CommonModule,
+    MaterialModule,
+    FlexLayoutModule,
+    MatAutocompleteModule,
+    ReactiveFormsModule
+  ],
+  exports: [TechlifyTaggerTagFormFieldComponent]
+})
+export class TechlifyTaggerTagFormFieldModule { }

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

@@ -0,0 +1,8 @@
+<app-searchable-selector *ngIf="apiUrl && !useSelectButtonStyle" [formControl]="tagSelectorCtrl" [apiUrl]="apiUrl"
+    [enableSearch]="enableSearch" [multiple]="multiple" (selectionChange)="selectionChange($event)">
+</app-searchable-selector>
+
+<mat-button-toggle-group *ngIf="apiUrl && useSelectButtonStyle" [formControl]="tagSelectorCtrl" [multiple]="multiple"
+    (change)="selectionChange($event.value)">
+    <mat-button-toggle *ngFor="let tag of tags" [value]="tag.id">{{tag.title}}</mat-button-toggle>
+</mat-button-toggle-group>

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

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