ngx-techlify-core 11.5.0 → 11.5.2

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

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

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

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

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

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

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

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