ui-changes
This commit is contained in:
Smart
parent
9a162b1940
commit
1d4bfdd6f9
@ -14,6 +14,7 @@
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container mat-elevation-z8 ">
|
||||
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
<!-- <ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
|
||||
@ -25,7 +26,7 @@
|
||||
</ng-container> -->
|
||||
<ng-container matColumnDef="time">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Time </th>
|
||||
<td mat-cell *matCellDef="let element"> <div class="label">{{element.date}}</div> <br> {{element.time}} </td>
|
||||
<td mat-cell *matCellDef="let element"> <div class="label">{{element.date | date:'mediumDate'}}</div> <br> {{element.time}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="booking">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Booking ID </th>
|
||||
@ -62,9 +63,12 @@
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> -->
|
||||
</table>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
width: 100%;
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
@ -60,7 +60,7 @@ img {
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
display: block!important;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
@ -91,4 +91,11 @@ img {
|
||||
}
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
}
|
||||
.example-container {
|
||||
display: block;
|
||||
height: 365px;
|
||||
/* overflow: auto; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -1,98 +1,98 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title>
|
||||
<strong>{{action}} Appoinment</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</h5>
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Workspace
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Workspace" formControlName="workspace" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of selects" [value]="business.workspace">
|
||||
{{business.workspace}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error>
|
||||
<mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Service
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Service" formControlName="service" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of select" [value]="business.service">
|
||||
{{business.service}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Assign Staff
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Staff" formControlName="staff" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of staffs" [value]="business.staff">
|
||||
{{business.staff}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="staff.hasError('required')">Please choose an Staff</mat-error>
|
||||
<mat-error *ngIf="staff.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Date & Time
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<mat-datepicker #picker4></mat-datepicker>
|
||||
<mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle>
|
||||
<input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="date">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge">
|
||||
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="time" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Customer
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Customer" formControlName="customer" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of customers" [value]="business.customer">
|
||||
{{business.customer}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
|
||||
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field-inline">
|
||||
<label for="name-field" class="label-container">Notes</label>
|
||||
<textarea rows="5" cols="41" name="comment" formControlName="note"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.name}}</b>?
|
||||
</ng-template>
|
||||
<br>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button>
|
||||
<button mat-button (click)="closeDialog()" >Cancel</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
<h5 mat-dialog-title>
|
||||
<strong>{{action}} Appoinment</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</h5>
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Workspace
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Workspace" formControlName="workspace" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of selects" [value]="business.workspace">
|
||||
{{business.workspace}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error>
|
||||
<mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Service
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Service" formControlName="service" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of select" [value]="business.service">
|
||||
{{business.service}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
|
||||
<mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Assign Staff
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Staff" formControlName="staff" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of staffs" [value]="business.staff">
|
||||
{{business.staff}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="staff.hasError('required')">Please choose an Staff</mat-error>
|
||||
<mat-error *ngIf="staff.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Date & Time
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<mat-datepicker #picker4></mat-datepicker>
|
||||
<mat-datepicker-toggle matPrefix [for]="picker4"></mat-datepicker-toggle>
|
||||
<input matInput [matDatepicker]="picker4" placeholder="Choose a date" formControlName="date">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge">
|
||||
<input type="time" matInput name="week" min="09:00" max="18:00" formControlName="time" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Customer
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Customer" formControlName="customer" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of customers" [value]="business.customer">
|
||||
{{business.customer}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customer.hasError('required')">Please choose an Customer</mat-error>
|
||||
<mat-error *ngIf="customer.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field-inline">
|
||||
<label for="name-field" class="label-container">Notes</label>
|
||||
<textarea rows="5" cols="41" name="comment" formControlName="note"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<ng-template #elseTemplate>
|
||||
Sure to delete <b>{{local_data.name}}</b>?
|
||||
</ng-template>
|
||||
<br>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button>
|
||||
<button mat-button (click)="closeDialog()" >Cancel</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
@ -15,7 +15,7 @@
|
||||
position: inherit;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 350px;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
top: 58px;
|
||||
}
|
||||
@ -47,8 +47,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//25/02/2023
|
||||
|
||||
.field{
|
||||
display: flex;
|
||||
}
|
||||
@ -71,7 +69,7 @@
|
||||
width: 175%!important;
|
||||
}
|
||||
.mate{
|
||||
width: 27%!important;
|
||||
width: 18%!important;
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 6rem;
|
||||
@ -82,3 +80,10 @@
|
||||
::ng-deep .swal2-height-auto {
|
||||
// height: auto!important;
|
||||
}
|
||||
::ng-deep .mat-dialog-content {
|
||||
max-height: 75vh!important;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
::ng-deep .mat-dialog-container{
|
||||
overflow: hidden!important;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container mat-elevation-z8 ">
|
||||
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
@ -60,9 +61,10 @@
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
width: 100%;
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
@ -60,7 +60,7 @@ img {
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
display: block!important;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
@ -75,4 +75,11 @@ img {
|
||||
}
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
.example-container {
|
||||
display: block;
|
||||
height: 348px;
|
||||
/* overflow: auto; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -84,7 +84,7 @@ export class BusinessListComponent implements OnInit {
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
// width: '30%',
|
||||
width: '32%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
// margin-left: 6rem;
|
||||
float: right;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
@ -46,3 +47,10 @@
|
||||
width: 90%!important;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-dialog-content {
|
||||
max-height: 75vh!important;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
::ng-deep .mat-dialog-container{
|
||||
overflow: hidden!important;
|
||||
}
|
||||
@ -1,19 +1,19 @@
|
||||
// @import "../../../assets/styles/scss/components/calendar";
|
||||
:host {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
margin-top: -5px;
|
||||
display: block;
|
||||
}
|
||||
mat-card {
|
||||
margin: 8px;
|
||||
}
|
||||
::ng-deep .mat-toolbar.mat-primary {
|
||||
/* background: #673ab7; */
|
||||
background-color: #207b68f2!important;
|
||||
color: white;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
margin-top: -5px;
|
||||
display: block;
|
||||
}
|
||||
mat-card {
|
||||
margin: 8px;
|
||||
}
|
||||
::ng-deep .mat-toolbar.mat-primary {
|
||||
/* background: #673ab7; */
|
||||
background-color: #207b68f2!important;
|
||||
color: white;
|
||||
}
|
||||
.btn{
|
||||
background-color: #4caf50!important;
|
||||
color: white;
|
||||
background-color: #4caf50!important;
|
||||
color: white;
|
||||
}
|
||||
@ -105,7 +105,7 @@ export class CalendarListComponent implements OnInit {
|
||||
draggable: true
|
||||
}];
|
||||
|
||||
activeDayIsOpen = true;
|
||||
activeDayIsOpen = false;
|
||||
table: any;
|
||||
|
||||
constructor(public dialog: MatDialog) {
|
||||
@ -171,6 +171,8 @@ export class CalendarListComponent implements OnInit {
|
||||
|
||||
dayClicked({date, events}: {date: Date, events: CalendarEvent[]}): void {
|
||||
console.log(date, events)
|
||||
this.openDialog('Add', {date:date})
|
||||
// this.openDialog('calender', {date:date})
|
||||
this.addEvent(date)
|
||||
if (isSameMonth(date, this.viewDate)) {
|
||||
if (
|
||||
@ -202,9 +204,15 @@ this.addEvent(date)
|
||||
});
|
||||
}
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
console.log(obj, action)
|
||||
if(action=='calender'){
|
||||
|
||||
}else{
|
||||
obj.action = action;
|
||||
}
|
||||
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
width: '45%',
|
||||
width: '40%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container mat-elevation-z8 ">
|
||||
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
@ -65,9 +66,10 @@
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
width: 100%;
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
@ -60,7 +60,7 @@ img {
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
display: block!important;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
@ -74,11 +74,18 @@ img {
|
||||
margin: 0 15px!important;
|
||||
}
|
||||
mat-paginator{
|
||||
margin-top: -8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
::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;
|
||||
}
|
||||
@ -9,7 +9,8 @@
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
// margin-left: 6rem;
|
||||
float: right;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
@ -46,3 +47,8 @@
|
||||
width: 90%!important;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-dialog-content {
|
||||
max-height: 80vh!important;
|
||||
overflow: hidden!important;
|
||||
|
||||
}
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
// margin-left: 6rem;
|
||||
float: right;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
@ -23,4 +24,10 @@
|
||||
::ng-deep body .mat-card {
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-dialog-content {
|
||||
max-height: 75vh!important;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
::ng-deep .mat-dialog-container{
|
||||
overflow: hidden!important;
|
||||
}
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
<!-- <mat-card class="mb-2 example-card" >
|
||||
<mat-card-title-group>
|
||||
<img width="60" src="assets/images/curve.jpg">
|
||||
<mat-card-title></mat-card-title>
|
||||
<mat-card-subtitle>Dr. Saravanan</mat-card-subtitle>
|
||||
</mat-card-title-group>
|
||||
</mat-card> -->
|
||||
|
||||
<h3>Users Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
@ -11,6 +19,7 @@
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container ">
|
||||
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
@ -70,9 +79,10 @@
|
||||
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
width: 100%;
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
@ -20,7 +20,7 @@ th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
@ -60,7 +60,7 @@ img {
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
display: block!important;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
@ -68,11 +68,21 @@ img {
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: -15px!important;
|
||||
margin-top: -22px!important;
|
||||
}
|
||||
::ng-deep .mat-select-arrow {
|
||||
margin: 0 15px!important;
|
||||
}
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
}
|
||||
.example-container {
|
||||
display: block;
|
||||
height: 300px;
|
||||
/* overflow: auto; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.mat-elevation-z8 {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user