kfmc_website/src/app/dashboard/final-accreditation-of-trainees/final-accerditation-add/final-accerditation-add.component.ts

import { NgxSpinnerService } from 'ngx-spinner';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { DashboardService } from './../../../shared/dashboard.service';
import { HttpClient } from '@angular/common/http';
import { UserService } from './../../../shared/user.service';
import { FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
import { Component, OnInit, ViewChild } from '@angular/core';
import { AuthServiceService } from '../../../shared/auth-service.service';
import { ToastrService } from 'ngx-toastr';
import { Location, formatDate } from '@angular/common';
@Component({
  selector: 'app-final-accerditation-add',
  templateUrl: './final-accerditation-add.component.html',
  styleUrls: ['./final-accerditation-add.component.css']
})
export class FinalAccerditationAddComponent implements OnInit {

  constructor(private userSer: UserService, 
    private http: HttpClient,
    private toastr: ToastrService,
    private route: ActivatedRoute,
    private dashBoardSer: DashboardService,
    private router: Router,
    private spinner: NgxSpinnerService,
    private location: Location,
    public authSer: AuthServiceService) { }

    

  typeLink:string = '';
  userId: number;
  checkSaveClick:boolean = false; //to make save button is disabled when click save 
  disabledInput: boolean = false; //to make button dsabled in create mode 
  reportId: number;
  stoppedShow: boolean = false;
  endedShow: boolean = false;
  userLoginId: number;
  serviceId: number;
  countries: any[] = [];
  identities: any[] = [];
  trainees:any[] = [];
  departments:any[] = [];
  departmentsId:any[] = [];
  attachments_ids: any[] =[];

  @ViewChild('f') traineeForm: NgForm;

  //all form data 
  formData = {
    trainee: '',
    type: '',
    specialization_name: '',
    specific_specialization: '',
    university: '',
    level: '',
    training_period: '',
    registration_number: '',
    authority_card_number: '',
    functional_number: '',
    contract_type: '',
    status: '',
    organization_affiliated_with: '',
    department: '',
    start_date: '',
    end_date: ''
  }

  //user data object

  userData = {
    name: '',
    email: '',
    nationality_id: '',
    identity_number: '',
    identity_type_id: '',
    birthday: '',
    gender: '',
    phone: '',
  }

  actionForm = {
   status: '',
   adminstration_notes: '',
   card_received: 0,
   id: null,
  }

  identity_id: number = 0; //to determine te number of identity to validation
  identity_type: number;
  typeMode:boolean = false;

  files = [{
    title : '',
    file: '',
    file_type: '',
    nameFile: '',
    id: null,
  }];


  ngOnInit() {
     //init the values of permision boolean
     this.authSer.showAddBtn = false;
     this.authSer.showDeleteBtn = false;
     this.authSer.showEditBtn = false;
     //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;

     //catch params id from activated route
     this.route.params.subscribe(
      (params: Params) => {
        this.reportId = +params['finalAccerditationEdit'];
      }
    );

    //catch parent params id from activated route
     this.route.parent.params.subscribe(
      (params:Params) => {
          this.userLoginId = +params['userID'];
          this.serviceId = +params['serviceID'];
        }
  
      );
 
     //get nationality data
     this.userSer.getNationality().subscribe(
       (responce) => {
         console.log(responce);
         this.countries = responce['countries'];
       },
       (error) => {
         console.log(error);
       }
     );
 
      //get identites
      this.userSer.onGetIdentities().subscribe(
       (responce) => {
         this.identities = responce['identities'];
         console.log('idddentiiiesssssssssss', this.identities);
       },
       (error) => {
         console.log(error);
       }
     );
 
     //get trainee data
     this.http.get(this.authSer.pathApi + '/get_trainees').subscribe(
       (responce) => {
         this.trainees = responce['users'];
         console.log(this.trainees);
       },
       (error) => {
         console.log(error);
       }
     );
 
     //get departments
     this.http.get(this.authSer.pathApi + '/training_adminstration_departments').subscribe(
       (responce) => {
         this.departments = responce['departments'];
         console.log(this.departments);
       },
       (error) => {
         console.log(error);
       }
     );


     if(this.reportId) {

      this.actionForm.id = this.reportId;
      this.disabledInput = true;
      this.spinner.show();
      this.typeMode = true;
      this.files = [];

      this.dashBoardSer.getItemData(this.reportId,'traineeRequest').subscribe(
        (responce) => {
          console.log('get request by id', responce);
          this.formData.trainee = responce['data']['user'].id;
          this.formData.type = responce['data']['request'].type;
          this.formData.status = responce['data']['request'].status;
          this.formData.specialization_name = responce['data']['request'].specialization_name;
          this.formData.specific_specialization = responce['data']['request'].specific_specialization;
          this.formData.level = responce['data']['request'].level;
          this.formData.contract_type = responce['data']['request'].contract_type;
          this.formData.university = responce['data']['request'].university;
          this.formData.authority_card_number = responce['data']['request'].authority_card_number;
          this.formData.training_period = responce['data']['request'].training_period;
          this.formData.functional_number = responce['data']['request'].functional_number;
          this.formData.organization_affiliated_with = responce['data']['request'].organization_affiliated_with;
          this.formData.registration_number = responce['data']['request'].registration_number;
          this.formData.start_date = responce['data']['request'].start_date;
          this.formData.end_date = responce['data']['request'].end_date;
          this.userData.name = responce['data']['user'].name;
          this.userData.email = responce['data']['user'].email;
          this.userData.identity_number = responce['data']['user'].identity_number;
          this.userData.identity_type_id = responce['data']['user'].identity_type_id;
          this.userData.phone = responce['data']['user'].phone;
          this.userData.birthday = responce['data']['user'].birthday;
          this.userData.gender = responce['data']['user'].gender;
          this.userData.nationality_id = responce['data']['user'].nationality_id;
          this.userId = responce['data']['user'].id;
          this.userData['id'] = this.userId;
          for(let i = 0; i < responce['data']['request'].attachments.length; i++) {
            this.attachments_ids.push(responce['data']['request'].attachments[i].id);
          }
          console.log('attachemnts ids ', this.attachments_ids);
          for(let i = 0; i < responce['data']['request'].departments.length; i++) {
            if(responce['data']['request'].departments[i].is_confirmed == 1) {
              this.formData.department = responce['data']['request'].departments[i].department_id;
            }
          }
        

         

          if(responce['data']['request'].attachments.length > 0) {
            for(let i = 0; i < responce['data']['request'].attachments.length; i++) {
              this.files.push({
                title: responce['data']['request'].attachments[i].title,
                file: '',
                nameFile: responce['data']['request'].attachments[i].file,
                file_type: '',
                id: responce['data']['request'].attachments[i].id,
              })
            }
          } else {
            console.log('no attachements user add !');
          }
          this.spinner.hide();
        },
        (error) => {
          console.log(error);
        }
      );

    }
 
  }

  recieveCard() {
    this.toastr.success('تم نسجيل الإستلام');
    this.actionForm.card_received = 1
  }

  printCard() {
    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/finalAccerditationReprot']);
  }


  //delete row of files
  onDeleteRow(rowIndex: number) {
    this.files.splice(rowIndex , 1);
    if(this.attachments_ids.length > 0) {
      this.attachments_ids.splice(rowIndex, 1);
    }
    console.log('files after delete ',this.files);
    console.log('attachements ids', this.attachments_ids);
  }

  //add attachements 
  plusImage() {
    this.files.push({
      title: '',
      file: '',
      file_type: '',
      nameFile: '',
      id: null,
    });
    console.log('files after plus ', this.files);
  }
//finalAccerditationReprot
  //on file change 
    //change file 
    onFileChanges(event, index:number) {
      console.log(event);
      console.log(index);
       this.files[index].nameFile = event[0].name.substring(0,20) + '....';
       this.files[index].file = event[0].base64;
       this.files[index].file_type = event[0].type.split('/')[1];
         //validate in pdf type file in edit mode 
         if(this.files[index].file_type != '') {
           if(this.files[index].file_type != 'pdf') {
             this.toastr.warning('يجب أن تكون صيغه الملف pdf !');
             this.checkSaveClick = true;
           } else {
             this.checkSaveClick = false;
           }
         }
  
         console.log(this.files);
   
    }

    changeDepartment(event) {
      console.log(event.target.value);
      this.formData.department = event.target.value;
    }

    changeType(event) {
      console.log(event.target.value);
      this.formData.type = event.target.value;
    }

    getSelectedOptionText(event) {
      this.userData.identity_type_id = event.target.value;
    }

    onIdentitiyChange(event) {
      console.log(event);
      this.userData.identity_number = event;
    }


 

  //submitted form 
  onSubmittedForm() {

    console.log(this.actionForm);

    //get the attchiements edit 
    const editAttachements = [];
    for(let i = 0; i < this.files.length; i++) {
      for(let j = 0; j < this.attachments_ids.length; j++) {
       if(this.files[i].id == this.attachments_ids[j]) {
        editAttachements[i] = this.files[i];
       }
      }
    };

    //delete file & file type if not change it in old file
    for(let i = 0; i < editAttachements.length; i++) {
      if(editAttachements[i].file_type == '') {
        delete editAttachements[i].file;
        delete editAttachements[i].file_type;
      }
    };

    //delete the extera key file name 
    for(let i = 0; i < editAttachements.length; i++) {
      delete editAttachements[i].nameFile;
    };
    
    
    //remove old file from files object
    for(let i = 0; i < editAttachements.length; i++) {
      for(let j = 0; j < this.files.length; j++) {
        if(editAttachements[i].id == this.files[j].id) {
          this.files.splice(j , 1);
        }
      }
    };

    //remove nameFile and id from object
    for(let i = 0; i < this.files.length; i++) {
      delete this.files[i].nameFile;
      delete this.files[i].id;
    };
    
    console.log('files after update ', this.files);
    console.log('edit files after update ', editAttachements);
    
    this.actionForm['attachments_ids'] = this.attachments_ids;
    this.actionForm['editable_attachments'] = editAttachements;
    this.actionForm['attachments'] = this.files;

    this.checkSaveClick = true;

    this.http.post(this.authSer.pathApi + '/final_accreditation_of_trainees', this.actionForm).subscribe(
      (responce) => {
        console.log(responce),
        this.toastr.success('تم بنجاح');
        this.checkSaveClick = false;
        this.location.back();
      },
      (error) => {
        console.log(error);
        this.checkSaveClick = false;
        this.toastr.error('يوجد خطأ ، حاول لاحقاَ');
        this.location.back();
      }
    );

  }

}