ngx-techlify-core 11.5.2 → 14.2.0

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

@@ -1,337 +0,0 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, ElementRef, Input, OnDestroy, OnInit, Optional, Self, Output, EventEmitter, TemplateRef } from '@angular/core';
-import { FormBuilder, FormGroup, ControlValueAccessor, NgControl, Validators } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { Subject, of, from } from 'rxjs';
-import { debounceTime, distinctUntilChanged, startWith, switchMap, finalize } from 'rxjs/operators';
-import { MatDialog } from '@angular/material/dialog';
-import { ComponentType } from '@angular/cdk/portal';
-import { HttpService } from '../core/http.service';
-import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-
-@UntilDestroy()
-@Component({
-  selector: 'app-searchable-selector',
-  templateUrl: './searchable-selector.component.html',
-  styleUrls: ['./searchable-selector.component.scss'],
-  providers: [
-    {
-      provide: MatFormFieldControl,
-      useExisting: SearchableSelectorComponent
-    }
-  ]
-})
-export class SearchableSelectorComponent implements ControlValueAccessor, OnInit, OnDestroy {
-
-  @Input() valueField: string = 'id';
-  @Input() titleField: string = 'title';
-  @Input() apiUrl!: string;
-  @Input() multiple: boolean = false;
-  @Input() selectedValue: any;
-  @Output() selectedValueChange = new EventEmitter();
-  @Input() enableSearch: boolean = true;
-  @Input() add: boolean = false;
-  @Input() addConfig: any;
-  @Input() edit: boolean = false;
-  @Input() editConfig: any;
-  @Input() sort: boolean = true;
-  @Input() sortBy: string;
-  @Input() searchField: string;
-  @Input() itemComponent: ComponentType<unknown> | TemplateRef<unknown>;
-  @Input() items: any[] = [];
-  @Input() apiDataProperty: string = 'data';
-  @Input() cache: boolean = false;
-  @Input() perPage: number = 25;
-  @Input() inDataSearch: boolean = false;
-  @Output() selectionChange = new EventEmitter();
-  @Output() itemsChange = new EventEmitter();
-
-
-  isLoading: boolean = false;
-  onChange: any = () => { };
-  onTouched: any = () => { };
-  static nextId = 0;
-  selectorForm: FormGroup;
-  stateChanges = new Subject<void>();
-  focused = false;
-  controlType = 'searchable-selctor';
-  id = `searchable-selctor-${SearchableSelectorComponent.nextId++}`;
-  describedBy = '';
-  filters: any;
-  cachedItems: any[] = [];
-
-
-  get empty() {
-    const { value: { select_value } } = this.selectorForm;
-    return !select_value;
-  }
-
-  get shouldLabelFloat() { return this.focused || !this.empty; }
-
-
-  @Input()
-  get required(): boolean { return this._required; }
-  set required(value: boolean) {
-    this.selectorForm.get('select_value').setValidators(Validators.required);
-    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.selectorForm.disable() : this.selectorForm.enable();
-    this.stateChanges.next();
-  }
-  private _disabled = false;
-
-  @Input()
-  get value(): any {
-    if (this.selectorForm.valid) {
-      return this.selectorForm.value.select_value;
-    }
-    return '';
-  }
-  set value(data: any) {
-    this.selectorForm.patchValue({ select_value: data || '' });
-    this.stateChanges.next();
-  }
-
-  constructor(
-    formBuilder: FormBuilder,
-    private _focusMonitor: FocusMonitor,
-    private http: HttpService,
-    private _elementRef: ElementRef<HTMLElement>,
-    private dialog: MatDialog,
-    @Optional() @Self() public ngControl: NgControl) {
-
-    this.selectorForm = formBuilder.group({
-      select_value: [null],
-      search: ''
-    });
-
-    _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;
-    }
-  }
-
-  openedChange(event: any) {
-    if (this.dataItems.length === 0 && this.selectorForm.get('search').value) {
-      this.selectorForm.get('search').setValue('');
-    }
-  }
-
-  get dataItems(): any[] {
-    let items: any[] = [];
-    if (this.multiple && this.selectedValue && (this.selectedValue.length > 0))
-      items = [...this.selectedValue, ...this.items];
-    else if ((!this.multiple) && this.selectedValue)
-      items = [this.selectedValue, ...this.items];
-    else
-      items = this.items;
-    items = items.filter((v, i, a) => a.findIndex(v => v[this.valueField] === a[i][this.valueField]) === i);
-    //Emit the items to any child component
-    this.itemsChange.emit(items);
-    return items;
-  }
-
-  ngOnInit() {
-    this.selectorForm.get('search').valueChanges
-      .pipe(
-        debounceTime(500),
-        distinctUntilChanged(),
-        untilDestroyed(this)
-      ).subscribe(value => {
-        if (this.enableSearch)
-          this.search(value);
-      });
-
-    this.filters = {
-      perPage: this.perPage,
-      search: '',
-      page: 1,
-      lastPage: 1
-    }
-    if (this.sort) {
-      this.filters.sort_by = this.sortBy || `${this.titleField}|asc`;
-    }
-
-    //Fetch Items only if it is not present, can be used in places where we load many entries.
-    if (this.items.length === 0) {
-      this.fetchItemList();
-    }
-  }
-
-  fetchItemList() {
-    this.isLoading = true;
-    let request = this.http.get(this.apiUrl, { params: this.filters })
-    if (this.cache) {
-      request = this.http.cache().get(this.apiUrl, { params: this.filters })
-    }
-    of().pipe(
-      startWith(true),
-      switchMap((_) => from(request)),
-      finalize(() => this.isLoading = false),
-      untilDestroyed(this)
-    ).subscribe((result: any) => {
-      this.items = this.items.concat(result[this.apiDataProperty]);
-      if (this.cache) {
-        this.cachedItems = this.items;
-      }
-      this.filters.page = result?.current_page || 1;
-      this.filters.lastPage = result?.last_page || 1;
-    });
-  }
-
-
-  setDescribedByIds(ids: string[]) {
-    this.describedBy = ids.join(' ');
-  }
-
-  onContainerClick(event: MouseEvent) {
-    event.stopPropagation();
-  }
-
-  writeValue(data: any): void {
-    this.value = data;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  getPropertyValue(ele: any, keyString: string) {
-    keyString = keyString.replace(/\[(\w+)\]/g, ".$1"); // convert indexes to properties
-    keyString = keyString.replace(/^\./, ""); // strip a leading dot
-    const keyList = keyString.split(".");
-    for (let i = 0, n = keyList.length; i < n; ++i) {
-      const key = keyList[i];
-      if (ele && key in ele) {
-        ele = ele[key];
-      } else {
-        return;
-      }
-    }
-    return ele;
-  }
-
-  _handleInput(): void {
-    this.onChange(this.value);
-    if (this.multiple)
-      this.selectedValue = (this.value as []).map(x => this.dataItems.find(y => y[this.valueField] === x));
-    else
-      this.selectedValue = this.dataItems.find(x => x[this.valueField] === this.value);
-    this.selectedValueChange.emit(this.selectedValue);
-    this.selectionChange.emit(this.value);
-  }
-
-  get errorState(): boolean {
-    return (this.ngControl && this.ngControl.invalid && (this.ngControl.touched || this.ngControl.dirty));
-  }
-
-  static ngAcceptInputType_disabled: boolean | string | null | undefined;
-  static ngAcceptInputType_required: boolean | string | null | undefined;
-
-  onScroll() {
-    if (this.filters.lastPage > this.filters.page) {
-      this.filters.page += 1;
-      this.fetchItemList();
-    }
-  }
-
-  reloadData() {
-    this.items = [];
-    this.filters.page = 1;
-    this.filters.lastPage = 1;
-    this.fetchItemList();
-  }
-
-  search(event: any) {
-    if (this.searchField) {
-      this.filters[this.searchField] = event;
-    } else {
-      this.filters.search = event;
-    }
-    // we need search field to search in data
-    if (this.inDataSearch && this.searchField) {
-      this.filterItems(event);
-    } else {
-      this.reloadData();
-    }
-  }
-
-  filterItems(event: string) {
-    if (event) {
-      this.items = this.cachedItems.filter((value: any) => {
-        return (value[this.searchField] as string).toLowerCase().search(event.toLowerCase()) != -1
-      })
-    } else {
-      this.items = this.cachedItems;
-    }
-  }
-
-  addItem(event: any) {
-    const dialogRef = this.dialog.open(this.itemComponent, {
-      width: '400px',
-      autoFocus: false,
-      data: {},
-      ...this.addConfig
-    });
-
-    dialogRef.afterClosed().subscribe((result: any) => {
-      if (result) {
-        this.items.push(result.item);
-        this.selectorForm.get('select_value').setValue(result.item[this.valueField]);
-        this._handleInput();
-      }
-    });
-    event.stopPropagation();
-  }
-
-  editItem(event: any) {
-    const dialogRef = this.dialog.open(this.itemComponent, {
-      width: '400px',
-      autoFocus: false,
-      data: {
-        item: this.selectedValue
-      },
-      ...this.editConfig
-    });
-
-    dialogRef.afterClosed().subscribe((result: any) => {
-      if (result) {
-        this.items = this.items.filter(x => x[this.valueField] !== this.selectedValue[this.valueField]);
-        this.items.push(result.item);
-        this.selectedValue = null;
-        this.selectorForm.get('select_value').setValue(result.item[this.valueField]);
-        this._handleInput();
-      }
-    });
-    event.stopPropagation();
-  }
-
-  ngOnDestroy() {
-    this.stateChanges.complete();
-    this._focusMonitor.stopMonitoring(this._elementRef);
-  }
-
-}

