kfmc_website/src/app/dashboard/news/add-news/add-news.component.ts

import { DashboardService } from './../../../shared/dashboard.service';
import { HttpClient } from '@angular/common/http';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { ActivatedRoute, Params } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { Location } from '@angular/common';
import { NewService } from './../../../shared/new.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { UserService } from '../../../shared/user.service';
import { NgForm } from '@angular/forms';
import * as Quill from 'quill';


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

  @ViewChild('f') newForm: NgForm;
  typeMode: boolean = false;
  newId: number;
  checkValidImg: boolean = true;
  imageBase64: string = '';
  imageMainBase64:string = '';
  photoType: string = '';
  typeLink: string = '';
  checkSaveClick: boolean = false;
  photoEdit:boolean = false;
  checkAddMode: boolean = false;
  serviceName: string = '';
  mainPhotoDefault: string = '../../../../assets/image/Group 408.png';
  mainPhotoPath: string = '';
  serviceId: number;
  

  new = {
    title: '',
    title_en: '',
    ranking: '',
    display_location: '',
    type: '',
    status: '',
    description: '',
    description_en: '',
  }

  images = [{
    base64: '',
    photoType: '',
    urlImg: '../../../../assets/image/Group 408.png',
    id: '',
    is_main_photo: 0
  }];

  //add more div photo
  plusImage() {
    this.checkAddMode = true;
    this.images.push({
     base64: '',
     photoType: '',
     urlImg: '../../../../assets/image/Group 408.png',
     id: '',
     is_main_photo: 0
    });
  }




  constructor(private newService: NewService,
    private userService: UserService,
    private authSer: AuthServiceService,
    private location: Location,
    private toastr: ToastrService,
    private route: ActivatedRoute,
    private http: HttpClient, 
    private authService: AuthServiceService,
    private dashBoardService: DashboardService,
    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.new.status = '1';

    this.route.parent.params.subscribe(
      (params: Params) => {
        this.serviceId = params['serviceID'];
        if(this.serviceId == 13) {
          this.serviceName = 'خدمه إداره المحتوي';
        } else if(this.serviceId == 2) {
          this.serviceName = ' خدمه إداره الصفحه الخارجيه';
        }
      }
    )
    
    this.route.params.subscribe(
      (params: Params) => {
        if(params['typeNewMode'] == 'edit') {
          this.typeLink = 'تعديل';
          this.images = [];
          this.spineer.show();
          this.typeMode = true;
          this.newId = params['editNewId'];
          this.dashBoardService.getItemData(this.newId, 'news').subscribe(
            (responce) => {
              console.log(responce);
              const newData = responce['report'];
              console.log(newData);
              this.new.title = newData.title;
              this.new.title_en = newData.title_en;
              this.new.ranking = newData.ranking;
              this.new.display_location = newData.display_location;
              this.new.type = newData.type;
              this.new.status = newData.status;
              this.new.description = newData.description;
              this.new.description_en = newData.description_en;
              if(responce['report'].photos) {
                this.checkValidImg = false;
                for(let i = 0 ; i < newData.photos.length; i++) { 
                  this.images.push({
                    base64: '',//this.onFileChanges(newData.photos[i].photo,i),
                    photoType: '',
                    urlImg : this.authSer.pathImg +  newData.photos[i].photo,
                    id: newData.photos[i].id,
                    is_main_photo : newData.photos[i].is_main_photo,
                  });
                  console.log('imageeeees' , this.images);
                }
              }
              this.spineer.hide();
            },
            (error) => {
              console.log(error);
            }
          )
        } else {
          this.typeLink = 'إنشاء جديد';
        }
      }
    );
  }



  onFileChanges(event,index) {
    console.log(event);
    console.log('upload image index' , index);
    let dateEditUplad = {};

    if(this.typeMode) {
      if(this.checkAddMode) {
        dateEditUplad = {
          'photo': event[0].base64,
          'photo_type': event[0].type.split('/')[1],
          'report_id':  this.newId,
        }
      } else {
        dateEditUplad = {
          'photo': event[0].base64,
          'photo_type': event[0].type.split('/')[1],
          'photo_id':  this.images[index].id,
        }
      }

      console.log(dateEditUplad);
      this.http.post(this.authSer.pathApi + '/upload_report_photo', dateEditUplad).subscribe(
        (responce) => {
          console.log(responce);
        },
        (error) => {
          console.log(error);
        }
      )
    } else {
      this.imageBase64 = event[0].base64;
      this.images[index].base64 = this.imageBase64;
      this.photoType = event[0].type.split('/');
      this.images[index].photoType = this.photoType[1];
      console.log('images array' , this.images);
      this.checkValidImg = false;
    }
  }

  getUrl(event,index) {   
    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'];
      this.images[index].urlImg = event.target['result'];
    }
  }
 }

 deleteImg(index, data) {
   if(this.typeMode) {
    this.images.splice(index , 1);
    this.http.get(this.authSer.pathApi + '/delete_report_photo/' + data.id).subscribe(
      (responce) => {
        console.log(responce);
      },
      (error) => {
        console.log(error);
      }
    );
   } else {
     this.images.splice(index,1);
   }
 
 }


 deleteMainImg() {
   this.mainPhotoPath = '';
 }



  //submitted form
  onSubmitted() {

    this.checkSaveClick = true;

    const formData = this.newForm.value;
      
    if(this.typeMode){
        //to remove photo from object not has edit on it
        // const images = [];
        // for(let i = 0; i < this.images.length; i++) {
        //   if(this.images[i].base64 == '') {
        //     this.images.splice(this.images.indexOf(this.images[i]) , 1);
        //   } else {
        //     if(i == 0) {
        //       images.push({
        //         photo: this.images[i].base64,
        //         photo_type: this.images[i].photoType,
        //       });
        //     } else {
        //       images.push({
        //         photo: this.images[i].base64,
        //         photo_type: this.images[i].photoType,
        //       });
        //     }
        //   }
        // }

        //formData['images'] = images;

        console.log(formData);

        if(this.serviceId == 2) {
          this.dashBoardService.editItem(this.newId, formData,'externalNew').subscribe(
            (responce) => {
              console.log(responce);
              this.toastr.success('تمت التعديل بنجاح');
              this.location.back();
            },
            (error) => {
              console.log(error);
              this.toastr.error('خطأ في التعديل !');
              this.checkSaveClick = false;
            }
          );
        } else if(this.serviceId == 6){
          this.dashBoardService.editItem(this.newId, formData, 'internalNew').subscribe(
            (responce) => {
              console.log(responce);
              this.toastr.success('تمت التعديل بنجاح');
              this.location.back();
            },
            (error) => {
              console.log(error);
              this.checkSaveClick = false;
              this.toastr.error('خطأ في التعديل !');
            }
          );
        }
    
    } else {
      if(this.images[0].base64 == ''){
        this.toastr.warning('قم باختيار الصوره الرئيسيه !');
        this.checkSaveClick = false;
      } else {

        const images = [];

        for(let i = 0; i < this.images.length; i++) {
          if(i == 0) {
            images.push({
              photo: this.images[i].base64,
              photo_type: this.images[i].photoType,
              is_main_photo: 1,
            });
          } else {
            images.push({
              photo: this.images[i].base64,
              photo_type: this.images[i].photoType,
              is_main_photo: 0,
            });
          }
        }

        formData['images'] = images;

        console.log(formData);

        if(this.serviceId == 6) {
          this.dashBoardService.addItem(formData, 'internalNews').subscribe(
            (responce) => {
              console.log(responce);
              this.toastr.success('تمت الاضافه بنجاح');
              this.location.back();
              this.checkSaveClick = false;
            },
            (error) => {
              console.log(error);
              this.toastr.error('خطأ في الحفظ !');
              this.checkSaveClick = false;
            }
          );
        } else if(this.serviceId == 2) {
          this.dashBoardService.addItem(formData, 'externalNews').subscribe(
            (responce) => {
              console.log(responce);
              this.toastr.success('تمت الاضافه بنجاح');
              this.location.back();
            },
            (error) => {
              console.log(error);
              this.toastr.error('خطأ في الحفظ !');
              this.checkSaveClick = false;
            }
          );
        }

     

      }
    }
  }

}