employee-details.ts

import { Component, Input, Output, OnChanges, SimpleChange, EventEmitter } from '@angular/core';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { FormControl, FormsModule } from "@angular/forms";

import { EmployeeInterface } from 'src/app/shared/models/interfaces/employee';

import { EmployeeModel } from 'src/app/shared/models/employee.model';
import { ApiService } from 'src/app/shared/services/api.service';
import { StorageService } from 'src/app/shared/services/storage.service';

@Component({
    selector: 'app-employee-details',
    templateUrl: './employee-details.component.html',
    styleUrls: ['./employee-details.component.scss']
})
export class EmployeeDetailsComponent implements OnChanges {
    @Input()
    employeeId: string;

    @Input()
    insertEmployee: boolean;

    @Input()
    getReports: boolean;

    @Output()
    onSaveSuccess: EventEmitter<boolean> = new EventEmitter();

    usernameForm = new FormControl();
    passwordForm = new FormControl();
    firstNameForm = new FormControl();
    lastNameForm = new FormControl();
    typeForm = new FormControl();
    addressForm = new FormControl();
    ssnForm = new FormControl();
    salaryForm = new FormControl();
    emailForm = new FormControl();
    hireDateForm = new FormControl();

    /** employee data */
    private employeeData: EmployeeInterface;
    /** Copy of the initial employee data */
    private _employeeData: EmployeeInterface;
    /** Flag for letting know the user that save is in progress */
    private isSaving: boolean;
    /** Flag for letting know the user that save is in progress */
    private isRemoving: boolean;

    private isInserting: boolean;

    constructor(public employeeModel: EmployeeModel, private apiService: ApiService, private toastr: ToastrService, private storageService: StorageService) { }

    /**
     * This is an Angular method
     * (one of the lifcecycle component hooks: https://angular.io/guide/lifecycle-hooks)
     * Will detect changes on the @Input data, e.g when user select a diferent employee from the list
     */
    ngOnChanges(changes: { employeeId: SimpleChange, insertEmployee: SimpleChange }): void {
        const { employeeId, insertEmployee } = changes;

        if (!employeeId || !employeeId.currentValue) this.clearComponentData();

        if (employeeId && employeeId.currentValue && employeeId.currentValue !== employeeId.previousValue) {
            /** If employeeId changes on selection, get the selected employee details */
            this.clearForm();
            this.getEmployeeDetailsData(employeeId.currentValue);
        }
        if (insertEmployee && insertEmployee.currentValue !== insertEmployee.previousValue) {
            console.log("insert employee changed value");
        }
    }

    /**
     * Requesting employee details data through the API Service
     * @param employeeId  {string}
     */
    getEmployeeDetailsData(employeeId: string): void {
        this.apiService.getEmployeeDetails(employeeId).subscribe(
            (data: EmployeeInterface) => {
                /** Saving the obtained employee data into a variable */
                this.employeeData = data;
                /** Making copy of the initial employee data (for comparing purpose only) */
                this._employeeData = Object.assign({}, this.employeeData);
            },
            (error: HttpErrorResponse) => console.error(error)
        );
    }

    /**
     * Will submit the employee data if has been changed
     * This method is it bind to the `Save employee` button
     */
    onEmployeeSave(): void {
        /** Initialize the isSaving flag */
        this.isSaving = true;
        /** Trigger the saving method from the API Service passing the employeeData*/
        this.apiService.saveEmployeeDetails(this.employeeData).subscribe(
            /** On Success */
            (data: EmployeeInterface) => {
                /** Update the copy of the initial employee data */
                this._employeeData = data;
                /** Notify the parent component to refresf the employee list */
                this.onSaveSuccess.emit(true);
                /** Notify the user with a successful message */
                this.toastr.success('Employee details updated!');
            },
            /** On Error */
            (error: HttpErrorResponse) => {
                /** Notify the user about the error */
                this.toastr.error(error.message);
                /** End the isSaving flag */
                this.isSaving = false;
            },
            /** End the isSaving flag */
            () => (this.isSaving = false)
        );
    }