package/src/lib/searchable-selector/searchable-selector.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SearchableSelectorComponent } from './searchable-selector.component';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatSelectInfiniteScrollDirective } from './mat-select-infinite-scroll.directive';
-import { MaterialModule } from '../material.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    FlexLayoutModule,
-    MaterialModule
-  ],
-  declarations: [
-    SearchableSelectorComponent,
-    MatSelectInfiniteScrollDirective
-  ],
-  exports: [
-    SearchableSelectorComponent,
-    MatSelectInfiniteScrollDirective
-  ]
-})
-export class SearchableSelectorModule { }

package/src/lib/techlify-feature/on-off-switch/on-off-switch.component.html

@@ -1,4 +0,0 @@
-<form [formGroup]="slideToggle">
-  <mat-slide-toggle formControlName="toggle">On / Off
-  </mat-slide-toggle>
-</form>

package/src/lib/techlify-feature/on-off-switch/on-off-switch.component.spec.ts

@@ -1,28 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { OnOffSwitchComponent } from './on-off-switch.component';
-
-describe('OnOffSwitchComponent', () => {
-  let component: OnOffSwitchComponent;
-  let fixture: ComponentFixture<OnOffSwitchComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ OnOffSwitchComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OnOffSwitchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/techlify-feature/on-off-switch/on-off-switch.component.ts

@@ -1,25 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-
-@Component({
-  selector: 'app-on-off-switch',
-  templateUrl: './on-off-switch.component.html',
-  styleUrls: ['./on-off-switch.component.scss']
-})
-
-export class OnOffSwitchComponent implements OnInit {
-
-  @Input() value: boolean;
-  slideToggle: FormGroup;
-
-  constructor(private fb: FormBuilder) {
-    this.slideToggle = this.fb.group({
-      toggle: [""]
-    })
-  }
-
-  ngOnInit() {
-    this.slideToggle.get('toggle').setValue(this.value);
-  }
-
-}

package/src/lib/techlify-feature/techlify-feature-enabled.directive.ts

@@ -1,71 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core';
-import { ErrorHandlerService } from '../core/error-handler.service';
-import { StorageService } from '../core/storage.service';
-import { TechlifyFeatureService } from './techlify-feature.service';
-
-@Directive({
-  selector: '[techlifyFeatureEnabled]'
-})
-export class TechlifyFeatureEnabledDirective {
-
-  features: any;
-  localFeatures: any[] = [];
-  @Input('techlifyFeatureEnabled') enabledFeature: any;
-
-  constructor(
-    private el: ElementRef,
-    private featureService: TechlifyFeatureService,
-    private errorHandler: ErrorHandlerService,
-    private storage: StorageService) {
-
-  }
-
-  ngOnInit(): void {
-    if (!this.storage.getItem('features')) {
-      this.getFeatures();
-    } else {
-      this.checkForFeatureEnabled();
-    }
-  }
-
-  async getFeatures() {
-    try {
-      let features = await this.featureService.getFeatures();
-
-      for (let feature of features.data) {
-        if (!feature.client_feature) {
-          if (feature.is_enabled_default) {
-            this.localFeatures.push(feature.code);
-          }
-        } else {
-          if (feature.client_feature.is_enabled) {
-            this.localFeatures.push(feature.code);
-          }
-        }
-
-      }
-      this.storage.setItem("features", this.localFeatures);
-    } catch (error) {
-      this.errorHandler.handleError(error);
-    } finally {
-      this.checkForFeatureEnabled()
-    }
-  }
-
-  checkForFeatureEnabled() {
-    try {
-      let features = this.storage.getItem('features');
-      let features_split = features.split(',');
-
-      if (features_split.includes(this.enabledFeature)) {
-        this.el.nativeElement.style.display = "show";
-      } else {
-        this.el.nativeElement.remove();
-      }
-
-    } catch (error) {
-      this.errorHandler.handleError(error);
-    }
-  }
-
-}

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

@@ -1,65 +0,0 @@
-<div fxLayout="column" fxLayoutGap="3rem" class="p-3">
-  <div fxLayout="column" fxLayoutAlign="center center" class="primary-color mt-3">
-    <h3>Features Configuration</h3>
-    <mat-hint>
-      <i> Here you can specify which optional features you'd like to have available to your team </i>
-    </mat-hint>
-  </div>
-
-
-  <div>
-    <mat-card>
-      <mat-card-content fxlayout="column" style="overflow: auto; height: 700px" class="classifications-card">
-        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 w-100" matSort multiTemplateDataRows
-          (matSortChange)="sortColumn($event)" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
-          (scrolled)="onScroll()" [fromRoot]="true" [infiniteScrollContainer]="'.classifications-card'">
-          <!-- 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>
-
-          <!-- Title Column -->
-          <ng-container matColumnDef="feature">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
-              Feature
-            </th>
-            <td mat-cell *matCellDef="let element">{{ element?.title }}</td>
-          </ng-container>
-
-          <!-- Description Column -->
-          <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
-              Descriptions
-            </th>
-            <td mat-cell *matCellDef="let element">
-              {{ element?.description }}
-            </td>
-          </ng-container>
-
-          <!-- Actions Column -->
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
-              Actions
-            </th>
-            <td mat-cell *matCellDef="let element">
-              <div *ngIf="!element?.client_feature">
-                <app-on-off-switch [value]="element?.is_enabled_default"
-                  (click)="toggeleFeature(element?.is_enabled_default, element)"></app-on-off-switch>
-              </div>
-              <div *ngIf="element?.client_feature">
-                <app-on-off-switch [value]="element?.client_feature?.is_enabled"
-                  (click)="toggeleFeature(element?.client_feature?.is_enabled, element)"></app-on-off-switch>
-              </div>
-            </td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        </table>
-      </mat-card-content>
-    </mat-card>
-  </div>
-</div>