kfmc_website/src/app/dashboard/events/add-event/add-event.component.ts

import { AuthServiceService } from './../../../shared/auth-service.service';
import { Location } from '@angular/common';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { UserService } from '../../../shared/user.service';
import { ToastrService } from 'ngx-toastr';
import { NgxSpinnerService } from 'ngx-spinner';
import { FormGroup, NgForm } from '@angular/forms';
import { DashboardService } from 'src/app/shared/dashboard.service';

@Component({
  selector: 'app-add-event',
  templateUrl: './add-event.component.html',
  styleUrls: ['./add-event.component.css']
})


export class AddEventComponent implements OnInit {
 
  @ViewChild('f') eventForm: NgForm;
  typeMode: boolean = false;
  typeLink: string = '';
  eventId: number;
  bindingDateSplit;
  higriDateVal:string;
  checkSaveClick:boolean = false;

  event = {
    employee_name: '',
    employee_name_en: '',
    name: '',
    name_en: '',
    ranking: '',
    type: '',
    status: '',
    time: '',
  }

  constructor(private dashboard: DashboardService,
    private userService: UserService,
    private location: Location,
    private toastr: ToastrService,
    private authSer: AuthServiceService,
    private route: ActivatedRoute, 
    private spineer: NgxSpinnerService) { }

  ngOnInit() {
    
    //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;
    
    this.event.status = '1';

    this.route.params.subscribe(
      (params: Params) => {
        if(params['typeEventMode'] == 'edit') {
          this.typeMode = true;
          this.typeLink = 'تعديل';
          this.spineer.show();
          this.eventId = +params['editEventId'];
          this.dashboard.getItemData(this.eventId, "events").subscribe(
            (responce) => {
              console.log(responce);
              const eventData = responce['event'][0];
              console.log(eventData);
              this.event.name = eventData.name;
              this.event.employee_name = eventData.employee_name;
              this.event.employee_name_en = eventData.employee_name_en;
              this.event.name_en = eventData.name_en;
              this.event.ranking = eventData.ranking;
              this.event.type = eventData.type;
              this.event.status = eventData.status;
              const dateTime = eventData.event_time.split(' ');
              this.event.time = dateTime[1];
              const higriDate = dateTime[0].split('-');
              console.log('higrrrrrrrri', higriDate);
              this.higriDateVal = dateTime[0];
              this.bindingDateSplit = {
                'year': parseInt(higriDate[0]),
                'month': parseInt(higriDate[1]),
                'day': parseInt(higriDate[2])
              };

              console.log('hhhhhhhhhhhhhhh' , this.bindingDateSplit);
              this.spineer.hide();
            },
            (error) => {
              console.log(error);
            }
          )
        } else {
          this.typeLink = 'إنشاء جديد';
        }
      }
    );
  }

    //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);
    }
  

  //submitted form
  onSubmitted() {
    this.checkSaveClick = true;
    console.log(this.eventForm.value);
    this.eventForm.value['date'] = this.higriDateVal;
    if(this.eventForm.value.time) {
      this.eventForm.value.event_time = this.eventForm.value.date + ' ' + this.eventForm.value.time;
    } else {
      this.eventForm.value.event_time = this.eventForm.value.date + this.event.time;
    }
    console.log(this.eventForm.value.event_time);
    delete this.eventForm.value.time;
    delete this.eventForm.value.date;

    console.log(this.eventForm.value); 
    if(this.typeMode) {
      this.dashboard.editItem( this.eventId ,this.eventForm.value , "events").subscribe(
        (responce) => {
          console.log(responce);
          this.toastr.success('تمت التعديل بنجاح');
          this.location.back();
          this.checkSaveClick = false;
        },
        (error) => {
          console.log(error.error['status']);
          if(error.error.status == 'invalid event_time') {
            this.toastr.warning('يجب ان يكون الحدث في وقت سابق !');
          }else if(error.error['status'] == 'active status for only 4 records') {
            this.toastr.warning('لديك أربعه أحداث في الحاله فعال بالفعل ، قم بعدم تفعيل أو مسح أحدهم ');
          }else {
            this.toastr.error('حدث خطأ !');
          }
          console.log(error);
          this.checkSaveClick = false;
        }
      );
    } else {
      this.dashboard.addItem(this.eventForm.value, "events").subscribe(
        (responce) => {
          console.log(responce);
          this.toastr.success('تمت الاضافه بنجاح');
          this.location.back();
          this.checkSaveClick = false;
        },
        (error) => {
          console.log(error.error['status']);
          if(error.error.status == 'invalid event_time') {
            this.toastr.warning('يجب ان يكون الحدث في وقت سابق !');
          } else if(error.error['status'] == 'active status for only 4 records') {
            this.toastr.warning('لديك أربعه أحداث في الحاله فعال بالفعل ، قم بعدم تفعيل أو مسح أحدهم ');
          }else {
            this.toastr.error('حدث خطأ !');
          }
          console.log(error);
          this.checkSaveClick = false;
        }
      );
    }
  }

}