    onEmployeeInsert(): void {
        console.log("INSERT EMPLOYEE FUNCTION");
        if (this.fieldsNotNull()) {
            this.isInserting = true;
            this.employeeData = {
                username: this.usernameForm.value,
                password: this.passwordForm.value,
                firstname: this.firstNameForm.value,
                lastname: this.lastNameForm.value,
                employeeType: this.typeForm.value,
                address: this.addressForm.value,
                ssn: this.ssnForm.value,
                salary: this.salaryForm.value,
                email: this.emailForm.value,
                employeeId: this.ssnForm.value,
                hire_date: this.hireDateForm.value
            };
            this.apiService.insertEmployee(this.employeeData).subscribe(
                (data: EmployeeInterface) => {
                    this._employeeData = data;
                    this.onSaveSuccess.emit(true);
                    this.toastr.success("Employee added!");
                    this.clearForm();
                    this.insertEmployee = false;
                },

                (error: HttpErrorResponse) => {
                    this.toastr.error(error.message);
                    this.employeeData = undefined;
                    this.isInserting = false;
                },
                () => (this.isInserting = false)
            );
        } else {
            this.isInserting = false;
            this.toastr.error("Some fields were empty.");
        }
    }

    fieldsNull(): boolean {
        return this.usernameForm.value == null && this.passwordForm.value == null && this.addressForm.value == null && this.emailForm.value == null &&
            this.typeForm.value == null && this.firstNameForm.value == null && this.lastNameForm.value == null && this.passwordForm == null &&
            this.salaryForm.value == null && this.ssnForm.value == null;
    }
    fieldsNotNull(): boolean {
        return this.usernameForm.value != null && this.passwordForm.value != null && this.addressForm.value != null && this.emailForm.value != null &&
            this.typeForm.value != null && this.firstNameForm.value != null && this.lastNameForm.value != null && this.passwordForm != null &&
            this.salaryForm.value != null && this.ssnForm.value != null;
    }
    clearForm(): void {
        this.usernameForm.setValue(null);
        this.passwordForm.setValue(null);
        this.firstNameForm.setValue(null);
        this.lastNameForm.setValue(null);
        this.typeForm.setValue(null);
        this.addressForm.setValue(null);
        this.ssnForm.setValue(null);
        this.salaryForm.setValue(null);
        this.emailForm.setValue(null);
        this.ssnForm.setValue(null);
        this.hireDateForm.setValue(null);
    }
    /**
     * Will remove the employee data through the API service
     * This method is it bind to the `Delete` button
     */
    onEmployeeRemove(): void {
        /** Initialize the isRemoving flag */
        this.isRemoving = true;
        /** Trigger the saving method from the API Service passing the employeeId*/
        this.apiService.deleteEmployee(this.employeeData.employeeId).subscribe(
            () => {
                /** End the isRemoving flag */
                this.isRemoving = false;
                /** Clear the component data */
                this.clearComponentData();
                /** Notify the parent component to refresf the employee list */
                this.onSaveSuccess.emit(true);
                /** Notify the user with a successful message */
                this.toastr.success('Employee was removed!');
            },
            (error: HttpErrorResponse) => {
                /** Notify the user about the error */
                this.toastr.error(error.message);
                /** End the isRemoving flag */
                this.isRemoving = false;
            }
        );
    }

    /**
     * Will determinate if the data has been changed or not
     * Buttons will remaing disabled if not change has happened
     */
    hasEmployeeDataChanged(): boolean {
        return JSON.stringify(this.employeeData) !== JSON.stringify(this._employeeData);
    }

    /** This method will clear the `employeeData` value and `_employeeData` copy value */
    clearComponentData(): void {
        this.employeeData = undefined;
        this._employeeData = undefined;
    }

}