Commit 7faebe91 authored by Sandeep Sagar Panjala's avatar Sandeep Sagar Panjala

added ambulance, role pages

parent 3cf6ed3d
......@@ -48,6 +48,10 @@ const routes: Routes = [
path: "admissions",
loadChildren: () => import('./areas/admin/admissions/admissions.module').then(m => m.AdmissionsModule)
},
{
path: "ambulance",
loadChildren: () => import('./areas/admin/ambulance/ambulance.module').then(m => m.AmbulanceModule)
},
]
},
{ path: "**", redirectTo: "not-found" },
......
<router-outlet></router-outlet>
\ No newline at end of file
import { NgModule } from '@angular/core';
import { SharedModule } from '@src/app/shared/shared.module';
import { ReactiveFormsModule } from '@angular/forms';
import { AmbulanceRoutingModule } from './ambulance.routing.module';
import { NewAmbulanceModulePage } from './ambulance.page';
import { AmbulanceMasterPage } from './pages/masters/masters.page';
import { AmbulanceReceiptPage } from './pages/reciept/reciept.page';
import { AddAmbulancePage } from './pages/masters/add-ambulance/add-ambulance.page';
import { DriverDetailPage } from './pages/masters/driver-detail/driverDetail.page';
@NgModule({
declarations: [
NewAmbulanceModulePage, AmbulanceMasterPage, AmbulanceReceiptPage, AddAmbulancePage, DriverDetailPage
],
imports: [
AmbulanceRoutingModule,
ReactiveFormsModule,
SharedModule
]
})
export class AmbulanceModule { }
\ No newline at end of file
import { Component } from "@angular/core";
@Component({
templateUrl: "./ambulance.html"
})
export class NewAmbulanceModulePage {
}
\ No newline at end of file
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '@src/app/shared/guards';
import { NewAmbulanceModulePage } from './ambulance.page';
import { AmbulanceReceiptPage } from './pages/reciept/reciept.page';
import { AmbulanceMasterPage } from './pages/masters/masters.page';
import { AddAmbulancePage } from './pages/masters/add-ambulance/add-ambulance.page';
import { DriverDetailPage } from './pages/masters/driver-detail/driverDetail.page';
const routes: Routes = [
{
path: "",
data: { title: "Ambulance" },
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
component: NewAmbulanceModulePage,
children: [
{ path: "", redirectTo: "ambulance-receipt", pathMatch: "full" },
{ path: "ambulance-receipt", component: AmbulanceReceiptPage, data: { title: "Ambulance Receipts" } },
{
path: "masters",
component: AmbulanceMasterPage,
children: [
{ path: "add-ambulance", component: AddAmbulancePage, data: { title: "Add Ambulance" } },
{ path: "driver-detail", component: DriverDetailPage, data: { title: "Driver Detail" } },
{ path: "**", redirectTo: "add-ambulance" }
]
},
{ path: "**", redirectTo: "ambulance-receipt" }
]
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AmbulanceRoutingModule { }
\ No newline at end of file
export * from "./ambulance.page";
export * from "./pages/reciept/reciept.page";
export * from "./pages/masters/masters.page";
export * from "./pages/masters/add-ambulance/add-ambulance.page";
export * from "./pages/masters/driver-detail/driverDetail.page";
\ No newline at end of file
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<button type="button" class="btn btn-primary btn-sm" (click)="onOpenModel(ambulanceTemplate)"><i class="fe-plus mr-1"></i> Add </button>
</div>
<h4 class="page-title">Ambulance</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card-box p-0">
<div class="row p-2" *ngIf="loading">
<div class="col-12">
<div class="d-flex align-items-center">
<span class="spinner-grow text-warning" role="status" aria-hidden="true"></span>
<span class="ml-2">Please wait while loading ...</span>
</div>
</div>
</div>
<div class="row p-2" *ngIf="!loading && (!ambulancerecords || !ambulancerecords.length)">
<div class="col-12 mh-400">
<div class="no-data">
<img src="assets/images/no-data.png" alt="No data" />
<p class="sub-title">There is no data to show you right now.</p>
<button type="button" class="btn btn-primary btn-sm" (click)="onOpenModel(ambulanceTemplate)"><i class="fe-plus mr-1"></i> Add </button>
</div>
</div>
</div>
<div class="table-responsive" *ngIf="!loading && ambulancerecords.length > 0">
<table class="table table-sm">
<thead class="table-info">
<tr>
<th>Ambulance No</th>
<th>Assigned No</th>
<th>CreatedBy</th>
<th>Created Date</th>
<th>Modified By</th>
<th>Modified Date</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of ambulancerecords;index as i;">
<td>
<span [textContent]="item.ambulanceNo"></span>
</td>
<td>
<span [textContent]="item.assignedNo"></span>
</td>
<td>
<span class="font-13 mb-0" [textContent]="item.createdByName"></span>
<!--<span class="badge badge-outline-info font-11" [textContent]="item.createdByRole"></span>-->
</td>
<td>
<span [textContent]="item.createdDate | date:'dd-MM-yyyy, hh:mm a'"></span>
</td>
<td>
<div *ngIf="item.modifiedBy">
<h5 class="font-13 mb-0" [textContent]="item.modifiedByName"></h5>
<!--<span class="badge badge-outline-secondary font-11" [textContent]="item.modifiedByRole"></span>-->
</div>
<span *ngIf="!item.modifiedBy">-----</span>
</td>
<td>
<span *ngIf="item.modifiedDate" [textContent]="item.modifiedDate | date:'dd-MM-yyyy, hh:mm a'"></span>
<span *ngIf="!item.modifiedDate">----</span>
</td>
<td>
<span class="badge badge-soft-success" *ngIf="item.active">Active</span>
<span class="badge badge-soft-danger" *ngIf="!item.active">Inactive</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-end">
<a href="javascript:;" class="action-icon text-primary mr-1" placement="left" ngbTooltip="Edit" (click)="onOpenModel(ambulanceTemplate, item)"><i class="fe-edit"></i></a>
<a class="action-icon text-primary mr-1" href="javascript:;" placement="left" ngbTooltip="{{item.active?'Inactive':'Active'}}" (click)="updateStatus(item)"><i *ngIf="item.active" class="fe-x"></i><i *ngIf="!item.active" class="fe-check"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #ambulanceTemplate>
<form [formGroup]="ambulanceForm" (ngSubmit)="onSubmit()">
<div class="modal-header">
<h4 class="modal-title"><i class="mdi mdi-human-edit mr-1"></i>{{ambulanceForm.value.ambulanceId === 0 ? 'Add' : 'Edit'}} Ambulance</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onCloseModal();">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="mb-1">Ambulance No <code>*</code></label>
<input oninput="this.value = this.value.toUpperCase()" class="form-control" placeholder="Enter ambulance no." formControlName="ambulanceNo"
[ngClass]="{ 'is-invalid': submitted && form.ambulanceNo.errors }"
/>
<div class="text-danger" *ngIf="submitted && form.ambulanceNo.errors">
<p *ngIf="form.ambulanceNo.errors.required">Ambulance No is required.</p>
<p *ngIf="form.ambulanceNo.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.ambulanceNo.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="mb-1">Assigned Vehicle No <code>*</code></label>
<input type="text" class="form-control" placeholder="Enter Assigned No." formControlName="assignedNo"
[ngClass]="{ 'is-invalid': submitted && form.assignedNo.errors }" />
<div class="text-danger" *ngIf="submitted && form.assignedNo.errors">
<p *ngIf="form.assignedNo.errors.required">Assigned No is required.</p>
<p *ngIf="form.assignedNo.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.assignedNo.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light btn-sm mr-1" (click)="onCloseModal();">Cancel</button>
<button type="submit" [disabled]="submitting" class="btn btn-primary btn-sm">
<span *ngIf="submitting">
<span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>
Please wait..
</span>
<span *ngIf="!submitting">Submit</span>
</button>
</div>
</form>
</ng-template>
\ No newline at end of file
import { Component, ViewEncapsulation, OnInit, OnDestroy, TemplateRef } from "@angular/core";
import { Page, IUserAccount } from "../../../../../../shared/models";
import { Ambulance } from "../../../../../../shared/entities";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { NgbModalRef, NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { AppData } from "../../../../../../app.data";
import { HttpService, NotifyService } from "../../../../../../shared/services";
import { ApiResources } from "../../../../../../shared/helpers";
import { takeUntil, finalize } from "rxjs/operators";
import { WhiteSpaceValidator } from "../../../../../../shared/validators";
@Component({
templateUrl: "./add-ambulance.html",
encapsulation: ViewEncapsulation.None
})
export class AddAmbulancePage implements OnInit, OnDestroy {
page: Page;
loading: boolean;
ambulancerecords: Array<Ambulance>;
submitting: boolean;
submitted: boolean;
ambulanceForm: FormGroup;
modalRef: NgbModalRef;
constructor(
private readonly formBuilder: FormBuilder,
private readonly modalService: NgbModal,
private readonly appData: AppData,
private readonly httpService: HttpService,
private readonly notifyService: NotifyService
) {
this.page = new Page();
this.loading = true;
}
onSubmit() {
this.submitted = true;
if (this.ambulanceForm.invalid) {
return;
}
this.submitting = true;
const request = {
...this.ambulanceForm.getRawValue(),
createdBy: this.page.userAccount.accountId,
loginRoleId: this.page.userAccount.roleId,
createdByName: this.page.userAccount.fullName
};
var url = ApiResources.getURI(ApiResources.ambulance.base, ApiResources.ambulance.insert);
if (request["ambulanceId"] > 0) {
url = ApiResources.getURI(ApiResources.ambulance.base, ApiResources.ambulance.update);
}
this.httpService.post(url, request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.submitted = this.submitting = false))
.subscribe(
(response: number) => {
if (response > 0) {
this.notifyService.successToast(`Record ${request["ambulanceId"] > 0 ? 'updated' : 'added'} successfully.`);
this.fetchAmbulance();
}
if (response === -1) {
this.notifyService.warningToast("This ambulance No already exists.");
return;
}
this.onCloseModal();
},
);
}
fetchAmbulance() {
this.loading = true;
const request = {
};
this.httpService.post(ApiResources.getURI(ApiResources.ambulance.base, ApiResources.ambulance.fetch), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.loading = false))
.subscribe((responce: Array<Ambulance>) => {
this.ambulancerecords = responce;
});
}
//onDelete(record: Ambulance) {
// this.notifyService.delete(() => {
// const request = {
// ambulanceId: record.ambulanceId,
// ambulanceNo: record.ambulanceNo,
// createdBy: this.page.userAccount.accountId,
// loginRoleId: this.page.userAccount.roleId,
// createdByName: this.page.userAccount.fullName
// };
// this.httpService.post(ApiResources.getURI(ApiResources.ambulance.base, ApiResources.ambulance.delete), request)
// .pipe(takeUntil(this.page.unSubscribe))
// .pipe(finalize(() => this.loading = false))
// .subscribe(
// (response: number) => {
// if (response > 0) {
// this.notifyService.successToast("Record deleted successfully.");
// }
// if (response === -3) {
// this.notifyService.warningToast("The record you tried to delete can't be deleted because it is being used.");
// }
// this.fetchAmbulance();
// },
// //(error: HttpErrorResponse) => {
// // this.onError(error)
// //}
// );
// })
//}
updateStatus(ambulance: Ambulance) {
ambulance.modifiedBy = this.page.userAccount.accountId;
this.httpService
.put(ApiResources.getURI(ApiResources.ambulance.base, ApiResources.ambulance.modifyStatus), ambulance)
.subscribe(() => {
ambulance.active = !ambulance.active;
this.fetchAmbulance();
});
}
private buildForm() {
this.ambulanceForm = this.formBuilder.group({
ambulanceId: 0,
ambulanceNo: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
assignedNo: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
})
}
onOpenModel(content: TemplateRef<any>, ambulanceRecord?: Ambulance) {
this.buildForm();
if (ambulanceRecord)
this.ambulanceForm.patchValue({
ambulanceId: ambulanceRecord.ambulanceId,
ambulanceNo: ambulanceRecord.ambulanceNo,
assignedNo: ambulanceRecord.assignedNo,
});
this.modalRef = this.modalService.open(content, {
backdrop: "static",
keyboard: false,
centered: false,
windowClass: "custom-modal effect-scale"
});
}
get form() { return this.ambulanceForm.controls; }
ngOnInit() {
this.appData.userAccount
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((userAccount: IUserAccount) => {
if (userAccount) {
this.page.userAccount = userAccount;
this.fetchAmbulance();
} else {
this.page.userAccount = undefined;
}
});
}
ngOnDestroy() {
this.page.unsubscribeAll();
}
onCloseModal() {
try {
this.modalRef.close();
this.modalRef = undefined;
} catch (e) {
// ignored;
}
this.loading = false;
this.submitting = undefined;
this.submitted = undefined;
}
}
\ No newline at end of file
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<button type="button" class="btn btn-primary btn-sm" (click)="onOpenModel(driverDetailTemplate)"><i class="fe-plus mr-1"></i> Add </button>
</div>
<h4 class="page-title">Drivers</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card-box p-0">
<div class="row p-2" *ngIf="loading">
<div class="col-12">
<div class="d-flex align-items-center">
<span class="spinner-grow text-warning" role="status" aria-hidden="true"></span>
<span class="ml-2">Please wait while loading ...</span>
</div>
</div>
</div>
<div class="row p-2" *ngIf="!loading && (!driverDetails || !driverDetails.length)">
<div class="col-12 mh-400">
<div class="no-data">
<img src="assets/images/no-data.png" alt="No data" />
<p class="sub-title">There is no data to show you right now.</p>
<button type="button" class="btn btn-primary btn-sm" (click)="onOpenModel(driverDetailTemplate)"><i class="fe-plus mr-1"></i> Add </button>
</div>
</div>
</div>
<div class="table-responsive" *ngIf="!loading && driverDetails.length > 0">
<table class="table table-sm">
<thead class="table-info">
<tr>
<th>Driver Name</th>
<th>Mobile No</th>
<th>Adhar No</th>
<th>Address</th>
<th>From Time</th>
<th>To Time</th>
<th>CreatedBy</th>
<th>Created Date</th>
<th>Modified By</th>
<th>Modified Date</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of driverDetails;index as i;">
<td>
<span [textContent]="item.driverDetailName"></span>
</td>
<td>
<span [textContent]="item.mobileNo"></span>
</td>
<td>
<span [textContent]="item.aadharNo"></span>
</td>
<td>
<span [textContent]="item.address"></span>
</td>
<td>
<span [textContent]="item.fromTime"></span>
</td>
<td>
<span [textContent]="item.toTime"></span>
</td>
<td>
<h5 class="font-13 mb-0" [textContent]="item.createdByName"></h5>
<span class="badge badge-outline-info font-11" [textContent]="item.createdByRole"></span>
</td>
<td>
<span [textContent]="item.createdDate | date:'dd-MM-yyyy, hh:mm a'"></span>
</td>
<td>
<div *ngIf="item.modifiedBy">
<h5 class="font-13 mb-0" [textContent]="item.modifiedByName"></h5>
<span class="badge badge-outline-secondary font-11" [textContent]="item.modifiedByRole"></span>
</div>
<span *ngIf="!item.modifiedBy">-----</span>
</td>
<td>
<span *ngIf="item.modifiedDate" [textContent]="item.modifiedDate | date:'dd-MM-yyyy, hh:mm a'"></span>
<span *ngIf="!item.modifiedDate">----</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-end">
<a href="javascript:;" class="action-icon text-primary mr-1" placement="left" ngbTooltip="Edit" (click)="onOpenModel(driverDetailTemplate, item)"><i class="fe-edit"></i></a>
<a class="action-icon text-primary mr-1" href="javascript:;" placement="left" ngbTooltip="{{item.active?'Inactive':'Active'}}" (click)="updateStatus(item)"><i *ngIf="item.active" class="fe-x"></i><i *ngIf="!item.active" class="fe-check"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #driverDetailTemplate>
<form [formGroup]="driverDetailForm" (ngSubmit)="onSubmit()">
<div class="modal-header">
<h4 class="modal-title"><i class="mdi mdi-human-edit mr-1"></i>{{driverDetailForm.value.driverDetailId === 0 ? 'Add' : 'Edit'}} Driver Details </h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onCloseModal();">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="mb-1">Driver Name <code>*</code></label>
<input type="text" class="form-control" placeholder="Enter driver Name." formControlName="driverDetailName"
[ngClass]="{ 'is-invalid': submitted && form.driverDetailName.errors }" />
<div class="text-danger" *ngIf="submitted && form.driverDetailName.errors">
<p *ngIf="form.driverDetailName.errors.required">Driver Name is required.</p>
<p *ngIf="form.driverDetailName.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.driverDetailName.errors.whiteSpaces">Please remove white space...</p>
<p *ngIf="form.driverDetailName.errors.pattern">Case Type allows alphabets only...</p>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="mb-1">Mobile No<code>*</code></label>
<input type="text" max="10" class="form-control" placeholder="Enter mobile no." formControlName="mobileNo" maxlength="10" numbersOnly
[ngClass]="{ 'is-invalid': submitted && form.mobileNo.errors }" />
<div class="text-danger" *ngIf="submitted && form.mobileNo.errors">
<p *ngIf="form.mobileNo.errors.required">Mobile No is required.</p>
<p *ngIf="form.adharno.errors.mobileValidator">Only 10 characters are allowed.</p>
<p *ngIf="form.mobileNo.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="mb-1">Adhar No<code>*</code></label>
<input type="text" max="12" class="form-control" placeholder="Enter Adhar No." formControlName="aadharNo" numbersOnly
[ngClass]="{ 'is-invalid': submitted && form.aadharNo.errors }" />
<div class="text-danger" *ngIf="submitted && form.aadharNo.errors">
<p *ngIf="form.aadharNo.errors.required">Adhar no is required.</p>
<p *ngIf="form.aadharNo.errors.maxlength">Only 12 characters are allowed.</p>
<p *ngIf="form.aadharNo.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="mb-1">Address<code>*</code></label>
<input type="text" class="form-control" placeholder="Enter address." formControlName="address"
[ngClass]="{ 'is-invalid': submitted && form.address.errors }" />
<div class="text-danger" *ngIf="submitted && form.address.errors">
<p *ngIf="form.address.errors.required">Case Type code is required.</p>
<p *ngIf="form.address.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.address.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="mb-1">From Time<code>*</code></label>
<input type="time" class="form-control" formControlName="fromTime"
[ngClass]="{ 'is-invalid': submitted && form.fromTime.errors }" />
<div class="text-danger" *ngIf="submitted && form.fromTime.errors">
<p *ngIf="form.fromTime.errors.required">From time is required.</p>
<p *ngIf="form.fromTime.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.fromTime.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label class="mb-1">To Time<code>*</code></label>
<input type="time" class="form-control" formControlName="toTime"
[ngClass]="{ 'is-invalid': submitted && form.toTime.errors }" />
<div class="text-danger" *ngIf="submitted && form.toTime.errors">
<p *ngIf="form.toTime.errors.required">To time is required.</p>
<p *ngIf="form.toTime.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.toTime.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light btn-sm mr-1" (click)="onCloseModal();">Cancel</button>
<button type="submit" [disabled]="submitting" class="btn btn-primary btn-sm">
<span *ngIf="submitting">
<span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>
Please wait..
</span>
<span *ngIf="!submitting">Submit</span>
</button>
</div>
</form>
</ng-template>
\ No newline at end of file
import { Component, ViewEncapsulation, OnInit, OnDestroy, TemplateRef } from "@angular/core";
import { Page, IUserAccount } from "../../../../../../shared/models";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { NgbModalRef, NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { AppData } from "../../../../../../app.data";
import { HttpService, NotifyService } from "../../../../../../shared/services";
import { takeUntil, finalize } from "rxjs/operators";
import { ApiResources } from "../../../../../../shared/helpers";
import { DriverDetails } from "../../../../../../shared/entities/ambulance/driver-details.entity";
import { WhiteSpaceValidator } from "../../../../../../shared/validators";
import { HttpErrorResponse } from "@angular/common/http";
@Component({
templateUrl: "./driverDetail.html",
encapsulation: ViewEncapsulation.None
})
export class DriverDetailPage implements OnInit, OnDestroy {
page: Page;
loading: boolean;
driverDetails: Array<DriverDetails>;
submitting: boolean;
submitted: boolean;
driverDetailForm: FormGroup;
modalRef: NgbModalRef;
constructor(
private readonly formBuilder: FormBuilder,
private readonly modalService: NgbModal,
private readonly appData: AppData,
private readonly httpService: HttpService,
private readonly notifyService: NotifyService
) {
this.page = new Page();
this.loading = true;
}
onSubmit() {
this.submitted = true;
if (this.driverDetailForm.invalid) {
return;
}
this.submitting = true;
const request = {
...this.driverDetailForm.getRawValue(),
createdBy: this.page.userAccount.accountId,
loginRoleId: this.page.userAccount.roleId,
createdByName: this.page.userAccount.fullName
};
var url = ApiResources.getURI(ApiResources.driverDetail.base, ApiResources.driverDetail.insert);
if (request["driverDetailId"] > 0) {
url = ApiResources.getURI(ApiResources.driverDetail.base, ApiResources.driverDetail.update);
}
this.httpService.post(url, request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.submitted = this.submitting = false))
.subscribe(
(response: number) => {
if (response > 0) {
this.notifyService.successToast(`Record ${request["driverDetailId"] > 0 ? 'updated' : 'added'} successfully.`);
this.fetchDriver();
}
if (response === -1) {
this.notifyService.warningToast("This driver name already exists.");
return;
}
this.onCloseModal();
},
);
}
fetchDriver() {
this.loading = true;
const request = {
};
this.httpService.post(ApiResources.getURI(ApiResources.driverDetail.base, ApiResources.driverDetail.fetch), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.loading = false))
.subscribe((responce: Array<DriverDetails>) => {
this.driverDetails = responce;
});
}
//onDelete(record: DriverDetails) {
// this.notifyService.delete(() => {
// const request = {
// driverDetailId: record.driverDetailId,
// driverDetailName: record.driverDetailName,
// createdBy: this.page.userAccount.accountId,
// loginRoleId: this.page.userAccount.roleId,
// createdByName: this.page.userAccount.fullName
// };
// this.httpService.post(ApiResources.getURI(ApiResources.driverDetail.base, ApiResources.driverDetail.delete), request)
// .pipe(takeUntil(this.page.unSubscribe))
// .pipe(finalize(() => this.loading = false))
// .subscribe(
// (response: number) => {
// if (response > 0) {
// this.notifyService.successToast("Record deleted successfully.");
// }
// if (response === -3) {
// this.notifyService.warningToast("The record you tried to delete can't be deleted because it is being used.");
// }
// this.fetchDriver();
// },
// //(error: HttpErrorResponse) => {
// // this.onError(error)
// //}
// );
// })
//}
updateStatus(driverDetail: DriverDetails) {
driverDetail.modifiedBy = this.page.userAccount.accountId;
this.httpService
.put(ApiResources.getURI(ApiResources.driverDetail.base, ApiResources.driverDetail.modifyStatus), driverDetail)
.subscribe((response: number) => {
if (response > 0) {
this.notifyService.successToast(`${status ? 'Activated' : 'Deactivated'} successfully.`);
}
this.fetchDriver();
}, (error: HttpErrorResponse) => {
this.notifyService.errorToast(error.error);
});
}
private buildForm() {
this.driverDetailForm = this.formBuilder.group({
driverDetailId: 0,
driverDetailName: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid, Validators.pattern('^[a-zA-Z]*$')]],
mobileNo: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid, Validators.pattern('^[0-9]*$')]],
aadharNo: [null, [Validators.required, Validators.maxLength(12), WhiteSpaceValidator.isValid, Validators.pattern('^[0-9]*$')]],
address: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
fromTime: [null, [Validators.required]],
toTime: [null, [Validators.required]],
})
}
onOpenModel(content: TemplateRef<any>, driverDetail?: DriverDetails) {
this.buildForm();
if (driverDetail)
this.driverDetailForm.patchValue({
driverDetailId: driverDetail.driverDetailId,
driverDetailName: driverDetail.driverDetailName,
mobileNo: driverDetail.mobileNo,
aadharNo: driverDetail.aadharNo,
address: driverDetail.address,
fromTime: driverDetail.fromTime,
toTime: driverDetail.toTime
});
this.modalRef = this.modalService.open(content, {
backdrop: "static",
keyboard: false,
centered: false,
windowClass: "custom-modal effect-scale"
});
}
get form() { return this.driverDetailForm.controls; }
ngOnInit() {
this.appData.userAccount
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((userAccount: IUserAccount) => {
if (userAccount) {
this.page.userAccount = userAccount;
this.fetchDriver();
} else {
this.page.userAccount = undefined;
}
});
}
ngOnDestroy() {
this.page.unsubscribeAll();
}
onCloseModal() {
try {
this.modalRef.close();
this.modalRef = undefined;
} catch (e) {
// ignored;
}
this.loading = false;
this.submitting = undefined;
this.submitted = undefined;
}
}
\ No newline at end of file
<router-outlet></router-outlet>
\ No newline at end of file
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
templateUrl: "./masters.html",
encapsulation: ViewEncapsulation.None
})
export class AmbulanceMasterPage {
}
\ No newline at end of file
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<button type="button" class="btn btn-primary btn-sm" (click)="onOpenModel(ambulanceReceiptTemplate)"><i class="fe-plus mr-1"></i> Add </button>
</div>
<h4 class="page-title">Ambulance Receipt</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card-box p-0">
<div class="row p-2" *ngIf="loadingambulancereceipts">
<div class="col-12">
<div class="d-flex align-items-center">
<span class="spinner-grow text-warning" role="status" aria-hidden="true"></span>
<span class="ml-2">Please wait while loading ...</span>
</div>
</div>
</div>
<div class="row p-2" *ngIf="!loadingambulancereceipts && (!ambulancereceipts || !ambulancereceipts.length)">
<div class="col-12 mh-400">
<div class="no-data">
<img src="assets/images/no-data.png" alt="No data" />
<p class="sub-title">There is no data to show you right now.</p>
<button type="button" class="btn btn-primary btn-sm" (click)="onOpenModel(ambulanceReceiptTemplate)"><i class="fe-plus mr-1"></i> Add </button>
</div>
</div>
</div>
<div class="table-responsive" *ngIf="!loadingambulancereceipts && ambulancereceipts.length > 0">
<table class="table table-sm">
<thead class="table-info">
<tr>
<th>RecieptNo</th>
<th>Address</th>
<th>FromLocation</th>
<th>ToLocation</th>
<th>PatientName</th>
<th>PatientMobile</th>
<th>DriverDetail Name</th>
<th>Ambulance No</th>
<th>CreatedBy</th>
<th>Created Date</th>
<th>Amount</th>
<th>Modified By</th>
<th>Modified Date</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of ambulancereceipts;index as i;">
<td>
<span [textContent]="item.recieptNo"></span>
</td>
<td>
<span [textContent]="item.address"></span>
</td>
<td>
<span [textContent]="item.fromLocation"></span>
</td>
<td>
<span [textContent]="item.toLocation"></span>
</td>
<td>
<span [textContent]="item.patientName"></span>
</td>
<td>
<span [textContent]="item.patientMobile"></span>
</td>
<td>
<span [textContent]="item.driverDetailName"></span>
</td>
<td>
<span [textContent]="item.ambulanceNo"></span>
</td>
<td>
<span class="font-13 mb-0" [textContent]="item.createdByName"></span>
<span class="badge badge-outline-info font-11" [textContent]="item.createdByRole"></span>
</td>
<td>
<span [textContent]="item.createdDate | date:'dd-MM-yyyy, hh:mm a'"></span>
</td>
<td>
<span [textContent]="item.amount"></span>
</td>
<td>
<div *ngIf="item.modifiedBy">
<h5 class="font-13 mb-0" [textContent]="item.modifiedByName"></h5>
<span class="badge badge-outline-secondary font-11" [textContent]="item.modifiedByRole"></span>
</div>
<span *ngIf="!item.modifiedBy">-----</span>
</td>
<td>
<span *ngIf="item.modifiedDate" [textContent]="item.modifiedDate | date:'dd-MM-yyyy, hh:mm a'"></span>
<span *ngIf="!item.modifiedDate">----</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-end">
<a href="javascript:;" class="action-icon text-primary mr-1" placement="left" ngbTooltip="Edit" (click)="onOpenModel(ambulanceReceiptTemplate, item)"><i class="fe-edit"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #ambulanceReceiptTemplate>
<form [formGroup]="ambulanceReceiptForm" (ngSubmit)="onSubmit()">
<div class="modal-header">
<h4 class="modal-title"><i class="mdi mdi-human-edit mr-1"></i>{{ambulanceReceiptForm.value.ambulanceRecieptId === 0 ? 'Add' : 'Edit'}} Receipt</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onCloseModal();">×</button>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="mb-1">Reciept No</label>
<input input="Text" class="form-control" readonly placeholder="Auto generate" formControlName="recieptNo"
[ngClass]="{ 'is-invalid': submitted && form.recieptNo.errors }" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Ambulance <code>*</code></label>
<select class="form-control custom-select" formControlName="ambulanceId" [ngClass]="{ 'is-invalid': (submitted && form.ambulanceId.errors) }">
<option [ngValue]="null" *ngIf="!loadingAmbulances">Select</option>
<option selected *ngIf="loadingAmbulances">Loading...</option>
<option *ngFor="let item of ambulancerecords" [textContent]="item.value" [ngValue]="item.id"></option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Driver <code>*</code></label>
<select class="form-control custom-select" formControlName="driverDetailId" [ngClass]="{ 'is-invalid': (submitted && form.driverDetailId.errors) }">
<option [ngValue]="null" *ngIf="!loadingDrivers">Select</option>
<option selected *ngIf="loadingDrivers">Loading...</option>
<option *ngFor="let item of driverDetail" [textContent]="item.value" [ngValue]="item.id"></option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="mb-1">Address <code>*</code></label>
<input input="Text" class="form-control" placeholder="Enter address." formControlName="address"
[ngClass]="{ 'is-invalid': submitted && form.address.errors }" />
<div class="text-danger" *ngIf="submitted && form.address.errors">
<p *ngIf="form.address.errors.required">address is required.</p>
<p *ngIf="form.address.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.address.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="mb-1">From Location <code>*</code></label>
<input type="text" class="form-control" placeholder="Enter from Location." formControlName="fromLocation"
[ngClass]="{ 'is-invalid': submitted && form.fromLocation.errors }" />
<div class="text-danger" *ngIf="submitted && form.fromLocation.errors">
<p *ngIf="form.fromLocation.errors.required">From Location is required.</p>
<p *ngIf="form.fromLocation.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.fromLocation.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="mb-1">To Location <code>*</code></label>
<input type="text" class="form-control" placeholder="Enter to Location ." formControlName="toLocation"
[ngClass]="{ 'is-invalid': submitted && form.toLocation.errors }" />
<div class="text-danger" *ngIf="submitted && form.toLocation.errors">
<p *ngIf="form.toLocation.errors.required">To Location is required.</p>
<p *ngIf="form.toLocation.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.toLocation.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="mb-1">Patient Name <code>*</code></label>
<input type="text" class="form-control" placeholder="Enter Patient Name." formControlName="patientName"
[ngClass]="{ 'is-invalid': submitted && form.patientName.errors }" />
<div class="text-danger" *ngIf="submitted && form.patientName.errors">
<p *ngIf="form.patientName.errors.required">Patient Name is required.</p>
<p *ngIf="form.patientName.errors.maxlength">Only 250 characters are allowed.</p>
<p *ngIf="form.patientName.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="mb-1">Patient Mobile <code>*</code></label>
<input type="text" numbersOnly class="form-control" placeholder="Enter patient Mobile No." formControlName="patientMobile" maxlength="10"
[ngClass]="{ 'is-invalid': submitted && form.patientMobile.errors }" />
<div class="text-danger" *ngIf="submitted && form.patientMobile.errors">
<p *ngIf="form.patientMobile.errors.required">Patient Mobile is required.</p>
<p *ngIf="form.patientMobile.errors.maxlength">Only 10 characters are allowed.</p>
<p *ngIf="form.patientMobile.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="mb-1">Amount <code>*</code></label>
<input type="number" class="form-control" placeholder="Enter amount." formControlName="amount"
[ngClass]="{ 'is-invalid': submitted && form.amount.errors }" />
<div class="text-danger" *ngIf="submitted && form.amount.errors">
<p *ngIf="form.amount.errors.required">amount is required.</p>
<p *ngIf="form.amount.errors.maxlength">Only 10 characters are allowed.</p>
<p *ngIf="form.amount.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light btn-sm mr-1" (click)="onCloseModal();">Cancel</button>
<button type="submit" [disabled]="submitting" class="btn btn-primary btn-sm">
<span *ngIf="submitting">
<span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>
Please wait..
</span>
<span *ngIf="!submitting">Submit</span>
</button>
</div>
</form>
</ng-template>
\ No newline at end of file
import { Component, ViewEncapsulation, TemplateRef } from "@angular/core";
import { Page, IUserAccount, IResource } from "../../../../../shared/models";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { NgbModalRef, NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { AppData } from "../../../../../app.data";
import { HttpService, NotifyService, ResourceService } from "../../../../../shared/services";
import { ApiResources } from "../../../../../shared/helpers";
import { takeUntil, finalize } from "rxjs/operators";
import { WhiteSpaceValidator, MobileValidator } from "../../../../../shared/validators";
import { AmbulanceReceipt } from "../../../../../shared/entities/ambulance/ambulance-receipt.entity";
@Component({
templateUrl: "./receipt.html",
encapsulation: ViewEncapsulation.None
})
export class AmbulanceReceiptPage {
page: Page;
loadingambulancereceipts: boolean;
ambulancereceipts: Array<AmbulanceReceipt>;
ambulancerecords: Array<IResource>;
driverDetail: Array<IResource>;
submitting: boolean;
submitted: boolean;
ambulanceReceiptForm: FormGroup;
modalRef: NgbModalRef;
loadingAmbulances: boolean;
loadingDrivers: boolean;
constructor(
private readonly formBuilder: FormBuilder,
private readonly modalService: NgbModal,
private readonly appData: AppData,
private readonly httpService: HttpService,
private readonly notifyService: NotifyService,
private readonly resourceService: ResourceService
) {
this.page = new Page();
this.loadingambulancereceipts = true;
}
onSubmit() {
this.submitted = true;
if (this.ambulanceReceiptForm.invalid) {
return;
}
this.submitting = true;
const request = {
...this.ambulanceReceiptForm.getRawValue(),
createdBy: this.page.userAccount.accountId,
loginRoleId: this.page.userAccount.roleId,
createdByName: this.page.userAccount.fullName
};
var url = ApiResources.getURI(ApiResources.ambulanceReceipt.base, ApiResources.ambulanceReceipt.insert);
if (request["ambulanceRecieptId"] > 0) {
url = ApiResources.getURI(ApiResources.ambulanceReceipt.base, ApiResources.ambulanceReceipt.update);
}
this.httpService.post(url, request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.submitted = this.submitting = false))
.subscribe(
(response: number) => {
if (response > 0) {
this.notifyService.successToast(`Record ${request["ambulanceRecieptId"] ==0 ? 'added' : 'updated' } successfully.`);
this.fetchReceipt();
}
if (response === -1) {
this.notifyService.warningToast("This ambulance No already exists.");
return;
}
this.onCloseModal();
},
);
}
fetchReceipt() {
this.loadingambulancereceipts = true;
const request = {
};
this.httpService.post(ApiResources.getURI(ApiResources.ambulanceReceipt.base, ApiResources.ambulanceReceipt.fetch), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.loadingambulancereceipts = false))
.subscribe((responce: Array<AmbulanceReceipt>) => {
this.ambulancereceipts = responce;
});
}
private fetchAmbulances() {
this.loadingAmbulances = true;
this.resourceService.ambulances()
.pipe(finalize(() => { this.loadingAmbulances = false }))
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((response: Array<IResource>) => {
this.ambulancerecords = response;
});
}
private fetchDriverDetail() {
this.loadingDrivers = true;
this.resourceService.driversDetails()
.pipe(finalize(() => { this.loadingDrivers = false }))
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((response: Array<IResource>) => {
this.driverDetail = response;
});
}
private buildForm() {
this.ambulanceReceiptForm = this.formBuilder.group({
ambulanceRecieptId: 0,
recieptNo:[null],
ambulanceId: [null, [Validators.required]],
driverDetailId: [null, [Validators.required]],
patientName: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
address: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
patientMobile: [null, [Validators.required, MobileValidator.isValid, WhiteSpaceValidator.isValid]],
amount: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
fromLocation: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
toLocation: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
})
}
onOpenModel(content: TemplateRef<any>, ambulanceReceipt?: AmbulanceReceipt) {
this.buildForm();
if (ambulanceReceipt) {
this.ambulanceReceiptForm.patchValue({
ambulanceRecieptId: ambulanceReceipt.ambulanceRecieptId,
recieptNo: ambulanceReceipt.recieptNo,
ambulanceId: ambulanceReceipt.ambulanceId,
driverDetailId: ambulanceReceipt.driverDetailId,
patientName: ambulanceReceipt.patientName,
address: ambulanceReceipt.address,
patientMobile: ambulanceReceipt.patientMobile,
amount: ambulanceReceipt.amount,
fromLocation: ambulanceReceipt.fromLocation,
toLocation: ambulanceReceipt.toLocation
});
}
this.modalRef = this.modalService.open(content, {
backdrop: "static",
keyboard: false,
centered: false,
windowClass: "custom-modal effect-scale"
});
}
get form() { return this.ambulanceReceiptForm.controls; }
ngOnInit() {
this.appData.userAccount
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((userAccount: IUserAccount) => {
if (userAccount) {
this.page.userAccount = userAccount;
this.fetchReceipt();
this.fetchAmbulances();
this.fetchDriverDetail();
} else {
this.page.userAccount = undefined;
}
});
}
ngOnDestroy() {
this.page.unsubscribeAll()
}
onCloseModal() {
try {
this.modalRef.close();
this.modalRef = undefined;
} catch (e) {
// ignored;
}
this.loadingambulancereceipts = false;
this.submitting = undefined;
this.submitted = undefined;
}
}
\ No newline at end of file
......@@ -4,12 +4,14 @@ import { CubiclePage } from './pages/cubicle/cubicle.page';
import { SharedModule } from '@src/app/shared/shared.module';
import { MastersRoutingModule } from './masters.routing.module';
import { AppointmentTypePage } from './pages/appointment-types/appointment-types.page';
import { RolePage } from './pages/roles/roles.page';
@NgModule({
declarations: [
MastersPage,
CubiclePage,
AppointmentTypePage
AppointmentTypePage,
RolePage
],
imports: [
MastersRoutingModule,
......
......@@ -4,6 +4,7 @@ import { CubiclePage } from './pages/cubicle/cubicle.page';
import { MastersPage } from './masters.page';
import { AuthGuard } from '@src/app/shared/guards';
import { AppointmentTypePage } from './pages/appointment-types/appointment-types.page';
import { RolePage } from './pages/roles/roles.page';
const routes: Routes = [
{
......@@ -16,6 +17,7 @@ const routes: Routes = [
{ path: "", redirectTo: "cubicle", pathMatch: "full" },
{ path: "cubicle", component: CubiclePage, data: { title: "cubicle" } },
{ path: "appointment-types", component: AppointmentTypePage, data: { title: "Appointment Types" } },
{ path: "role", component: RolePage, data: { title: "Roles" } },
{ path: "**", redirectTo: "cubicle" },
]
}
......
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ng-container *menuButton="'dqL9UU'">
<button type="button" *ngIf="!loading && roles && roles.length" class="btn btn-primary btn-sm" (click)="onOpenModel(templateModify)"><i class="fe-plus mr-1"></i> Add Role</button>
<!--<button *ngIf="!loading && !filters.applied && generalAdvices && generalAdvices.length" type="button" class="btn btn-secondary btn-sm ml-1" (click)="onShowFilters()"><i class="fe-filter mr-1"></i> Filters</button>-->
</ng-container>
</div>
<h4 class="page-title">Roles</h4>
</div>
</div>
</div>
<div>
<div class="card-box mb-1 p-1 pb-2">
<div class="col-lg-12">
<div class="row">
<div class="col-6 col-md-4 col-lg-4 col-xl-2">
<div class="form-group mb-0">
<label class="mb-1">Role </label>
<ng-select class="ng-select-sm text-uppercase" [items]="roleNames"
bindLabel="value"
bindValue="id"
autocomplete="nope"
placeholder="Select Role"
[(ngModel)]="filters.options.roleId">
<ng-template ng-notfound-tmp let-searchTerm="searchTerm">
<div class="ng-option disabled">
No Role found for '{{searchTerm}}'
</div>
</ng-template>
</ng-select>
</div>
</div>
<div class="col-6 col-md-4 col-lg-4 col-xl-2">
<div class="form-group mb-0">
<label class="mb-1">Status</label>
<select class="form-control form-control-md" [(ngModel)]="filters.options.active">
<option [ngValue]="null">All</option>
<option [ngValue]="true">Active</option>
<option [ngValue]="false">Inactive</option>
</select>
</div>
</div>
<div class="col-12 col-lg-4 col-md-4 col-xl-2 d-flex justify-content-center ">
<div class="align-items-center d-flex justify-content-center justify-content-lg-start mb-0 w-100 marTop767size">
<button type="button" (click)="onApplyFilters()" class="btn btn-sm btn-outline-primary mb-0">Search</button>
<button type="button" (click)="onResetFilters()" class="btn btn-sm btn-outline-danger ml-1 mb-0">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" *ngIf="loading">
<div class="col-12">
<div class="d-flex align-items-center">
<span class="spinner-grow text-warning" role="status" aria-hidden="true"></span>
<span class="ml-2">Please wait while loading roles ...</span>
</div>
</div>
</div>
<div class="row" *ngIf="!loading && (!roles || !roles.length)">
<div class="col-12 mh-400">
<div class="no-data">
<img src="assets/images/no-data.png" alt="No data" />
<h4 class="title">Oops! No roles found<span *ngIf="filters.applied"> based on your filters criteria</span>.</h4>
<p class="sub-title">There is no data to show you right now.</p>
<button type="button" class="btn btn-primary btn-sm" (click)="onOpenModel(templateModify)"><i class="fe-plus mr-1"></i> Add Role</button>
</div>
</div>
</div>
<div class="row" *ngIf="!loading && roles && roles.length">
<div class="col-12">
<div class="card mb-0">
<div class="card-body p-0">
<!--<div class="modifying-content" *ngIf="modifying">
<p>
<span class="spinner-grow text-warning" role="status" aria-hidden="true"></span>
<span class="ml-2">Please wait while {{modifyingContent}} ...</span>
</p>
</div>-->
<div class="table-responsive">
<table class="table table-centered table-sm table-striped table-borderless">
<thead>
<tr>
<th>RoleName</th>
<th>Status</th>
<th>CreatedBy</th>
<th>Created Date</th>
<th>Modified By</th>
<th>Modified Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of roles; trackBy: trackBy.role">
<td [textContent]="item.roleName"></td>
<td [textContent]="item.active === true ? 'Active' : 'DeActive'"></td>
<td [textContent]="item.createdByName"></td>
<td [textContent]="item.createdDate | date:'dd-MM-yyyy, hh:mm a'"></td>
<td>
<div *ngIf="item.modifiedBy">
<span [textContent]="item.modifiedByName"></span>
<!--<span class="badge badge-outline-secondary font-11" [textContent]="item.modifiedByRole"></span>-->
</div>
<span *ngIf="!item.modifiedBy">-----</span>
</td>
<td>
<span *ngIf="item.modifiedDate" [textContent]="item.modifiedDate | date:'dd-MM-yyyy, hh:mm a'"></span>
<span *ngIf="!item.modifiedDate">----</span>
</td>
<!--<nav class="nav">
<button type="button" class="btn btn-sm btn-outline-info mr-1" (click)="onOpenModel(templateModify, item)"><i class="mdi mdi-square-edit-outline"></i> Edit</button>-->
<!--<button type="button" class="btn btn-sm btn-outline-danger" (click)="onDelete(item)"><i class="mdi mdi-delete"></i> Delete</button>-->
<!--</nav>-->
<td>
<div class="d-flex align-items-center justify-content-center">
<a href="javascript:;" class="action-icon text-primary pr-2" placement="left" ngbTooltip="Edit" (click)="onOpenModel(templateModify, item)"><i class="fe-edit"></i></a>
<button type="button" class="btn btn-xs btn-outline-danger" placement="left" ngbTooltip="Deactivate" *ngIf="item.active" (click)="onModifyStatus(item,false)">
<i class="fe-delete"></i>
</button>
<button type="button" class="btn btn-xs btn-outline-success" placement="left" ngbTooltip="Activate" *ngIf="!item.active" (click)="onModifyStatus(item,true)">
<i class="fe-check"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="d-flex align-items-center justify-content-between p-2" *ngIf="pagination.totalPages > 1">
<p class="mb-0 font-13">
<span class="text-dark">Page <span [textContent]="pagination.currentPage"></span> of <span [textContent]="pagination.totalPages"></span></span>
<span class="ml-1">
<span>(Showing <span [textContent]="pagination.currentItems - roles.length + 1"></span> - <span [textContent]="pagination.currentItems"></span> of <span [textContent]="pagination.totalItems"></span> roles )</span>
</span>
</p>
<ngb-pagination class="pagination justify-content-end" [maxSize]="5" [rotate]="false" [ellipses]="false" [(page)]="pagination.pageIndex" [pageSize]="pagination.pageSize" (pageChange)="onNextPage()" [collectionSize]="pagination.totalItems">
<ng-template ngbPaginationPrevious><i class="fe-arrow-left"></i></ng-template>
<ng-template ngbPaginationNext><i class="fe-arrow-right"></i></ng-template>
</ngb-pagination>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #templateModify>
<div class="modal-header">
<h4 class="modal-title"><i class="mdi mdi-mother-nurse mr-1"></i>{{roleForm.value.roleId === 0 ? 'Add' : 'Edit'}} Role</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onCloseModal();">×</button>
</div>
<form [formGroup]="roleForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group mb-3">
<label class="mb-1">Role <code>*</code></label>
<div class="form-group">
<input tabindex="1" type="text" block textOnly maxlength="150" autofocus formControlName="roleName" autocomplete="nope" class="form-control" [ngClass]="{ 'is-invalid': (submitted && form.roleName.errors) }" placeholder="Role Name" />
</div>
<div class="text-danger" *ngIf="submitted && form.roleName.errors">
<p *ngIf="form.roleName.errors.whiteSpaces">Please remove white space...</p>
</div>
</div>
</div>
</div>
<!--<div class="row">
<div class="col-md-12">
<div class="form-group mb-3">
<label class="mb-1">Description</label>
<div class="form-group mb-0">
<textarea tabindex="2" maxlength="250" autofocus formControlName="description" autocomplete="nope" class="form-control" placeholder="Enter description"></textarea>
</div>
</div>
</div>
</div>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light btn-sm mr-1" (click)="onCloseModal();">Cancel</button>
<button type="submit" [disabled]="submitting" class="btn btn-primary btn-sm">
<span *ngIf="submitting">
<span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>
Please wait..
</span>
<span *ngIf="!submitting">Submit</span>
</button>
</div>
</form>
</ng-template>
\ No newline at end of file
import { Component, OnDestroy, OnInit, ViewEncapsulation, TemplateRef } from "@angular/core";
import { Roles } from "@shared/entities";
import { ApiResources, UtilHelper } from "@shared/helpers";
import { AppData, HttpService, NotifyService, ResourceService } from "@shared/services";
import { takeUntil, finalize } from "rxjs/operators";
import { HttpErrorResponse } from "@angular/common/http";
import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
import { FormGroup, Validators, FormBuilder } from "@angular/forms";
import { Page, IUserAccount, Pagination, IResource } from "@shared/models";
import { WhiteSpaceValidator } from "../../../../../shared/validators";
class TrackBy {
role(item: Roles) {
return item.roleId;
}
}
class FilterOptions {
roleId: number;
active: boolean = null;
}
class Filters {
options: FilterOptions;
applied: boolean;
constructor() {
this.init();
}
init() {
this.options = new FilterOptions();
this.applied = undefined;
}
}
@Component({
templateUrl: "./roles.html",
encapsulation: ViewEncapsulation.None
})
export class RolePage implements OnInit, OnDestroy {
page: Page;
filters: Filters;
trackBy: TrackBy;
pagination: Pagination;
loading: boolean;
roles: Array<Roles>;
selectedRole: Roles;
roleNames: Array<IResource>;
modalRef: NgbModalRef;
roleForm: FormGroup;
submitting: boolean;
submitted: boolean;
loadingRoles: boolean;
modifying: boolean;
modifyingContent: string;
constructor(
private readonly appData: AppData,
private readonly modalService: NgbModal,
private readonly formBuilder: FormBuilder,
private readonly notifyService: NotifyService,
private readonly httpService: HttpService,
private readonly resourceService: ResourceService
) {
this.loading = true;
this.page = new Page();
this.filters = new Filters();
this.trackBy = new TrackBy();
this.loading = true;
this.initPagination();
}
private initPagination() {
this.pagination = new Pagination();
this.pagination.pageIndex = 1;
this.pagination.pageSize = 10;
}
private fetchRoles() {
const request = Object.assign(UtilHelper.clone(this.filters.options), UtilHelper.clone(this.pagination));
this.httpService.post<Array<Roles>>(ApiResources.getURI(ApiResources.role.base, ApiResources.role.fetch), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.loading = false))
.subscribe((response: Array<Roles>) => {
this.roles = response;
UtilHelper.applyPagination(this.roles, this.pagination);
});
}
private fetchRoleNames() {
this.resourceService.roles()
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((response: Array<IResource>) => {
this.roleNames = response;
});
}
private buildForm() {
this.roleForm = this.formBuilder.group({
roleId: 0,
roleName: [null, [Validators.required, WhiteSpaceValidator.isValid]],
active: [true],
});
}
private updateForm() {
this.roleForm.patchValue({
roleId: this.selectedRole.roleId,
roleName: this.selectedRole.roleName,
active: this.selectedRole.active
});
}
onOpenModel(content: TemplateRef<any>, role?: Roles) {
this.buildForm();
if (role) {
this.selectedRole = role;
this.updateForm();
}
this.modalRef = this.modalService.open(content, {
backdrop: "static",
keyboard: false,
centered: true,
windowClass: "custom-modal effect-scale"
});
}
onSubmit() {
this.submitted = true;
if (!this.roleForm.valid) {
return;
}
this.submitting = true;
const request = Object.assign(UtilHelper.clone(this.roleForm.getRawValue()));
request["createdByName"] = this.page.userAccount.fullName;
if (this.roleForm.value.roleId === 0) {
request.createdBy = this.page.userAccount.accountId;
request.createdByName = this.page.userAccount.fullName;
this.httpService.post(ApiResources.getURI(ApiResources.role.base, ApiResources.role.add), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => {
this.submitting = false;
this.submitted = false;
}))
.subscribe(() => {
this.onCloseModal();
this.fetchRoleNames();
this.fetchRoles();
this.notifyService.successToast("Role Added successfully.");
}, (error: HttpErrorResponse) => {
const errorMessage = UtilHelper.handleError(error);
if (errorMessage) {
this.notifyService.warning(errorMessage);
} else {
this.notifyService.defaultError();
}
});
} else {
request.modifiedBy = this.page.userAccount.accountId;
request["modifiedByName"] = this.page.userAccount.fullName;
request["createdBy"] = this.page.userAccount.accountId;
delete request.type;
this.httpService.put(ApiResources.getURI(ApiResources.role.base, ApiResources.role.update), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => {
this.submitting = false;
this.submitted = false;
}))
.subscribe(() => {
this.onCloseModal();
this.fetchRoleNames();
this.fetchRoles();
this.notifyService.successToast("Role details has been updated successfully.");
}, (error: HttpErrorResponse) => {
const errorMessage = UtilHelper.handleError(error);
if (errorMessage) {
this.notifyService.warning(errorMessage);
} else {
this.notifyService.defaultError();
}
});
}
}
onModifyStatus(item: Roles, status: boolean) {
this.notifyService.confirm(`You want to ${status ? 'Activate' : 'Deactivate'} this role?`, () => {
const request = {
createdBy: this.page.userAccount.accountId,
modifiedBy: this.page.userAccount.accountId,
active: status,
roleId: item.roleId,
roleName: item.roleName,
createdByName: this.page.userAccount.fullName,
createdByRole: this.page.userAccount.roleName,
loginRoleId: this.page.userAccount.roleId,
modifiedByName: this.page.userAccount.fullName,
modifiedByRole: this.page.userAccount.roleName,
};
this.httpService.post(ApiResources.getURI(ApiResources.role.base, ApiResources.role.modifyStatus), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => { this.loading = false }))
.subscribe((response: number) => {
if (response > 0) {
this.notifyService.successToast(`${status ? 'Activated' : 'Deactivated'} successfully.`);
}
this.fetchRoles();
}, (error: HttpErrorResponse) => {
this.notifyService.errorToast(error.error);
});
});
}
//onDelete(role: Roles) {
// debugger;
// const request = {
// roleId: role.roleId,
// modifiedBy: this.page.userAccount.accountId,
// roleName: role.roleName
// }
// this.notifyService.delete(() => {
// this.httpService
// .post(ApiResources.getURI(ApiResources.role.base, ApiResources.role.delete), request)
// .pipe(takeUntil(this.page.unSubscribe))
// .pipe(finalize(() => { }))
// .subscribe(
// () => {
// this.notifyService.successToast("Role deleted successfully.");
// this.fetchRoles();
// }
// );
// }, () => { });
//}
get form() {
return this.roleForm.controls;
}
onCloseModal() {
try {
this.modalRef.close();
this.modalRef = undefined;
} catch (e) {
// ignored;
}
this.submitting = undefined;
this.submitted = undefined;
}
onNextPage() {
$("body,html").animate({ scrollTop: 0 });
this.fetchRoles();
}
onShowFilters() {
$("body").addClass("right-bar-enabled");
}
onApplyFilters() {
this.filters.applied = UtilHelper.isFiltersApplied(this.filters.options);
this.initPagination();
this.loading = true;
this.fetchRoles();
this.onCloseFilters();
}
onResetFilters() {
this.filters.init();
this.loading = true;
this.fetchRoles();
this.onCloseFilters();
}
onCloseFilters() {
$("body").removeClass("right-bar-enabled");
}
ngOnInit() {
this.appData.userAccount
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((userAccount: IUserAccount) => {
if (userAccount) {
this.page.userAccount = userAccount;
this.fetchRoles();
this.fetchRoleNames();
} else {
this.page.userAccount = undefined;
}
});
}
ngOnDestroy() {
this.onCloseModal();
this.page.unsubscribeAll();
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment