customer-form.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormBuilder, Validators, FormArray, FormControl } from "@angular/forms";
import { CustomValidators } from 'ng2-validation';
import { ContainsValidators } from "../shared/contains-validator.directive";
import { ToastrService } from 'ngx-toastr';

import { CustomerDataService} from '../model/customer-data.service';
import { Customer } from '../model/customer';


@Component({
  templateUrl: './customer-form.component.html',
})
export class CustomerformComponent implements OnInit, OnDestroy {

    private _mode = '';

    private _id:number;
    private _parameters:any;
    private _customer:Customer;

    private _form:FormGroup;
    private _formErrors:any;

    private _errorMessage:string;
    private _submitted:boolean = false;

    constructor(private _customerDataService:CustomerDataService,
                private _router:Router,
                private _formBuilder:FormBuilder,
                private _toastr: ToastrService,
                private _activatedRoute:ActivatedRoute) {
        this._form = _formBuilder.group({
          customer_name: ['', [Validators.required, Validators.minLength(5)]],
          customer_address: ['', [Validators.required]],
          customer_phone1: ['', [Validators.required]],
          customer_phone2: ['', []],
          customer_contact_name: ['', []],
          customer_contact_phone: ['', []],
          customer_photo_url: ['', []],
          customer_identity_number: ['', []],
          customer_identity_photo_url: ['', []],
          customer_npwp_number: ['', []],
          customer_npwp_photo: ['', []],

          username: ['', [Validators.required]],
          password: ['', [Validators.required]],

          tmp_customer_photo: [null, []],
          tmp_customer_identity_photo: [null, []],
          tmp_customer_npwp_photo: [null, []],
        });

        this._form.valueChanges
            .subscribe(data => this.onValueChanged(data));
    }

    private _setFormErrors(errorFields:any):void{
        for (let key in errorFields) {
            let errorField = errorFields[key];
            // skip loop if the property is from prototype
            if (!this._formErrors.hasOwnProperty(key)) continue;

            // let message = errorFields[error.field];
            this._formErrors[key].valid = false;
            this._formErrors[key].message = errorField;
        }
    }

    private _resetFormErrors():void{
        this._formErrors = {
            customer_name: {valid: true, message: ''},
            customer_address: {valid: true, message: ''},
            customer_phone1: {valid: true, message: ''},
            customer_phone2: {valid: true, message: ''},
            customer_contact_name: {valid: true, message: ''},
            customer_contact_phone: {valid: true, message: ''},
            customer_photo_url: {valid: true, message: ''},
            customer_identity_number: {valid: true, message: ''},
            customer_identity_photo_url: {valid: true, message: ''},
            customer_npwp_number: {valid: true, message: ''},
            customer_npwp_photo: {valid: true, message: ''},
            username: {valid: true, message: ''},
            password: {valid: true, message: ''},
        };
    }

    private _isValid(field):boolean {
        let isValid:boolean = false;

        if(this._form.controls[field].touched == true) {
            isValid = true;
        }
        if(this._form.controls[field].touched == true && this._form.controls[field].valid == true) {
            isValid = true;
        }

        return isValid;
    }

    public onValueChanged(data?: any) {
        if (!this._form) { return; }
        const form = this._form;
        for (let field in this._formErrors) {
            // clear previous error message (if any)
            let control = form.get(field);
            if (control && control.dirty) {
                this._formErrors[field].valid = true;
                this._formErrors[field].message = '';
            }
        }
    }

    private _resetCustomer(){
        this._customer = new Customer();
        this._customer.customer_name = '';
        this._customer.customer_address = '';
        this._customer.customer_phone1 = '';
        this._customer.customer_phone2 = '';
        this._customer.customer_contact_name = '';
        this._customer.customer_contact_phone = '';
    }

    public ngOnInit() {
        this._resetFormErrors();
        this._resetCustomer();

        this._parameters = this._activatedRoute.params.subscribe(params => {
            if(typeof params['id'] !== "undefined") {
                this._id = Number.parseInt(params['id']);
                this._errorMessage = "";
                this._customerDataService.getCustomerById(this._id)
                    .subscribe(
                        response => {
                            this._customer = response;
                            this._mode = 'update';
                        },
                        error => {
                            this._errorMessage = error.data;
                        }
                    );
            } else {
                this._mode = 'create';
            }
        });
    }

    public ngOnDestroy() {
        this._parameters.unsubscribe();
        this._customer = new Customer();
    }

    public showToast(title:any, msg:any){
        return this._toastr.success(msg, title, {
                timeOut: 5000,
                closeButton: true,
                progressBar: true
            });
    }

    public onFileSelected(event , type:string){
        const reader = new FileReader();
        if(event.target.files && event.target.files.length){
            if(type == 'photo'){
                const [tmp_customer_photo] = event.target.files;
                reader.readAsDataURL(tmp_customer_photo);
                reader.onload = () => {
                    this._form.patchValue({
                      customer_photo_url: reader.result
                    });
                }
            }
            if(type == 'identity'){
                const [tmp_customer_identity_photo] = event.target.files;
                reader.readAsDataURL(tmp_customer_identity_photo);
                reader.onload = () => {
                    this._form.patchValue({
                      customer_identity_photo_url: reader.result
                    });
                }
            }
            if(type == 'npwp'){
                const [tmp_customer_npwp_photo] = event.target.files;
                reader.readAsDataURL(tmp_customer_npwp_photo);
                reader.onload = () => {
                    this._form.patchValue({
                      customer_npwp_photo: reader.result
                    });
                }
            }
        }
    }

    public onSubmit() {
        this._submitted = true;
        if(this._mode == 'create') {
            this._customerDataService.addCustomer(this._customer)
                .subscribe(
                    result => {
                        if(result.status) {
                            this._router.navigate(['/customer']);
                            this.showToast("Berhasil", result.message);
                        } else {
                            this._submitted = false;
                            this._errorMessage = result.message;
                        }
                    },
                    error => {
                        this._submitted = false;
                        if(error.status == 422) {
                            let errorFields = JSON.parse(error.data.message);
                            this._setFormErrors(errorFields);
                        }
                        else{
                            this._errorMessage = error.data;
                        }
                    }
                );
        } else if(this._mode == 'update') {
            this._customerDataService.updateCustomer(this._customer)
                .subscribe(
                    result => {
                        if(result.status) {
                            this._router.navigate(['/customer']);
                            this.showToast("Berhasil", result.message);
                        } else {
                            this._submitted = false;
                        }
                    },
                    error => {
                        this._submitted = false;
                        if(error.status == 422) {
                            let errorFields = JSON.parse(error.data.message);
                            this._setFormErrors(errorFields);
                        }
                        else{
                            this._errorMessage = error.data;
                        }
                    }
                );
        }
    }
}