Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Smart 2023-03-01 11:37:22 +05:30
parent 58ba1b4db3
commit 7b23c3f95b
9 changed files with 320 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.html
View File

@ -1,57 +1,76 @@
<h3>Appoinment Details</h3> <h3>Appoinment Details</h3>
<mat-form-field> <mat-form-field>
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field> </mat-form-field>
<div class="calender "> <div class="calender ">
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']">&#xf073;</i> <i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']">&#xf073;</i>
</div> </div>
<button mat-button (click)="openDialog('Add',{})" class="button">Add Appoinment</button> <button mat-button (click)="openDialog('Add',{})" class="button">Add Appoinment</button>
<mat-sidenav-container class="app-inner background-none shadow-none mail-db"> <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
<div class="main-content" fxLayout="row" fxLayoutAlign="center start"> <div class="main-content" fxLayout="row" fxLayoutAlign="center start">
<div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100"> <div fxFlex.gt-sm="90" fxFlex.gt-xs="95" fxFlex="100">
<div class="messages-list material fullscreen"> <div class="messages-list material fullscreen">
<mat-accordion> <mat-accordion>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header > <mat-expansion-panel-header >
<table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table"> <table mat-table [dataSource]="dataSource" #mytable class="my-table mat-elevation-z8 len-table">
<!-- <ng-container matColumnDef="id">
<ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th>
<th mat-header-cell *matHeaderCellDef class="font-color"> S.NO </th> <td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td>
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.id}} </td> </ng-container> -->
</ng-container> <!-- <ng-container matColumnDef="picker">
<th mat-header-cell *matHeaderCellDef class="font-color"> Date & Time </th>
<ng-container matColumnDef="serviceselect"> <td mat-cell *matCellDef="let element"> {{element.picker}} </td>
<th mat-header-cell *matHeaderCellDef class="font-color"> Service </th> </ng-container> -->
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.serviceselect}} </td> <ng-container matColumnDef="time">
</ng-container> <th mat-header-cell *matHeaderCellDef class="font-color">Time </th>
<ng-container matColumnDef="customerselect"> <td mat-cell *matCellDef="let element"> {{element.time}} </td>
<th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th> </ng-container>
<td mat-cell *matCellDef="let element"> {{element.customerselect}} </td> <ng-container matColumnDef="booking">
</ng-container> <th mat-header-cell *matHeaderCellDef class="font-color"> Booking ID </th>
<td mat-cell *matCellDef="let element"> {{element.booking}} </td>
<ng-container matColumnDef="picker"> </ng-container>
<th mat-header-cell *matHeaderCellDef class="font-color"> Date & Time </th> <ng-container matColumnDef="workspace">
<td mat-cell *matCellDef="let element"> {{element.picker}} </td> <th mat-header-cell *matHeaderCellDef class="font-color"> Workspace </th>
</ng-container> <td mat-cell *matCellDef="let element" class="element-spc"> {{element.workspace}} </td>
</ng-container>
<ng-container matColumnDef="action"> <ng-container matColumnDef="service">
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th> <th mat-header-cell *matHeaderCellDef class="font-color"> Service </th>
<td mat-cell *matCellDef="let element" class="action-link"> <td mat-cell *matCellDef="let element" class="element-spc"><img src="assets/images/1.jpg" /> {{element.service}} </td>
<a (click)="openDialog('Update',element)"><span class="material-icons edit-color">edit</span></a> </ng-container>
<a (click)="confirmBox('Delete',element)"><span class="material-icons edit-color delete">delete</span></a> <ng-container matColumnDef="staff">
</td> <th mat-header-cell *matHeaderCellDef class="font-color"> Staff </th>
</ng-container> <td mat-cell *matCellDef="let element" class="element-spc"><img src="assets/images/2.jpg" /> {{element.staff}} </td>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <ng-container matColumnDef="customer">
</table> <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-header>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator> <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
</div> </div>
</div> </div>
</div> </div>
</mat-sidenav-container> </mat-sidenav-container>

65
ng-seed/src/app/appoinment/appoinments/appoinments-list/appoinments-list.component.ts
View File

