consultant-setting
This commit is contained in:
Smart
parent
4307745647
commit
5e070331f6
@ -9,7 +9,7 @@
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div mat-dialog-content class="my-table">
|
||||
<form [formGroup]="form" (ngSubmit)="submit()">
|
||||
<div class="field">
|
||||
<!-- <div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Workspace
|
||||
</label>
|
||||
@ -23,7 +23,7 @@
|
||||
<mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error>
|
||||
<mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">
|
||||
Service
|
||||
|
||||
@ -6,7 +6,7 @@ export interface UsersData {
|
||||
// id: number;
|
||||
appoinmentTime: string;
|
||||
booking: string;
|
||||
workspace: string;
|
||||
// workspace: string;
|
||||
service: string;
|
||||
staff: string;
|
||||
customer: string;
|
||||
|
||||
@ -41,11 +41,11 @@
|
||||
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
|
||||
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<!-- <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
|
||||
<input placeholder="Working Hrs" matInput formControlName="workingHrsJson">
|
||||
<mat-error *ngIf="myError('workingHrsJson', 'required')">Working Hrs is required</mat-error>
|
||||
<mat-error *ngIf="myError('workingHrsJson', 'maxlength')">Limit exceed</mat-error>
|
||||
</mat-form-field>
|
||||
</mat-form-field> -->
|
||||
<img class="image mb-2" [src]="url" height="50">
|
||||
<input type='file' (change)="onSelectFile($event)" formControlName="logo">
|
||||
|
||||
|
||||
@ -48,7 +48,7 @@ export class DialogBoxComponent implements OnInit {
|
||||
}
|
||||
ngOnInit() {
|
||||
this.form = new FormGroup({
|
||||
workingHrsJson: new FormControl('', [Validators.required]),
|
||||
// workingHrsJson: new FormControl('', [Validators.required]),
|
||||
logo: new FormControl('', null),
|
||||
busName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
|
||||
address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
|
||||
|
||||
@ -5,11 +5,13 @@ import { ConsultantSettingRoutingModule } from './consultant-setting-routing.mod
|
||||
import { ConsultantSettingComponent } from './consultant-setting/consultant-setting.component';
|
||||
import { DemoMaterialModule } from 'app/shared/demo.module';
|
||||
import { NgScrollbarModule } from 'ngx-scrollbar';
|
||||
import { EditWorkingHoursComponent } from './edit-working-hours/edit-working-hours.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ConsultantSettingComponent
|
||||
ConsultantSettingComponent,
|
||||
EditWorkingHoursComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
|
||||
@ -1 +1,241 @@
|
||||
<p>consultant-setting works!</p>
|
||||
<mat-tab-group [@.disabled]="true">
|
||||
<div class="mb-1 label-hgt">
|
||||
<img src="assets/images/userpic.jpg" width="100" height="100" alt="" class="radius-circle">
|
||||
</div>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<i class="material-icons"></i> Staff Information
|
||||
</ng-template>
|
||||
<div class="staff">
|
||||
<span class="staff-title">
|
||||
Set Up Staff Profile
|
||||
</span>
|
||||
</div>
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<div mat-dialog-content class="my-table" >
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ng-scrollbar>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<i class="material-icons"></i> Working Hours
|
||||
</ng-template>
|
||||
<div class="staff">
|
||||
<span class="staff-title">
|
||||
Working Hours
|
||||
</span>
|
||||
<button mat-button class="button">Edit</button>
|
||||
</div>
|
||||
<div class="working-hours">
|
||||
<ng-scrollbar class="scrollHV">
|
||||
<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>
|
||||
</div>
|
||||
<div class="alert">
|
||||
<span class="closebtn">× sample follows customized working hours in (GMT +05:30) India Standard Time (Asia/Kolkata).</span>
|
||||
</div>
|
||||
<div class="timing-container">
|
||||
<div class="timing">
|
||||
<span class="dis-flex">
|
||||
<i class="material-icons"></i> <span class="clock">Sunday</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="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="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>10:00 am</span>
|
||||
</div>
|
||||
<span class="hyphen">-</span>
|
||||
<div class="dis-flex">
|
||||
<span>01:00 pm</span>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
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>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
Staff Booking URL
|
||||
</ng-template>
|
||||
<div class="staff">
|
||||
<span class="staff-title">
|
||||
Share Booking Page
|
||||
</span>
|
||||
</div>
|
||||
<div class="booking-url">
|
||||
<p class="booking-para">Here's your personal booking page. Edit and share this link with customers so they can book your Services directly.</p>
|
||||
<span class="underline-title full-width">Default booking domain</span>
|
||||
</div>
|
||||
<div class="boxmiddle fl boxsize mt20">
|
||||
<div class="booking-urls">
|
||||
<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">
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
@ -0,0 +1,327 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-tab-labels {
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
mat-tab-group {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-tab-body-wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
mat-tab-body {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:host ::ng-deep mat-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host ::ng-deep.mat-tab-label.mat-tab-label-active {
|
||||
background-color: transparent;
|
||||
// color: red;
|
||||
// background-color: #eee;
|
||||
// border-right: 2px solid red;
|
||||
}
|
||||
|
||||
:host ::ng-deep.mat-tab-label {
|
||||
background-color: transparent;
|
||||
/* background-color: lightgray; */
|
||||
}
|
||||
|
||||
.staff{
|
||||
display: flex;
|
||||
background-color: #FAFAFA;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
height: 63px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.staff-title{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 19px;
|
||||
color: #4C4C4C;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
form{
|
||||
padding: 2rem;
|
||||
}
|
||||
.line{
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.form-group{
|
||||
padding-bottom: 2rem;
|
||||
display: flex;
|
||||
}
|
||||
input{
|
||||
border: none;
|
||||
// border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
input:focus {
|
||||
outline:none;
|
||||
}
|
||||
.label-container{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
label{
|
||||
color: #666;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
width: 155px;
|
||||
flex: none;
|
||||
margin-right: 15px;
|
||||
align-self: flex-start;
|
||||
padding-top: 13px;
|
||||
box-sizing: border-box;
|
||||
line-height: 15px;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 190px);
|
||||
}
|
||||
.booking-url{
|
||||
width: 100%;
|
||||
// height: calc(100% - 63px);
|
||||
overflow: auto;
|
||||
padding: 20px 35px;
|
||||
}
|
||||
.booking-para{
|
||||
font-size: 14px;
|
||||
color: #666!important;
|
||||
line-height: 21px;
|
||||
}
|
||||
.underline-title{
|
||||
color: #666!important;
|
||||
font-size: 16px;
|
||||
margin-top: 1px;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
padding: 0 0 15px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
}
|
||||
.full-width{
|
||||
width: 90%!important;
|
||||
position: absolute;
|
||||
}
|
||||
.underline-title:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 41px;
|
||||
height: 1px;
|
||||
background-color: #50477E;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
}
|
||||
.dis-flex {
|
||||
display: flex!important;
|
||||
}
|
||||
.url {
|
||||
width: calc(100% - 172px);
|
||||
margin-top: 0;
|
||||
}
|
||||
.customize-link {
|
||||
font-size: 15px;
|
||||
text-decoration: underline;
|
||||
margin-top: 13px;
|
||||
font-family: zohopuvi-medium;
|
||||
color: #666;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.url-button {
|
||||
height: 41px;
|
||||
margin: 2px 2px 0 0;
|
||||
width: auto;
|
||||
min-width: 90px;
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.copy-button {
|
||||
background: #625A92;
|
||||
border: 1px solid #625A92;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
color: #FFF;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.boxmiddle {
|
||||
width: 91%;
|
||||
background: #F7F8F9;
|
||||
height: 45px;
|
||||
border: 1px solid #E7E7E7;
|
||||
border-radius: 3px;
|
||||
margin: 30px 10px 12px 38px;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.booking-url-input {
|
||||
color: #567FC2;
|
||||
font-family: zohopuvi-regular;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
background: #F9F9F9;
|
||||
font-size: 13px;
|
||||
padding: 15px 10px 13px;
|
||||
}
|
||||
::ng-deep .mat-form-field-infix {
|
||||
height: 50px!important;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
|
||||
margin-top: 10px!important;
|
||||
}
|
||||
.mat-card{
|
||||
background-color: #FFF;
|
||||
min-height: 80px;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
position: relative;
|
||||
margin: 30px 25px 30px 30px;
|
||||
display: flex;
|
||||
.mat-nav-list .mat-list-item:hover{
|
||||
background: none;
|
||||
}
|
||||
.name{
|
||||
font-size: 15px;
|
||||
color: #111;
|
||||
}
|
||||
.time-amount{
|
||||
color: #5B6572!important;
|
||||
font-size: 13px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.Customize{
|
||||
color: #567FC2!important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
.mat-name{
|
||||
font-size: 14px;
|
||||
color: #5B6572!important;
|
||||
padding-top: 3rem;
|
||||
padding-right: 8rem;
|
||||
padding-left: 8rem;
|
||||
}
|
||||
.mat-status{
|
||||
font-size: 14px;
|
||||
color: green!important;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
.button{
|
||||
float: right;
|
||||
background-color: #4caf50;
|
||||
color: #ffff;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.working-hours{
|
||||
margin: 30px 25px 30px 30px;
|
||||
.toggle{
|
||||
padding-left: 5px;
|
||||
}
|
||||
.alert{
|
||||
padding: 20px;
|
||||
background-color: #F4FBFF;
|
||||
border-color: #D0F6FF;
|
||||
color: #5F5F5F;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.closebtn {
|
||||
margin-left: 15px;
|
||||
color: #5F5F5F;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hours{
|
||||
margin-left: -2rem;
|
||||
}
|
||||
.timing-container{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #F5F6F8;
|
||||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
padding: 7px 0;
|
||||
}
|
||||
.timing{
|
||||
color: #666;
|
||||
position: relative;
|
||||
text-transform: capitalize;
|
||||
width: 155px;
|
||||
flex: none;
|
||||
margin-right: 15px;
|
||||
align-self: flex-start;
|
||||
padding-top: 13px;
|
||||
box-sizing: border-box;
|
||||
line-height: 15px;
|
||||
}
|
||||
.dis-flex{
|
||||
display: flex!important;
|
||||
}
|
||||
.hyphen {
|
||||
padding: 0px 60px 0px 60px;
|
||||
color: #999;
|
||||
}
|
||||
.clock{
|
||||
margin-top: 6px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.scrollHV {
|
||||
height: calc(100vh - 190px);
|
||||
}
|
||||
.add-button{
|
||||
border: 1px solid #50497F;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #50497F;
|
||||
background-color: #FFF;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
.mat-tab-body-content {
|
||||
height: 100%;
|
||||
overflow: hidden!important;
|
||||
}
|
||||
.para{
|
||||
font-size: 15px;
|
||||
color: #5B6572!important;
|
||||
}
|
||||
.margin{
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,15 +1,51 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-consultant-setting',
|
||||
templateUrl: './consultant-setting.component.html',
|
||||
styleUrls: ['./consultant-setting.component.css']
|
||||
styleUrls: ['./consultant-setting.component.scss']
|
||||
})
|
||||
export class ConsultantSettingComponent implements OnInit {
|
||||
registerForm: FormGroup;
|
||||
submitted = false;
|
||||
selected = 'Assign New Services';
|
||||
messages: Object[] = [{
|
||||
photo: 'assets/images/face1.jpg',
|
||||
name: 'Sample',
|
||||
time: '30 mins ',
|
||||
amount: '10 ',
|
||||
username: 'Sample',
|
||||
status: 'Active',
|
||||
},
|
||||
];
|
||||
constructor(private formBuilder: FormBuilder) {}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.registerForm = this.formBuilder.group({
|
||||
name: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
contact: ['', Validators.required],
|
||||
workspace: ['', Validators.required],
|
||||
role: ['', Validators.required],
|
||||
designation: ['', Validators.required],
|
||||
birth: ['', Validators.required],
|
||||
gender: ['', Validators.required],
|
||||
status: ['', Validators.required],
|
||||
information: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
get f() {
|
||||
return this.registerForm.controls;
|
||||
}
|
||||
onSubmit() {
|
||||
this.submitted = true;
|
||||
if (this.registerForm.invalid) {
|
||||
return;
|
||||
}
|
||||
console.log(JSON.stringify(this.registerForm.value, null, 2));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<p>edit-working-hours works!</p>
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditWorkingHoursComponent } from './edit-working-hours.component';
|
||||
|
||||
describe('EditWorkingHoursComponent', () => {
|
||||
let component: EditWorkingHoursComponent;
|
||||
let fixture: ComponentFixture<EditWorkingHoursComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ EditWorkingHoursComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditWorkingHoursComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-working-hours',
|
||||
templateUrl: './edit-working-hours.component.html',
|
||||
styleUrls: ['./edit-working-hours.component.scss']
|
||||
})
|
||||
export class EditWorkingHoursComponent implements OnInit {
|
||||
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user