ranjit/Hospital_Management
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

design changes

Browse Source
This commit is contained in:
Sandipan Mitra 2025-02-06 15:33:27 +05:30
parent bcd8aa205a
commit 48d6a3fae8
7 changed files with 368 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
angular/src/app/patients/all-patients/all-patients.component.html
View File

@ -1,4 +1,4 @@
<div> <!-- <div>
<p-table #dt2 dataKey="id" [value]="patients" [paginator]="true" [rows]="10" [totalRecords]="totalRecords" <p-table #dt2 dataKey="id" [value]="patients" [paginator]="true" [rows]="10" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="loadPatient($event)" [rowsPerPageOptions]="[10, 20, 50]" [lazy]="true" (onLazyLoad)="loadPatient($event)" [rowsPerPageOptions]="[10, 20, 50]"
[responsiveLayout]="'scroll'" [globalFilterFields]="['id', 'name', 'status']" [responsiveLayout]="'scroll'" [globalFilterFields]="['id', 'name', 'status']"
@ -74,28 +74,108 @@
</ng-template> </ng-template>
</p-table> </p-table>
<span>Total Records: {{totalRecords}}</span> <span>Total Records: {{totalRecords}}</span>
</div> -->
<div class="container-fluid py-3">
<div class="card shadow-sm p-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2 class="mb-0">Patient List</h2>
<div class="d-flex align-items-center gap-2">
<button *ngIf="createpermission" class="btn btn-success btn-sm" (click)="openNewPatientDialog()">
<i class="pi pi-plus-circle"></i>
</button>
<button class="btn btn-warning btn-sm" (click)="exportPatient()">
<i class="pi pi-download"></i>
</button>
<div class="input-group">
<span class="input-group-text"><i class="pi pi-search"></i></span>
<input pInputText type="text" class="form-control"
(input)="dt2.filterGlobal($event.target.value, 'contains')" [(ngModel)]="globalFilter"
placeholder="Search keyword" />
</div>
</div>
</div>
<p-table #dt2 dataKey="id" [value]="patients" [paginator]="true" [rows]="10" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="loadPatient($event)" [rowsPerPageOptions]="[10, 20, 50]"
styleClass="p-datatable-gridlines" [responsiveLayout]="'scroll'"
[globalFilterFields]="['id', 'name', 'status']" [filters]="{ global: { value: '', matchMode: 'contains' } }"
class="table table-hover table-responsive-md">
<ng-template pTemplate="header">
<tr class="table-dark">
<th class="hidden" pSortableColumn="id">Patient ID <p-sortIcon field="id" /></th>
<th pSortableColumn="name">Full Name <p-sortIcon field="name" /></th>
<th pSortableColumn="gender">Gender <p-sortIcon field="gender" /></th>
<th pSortableColumn="admissionDate">Date of Admission <p-sortIcon field="admissionDate" /></th>
<th pSortableColumn="bloodGroup">Blood Group <p-sortIcon field="bloodGroup" /></th>
<th>Mobile</th>
<th>Email</th>
<th pSortableColumn="status">Status <p-sortIcon field="status" /></th>
<th>Actions</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-patient>
<tr>
<td class="hidden">{{ patient.id }}</td>
<td>{{ patient.name }}</td>
<td>
<span class="badge" [ngClass]="patient.gender === 1 ? 'bg-primary' : 'bg-pink'">
{{ gender[patient.gender] }}
</span>
</td>
<td>{{ patient.admissionDate | date }}</td>
<td>{{ patient.bloodGroup }}</td>
<td>{{ patient.mobile }}</td>
<td>{{ patient.email }}</td>
<td>
<span class="badge"
[ngClass]="patient.status === 1 ? 'bg-success' : (patient.status === 2 ? 'bg-primary':'bg-danger')">
{{ status[patient.status] }}
</span>
</td>
<td class="d-flex gap-1">
<button *ngIf="createpermission" class="btn btn-success btn-sm"
(click)="addnewrecord(patient.id)">
<i class="pi pi-arrow-right"></i>
</button>
<button *ngIf="editpermission" class="btn btn-warning btn-sm" (click)="editPatient(patient)"><i
class="pi pi-pencil"></i></button>
<button *ngIf="deletepermission" class="btn btn-danger btn-sm"
(click)="deletePatient(patient.id)"><i class="pi pi-trash"></i></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="10" class="text-center">No Patients found.</td>
</tr>
</ng-template>
</p-table>
<div class="text-end mt-2 fw-bold">Total Records: {{ totalRecords }}</div>
</div>
</div> </div>
<div> <div>
<p-dialog *ngIf="patientDialog" header="{{patientDialogTitle}}" [(visible)]="patientDialog" [modal]="true" <p-dialog *ngIf="patientDialog" header="{{patientDialogTitle}}" [(visible)]="patientDialog" [modal]="true"
[closable]="true" [style]="{width: '85%', height: '100%'}"> [closable]="true" [style]="{width: '80%', height: 'auto'}" class="modern-dialog">
<form #patientrecord="ngForm" (ngSubmit)="savePatient(patientrecord)"> <form #patientrecord="ngForm" (ngSubmit)="savePatient(patientrecord)">
<div class="p-fluid"> <div class="p-fluid grid">
<div class="p-grid"> <!-- Full Name & Profile Image -->
<!-- Full Name --> <div class="col-6">
<div class="p-col-6">
<div class="field"> <div class="field">
<label for="name">Full Name</label> <label for="name"><i class="pi pi-user"></i> Full Name</label>
<input id="name" name="name" type="text" pInputText [(ngModel)]="selectedPatient.name" <input id="name" name="name" type="text" pInputText [(ngModel)]="selectedPatient.name"
placeholder="Enter full patient name" required #name="ngModel" /> placeholder="Enter full patient name" required #name="ngModel" />
<small *ngIf="name.invalid && name.touched" class="p-error">Full Name is required</small> <small *ngIf="name.invalid && name.touched" class="p-error">Full Name is required</small>
</div> </div>
<div class="field"> <div class="field">
<label for="image">Profile Image</label> <label for="image"><i class="pi pi-image"></i> Profile Image</label>
<input type="file" id="image" name="image" accept=".jpg,.png" <input type="file" id="image" name="image" accept=".jpg,.png"
(change)="profileimageupload($event)"/> (change)="profileimageupload($event)" />
</div> </div>
<small *ngIf="error !== ''" class="p-error">{{error}}</small> <small *ngIf="error !== ''" class="p-error">{{error}}</small>
<!-- Progress Bar -->
<div *ngIf="uploadProgress > 0"> <div *ngIf="uploadProgress > 0">
<p>Uploading... {{ uploadProgress }}%</p> <p>Uploading... {{ uploadProgress }}%</p>
<progress [value]="uploadProgress" max="100"></progress> <progress [value]="uploadProgress" max="100"></progress>
@ -103,10 +183,10 @@
<small *ngIf="imgpath !== ''">{{imgpath}} <i class="pi pi-image"></i></small> <small *ngIf="imgpath !== ''">{{imgpath}} <i class="pi pi-image"></i></small>
</div> </div>
<!-- Mobile --> <!-- Mobile & Address -->
<div class="p-col-6"> <div class="col-6">
<div class="field"> <div class="field">
<label for="mobile">Mobile</label> <label for="mobile"><i class="pi pi-phone"></i> Mobile</label>
<input id="mobile" name="mobile" type="text" pInputText [(ngModel)]="selectedPatient.mobile" <input id="mobile" name="mobile" type="text" pInputText [(ngModel)]="selectedPatient.mobile"
placeholder="Enter mobile number" maxlength="10" required pattern="[0-9]{10}" placeholder="Enter mobile number" maxlength="10" required pattern="[0-9]{10}"
#mobile="ngModel" /> #mobile="ngModel" />
@ -114,26 +194,20 @@
Mobile is required and must be 10 digits Mobile is required and must be 10 digits
</small> </small>
</div> </div>
</div>
<!-- Address -->
<div class="p-col-6">
<div class="field"> <div class="field">
<label for="address">Address</label> <label for="address"><i class="pi pi-map-marker"></i> Address</label>
<input id="address" name="address" type="text" pInputText <input id="address" name="address" type="text" pInputText [(ngModel)]="selectedPatient.address"
[(ngModel)]="selectedPatient.address" placeholder="Enter address" required placeholder="Enter address" required #address="ngModel" />
#address="ngModel" /> <small *ngIf="address.invalid && address.touched" class="p-error">Address is required</small>
<small *ngIf="address.invalid && address.touched" class="p-error">Address is
required</small>
</div> </div>
</div> </div>
</div> </div>
<div class="p-grid"> <div class="p-fluid grid">
<!-- Gender --> <!-- Gender & Admission Date -->
<div class="p-col-6"> <div class="col-6">
<div class="field"> <div class="field">
<label for="gender">Gender</label> <label for="gender"><i class="pi pi-users"></i> Gender</label>
<div> <div>
<label class="mx-1"> <label class="mx-1">
<input id="male" type="radio" name="gender" [(ngModel)]="selectedgender" [value]="1" <input id="male" type="radio" name="gender" [(ngModel)]="selectedgender" [value]="1"
@ -149,44 +223,41 @@
<small *ngIf="!selectedgender" class="p-error">Gender is required</small> <small *ngIf="!selectedgender" class="p-error">Gender is required</small>
</div> </div>
</div> </div>
<div class="col-6">
<!-- Admission Date -->
<div class="p-col-6">
<div class="field"> <div class="field">
<label for="admissionDate">Admission Date</label> <label for="admissionDate"><i class="pi pi-calendar"></i> Admission Date</label>
<p-calendar id="admissionDate" name="admissionDate" [(ngModel)]="selectadmissionDate" <p-calendar id="admissionDate" name="admissionDate" [(ngModel)]="selectadmissionDate" showIcon
showIcon styleClass="small-calendar" required #admissionDate="ngModel"></p-calendar> styleClass="small-calendar" required #admissionDate="ngModel"></p-calendar>
<small *ngIf="admissionDate.invalid && admissionDate.touched" class="p-error"> <small *ngIf="admissionDate.invalid && admissionDate.touched" class="p-error">
Admission Date is required Admission Date is required
</small> </small>
</div> </div>
</div> </div>
</div> </div>
<div class="p-grid">
<!-- Doctors Note --> <div class="p-fluid grid">
<div class="p-col-6"> <!-- Doctor & Treatment -->
<div class="col-6">
<div class="field"> <div class="field">
<label for="doctorAssigned">Doctor Assigned</label> <label for="doctorAssigned"><i class="pi pi-user-md"></i> Doctor Assigned</label>
<input id="doctorAssigned" name="doctorAssigned" type="text" pInputText <input id="doctorAssigned" name="doctorAssigned" type="text" pInputText
[(ngModel)]="selectedPatient.doctorAssigned" placeholder="Enter assigned doctor" /> [(ngModel)]="selectedPatient.doctorAssigned" placeholder="Enter assigned doctor" />
</div> </div>
</div> </div>
<div class="col-6">
<!-- Treatment -->
<div class="p-col-6">
<div class="field"> <div class="field">
<label for="treatment">Treatment</label> <label for="treatment"><i class="pi pi-heartbeat"></i> Treatment</label>
<input id="treatment" name="treatment" type="treatment" pInputText <input id="treatment" name="treatment" type="text" pInputText
[(ngModel)]="selectedPatient.treatment" placeholder="Enter treatment" /> [(ngModel)]="selectedPatient.treatment" placeholder="Enter treatment" />
</div> </div>
</div> </div>
</div> </div>
<div class="p-grid"> <div class="p-fluid grid">
<!-- Blood Group --> <!-- Blood Group & Email -->
<div class="p-col-6"> <div class="col-6">
<div class="field"> <div class="field">
<label for="bloodGroup">Blood Group</label> <label for="bloodGroup"><i class="pi pi-tint"></i> Blood Group</label>
<input id="bloodGroup" name="bloodGroup" type="text" pInputText <input id="bloodGroup" name="bloodGroup" type="text" pInputText
[(ngModel)]="selectedPatient.bloodGroup" placeholder="Enter blood group" required [(ngModel)]="selectedPatient.bloodGroup" placeholder="Enter blood group" required
#bloodGroup="ngModel" /> #bloodGroup="ngModel" />
@ -194,11 +265,9 @@
required</small> required</small>
</div> </div>
</div> </div>
<div class="col-6">
<!-- Email -->
<div class="p-col-6">
<div class="field"> <div class="field">
<label for="email">Email</label> <label for="email"><i class="pi pi-envelope"></i> Email</label>
<input id="email" name="email" type="email" pInputText [(ngModel)]="selectedPatient.email" <input id="email" name="email" type="email" pInputText [(ngModel)]="selectedPatient.email"
placeholder="Enter email address" required email #email="ngModel" /> placeholder="Enter email address" required email #email="ngModel" />
<small *ngIf="email.invalid && email.touched" class="p-error">Enter a valid email <small *ngIf="email.invalid && email.touched" class="p-error">Enter a valid email
@ -207,36 +276,14 @@
</div> </div>
</div> </div>
<div class="p-grid"> <div class="text-right">
<!-- Age -->
<div class="p-col-6">
<div class="field">
<label for="age">Age</label>
<input id="age" name="age" type="number" pInputText [(ngModel)]="selectedPatient.age"
placeholder="Enter age" required min="1" max="120" #age="ngModel" />
<small *ngIf="age.invalid && age.touched" class="p-error">
Age is required and must be between 1 and 90
</small>
</div>
</div>
<!-- Status -->
<div class="p-col-6">
<div class="field">
<label for="status">Status</label>
<p-dropdown name="status" id="status" [options]="statuslist" [(ngModel)]="selectedstatus"
optionLabel="label" optionValue="value" placeholder="Select status"
required></p-dropdown>
<small *ngIf="selectedstatus === 0" class="p-error">Status is required</small>
</div>
</div>
</div>
</div>
<div>
<button type="submit" pButton class="btn btn-primary" <button type="submit" pButton class="btn btn-primary"
[disabled]="(patientrecord.invalid || selectedstatus === 0 || !selectedgender)">Save</button> [disabled]="(patientrecord.invalid || selectedstatus === 0 || !selectedgender)">
<button pButton class="btn btn-secondary ml-1" (click)="closeDialog()">Close</button> <i class="pi pi-check"></i> Save
</button>
<button pButton class="btn btn-secondary ml-1" (click)="closeDialog()">
<i class="pi pi-times"></i> Close
</button>
</div> </div>
</form> </form>
</p-dialog> </p-dialog>

