bug fix
This commit is contained in:
surendar.m@watermelon.us
parent
8bc35ad306
commit
15694ecde1
@ -1,195 +1,107 @@
|
||||
<!-- <h3>Appointment Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Enter Text" #input>
|
||||
|
||||
|
||||
<h3>Appointment Details</h3>
|
||||
<mat-form-field style="width:30%">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
|
||||
</mat-form-field>
|
||||
<div class="calender ">
|
||||
<!-- <div class="calender ">
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Appointment</button>
|
||||
|
||||
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container mat-elevation-z8 ">
|
||||
<table mat-table [dataSource]="appoinmentsList" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
<ng-container matColumnDef="Profile">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Profile </th>
|
||||
<td mat-cell *matCellDef="let element"><img src="assets/images/profile.jpg" /> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="ClientName">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Client Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.customer[0].cusName || null }} </td>
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
<!-- <mat-accordion> -->
|
||||
<!-- <mat-expansion-panel>
|
||||
<mat-expansion-panel-header > -->
|
||||
<!-- <div class="example-container mat-elevation-z8 "> -->
|
||||
|
||||
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="datetime">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Appointment Date and Time</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.appoinmentDate | date:'dd-MMM-YYYY'}}, {{element.appoinmentSlots}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="phoneNo">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Mobile No </th>
|
||||
<td mat-cell *matCellDef="let element">{{element.customer[0].phoneNo}} </td>
|
||||
</ng-container>
|
||||
<table mat-table [dataSource]="appointmentListSource" matSort *ngIf="appointmentListLength > 0" class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<!-- ID Column -->
|
||||
<!-- <ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> S.No </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index;"> {{row.id}} </mat-cell>
|
||||
</ng-container> -->
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container matColumnDef="ClientName">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Client Name </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.customer[0].cusName || null }}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="datetime">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Date and Time </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.appoinmentDate | date:'dd-MMM-YYYY'}}, {{row.appoinmentSlots | date:'shortTime'}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="phoneNo">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" > {{row.customer[0].phoneNo}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="email">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Email </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.customer[0].email}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="address">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Client Address</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.customer[0].address_1}}, {{element.customer[0].city}}, {{element.customer[0].state}}, {{element.customer[0].pincode }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Status </th>
|
||||
<td mat-cell *matCellDef="let element"><span style="font-weight: 700;" [ngStyle] = "{'color':element.status == '0' ? '#4caf50' : '#ffd740'}">{{element.status == 0 ? 'Booked':'Cancelled'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
|
||||
<td mat-cell *matCellDef="let element" class="action-link"> <br>
|
||||
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[pageSizeOptions]="pageSizes"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-container> -->
|
||||
<mat-card class="p-2">
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
|
||||
<h3>Appointment Details</h3>
|
||||
</div>
|
||||
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
|
||||
<div class="calender ">
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
</div>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Appointment</button> </div>
|
||||
</div>
|
||||
<!-- <mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Enter Text" #input>
|
||||
</mat-form-field> -->
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" > {{row.customer[0].email}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-data-table
|
||||
[id]="'appoinmentsList.id'"
|
||||
[title]="''"
|
||||
[items]="appoinmentsList"
|
||||
[indexColumnTitle]="'#'"
|
||||
[showIndexColumn]="false"
|
||||
[indexColumnWidth]="10"
|
||||
[minContentHeight]="200"
|
||||
[minContentWidth]="900"
|
||||
[showHeader]="false"
|
||||
[pageable]="true"
|
||||
[showRefreshButton]="false"
|
||||
[persistTableState]="false"
|
||||
[showColumnSelector]="false"
|
||||
[showLoadingSpinner]="false">
|
||||
<ng-data-table-column
|
||||
[field]="''"
|
||||
[title]="'Profile'"
|
||||
[width]="60">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<span><img src="assets/images/profile.jpg" /></span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
<ng-data-table-column
|
||||
[field]="'cusName'"
|
||||
[title]="'Client Name'"
|
||||
[width]="100">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<span>{{row.item.customer[0].cusName}}</span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
<ng-data-table-column
|
||||
[field]="''"
|
||||
[title]="'Date and Time'"
|
||||
[filterable]="false"
|
||||
[width]="100">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<span>{{row.item.appoinmentDate | date:'dd-MMM-YYYY'}},<br> {{row.item.appoinmentSlots | date:'shortTime'}}</span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
<ng-data-table-column
|
||||
[field]="''"
|
||||
[title]="'Mobile No'"
|
||||
[filterable]="false"
|
||||
[width]="100">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<span>{{row.item.customer[0].phoneNo}}</span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
<ng-data-table-column
|
||||
[field]="''"
|
||||
[title]="'Email'"
|
||||
[filterable]="false"
|
||||
[width]="100">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<span>{{row.item.customer[0].email}}</span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
<ng-data-table-column
|
||||
[field]="''"
|
||||
[title]="'Address'"
|
||||
[filterable]="false"
|
||||
[width]="150">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<span>{{row.item.customer[0].address_1}}, {{row.item.customer[0].city}}, {{row.item.customer[0].state}}, {{row.item.customer[0].pincode }}</span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
<ng-data-table-column
|
||||
[field]="''"
|
||||
[title]="'Status'"
|
||||
[filterable]="false"
|
||||
[width]="60">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<span style="font-weight: 700;" [ngStyle] = "{'color':row.item.status == '0' ? '#4caf50' : '#ffd740'}">{{row.item.status == 0 ? 'Booked':'Cancelled'}} </span>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
<ng-data-table-column
|
||||
[field]="''"
|
||||
[title]="'Action'"
|
||||
[filterable]="false"
|
||||
[width]="70">
|
||||
<ng-template #ngDataTableCell let-row="row">
|
||||
<td>
|
||||
<a (click)="openDialog('Update',row.item)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',row.item)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-template>
|
||||
</ng-data-table-column>
|
||||
</ng-data-table>
|
||||
</mat-card>
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="address">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Client Address </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.customer[0].address_1}} <br> {{row.customer[0].city}} <br> {{row.customer[0].state}} </mat-cell>
|
||||
</ng-container >
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> <span style="font-weight: 700;" [ngStyle] = "{'color':row.status == '0' ? '#4caf50' : '#ffd740'}">{{row.status == 0 ? 'Booked':'Cancelled'}} </span> </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</mat-row>
|
||||
|
||||
</table>
|
||||
<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate">
|
||||
</mat-progress-spinner>
|
||||
</mat-card>
|
||||
<div [hidden]="recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="appointmentListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
</mat-paginator>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<!-- </mat-expansion-panel-header>
|
||||
</mat-expansion-panel> -->
|
||||
<!-- </mat-accordion> -->
|
||||
|
||||
<mat-card-content *ngIf="recordStatus">
|
||||
<h5 align="center" style="font-weight: bold;
|
||||
color: brown;">No Data Available</h5>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-sidenav-container>
|
||||
<notifier-container></notifier-container>
|
||||
@ -1,372 +1,114 @@
|
||||
.my-table{
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 0px);
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
}
|
||||
th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
padding: 6px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
padding: 6px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
.mat-expansion-panel-header {
|
||||
display: inline!important;
|
||||
display: inline!important;
|
||||
}
|
||||
::ng-deep .mat-drawer-content {
|
||||
overflow: hidden!important;
|
||||
background-color: #ffff;
|
||||
overflow: hidden!important;
|
||||
background-color: #ffff;
|
||||
}
|
||||
// ::ng-deep .body-container {
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: hidden!important;
|
||||
// overflow-y: hidden;
|
||||
// background-color: #ffff;
|
||||
// }
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none!important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.fullscreen{
|
||||
position: absolute !important;
|
||||
height: auto !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
tr.mat-header-row {
|
||||
height: 30px!important;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.fullscreen{
|
||||
position: absolute !important;
|
||||
height: auto !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
tr.mat-header-row {
|
||||
height: 30px!important;
|
||||
}
|
||||
.font-color{
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-color{
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.edit-color:hover {
|
||||
color: #4caf50;
|
||||
}
|
||||
.delete:hover {
|
||||
color:#ff0000;
|
||||
}
|
||||
color: #4caf50;
|
||||
}
|
||||
.delete:hover {
|
||||
color:#ff0000;
|
||||
}
|
||||
// ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
// width: 180%;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: block!important;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
.calender{
|
||||
float: right;
|
||||
margin-left: 1rem;
|
||||
padding-top: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: -22px!important;
|
||||
display: block!important;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
::ng-deep .mat-select-arrow {
|
||||
margin: 0 15px!important;
|
||||
margin: 0 15px!important;
|
||||
}
|
||||
::ng-deep tr.mat-row, tr.mat-footer-row {
|
||||
height: 80px!important;
|
||||
}
|
||||
.label{
|
||||
color: #111;
|
||||
font-weight: 600;
|
||||
margin-bottom: -9px;
|
||||
white-space: nowrap;
|
||||
margin-top: -12px;
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: -10px!important;
|
||||
}
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
.example-container {
|
||||
display: block;
|
||||
height: 365px;
|
||||
/* overflow: auto; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
::ng-deep .ng-data-table-container .ng-data-table-top-header-container{
|
||||
min-height: 4rem !important;
|
||||
background-color: #fff !important;
|
||||
border: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
::ng-deep .ng-data-table-container .ng-data-table-top-header-container .ng-data-table-top-header-title {
|
||||
font-size: 24px;
|
||||
line-height: 1.8rem;
|
||||
color: black;
|
||||
margin: 0;
|
||||
height: 100% !important
|
||||
}
|
||||
::ng-deep .ng-data-table-container .ng-data-table thead > tr > th{
|
||||
color: #fff !important;
|
||||
}
|
||||
::ng-deep .ng-data-table-container .ng-data-table tbody > tr.row-even td {
|
||||
background: #fff;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
::ng-deep .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
|
||||
background: #fff;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
line-height: 1.4rem;
|
||||
.example-container {
|
||||
display: block;
|
||||
height: 348px;
|
||||
/* overflow: auto; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.align-left{
|
||||
text-align: left !important;
|
||||
}
|
||||
.align-center{
|
||||
// text-align: center !important;
|
||||
text-align: -webkit-center !important;
|
||||
|
||||
}
|
||||
.center2 {
|
||||
font-size: large;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#delete{
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
}
|
||||
#delete:hover{
|
||||
color: red;
|
||||
}
|
||||
.align-right{
|
||||
text-align: right !important;
|
||||
}
|
||||
::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-even td {
|
||||
background: white;
|
||||
border: 1px solid #000;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#my{
|
||||
//zoom: 90%;
|
||||
}
|
||||
|
||||
|
||||
::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
|
||||
min-height: 100px !important;
|
||||
}
|
||||
::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table thead > tr:last-child th {
|
||||
color: white;
|
||||
|
||||
background-color:#1d7d67;
|
||||
}
|
||||
tr{
|
||||
color: white;
|
||||
background-color:#1d7d67;
|
||||
}
|
||||
th{
|
||||
|
||||
color: white;
|
||||
background-color:#1d7d67;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
background-color:#1d7d67;
|
||||
}
|
||||
|
||||
/* Create two equal columns that sits next to each other */
|
||||
.column {
|
||||
flex: 50%;
|
||||
// padding: 10px;
|
||||
// height: 300px; /* Should be removed. Only for demonstration */
|
||||
}
|
||||
::ng-deep .mat-select-value{
|
||||
color: black!important; }
|
||||
.column1 {
|
||||
width: 87px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
padding: 3px;
|
||||
//height: 300px; /* Should be removed. Only for demonstration */
|
||||
}
|
||||
input {
|
||||
text-align: right;
|
||||
}
|
||||
h2 {
|
||||
padding-bottom: 10px;
|
||||
display: block;
|
||||
//transform: rotate(-90deg);
|
||||
text-align: right;
|
||||
margin-top: 13px;
|
||||
}
|
||||
::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table-content-container .ng-data-table-content {
|
||||
min-height: 41px !important;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
background: #1d7d67;
|
||||
display: flex;
|
||||
color: white;
|
||||
padding-top: 13px;
|
||||
height: 69px;
|
||||
}
|
||||
|
||||
header:before,
|
||||
header:after {
|
||||
content: '';
|
||||
margin: auto 1em;
|
||||
border-bottom: solid 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
padding: 0.25em 1em;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(currentcolor, currentcolor) no-repeat top center, linear-gradient(currentcolor, currentcolor) no-repeat bottom center;
|
||||
background-size: calc(100% - 1.65em) 1px;
|
||||
}
|
||||
|
||||
h1:before,
|
||||
h1:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border: solid 1px;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
transform: skew(45deg)
|
||||
}
|
||||
|
||||
h1:after {
|
||||
transform: skew(-45deg)
|
||||
}
|
||||
header + header {
|
||||
color:pink;
|
||||
}
|
||||
header + header + header {
|
||||
color:gold;
|
||||
}
|
||||
|
||||
a {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
#1d7d67,
|
||||
#1d7d67 50%,
|
||||
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
background-position: -100%;
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
a:before{
|
||||
content: '';
|
||||
background: #1d7d67;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-position: 0;
|
||||
}
|
||||
|
||||
a:hover::before{
|
||||
width: 100%;
|
||||
}
|
||||
.center{
|
||||
text-align: -webkit-center !important;
|
||||
padding-left: 22px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
::ng-deep :not(.dark-theme) .ng-data-table-container .ng-data-table tbody > tr.row-odd td {
|
||||
border: 1px solid #000;
|
||||
padding: 5px !important
|
||||
}
|
||||
|
||||
|
||||
// .sticky {
|
||||
// height: 64px;
|
||||
// opacity: 1;
|
||||
// transition: opacity .25s ease-out, height .15s ease;
|
||||
// }
|
||||
table, th, td {
|
||||
//border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
z-index:999;
|
||||
height: 50px;
|
||||
// width: 77%;
|
||||
//max-width: auto;
|
||||
}
|
||||
|
||||
#frugalmap {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
position: relative;
|
||||
background: #2ab4c0;
|
||||
}
|
||||
|
||||
.mat-elevation-z5 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
}
|
||||
h4{
|
||||
font: 400 12px/17px Roboto, "Helvetica Neue", sans-serif !important;
|
||||
}
|
||||
|
||||
::ng-deep .ng-data-table-container .ng-data-table-pagination-container{
|
||||
background: #008467 !important;
|
||||
|
||||
}
|
||||
::ng-deep .ng-data-table-container .ng-data-table thead > tr .ng-data-table-column-header .ng-data-table-column-header-label {
|
||||
font-size: 14px;
|
||||
line-height: 4rem;
|
||||
.mat-table {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.example-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.example-header {
|
||||
min-height: 64px;
|
||||
padding: 8px 24px 0;
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
::ng-deep .ng-data-table-container .ng-data-table tbody > tr.row-even:hover td{
|
||||
color: #000;
|
||||
}
|
||||
@ -1,9 +1,11 @@
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import { NotifierService } from 'angular-notifier';
|
||||
import { environment } from 'environments/environment';
|
||||
import Swal from 'sweetalert2';
|
||||
import { AppointmentsService } from '../appointments-service/appointments.service';
|
||||
import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
|
||||
@ -31,45 +33,80 @@ export interface UsersData {
|
||||
export class AppoinmentsListComponent implements OnInit {
|
||||
|
||||
push: any;
|
||||
displayedColumns: string[] = ['Profile', 'ClientName','datetime','phoneNo','email','address','status', 'action'];
|
||||
// dataSource: any;
|
||||
public appoinmentsList:any = new MatTableDataSource();
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
// @ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
displayedColumns: string[] = ['ClientName','datetime','phoneNo','email','address','status', 'action'];
|
||||
public appointmentListLength: number;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
recordStatus: boolean;
|
||||
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>
|
||||
// pagination variable details
|
||||
length = 5;
|
||||
pageIndex = 0;
|
||||
pageSize = 5;
|
||||
pageEvent: PageEvent;
|
||||
appoinmentsList: any[] = [];
|
||||
private apiUrl = environment.apiEndpoint;
|
||||
// dataSource: any;
|
||||
public appointmentListSource:any = new MatTableDataSource();
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
// @ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
addFormData: any;
|
||||
@ViewChild('paginator') paginator: MatPaginator;
|
||||
@ViewChild('paginatorPageSize') paginatorPageSize: MatPaginator;
|
||||
pageSizes = [3, 5, 7];
|
||||
|
||||
pipe = new DatePipe('en-US');
|
||||
isLoading = true
|
||||
constructor(private notifierService: NotifierService,public dialog: MatDialog, public _app:AppointmentsService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
// this.dataSource = new MatTableDataSource(ELEMENT_DATA)
|
||||
ngOnInit(): void {
|
||||
this.recordStatus=false;
|
||||
this.getAppoinmentsList()
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.appointmentListSource.paginator = this.paginator;
|
||||
console.log(this.appointmentListSource,this.paginator)
|
||||
this.appointmentListSource.sort = this.sort;
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string) {
|
||||
filterValue = filterValue.trim(); // Remove whitespace
|
||||
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
|
||||
this.appointmentListSource.filter = filterValue;
|
||||
console.log(this.appointmentListSource)
|
||||
}
|
||||
|
||||
getAppoinmentsList() {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
this._app.getAppoinmentsListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.appoinmentsList = res.data;
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
let id = localStorage.getItem('user_id')
|
||||
console.log(id)
|
||||
this.appoinmentsList
|
||||
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false
|
||||
this.appoinmentsList = res.data;
|
||||
console.log(this.appoinmentsList)
|
||||
|
||||
let filter = this.appoinmentsList.filter(arr=>{return arr["ServicesMapDetail.userId"] == id})
|
||||
console.log(filter)
|
||||
this.appoinmentsList = filter
|
||||
}
|
||||
}
|
||||
else{
|
||||
|
||||
}
|
||||
})
|
||||
this.appointmentListLength = res.data.length;
|
||||
console.log(this.appointmentListLength)
|
||||
this.appointmentListSource['data'] = this.appoinmentsList;
|
||||
console.log(this.appointmentListSource)
|
||||
this.recordStatus=false;
|
||||
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
let id = localStorage.getItem('user_id')
|
||||
console.log(id)
|
||||
this.appointmentListSource
|
||||
console.log(this.appointmentListSource)
|
||||
let filter = this.appointmentListSource['data'].filter(arr=>{return arr["ServicesMapDetail.userId"] == id})
|
||||
console.log(filter)
|
||||
this.appointmentListSource['data'] = filter
|
||||
this.appointmentListLength = filter.length;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.appoinmentsList=[];
|
||||
this.appointmentListLength= null;
|
||||
this.recordStatus=true;
|
||||
}
|
||||
}, error => this.isLoading = false)
|
||||
// let param ={'userId':"5"
|
||||
// }
|
||||
// this._app.getServicesMapDetails(param).subscribe(res => {
|
||||
@ -86,18 +123,7 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.appoinmentsList.paginator = this.paginator;
|
||||
this.appoinmentsList.paginator = this.paginatorPageSize;
|
||||
|
||||
}
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.appoinmentsList.filter = filterValue.trim().toLowerCase();
|
||||
if (this.appoinmentsList.paginator) {
|
||||
this.appoinmentsList.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
|
||||
pageChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
<h3>Business Details</h3>
|
||||
<mat-form-field style="width:30%">
|
||||
<mat-label>Filter</mat-label>
|
||||
@ -6,6 +7,7 @@
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Business</button>
|
||||
<!-- <div class="example-container mat-elevation-z8 "> -->
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
@ -66,6 +68,12 @@
|
||||
</mat-row>
|
||||
|
||||
</table>
|
||||
<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate">
|
||||
</mat-progress-spinner>
|
||||
</mat-card>
|
||||
<div [hidden]="recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="businessListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
@ -83,7 +91,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-sidenav-container>
|
||||
|
||||
|
||||
<notifier-container></notifier-container>
|
||||
@ -1,6 +1,9 @@
|
||||
.my-table{
|
||||
width: 100%;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 0px);
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
|
||||
@ -33,7 +33,7 @@ export class BusinessListComponent implements OnInit {
|
||||
pageEvent: PageEvent;
|
||||
businessList: any[] = [];
|
||||
private apiUrl = environment.apiEndpoint;
|
||||
|
||||
isLoading = true
|
||||
constructor(private notifierService: NotifierService,private router:Router,public dialog: MatDialog,public _bus:BusinessService) {
|
||||
|
||||
}
|
||||
@ -59,6 +59,7 @@ export class BusinessListComponent implements OnInit {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
this._bus.getBusinessListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false
|
||||
this.businessList = res.data;
|
||||
console.log(this.businessList)
|
||||
this.businessListLength = res.data.length;
|
||||
@ -72,13 +73,7 @@ export class BusinessListComponent implements OnInit {
|
||||
this.businessListLength= null;
|
||||
this.recordStatus=true;
|
||||
}
|
||||
}
|
||||
// , error => {this.errorMessage = <any> error});
|
||||
,error => {
|
||||
// this.errorMessage.push(error);
|
||||
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
|
||||
// alert(error.html_format);
|
||||
})
|
||||
}, error => this.isLoading = false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -13,17 +13,20 @@
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
|
||||
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
||||
Email is required
|
||||
</mat-error>
|
||||
<input type="email" placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
|
||||
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="myError('email', 'required')">email is required</mat-error>
|
||||
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
||||
Email is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Phone" matInput [(ngModel)]="local_data.phoneNo" formControlName="phoneNo">
|
||||
<mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
|
||||
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
|
||||
@ -50,7 +50,7 @@ export class AddCustomersComponent implements OnInit {
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
businessselect: new FormControl('', [Validators.required]),
|
||||
// businessselect: new FormControl('', [Validators.required]),
|
||||
// image: new FormControl('', null),
|
||||
cusName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
address_1: new FormControl('', [Validators.required, Validators.maxLength(50)]),
|
||||
@ -60,7 +60,8 @@ export class AddCustomersComponent implements OnInit {
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
phoneNo: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
phoneNo: new FormControl('', [Validators.required, Validators.minLength(10),Validators.maxLength(10), Validators.pattern('^[0-9]{10}$')]),
|
||||
|
||||
});
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
@ -71,6 +72,10 @@ export class AddCustomersComponent implements OnInit {
|
||||
console.log(this.form.value);
|
||||
let tmp = this.form.value
|
||||
tmp.id = this.local_data.id
|
||||
if (!this.form.valid) {
|
||||
console.log("check")
|
||||
return;
|
||||
}
|
||||
this.dialogRef.close({event:this.action,data:tmp});
|
||||
console.log(this.form.value);
|
||||
console.log(this.action,this.local_data)
|
||||
|
||||
@ -1,89 +1,95 @@
|
||||
|
||||
<h3>Customers Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-form-field style="width:30%">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
|
||||
</mat-form-field>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Customers</button>
|
||||
<!-- <div class="calender ">
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
</div> -->
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add customers</button>
|
||||
|
||||
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container mat-elevation-z8 ">
|
||||
<table mat-table [dataSource]="customersList" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
|
||||
</ng-container>
|
||||
<!-- <mat-accordion> -->
|
||||
<!-- <mat-expansion-panel>
|
||||
<mat-expansion-panel-header > -->
|
||||
<!-- <div class="example-container mat-elevation-z8 "> -->
|
||||
|
||||
<!-- <ng-container matColumnDef="logo">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
|
||||
<td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td>
|
||||
</ng-container> -->
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Name </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.cusName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="email">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Email </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="phone">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Phone </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.phoneNo}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="address" >
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color th-mat"> Address </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.address_1}} <br> {{element.city}} <br> {{element.state}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- <ng-container matColumnDef="state">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> State </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.state}} </td>
|
||||
</ng-container>
|
||||
<table mat-table [dataSource]="customersListSource" matSort *ngIf="customersListLength > 0" class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> S.No </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index;"> {{row.id}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.cusName}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="email">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="city">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> City </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.city}} </td>
|
||||
</ng-container>
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="phone">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Mobile No </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" > {{row.phoneNo}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="pincode">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Pincode </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.pincode}} </td>
|
||||
</ng-container> -->
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
|
||||
<td mat-cell *matCellDef="let element" class="action-link">
|
||||
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="address">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.address_1}} <br> {{row.city}} <br> {{row.state}} </mat-cell>
|
||||
</ng-container >
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</mat-row>
|
||||
|
||||
</table>
|
||||
<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate">
|
||||
</mat-progress-spinner>
|
||||
</mat-card>
|
||||
<div [hidden]="recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="customersListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<!-- <div [hidden]="recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="customersList.length" [pageIndex]="pageIndex"
|
||||
[pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
</mat-paginator>
|
||||
</div> -->
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
||||
<!-- </div> -->
|
||||
<!-- </mat-expansion-panel-header>
|
||||
</mat-expansion-panel> -->
|
||||
<!-- </mat-accordion> -->
|
||||
|
||||
<mat-card-content *ngIf="recordStatus">
|
||||
<h5 align="center" style="font-weight: bold;
|
||||
color: brown;">No Data Available</h5>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-sidenav-container>
|
||||
|
||||
|
||||
<notifier-container></notifier-container>
|
||||
@ -1,6 +1,9 @@
|
||||
.my-table{
|
||||
width: 100%;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 0px);
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
@ -23,9 +26,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
// overflow-y: hidden;
|
||||
// background-color: #ffff;
|
||||
// }
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@ -82,10 +83,3 @@ mat-paginator{
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
.example-container {
|
||||
display: block;
|
||||
height: 365px;
|
||||
/* overflow: auto; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import { NotifierService } from 'angular-notifier';
|
||||
import { AppointmentsService } from 'app/appoinment/appoinments/appointments-service/appointments.service';
|
||||
@ -41,34 +42,51 @@ export class CustomersListComponent implements OnInit {
|
||||
|
||||
push: any;
|
||||
displayedColumns: string[] = ['id','name', 'email','phone', 'address', 'action'];
|
||||
// dataSource: any;
|
||||
public customersList:any = new MatTableDataSource();
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
public customersListLength: number;
|
||||
public customersListSource = new MatTableDataSource();
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
recordStatus: boolean;
|
||||
// length = 5;
|
||||
// pageIndex = 0;
|
||||
// pageSize = 10;
|
||||
// pageEvent: PageEvent;
|
||||
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>
|
||||
// pagination variable details
|
||||
length = 5;
|
||||
pageIndex = 0;
|
||||
pageSize = 5;
|
||||
pageEvent: PageEvent;
|
||||
customersList: any[] = [];
|
||||
|
||||
addFormData: any;
|
||||
appoinmentsList:any =[];
|
||||
appoinmentsIds:any = [];
|
||||
isLoading = true
|
||||
constructor(private notifierService: NotifierService,public dialog: MatDialog,public _cus:CustomersService,public _app:AppointmentsService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
// console.log('IN')
|
||||
// this.dataSource = new MatTableDataSource(ELEMENT_DATA)
|
||||
|
||||
ngOnInit(): void {
|
||||
this.recordStatus=false;
|
||||
this.getCustomersList()
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.customersListSource.paginator = this.paginator;
|
||||
console.log(this.customersListSource,this.paginator)
|
||||
this.customersListSource.sort = this.sort;
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string) {
|
||||
filterValue = filterValue.trim(); // Remove whitespace
|
||||
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
|
||||
this.customersListSource.filter = filterValue;
|
||||
}
|
||||
|
||||
getCustomersList() {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
this._app.getAppoinmentsListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.appoinmentsList = res.data;
|
||||
this.appoinmentsList = res.data;
|
||||
let id = localStorage.getItem('user_id')
|
||||
console.log(id)
|
||||
|
||||
@ -90,50 +108,40 @@ export class CustomersListComponent implements OnInit {
|
||||
})
|
||||
}
|
||||
this._cus.getCustomersListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.customersList = res.data;
|
||||
console.log(this.customersList,this.appoinmentsIds)
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false
|
||||
this.customersList = res.data;
|
||||
console.log(this.customersList)
|
||||
this.customersListLength = res.data.length;
|
||||
console.log(this.customersListLength)
|
||||
this.customersListSource['data'] = this.customersList;
|
||||
console.log(this.customersListSource)
|
||||
this.recordStatus=false;
|
||||
|
||||
console.log(this.customersList,this.appoinmentsIds)
|
||||
let user_role = localStorage.getItem('user_role');
|
||||
if(user_role == 'PRACTITIONER'){
|
||||
const activeIds = this.appoinmentsIds
|
||||
const serviceList = this.customersList
|
||||
|
||||
const result = serviceList.filter(({id}) => activeIds.includes(id));
|
||||
console.log(result)
|
||||
this.customersList = result
|
||||
this.customersListSource['data'] = this.customersList;
|
||||
|
||||
const activeIds = this.appoinmentsIds
|
||||
const serviceList = this.customersList
|
||||
}
|
||||
|
||||
const result = serviceList.filter(({id}) => activeIds.includes(id));
|
||||
console.log(result)
|
||||
this.customersList = result
|
||||
}
|
||||
|
||||
// this.dataSource = res.data.length;
|
||||
// console.log(this.dataSource)
|
||||
// this.dataSource.data = this.customersList;
|
||||
// console.log(this.dataSource.data)
|
||||
// this.recordStatus=false;
|
||||
}
|
||||
else{
|
||||
// this.customersList=[];
|
||||
// this.dataSource = null;
|
||||
// this.recordStatus=true;
|
||||
}
|
||||
}
|
||||
,error => {
|
||||
// this.errorMessage.push(error);
|
||||
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
|
||||
// alert(error.html_format);
|
||||
});
|
||||
}
|
||||
else{
|
||||
this.customersList=[];
|
||||
this.customersListLength= null;
|
||||
this.recordStatus=true;
|
||||
}
|
||||
}, error => this.isLoading = false);
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.customersList.paginator = this.paginator;
|
||||
}
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.customersList.filter = filterValue.trim().toLowerCase();
|
||||
if (this.customersList.paginator) {
|
||||
this.customersList.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
pageChange(e) {
|
||||
console.log(e);
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea matInput placeholder="Description" formControlName="serviceDescription"></textarea>
|
||||
<mat-error *ngIf="myError('serviceDescription', 'required')">Duration is required</mat-error>
|
||||
<textarea matInput placeholder="Description" formControlName="description"></textarea>
|
||||
<mat-error *ngIf="myError('description', 'required')">Duration is required</mat-error>
|
||||
</mat-form-field>
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.servicesName}}</b>?
|
||||
|
||||
@ -40,7 +40,7 @@ ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
servicesName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
duration: new FormControl('',[Validators.required]),
|
||||
serviceDescription: new FormControl('',[Validators.required])
|
||||
description: new FormControl('',[Validators.required])
|
||||
});
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
@ -53,6 +53,10 @@ ngOnInit() {
|
||||
console.log(this.form.value);
|
||||
let tmp = this.form.value
|
||||
tmp.serviceId = this.local_data.serviceId
|
||||
if (!this.form.valid) {
|
||||
console.log("check")
|
||||
return;
|
||||
}
|
||||
this.dialogRef.close({event:this.action,data:tmp});
|
||||
console.log(this.form.value);
|
||||
console.log(this.action,this.local_data)
|
||||
|
||||
@ -6,6 +6,7 @@ import { ServiceListComponent } from './service-list/service-list.component';
|
||||
import { DemoMaterialModule } from 'app/shared/demo.module';
|
||||
import { AddServiceComponent } from './add-service/add-service.component';
|
||||
import { NotifierModule, NotifierOptions } from 'angular-notifier';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
|
||||
const customNotifierOptions: NotifierOptions = {
|
||||
position: {
|
||||
@ -56,6 +57,7 @@ const customNotifierOptions: NotifierOptions = {
|
||||
DemoMaterialModule,
|
||||
CommonModule,
|
||||
ServiceListRoutingModule,
|
||||
NgScrollbarModule,
|
||||
NotifierModule.withConfig(customNotifierOptions),
|
||||
],
|
||||
|
||||
|
||||
@ -1,69 +1,84 @@
|
||||
<h3>Services Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-form-field style="width:30%">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Type Here" #input>
|
||||
</mat-form-field>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Services</button>
|
||||
<!-- <div class="example-container mat-elevation-z8 "> -->
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container mat-elevation-z8 ">
|
||||
<table mat-table [dataSource]="servicesList" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="serviceId">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.serviceId}} </td>
|
||||
</ng-container>
|
||||
<!-- <mat-expansion-panel>
|
||||
<mat-expansion-panel-header > -->
|
||||
<!-- <div class="example-container mat-elevation-z8 "> -->
|
||||
|
||||
<!-- <ng-container matColumnDef="logo">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Logo </th>
|
||||
<td mat-cell *matCellDef="let element"> <img [src]="element.logo" /> </td>
|
||||
</ng-container> -->
|
||||
|
||||
<ng-container matColumnDef="servicesName">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Service Name </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.servicesName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="duration">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Duration </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.duration}} Mins </td>
|
||||
</ng-container>
|
||||
<table mat-table [dataSource]="servicesListSource" matSort *ngIf="servicesListLength > 0" class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="serviceId">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> S.No </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row; let i = index;"> {{row.serviceId}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Duration Column -->
|
||||
<ng-container matColumnDef="servicesName">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Service Name </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.servicesName}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="description">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Description </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.serviceDescription}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
|
||||
<td mat-cell *matCellDef="let element" class="action-link">
|
||||
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<!-- Description Column -->
|
||||
<ng-container matColumnDef="duration">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Duration </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.duration}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Description Column -->
|
||||
<ng-container matColumnDef="description">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Action Column -->
|
||||
<ng-container matColumnDef="action">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Action </mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">
|
||||
<a (click)="openDialog('Update',row)"><span class="material-icons edit-color">edit</span></a>
|
||||
<a (click)="confirmBox('Delete',row)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</mat-row>
|
||||
|
||||
</table>
|
||||
<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate">
|
||||
</mat-progress-spinner>
|
||||
</mat-card>
|
||||
<div [hidden]="recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="servicesListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
<!-- </div> -->
|
||||
<!-- </mat-expansion-panel-header>
|
||||
</mat-expansion-panel> -->
|
||||
</mat-accordion>
|
||||
<!-- <div [hidden]="recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="customersList.length" [pageIndex]="pageIndex"
|
||||
[pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
</mat-paginator>
|
||||
</div> -->
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
||||
|
||||
<mat-card-content *ngIf="recordStatus">
|
||||
<h5 align="center" style="font-weight: bold;
|
||||
color: brown;">No Data Available</h5>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-sidenav-container>
|
||||
|
||||
|
||||
<notifier-container></notifier-container>
|
||||
@ -1,6 +1,9 @@
|
||||
.my-table{
|
||||
width: 100%;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 0px);
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import { NotifierService } from 'angular-notifier';
|
||||
import Swal from 'sweetalert2';
|
||||
import { AddServiceComponent } from '../add-service/add-service.component';
|
||||
@ -12,45 +14,72 @@ import { ApiServiceService } from '../service-api-services/api-service.service';
|
||||
styleUrls: ['./service-list.component.scss']
|
||||
})
|
||||
export class ServiceListComponent implements OnInit {
|
||||
// doctors = ['Dr. Sanjeev', 'Dr. Gopi', 'Dr. Surendar', 'Dr. Kamali', 'Dr. Venkatadesh', 'Dr.Javeed', 'Dr.Cyril'];
|
||||
// serviceId = ['1', '2', '3'];
|
||||
servicesName = ['Allergist and Clinical Immunologist', 'Bariatrics', 'Breast surgery','Cardiology','Cardiothoracic & Vascular Surgery','Cold, Cough and Fever', 'Colorectal Surgery'];
|
||||
info = ['Manage allergies and treat immunity', 'For obesity-related disorders', 'For breast tissue removal', 'For heart and blood pressure problems', 'For surgical treatments of thoracic organs', 'For common health concerns', 'For disorders of rectum, anus, and colon'];
|
||||
specialties = ['Recurring infections, Immunity deficiency', 'Overweight, BMI over 30', 'Breast tissue surgery & removal, Mastectomy', 'Chest pain, Heart Failure, Cholesterol', 'Heart & lung disease, Cardiac transplantation','Fever, Eye Infection, Stomach Ache, Headache', 'Inflammatory bowel disease, Fistula, Intestinal blockage'];
|
||||
serviceData: any = [];
|
||||
addFormData: any;
|
||||
push: any;
|
||||
id: number;
|
||||
displayedColumns: string[] = ['serviceId','servicesName','duration','description','action'];
|
||||
serviceId: number;
|
||||
public servicesList:any = new MatTableDataSource();
|
||||
|
||||
public servicesListLength: number;
|
||||
public servicesListSource = new MatTableDataSource();
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
recordStatus: boolean;
|
||||
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>
|
||||
// pagination variable details
|
||||
length = 5;
|
||||
pageIndex = 0;
|
||||
pageSize = 5;
|
||||
pageEvent: PageEvent;
|
||||
servicesList: any[] = [];
|
||||
isLoading = true;
|
||||
|
||||
constructor(private notifierService: NotifierService,public _api:ApiServiceService, public dialog: MatDialog) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const random = i % 7;
|
||||
const obj: any = {
|
||||
servicesName: this.servicesName[random],
|
||||
// isFavourite: i % 5 === 0 ? true : false,
|
||||
// doctors: this.doctors,
|
||||
info: this.info[random],
|
||||
specialties: this.specialties[random],
|
||||
// apino: 21,
|
||||
// state: state[i % 4],
|
||||
//version: this.dropdown[0].name,
|
||||
};
|
||||
// this.serviceData.push(obj);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.recordStatus=false;
|
||||
this.getServicesList()
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.servicesListSource.paginator = this.paginator;
|
||||
console.log(this.servicesListSource,this.paginator)
|
||||
this.servicesListSource.sort = this.sort;
|
||||
}
|
||||
|
||||
|
||||
applyFilter(filterValue: string) {
|
||||
filterValue = filterValue.trim(); // Remove whitespace
|
||||
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
|
||||
this.servicesListSource.filter = filterValue;
|
||||
}
|
||||
|
||||
|
||||
getServicesList() {
|
||||
this._api.getServicesListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.servicesList = res.data;
|
||||
this._api.getServicesListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false;
|
||||
this.servicesList = res.data;
|
||||
console.log(this.servicesList)
|
||||
this.servicesListLength = res.data.length;
|
||||
console.log(this.servicesListLength)
|
||||
this.servicesListSource['data'] = this.servicesList;
|
||||
console.log(this.servicesListSource)
|
||||
this.recordStatus=false;
|
||||
}
|
||||
} );
|
||||
else{
|
||||
this.servicesList=[];
|
||||
this.servicesListLength= null;
|
||||
this.recordStatus=true;
|
||||
}
|
||||
}, error => this.isLoading = false);
|
||||
}
|
||||
|
||||
pageChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
confirmBox(event,element){
|
||||
@ -107,8 +136,8 @@ export class ServiceListComponent implements OnInit {
|
||||
let addFormData = {
|
||||
// busId: 'abc123',
|
||||
// id: row_obj.id,
|
||||
serviceDescription:row_obj.serviceDescription,
|
||||
duration:row_obj.duration,
|
||||
description:row_obj.description,
|
||||
duration: parseInt(row_obj.duration),
|
||||
serviceId: row_obj.serviceId,
|
||||
servicesName: row_obj.servicesName
|
||||
};
|
||||
@ -117,9 +146,9 @@ export class ServiceListComponent implements OnInit {
|
||||
console.log(row_obj)
|
||||
console.log('Update')
|
||||
let updatevalue = {
|
||||
serviceDescription:row_obj.serviceDescription,
|
||||
description:row_obj.description,
|
||||
serviceId: row_obj.serviceId,
|
||||
duration:row_obj.duration,
|
||||
duration: parseInt(row_obj.duration),
|
||||
servicesName: row_obj.servicesName
|
||||
}
|
||||
formValue.push(updatevalue);
|
||||
@ -159,12 +188,5 @@ export class ServiceListComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.servicesList.filter = filterValue.trim().toLowerCase();
|
||||
if (this.servicesList.paginator) {
|
||||
this.servicesList.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
<h3>Users Details</h3>
|
||||
<mat-form-field style="width:30%">
|
||||
<mat-label>Filter</mat-label>
|
||||
@ -30,6 +31,7 @@
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Users</button>
|
||||
<!-- <div class="example-container mat-elevation-z8 "> -->
|
||||
<mat-sidenav-container class="app-inner background-none shadow-none mail-db">
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div class="main-content" fxLayout="row" fxLayoutAlign="center start">
|
||||
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
|
||||
<div class="messages-list material fullscreen">
|
||||
@ -104,6 +106,12 @@
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
|
||||
<mat-progress-spinner
|
||||
color="primary"
|
||||
mode="indeterminate">
|
||||
</mat-progress-spinner>
|
||||
</mat-card>
|
||||
<div [hidden]="recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="usersListLength" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
|
||||
@ -121,7 +129,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-sidenav-container>
|
||||
|
||||
|
||||
<notifier-container></notifier-container>
|
||||
@ -1,6 +1,9 @@
|
||||
.my-table{
|
||||
width: 100%;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 0px);
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
|
||||
@ -60,6 +60,7 @@ export class UserListComponent implements OnInit {
|
||||
recordStatus: boolean= true;
|
||||
usersListLength: any=5;
|
||||
businessList: any;
|
||||
isLoading = true
|
||||
constructor(private notifierService: NotifierService,public dialog: MatDialog, public _use:UserService,public _bus:BusinessService) {
|
||||
let open_go_admin = localStorage.getItem('go_admin')
|
||||
if(open_go_admin == '0'){
|
||||
@ -78,6 +79,7 @@ export class UserListComponent implements OnInit {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
this._use.getUsersListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.isLoading = false
|
||||
let usersList = res.data
|
||||
this.usersList['data'] = usersList;
|
||||
this.usersListLength = res.data.length;
|
||||
@ -88,12 +90,7 @@ export class UserListComponent implements OnInit {
|
||||
// this.dataSource = null;
|
||||
this.recordStatus=true;
|
||||
}
|
||||
}
|
||||
,error => {
|
||||
// this.errorMessage.push(error);
|
||||
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
|
||||
// alert(error.html_format);
|
||||
});
|
||||
},error => this.isLoading = false);
|
||||
}
|
||||
getBusinessList() {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
@ -128,6 +125,7 @@ export class UserListComponent implements OnInit {
|
||||
filterValue = filterValue.trim(); // Remove whitespace
|
||||
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
|
||||
this.usersList.filter = filterValue;
|
||||
console.log(this.usersList)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -90,14 +90,14 @@
|
||||
</mat-sidenav>
|
||||
<mat-toolbar class="main-header">
|
||||
<div class="horizontal-top-bar w-100">
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<!-- <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="search-bar" fxFlex>
|
||||
<form class="search-form">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
|
||||
<div class="horizontal-logo">
|
||||
<div class="branding text-center">
|
||||
@ -191,20 +191,20 @@
|
||||
<!-- <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button> -->
|
||||
<div class="search-bar" fxFlex [class.search-active]="searchFocus">
|
||||
<!-- <div class="search-bar" fxFlex [class.search-active]="searchFocus">
|
||||
<form class="search-form">
|
||||
<mat-icon>search</mat-icon>
|
||||
<input type="text" placeholder="Search" (focus)="searchFocus = true" (focusout)="searchFocus = false " />
|
||||
</form>
|
||||
</div>
|
||||
</div> -->
|
||||
<span fxFlex></span>
|
||||
<button appToggleFullscreen mat-icon-button class="sm-disable">
|
||||
<!-- <button appToggleFullscreen mat-icon-button class="sm-disable">
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
</button> -->
|
||||
<!-- <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>message</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
</button> -->
|
||||
<!-- <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
Message Menu
|
||||
</div>
|
||||
@ -224,12 +224,12 @@
|
||||
<img width="40" src="assets/images/user-4.jpg" alt="">
|
||||
Lorem ipsum dolor sit amet consectetur.
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible sm-disable">
|
||||
</mat-menu> -->
|
||||
<!-- <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible sm-disable">
|
||||
<mat-icon>reorder</mat-icon>
|
||||
<span class="notification-label">3</span>
|
||||
</button>
|
||||
<mat-menu #user1="matMenu" class="opt-menu " x-position="before">
|
||||
</button> -->
|
||||
<!-- <mat-menu #user1="matMenu" class="opt-menu " x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
User Menu
|
||||
</div>
|
||||
@ -245,7 +245,7 @@
|
||||
<mat-icon>web</mat-icon>
|
||||
Calendar Settings
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-menu> -->
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
@ -254,7 +254,7 @@
|
||||
<mat-icon>person</mat-icon>
|
||||
</button>
|
||||
<mat-menu #user="matMenu" class="opt-menu" x-position="before">
|
||||
<div mat-menu-item class="head-menu grad-blue">
|
||||
<!-- <div mat-menu-item class="head-menu grad-blue">
|
||||
Settings
|
||||
</div>
|
||||
<button mat-menu-item>
|
||||
@ -268,7 +268,7 @@
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
Disable notifications
|
||||
</button>
|
||||
</button> -->
|
||||
<button mat-menu-item>
|
||||
<mat-icon>exit_to_app</mat-icon>
|
||||
Sign Out
|
||||
|
||||
@ -11,7 +11,7 @@ export class RoleMenuItemsPipe implements PipeTransform {
|
||||
// if(type=="1"){
|
||||
switch(localStorage.getItem('user_role')){
|
||||
case 'SADMIN': return value.filter(val=>val.state!="appoinments" && val.state!="customers" && val.state != "consultant-setting" && val.state!="consultants" && val.state!="services");
|
||||
case 'BADMIN': return value.filter(val=>val.state !="business" && val.state != "consultant-setting");
|
||||
case 'BADMIN': return value.filter(val=>val.state !="business" && val.state != "consultant-setting" && val.state!="users" && val.state!="consultants");
|
||||
case 'PRACTITIONER': return value.filter(val=>val.state !="business" && val.state!="consultants" && val.state!="users" && val.state!="services");
|
||||
// case 'PRACTITIONER':
|
||||
// case '3': return value.filter(val=>val.state!="settings");
|
||||
|
||||
@ -182,7 +182,7 @@
|
||||
.mat-sidenav-content {
|
||||
overflow-x: hidden !important;
|
||||
padding: 0 !important;
|
||||
background: $main-content;
|
||||
// background: $main-content;
|
||||
display: flex;
|
||||
// background: #f2f4f8;
|
||||
}
|
||||
@ -195,6 +195,7 @@
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
// background: #f2f4f8;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media(max-width:991px) {
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
environmentName: 'Testing Environment',//Localhost Environment.
|
||||
apiEndpoint:'http://venbainfotech.com:5000/api/',
|
||||
// apiEndpoint:'http://192.168.1.20:8080/api/',
|
||||
// apiEndpoint:'http://venbainfotech.com:5000/api/',
|
||||
apiEndpoint:'http://192.168.1.20:8080/api/',
|
||||
// apiEndpoint:'https://api.venbait.in/api/',
|
||||
|
||||
firebase: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user