Dashboard Page - Appointments:
- create separate dashboard components for doctor and patient - add appointments to dashboard components - add code to backend for appointments retrieval
This commit is contained in:
ElenitaMLG
@@ -6,6 +6,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/AuthLayout.css"/>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="background"></div>
|
||||
|
||||
@@ -1,28 +1,44 @@
|
||||
@page "/dashboard/{Role}"
|
||||
@using HealthcareManagerUiWebAssem.Services.User
|
||||
|
||||
@layout AuthLayout
|
||||
@inject UserService UserService
|
||||
|
||||
<head>
|
||||
<title>Dashboard</title>
|
||||
</head>
|
||||
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css"/>
|
||||
<h3>login success</h3>
|
||||
<h1>@displayMessage</h1>
|
||||
<div class="position-relative">
|
||||
<NavLink class="btn btn-primary m-2 position-absolute top-0 end-0" href="@($"/my-profile/{Role}")">My Profile</NavLink>
|
||||
</div>
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.css">
|
||||
<link href="https://cdn.datatables.net/2.0.4/css/dataTables.bootstrap5.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public string Role { get; set; }
|
||||
private string displayMessage;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
var userId = UserService.UserId;
|
||||
displayMessage = $"Login success for {Role} with ID: {userId}";
|
||||
<style>
|
||||
.select,
|
||||
#locale {
|
||||
width: 100%;
|
||||
}
|
||||
.like {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.modal-backdrop.show {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<NavLink class="btn btn-primary m-2 position-absolute top-0 end-0" href="@($"/my-profile/{Role}")">My Profile</NavLink>
|
||||
|
||||
@switch (Role)
|
||||
{
|
||||
case "doctor":
|
||||
<DoctorDashboard/>
|
||||
break;
|
||||
case "patient":
|
||||
<PatientDashboard/>
|
||||
break;
|
||||
default:
|
||||
<p>Unknown role. Please contact support.</p>
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public string Role { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
@using System.Text.Json
|
||||
@using HealthcareManagerUiWebAssem.Models
|
||||
@using HealthcareManagerUiWebAssem.Services.Profile
|
||||
@using HealthcareManagerUiWebAssem.Services.Appointment
|
||||
@using HealthcareManagerUiWebAssem.Services.User
|
||||
@inject UserService UserService
|
||||
@inject IProfileService ProfileService
|
||||
@inject IAppointmentService AppointmentService
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<div class="container mt-3">
|
||||
<h2 class="landingTitle">Doctor Menu</h2>
|
||||
<p class="landingSubtitle">Here you can manage appointments, review your patients' medical history and chat with your patients.</p>
|
||||
<div id="accordion">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
|
||||
Appointments
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Patient Name</th>
|
||||
|
||||
<th>Appointment Time</th>
|
||||
|
||||
<th>Delete</th>
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
@foreach (var appointment in appointments)
|
||||
|
||||
{
|
||||
|
||||
@foreach (var date in appointment.AppointmentsList)
|
||||
|
||||
{
|
||||
|
||||
<tr>
|
||||
|
||||
<td>@GetPatientName(new Guid(appointment.PatientId))</td>
|
||||
|
||||
<td>@date.ToString("yyyy-MM-dd HH:mm")</td>
|
||||
|
||||
<td><button class="btn btn-danger" @onclick="(() => DeleteAppointment(appointment))">Delete</button></td>
|
||||
|
||||
</tr>
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
<AppointmentTableComponent appointments="appointments" OnAppointmentDeleted="HandleAppointmentDeleted" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ... other patient-specific cards ... -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private List<Patient> patients;
|
||||
private string selectedDoctorId;
|
||||
private DateTime? selectedDate;
|
||||
private List<Appointment> appointments;
|
||||
private List<byte[]> medicalHistoryFiles;
|
||||
[Parameter] public string Role { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await InitializePatients();
|
||||
await LoadAppointments();
|
||||
}
|
||||
|
||||
private async Task LoadAppointments()
|
||||
{
|
||||
var response = await AppointmentService.GetAppointmentsByDoctor(UserService.UserId);
|
||||
var jsonOptions = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
|
||||
if (response.StatusCode == HttpStatusCodes.OK)
|
||||
{
|
||||
appointments = JsonSerializer.Deserialize<List<Appointment>>(response.Data, jsonOptions) ?? new List<Appointment>();
|
||||
}
|
||||
else
|
||||
{
|
||||
appointments = new List<Appointment>();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task InitializePatients()
|
||||
{
|
||||
var response = await ProfileService.GetPatients();
|
||||
var jsonOptions = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
|
||||
if (response.StatusCode == HttpStatusCodes.OK)
|
||||
{
|
||||
patients = JsonSerializer.Deserialize<List<Patient>>(response.Data, jsonOptions);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Handle error
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
private void AddMedicalHistoryFile()
|
||||
|
||||
{
|
||||
|
||||
// Logic for adding a new appointment
|
||||
|
||||
}
|
||||
|
||||
private async Task DeleteAppointment(Appointment appointmentToDelete)
|
||||
|
||||
{
|
||||
|
||||
var appointmentModelToDelete = new AppointmentManagementModel
|
||||
|
||||
{
|
||||
|
||||
PatientId = new Guid(appointmentToDelete.PatientId),
|
||||
|
||||
DoctorId = new Guid(appointmentToDelete.DoctorId),
|
||||
|
||||
Appointment = appointmentToDelete.AppointmentsList.FirstOrDefault()
|
||||
|
||||
};
|
||||
|
||||
await AppointmentService.DeleteAppointment(appointmentModelToDelete);
|
||||
|
||||
appointments.Remove(appointmentToDelete);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
private string GetPatientName(Guid patientId)
|
||||
{
|
||||
var patient = patients.Select(d => d).FirstOrDefault(d => d.Id == patientId);
|
||||
return patient?.Name ?? string.Empty;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
@using System.Text.Json
|
||||
@using HealthcareManagerUiWebAssem.Models
|
||||
@using HealthcareManagerUiWebAssem.Services.Profile
|
||||
@using HealthcareManagerUiWebAssem.Services.Appointment
|
||||
@using HealthcareManagerUiWebAssem.Services.User
|
||||
@inject UserService UserService
|
||||
@inject IProfileService ProfileService
|
||||
@inject IAppointmentService AppointmentService
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<div class="container mt-3">
|
||||
<h2 class="landingTitle">Patient Menu</h2>
|
||||
<p class="landingSubtitle">Here you can manage appointments, review your medical history and chat with doctors.</p>
|
||||
<div id="accordion">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
|
||||
Appointments
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<button @onclick="ShowAddAppointmentModal" class="btn btn-primary">Add Appointment</button>
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Doctor Name</th>
|
||||
|
||||
<th>Appointment Time</th>
|
||||
|
||||
<th>Delete</th>
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
@foreach (var appointment in appointments)
|
||||
|
||||
{
|
||||
|
||||
@foreach (var date in appointment.AppointmentsList)
|
||||
|
||||
{
|
||||
|
||||
<tr>
|
||||
|
||||
<td>@GetDoctorName(new Guid(appointment.DoctorId))</td>
|
||||
|
||||
<td>@date.ToString("yyyy-MM-dd HH:mm")</td>
|
||||
|
||||
<td><button class="btn btn-danger" @onclick="(() => DeleteAppointment(appointment))">Delete</button></td>
|
||||
|
||||
</tr>
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
<AppointmentTableComponent appointments="appointments" OnAppointmentDeleted="HandleAppointmentDeleted" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ... other patient-specific cards ... -->
|
||||
</div>
|
||||
<div class="modal" id="addAppointmentModal" tabindex="-1" aria-labelledby="addAppointmentModalLabel" data-backdrop="false">
|
||||
|
||||
<div class="modal-dialog">
|
||||
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
|
||||
<h5 class="modal-title" id="addAppointmentModalLabel">Add Appointment</h5>
|
||||
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
@if (doctors != null)
|
||||
|
||||
{
|
||||
|
||||
<select @bind="selectedDoctorId" class="form-select">
|
||||
|
||||
<option value="">Select a doctor</option>
|
||||
|
||||
@foreach (var doctor in doctors)
|
||||
|
||||
{
|
||||
|
||||
<option value="@doctor.Id">@doctor.Name</option>
|
||||
|
||||
}
|
||||
|
||||
</select>
|
||||
|
||||
<input type="datetime-local" @bind="selectedDate" class="form-control" />
|
||||
|
||||
}
|
||||
|
||||
else
|
||||
|
||||
{
|
||||
|
||||
<p>Loading doctors...</p>
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
|
||||
<button @onclick="CreateAppointment" type="button" class="btn btn-primary">Create Appointment</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private List<Doctor> doctors;
|
||||
private string selectedDoctorId;
|
||||
private DateTime? selectedDate;
|
||||
private List<Appointment> appointments;
|
||||
private List<byte[]> medicalHistoryFiles;
|
||||
[Parameter] public string Role { get; set; }
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await InitializeDoctors();
|
||||
await LoadAppointments();
|
||||
}
|
||||
|
||||
private async Task LoadAppointments()
|
||||
{
|
||||
var response = await AppointmentService.GetAppointmentsByPatient(UserService.UserId);
|
||||
var jsonOptions = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
|
||||
if (response.StatusCode == HttpStatusCodes.OK)
|
||||
{
|
||||
appointments = JsonSerializer.Deserialize<List<Appointment>>(response.Data, jsonOptions) ?? new List<Appointment>();
|
||||
}
|
||||
else
|
||||
{
|
||||
appointments = new List<Appointment>();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ShowAddAppointmentModal()
|
||||
{
|
||||
await JS.InvokeVoidAsync("eval", "new bootstrap.Modal(document.getElementById('addAppointmentModal')).show();");
|
||||
}
|
||||
|
||||
private async Task InitializeDoctors()
|
||||
{
|
||||
var response = await ProfileService.GetDoctors();
|
||||
var jsonOptions = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
|
||||
if (response.StatusCode == HttpStatusCodes.OK)
|
||||
{
|
||||
doctors = JsonSerializer.Deserialize<List<Doctor>>(response.Data, jsonOptions);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Handle error
|
||||
}
|
||||
}
|
||||
|
||||
private async Task CreateAppointment()
|
||||
|
||||
{
|
||||
|
||||
if (string.IsNullOrEmpty(selectedDoctorId) || !selectedDate.HasValue)
|
||||
|
||||
{
|
||||
|
||||
// Handle validation
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Call AddAppointment method, which is not shown here
|
||||
|
||||
var createAppointmentModel = new AppointmentManagementModel
|
||||
|
||||
{
|
||||
|
||||
PatientId = UserService.UserId,
|
||||
|
||||
DoctorId = new Guid(selectedDoctorId),
|
||||
|
||||
Appointment = (DateTime)selectedDate
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
await AppointmentService.CreateAppointment(createAppointmentModel);
|
||||
|
||||
// You'll need to pass UserService.UserId, selectedDoctorId, and selectedDate.Value to it
|
||||
|
||||
|
||||
|
||||
// Close the modal after creation
|
||||
|
||||
await JS.InvokeVoidAsync("eval", "new bootstrap.Modal(document.getElementById('addAppointmentModal')).hide();");
|
||||
|
||||
|
||||
|
||||
// Optionally, refresh the appointments list
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
private void AddMedicalHistoryFile()
|
||||
|
||||
{
|
||||
|
||||
// Logic for adding a new appointment
|
||||
|
||||
}
|
||||
|
||||
private async Task DeleteAppointment(Appointment appointmentToDelete)
|
||||
|
||||
{
|
||||
|
||||
var appointmentModelToDelete = new AppointmentManagementModel
|
||||
|
||||
{
|
||||
|
||||
PatientId = new Guid(appointmentToDelete.PatientId),
|
||||
|
||||
DoctorId = new Guid(appointmentToDelete.DoctorId),
|
||||
|
||||
Appointment = appointmentToDelete.AppointmentsList.FirstOrDefault()
|
||||
|
||||
};
|
||||
|
||||
await AppointmentService.DeleteAppointment(appointmentModelToDelete);
|
||||
|
||||
appointments.Remove(appointmentToDelete);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
private string GetDoctorName(Guid doctorId)
|
||||
{
|
||||
var doctor = doctors.Select(d => d).FirstOrDefault(d => d.Id == doctorId);
|
||||
return doctor?.Name ?? string.Empty;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user