Commit 20249b7f authored by Sandeep Sagar Panjala's avatar Sandeep Sagar Panjala

changes

parent b86c5d4f
*.png filter=lfs diff=lfs merge=lfs -text
{
"workbench.colorCustomizations": {
"activityBar.background": "#25128A",
"titleBar.activeBackground": "#341AC1",
"titleBar.activeForeground": "#FBFAFE"
}
}
\ No newline at end of file
{
"workbench.colorCustomizations": {
"activityBar.background": "#213304",
"titleBar.activeBackground": "#2F4705",
"titleBar.activeForeground": "#F5FDE9"
}
}
\ No newline at end of file
......@@ -9,6 +9,8 @@ import { AppConfig, AppData } from "@shared/services";
import { SharedModule } from "@shared/shared.module";
import { OTPWidget } from "@shared/widgets";
import { LayoutComponent } from './areas/layout/layout.component';
import { MastersPage } from './areas/admin/masters/masters.page';
import { CubiclePage } from './areas/admin/masters/pages/cubicle/cubicle.page';
const widgets = [OTPWidget];
const components = [AvatarImageComponent, SymptomsViewComponent];
......@@ -21,11 +23,13 @@ const components = [AvatarImageComponent, SymptomsViewComponent];
AppRoutingModule
],
declarations: [
LayoutComponent,
AppComponent,
LayoutComponent,
MastersPage,
CubiclePage,
widgets,
components,
routePages
routePages,
],
providers: [
AppData,
......
......@@ -2,11 +2,13 @@ import { ForgotPasswordPage } from "@account/forgot-password/forgot-password.pag
import { LoginPage } from "@account/login/login.page";
import { AccountsPage } from "@admin/accounts/accounts.page";
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Route, RouterModule, Routes } from "@angular/router";
import { NotFoundPage } from "@error/not-found/not-found.page";
import { ServerErrorPage } from "@error/server-error/server-error.page";
import { AccessGuard, AuthGuard, DeactivateGuard, TelemedicineGuard } from "@shared/guards";
import { LayoutComponent } from "./areas/layout/layout.component";
import { MastersPage } from "./areas/admin/masters/masters.page";
import { CubiclePage } from "./areas/admin/masters/pages/cubicle/cubicle.page";
// STARTING PAGES
const startingRoutes = [
......@@ -22,6 +24,20 @@ const errorRoutes = [
]
const errorRouteComponents = [NotFoundPage, ServerErrorPage];
// MASTERS
const masterPages = {
path: "masters",
data: { title: "Masters" },
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
component: MastersPage,
children: [
{ path: "", redirectTo: "accounts", pathMatch: "full" },
{ path: "cubicle", component: CubiclePage, data: { title: "cubicle" } },
{ path: "**", redirectTo: "accounts" },
]
}
// HIDDEN PAGES
const hiddenPages = [
{ path: "accounts", component: AccountsPage, data: { title: "Accounts", } }
......@@ -39,7 +55,8 @@ const routes: Routes = [
canActivateChild: [AuthGuard],
children: [
{ path: "", redirectTo: "dashboard", pathMatch: "full" },
...hiddenPages
...hiddenPages,
masterPages as Route
]
},
{ path: "**", redirectTo: "not-found" },
......@@ -56,6 +73,6 @@ export class AppRoutingModule { }
export const routePages = [
...startingRouteComponents,
...errorRouteComponents,
...hiddenPagesComponents
...hiddenPagesComponents,
];
export const routeGuards = [AccessGuard, AuthGuard, DeactivateGuard, TelemedicineGuard];
\ No newline at end of file
<router-outlet></router-outlet>
\ No newline at end of file
import { Component } from "@angular/core";
@Component({
templateUrl: "./masters.html",
})
export class MastersPage {
}
\ No newline at end of file
<div class="content top1">
<div class="container-fluid">
<div>
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ng-container *menuButton="'dqL9UU'">
<button
type="button"
*ngIf="!loading && cubicleRecords && cubicleRecords.length"
class="btn btn-primary btn-sm"
(click)="onOpenModel(cubicleTemplate)"
>
<i class="fe-plus mr-1"></i> Add Cubicle
</button>
</ng-container>
</div>
<h4 class="page-title">Cubicles</h4>
</div>
</div>
</div>
<div class="col-12 p-0">
<div class="card-box mb-1 p-1">
<table class="table table-borderless table-sm mb-0">
<tr style="font-size: 12px" class="myFlex">
<td class="col-6 col-sm-3">
<div class="form-group mb-0">
<label class="mb-1">Locations </label>
<ng-select
class="ng-select-sm text-uppercase"
[items]="locations"
bindLabel="name"
bindValue="id"
autocomplete="nope"
placeholder="Select locations"
[(ngModel)]="filters.options.locationId"
>
<ng-template ng-notfound-tmp let-searchTerm="searchTerm">
<div class="ng-option disabled">
No locations found for '{{searchTerm}}'
</div>
</ng-template>
</ng-select>
</div>
</td>
<td class="col-6 col-sm-3">
<div class="form-group mb-0">
<label class="mb-1">Cubicle</label>
<ng-select
class="ng-select-sm text-uppercase"
[items]="filteredcubicleNames"
bindLabel="name"
bindValue="name"
appendTo="body"
autocomplete="nope"
placeholder="Select Cubicle Name"
[(ngModel)]="filters.options.cubicleName"
>
<ng-template ng-notfound-tmp let-searchTerm="searchTerm">
<div class="ng-option disabled">
No Cubicle found for '{{searchTerm}}'
</div>
</ng-template>
</ng-select>
</div>
</td>
<td class="col-6 col-sm-3">
<div class="form-group mb-0">
<label class="mb-1">Status</label>
<select
class="form-control form-control-md"
[(ngModel)]="filters.options.assign"
>
<option [ngValue]="null">All</option>
<option [ngValue]="1">Assigned</option>
<option [ngValue]="0">UnAssigned</option>
</select>
</div>
</td>
<td class="col-6 col-sm-3 align-middle">
<div
style="margin-top: 25px"
class="d-flex justify-content-center justify-content-lg-start"
>
<button
type="button"
(click)="onApplyFilters()"
class="btn btn-sm btn-outline-primary m-0"
>
Search
</button>
<button
type="button"
(click)="onResetFilters()"
class="btn btn-sm btn-outline-danger ml-1 mb-0"
>
Reset
</button>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="col-12 p-0">
<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 && (!cubicleRecords || !cubicleRecords.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(cubicleTemplate)"
>
<i class="fe-plus mr-1"></i> Add Cubicle
</button>
</div>
</div>
</div>
<div
class="table-responsive"
*ngIf="!loading && cubicleRecords && cubicleRecords.length > 0"
>
<table
class="table table-centered table-sm table-striped table-borderless mb-0"
>
<thead class="table-info">
<tr>
<th>Cubicle Name</th>
<th>CreatedBy</th>
<th>Created Date</th>
<th>Modified By</th>
<th>Modified Date</th>
<th>Location</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of cubicleRecords;index as i">
<td [textContent]="item.name || '---'"></td>
<td [textContent]="item.createdByName || '---'"></td>
<td
[textContent]="(item.createdDate | date:'dd-MM-yyyy, hh:mm a') || '---'"
></td>
<td [textContent]="item.modifiedByName || '---'"></td>
<td
[textContent]="(item.modifiedDate | date:'dd-MM-yyyy, hh:mm a') || '---'"
></td>
<td [textContent]="item.locationName || '---'"></td>
<td [textContent]="item.activeStatusName || '---'"></td>
<td>
<div class="d-flex align-items-center justify-content-start">
<a
href="javascript:;"
class="action-icon text-primary mr-1"
placement="left"
ngbTooltip="Edit"
(click)="onOpenModel(cubicleTemplate, item)"
><i class="fe-edit"></i
></a>
<a
href="javascript:;"
class="action-icon text-danger"
placement="left"
ngbTooltip="Delete"
(click)="onDeleteDepartment(item)"
><i class="fe-trash-2"></i
></a>
</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 - cubicleRecords.length + 1"
></span>
- <span [textContent]="pagination.currentItems"></span> of
<span [textContent]="pagination.totalItems"></span> Cubicles
)</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>
<ng-template #cubicleTemplate>
<form [formGroup]="cubicleForm" (ngSubmit)="onSubmit()">
<div class="modal-header">
<h4 class="modal-title">
<i class="mdi mdi-cube-send mr-1"></i>{{cubicleForm.value.cubicleId ===
0 ? 'Add' : 'Edit'}} Cubicle
</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"> Cubicle Name <code>*</code></label>
<input
type="text"
class="form-control"
minlength="1"
placeholder="ENTER CUBICLE NAME ."
formControlName="name"
[ngClass]="{ 'is-invalid': submitted && form.name.errors }"
/>
<div class="text-danger" *ngIf="submitted && form.name.errors">
<p *ngIf="form.name.errors.required">Cubicle name is required.</p>
<p *ngIf="form.name.errors.maxlength">
Only 250 characters are allowed.
</p>
<p *ngIf="form.name.errors.whiteSpaces">
Please remove white space...
</p>
</div>
</div>
<!--<div class="form-group mb-0">
<label class="mb-1"> Status <code>*</code></label>
<ng-select class="ng-select-sm text-uppercase" [items]="activeStatus"
bindLabel="value"
bindValue="id"
autocomplete="nope"
placeholder="Select status"
formControlName="activeStatusId"
[ngClass]="{ 'is-invalid': submitted && form.activeStatusId.errors }">
<ng-template ng-notfound-tmp let-searchTerm="searchTerm">
<div class="ng-option disabled">
No departments found for '{{searchTerm}}'
</div>
</ng-template>
</ng-select>
<div class="text-danger" *ngIf="submitted && form.activeStatusId.errors">
<p *ngIf="form.activeStatusId.errors.required">Status is required.</p>
</div>
</div>-->
<div class="form-group mb-0 mt-2">
<label class="mb-1">Location<code>*</code></label>
<ng-select
class="ng-select-sm text-uppercase"
[items]="locations"
bindLabel="name"
bindValue="id"
autocomplete="nope"
placeholder="Select location"
formControlName="locationId"
[ngClass]="{ 'is-invalid': submitted && form.locationId.errors }"
>
<ng-template ng-notfound-tmp let-searchTerm="searchTerm">
<div class="ng-option disabled">
No location found for '{{searchTerm}}'
</div>
</ng-template>
</ng-select>
<div
class="text-danger"
*ngIf="submitted && form.locationId.errors"
>
<p *ngIf="form.locationId.errors.required">
Location is required.
</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>
import { OnInit, OnDestroy, Component, ViewEncapsulation, TemplateRef } from "@angular/core";
import { takeUntil, finalize } from "rxjs/operators";
import { IUserAccount, Page, Pagination, GenericResponse, GenericStatus, IResource } from "../../../../../shared/models";
import { AppData } from "../../../../../app.data";
import { NgbModalRef, NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { Cubicle } from "../../../../../shared/entities/cubicle";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { ApiResources, UtilHelper } from "../../../../../shared/helpers";
import { HttpService, NotifyService, ResourceService } from "../../../../../shared/services";
import { WhiteSpaceValidator } from "../../../../../shared/validators";
class TrackBy {
role(item: Cubicle) {
return item.cubicleId;
}
}
class FilterOptions {
cubicleName: string = null;
cubicleId: number;
assign: number = null;
locationId?: number = null;
}
class Filters {
options: FilterOptions;
applied: boolean;
constructor() {
this.init();
}
init() {
this.options = new FilterOptions();
this.applied = undefined;
}
}
@Component({
templateUrl: "./cubicle.html",
encapsulation: ViewEncapsulation.None
})
export class CubiclePage implements OnInit, OnDestroy {
page: Page;
filters: Filters;
trackBy: TrackBy;
modalRef: NgbModalRef;
submitting: boolean;
submitted: boolean;
cubicleRecords: Array<Cubicle>;
loading: boolean;
cubicleForm: FormGroup;
pagination: Pagination;
request: any;
loadingstatus: boolean;
activeStatus: Array<IResource>;
filteredcubicleNames = [];
locations: Array<IResource>;
constructor(
private readonly appData: AppData,
private readonly formBuilder: FormBuilder,
private readonly httpService: HttpService,
private readonly modalService: NgbModal,
private readonly notifyService: NotifyService,
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;
}
onNextPage() {
$("body,html").animate({ scrollTop: 0 });
this.fetchCubicles();
}
onApplyFilters() {
this.filters.applied = UtilHelper.isFiltersApplied(this.filters.options);
this.loading = true;
this.initPagination();
this.fetchCubicles();
this.onCloseFilters();
}
onCloseFilters() {
$("body").removeClass("right-bar-enabled");
}
onResetFilters() {
this.loading = true;
this.filters.init();
this.initPagination();
this.fetchCubicles();
this.onCloseFilters();
}
fetchCubicles() {
this.loading = true;
const request = {
...this.pagination,
...this.filters.options
};
this.httpService.post(ApiResources.getURI(ApiResources.cubicles.base, ApiResources.cubicles.fetch), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.loading = false))
.subscribe(
(response: GenericResponse) => {
if (response.status === GenericStatus[GenericStatus.Success]) {
this.cubicleRecords = response.data;
this.cubicleRecords.forEach(x => {
if (x.providerId > 0) {
x.activeStatusName = "Assigned";
}
else if (x.providerId == null) {
x.activeStatusName = "Unassigned";
}
});
UtilHelper.applyPagination(this.cubicleRecords, this.pagination);
}
},
);
}
private filterCubicles() {
this.loading = true;
const request = {};
this.httpService.post(ApiResources.getURI(ApiResources.cubicles.base, ApiResources.cubicles.fetch), request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.loading = false))
.subscribe(
(response: GenericResponse) => {
if (response.status === GenericStatus[GenericStatus.Success]) {
this.filteredcubicleNames = response.data;
}
},
);
}
private fetchactiveStatus() {
this.loadingstatus = true;
this.resourceService.activeStatus()
.pipe(finalize(() => { this.loadingstatus = false }))
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((response: Array<IResource>) => {
this.activeStatus = response;
});
}
private fetchLocations() {
this.resourceService.locations()
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((response: Array<IResource>) => {
this.locations = response;
});
}
onSubmit() {
this.submitted = true;
if (this.cubicleForm.invalid) {
return;
}
this.submitting = true;
this.request = {
...this.cubicleForm.getRawValue(),
createdBy: this.page.userAccount.accountId,
createdByName: this.page.userAccount.fullName,
loginRoleId: this.page.userAccount.roleId,
logFrom: this.page.userAccount.roleId,
/*locationId: this.page.userAccount.locationId,*/
locationName: this.page.userAccount.locationName,
};
if (this.request.locationId == null) {
this.request.locationId = this.page.userAccount.locationId;
}
let url = ApiResources.getURI(ApiResources.cubicles.base, ApiResources.cubicles.insert);
if (this.request["cubicleId"] > 0) {
this.request = {
...this.cubicleForm.getRawValue(),
modifiedBy: this.page.userAccount.accountId,
logFrom: this.page.userAccount.roleId,
modifiedByName: this.page.userAccount.fullName,
};
url = ApiResources.getURI(ApiResources.cubicles.base, ApiResources.cubicles.update);
}
this.httpService.post(url, this.request)
.pipe(takeUntil(this.page.unSubscribe))
.pipe(finalize(() => this.submitted = this.submitting = false))
.subscribe(
(response: any) => {
if (response.status === GenericStatus[GenericStatus.Success]) {
this.notifyService.successToast(`Record ${this.request["cubicleId"] > 0 ? 'updated' : 'added'} successfully.`);
}
if (response === -1) {
this.notifyService.warningToast("This cubicle already exists.");
return;
}
if (response.status === GenericStatus[GenericStatus.Info]) {
this.notifyService.warningToast(response.message);
}
this.onCloseModal();
this.fetchCubicles();
this.filterCubicles();
},
);
}
onDeleteDepartment(cubicle: Cubicle) {
this.notifyService.delete(() => {
this.httpService
.post(ApiResources.getURI(ApiResources.cubicles.base, ApiResources.cubicles.delete), {
cubicleId: cubicle.cubicleId, modifiedByName: this.page.userAccount.fullName,
createdBy: this.page.userAccount.accountId,
modifiedBy: this.page.userAccount.accountId,
name: cubicle.name
})
.pipe(takeUntil(this.page.unSubscribe))
.subscribe(
(response: GenericResponse) => {
if (response.status === GenericStatus[GenericStatus.Success]) {
this.notifyService.successToast("Cubicle deleted successfully.");
this.fetchCubicles();
this.filterCubicles();
}
else if (response.status === GenericStatus[GenericStatus.Error]) {
if (response.message.includes("violates foreign key constraint")) {
this.notifyService.warningToast("Cubicle can't be deleted. Please contact Administrator.");
}
}
else if (response.status === GenericStatus[GenericStatus.Info]) {
this.notifyService.warningToast("Cubicle which is assigned cannot be deleted.");
}
});
});
}
private buildForm() {
this.cubicleForm = this.formBuilder.group({
cubicleId: 0,
name: [null, [Validators.required, Validators.maxLength(250), WhiteSpaceValidator.isValid]],
/*activeStatusId: [null, [Validators.required]],*/
locationId: [null, [Validators.required]]
});
}
onOpenModel(content: TemplateRef<any>, record?: Cubicle) {
this.buildForm();
if (record) {
this.cubicleForm.patchValue({
cubicleId: record.cubicleId,
name: record.name,
/*activeStatusId: record.activeStatusId,*/
locationId: record.locationId
});
}
this.modalRef = this.modalService.open(content, {
backdrop: "static",
keyboard: false,
centered: false,
windowClass: "custom-modal effect-scale"
});
}
get form() { return this.cubicleForm.controls; }
onCloseModal() {
try {
this.modalRef.close();
this.modalRef = undefined;
} catch (e) {
// ignored;
}
this.loading = false;
this.submitting = undefined;
this.submitted = undefined;
}
ngOnDestroy() {
this.onCloseModal();
this.page.unsubscribeAll();
}
ngOnInit() {
this.appData.userAccount
.pipe(takeUntil(this.page.unSubscribe))
.subscribe((userAccount: IUserAccount) => {
if (userAccount) {
this.page.userAccount = userAccount;
this.filterCubicles();
this.fetchCubicles();
this.fetchLocations();
this.fetchactiveStatus();
} else {
this.page.userAccount = undefined;
}
});
}
}
\ 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