ekangularbase/src/ek-components/edropdown/edropdown.component.ts

Authentication service for usermanagement(oidc client)

import { Component, OnInit, Input, NgModule, ViewEncapsulation, forwardRef, ViewChild, AfterViewInit, OnChanges } from '@angular/core';
import { DropdownModule, Dropdown, SelectItem } from 'primeng/primeng';
import { CommonModule } from '@angular/common';
import { LookupItem } from 'ekangularbase/src/interface/lookUpItem';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl } from '@angular/forms';
import { EntityStatus } from 'ekangularbase/src/interface/entity-status';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => EdropdownComponent),
    multi: true
};

@Component({
    selector: 'e-dropdown',
    templateUrl: './edropdown.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./edropdown.component.scss']
})

export class EdropdownComponent implements ControlValueAccessor, AfterViewInit, OnChanges {

    @Input() options: SelectItem[];
    @Input() showClear: boolean = true;
    @Input() formControlName: any;
    @Input() placeholder: string = 'Please Select';
    @Input() filter: boolean = true;
    @Input() tabindex: number;
    @Input() appendTo: any = 'body';

    @Input() c: FormControl = new FormControl();
    @ViewChild('input', {static: false})  inputRef: Dropdown;

    option: SelectItem;

    constructor() {
        this.options = [];
    }

    // bindingList() {
    //     this.options = [];
    //     this.lookupItemOptions.forEach(s => {
    //         this.options.push({ label: s.displayValue, value: s.id,
    //           disabled: s.entityStatus === EntityStatus.Active ? false : true});
    //       });
    // }

    setDisabledState?(isDisabled: boolean): void {
    }

    ngOnChanges() {}

    onChange(event) {
        this.option = event.option;

        this.propagateChange(this.option);

        // // reset errors
        // this.errors = [];
        // //setting, resetting error messages into an array (to loop) and adding the validation messages to show below the field area
        // for (var key in this.c.errors) {
        //     if (this.c.errors.hasOwnProperty(key)) {
        //         if(key === "required"){
        //             this.errors.push("This field is required");
        //         }else{
        //             this.errors.push(this.c.errors[key]);
        //         }
        //     }
        // }
    }

    ngAfterViewInit() {
        // set placeholder default value when no input given to pH property
        // if(this.pH === undefined){
        //     this.pH = "Enter "+this.text;
        // }

        // RESET the custom input form control UI when the form control is RESET
        this.c.valueChanges.subscribe(
            () => {
                // check condition if the form control is RESET
                if (this.c.value == null || this.c.value === undefined) {
                    this.inputRef.options = null;
                }
            }
        );
    }

    // get accessor
    get value(): any {
        return this.option;
    }

    // set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.option) {
            this.option = v;
        }
    }

    // propagate changes into the custom form control
    propagateChange = (_: any) => { }

    // From ControlValueAccessor interface
    writeValue(value: any) {
        this.option = value;
    }

    // From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.propagateChange = fn;
    }

    // From ControlValueAccessor interface
    registerOnTouched(fn: any) {

    }
}

@NgModule({
    imports: [CommonModule, DropdownModule,
    ],
    exports: [EdropdownComponent],
    declarations: [EdropdownComponent]
})
export class EdropdownModule { }