9
angular/src/app/patients/all-patients/all-patients.component.scss
View File

@ -26,3 +26,12 @@
font-size: 1.2rem; font-size: 1.2rem;
} }
.bg-pink {
background-color: #ff4081 !important;
color: white;
}
.gap-1 {
gap: 5px;
}

2
angular/src/app/patients/all-patients/all-patients.component.ts
View File

@ -158,6 +158,7 @@ export class AllPatientsComponent implements OnInit {
this.error = 'Please Type a Name'; this.error = 'Please Type a Name';
return; return;
} }
this.error = '';
const input = event.target as HTMLInputElement; const input = event.target as HTMLInputElement;
if (input.files.length > 0) { if (input.files.length > 0) {
const tag = 'Image'; const tag = 'Image';
@ -170,7 +171,6 @@ export class AllPatientsComponent implements OnInit {
} }
} }
UploadFileData(tag: string, formdata: FormData) { UploadFileData(tag: string, formdata: FormData) {
// this.patientService.uploadFile(tag, formdata).subscribe(result => { // this.patientService.uploadFile(tag, formdata).subscribe(result => {
// this.selectedPatient.imageID = result; // this.selectedPatient.imageID = result;

242
angular/src/app/patients/patient-record/patient-record.component.html
View File

@ -52,30 +52,27 @@
</button> </button>
</div> </div>
<div> <div class="mt-4">
<p-table #dt2 dataKey="id" [value]="patientrecords" [paginator]="true" [rows]="10" [totalRecords]="totalRecords" <p-table #dt2 [value]="patientrecords" [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [lazy]="true"
[lazy]="true" (onLazyLoad)="loadPatient($event,patientId)" [rowsPerPageOptions]="[10, 20, 50]" (onLazyLoad)="loadPatient($event,patientId)" [rowsPerPageOptions]="[10, 20, 50]" [responsiveLayout]="'scroll'"
[responsiveLayout]="'scroll'" [globalFilterFields]="['id', 'name', 'diagnosis']" [globalFilterFields]="['id', 'name', 'diagnosis']" class="card shadow-sm">
[filters]="{ global: { value: '', matchMode: 'contains' } }" class="table table-striped">
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
<div class="flex"> <div class="flex justify-content-between align-items-center">
<h2 class="mr-auto">{{'::PatientHeader' | abpLocalization}}</h2> <h3>{{'::PatientHeader' | abpLocalization}}</h3>
<div> <div class="flex gap-2">
<button *ngIf="createpermission" pButton class="p-button-rounded p-button-success ml-2" <button *ngIf="createpermission" pButton class="p-button-rounded p-button-success"
(click)="openNewPatientDialog()"> (click)="openNewPatientDialog()">
<i class="pi pi-plus-circle"></i> <i class="pi pi-plus-circle"></i>
</button> </button>
<button pButton class="p-button-rounded p-button-warning ml-2" (click)="exportPatient()"> <button pButton class="p-button-rounded p-button-warning" (click)="exportPatient()">
<i class="pi pi-download"></i> <i class="pi pi-download"></i>
</button> </button>
<p-iconField iconPosition="right" class="ml-2"> <span class="p-input-icon-left">
<p-inputIcon>
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
</p-inputIcon> <input pInputText type="text" [(ngModel)]="globalFilter"
<input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')" (input)="dt2.filterGlobal($event.target.value, 'contains')" placeholder="Search...">
[(ngModel)]="globalFilter" placeholder="Search keyword" /> </span>
</p-iconField>
</div> </div>
</div> </div>
</ng-template> </ng-template>
@ -90,7 +87,7 @@
<th>Lab Reports</th> <th>Lab Reports</th>
<th>Medications</th> <th>Medications</th>
<th pSortableColumn="nextFollowUp">Next Follow-Up <p-sortIcon field="nextFollowUp" /></th> <th pSortableColumn="nextFollowUp">Next Follow-Up <p-sortIcon field="nextFollowUp" /></th>
<th pSortableColumn="status">Status <p-sortIcon field="status" /></th> <th>Status</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</ng-template> </ng-template>
@ -106,80 +103,44 @@
</td> </td>
<td>{{ patientrecord.dateOfAdmission | date }}</td> <td>{{ patientrecord.dateOfAdmission | date }}</td>
<td>{{ patientrecord.diagnosis }}</td> <td>{{ patientrecord.diagnosis }}</td>
<td><i class="pi pi-file-pdf pdf-icon"></i></td> <td><i class="pi pi-file-pdf text-danger"></i></td>
<td><i class="pi pi-file-pdf pdf-icon"></i></td> <td><i class="pi pi-file-pdf text-primary"></i></td>
<td>{{ patientrecord.nextFollowUp | date }}</td> <td>{{ patientrecord.nextFollowUp | date }}</td>
<td>{{ status[patientrecord.patients.status] }}</td> <td>
<td class="d-flex"> <span class="badge"
<button *ngIf="editpermission" class="btn btn-warning btn-sm" (click)="editPatient(patientrecord)"><i [ngClass]="patientrecord.patients.status === 1 ? 'bg-success' : (patientrecord.patients.status === 2 ? 'bg-primary':'bg-danger')">
class="pi pi-pencil"></i></button> {{ status[patientrecord.patients.status] }}
<button *ngIf="deletepermission" class="btn btn-danger btn-sm ml-1" </span>
(click)="deletePatient(patientrecord.id)"><i class="pi pi-trash"></i></button> </td>
<td class="flex gap-2">
<button *ngIf="editpermission" class="btn btn-warning btn-sm" (click)="editPatient(patientrecord)">
<i class="pi pi-pencil"></i>
</button>
<button *ngIf="deletepermission" class="btn btn-danger btn-sm" (click)="deletePatient(patientrecord.id)">
<i class="pi pi-trash"></i>
</button>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="emptymessage"> <ng-template pTemplate="emptymessage">
<tr> <tr>
<td colspan="11">No Patients found.</td> <td colspan="9">No Patients found.</td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<span>Total Records: {{totalRecords}}</span> <div class="mt-2">Total Records: {{totalRecords}}</div>
</div> </div>
<div> <div>
<p-dialog *ngIf="patientDialog" header="{{patientDialogTitle}}" [(visible)]="patientDialog" [modal]="true" <p-dialog *ngIf="patientDialog" header="{{patientDialogTitle}}" [(visible)]="patientDialog" [modal]="true"
[closable]="true" [style]="{width: '85%', height: '100%'}"> [closable]="true" [style]="{width: '70%', height: 'auto'}">
<form #patientrecord="ngForm" (ngSubmit)="savePatient(patientrecord)" novalidate> <form #patientrecord="ngForm" (ngSubmit)="savePatient(patientrecord)" novalidate>
<div class="p-fluid"> <div class="p-fluid grid">
<div class="p-grid">
<!-- <div class="p-col-6">
<div class="field">
<label for="fullname">Full Name</label>
<input id="fullname" name="fullname" type="text" autocomplete="off" pInputText
[(ngModel)]="selectedPatient.fullName" placeholder="Enter full patient name" required
#fullname="ngModel" />
<small *ngIf="fullname.invalid && fullname.touched" class="p-error">
Full Name is required.
</small>
</div>
</div> -->
<!-- <div class="p-col-6">
<div class="field">
<label for="mobile">Mobile</label>
<input id="mobile" name="mobile" type="text" autocomplete="off" pInputText
[(ngModel)]="selectedPatient.mobile" maxlength="10" pattern="^[0-9]{10}$"
placeholder="Enter mobile number" required #mobile="ngModel" />
<small *ngIf="mobile.invalid && mobile.touched" class="p-error">
Mobile number is required and must be 10 digits.
</small>
</div>
</div> -->
</div>
<div class="p-grid"> <!-- Admission Date -->
<div class="p-col-6"> <div class="col-6">
<!-- <div class="field">
<label for="gender">Gender</label>
<div>
<label class="mx-1">
<input style="background-color: #fff;" id="male" type="radio" name="gender"
[(ngModel)]="selectedgender" [value]="1" required #gender="ngModel" />
Male
</label>
<label>
<input style="background-color: #fff;" id="female" type="radio" name="gender"
[(ngModel)]="selectedgender" [value]="2" required />
Female
</label>
<small *ngIf="!selectedgender" class="p-error">
Please select a gender.
</small>
</div>
</div> -->
</div>
<div class="p-col-6">
<div class="field"> <div class="field">
<label for="admissionDate">Admission Date</label> <label for="admissionDate"><i class="pi pi-calendar"></i> Admission Date</label>
<p-calendar id="admissionDate" name="admissionDate" [(ngModel)]="selectdateOfAdmission" showIcon required <p-calendar id="admissionDate" name="admissionDate" [(ngModel)]="selectdateOfAdmission" showIcon required
#admissionDate="ngModel"></p-calendar> #admissionDate="ngModel"></p-calendar>
<small *ngIf="admissionDate.invalid && admissionDate.touched" class="p-error"> <small *ngIf="admissionDate.invalid && admissionDate.touched" class="p-error">
@ -187,52 +148,11 @@
</small> </small>
</div> </div>
</div> </div>
</div>
<div class="p-grid"> <!-- Next Follow-Up Date -->
<div class="p-col-6"> <div class="col-6">
<div class="field"> <div class="field">
<label for="labReport">Lab Report</label> <label for="nextFollowUp"><i class="pi pi-calendar-plus"></i> Next Follow-Up Date</label>
<input type="file" id="labReport" name="labReport" accept=".pdf,.doc,.docx"
(change)="handleUpload($event,'Lab-Report')" />
</div>
<div *ngIf="uploadProgress > 0">
<p>Uploading... {{ uploadProgress }}%</p>
<progress [value]="uploadProgress" max="100"></progress>
</div>
<small *ngIf="labReportUrlpath !==''">{{labReportUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
</div>
<div class="p-col-6">
<div class="field">
<label for="medications">Medications</label>
<input type="file" id="medications" name="medications" accept=".pdf,.doc,.docx"
(change)="handleUpload($event,'Medication')" />
</div>
<div *ngIf="uploadProgress > 0">
<p>Uploading... {{ uploadProgress }}%</p>
<progress [value]="uploadProgress" max="100"></progress>
</div>
<small *ngIf="medicationUrlpath !==''">{{medicationUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
</div>
</div>
<div class="p-grid">
<div class="p-col-6">
<div class="field">
<label for="medicationHistory">Medication History</label>
<input type="file" id="medicationHistory" name="medicationHistory" accept=".pdf,.doc,.docx"
(change)="handleUpload($event,'Medication-History')" />
</div>
<div *ngIf="uploadProgress > 0">
<p>Uploading... {{ uploadProgress }}%</p>
<progress [value]="uploadProgress" max="100"></progress>
</div>
<small *ngIf="medicationHistoryUrlpath !==''">{{medicationHistoryUrlpath}} <i
class="pi pi-file-pdf pdf-icon"></i></small>
</div>
<div class="p-col-6">
<div class="field">
<label for="nextFollowUp">Next FollowUp Date</label>
<p-calendar id="nextFollowUp" name="nextFollowUp" [(ngModel)]="selectnextFollowUp" showIcon required <p-calendar id="nextFollowUp" name="nextFollowUp" [(ngModel)]="selectnextFollowUp" showIcon required
#nextFollowUp="ngModel"></p-calendar> #nextFollowUp="ngModel"></p-calendar>
<small *ngIf="nextFollowUp.invalid && nextFollowUp.touched" class="p-error"> <small *ngIf="nextFollowUp.invalid && nextFollowUp.touched" class="p-error">
@ -242,12 +162,52 @@
</div> </div>
</div> </div>
<div class="p-grid"> <!-- File Uploads -->
<div class="p-col-12"> <div class="p-fluid grid">
<div class="col-6">
<div class="field"> <div class="field">
<div> <label for="labReport"><i class="pi pi-file-pdf"></i> Lab Report</label>
<label for="diagnosis">Diagnosis</label> <input type="file" id="labReport" name="labReport" accept=".pdf,.doc,.docx"
(change)="handleUpload($event,'Lab-Report')" />
<div *ngIf="uploadProgress1 > 0">
<p>Uploading... {{ uploadProgress1 }}%</p>
<progress [value]="uploadProgress1" max="100"></progress>
</div> </div>
<small *ngIf="labReportUrlpath!==''">{{labReportUrlpath}} <i class="pi pi-file"></i></small>
</div>
</div>
<div class="col-6">
<div class="field">
<label for="medications"><i class="pi pi-file-pdf"></i> Medications</label>
<input type="file" id="medications" name="medications" accept=".pdf,.doc,.docx"
(change)="handleUpload($event,'Medication')" />
<div *ngIf="uploadProgress2 > 0">
<p>Uploading... {{ uploadProgress2 }}%</p>
<progress [value]="uploadProgress2" max="100"></progress>
</div>
<small *ngIf="medicationUrlpath!==''">{{medicationUrlpath}} <i class="pi pi-file"></i></small>
</div>
</div>
<div class="col-6">
<div class="field">
<label for="medicationHistory"><i class="pi pi-file-pdf"></i>Medication History</label>
<input type="file" id="medicationHistory" name="medicationHistory" accept=".pdf,.doc,.docx"
(change)="handleUpload($event,'Medication-History')" />
<div *ngIf="uploadProgress3 > 0">
<p>Uploading... {{ uploadProgress3 }}%</p>
<progress [value]="uploadProgress3" max="100"></progress>
</div>
<small *ngIf="medicationHistoryUrlpath !==''">{{medicationHistoryUrlpath}} <i
class="pi pi-file-pdf pdf-icon"></i></small>
</div>
</div>
</div>
<!-- Diagnosis -->
<div class="p-fluid">
<div class="field">
<label for="diagnosis"><i class="pi pi-heartbeat"></i> Diagnosis</label>
<textarea style="width: 100%; background-color: #fff; color: black;" id="diagnosis" name="diagnosis" <textarea style="width: 100%; background-color: #fff; color: black;" id="diagnosis" name="diagnosis"
pInputTextarea rows="5" cols="30" [(ngModel)]="selectedPatient.diagnosis" required pInputTextarea rows="5" cols="30" [(ngModel)]="selectedPatient.diagnosis" required
#diagnosis="ngModel"></textarea> #diagnosis="ngModel"></textarea>
@ -256,13 +216,12 @@
</small> </small>
</div> </div>
</div> </div>
</div>
<div class="p-grid"> <!-- Insurance Provider -->
<div class="p-col-6"> <div class="p-fluid">
<div class="field"> <div class="field">
<label for="insuranceProvider">Insurance Provider</label> <label for="insuranceProvider"><i class="pi pi-credit-card"></i> Insurance Provider</label>
<input id="insuranceProvider" name="insuranceProvider" type="text" autocomplete="off" pInputText <input id="insuranceProvider" name="insuranceProvider" type="text" pInputText
[(ngModel)]="selectedPatient.insuranceProvider" required placeholder="Enter insurance provider" [(ngModel)]="selectedPatient.insuranceProvider" required placeholder="Enter insurance provider"
#insurance="ngModel" /> #insurance="ngModel" />
<small *ngIf="insurance.invalid && insurance.touched" class="p-error"> <small *ngIf="insurance.invalid && insurance.touched" class="p-error">
@ -270,22 +229,15 @@
</small> </small>
</div> </div>
</div> </div>
<div class="p-col-6">
<!-- <div class="field"> <!-- Buttons -->
<label for="status">Status</label> <div class="p-dialog-footer flex justify-content-end">
<p-dropdown name="status" id="status" [options]="statuslist" [(ngModel)]="selectedstatus" <button type="submit" pButton class="btn btn-primary" [disabled]="patientrecord.invalid">
optionLabel="label" optionValue="value" placeholder="Select status" required <i class="pi pi-check"></i> Save
#status="ngModel"></p-dropdown> </button>
<small *ngIf="selectedstatus === 0" class="p-error"> <button pButton class="btn btn-secondary ml-2" (click)="closeDialog()">
Status is required. <i class="pi pi-times"></i> Close
</small> </button>
</div> -->
</div>
</div>
</div>
<div>
<button type="submit" pButton class="btn btn-primary" [disabled]="patientrecord.invalid">Save</button>
<button pButton class="btn btn-secondary ml-1" (click)="closeDialog()">Close</button>
</div> </div>
</form> </form>
</p-dialog> </p-dialog>

3
angular/src/app/patients/patient-record/patient-record.component.scss
View File

@ -18,7 +18,8 @@
} }
.female { .female {
background-color: purple; background-color: #ff4081 !important;
color: white;
} }
.pdf-icon { .pdf-icon {

35
angular/src/app/patients/patient-record/patient-record.component.ts
View File

@ -41,7 +41,9 @@ export class PatientRecordComponent implements OnInit {
medicationHistoryUrlpath: string; medicationHistoryUrlpath: string;
medicationUrlpath: string; medicationUrlpath: string;
guid: string = '00000000-0000-0000-0000-000000000000'; guid: string = '00000000-0000-0000-0000-000000000000';
uploadProgress = 0; uploadProgress1 = 0;
uploadProgress2 = 0;
uploadProgress3 = 0;
constructor( constructor(
private patientService: PatientService, private patientService: PatientService,
@ -94,6 +96,9 @@ export class PatientRecordComponent implements OnInit {
this.medicationHistoryUrlpath = ''; this.medicationHistoryUrlpath = '';
this.selectdateOfAdmission = new Date(); this.selectdateOfAdmission = new Date();
this.selectnextFollowUp = new Date(); this.selectnextFollowUp = new Date();
this.uploadProgress1 = 0;
this.uploadProgress2 = 0;
this.uploadProgress3 = 0;
} }
loadPatient(event: any, id: any) { loadPatient(event: any, id: any) {
@ -198,7 +203,9 @@ export class PatientRecordComponent implements OnInit {
formdata.append('file', input.files[0]); formdata.append('file', input.files[0]);
this.UploadFileData(tag, formdata); this.UploadFileData(tag, formdata);
} else { } else {
this.uploadProgress = 0; this.uploadProgress1 = 0;
this.uploadProgress2 = 0;
this.uploadProgress3 = 0;
return; return;
} }
} }
@ -260,18 +267,30 @@ export class PatientRecordComponent implements OnInit {
this.http.request(req).subscribe( this.http.request(req).subscribe(
event => { event => {
if (event.type === HttpEventType.UploadProgress) { if (event.type === HttpEventType.UploadProgress) {
this.uploadProgress = Math.round((event.loaded / event.total!) * 100); // this.uploadProgress = Math.round((event.loaded / event.total!) * 100);
console.log(event.type, this.uploadProgress);
} else if (event.type === HttpEventType.Response) {
this.uploadProgress = 100;
switch (tag) { switch (tag) {
case 'Lab-Report': case 'Lab-Report':
this.uploadProgress1 = Math.round((event.loaded / event.total!) * 100);
break;
case 'Medication':
this.uploadProgress2 = Math.round((event.loaded / event.total!) * 100);
break;
case 'Medication-History':
this.uploadProgress3 = Math.round((event.loaded / event.total!) * 100);
break;
}
} else if (event.type === HttpEventType.Response) {
switch (tag) {
case 'Lab-Report':
this.uploadProgress1 = 100;
this.selectedPatient.labReportUrlID = event.body.toString(); this.selectedPatient.labReportUrlID = event.body.toString();
break; break;
case 'Medication': case 'Medication':
this.uploadProgress2 = 100;
this.selectedPatient.medicationUrlID = event.body.toString(); this.selectedPatient.medicationUrlID = event.body.toString();
break; break;
case 'Medication-History': case 'Medication-History':
this.uploadProgress3 = 100;
this.selectedPatient.medicationHistoryUrlID = event.body.toString(); this.selectedPatient.medicationHistoryUrlID = event.body.toString();
break; break;
} }
@ -279,7 +298,9 @@ export class PatientRecordComponent implements OnInit {
}, },
error => { error => {
console.error('Upload failed', error); console.error('Upload failed', error);
this.uploadProgress = 0; this.uploadProgress1 = 100;
this.uploadProgress2 = 100;
this.uploadProgress3 = 100;
} }
); );
} }

4
aspnet-core/src/HospitalManagementSystem.Application/Patients/PatientAppService.cs
View File

@ -54,7 +54,7 @@ namespace HospitalManagementSystem.Patients
.Include(x => x.LabReportUrl) .Include(x => x.LabReportUrl)
.Include(x => x.MedicationUrl) .Include(x => x.MedicationUrl)
.Include(x => x.MedicationHistoryUrl) .Include(x => x.MedicationHistoryUrl)
.WhereIf(!string.IsNullOrEmpty(input.Search), x => x.Patients.Name.ToLower().Contains(input.Search.ToLower())) .WhereIf(!string.IsNullOrEmpty(input.Search), x => x.Patients.Name.ToLower().Contains(input.Search.ToLower()) || x.Patients.Email.Contains(input.Search))
.Where(x => x.Patients.Id == Id); .Where(x => x.Patients.Id == Id);
var totalCount = await filteredQuery.CountAsync(); var totalCount = await filteredQuery.CountAsync();
@ -270,7 +270,7 @@ namespace HospitalManagementSystem.Patients
if (!string.IsNullOrEmpty(input.Search)) if (!string.IsNullOrEmpty(input.Search))
{ {
query = _patientRepository.GetQueryableAsync().Result query = _patientRepository.GetQueryableAsync().Result
.Where(x => x.Name.ToLower().Contains(input.Search.ToLower())) .Where(x => x.Name.ToLower().Contains(input.Search.ToLower()) || x.Email.Contains(input.Search))
.OrderBy(input.Sorting ?? (nameof(Patient.Id) + " asc")) .OrderBy(input.Sorting ?? (nameof(Patient.Id) + " asc"))
.Skip(input.SkipCount) .Skip(input.SkipCount)
.Take(input.MaxResultCount) .Take(input.MaxResultCount)