add-group-grade.component.ts

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-add-group-grade',
  templateUrl: './add-group-grade.component.html',
  styleUrls: ['./add-group-grade.component.scss']
})
export class AddGroupGradeComponent implements OnInit {
  @Input() statusGroup = 'add' ;
  @Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
  activeTab: string = 'details-add';
  isChecked: boolean = false;

  // ข้อมูลที่จะใช้แสดงในตาราง
  @Input() items: any[] = [
    ['1', '', 'CC'],
    ['2', '', 'MC'],
    ['3', '', 'PC']
  ];

  // ฟังก์ชันในการเปลี่ยนแท็บ
  changeTab(tab: { id: string, text: string }) {
    this.activeTab = tab.id;
  }

  onEdit() {
    this.sendEdit.emit(false);
  }

  // ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข
  saveData(event: any, id: any): void {
    const updatedText = event.target.innerText;  // ข้อความที่พิมพ์เข้าไป

    // เก็บข้อมูลใน localStorage
    localStorage.setItem(`item-${id}`, updatedText);

    // ฟังก์ชันอัปเดตข้อมูล (หากต้องการส่งไปยัง API)
    this.updateItem(id, updatedText);
  }

  // ฟังก์ชันในการอัพเดตข้อมูล
  updateItem(id: any, updatedText: string): void {
    // ส่งข้อมูลไปยัง API เพื่อบันทึกข้อมูลในฐานข้อมูล
    // ตัวอย่างเช่น:
    // this.myService.updateItem(id, updatedText).subscribe(response => {
    //   this.showSuccessEdit(); // เรียกฟังก์ชันแจ้งเตือน
    // });
  }

  // เมื่อหน้าเว็บโหลดใหม่ดึงข้อมูลจาก localStorage
  ngOnInit(): void {
    this.items.forEach(item => {
      const savedText = localStorage.getItem(`item-${item[0]}`);
      if (savedText) {
        item[1] = savedText;  // ใช้ข้อมูลที่เก็บไว้
      }
    });
  }

  modalOptions: {
    [nameModal: string]: {
      isModalOpen: boolean;
      modalSize: string;
      backdropClose: boolean;
    };
  } = {
      "add": { isModalOpen: false, modalSize: 'm', backdropClose: true },
      "edit": { isModalOpen: false, modalSize: 'm', backdropClose: true }
    };

  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
    this.modalOptions[name].modalSize = size;
    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
    this.modalOptions[name].isModalOpen = true;
    this.currentModal = name;
    document.body.style.overflow = 'hidden';
  }

  closeModal(name: string) {
    this.modalOptions[name].isModalOpen = false;
    if (!this.isAnyModalOpen()) {
      document.body.style.overflow = '';
    }
  }

  isAnyModalOpen(): boolean {
    return Object.values(this.modalOptions).some(modal => modal.isModalOpen);
  }

  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
  addUser() {

  }


  currentModal = "";

  constructor(private toastr: ToastrService) { }

  // แสดงข้อความแจ้งเตือนเมื่อการบันทึกสำเร็จ
  showSuccessAdd() {
    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
  }

  showSuccessEdit() {
    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
  }

  showSuccessDelete() {
    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
  }
}