ngx-techlify-core 11.5.2 → 14.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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