@ -5,22 +5,30 @@ import { MatTable, MatTableDataSource } from '@angular/material/table';
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
import { DialogBoxComponent } from '../dialog-box/dialog-box.component'; import { DialogBoxComponent } from '../dialog-box/dialog-box.component';
export interface UsersData { export interface UsersData {
id: number; // id: number;
serviceselect: string; time: string;
customerselect: string; booking: string;
picker: string; workspace: string;
service: string;
staff: string;
customer: string;
payment: string;
status: string;
date: string;
} }
const ELEMENT_DATA: UsersData[] = [ const ELEMENT_DATA: UsersData[] = [
{id: 1, serviceselect: 'school management system ', 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'},
{id: 2, serviceselect: 'Sample', customerselect: 'B', picker: '2023-02-26T11:26:30.882Z' }, {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'},
{id: 3, serviceselect: 'Test', customerselect: 'C', picker: '2023-02-26T11:26:30.882Z' }, {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'},
{id: 4, serviceselect: 'Sample', customerselect: 'A', picker: '2023-02-26T11:26:30.882Z' }, {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'},
{id: 5, serviceselect: 'Test', customerselect: 'B', picker: '2023-02-26T11:26:30.882Z' }, {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'},
{id: 6, serviceselect: 'Sample', customerselect: 'C', picker: '2023-02-26T11:26:30.882Z'}, {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'},
{id: 7, serviceselect: 'Test', customerselect: 'A', picker: '2023-02-26T11:26:30.882Z'}, {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'},
{id: 8, serviceselect: 'Sample', customerselect: 'B', picker: '2023-02-26T11:26:30.882Z'}, {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'},
{id: 9, serviceselect: 'Test', customerselect: 'C', picker: '2023-02-26T11:26:30.882Z'}, {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'},
{id: 10, serviceselect: 'Sample', customerselect: 'A', picker: '2023-02-26T11:26:30.882Z'}, {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({ @Component({
selector: 'app-appoinments-list', selector: 'app-appoinments-list',
@ -30,7 +38,7 @@ const ELEMENT_DATA: UsersData[] = [
export class AppoinmentsListComponent implements OnInit { export class AppoinmentsListComponent implements OnInit {
push: any; push: any;
displayedColumns: string[] = ['id', 'serviceselect', 'customerselect','picker', 'action']; displayedColumns: string[] = [ 'time', 'booking', 'workspace', 'service', 'staff', 'customer', 'payment', 'status','action'];
dataSource: any; dataSource: any;
// dataSource: any = new MatTableDataSource(ELEMENT_DATA); // dataSource: any = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatTable,{static:true}) table: MatTable<any>; @ViewChild(MatTable,{static:true}) table: MatTable<any>;
@ -78,7 +86,7 @@ export class AppoinmentsListComponent implements OnInit {
openDialog(action,obj) { openDialog(action,obj) {
obj.action = action; obj.action = action;
const dialogRef = this.dialog.open(DialogBoxComponent, { const dialogRef = this.dialog.open(DialogBoxComponent, {
// width: '30%', width: '45%',
height: '100%', height: '100%',
// maxWidth: '38vw', // maxWidth: '38vw',
position: { right: '0' }, position: { right: '0' },
@ -98,12 +106,19 @@ export class AppoinmentsListComponent implements OnInit {
addRowData(row_obj){ addRowData(row_obj){
var d = this.dataSource.data.length+1 var d = this.dataSource.data.length+1
console.log(this.dataSource) console.log(this.dataSource)
console.log(row_obj)
this.dataSource.data.push this.dataSource.data.push
({ ({
id: d, id: d,
serviceselect: row_obj.serviceselect, time: row_obj.time,
customerselect: row_obj.customerselect, booking: row_obj.booking,
picker: row_obj.picker 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(); this.table.renderRows();
@ -112,9 +127,15 @@ export class AppoinmentsListComponent implements OnInit {
console.log(row_obj) console.log(row_obj)
this.dataSource = this.dataSource.data.filter((value,key)=>{ this.dataSource = this.dataSource.data.filter((value,key)=>{
if(value.id == row_obj.id){ if(value.id == row_obj.id){
value.serviceselect = row_obj.serviceselect; value.time = row_obj.time;
value.customerselect = row_obj.customerselect; value.booking = row_obj.booking;
value.picker = row_obj.picker; 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; return true;
}); });

164
ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.html
View File

@ -1,76 +1,98 @@
<mat-card class="settings-panel" > <mat-card class="settings-panel" >
<h5 mat-dialog-title> <strong>{{action}} New Appoinment</strong> <h5 mat-dialog-title>
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()" <strong> New Appoinment</strong>
><mat-icon>close</mat-icon></button></h5> <button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
>
<div mat-dialog-content class="my-table"> <mat-icon>close</mat-icon>
<form [formGroup]="form" (ngSubmit)="submit()"> </button>
</h5>
<mat-form-field appearance="outline" class="mat-pane"> <div mat-dialog-content class="my-table">
<mat-select placeholder="Select Services" [formControl]="serviceselect" required> <form [formGroup]="form" (ngSubmit)="submit()">
<mat-option>--</mat-option> <div class="field">
<mat-option *ngFor="let business of selects" [value]="business.name"> <label for="name-field" class="label-container">
{{business.name}} Workspace
</mat-option> </label>
</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>
<mat-form-field appearance="outline" class="mat-pane"> <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>--</mat-option>
<mat-option *ngFor="let business of select" [value]="business.name"> <mat-option *ngFor="let business of selects" [value]="business.workspace">
{{business.name}} {{business.workspace}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="customerselect.hasError('required')">Please choose an animal</mat-error> <mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error>
<mat-error *ngIf="customerselect.hasError('invalidValue')">Please choose any other</mat-error> <mat-error *ngIf="workspace.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-form-field> </mat-form-field>
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane"> </div>
<input placeholder=" Phone" matInput [(ngModel)]="local_data.phone" formControlName="contact_no"> <div class="field">
<mat-error *ngIf="myError('contact_no', 'required')">Contact No is required</mat-error> <label for="name-field" class="label-container">
<mat-error *ngIf="myError('contact_no', 'maxlength')">Limit exceed</mat-error> Service
</mat-form-field> --> </label>
<mat-form-field appearance="outline" class="mat-pane">
<mat-select placeholder="Select Service" formControlName="service" required>
<mat-option>--</mat-option>
</form> <mat-option *ngFor="let business of select" [value]="business.service">
</div> {{business.service}}
</mat-option>
<ng-template #elseTemplate> </mat-select>
Sure to delete <b>{{local_data.name}}</b>? <mat-error *ngIf="service.hasError('required')">Please choose an Service</mat-error>
</ng-template><br> <mat-error *ngIf="service.hasError('invalidValue')">Please choose any other</mat-error>
<div mat-dialog-actions> </mat-form-field>
<button mat-button (click)="doAction()" class="mat-green" mat-raised-button >{{action}}</button> </div>
<button mat-button (click)="closeDialog()" >Cancel</button> <div class="field">
</div> <label for="name-field" class="label-container">
</mat-card> 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>

45
ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.scss
View File

@ -1,15 +1,15 @@
// ::ng-deep .cdk-overlay-pane{ // ::ng-deep .cdk-overlay-pane{
// width: 60%!important; // width: 60%!important;
// } // }
.mat-pane{ // .mat-pane{
width: 20rem; // width: 20rem;
} // }
.button{ .button{
// float: right;
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: #ffff; background-color: #ffff!important;
margin-top: -1rem; margin-top: -1rem;
margin-left: 6rem; position: absolute;
right: 20px;
} }
::ng-deep .mat-card.settings-panel { ::ng-deep .mat-card.settings-panel {
position: inherit; position: inherit;
@ -46,3 +46,36 @@
width: 90%!important; 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;
}

71
ng-seed/src/app/appoinment/appoinments/dialog-box/dialog-box.component.ts
View File

@ -3,8 +3,16 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
export interface UsersData { 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({ @Component({
selector: 'app-dialog-box', selector: 'app-dialog-box',
@ -13,27 +21,38 @@ export interface UsersData {
}) })
export class DialogBoxComponent implements OnInit { export class DialogBoxComponent implements OnInit {
form: FormGroup; form: FormGroup;
fileToUpload: any; // fileToUpload: any;
imageUrl: any; // imageUrl: any;
action:string; action:string;
local_data:any; local_data:any;
url: string | ArrayBuffer; url: string | ArrayBuffer;
serviceselect = new FormControl('', [Validators.required]); workspace = new FormControl('', [Validators.required]);
selects = [ selects = [
{name: 'school management system'}, {workspace: 'school management system'},
{name: 'Sample'}, {workspace: 'Sample'},
{name: 'Test'}, {workspace: 'Test'},
]; ];
service = new FormControl('', [Validators.required]);
customerselect = new FormControl('', [Validators.required]);
select = [ select = [
{name: 'A'}, {service: 'Hospital'},
{name: 'B'}, {service: 'School'},
{name: 'C'}, {service: 'Sports'},
{name: 'D'}, ];
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, constructor(private router: Router,private formBuilder: FormBuilder,
public dialogRef: MatDialogRef<DialogBoxComponent>, public dialogRef: MatDialogRef<DialogBoxComponent>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) { @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
@ -64,22 +83,20 @@ export class DialogBoxComponent implements OnInit {
} }
} }
close() { close() {
// console.log(this.form.value);
this.dialogRef.close(); this.dialogRef.close();
} }
ngOnInit() { ngOnInit() {
this.form = new FormGroup({ this.form = new FormGroup({
serviceselect: new FormControl('', [Validators.required]),
customerselect: new FormControl('', [Validators.required]), workspace: new FormControl('', [Validators.required]),
picker: new FormControl('', [Validators.required]), service: new FormControl('', [Validators.required]),
// image: new FormControl('', null), staff: new FormControl('', [Validators.required]),
// name: new FormControl('', [Validators.required, Validators.maxLength(20)]), date: new FormControl('', [Validators.required]),
// address: new FormControl('', [Validators.required, Validators.maxLength(50)]), time: new FormControl('', [Validators.required]),
// city: new FormControl('', [Validators.required, Validators.maxLength(10)]), customer: new FormControl('', [Validators.required]),
// state: new FormControl('', [Validators.required, Validators.maxLength(10)]), note: new FormControl('', [Validators.required]),
// 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) this.form.patchValue(this.local_data)
} }

20
ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.html
View File

@ -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> <h3>
<!-- <button class="btn btn-primary pull-right" (click)="addEvent()"> <!-- <button class="btn btn-primary pull-right" (click)="addEvent()">
Add new Add new
</button> --> </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> <div class="clearfix"></div>
</h3> </h3>
<mat-toolbar color="primary"> <mat-toolbar color="primary">

11
ng-seed/src/app/appoinment/calendars/calendar-list/calendar-list.component.scss
View File

@ -7,4 +7,13 @@
} }
mat-card { mat-card {
margin: 8px; margin: 8px;
} }
::ng-deep .mat-toolbar.mat-primary {
/* background: #673ab7; */
background-color: #207b68f2!important;
color: white;
}
.btn{
background-color: #4caf50!important;
color: white;
}

4
ng-seed/src/app/layouts/admin/admin-layout.component.html
View File

@ -393,9 +393,9 @@
</mat-sidenav> </mat-sidenav>
</mat-sidenav-container> </mat-sidenav-container>
<!-- Demo Purposes Only --> <!-- 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> <mat-icon class="mat-24">settings</mat-icon>
</button> </button> -->
<mat-card class="settings-panel" *ngIf="showSettings"> <mat-card class="settings-panel" *ngIf="showSettings">
<mat-toolbar color="warn"> <mat-toolbar color="warn">
<span fxFlex>Options</span> <span fxFlex>Options</span>

4
ng-seed/src/app/shared/menu-items/menu-items.ts
View File

@ -43,7 +43,7 @@ const MENUITEMS : Menu[] = [
icon: 'security', icon: 'security',
children: [ children: [
{state: 'business-list', name: 'Business List'}, {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', icon: 'security',
children: [ children: [
{state: 'user-list', name: 'Users List'}, {state: 'user-list', name: 'Users List'},
{state: 'add-user-list', name: 'Add Users '}, // {state: 'add-user-list', name: 'Add Users '},
] ]
} }