Hospital_Management/angular/src/app/appointment/appointment-dialog/appointment-dialog.component.ts

import { ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
import { HttpClient } from '@angular/common/http';
import {
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import { CreateOrUpdateAppointmentDto } from '@proxy/appoinments/dto';
import { Gender, appointmentStatus, visitType, paymentStatus } from '@proxy/global-enum';
import { DoctorService } from '@proxy/doctors';
import { AppointmentService } from '@proxy/appointments';
import { ButtonModule } from 'primeng/button';
import { CalendarModule } from 'primeng/calendar';
import { ChipModule } from 'primeng/chip';
import { DialogModule } from 'primeng/dialog';
import { DropdownModule } from 'primeng/dropdown';
import { InputTextModule } from 'primeng/inputtext';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { RadioButtonModule } from 'primeng/radiobutton';
import { TableModule } from 'primeng/table';
import { ViewAppointmentRoutingModule } from '../view-appointment/view-appointment-routing.module';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-appointment-dialog',
  standalone: true,
  imports: [
    ViewAppointmentRoutingModule,
    TableModule,
    DialogModule,
    FormsModule,
    TableModule,
    ButtonModule,
    DialogModule,
    InputTextModule,
    CalendarModule,
    DropdownModule,
    RadioButtonModule,
    InputTextareaModule,
    ChipModule,
    CommonModule,
  ],
  templateUrl: './appointment-dialog.component.html',
  styleUrl: './appointment-dialog.component.scss',
})
export class AppointmentDialogComponent implements OnInit {
  @Input() visible: boolean = false; // Control modal visibility
  @Input() name: string;
  @Input() isEditMode: boolean = false; // Determine if it's for edit or create
  @Output() save = new EventEmitter<any>(); // Event emitter for saving appointment
  @Output() close = new EventEmitter<void>(); // Event emitter for closing the modal
  @Input() appointmentId: string; // To accept the appointment ID from the parent
  @Input() selectedDate: string;
  appointmentsForDate: any[] = [];

  loading: boolean = false;
  AppointmentDialogTitle: string = '';
  AppointmentDialog: boolean = false;
  genders = Gender;
  Dateofbirth: Date = null;
  AppointmentDate: Date = null;
  doctors = [];
  doctorOptions = [];
  constructor(
    private DoctorService: DoctorService,
    private AppointmentService: AppointmentService,
    private toaster: ToasterService
  ) {}

  ngOnInit(): void {
    this.getdoctorlist();
    if (!this.isEditMode) {
      this.appointmentId = '';

      this.appointment = {
        firstName: '',
        lastName: '',
        email: '',
        gender: Gender.Male,
        dateOfAppointment: '',
        dob: '',
        timeOfAppointment: '',
        mobile: '',
        injuryORContion: '',
        note: '',
        doctorId: '',
        address: '',
        appointmentStatus: null,
        visitType: null,
        paymentStatus: null,
        insuranceProvider: '',
      };
    }
    else{
      this.fetchAppointmentData();
    }
  }


  fetchAppointmentData() {
    this.AppointmentService.getAppointmentById(this.appointmentId).subscribe(result => {
      this.appointment = result;
      this.AppointmentDate = new Date(result.dateOfAppointment);
      this.Dateofbirth = new Date(result.dob);
    });
  }
  appointment: CreateOrUpdateAppointmentDto = {
    id: '',
    firstName: '',
    lastName: '',
    email: '',
    gender: Gender.Male,
    mobile: '',
    address: '',
    dob: '',
    doctorId: '',
    dateOfAppointment: '',
    timeOfAppointment: '',
    injuryORContion: '',
    note: '',
    appointmentStatus: appointmentStatus.Scheduled,
    visitType: visitType.NewPatient,
    paymentStatus: paymentStatus.Unpaid,
    insuranceProvider: '',
  };

  saveAppointment(form: NgForm) {
    if (form.invalid) {
      Object.values(form.controls).forEach(control => control.markAsTouched());
      return;
    }
    this.appointment.dob = this.Dateofbirth.toDateString();
    this.appointment.dateOfAppointment = this.AppointmentDate.toDateString();
    if (this.isEditMode) {
      this.AppointmentService.updateAppointment(this.appointment).subscribe(
        () => {
          this.toaster.success('Appointment updated successfully', 'Success');
          this.AppointmentDialog = false;
          this.onClose();
        },
        error => {
          this.toaster.error(error, 'Error');
        }
      );
    } else {
      this.AppointmentService.createAppointment(this.appointment).subscribe(
        () => {
          this.toaster.success('Appointment created successfully', 'Success');
          this.AppointmentDialog = false;
          this.onClose();
        },
        error => {
          this.toaster.error(error, 'Error');
        }
      );
    }
  }
  getdoctorlist() {
    this.DoctorService.get().subscribe(result => {
      this.doctors = result;
      this.doctorOptions = this.doctors.map(doctor => ({
        label: `Dr. ${doctor.firstName} ${doctor.lastName}`,
        value: doctor.id,
      }));
    });
  }
  appointmentStatuses = Object.keys(appointmentStatus)
    .filter(key => !isNaN(Number(key)))
    .map(key => ({
      label: appointmentStatus[key as unknown as keyof typeof appointmentStatus],
      value: Number(key),
    }));
  visitTypes = Object.keys(visitType)
    .filter(key => !isNaN(Number(key)))
    .map(key => ({
      label: visitType[key as unknown as keyof typeof visitType],
      value: Number(key),
    }));
  paymentStatuses = Object.keys(paymentStatus)
    .filter(key => !isNaN(Number(key)))
    .map(key => ({
      label: paymentStatus[key as unknown as keyof typeof paymentStatus],
      value: Number(key),
    }));

  onClose() {
    this.AppointmentDialog = false;
    this.appointmentId = '';
    this.close.emit();
  }
}