end user flow and appointment UI chnages
This commit is contained in:
bitbucket
parent
5cf982d59d
commit
ccadab7bc9
@ -1,7 +1,7 @@
|
||||
<h3>Appointment Details</h3>
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Enter Text" #input>
|
||||
</mat-form-field>
|
||||
<div class="calender ">
|
||||
<i style="font-size:24px" class="fa" [routerLink]="['/appoinment/calendar-list']"></i>
|
||||
@ -16,31 +16,36 @@
|
||||
<mat-expansion-panel-header >
|
||||
<div class="example-container mat-elevation-z8 ">
|
||||
<table mat-table [dataSource]="appoinmentsList" #mytable class="my-table mat-elevation-z8 len-table">
|
||||
<ng-container matColumnDef="busId">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> BusId </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> {{element.busId}} </td>
|
||||
<ng-container matColumnDef="Profile">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Profile </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> <br><img src="assets/images/profile.jpg" /> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="ClientName">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Client Name </th>
|
||||
<td mat-cell *matCellDef="let element"> <br><div class="label">{{element.customer[0].cusName || null }} </div></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="date">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Appointment Date</th>
|
||||
<td mat-cell *matCellDef="let element"> <br><div class="label">{{element.appoinmentDate | date:'dd-MMM-YYYY' }}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="time">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Time </th>
|
||||
<td mat-cell *matCellDef="let element"> <div class="label">{{element.appoinmentDate | date:'mediumDate'}}</div> <br> {{element.appoinmentTime}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color">Appointment Time </th>
|
||||
<td mat-cell *matCellDef="let element"> <div class="label">{{element.appoinmentSlots }}</div> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="slots">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Slots</th>
|
||||
<td mat-cell *matCellDef="let element"> <br>{{element.appoinmentSlots}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="booking">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Booking ID </th>
|
||||
<td mat-cell *matCellDef="let element"> <br>{{element.booking}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="workspace">
|
||||
|
||||
|
||||
<!-- <ng-container matColumnDef="workspace">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Workspace </th>
|
||||
<td mat-cell *matCellDef="let element" class="element-spc"> <br> {{element.workspace}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="service">
|
||||
</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"> <br><img src="assets/images/1.jpg" /> {{element.service}} </td>
|
||||
</ng-container>
|
||||
@ -51,14 +56,14 @@
|
||||
<ng-container matColumnDef="customer">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Customer </th>
|
||||
<td mat-cell *matCellDef="let element"> <br> {{element.customer}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="payment">
|
||||
</ng-container> -->
|
||||
<!-- <ng-container matColumnDef="payment">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Payment </th>
|
||||
<td mat-cell *matCellDef="let element"> <br>{{element.paymentStatus}} </td>
|
||||
</ng-container>
|
||||
</ng-container> -->
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Status </th>
|
||||
<td mat-cell *matCellDef="let element"> <br>{{element.status}} </td>
|
||||
<td mat-cell *matCellDef="let element"> <br><span style="font-weight: 700;" [ngStyle] = "{'color':element.status == '0' ? '#4caf50' : '#ffd740'}">{{element.status == 0 ? 'Booked':'Cancelled'}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef class="font-color"> Action </th>
|
||||
@ -72,11 +77,17 @@
|
||||
<!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> -->
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<mat-paginator
|
||||
#paginator
|
||||
[pageSizeOptions]="pageSizes"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</mat-expansion-panel-header>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,16 +41,17 @@ const ELEMENT_DATA: UsersData[] = [
|
||||
export class AppoinmentsListComponent implements OnInit {
|
||||
|
||||
push: any;
|
||||
displayedColumns: string[] = ['busId', 'time', 'slots', 'action'];
|
||||
displayedColumns: string[] = ['Profile', 'ClientName','date','time','status', 'action'];
|
||||
// dataSource: any;
|
||||
public appoinmentsList:any = new MatTableDataSource();
|
||||
// dataSource: any = new MatTableDataSource(ELEMENT_DATA);
|
||||
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
// @ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
recordStatus: boolean;
|
||||
addFormData: any;
|
||||
|
||||
|
||||
@ViewChild('paginator') paginator: MatPaginator;
|
||||
@ViewChild('paginatorPageSize') paginatorPageSize: MatPaginator;
|
||||
pageSizes = [3, 5, 7];
|
||||
constructor(public dialog: MatDialog, public _app:AppointmentsService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
@ -62,28 +63,33 @@ export class AppoinmentsListComponent implements OnInit {
|
||||
this._app.getAppoinmentsListDetails().subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.appoinmentsList = res.data;
|
||||
// console.log(this.appoinmentsList)
|
||||
// this.dataSource = res.data.length;
|
||||
// console.log(this.dataSource)
|
||||
// this.dataSource.data = this.appoinmentsList;
|
||||
// console.log(this.dataSource.data)
|
||||
// this.recordStatus=false;
|
||||
console.log(this.appoinmentsList)
|
||||
|
||||
}
|
||||
else{
|
||||
// this.appoinmentsList=[];
|
||||
// this.dataSource = null;
|
||||
// this.recordStatus=true;
|
||||
|
||||
}
|
||||
}
|
||||
,error => {
|
||||
// this.errorMessage.push(error);
|
||||
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
|
||||
// alert(error.html_format);
|
||||
});
|
||||
})
|
||||
// let param ={'userId':"5"
|
||||
// }
|
||||
// this._app.getServicesMapDetails(param).subscribe(res => {
|
||||
// if (res.status == 200) {
|
||||
// console.log(res)
|
||||
// this.appoinmentsList = res.data;
|
||||
// console.log(this.appoinmentsList)
|
||||
|
||||
// }
|
||||
// else{
|
||||
|
||||
// }
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.appoinmentsList.paginator = this.paginator;
|
||||
this.appoinmentsList.paginator = this.paginatorPageSize;
|
||||
|
||||
}
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
|
||||
@ -26,7 +26,14 @@ export class AppointmentsService {
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
|
||||
|
||||
getServicesMapDetails(addParams): Observable<any> {
|
||||
return this._http.post(this.apiUrl + 'getServicesMapDetails', addParams)
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
|
||||
|
||||
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
|
||||
throw new Error('Method not implemented.');
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ConsultantService } from './consultant.service';
|
||||
|
||||
describe('ConsultantService', () => {
|
||||
let service: ConsultantService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(ConsultantService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,33 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { environment } from 'environments/environment';
|
||||
import { Observable } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ConsultantService {
|
||||
|
||||
private apiUrl = environment.apiEndpoint;
|
||||
constructor(private _http: HttpClient) { }
|
||||
|
||||
getUsersListDetails(id): Observable<any> {
|
||||
console.log('IN')
|
||||
return this._http.post(this.apiUrl + 'getPractitionerInfo', {id:id})
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
getServicesListDetails(userId,busId): Observable<any> {
|
||||
console.log('IN')
|
||||
return this._http.post(this.apiUrl + 'getServicesMapDetails', {busId:busId, userId:userId})
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
|
||||
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
}
|
||||
@ -6,12 +6,14 @@ import { ConsultantSettingComponent } from './consultant-setting/consultant-sett
|
||||
import { DemoMaterialModule } from 'app/shared/demo.module';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { EditWorkingHoursComponent } from './edit-working-hours/edit-working-hours.component';
|
||||
import { ExtraWorkingHoursComponent } from './extra-working-hours/extra-working-hours.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ConsultantSettingComponent,
|
||||
EditWorkingHoursComponent
|
||||
EditWorkingHoursComponent,
|
||||
ExtraWorkingHoursComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
@ -12,12 +12,12 @@
|
||||
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<!-- <i class="material-icons"></i> -->
|
||||
Staff Information
|
||||
<i class="material-icons icons-info"></i>
|
||||
My Profile
|
||||
</ng-template>
|
||||
<div class="staff">
|
||||
<span class="staff-title">
|
||||
Set Up Staff Profile
|
||||
Profile
|
||||
</span>
|
||||
</div>
|
||||
<ng-scrollbar class="scrollHV">
|
||||
@ -25,75 +25,81 @@
|
||||
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
|
||||
<div class="form-group label-container">
|
||||
<label>Name <span class="line">-</span></label>
|
||||
<input type="text" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" />
|
||||
<div *ngIf="submitted && f.name.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.name.errors.required">Name is required</div>
|
||||
</div>
|
||||
<a style="padding: 10px;">{{usersList.userName}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Email Address <span style="margin-left: 2.7rem;">-</span></label>
|
||||
<input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
|
||||
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.email.errors.required">Email is required</div>
|
||||
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
|
||||
</div>
|
||||
<a style="padding: 10px;">{{usersList.email}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Role <span style="margin-left: 6.7rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{usersList.role}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Password <span style="margin-left: 4rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{usersList.password}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Gender <span style="margin-left: 5.5rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.gender}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Date of Birth <span style="margin-left: 3.5rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.dob}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Languages <span style="margin-left: 4rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.languages}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Qualification <span style="margin-left: 4rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.qualification}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Designation <span style="margin-left: 3.7rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.designtion}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Experience <span style="margin-left: 4rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.exp}}</a>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Fees <span style="margin-left: 6.7rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.fees}}</a>
|
||||
</div>
|
||||
<!-- <div class="form-group label-container">
|
||||
<label>WorkingHours <span style="margin-left: 6.7rem;">-</span></label>
|
||||
<a style="padding: 10px;">{{practitionerdetails.workingHours}}</a>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="form-group label-container">
|
||||
<label>Contact Number <span style="margin-left: 2rem;">-</span></label>
|
||||
<input type="text" formControlName="contact" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.contact.errors }" />
|
||||
<div *ngIf="submitted && f.contact.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.contact.errors.required">Last Name is required</div>
|
||||
<div *ngIf="f.contact.errors.required">Contact Number is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
</div> -->
|
||||
<!-- <div class="form-group label-container">
|
||||
<label>Primary Workspace <span style="margin-left: 1rem;">-</span></label>
|
||||
<input type="text" formControlName="workspace" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.workspace.errors }" />
|
||||
<div *ngIf="submitted && f.workspace.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.workspace.errors.required">First Name is required</div>
|
||||
<div *ngIf="f.workspace.errors.required">Workspace is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Role <span style="margin-left: 6.7rem;">-</span></label>
|
||||
<input type="text" formControlName="role" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.role.errors }" />
|
||||
<div *ngIf="submitted && f.role.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.role.errors.required">First Name is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Designation <span style="margin-left: 3.7rem;">-</span></label>
|
||||
<input type="text" formControlName="designation" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.designation.errors }" />
|
||||
<div *ngIf="submitted && f.designation.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.designation.errors.required">First Name is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Date of Birth <span style="margin-left: 3.5rem;">-</span></label>
|
||||
<input type="text" formControlName="birth" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.birth.errors }" />
|
||||
<div *ngIf="submitted && f.birth.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.birth.errors.required">First Name is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
<label>Gender <span style="margin-left: 5.5rem;">-</span></label>
|
||||
<input type="text" formControlName="gender" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }" />
|
||||
<div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.gender.errors.required">First Name is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
</div> -->
|
||||
<!-- <div class="form-group label-container">
|
||||
<label>Status <span style="margin-left: 6.5rem;">-</span></label>
|
||||
<input type="text" formControlName="status" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.status.errors }" />
|
||||
<div *ngIf="submitted && f.status.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.status.errors.required">First Name is required</div>
|
||||
<div *ngIf="f.status.errors.required">Status is required</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group label-container">
|
||||
</div> -->
|
||||
<!-- <div class="form-group label-container">
|
||||
<label>Additional Information <span style="margin-left: 0.5rem;">-</span></label>
|
||||
<input type="text" formControlName="information" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.information.errors }" />
|
||||
<div *ngIf="submitted && f.information.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.information.errors.required">First Name is required</div>
|
||||
<div *ngIf="f.information.errors.required">Information is required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="form-group">
|
||||
<button class="btn btn-primary">Register</button>
|
||||
</div> -->
|
||||
@ -104,7 +110,7 @@
|
||||
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<!-- <i class="material-icons"></i> -->
|
||||
<i class="material-icons icons-Hours"></i>
|
||||
Working Hours
|
||||
</ng-template>
|
||||
<div class="staff">
|
||||
@ -118,11 +124,12 @@
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<label for="color-toggle" class="toggle">Customize working hours.</label>
|
||||
<div class="booking-url">
|
||||
<span class="underline-title full-width hours">Working Hours</span>
|
||||
<!-- <span class="underline-title full-width hours">Working Hours</span> -->
|
||||
<span class="underline-title">Working Hours</span>
|
||||
</div>
|
||||
<div class="alert">
|
||||
<!-- <div class="alert">
|
||||
<span class="closebtn">× sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
@ -130,32 +137,112 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1">
|
||||
<div class="dis-flex">
|
||||
<span>10:00 am</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 09:00am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex">
|
||||
<span>01:00 pm</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 06:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Monday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1">
|
||||
<div class="dis-flex">
|
||||
<span>10:00 am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex">
|
||||
<span>01:00 pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-flex" >
|
||||
<span> 09:00am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 06:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Tuesday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1">
|
||||
<div class="dis-flex" >
|
||||
<span> 09:00am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 06:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Wednesday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1">
|
||||
<div class="dis-flex" >
|
||||
<span> 09:00am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 06:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Thursday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1">
|
||||
<div class="dis-flex" >
|
||||
<span> 09:00am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 06:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Friday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1">
|
||||
<div class="dis-flex" >
|
||||
<span> 09:00am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 06:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Saturday</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex mt-1">
|
||||
<div class="dis-flex" >
|
||||
<span> 09:00am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex" >
|
||||
<span> 06:00pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Tuesday</span>
|
||||
@ -170,15 +257,15 @@
|
||||
<span>01:00 pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="booking-url">
|
||||
<span class="underline-title full-width hours">Special Working Hours</span>
|
||||
<button mat-button class="add-button">Add</button>
|
||||
<button mat-button (click)="workingDialog('Add',{})" class="add-button">Add</button>
|
||||
</div>
|
||||
<p class="para">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
|
||||
<div class="booking-url">
|
||||
<span class="underline-title full-width hours">Unavailability</span>
|
||||
<button mat-button class="add-button">Add</button>
|
||||
<button mat-button (click)="workingDialog('Add',{})" class="add-button">Add</button>
|
||||
</div>
|
||||
<p class="para margin">Workings on weekends or compensating for time off? Add them here to let customers know when you're available.</p>
|
||||
</ng-scrollbar>
|
||||
@ -187,43 +274,35 @@
|
||||
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
Assigned Services
|
||||
<i class="material-icons icons"></i> Assigned Services
|
||||
</ng-template>
|
||||
<div class="staff">
|
||||
<span class="staff-title">
|
||||
Define Your Services
|
||||
</span>
|
||||
<mat-form-field appearance="outline">
|
||||
<!-- <mat-label>Select an option</mat-label> -->
|
||||
<mat-select [(value)]="selected">
|
||||
<mat-option>None</mat-option>
|
||||
<mat-option value="option1">Option 1</mat-option>
|
||||
<mat-option value="option2">Option 2</mat-option>
|
||||
<mat-option value="option3">Option 3</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="mat-card" *ngFor="let message of messages">
|
||||
<mat-nav-list>
|
||||
<mat-list-item (click)="onSelect(message)" >
|
||||
<img mat-list-avatar src="{{message.photo}}" alt="">
|
||||
<h3 mat-line class="name"> {{message.name}} </h3>
|
||||
<p mat-line class="time-amount"> {{message.time}} <span>| ₹ {{message.amount}}</span></p>
|
||||
<p mat-line class="Customize">+ Customize the price of a service.</p>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
<div class="mat-name">
|
||||
{{message.username}}
|
||||
</div>
|
||||
<div class="mat-status">
|
||||
{{message.status}}
|
||||
</div>
|
||||
<!-- <mat-form-field appearance="outline" class="mat-pane">
|
||||
<mat-label>Role</mat-label>
|
||||
<mat-select placeholder="Select Role" formControlName="assiendservice" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let details of servicesList_array" [value]="details.servicesName">
|
||||
{{details.servicesName}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="myError('businessselect', 'required')">role is required</mat-error>
|
||||
</mat-form-field> -->
|
||||
</div>
|
||||
<mat-card class="mb-2 example-card d-flex" *ngFor="let details of servicesList_array">
|
||||
<input id="color-toggle" type="checkbox" class="checkbox">
|
||||
<mat-card-title-group>
|
||||
<mat-card-title class="service-info">{{details.servicesName}}</mat-card-title>
|
||||
<mat-card-title class="info">{{details.duration}} Minutes</mat-card-title>
|
||||
</mat-card-title-group>
|
||||
</mat-card>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
Staff Booking URL
|
||||
<i class="material-icons icons"></i> Staff Booking URL
|
||||
</ng-template>
|
||||
<div class="staff">
|
||||
<span class="staff-title">
|
||||
@ -239,7 +318,7 @@
|
||||
<div class="url-generate mb20">
|
||||
<div class="url-link dis-flex">
|
||||
<span class="url field-center boxsize">
|
||||
<input type="text" placeholder=" https://bookings.zoho.com/#/app/staffs/summary/4489510000000030016/staff-page-url" name="booking-url" readonly="" id="zb-mb-workspaceBookingPageUrl" class="booking-url-input boxsize text-ellipsis cn ember-text-field ember-view">
|
||||
<input type="text" placeholder=" {{apiUrl}}" name="booking-url" id="zb-mb-workspaceBookingPageUrl" class="booking-url-input boxsize text-ellipsis cn ember-text-field ember-view">
|
||||
</span>
|
||||
<!-- <span id="zb-mb-BookingPageUrlCustomize" class="customize-link field-center cp ml10 mt0 mr10" data-ember-action="" data-ember-action-813="813">Customize</span> -->
|
||||
<span class="url-button field-center boxsize pb1"><button id="zb-mb-BookingPageUrlCopyLink" class="copy-button boxsize cp" data-ember-action="" data-ember-action-814="814">Copy</button></span>
|
||||
@ -251,4 +330,5 @@
|
||||
</mat-tab>
|
||||
|
||||
</mat-tab-group>
|
||||
|
||||
|
||||
@ -26,6 +26,9 @@
|
||||
margin-left: 2rem;
|
||||
// margin-top: -9rem;
|
||||
}
|
||||
// :host ::ng-deep .mat-tab-body.mat-tab-body-active {
|
||||
// position: absolute !important;
|
||||
// }
|
||||
|
||||
mat-tab-body {
|
||||
flex-grow: 1;
|
||||
@ -36,12 +39,23 @@
|
||||
:host ::ng-deep mat-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icons-info{
|
||||
margin-left: -4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.icons{
|
||||
margin-left: -1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.icons-Hours{
|
||||
margin-left: -2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
:host ::ng-deep.mat-tab-label.mat-tab-label-active {
|
||||
background-color: transparent;
|
||||
// color: red;
|
||||
// background-color: #eee;
|
||||
// border-right: 2px solid red;
|
||||
color: #666;
|
||||
background-color: #eee;
|
||||
border-right: 2px solid #666;
|
||||
}
|
||||
|
||||
:host ::ng-deep.mat-tab-label {
|
||||
@ -118,7 +132,8 @@ label{
|
||||
line-height: 21px;
|
||||
}
|
||||
.underline-title{
|
||||
color: #666!important;
|
||||
// color: #666!important;
|
||||
color: #111;
|
||||
font-size: 16px;
|
||||
margin-top: 1px;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
@ -324,7 +339,29 @@ margin-bottom: 10rem;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.checkbox{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.service-info{
|
||||
line-height: 3rem!important;
|
||||
font-size: 14px!important;
|
||||
font-weight: 500!important;
|
||||
color: #5F5F5F;
|
||||
}
|
||||
.info{
|
||||
font-size: 12px!important;
|
||||
font-weight: 500;
|
||||
color: rgba(2,71,91,.6);
|
||||
padding: 0 0 10px;
|
||||
max-height: 38px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
::ng-deep .mat-card .mat-card-title:nth-child(2) {
|
||||
margin-top: -33px!important;
|
||||
}
|
||||
// .user-pro-wrap{
|
||||
// background-color: #fff;
|
||||
// // height: 100%;
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import { LocationStrategy } from '@angular/common';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { ApiServiceService } from 'app/appoinment/service-list-details/service-api-services/api-service.service';
|
||||
import { environment } from 'environments/environment';
|
||||
import { ConsultantService } from '../consultant-service/consultant.service';
|
||||
import { EditWorkingHoursComponent } from '../edit-working-hours/edit-working-hours.component';
|
||||
import { ExtraWorkingHoursComponent } from '../extra-working-hours/extra-working-hours.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-consultant-setting',
|
||||
@ -21,7 +27,13 @@ export class ConsultantSettingComponent implements OnInit {
|
||||
status: 'Active',
|
||||
},
|
||||
];
|
||||
constructor(private formBuilder: FormBuilder, public dialog: MatDialog) {}
|
||||
|
||||
public usersList:any = new MatTableDataSource();
|
||||
public servicesList:any = new MatTableDataSource();
|
||||
practitionerdetails: any;
|
||||
servicesList_array: any = [];
|
||||
apiUrl:any;
|
||||
constructor(private formBuilder: FormBuilder, public dialog: MatDialog, public _con:ConsultantService, private fb: FormBuilder, public _api:ConsultantService,private locationStrategy: LocationStrategy) {}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
@ -37,8 +49,71 @@ export class ConsultantSettingComponent implements OnInit {
|
||||
status: ['', Validators.required],
|
||||
information: ['', Validators.required],
|
||||
});
|
||||
this.getUsersList()
|
||||
|
||||
}
|
||||
|
||||
getUsersList() {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
let id = localStorage.getItem('user_id')
|
||||
console.log(id)
|
||||
this._con.getUsersListDetails(id).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.usersList = res.data[0];
|
||||
console.log(this.usersList)
|
||||
this.practitionerdetails = this.usersList['practitionerInfos'][0]
|
||||
console.log(this.practitionerdetails)
|
||||
this.apiUrl = 'http://localhost:4200/customer/business/'+this.usersList.randStr
|
||||
this.getServicesList(this.usersList.id,this.usersList.busId)
|
||||
// this.dataSource = res.data.length;
|
||||
// console.log(this.dataSource)
|
||||
// this.dataSource.data = this.usersList;
|
||||
// console.log(this.dataSource.data)
|
||||
// this.recordStatus=false;
|
||||
}
|
||||
else{
|
||||
// this.usersList=[];
|
||||
// this.dataSource = null;
|
||||
// this.recordStatus=true;
|
||||
}
|
||||
}
|
||||
,error => {
|
||||
// this.errorMessage.push(error);
|
||||
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
|
||||
// alert(error.html_format);
|
||||
});
|
||||
}
|
||||
getServicesList(id,busId) {
|
||||
//this._pd.getTabStatusPdDetails(this.tabStatus)
|
||||
this._api.getServicesListDetails(id,busId).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
this.servicesList = res.data;
|
||||
res['data'].forEach(element => {
|
||||
// tmp.push(element.service)
|
||||
element.service.forEach(e => {
|
||||
this.servicesList_array.push(e)
|
||||
});
|
||||
});
|
||||
console.log(this.servicesList_array)
|
||||
// console.log(this.servicesList)
|
||||
// this.dataSource = res.data.length;
|
||||
// console.log(this.dataSource)
|
||||
// this.dataSource.data = this.servicesList;
|
||||
// console.log(this.dataSource.data)
|
||||
// this.recordStatus=false;
|
||||
}
|
||||
else{
|
||||
// this.servicesList=[];
|
||||
// this.dataSource = null;
|
||||
// this.recordStatus=true;
|
||||
}
|
||||
}
|
||||
,error => {
|
||||
// this.errorMessage.push(error);
|
||||
// this.notifier.notify('error', 'Something Went Wrong Try Again.! \t\"' + (error.error_type == 2 ? error.error_status + ' ( ' + error.error_text + ' ) ' : ' ( ' + error.error_text + ' ) ') +'\" Error Occur.!');
|
||||
// alert(error.html_format);
|
||||
});
|
||||
}
|
||||
get f() {
|
||||
return this.registerForm.controls;
|
||||
}
|
||||
@ -66,5 +141,22 @@ openDialog(action,obj) {
|
||||
// });
|
||||
}
|
||||
|
||||
workingDialog(action,obj) {
|
||||
obj.action = action;
|
||||
const dialogRef = this.dialog.open(ExtraWorkingHoursComponent, {
|
||||
width: '48%',
|
||||
height: '100%',
|
||||
// maxWidth: '38vw',
|
||||
position: { right: '0' },
|
||||
data:obj
|
||||
});
|
||||
// dialogRef.afterClosed().subscribe(result => {
|
||||
// if(result != undefined){
|
||||
// console.log(result)
|
||||
// this.formAddUpdateAndDelete(result,result.data)
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,271 +1,657 @@
|
||||
<div class="edit-working">
|
||||
<!-- <ng-scrollbar class="scrollHV"> -->
|
||||
<div class="popup-header">
|
||||
<h5>
|
||||
Edit Working Hours
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
><mat-icon>close</mat-icon></button>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div day="Sunday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Sunday</label>
|
||||
</span>
|
||||
<!-- <ng-scrollbar class="scrollHV"> -->
|
||||
<div class="popup-header">
|
||||
<h5>
|
||||
Edit Working Hours
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="container">
|
||||
<div class="dis-flexs">
|
||||
<div class="label-name" formControlName="day">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked"
|
||||
[value]="day">
|
||||
<label>Sunday</label>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-select
|
||||
placeholder="Select Time"
|
||||
formControlName="filterType">
|
||||
<mat-option
|
||||
*ngFor="let filterType of filterTypes"
|
||||
[value]="filterType">
|
||||
{{ filterType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="margin-lft">
|
||||
<mat-select
|
||||
(selectionChange)="selectedAPIChanged(i)"
|
||||
placeholder="Select Time"
|
||||
#apiField
|
||||
formControlName="apiType">
|
||||
<mat-option
|
||||
*ngFor="let apiType of apiTypes"
|
||||
[value]="apiType">
|
||||
{{ apiType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- <mat-form-field appearance="outline"
|
||||
*ngIf="filter.get('value')">
|
||||
<input
|
||||
matInput
|
||||
formControlName="value"
|
||||
[placeholder]="apiField.value">
|
||||
</mat-form-field> -->
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
add
|
||||
</mat-icon>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="removeFilterFromFiltersFormArray(i)">
|
||||
delete
|
||||
</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
type="button"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
Add row
|
||||
</button> -->
|
||||
<!-- <button
|
||||
class="save"
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
[disabled]="dynamicForm.invalid || filtersFormArray.controls.length < 1"
|
||||
(click)="save()">
|
||||
Save
|
||||
</button> -->
|
||||
</div>
|
||||
</form>
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="container">
|
||||
<div class="dis-flexs">
|
||||
<div class="label-name" formControlName="day">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked"
|
||||
[value]="day">
|
||||
<label>Monday</label>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-select
|
||||
placeholder="Select Time"
|
||||
formControlName="filterType">
|
||||
<mat-option
|
||||
*ngFor="let filterType of filterTypes"
|
||||
[value]="filterType">
|
||||
{{ filterType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="margin-lft">
|
||||
<mat-select
|
||||
(selectionChange)="selectedAPIChanged(i)"
|
||||
placeholder="Select Time"
|
||||
#apiField
|
||||
formControlName="apiType">
|
||||
<mat-option
|
||||
*ngFor="let apiType of apiTypes"
|
||||
[value]="apiType">
|
||||
{{ apiType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
add
|
||||
</mat-icon>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="removeFilterFromFiltersFormArray(i)">
|
||||
delete
|
||||
</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-flex">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</div>
|
||||
</form>
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="container">
|
||||
<div class="dis-flexs">
|
||||
<div class="label-name" formControlName="day">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked"
|
||||
[value]="day">
|
||||
<label>Tuesday</label>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-select
|
||||
placeholder="Select Time"
|
||||
formControlName="filterType">
|
||||
<mat-option
|
||||
*ngFor="let filterType of filterTypes"
|
||||
[value]="filterType">
|
||||
{{ filterType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="margin-lft">
|
||||
<mat-select
|
||||
(selectionChange)="selectedAPIChanged(i)"
|
||||
placeholder="Select Time"
|
||||
#apiField
|
||||
formControlName="apiType">
|
||||
<mat-option
|
||||
*ngFor="let apiType of apiTypes"
|
||||
[value]="apiType">
|
||||
{{ apiType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
add
|
||||
</mat-icon>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="removeFilterFromFiltersFormArray(i)">
|
||||
delete
|
||||
</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="container">
|
||||
<div class="dis-flexs">
|
||||
<div class="label-name" formControlName="day">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked"
|
||||
[value]="day">
|
||||
<label>Wednesday</label>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-select
|
||||
placeholder="Select Time"
|
||||
formControlName="filterType">
|
||||
<mat-option
|
||||
*ngFor="let filterType of filterTypes"
|
||||
[value]="filterType">
|
||||
{{ filterType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="margin-lft">
|
||||
<mat-select
|
||||
(selectionChange)="selectedAPIChanged(i)"
|
||||
placeholder="Select Time"
|
||||
#apiField
|
||||
formControlName="apiType">
|
||||
<mat-option
|
||||
*ngFor="let apiType of apiTypes"
|
||||
[value]="apiType">
|
||||
{{ apiType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
add
|
||||
</mat-icon>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="removeFilterFromFiltersFormArray(i)">
|
||||
delete
|
||||
</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="container">
|
||||
<div class="dis-flexs">
|
||||
<div class="label-name" formControlName="day">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked"
|
||||
[value]="day">
|
||||
<label>Thursday</label>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-select
|
||||
placeholder="Select Time"
|
||||
formControlName="filterType">
|
||||
<mat-option
|
||||
*ngFor="let filterType of filterTypes"
|
||||
[value]="filterType">
|
||||
{{ filterType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="margin-lft">
|
||||
<mat-select
|
||||
(selectionChange)="selectedAPIChanged(i)"
|
||||
placeholder="Select Time"
|
||||
#apiField
|
||||
formControlName="apiType">
|
||||
<mat-option
|
||||
*ngFor="let apiType of apiTypes"
|
||||
[value]="apiType">
|
||||
{{ apiType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
add
|
||||
</mat-icon>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="removeFilterFromFiltersFormArray(i)">
|
||||
delete
|
||||
</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="container">
|
||||
<div class="dis-flexs">
|
||||
<div class="label-name" formControlName="day">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked"
|
||||
[value]="day">
|
||||
<label>Friday</label>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-select
|
||||
placeholder="Select Time"
|
||||
formControlName="filterType">
|
||||
<mat-option
|
||||
*ngFor="let filterType of filterTypes"
|
||||
[value]="filterType">
|
||||
{{ filterType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="margin-lft">
|
||||
<mat-select
|
||||
(selectionChange)="selectedAPIChanged(i)"
|
||||
placeholder="Select Time"
|
||||
#apiField
|
||||
formControlName="apiType">
|
||||
<mat-option
|
||||
*ngFor="let apiType of apiTypes"
|
||||
[value]="apiType">
|
||||
{{ apiType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
add
|
||||
</mat-icon>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="removeFilterFromFiltersFormArray(i)">
|
||||
delete
|
||||
</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form [formGroup]="dynamicForm">
|
||||
<div formArrayName="filters">
|
||||
<div *ngFor="let filter of filtersFormArray.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="container">
|
||||
<div class="dis-flexs">
|
||||
<div class="label-name" formControlName="day">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked"
|
||||
[value]="day">
|
||||
<label>Saturday</label>
|
||||
</span>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-select
|
||||
placeholder="Select Time"
|
||||
formControlName="filterType">
|
||||
<mat-option
|
||||
*ngFor="let filterType of filterTypes"
|
||||
[value]="filterType">
|
||||
{{ filterType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="margin-lft">
|
||||
<mat-select
|
||||
(selectionChange)="selectedAPIChanged(i)"
|
||||
placeholder="Select Time"
|
||||
#apiField
|
||||
formControlName="apiType">
|
||||
<mat-option
|
||||
*ngFor="let apiType of apiTypes"
|
||||
[value]="apiType">
|
||||
{{ apiType }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="addFilterToFiltersFormArray()">
|
||||
add
|
||||
</mat-icon>
|
||||
<mat-icon class="deleteRow"
|
||||
(click)="removeFilterFromFiltersFormArray(i)">
|
||||
delete
|
||||
</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!-- <div day="Sunday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Sunday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex" *ngFor="let row of rows; let i = index">
|
||||
<div class="dis-flex" [(ngModel)]="row.noQuestion" >
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
|
||||
{{ dropDownTestxs }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<span class="addbreak">+</span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<div day="Monday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Monday</label>
|
||||
</span>
|
||||
</div>
|
||||
<span class="addbreak" (click)="addNewRow()">+</span>
|
||||
<span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
|
||||
</div>
|
||||
<div class="dis-flex">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="applyToAll">Apply To All</div>
|
||||
</div>
|
||||
</div>
|
||||
<div day="Monday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Monday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex" *ngFor="let row of rows; let i = index">
|
||||
<div class="dis-flex" [(ngModel)]="row.noQuestion">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
|
||||
{{ dropDownTestxs }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<span class="addbreak">+</span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<span class="addbreak" (click)="addNewRow()">+</span>
|
||||
<span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
</div>
|
||||
<div day="Tuesday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Tuesday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Tuesday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex" *ngFor="let row of rows; let i = index">
|
||||
<div class="dis-flex" [(ngModel)]="row.noQuestion">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
|
||||
{{ dropDownTestxs }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<span class="addbreak">+</span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<span class="addbreak" (click)="addNewRow()">+</span>
|
||||
<span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
</div>
|
||||
<div day="Wednesday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Wednesday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Wednesday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex" *ngFor="let row of rows; let i = index">
|
||||
<div class="dis-flex" [(ngModel)]="row.noQuestion">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
|
||||
{{ dropDownTestxs }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<span class="addbreak">+</span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<span class="addbreak" (click)="addNewRow()">+</span>
|
||||
<span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
</div>
|
||||
<div day="Thursday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Thursday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Thursday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex" *ngFor="let row of rows; let i = index">
|
||||
<div class="dis-flex" [(ngModel)]="row.noQuestion">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
|
||||
{{ dropDownTestxs }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<span class="addbreak">+</span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<span class="addbreak" (click)="addNewRow()">+</span>
|
||||
<span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
</div>
|
||||
<div day="Friday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Friday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Friday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex" *ngFor="let row of rows; let i = index">
|
||||
<div class="dis-flex" [(ngModel)]="row.noQuestion">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
|
||||
{{ dropDownTestxs }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<span class="addbreak">+</span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<span class="addbreak" (click)="addNewRow()">+</span>
|
||||
<span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
</div>
|
||||
<div day="Saturday" class="label-container">
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Saturday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<div class="label-name">
|
||||
<input id="color-toggle" type="checkbox" >
|
||||
<span class="labelname checkbox-default-blue checked">
|
||||
<label>Saturday</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dis-flex" *ngFor="let row of rows; let i = index">
|
||||
<div class="dis-flex" [(ngModel)]="row.noQuestion">
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<form [formGroup]="datainputForm" (ngSubmit)="onSubmit()" novalidate>
|
||||
<section class="form-block">
|
||||
<div class="form-group dis-flex">
|
||||
<div class="select pr-1 ml-1">
|
||||
<select formControlName="dropDownTest" (change)="onSelectChange()" id="dropDownTestId" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestx of timing" [ngValue]="dropDownTestx" [disabled]="dropDownTestx === 'vmnic2'">
|
||||
{{ dropDownTestx }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select pr-2">
|
||||
<select formControlName="dropDownTests" (change)="onSelectChange()" id="dropDownTestIds" class="selectBox select-drop-box ">
|
||||
<option *ngFor="let dropDownTestxs of timing" [ngValue]="dropDownTestxs" [disabled]="dropDownTestxs === 'vmnic2'">
|
||||
{{ dropDownTestxs }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
<span class="addbreak">+</span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<span class="addbreak" (click)="addNewRow()">+</span>
|
||||
<span class="deleteRow" (click)="deleteRow(i)"><i class="fa fa-trash"></i></span>
|
||||
</div>
|
||||
<div class="applyToAll addbreak">Apply To All</div>
|
||||
</div>
|
||||
<!-- </ng-scrollbar> -->
|
||||
<div class="popup-button mb-2">
|
||||
<span class="buttons cancel">Cancel</span>
|
||||
<span class="buttons add">Save</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div> -->
|
||||
<!-- </ng-scrollbar> -->
|
||||
<div class="popup-button mb-2">
|
||||
<span class="buttons cancel" (click)="close()">Cancel</span>
|
||||
<span (click)="save()" class="buttons add">Save</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -12,22 +12,22 @@
|
||||
float: right;
|
||||
}
|
||||
.label-container {
|
||||
display: flex;
|
||||
// display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
padding: 13px 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.label-name{
|
||||
color: #666;
|
||||
position: relative;
|
||||
// position: absolute;
|
||||
text-transform: capitalize;
|
||||
width: 100px;
|
||||
flex: none;
|
||||
margin-right: 15px;
|
||||
margin-right: 0rem!important;
|
||||
align-self: flex-start;
|
||||
padding-top: 13px;
|
||||
padding-top: 25px;
|
||||
box-sizing: border-box;
|
||||
line-height: 15px;
|
||||
}
|
||||
@ -37,8 +37,14 @@
|
||||
// padding: 10px 10px 10px 10px;
|
||||
width: 150px;
|
||||
}
|
||||
.dis-flexs {
|
||||
display: flex !important;
|
||||
}
|
||||
.dis-flex {
|
||||
display: flex!important;
|
||||
display: flex !important;
|
||||
margin-left: 3rem;
|
||||
margin-bottom: 10px;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
.width-10px {
|
||||
width: 10px!important;
|
||||
@ -48,12 +54,36 @@
|
||||
height: 40px;
|
||||
background-color: #FFF;
|
||||
font-size: 13px;
|
||||
color: #111;
|
||||
color: #685f5f;
|
||||
border-radius: 4px;
|
||||
border-color: #666;
|
||||
border-color: #999;
|
||||
}
|
||||
.addbreak{
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
color: #FFF;
|
||||
margin-left: 25px;
|
||||
height: 40px;
|
||||
margin-top: 1rem;
|
||||
cursor: pointer;
|
||||
// &:hover {
|
||||
// cursor: pointer;
|
||||
// color: #111;
|
||||
// }
|
||||
}
|
||||
.deleteRow{
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
// color: #FFF;
|
||||
color: #111;
|
||||
cursor: pointer;
|
||||
// &:hover {
|
||||
// cursor: pointer;
|
||||
// color: #111;
|
||||
// }
|
||||
}
|
||||
.applyToAll{
|
||||
margin-top: -0.5rem;
|
||||
margin-right: 2rem;
|
||||
color: #FFF;
|
||||
&:hover {
|
||||
@ -64,7 +94,6 @@
|
||||
// .scrollHV {
|
||||
// height: calc(100vh - 190px);
|
||||
// }
|
||||
|
||||
.popup-button {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
@ -73,13 +102,14 @@
|
||||
background: #F5F5F5;
|
||||
color: #111;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttons {
|
||||
width: 50%;
|
||||
background: #FFF;
|
||||
color: #111;
|
||||
font-size: 13px;
|
||||
font-family: zohopuvi-medium;
|
||||
font-size: 15px;
|
||||
// font-family: zohopuvi-medium;
|
||||
text-align: center;
|
||||
border-top: 1px solid #E2E2E2;
|
||||
padding: 20px;
|
||||
@ -88,9 +118,19 @@
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
.add {
|
||||
background: #52518F;
|
||||
background-color: #4caf50;
|
||||
color: #FFF;
|
||||
border-top: 1px solid #52518F;
|
||||
border-top: 1px solid #4caf50;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.margin-lft{
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-dialog-container {
|
||||
overflow-x: hidden!important;
|
||||
}
|
||||
::ng-deep .mat-form-field {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
@Component({
|
||||
@ -9,30 +9,116 @@ import { MatDialogRef } from '@angular/material/dialog';
|
||||
})
|
||||
export class EditWorkingHoursComponent implements OnInit {
|
||||
|
||||
filterTypes = [
|
||||
'09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',
|
||||
];
|
||||
apiTypes = [
|
||||
'09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',
|
||||
];
|
||||
days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
seedData = [
|
||||
{ day: 'Sunday', filterType: '09:00am', apiType: '09:30am' },
|
||||
|
||||
];
|
||||
|
||||
dynamicForm: FormGroup;
|
||||
// rows = [{noQuestion : 0}];
|
||||
datainputForm: FormGroup;
|
||||
timing: any[] = ['09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',]
|
||||
// timing: any[] = ['09:00am','09:30am','10:00am','10:30am','11:00am','11:30am','12:00am','12:30am','01:00pm','01:00pm','01:30pm', '02:00pm', '02:30pm', '03:00pm', '03:30pm', '04:00pm', '04:30pm', '05:00pm', '05:30pm', '06:00pm', '06:30pm', '07:00pm', '07:30pm', '08:00pm','08:30pm', '09:00pm',]
|
||||
|
||||
constructor(public dialogRef: MatDialogRef<EditWorkingHoursComponent>, private fb: FormBuilder) { }
|
||||
|
||||
|
||||
close() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
// addNewRow() {
|
||||
// this.rows.push({noQuestion : 0});
|
||||
// }
|
||||
|
||||
// deleteRow(i){
|
||||
// this.rows.splice(i, 1 );
|
||||
// }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.datainputForm = this.fb.group({
|
||||
dropDownTest: '09:00am',
|
||||
dropDownTest: '09:00am',
|
||||
dropDownTests: '09:30am',
|
||||
dropDownTest1:''
|
||||
})
|
||||
}
|
||||
onSelectChange(){
|
||||
console.log(this.datainputForm.get('dropDownTest').value);
|
||||
if( this.datainputForm.get('dropDownTest').value === 'vmnic3'){
|
||||
|
||||
this.datainputForm.get('dropDownTest1').disable();
|
||||
}else{
|
||||
this.datainputForm.get('dropDownTest1').enable();
|
||||
}
|
||||
}
|
||||
|
||||
this.dynamicForm = this.fb.group({
|
||||
filters: this.fb.array([])
|
||||
});
|
||||
this.seedFiltersFormArray();
|
||||
}
|
||||
|
||||
|
||||
seedFiltersFormArray() {
|
||||
this.seedData.forEach(seedDatum => {
|
||||
const formGroup = this.createFilterGroup();
|
||||
if (seedDatum.apiType) {
|
||||
formGroup.addControl('value', this.getFormControl());
|
||||
}
|
||||
formGroup.patchValue(seedDatum);
|
||||
this.filtersFormArray.push(formGroup);
|
||||
});
|
||||
}
|
||||
|
||||
createFilterGroup() {
|
||||
return this.fb.group({
|
||||
filterType: [],
|
||||
apiType: [],
|
||||
day: []
|
||||
});
|
||||
}
|
||||
|
||||
addFilterToFiltersFormArray() {
|
||||
this.filtersFormArray.push(this.createFilterGroup());
|
||||
}
|
||||
|
||||
removeFilterFromFiltersFormArray(index) {
|
||||
this.filtersFormArray.removeAt(index);
|
||||
}
|
||||
|
||||
selectedAPIChanged(i) {
|
||||
this.getFilterGroupAtIndex(i).addControl('value', this.getFormControl());
|
||||
}
|
||||
|
||||
getFormControl() {
|
||||
return this.fb.control(null);
|
||||
}
|
||||
|
||||
save() {
|
||||
console.log(this.dynamicForm.value);
|
||||
}
|
||||
|
||||
get filtersFormArray() {
|
||||
return (<FormArray>this.dynamicForm.get('filters'));
|
||||
}
|
||||
|
||||
getFilterGroupAtIndex(index) {
|
||||
return (<FormGroup>this.filtersFormArray.at(index));
|
||||
}
|
||||
|
||||
// onSelectChange(){
|
||||
// console.log(this.datainputForm.get('dropDownTest').value);
|
||||
// if( this.datainputForm.get('dropDownTest').value === 'vmnic3'){
|
||||
|
||||
// this.datainputForm.get('dropDownTest1').disable();
|
||||
// }else{
|
||||
// this.datainputForm.get('dropDownTest1').enable();
|
||||
// }
|
||||
|
||||
// console.log(this.datainputForm.get('dropDownTests').value);
|
||||
// if( this.datainputForm.get('dropDownTests').value === 'vmnic3'){
|
||||
|
||||
// this.datainputForm.get('dropDownTest1').disable();
|
||||
// }else{
|
||||
// this.datainputForm.get('dropDownTest1').enable();
|
||||
// }
|
||||
// }
|
||||
onSubmit() {
|
||||
console.log(this.datainputForm.value);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
<div class="extra-working">
|
||||
<div class="popup-header">
|
||||
<h5>
|
||||
Add Additional Availability - Staff
|
||||
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
|
||||
><mat-icon>close</mat-icon></button>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="availability">
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<div class="mt-2">
|
||||
<div class="field ">
|
||||
<label for="name-field" class="label-container">Name</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<input placeholder="Name" matInput formControlName="name">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field ">
|
||||
<label for="name-field" class="mr2">All-day Availability</label>
|
||||
<mat-slide-toggle></mat-slide-toggle>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">From</label>
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<input matInput formControlName="releasedAt"
|
||||
[matDatepicker]="releasedAtPicker" (click)="releasedAtPicker.open()">
|
||||
<mat-datepicker-toggle matSuffix [for]="releasedAtPicker">
|
||||
</mat-datepicker-toggle>
|
||||
<mat-datepicker #releasedAtPicker>
|
||||
</mat-datepicker>
|
||||
</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="appoinmentTime" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="name-field" class="label">To</label>
|
||||
<mat-form-field appearance="outline" class="mate">
|
||||
<input matInput formControlName="releasedAt"
|
||||
[matDatepicker]="releasedAtPickers" (click)="releasedAtPickers.open()">
|
||||
<mat-datepicker-toggle matSuffix [for]="releasedAtPickers">
|
||||
</mat-datepicker-toggle>
|
||||
<mat-datepicker #releasedAtPickers>
|
||||
</mat-datepicker>
|
||||
</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="appoinmentTime" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="field ">
|
||||
<label for="name-field" class="mr-8">Reason</label>
|
||||
<mat-form-field appearance="outline" class="mat-pane">
|
||||
<input placeholder="Reason" matInput formControlName="reason">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="popup-button mb-2">
|
||||
<span class="buttons cancel">Cancel</span>
|
||||
<span class="buttons add">Save</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,106 @@
|
||||
.extra-working{
|
||||
.popup-header {
|
||||
background: #FFF;
|
||||
// padding: 5px 5px 5px 5px;
|
||||
margin-top: -1.5rem;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
}
|
||||
.button{
|
||||
// float: right;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #ffff;
|
||||
margin-top: -1rem;
|
||||
margin-left: 14rem;
|
||||
}
|
||||
// h5{
|
||||
// margin-bottom: 1.5rem;
|
||||
// }
|
||||
.availability{
|
||||
margin-bottom: 7.5rem;
|
||||
}
|
||||
.label-container{
|
||||
margin-right: 8rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
// .outline{
|
||||
// width: 18%;
|
||||
// }
|
||||
.mate{
|
||||
width: 16% !important;
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
.label{
|
||||
margin-right: 9rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.mr-8{
|
||||
margin-right: 7rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.mr2{
|
||||
margin-right: 3rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
color: #111;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttons {
|
||||
width: 50%;
|
||||
background: #FFF;
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
// font-family: zohopuvi-medium;
|
||||
text-align: center;
|
||||
border-top: 1px solid #E2E2E2;
|
||||
padding: 20px;
|
||||
-webkit-transition: all .2s ease-in;
|
||||
-moz-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
.add {
|
||||
background-color: #4caf50;
|
||||
color: #FFF;
|
||||
border-top: 1px solid #4caf50;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
h1 {
|
||||
color: #4caf50;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
toggle-button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.example-h2 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.example-section {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.example-margin {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
::ng-deep .mat-form-field-outline {
|
||||
width: 145%;
|
||||
}
|
||||
::ng-deep .mat-icon-button {
|
||||
margin-right: -3rem;
|
||||
}
|
||||
::ng-deep .mat-slide-toggle-bar {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ExtraWorkingHoursComponent } from './extra-working-hours.component';
|
||||
|
||||
describe('ExtraWorkingHoursComponent', () => {
|
||||
let component: ExtraWorkingHoursComponent;
|
||||
let fixture: ComponentFixture<ExtraWorkingHoursComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ExtraWorkingHoursComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ExtraWorkingHoursComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,31 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
export interface UsersData {
|
||||
name: string;
|
||||
id: number;
|
||||
}
|
||||
@Component({
|
||||
selector: 'app-extra-working-hours',
|
||||
templateUrl: './extra-working-hours.component.html',
|
||||
styleUrls: ['./extra-working-hours.component.scss']
|
||||
})
|
||||
export class ExtraWorkingHoursComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
checked = false;
|
||||
disabled = false;
|
||||
constructor(public dialogRef: MatDialogRef<ExtraWorkingHoursComponent>) { }
|
||||
|
||||
close() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.form = new FormGroup({
|
||||
name: new FormControl('', [Validators.required]),
|
||||
});
|
||||
}
|
||||
submit(){
|
||||
console.log(this.form.value);
|
||||
}
|
||||
|
||||
}
|
||||
@ -33,15 +33,16 @@
|
||||
</div>
|
||||
<div class="consultant-profile">
|
||||
<h5 class="text-primary">{{consultant.userName}}</h5>
|
||||
<span class="silk-block consultant-span">{{consultant.specialist || "ENT" }}</span><br>
|
||||
<span class="silk-block mb-1 consultant-year">{{consultant.year || "1 YRS EXP"}}</span><br>
|
||||
<span class="silk-block mb-1 consultant-qualification">{{consultant.qualification || "MBBS"}}</span><br>
|
||||
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.payment || 100}}</span> </span><br>
|
||||
<span class="silk-block consultant-span">{{consultant.practitionerInfos[0].designtion
|
||||
|| "ENT" }}</span><br>
|
||||
<span class="silk-block mb-1 consultant-year">{{consultant.practitionerInfos[0].exp || null}}</span><br>
|
||||
<span class="silk-block mb-1 consultant-qualification">{{consultant.practitionerInfos[0].qualification || null}}</span><br>
|
||||
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.practitionerInfos[0].fees || 100}}</span> </span><br>
|
||||
</div>
|
||||
</div>
|
||||
<span class="d-flex mb">
|
||||
<mat-icon class="mt-1">transcribe</mat-icon>
|
||||
<span class="mt-1 pl-1 consultant-language">{{consultant.language || "English"}}</span>
|
||||
<span class="mt-1 pl-1 consultant-language">{{consultant.practitionerInfos[0].languages || ""}}</span>
|
||||
</span>
|
||||
<span class="d-flex mb">
|
||||
<mat-icon>location_on</mat-icon>
|
||||
@ -55,7 +56,7 @@
|
||||
<!-- <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button">
|
||||
<span class="button-text">Accept</span>
|
||||
</button> -->
|
||||
<button type="button" (click)="goToSlotBooking()" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
|
||||
<button type="button" (click)="goToSlotBooking(consultant)" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
|
||||
<span class="material-icons"> bookmark_add </span><span class="button-text">Book Appoinment</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -27,10 +27,21 @@ export class ConsultantsListComponent implements OnInit {
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
let filter = arr_val.filter(arr=>{return arr.role == "PRACTITIONER" && arr.busId =="abc123"})
|
||||
let service = localStorage.getItem("servicedetails")
|
||||
let serviceDetails = JSON.parse(service)
|
||||
console.log(serviceDetails)
|
||||
let filter = arr_val.filter(arr=>{return arr.role == "PRACTITIONER" && arr.busId ==serviceDetails.busId})
|
||||
console.log(arr_val,filter)
|
||||
this.consultants = filter;
|
||||
|
||||
|
||||
let result = filter.filter((obj, index, self) =>
|
||||
index === self.findIndex((t) => (
|
||||
t.id === obj.id
|
||||
|
||||
|
||||
))
|
||||
);
|
||||
this.consultants = result;
|
||||
// this.consultants = [{
|
||||
// name: 'Dr. Suganya',
|
||||
// specialist: 'ENT',
|
||||
@ -103,9 +114,14 @@ export class ConsultantsListComponent implements OnInit {
|
||||
|
||||
}
|
||||
|
||||
goToSlotBooking(){
|
||||
goToSlotBooking(param){
|
||||
let URL = this.router.url;
|
||||
console.log(URL)
|
||||
console.log(URL,param)
|
||||
let service = localStorage.getItem("servicedetails")
|
||||
let serviceDetails = JSON.parse(service)
|
||||
serviceDetails.userId = ""+param.id+""
|
||||
|
||||
localStorage.setItem("servicedetails",JSON.stringify(serviceDetails))
|
||||
// console.log(URL+"/"+data.randStr+"/practitioner")
|
||||
this.router.navigate([URL+"/slot"])
|
||||
|
||||
|
||||
@ -53,9 +53,10 @@ export class CustomerInfoComponent implements OnInit {
|
||||
this._cus.addCusDetails(addFormData).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
console.log(res)
|
||||
|
||||
let URL = this.router.url;
|
||||
console.log(URL)
|
||||
this.router.navigate([URL+"/pt"])
|
||||
this.router.navigate([URL+"/"+res['data'].id+"/pt"])
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -40,27 +40,27 @@ const routes: Routes = [
|
||||
component: ConsultantsListComponent
|
||||
},
|
||||
{
|
||||
path: 'busniness/:randstr',
|
||||
path: 'business/:randstr',
|
||||
component: ServiceListComponent
|
||||
},
|
||||
{
|
||||
path: 'busniness/:randstr/:randstrs/practitioner',
|
||||
path: 'business/:randstr/:randstrs/practitioner',
|
||||
component: ConsultantsListComponent
|
||||
},
|
||||
{
|
||||
path: 'busniness/:randstr/:randstrs/practitioner/slot',
|
||||
path: 'business/:randstr/:randstrs/practitioner/slot',
|
||||
component: SlotBookingDetailsComponent
|
||||
},
|
||||
{
|
||||
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus',
|
||||
path: 'business/:randstr/:randstrs/practitioner/slot/cus',
|
||||
component: CustomerInfoComponent
|
||||
},
|
||||
{
|
||||
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus/pt',
|
||||
path: 'business/:randstr/:randstrs/practitioner/slot/cus/:cusId/pt',
|
||||
component: PaymentComponent
|
||||
},
|
||||
{
|
||||
path: 'busniness/:randstr/:randstrs/practitioner/slot/cus/pt/bts',
|
||||
path: 'business/:randstr/:randstrs/practitioner/slot/cus/pt/bts',
|
||||
component: BookingSummaryComponent
|
||||
},
|
||||
|
||||
|
||||
@ -50,7 +50,20 @@ private apiUrl = environment.apiEndpoint;
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
|
||||
CreateAppoinmentsCus(addParams): Observable<any> {
|
||||
return this._http.post(this.apiUrl + 'CreateAppoinmentsCus', addParams)
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
CreatecusServicesMapDetails(addParams): Observable<any> {
|
||||
return this._http.post(this.apiUrl + 'CreatecusServicesMapDetails', addParams)
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
}
|
||||
|
||||
|
||||
handleError(arg0: string, arg1: undefined[]): (err: any, caught: Observable<any>) => import("rxjs").ObservableInput<any> {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { EndUserService } from '../end-user.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment',
|
||||
@ -9,7 +10,7 @@ import { Router } from '@angular/router';
|
||||
})
|
||||
export class PaymentComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
constructor(private router:Router) { }
|
||||
constructor(private router:Router,public enduser:EndUserService, ) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.form = new FormGroup({
|
||||
@ -26,10 +27,49 @@ export class PaymentComponent implements OnInit {
|
||||
|
||||
submit(){
|
||||
console.log(this.form.value)
|
||||
let slot_array = JSON.parse(localStorage.getItem("slotData"))
|
||||
|
||||
let service = localStorage.getItem("servicedetails")
|
||||
let serviceDetails = JSON.parse(service)
|
||||
console.log(serviceDetails)
|
||||
|
||||
let URL = this.router.url;
|
||||
console.log(URL)
|
||||
this.router.navigate([URL+"/bts"])
|
||||
console.log(URL,slot_array)
|
||||
let URL_AS_LIST = URL.split('/');
|
||||
console.log(URL_AS_LIST);
|
||||
let paramsmap= {
|
||||
"serviceId": ""+serviceDetails.serviceId+"",
|
||||
"userId": serviceDetails.userId,
|
||||
"busId": serviceDetails.busId
|
||||
}
|
||||
this.enduser.CreatecusServicesMapDetails(paramsmap).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
console.log(res)
|
||||
let serviceMap = res['data'].id
|
||||
let time = new Date().toLocaleTimeString()
|
||||
let params= {
|
||||
"busId": serviceDetails.busId,
|
||||
"cusId": URL_AS_LIST[8],
|
||||
"appoinmentDate": slot_array[0].date,
|
||||
"appoinmentTime": time,
|
||||
"serviceMap": serviceMap,
|
||||
"appoinmentSlots": slot_array[0].slots,
|
||||
}
|
||||
console.log(params)
|
||||
this.enduser.CreateAppoinmentsCus(params).subscribe(res => {
|
||||
if (res.status == 200) {
|
||||
console.log(res)
|
||||
this.router.navigate([URL+"/bts"])
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -41,10 +41,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
© 2021 Venba Information Technology Pvt Ltd. All Rights Reserved
|
||||
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
@ -212,6 +212,7 @@ let updatevalue = { serviceId: row_obj.serviceId,
|
||||
goto(data){
|
||||
let URL = this.router.url;
|
||||
console.log(URL,data)
|
||||
localStorage.setItem("servicedetails",JSON.stringify(data))
|
||||
console.log(URL+"/"+data.randStr+"/practitioner")
|
||||
this.router.navigate([URL+"/"+data.randStr+"/practitioner"])
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="d-flex calender-time">
|
||||
<div class="calender">
|
||||
<mat-card class="demo-inline-calendar-card cardCalender">
|
||||
<mat-calendar [(selected)]="selected"></mat-calendar>
|
||||
<mat-calendar [(selected)]="selected"></mat-calendar>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,13 @@ export class SlotBookingDetailsComponent implements OnInit {
|
||||
|
||||
workspace: new FormControl('', [Validators.required]),
|
||||
});
|
||||
console.log(this.local_data, this.selects)
|
||||
|
||||
|
||||
let service = localStorage.getItem("servicedetails")
|
||||
let serviceDetails = JSON.parse(service)
|
||||
console.log(serviceDetails)
|
||||
|
||||
|
||||
// this.form.controls['note'].setValue('Sample')
|
||||
this.form.patchValue(this.local_data)
|
||||
}
|
||||
@ -54,13 +60,14 @@ console.log(this.local_data, this.selects)
|
||||
}
|
||||
var target = event.currentTarget;
|
||||
target.style.backgroundColor = "#0c8f00";
|
||||
console.log(param)
|
||||
this.slot_array.push(param)
|
||||
console.log(this.date,param)
|
||||
this.slot_array.push({date:this.date,slots:param})
|
||||
}
|
||||
|
||||
|
||||
submit(){
|
||||
console.log( this.slot_array)
|
||||
localStorage.setItem("slotData",JSON.stringify(this.slot_array))
|
||||
let URL = this.router.url;
|
||||
console.log(URL)
|
||||
this.router.navigate([URL+"/cus"])
|
||||
|
||||
@ -47,6 +47,7 @@ export class LoginComponent {
|
||||
localStorage.setItem('user_token',res.token);
|
||||
localStorage.setItem('user_role',res.role);
|
||||
localStorage.setItem('email',JSON.stringify(auth))
|
||||
localStorage.setItem('user_id',res.roleId)
|
||||
this.router.navigate(['/home'])
|
||||
}
|
||||
}
|
||||
|
||||
BIN
ng-seed/src/assets/images/profile.jpg
Normal file
BIN
ng-seed/src/assets/images/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Loading…
Reference in New Issue
Block a user