customers
This commit is contained in:
Smart
parent
7b23c3f95b
commit
947a96512b
@ -25,40 +25,39 @@
|
||||
</ng-container> -->
|
||||
<ng-container matColumnDef="time">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Time </th>
|
||||
|
||||
<td mat-cell *matCellDef="let element"> {{element.time}} </td>
|
||||
<td mat-cell *matCellDef="let element"> <div class="label">{{element.date}}</div> <br> {{element.time}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="booking">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Booking ID </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.booking}} </td>
|
||||
<td mat-cell *matCellDef="let element"> <br>{{element.booking}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="workspace">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Workspace </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.workspace}} </td>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> <br> {{element.workspace}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="service">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Service </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"><img src="assets/images/1.jpg" /> {{element.service}} </td>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/1.jpg" /> {{element.service}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="staff">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Staff </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"><img src="assets/images/2.jpg" /> {{element.staff}} </td>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/2.jpg" /> {{element.staff}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="customer">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.customer}} </td>
|
||||
<td mat-cell *matCellDef="let element"> <br> {{element.customer}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="payment">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Payment </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.payment}} </td>
|
||||
<td mat-cell *matCellDef="let element"> <br>{{element.payment}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Status </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.status}} </td>
|
||||
<td mat-cell *matCellDef="let element"> <br>{{element.status}} </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">
|
||||
<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>
|
||||
|
||||
@ -72,4 +72,23 @@ img {
|
||||
margin-left: 1rem;
|
||||
padding-top: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: -22px!important;
|
||||
}
|
||||
::ng-deep .mat-select-arrow {
|
||||
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 body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
@ -15,19 +15,20 @@ export interface UsersData {
|
||||
payment: string;
|
||||
status: string;
|
||||
date: string;
|
||||
note: string;
|
||||
}
|
||||
const ELEMENT_DATA: UsersData[] = [
|
||||
{time: '12:00 pm - 12:30 pm', booking: '#SA-00001', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
|
||||
{time: '01:00 pm - 01:30 pm', booking: '#SA-00002', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'B', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
|
||||
{time: '02:00 pm - 02:30 pm', booking: '#SA-00003', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
|
||||
{time: '03:00 pm - 03:30 pm', booking: '#SA-00004', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'A', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
|
||||
{time: '04:00 pm - 04:30 pm', booking: '#SA-00005', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
|
||||
{time: '05:00 pm - 05:30 pm', booking: '#SA-00006', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'C', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
|
||||
{time: '09:00 am - 09:30 am', booking: '#SA-00007', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
|
||||
{time: '10:00 am - 10:30 am', booking: '#SA-00008', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'B', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
|
||||
{time: '11:00 am - 11:30 am', booking: '#SA-00009', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
|
||||
{time: '12:00 am - 12:30 am', booking: '#SA-000010', workspace: 'test ', service: 'sample', staff: 'Kumar.S', customer:'A', payment:'Paid', status: 'Completed', date:'01 Mar 2023'},
|
||||
{time: '01:00 pm - 01:30 pm', booking: '#SA-000011', workspace: 'sample ', service: 'test', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'01 Mar 2023'},
|
||||
{time: '11:00', booking: '#SA-00001', workspace: 'Sample', service: 'Hospital', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'01 Mar 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '12:00', booking: '#SA-00002', workspace: 'Test', service: 'School', staff: 'Devi.k', customer:'B', payment:'Paid', status: 'Completed', date:'22 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '13:00', booking: '#SA-00003', workspace: 'Sample', service: 'Sports', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'21 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '14:00', booking: '#SA-00004', workspace: 'Test', service: 'Hospital', staff: 'Devi.k', customer:'A', payment:'Paid', status: 'Completed', date:'20 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '15:00', booking: '#SA-00005', workspace: 'Sample', service: 'School', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'17 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '16:00', booking: '#SA-00006', workspace: 'Test', service: 'Sports', staff: 'Devi.k', customer:'C', payment:'Paid', status: 'Completed', date:'16 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '17:00', booking: '#SA-00007', workspace: 'Sample', service: 'Hospital', staff: 'Kumar.S', customer:'A', payment:'Free', status: 'Pending', date:'15 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '18:00', booking: '#SA-00008', workspace: 'Test', service: 'School', staff: 'Devi.k', customer:'B', payment:'Paid', status: 'Completed', date:'14 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '10:00', booking: '#SA-00009', workspace: 'Sample', service: 'Sports', staff: 'Kumar.S', customer:'C', payment:'Free', status: 'Pending', date:'13 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '09:00', booking: '#SA-000010', workspace: 'Test', service: 'Hospital', staff: 'Devi.k', customer:'A', payment:'Paid', status: 'Completed', date:'12 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
{time: '08:00', booking: '#SA-000011', workspace: 'Sample', service: 'School', staff: 'Kumar.S', customer:'B', payment:'Free', status: 'Pending', date:'11 Feb 2023', note: 'Financial statement footnotes are used as additional information by individuals reading financial statements.'},
|
||||
|
||||
];
|
||||
@Component({
|
||||
@ -38,7 +39,7 @@ const ELEMENT_DATA: UsersData[] = [
|
||||
export class AppoinmentsListComponent implements OnInit {
|
||||
|
||||
push: any;
|
||||
displayedColumns: string[] = [ 'time', 'booking', 'workspace', 'service', 'staff', 'customer', 'payment', 'status','action'];
|
||||
displayedColumns: string[] = [ 'time', 'booking', 'workspace', 'service', 'staff', 'customer', 'payment', 'status','action'];
|
||||
dataSource: any;
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
@ -119,6 +120,7 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
payment: row_obj.payment,
|
||||
status: row_obj.status,
|
||||
date: row_obj.date,
|
||||
note: row_obj.note,
|
||||
|
||||
});
|
||||
this.table.renderRows();
|
||||
@ -136,6 +138,7 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
value.payment = row_obj.payment;
|
||||
value.status = row_obj.status;
|
||||
value.date = row_obj.date;
|
||||
value.note = row_obj.note;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
@ -143,7 +146,7 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
deleteRowData(row_obj){
|
||||
console.log(this.dataSource.data,row_obj)
|
||||
this.dataSource.data = this.dataSource.data.filter((value,key)=>{
|
||||
return value.id != row_obj.id
|
||||
return value.booking != row_obj.booking
|
||||
});
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title>
|
||||
<strong> New Appoinment</strong>
|
||||
<strong>{{action}} Appoinment</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
@ -43,7 +43,7 @@
|
||||
Assign Staff
|
||||
</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Assign Staff" formControlName="staff" required>
|
||||
<mat-select placeholder="Select Staff" formControlName="staff" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of staffs" [value]="business.staff">
|
||||
{{business.staff}}
|
||||
|
||||
@ -79,3 +79,6 @@
|
||||
.field-inline{
|
||||
display: inline-flex;
|
||||
}
|
||||
::ng-deep .swal2-height-auto {
|
||||
// height: auto!important;
|
||||
}
|
||||
|
||||
@ -41,17 +41,15 @@ export class DialogBoxComponent implements OnInit {
|
||||
];
|
||||
staff = new FormControl('', [Validators.required]);
|
||||
staffs = [
|
||||
{staff: 'A'},
|
||||
{staff: 'B'},
|
||||
{staff: 'C'},
|
||||
{staff: 'D'},
|
||||
{staff: 'Kumar.S'},
|
||||
{staff: 'Devi.k'},
|
||||
];
|
||||
customer = new FormControl('', [Validators.required]);
|
||||
customers = [
|
||||
{customer: 'Sample'},
|
||||
{customer: 'Test'},
|
||||
{customer: 'CSample'},
|
||||
{customer: 'TestD'},
|
||||
{customer: 'A'},
|
||||
{customer: 'B'},
|
||||
{customer: 'C'},
|
||||
{customer: 'B'},
|
||||
];
|
||||
constructor(private router: Router,private formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<DialogBoxComponent>,
|
||||
@ -98,6 +96,8 @@ export class DialogBoxComponent implements OnInit {
|
||||
customer: new FormControl('', [Validators.required]),
|
||||
note: new FormControl('', [Validators.required]),
|
||||
});
|
||||
console.log(this.local_data, this.selects)
|
||||
// this.form.controls['note'].setValue('Sample')
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
|
||||
@ -66,4 +66,13 @@ img {
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-select-arrow {
|
||||
margin: 0 15px!important;
|
||||
}
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: -10px!important;
|
||||
}
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title> <strong>{{action}} New Business</strong>
|
||||
<h5 mat-dialog-title> <strong>{{action}} Business</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
><mat-icon>close</mat-icon></button></h5>
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<!-- <button class="btn btn-primary pull-right" (click)="addEvent()">
|
||||
Add new
|
||||
</button> -->
|
||||
<button class="btn btn-primary pull-right" mat-raised-button >Add Appoinment</button>
|
||||
<button class="btn btn-primary pull-right" (click)="openDialog('Add',{})" mat-raised-button >Add Appoinment</button>
|
||||
<div class="clearfix"></div>
|
||||
</h3>
|
||||
<mat-toolbar color="primary">
|
||||
|
||||
@ -6,6 +6,7 @@ import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMo
|
||||
import { Subject } from 'rxjs';
|
||||
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent } from 'angular-calendar';
|
||||
import { CalendardialogComponent } from '../calendardialog/calendardialog.component';
|
||||
import { DialogBoxComponent } from 'app/appoinment/appoinments/dialog-box/dialog-box.component';
|
||||
|
||||
const colors: any = {
|
||||
red: {
|
||||
@ -27,6 +28,7 @@ const colors: any = {
|
||||
styleUrls: ['./calendar-list.component.scss']
|
||||
})
|
||||
export class CalendarListComponent implements OnInit {
|
||||
dataSource: any;
|
||||
private yesterday: Date;
|
||||
dialogRef: MatDialogRef<CalendardialogComponent>;
|
||||
lastCloseResult: string;
|
||||
@ -104,6 +106,7 @@ export class CalendarListComponent implements OnInit {
|
||||
}];
|
||||
|
||||
activeDayIsOpen = true;
|
||||
table: any;
|
||||
|
||||
constructor(public dialog: MatDialog) {
|
||||
this.initializeYesterday();
|
||||
@ -146,7 +149,7 @@ export class CalendarListComponent implements OnInit {
|
||||
{
|
||||
title: 'Deletable event',
|
||||
color: colors.blue,
|
||||
start: this.yesterday,
|
||||
start: date,
|
||||
actions: [
|
||||
{
|
||||
label: '<i class="fa fa-fw fa-times"></i>',
|
||||
@ -198,7 +201,72 @@ this.addEvent(date)
|
||||
this.dialogRef = null;
|
||||
});
|
||||
}
|
||||
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
width: '45%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
data:obj
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log(result)
|
||||
if(result.event == 'Add'){
|
||||
this.addRowData(result.data);
|
||||
}else if(result.event == 'Update'){
|
||||
this.updateRowData(result.data);
|
||||
}else if(result.event == 'Delete'){
|
||||
this.deleteRowData(result.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
addRowData(row_obj){
|
||||
var d = this.dataSource.data.length+1
|
||||
console.log(this.dataSource)
|
||||
console.log(row_obj)
|
||||
this.dataSource.data.push
|
||||
({
|
||||
id: d,
|
||||
time: row_obj.time,
|
||||
booking: row_obj.booking,
|
||||
workspace: row_obj.workspace,
|
||||
service: row_obj.service,
|
||||
staff: row_obj.staff,
|
||||
customer: row_obj.customer,
|
||||
payment: row_obj.payment,
|
||||
status: row_obj.status,
|
||||
date: row_obj.date,
|
||||
note: row_obj.note,
|
||||
|
||||
});
|
||||
this.table.renderRows();
|
||||
}
|
||||
updateRowData(row_obj){
|
||||
console.log(row_obj)
|
||||
this.dataSource = this.dataSource.data.filter((value,key)=>{
|
||||
if(value.id == row_obj.id){
|
||||
value.time = row_obj.time;
|
||||
value.booking = row_obj.booking;
|
||||
value.workspace = row_obj.workspace;
|
||||
value.service = row_obj.service;
|
||||
value.staff = row_obj.staff;
|
||||
value.customer = row_obj.customer;
|
||||
value.payment = row_obj.payment;
|
||||
value.status = row_obj.status;
|
||||
value.date = row_obj.date;
|
||||
value.note = row_obj.note;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
deleteRowData(row_obj){
|
||||
console.log(this.dataSource.data,row_obj)
|
||||
this.dataSource.data = this.dataSource.data.filter((value,key)=>{
|
||||
return value.booking != row_obj.booking
|
||||
});
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
addEvent(dates): void {
|
||||
console.log(startOfDay(new Date()));
|
||||
console.log(endOfDay(new Date()))
|
||||
|
||||
@ -1 +1,80 @@
|
||||
<p>customers-list works!</p>
|
||||
<h3>Customers Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
</mat-form-field>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Customers</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 >
|
||||
<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>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- <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.name}} </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.phone}} </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}} <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>
|
||||
|
||||
<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>
|
||||
|
||||
<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"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-container>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,84 @@
|
||||
.my-table{
|
||||
width: 120%;
|
||||
}
|
||||
.button{
|
||||
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;
|
||||
}
|
||||
.mat-expansion-panel-header {
|
||||
display: inline!important;
|
||||
}
|
||||
::ng-deep .mat-drawer-content {
|
||||
overflow: hidden!important;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .body-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #ffff;
|
||||
}
|
||||
::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
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;
|
||||
}
|
||||
.font-color{
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-color{
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.edit-color:hover {
|
||||
color: #4caf50;
|
||||
}
|
||||
.delete:hover {
|
||||
color:#ff0000;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
width: 180%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
/* flex-direction: row; */
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
.th-mat{
|
||||
width: 25%;
|
||||
}
|
||||
::ng-deep .mat-select-arrow {
|
||||
margin: 0 15px!important;
|
||||
}
|
||||
mat-paginator{
|
||||
margin-top: -8px;
|
||||
}
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: -10px!important;
|
||||
}
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
@ -1,4 +1,32 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import Swal from 'sweetalert2';
|
||||
import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
|
||||
|
||||
export interface UsersData {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
city: string;
|
||||
state: string;
|
||||
pincode: string;
|
||||
}
|
||||
const ELEMENT_DATA: UsersData[] = [
|
||||
{id: 1, name: 'school management system ', email: 'management@gmail.com', phone: '8756453456', address:'14-20b/19 Vasantham Colony, Sangakiri.', state: 'Tamil Nadu', city: 'salem', pincode:'637301' },
|
||||
{id: 2, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu' , pincode:'637301'},
|
||||
{id: 3, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
{id: 4, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
{id: 5, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
{id: 6, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
{id: 7, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
{id: 8, name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
{id: 9, name: 'Test', email: 'test@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
{id: 10,name: 'Sample', email: 'sample@gmail.com', phone: '8756453456', address:'sankagiri', city: 'salem', state: 'Tamil Nadu', pincode:'637301'},
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-customers-list',
|
||||
@ -7,9 +35,112 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class CustomersListComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
push: any;
|
||||
displayedColumns: string[] = ['id','name', 'email','phone', 'address', 'pincode', 'action'];
|
||||
dataSource: any;
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
ngOnInit(): void {
|
||||
ngAfterViewInit() {
|
||||
this.dataSource.paginator = this.paginator;
|
||||
}
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
if (this.dataSource.paginator) {
|
||||
this.dataSource.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
constructor(public dialog: MatDialog) { }
|
||||
|
||||
confirmBox(name,element){
|
||||
console.log(name,element)
|
||||
Swal.fire({
|
||||
title: 'Are you sure want to remove?',
|
||||
text: 'You will not be able to recover this file!',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, keep it'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.deleteRowData(element);
|
||||
Swal.fire(
|
||||
'Deleted!',
|
||||
'Your imaginary file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
} else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire(
|
||||
'Cancelled',
|
||||
'Your imaginary file is safe :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
// width: '30%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
data:obj
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log(result)
|
||||
if(result.event == 'Add'){
|
||||
this.addRowData(result.data);
|
||||
}else if(result.event == 'Update'){
|
||||
this.updateRowData(result.data);
|
||||
}else if(result.event == 'Delete'){
|
||||
this.deleteRowData(result.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
addRowData(row_obj){
|
||||
var d = this.dataSource.data.length+1
|
||||
console.log(this.dataSource)
|
||||
this.dataSource.data.push
|
||||
({
|
||||
id: d,
|
||||
name: row_obj.name,
|
||||
email: row_obj.email,
|
||||
phone: row_obj.phone,
|
||||
address: row_obj.address,
|
||||
city: row_obj.city,
|
||||
state: row_obj.state,
|
||||
pincode: row_obj.pincode
|
||||
|
||||
});
|
||||
this.table.renderRows();
|
||||
}
|
||||
updateRowData(row_obj){
|
||||
console.log(row_obj)
|
||||
this.dataSource = this.dataSource.data.filter((value,key)=>{
|
||||
if(value.id == row_obj.id){
|
||||
value.name = row_obj.name;
|
||||
value.email = row_obj.email;
|
||||
value.phone = row_obj.phone;
|
||||
value.address = row_obj.address;
|
||||
value.city = row_obj.city;
|
||||
value.state = row_obj.state;
|
||||
value.pincode = row_obj.pincode;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
deleteRowData(row_obj){
|
||||
console.log(this.dataSource.data,row_obj)
|
||||
this.dataSource.data = this.dataSource.data.filter((value,key)=>{
|
||||
return value.id != row_obj.id
|
||||
});
|
||||
console.log(this.dataSource)
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.dataSource = new MatTableDataSource(ELEMENT_DATA)
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,11 +6,13 @@ import { CustomersListComponent } from './customers-list/customers-list.componen
|
||||
import { MaterialModulesModule } from '../material-modules/material-modules.module';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { DialogBoxComponent } from './dialog-box/dialog-box.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
CustomersListComponent
|
||||
CustomersListComponent,
|
||||
DialogBoxComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
@ -0,0 +1,62 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title> <strong>{{action}} Customers</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()">
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Name" matInput formControlName="name">
|
||||
<mat-error *ngIf="myError('name', 'required')">Name is required</mat-error>
|
||||
<mat-error *ngIf="myError('name', 'maxlength')">Limit exceed</mat-error>
|
||||
</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>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Phone" matInput [(ngModel)]="local_data.phone" formControlName="contact_no">
|
||||
<mat-error *ngIf="myError('contact_no', 'required')">Contact No is required</mat-error>
|
||||
<mat-error *ngIf="myError('contact_no', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address">
|
||||
<mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
|
||||
<mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state">
|
||||
<mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
|
||||
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city">
|
||||
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
|
||||
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder=" Pincode" matInput [(ngModel)]="local_data.pincode" formControlName="pincode">
|
||||
<mat-error *ngIf="myError('pincode', 'required')">Pincode is required</mat-error>
|
||||
<mat-error *ngIf="myError('pincode', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<!-- <img class="image" [src]="url" height="50">
|
||||
<input type='file' (change)="onSelectFile($event)" formControlName="image"> -->
|
||||
</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>
|
||||
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
// ::ng-deep .cdk-overlay-pane{
|
||||
// width: 60%!important;
|
||||
// }
|
||||
.mat-pane{
|
||||
width: 20rem;
|
||||
}
|
||||
.button{
|
||||
// float: right;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 350px;
|
||||
z-index: 9;
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
::ng-deep body .mat-card {
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
// @include media-breakpoint-down(lg) {
|
||||
// padding-top: 150px;
|
||||
// }
|
||||
// @include media-breakpoint-down(md) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
// @include media-breakpoint-down(sm) {
|
||||
// padding-top: 100px;
|
||||
// }
|
||||
|
||||
|
||||
// @media only screen and (max-width: 600px) {
|
||||
// .cdk-overlay-pane{
|
||||
// width: 90%!important;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (max-width: 959px){
|
||||
.cdk-overlay-pane{
|
||||
width: 90%!important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DialogBoxComponent } from './dialog-box.component';
|
||||
|
||||
describe('DialogBoxComponent', () => {
|
||||
let component: DialogBoxComponent;
|
||||
let fixture: ComponentFixture<DialogBoxComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DialogBoxComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DialogBoxComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,75 @@
|
||||
import { Component, Inject, OnInit, Optional } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { Router } from '@angular/router';
|
||||
export interface UsersData {
|
||||
name: string;
|
||||
id: number;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-dialog-box',
|
||||
templateUrl: './dialog-box.component.html',
|
||||
styleUrls: ['./dialog-box.component.scss']
|
||||
})
|
||||
export class DialogBoxComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
fileToUpload: any;
|
||||
imageUrl: any;
|
||||
action:string;
|
||||
local_data:any;
|
||||
url: string | ArrayBuffer;
|
||||
constructor(private router: Router,private formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<DialogBoxComponent>,
|
||||
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
|
||||
console.log(data);
|
||||
this.local_data = {...data};
|
||||
this.action = this.local_data.action;
|
||||
}
|
||||
get f(){
|
||||
return this.form.controls;
|
||||
}
|
||||
doAction(){
|
||||
let tmp = this.form.value
|
||||
tmp.id = this.local_data.id
|
||||
this.dialogRef.close({event:this.action,data:tmp});
|
||||
console.log(this.form.value);
|
||||
console.log(this.action,this.local_data)
|
||||
}
|
||||
closeDialog(){
|
||||
this.dialogRef.close({event:'Cancel'});
|
||||
}
|
||||
onSelectFile(event) {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
reader.onload = (event) => {
|
||||
this.url = event.target.result;
|
||||
}
|
||||
}
|
||||
}
|
||||
close() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
businessselect: new FormControl('', [Validators.required]),
|
||||
image: new FormControl('', null),
|
||||
name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
|
||||
city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
pincode: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
|
||||
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
|
||||
),]),
|
||||
contact_no: new FormControl('', [Validators.required, Validators.maxLength(10)]),
|
||||
});
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
public myError = (controlName: string, errorName: string) =>{
|
||||
return this.form.controls[controlName].hasError(errorName);
|
||||
}
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title> <strong>{{action}} New Users</strong>
|
||||
<h5 mat-dialog-title> <strong>{{action}} Users</strong>
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
><mat-icon>close</mat-icon></button></h5>
|
||||
|
||||
|
||||
@ -66,4 +66,13 @@ img {
|
||||
/* overflow: hidden; */
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: -15px!important;
|
||||
}
|
||||
::ng-deep .mat-select-arrow {
|
||||
margin: 0 15px!important;
|
||||
}
|
||||
::ng-deep body.swal2-height-auto {
|
||||
height: 100% !important
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user