changes
This commit is contained in:
Smart
parent
58ba1b4db3
commit
7b23c3f95b
@ -1,57 +1,76 @@
|
||||
<h3>Appoinment Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
</mat-form-field>
|
||||
<div class="calender ">
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
</div>
|
||||
<button mat-button (click)="openDialog('Add',{})" class="button">Add Appoinment</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="serviceselect">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Service </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.serviceselect}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="customerselect">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.customerselect}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="picker">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Date & Time </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.picker}} </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>
|
||||
<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="picker">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Date & Time </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.picker}} </td>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
</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>
|
||||
@ -5,22 +5,30 @@ import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import Swal from 'sweetalert2';
|
||||
import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
|
||||
export interface UsersData {
|
||||
id: number;
|
||||
serviceselect: string;
|
||||
customerselect: string;
|
||||
picker: string;
|
||||
// id: number;
|
||||
time: string;
|
||||
booking: string;
|
||||
workspace: string;
|
||||
service: string;
|
||||
staff: string;
|
||||
customer: string;
|
||||
payment: string;
|
||||
status: string;
|
||||
date: string;
|
||||
}
|
||||
const ELEMENT_DATA: UsersData[] = [
|
||||
{id: 1, serviceselect: 'school management system ', customerselect: 'A', picker: '2023-02-26T11:26:30.882Z' },
|
||||
{id: 2, serviceselect: 'Sample', customerselect: 'B', picker: '2023-02-26T11:26:30.882Z' },
|
||||
{id: 3, serviceselect: 'Test', customerselect: 'C', picker: '2023-02-26T11:26:30.882Z' },
|
||||
{id: 4, serviceselect: 'Sample', customerselect: 'A', picker: '2023-02-26T11:26:30.882Z' },
|
||||
{id: 5, serviceselect: 'Test', customerselect: 'B', picker: '2023-02-26T11:26:30.882Z' },
|
||||
{id: 6, serviceselect: 'Sample', customerselect: 'C', picker: '2023-02-26T11:26:30.882Z'},
|
||||
{id: 7, serviceselect: 'Test', customerselect: 'A', picker: '2023-02-26T11:26:30.882Z'},
|
||||
{id: 8, serviceselect: 'Sample', customerselect: 'B', picker: '2023-02-26T11:26:30.882Z'},
|
||||
{id: 9, serviceselect: 'Test', customerselect: 'C', picker: '2023-02-26T11:26:30.882Z'},
|
||||
{id: 10, serviceselect: 'Sample', customerselect: 'A', picker: '2023-02-26T11:26:30.882Z'},
|
||||
{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'},
|
||||
|
||||
];
|
||||
@Component({
|
||||
selector: 'app-appoinments-list',
|
||||
@ -30,7 +38,7 @@ const ELEMENT_DATA: UsersData[] = [
|
||||
export class AppoinmentsListComponent implements OnInit {
|
||||
|
||||
push: any;
|
||||
displayedColumns: string[] = ['id', 'serviceselect', 'customerselect','picker', '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>;
|
||||
@ -78,7 +86,7 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
openDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(DialogBoxComponent, {
|
||||
// width: '30%',
|
||||
width: '45%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
@ -98,12 +106,19 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
addRowData(row_obj){
|
||||
var d = this.dataSource.data.length+1
|
||||
console.log(this.dataSource)
|
||||
console.log(row_obj)
|
||||
this.dataSource.data.push
|
||||
({
|
||||
id: d,
|
||||
serviceselect: row_obj.serviceselect,
|
||||
customerselect: row_obj.customerselect,
|
||||
picker: row_obj.picker
|
||||
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,
|
||||
|
||||
});
|
||||
this.table.renderRows();
|
||||
@ -112,9 +127,15 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
console.log(row_obj)
|
||||
this.dataSource = this.dataSource.data.filter((value,key)=>{
|
||||
if(value.id == row_obj.id){
|
||||
value.serviceselect = row_obj.serviceselect;
|
||||
value.customerselect = row_obj.customerselect;
|
||||
value.picker = row_obj.picker;
|
||||
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;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
@ -1,76 +1,98 @@
|
||||
<mat-card class="settings-panel" >
|
||||
<h5 mat-dialog-title> <strong>{{action}} New 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()">
|
||||
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-select placeholder="Select Services" [formControl]="serviceselect" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of selects" [value]="business.name">
|
||||
{{business.name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="serviceselect.hasError('required')">Please choose an animal</mat-error>
|
||||
<mat-error *ngIf="serviceselect.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<h5 mat-dialog-title>
|
||||
<strong> New 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 Customer" [formControl]="customerselect" required>
|
||||
<mat-select placeholder="Select Workspace" formControlName="workspace" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let business of select" [value]="business.name">
|
||||
{{business.name}}
|
||||
<mat-option *ngFor="let business of selects" [value]="business.workspace">
|
||||
{{business.workspace}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="customerselect.hasError('required')">Please choose an animal</mat-error>
|
||||
<mat-error *ngIf="customerselect.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field appearance="outline" class="mat-pane" >
|
||||
<mat-date-range-input [rangePicker]="picker" placeholder="Enter a date">
|
||||
<input matStartDate matInput placeholder="Start date">
|
||||
<input matEndDate matInput placeholder="End date">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- <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-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>
|
||||
<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> -->
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
</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="Assign 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>
|
||||
@ -1,15 +1,15 @@
|
||||
// ::ng-deep .cdk-overlay-pane{
|
||||
// width: 60%!important;
|
||||
// }
|
||||
.mat-pane{
|
||||
width: 20rem;
|
||||
}
|
||||
// .mat-pane{
|
||||
// width: 20rem;
|
||||
// }
|
||||
.button{
|
||||
// float: right;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
background-color: #ffff!important;
|
||||
margin-top: -1rem;
|
||||
margin-left: 6rem;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
::ng-deep .mat-card.settings-panel {
|
||||
position: inherit;
|
||||
@ -46,3 +46,36 @@
|
||||
width: 90%!important;
|
||||
}
|
||||
}
|
||||
|
||||
//25/02/2023
|
||||
|
||||
.field{
|
||||
display: flex;
|
||||
}
|
||||
.label-container{
|
||||
flex: 1;
|
||||
color: #666;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
width: 100px;
|
||||
flex: none;
|
||||
margin-right: 20px;
|
||||
align-self: flex-start;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
line-height: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
|
||||
margin: 0.25em 0;
|
||||
width: 175%!important;
|
||||
}
|
||||
.mate{
|
||||
width: 27%!important;
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.field-inline{
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@ -3,8 +3,16 @@ 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;
|
||||
// id: number;
|
||||
time: string;
|
||||
booking: string;
|
||||
workspace: string;
|
||||
service: string;
|
||||
staff: string;
|
||||
customer: string;
|
||||
payment: string;
|
||||
status: string;
|
||||
date: Date;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-dialog-box',
|
||||
@ -13,27 +21,38 @@ export interface UsersData {
|
||||
})
|
||||
export class DialogBoxComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
fileToUpload: any;
|
||||
imageUrl: any;
|
||||
// fileToUpload: any;
|
||||
// imageUrl: any;
|
||||
action:string;
|
||||
local_data:any;
|
||||
url: string | ArrayBuffer;
|
||||
|
||||
serviceselect = new FormControl('', [Validators.required]);
|
||||
workspace = new FormControl('', [Validators.required]);
|
||||
selects = [
|
||||
{name: 'school management system'},
|
||||
{name: 'Sample'},
|
||||
{name: 'Test'},
|
||||
{workspace: 'school management system'},
|
||||
{workspace: 'Sample'},
|
||||
{workspace: 'Test'},
|
||||
];
|
||||
|
||||
customerselect = new FormControl('', [Validators.required]);
|
||||
service = new FormControl('', [Validators.required]);
|
||||
select = [
|
||||
{name: 'A'},
|
||||
{name: 'B'},
|
||||
{name: 'C'},
|
||||
{name: 'D'},
|
||||
{service: 'Hospital'},
|
||||
{service: 'School'},
|
||||
{service: 'Sports'},
|
||||
];
|
||||
staff = new FormControl('', [Validators.required]);
|
||||
staffs = [
|
||||
{staff: 'A'},
|
||||
{staff: 'B'},
|
||||
{staff: 'C'},
|
||||
{staff: 'D'},
|
||||
];
|
||||
customer = new FormControl('', [Validators.required]);
|
||||
customers = [
|
||||
{customer: 'Sample'},
|
||||
{customer: 'Test'},
|
||||
{customer: 'CSample'},
|
||||
{customer: 'TestD'},
|
||||
];
|
||||
|
||||
constructor(private router: Router,private formBuilder: FormBuilder,
|
||||
public dialogRef: MatDialogRef<DialogBoxComponent>,
|
||||
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
|
||||
@ -64,22 +83,20 @@ export class DialogBoxComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
close() {
|
||||
// console.log(this.form.value);
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
serviceselect: new FormControl('', [Validators.required]),
|
||||
customerselect: new FormControl('', [Validators.required]),
|
||||
picker: 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)]),
|
||||
// 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)]),
|
||||
|
||||
workspace: new FormControl('', [Validators.required]),
|
||||
service: new FormControl('', [Validators.required]),
|
||||
staff: new FormControl('', [Validators.required]),
|
||||
date: new FormControl('', [Validators.required]),
|
||||
time: new FormControl('', [Validators.required]),
|
||||
customer: new FormControl('', [Validators.required]),
|
||||
note: new FormControl('', [Validators.required]),
|
||||
});
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
|
||||
@ -1,9 +1,27 @@
|
||||
<!-- <mat-card class="mb-2">
|
||||
<mat-card-title>Tabs with simplified api</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-card>
|
||||
<mat-tab-group>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Calendar</ng-template>
|
||||
<mat-card-content>This tab is about the Earth!</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>List View</ng-template>
|
||||
<mat-card-content>This tab is about combustion!</mat-card-content>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card> -->
|
||||
|
||||
<h3>
|
||||
|
||||
<!-- <button class="btn btn-primary pull-right" (click)="addEvent()">
|
||||
Add new
|
||||
</button> -->
|
||||
<button class="btn btn-primary pull-right" mat-raised-button color="primary">Add Appoinment</button> -->
|
||||
<button class="btn btn-primary pull-right" mat-raised-button >Add Appoinment</button>
|
||||
<div class="clearfix"></div>
|
||||
</h3>
|
||||
<mat-toolbar color="primary">
|
||||
|
||||
@ -7,4 +7,13 @@
|
||||
}
|
||||
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;
|
||||
}
|
||||
@ -393,9 +393,9 @@
|
||||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
<!-- Demo Purposes Only -->
|
||||
<button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
|
||||
<!-- <button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
|
||||
<mat-icon class="mat-24">settings</mat-icon>
|
||||
</button>
|
||||
</button> -->
|
||||
<mat-card class="settings-panel" *ngIf="showSettings">
|
||||
<mat-toolbar color="warn">
|
||||
<span fxFlex>Options</span>
|
||||
|
||||
@ -43,7 +43,7 @@ const MENUITEMS : Menu[] = [
|
||||
icon: 'security',
|
||||
children: [
|
||||
{state: 'business-list', name: 'Business List'},
|
||||
{state: 'add-business-list', name: 'Add Business '},
|
||||
// {state: 'add-business-list', name: 'Add Business '},
|
||||
]
|
||||
},
|
||||
// {
|
||||
@ -71,7 +71,7 @@ const MENUITEMS : Menu[] = [
|
||||
icon: 'security',
|
||||
children: [
|
||||
{state: 'user-list', name: 'Users List'},
|
||||
{state: 'add-user-list', name: 'Add Users '},
|
||||
// {state: 'add-user-list', name: 'Add Users '},
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user