kfmc_website/src/app/dashboard/add-join-us/add-join-us.component.ts

import { AuthServiceService } from './../../shared/auth-service.service';
import { HttpClient } from '@angular/common/http';
import { UserService } from './../../shared/user.service';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { NgxSpinnerService } from 'ngx-spinner';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Location } from '@angular/common';



@Component({
  selector: 'app-add-join-us',
  templateUrl: './add-join-us.component.html',
  styleUrls: ['./add-join-us.component.css']
})
export class AddJoinUsComponent implements OnInit {

  constructor(private userSer: UserService,
    private spineer: NgxSpinnerService,
    private route: ActivatedRoute,
    public authSer: AuthServiceService,
    private location: Location,
    private toastr: ToastrService) { }

    adminstrations = [];
    files: any;
    typeLink: string = 'إنشاء جديد';
    urlImg: string =  '../../assets/image/avatar.png';
    joinUsForm: FormGroup;
    checkMode: boolean = false;
    checkChangeImage: boolean = false;
    checkValidImg: boolean = false;
    photoEdit: boolean = true;
    checkSaveClick: boolean = false;
    imageBase64: string = '';
    photoType: string = '';
    joinId: number;
    higriDateVal: string;
    bindingDateSplit;


    currentDate: any = Date.now();
   


  ngOnInit() {

    
    


    //show / hide notification search in header
    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
     //show / hide notification search in header
    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;
    
    //get profile data
    this.userSer.getUserDataProfile();
    this.route.params.subscribe(
      (params: Params) => {
        this.joinId = params['editJoinId'];
      }
    );

    this.joinUsForm = new FormGroup({
      name: new FormControl(null, Validators.required),
      name_en: new FormControl(null, Validators.required),
      adminstration_id: new FormControl(null, Validators.required),
      status: new FormControl(null, Validators.required),
    });

    //get adminstration
    this.userSer.getAdministration().subscribe(
      (responce) => {
        console.log(responce);
        this.adminstrations = responce['adminstrations'];
      },
      (error) => {
        console.log(error)
      }
    );

  


    this.route.params.subscribe(
      (params:Params) => {
        if(params['typeJoinMode'] == 'edit') {
          this.spineer.show();
          this.checkMode = true;
         this.typeLink = 'تعديل';
         this.userSer.onGetUserData(this.joinId, 'editJo').subscribe(
          (responce) => {
            console.log(responce);
            this.joinUsForm.patchValue({
              name: responce['user'].name,
              name_en: responce['user'].name_en,
              //date_of_employment_hij: responce['user'].date_of_employment_hij,
              adminstration_id: responce['user'].adminstration_id,
              status: responce['user'].status,
            });
            this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : this.urlImg;
            const date = responce['user'].date_of_employment_hij.split('-');
            
            this.bindingDateSplit = {
              'year': parseInt(date[0]),
              'month': parseInt(date[1]),
              'day': parseInt(date[2])
            };
            this.higriDateVal = responce['user'].date_of_employment_hij;
            console.log(this.bindingDateSplit);
              
              this.spineer.hide();
          }
         );
         
        }
      }
    );

  }



  onFileChanges(event) {
    console.log(event);
    this.imageBase64 = event[0].base64;
    this.photoType = event[0].type.split('/');
    console.log(this.photoType[1]);
    //console.log(this.imageBase64);
    this.checkChangeImage = true;
    this.checkValidImg = false;
  }

  getUrl(event) {   
    if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]); // read file as data url
    reader.onload = (event) => { // called once readAsDataURL is completed
      this.urlImg = event.target['result'];
    }
  }
 }

  //get value date from child component 
  public getDate(date: any):void {
    console.log( date);
    this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
    console.log('higrii date', this.higriDateVal);
  }



  onSubmittedForm() {

    this.checkSaveClick = true;
    console.log(this.joinUsForm.value);
    const formData = this.joinUsForm.value;
    const dateHigriArray = this.higriDateVal.split('-');
    console.log('higriiii datttte', this.higriDateVal);
    formData['date_of_employment_hij'] = this.higriDateVal;
    console.log(dateHigriArray);
    if(this.checkChangeImage){
      formData['photo'] = this.imageBase64;
      formData['photo_type'] = this.photoType[1];
    } else {
      delete formData.photo;
      delete formData.photo_type; 
      this.photoEdit = false;
      console.log(formData);
    }

    
    if(this.checkMode) {
      formData['id'] = this.joinId;
      console.log(formData);
      if(this.imageBase64 == '' && this.photoEdit == true) {
        this.toastr.warning('قم باختيار صوره !');
      } else {
        this.userSer.onEditUser(formData, 'joinUs').subscribe(
          (responce) => {
            this.checkSaveClick = true;
            console.log(responce);
            this.toastr.success('تم التعديل بنجاح');
            this.location.back();
          },
          (error) => {
            this.checkSaveClick = false;
            console.log(error);
            if(error.error['status'] == 'invalid date_of_employment_hij') {
              this.toastr.error('تاريخ التوظيف الهجري لا يجب ان يكون في الحاضر او اليوم');
            } else if(error.error['status'] == 'active status for only 4 records') {
              this.toastr.warning('لديك أربعه أشخاص في الحاله فعال بالفعل ، قم بعدم تفعيل أو مسح أحدهم ');
            } else {
              this.toastr.error('خطأ في السيرفير');
            }
          }
        );
      }
    } else {
      if(this.imageBase64 == '') {
        this.toastr.warning('قم باختيار صوره !');
        this.checkSaveClick = false;
      } else {
        this.userSer.addUser(formData, 'joinUs').subscribe(
          (responce) => {
            this.checkSaveClick = true;
            console.log(responce);
            this.toastr.success('تم الاضافه بنجاح');
            this.location.back();
          },
          (error) => {
            this.checkSaveClick = false;
            console.log(error.error['status']);
            if(error.error['status'] == 'invalid date_of_employment_hij') {
              this.toastr.error('تاريخ التوظيف الهجري لا يجب ان يكون في الحاضر او اليوم');
            }else if(error.error['status'] == 'active status for only 4 records') {
              this.toastr.warning('لديك أربعه أشخاص في الحاله فعال بالفعل ، قم بعدم تفعيل أو مسح أحدهم ');
            }  else {
              this.toastr.error('خطأ في السيرفير');
            }
          }
        );
      }
    }

  }

}