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

Merge branch 'master' of bitbucket.org:venbainformationtechnology/appointments_frontend

Browse Source
This commit is contained in:
bitbucket 2023-04-17 13:08:06 +05:30
commit eea59cf123
8 changed files with 465 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ng-seed/src/app/appoinment/business/add-business/add-business.component.html
View File

@ -7,12 +7,14 @@
<div mat-dialog-content class="my-table"> <div mat-dialog-content class="my-table">
<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">
<mat-label>Name</mat-label>
<input placeholder=" Name" matInput formControlName="busName"> <input placeholder=" Name" matInput formControlName="busName">
<mat-error *ngIf="myError('busName', 'required')">Name is required</mat-error> <mat-error *ngIf="myError('busName', 'required')">Name is required</mat-error>
<mat-error *ngIf="myError('busName', 'maxlength')">Limit exceed</mat-error> <mat-error *ngIf="myError('busName', 'maxlength')">Limit exceed</mat-error>
</mat-form-field> </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">
<mat-label>Email</mat-label>
<input type="email" placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email"> <input type="email" placeholder=" Email" matInput [(ngModel)]="local_data.email" formControlName="email">
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)"> <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
Please enter a valid email address Please enter a valid email address
@ -23,6 +25,7 @@
</mat-error> </mat-error>
</mat-form-field> </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">
<mat-label>Phone No</mat-label>
<input placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo"> <input placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
<mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error> <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
<mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No </mat-error> <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No </mat-error>
@ -30,16 +33,19 @@
<mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error> <mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
</mat-form-field> </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">
<mat-label>Address</mat-label>
<input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address"> <input placeholder=" Address" matInput [(ngModel)]="local_data.address" formControlName="address">
<mat-error *ngIf="myError('address', 'required')">Address is required</mat-error> <mat-error *ngIf="myError('address', 'required')">Address is required</mat-error>
<mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error> <mat-error *ngIf="myError('address', 'maxlength')">Limit exceed</mat-error>
</mat-form-field> </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">
<mat-label>State</mat-label>
<input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state"> <input placeholder=" State" matInput [(ngModel)]="local_data.state" formControlName="state">
<mat-error *ngIf="myError('state', 'required')">State is required</mat-error> <mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error> <mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
</mat-form-field> </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">
<mat-label>City</mat-label>
<input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city"> <input placeholder=" City" matInput [(ngModel)]="local_data.city" formControlName="city">
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error> <mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error> <mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>

23
ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.html
View File

@ -81,7 +81,7 @@
<div class="availabilitys"> <div class="availabilitys">
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)"> <form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
<div class="mt-2"> <div class="mt-2">
<div class="field mb-1"> <div class="field mb-2">
<label class="label-container">Staff</label> <label class="label-container">Staff</label>
<input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel"> <input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
</div> </div>
@ -94,24 +94,33 @@
</mat-radio-group> </mat-radio-group>
</section> </section>
</div> --> </div> -->
<div class="field mb-1">
<div class="field mb-2">
<label for="name-field" class="mr2">All-day Availability</label> <label for="name-field" class="mr2">All-day Availability</label>
<!-- <mat-slide-toggle class="toggle" (click)="toggleData()"></mat-slide-toggle> --> <!-- <mat-slide-toggle class="toggle" (click)="toggleData()"></mat-slide-toggle> -->
<label class="switch" > <!-- <label class="switch" >
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" /> <input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
<span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span> <span class="switch-handle"></span>
</label> </label> -->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
<label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div> </div>
<div class="field mb-1"> <div class="field">
<label for="name-field" class="label-container">From</label> <label for="name-field" class="label-container">From</label>
<mat-form-field appearance="outline"class="mate" > <mat-form-field appearance="outline"class="mate" >
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel"> <input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show"> <mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel"> <input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
</mat-form-field> </mat-form-field>
</div> </div>
@ -123,7 +132,7 @@
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show"> <mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel"> <input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
</mat-form-field> </mat-form-field>
</div> </div>

310
ng-seed/src/app/appoinment/consultant-setting/extra-working-hours/extra-working-hours.component.scss
View File

@ -21,6 +21,7 @@
.label-container{ .label-container{
margin-right: 8rem; margin-right: 8rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
// .outline{ // .outline{
// width: 18%; // width: 18%;
@ -28,6 +29,12 @@
.mate{ .mate{
width: 16% !important; width: 16% !important;
} }
.mates{
width: 16% !important;
::ng-deep .mat-form-field-outline {
width: 115%!important;
}
}
.date-marge{ .date-marge{
margin-left: 4.5rem; margin-left: 4.5rem;
} }
@ -38,10 +45,12 @@
.mr-8{ .mr-8{
margin-right: 7rem; margin-right: 7rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
.mr2{ .mr2{
margin-right: 3rem; margin-right: 3rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
.cancel { .cancel {
background: #F5F5F5; background: #F5F5F5;
@ -100,8 +109,8 @@
} }
::ng-deep .mat-icon-button { ::ng-deep .mat-icon-button {
margin-right: -3rem; margin-right: -3rem;
margin-top: -12px; // margin-top: -12px;
padding-top: 10px; // padding-top: 10px;
} }
::ng-deep .mat-slide-toggle-bar { ::ng-deep .mat-slide-toggle-bar {
width: 50px; width: 50px;
@ -116,6 +125,7 @@
.container-to{ .container-to{
margin-right: 9rem; margin-right: 9rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0em 0 1em 0; padding: 0em 0 1em 0;
@ -146,115 +156,199 @@
margin-left: 6rem; margin-left: 6rem;
} }
.time-align{ .time-align{
padding-top: 10px!important; padding-top: 10px !important;
font-size: 20px;
padding-left: 10px;
} }
//switch //switch
.switch { // .switch {
position: relative; // position: relative;
display: block; // display: block;
// vertical-align: top; // // vertical-align: top;
width: 100px; // width: 100px;
height: 30px; // height: 30px;
padding: 3px; // padding: 3px;
margin: 0 10px 10px 0; // margin: 0 10px 10px 0;
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px); // // background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px); // // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px; // border-radius: 18px;
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); // // box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer; // cursor: pointer;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-input { // .switch-input {
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
opacity: 0; // opacity: 0;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-label { // .switch-label {
position: relative; // position: relative;
display: block; // display: block;
height: inherit; // height: inherit;
font-size: 10px; // font-size: 10px;
text-transform: uppercase; // text-transform: uppercase;
// background: #eceeef; // // background: #eceeef;
border-radius: inherit; // border-radius: inherit;
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); // // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
border: 1px solid #4CAE4C; // border: 1px solid #4CAE4C;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-label:before, .switch-label:after { // .switch-label:before, .switch-label:after {
position: absolute; // position: absolute;
top: 50%; // top: 50%;
margin-top: -.5em; // margin-top: -.5em;
line-height: 1; // line-height: 1;
-webkit-transition: inherit; // -webkit-transition: inherit;
-moz-transition: inherit; // -moz-transition: inherit;
-o-transition: inherit; // -o-transition: inherit;
transition: inherit; // transition: inherit;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-label:before { // .switch-label:before {
// content: attr(data-off); // // content: attr(data-off);
content: 'enable'; // content: 'enable';
right: 11px; // right: 11px;
color: #111111; // color: #111111;
// text-shadow: 0 1px rgba(255, 255, 255, 0.5); // // text-shadow: 0 1px rgba(255, 255, 255, 0.5);
} // }
.switch-label:after { // .switch-label:after {
// content: attr(data-on); // // content: attr(data-on);
content: 'disable '; // content: 'disable ';
left: 11px; // left: 11px;
color: #111111; // color: #111111;
// text-shadow: 0 1px rgba(0, 0, 0, 0.2); // // text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0; // opacity: 0;
} // }
.switch-input:checked ~ .switch-label { // .switch-input:checked ~ .switch-label {
background: #FFFFFF; // background: #FFFFFF;
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); // // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
} // }
.switch-input:checked ~ .switch-label:before { // .switch-input:checked ~ .switch-label:before {
opacity: 0; // opacity: 0;
} // }
.switch-input:checked ~ .switch-label:after { // .switch-input:checked ~ .switch-label:after {
opacity: 1; // opacity: 1;
} // }
.switch-handle { // .switch-handle {
position: absolute; // position: absolute;
top: 4px; // top: 4px;
left: 4px; // left: 4px;
width: 28px; // width: 28px;
height: 28px; // height: 28px;
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0); // // background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0); // background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%; // border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); // box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
} // }
.switch-handle:before { // .switch-handle:before {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 50%; // left: 50%;
margin: -6px 0 0 -6px; // margin: -6px 0 0 -6px;
width: 12px; // width: 12px;
height: 12px; // height: 12px;
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF); // // background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF); // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px; // border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); // box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
} // }
.switch-input:checked ~ .switch-handle { // .switch-input:checked ~ .switch-handle {
left: 74px; // left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); // box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
} // }
/* Transition // /* Transition
========================== */ // ========================== */
.switch-label, .switch-handle { // .switch-label, .switch-handle {
transition: All 0.3s ease; // transition: All 0.3s ease;
-webkit-transition: All 0.3s ease; // -webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease; // -moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease; // -o-transition: All 0.3s ease;
// }
.onoffswitch {
position: relative;
width: 135px;
// -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
// border: 2px solid #4CAE4C;
border-radius: 20px;
// box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
// transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 12px;
color: white;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: " Enable";
padding-left: 10px;
background-color: #FFFFFF; color: #4C4C4C;
border: 1px solid #4CAE4C;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
// box-shadow: 0 0 10px rgb(82 81 144 / 38%);
}
.onoffswitch-inner:after {
content: "Disable";
padding-right: 10px;
background-color: #FFFFFF; color: #4C4C4C;;
text-align: right;
border: 1px solid #999999;
// border: 1px solid #DDD;
border-radius: 50px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
// box-shadow: 0 0 10px rgb(82 81 144 / 38%);
}
.onoffswitch-switch {
display: block;
width: 25px;
margin: 2px;
background: #999999;
position: absolute; top: 0; bottom: 0;
right: 105px;
// border: 1px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
// .onoffswitch-switch:after {
// display: block;
// background: #999999!important;
// }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
// border: 1px solid #999999;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background: #4CAE4C;
// border: 1px solid #999999;
} }

17
ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.html
View File

@ -26,21 +26,28 @@
</div> </div>
<div class="field mb-1"> <div class="field mb-1">
<label for="name-field" class="mr2">All-day Availability</label> <label for="name-field" class="mr2">All-day Availability</label>
<label class="switch" > <!-- <label class="switch" >
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" /> <input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
<span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span> <span class="switch-handle"></span>
</label> </label> -->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
<label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div> </div>
<div class="field mb-1"> <div class="field">
<label for="name-field" class="label-container">From</label> <label for="name-field" class="label-container">From</label>
<mat-form-field appearance="outline"class="mate" > <mat-form-field appearance="outline"class="mate" >
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel"> <input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show"> <mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel"> <input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
</mat-form-field> </mat-form-field>
</div> </div>
@ -52,7 +59,7 @@
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show"> <mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel"> <input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
</mat-form-field> </mat-form-field>
</div> </div>

318
ng-seed/src/app/appoinment/consultant-setting/unavailability/unavailability.component.scss
View File

@ -21,6 +21,7 @@
.label-container{ .label-container{
margin-right: 8rem; margin-right: 8rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
// .outline{ // .outline{
// width: 18%; // width: 18%;
@ -28,6 +29,12 @@
.mate{ .mate{
width: 16% !important; width: 16% !important;
} }
.mates{
width: 16% !important;
::ng-deep .mat-form-field-outline {
width: 115%!important;
}
}
.date-marge{ .date-marge{
margin-left: 4.5rem; margin-left: 4.5rem;
} }
@ -38,10 +45,12 @@
.mr-8{ .mr-8{
margin-right: 7rem; margin-right: 7rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
.mr2{ .mr2{
margin-right: 3rem; margin-right: 3rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
.cancel { .cancel {
background: #F5F5F5; background: #F5F5F5;
@ -100,23 +109,23 @@
} }
::ng-deep .mat-icon-button { ::ng-deep .mat-icon-button {
margin-right: -3rem; margin-right: -3rem;
margin-top: -12px; // margin-top: -12px;
padding-top: 10px; // padding-top: 10px;
}
::ng-deep .mat-slide-toggle-bar {
width: 50px;
height: 20px;
} }
// ::ng-deep .mat-slide-toggle-bar {
// border-radius: 20px!important ;
// width: 80px!important;
// height: 35px!important;
// }
.form-control{ .form-control{
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
// border: 1px solid #666;
border: 1px solid rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.12);
} }
.container-to{ .container-to{
margin-right: 9rem; margin-right: 9rem;
margin-left: 1.5rem; margin-left: 1.5rem;
color: #666;
} }
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0em 0 1em 0; padding: 0em 0 1em 0;
@ -125,7 +134,7 @@
display: flex; display: flex;
} }
.popup-button{ .popup-button{
margin-top: 3rem; margin-top: 7rem;
} }
.example-h2 { .example-h2 {
margin: 10px; margin: 10px;
@ -142,120 +151,199 @@
.example-margin { .example-margin {
margin: 0 10px!important; margin: 0 10px!important;
margin-left: 25px!important; margin-left: 25px!important;
color: #666;
} }
.mat-radio{ .mat-radio{
margin-left: 6rem; margin-left: 6rem;
} }
.time-align{ .time-align{
padding-top: 10px!important; padding-top: 10px !important;
font-size: 20px;
padding-left: 10px;
} }
//switch //switch
.switch { // .switch {
position: relative; // position: relative;
display: block; // display: block;
// vertical-align: top; // // vertical-align: top;
width: 100px; // width: 100px;
height: 30px; // height: 30px;
padding: 3px; // padding: 3px;
margin: 0 10px 10px 0; // margin: 0 10px 10px 0;
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px); // // background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px); // // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px; // border-radius: 18px;
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); // // box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer; // cursor: pointer;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-input { // .switch-input {
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
opacity: 0; // opacity: 0;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-label { // .switch-label {
position: relative; // position: relative;
display: block; // display: block;
height: inherit; // height: inherit;
font-size: 10px; // font-size: 10px;
text-transform: uppercase; // text-transform: uppercase;
// background: #eceeef; // // background: #eceeef;
border-radius: inherit; // border-radius: inherit;
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); // // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
border: 1px solid #4CAE4C; // border: 1px solid #4CAE4C;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-label:before, .switch-label:after { // .switch-label:before, .switch-label:after {
position: absolute; // position: absolute;
top: 50%; // top: 50%;
margin-top: -.5em; // margin-top: -.5em;
line-height: 1; // line-height: 1;
-webkit-transition: inherit; // -webkit-transition: inherit;
-moz-transition: inherit; // -moz-transition: inherit;
-o-transition: inherit; // -o-transition: inherit;
transition: inherit; // transition: inherit;
box-sizing:content-box; // box-sizing:content-box;
} // }
.switch-label:before { // .switch-label:before {
// content: attr(data-off); // // content: attr(data-off);
content: 'enable'; // content: 'enable';
right: 11px; // right: 11px;
color: #111111; // color: #111111;
// text-shadow: 0 1px rgba(255, 255, 255, 0.5); // // text-shadow: 0 1px rgba(255, 255, 255, 0.5);
} // }
.switch-label:after { // .switch-label:after {
// content: attr(data-on); // // content: attr(data-on);
content: 'disable '; // content: 'disable ';
left: 11px; // left: 11px;
color: #111111; // color: #111111;
// text-shadow: 0 1px rgba(0, 0, 0, 0.2); // // text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0; // opacity: 0;
} // }
.switch-input:checked ~ .switch-label { // .switch-input:checked ~ .switch-label {
background: #FFFFFF; // background: #FFFFFF;
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); // // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
} // }
.switch-input:checked ~ .switch-label:before { // .switch-input:checked ~ .switch-label:before {
opacity: 0; // opacity: 0;
} // }
.switch-input:checked ~ .switch-label:after { // .switch-input:checked ~ .switch-label:after {
opacity: 1; // opacity: 1;
} // }
.switch-handle { // .switch-handle {
position: absolute; // position: absolute;
top: 4px; // top: 4px;
left: 4px; // left: 4px;
width: 28px; // width: 28px;
height: 28px; // height: 28px;
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0); // // background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0); // background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%; // border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); // box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
} // }
.switch-handle:before { // .switch-handle:before {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 50%; // top: 50%;
left: 50%; // left: 50%;
margin: -6px 0 0 -6px; // margin: -6px 0 0 -6px;
width: 12px; // width: 12px;
height: 12px; // height: 12px;
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF); // // background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF); // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px; // border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); // box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
} // }
.switch-input:checked ~ .switch-handle { // .switch-input:checked ~ .switch-handle {
left: 74px; // left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); // box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
} // }
/* Transition // /* Transition
========================== */ // ========================== */
.switch-label, .switch-handle { // .switch-label, .switch-handle {
transition: All 0.3s ease; // transition: All 0.3s ease;
-webkit-transition: All 0.3s ease; // -webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease; // -moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease; // -o-transition: All 0.3s ease;
// }
.onoffswitch {
position: relative;
width: 135px;
// -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
// border: 2px solid #4CAE4C;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
// transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 12px;
color: white;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: " Enable";
padding-left: 10px;
background-color: #FFFFFF; color: #4C4C4C;
border: 1px solid #4CAE4C;
border-radius: 50px;
}
.onoffswitch-inner:after {
content: "Disable";
padding-right: 10px;
background-color: #FFFFFF; color: #4C4C4C;;
text-align: right;
border: 1px solid #999999;
border-radius: 50px;
}
.onoffswitch-switch {
display: block;
width: 25px;
margin: 2px;
background: #999999;
position: absolute; top: 0; bottom: 0;
right: 105px;
// border: 1px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
// .onoffswitch-switch:after {
// display: block;
// background: #999999!important;
// }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
// border: 1px solid #999999;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background: #4CAE4C;
// border: 1px solid #999999;
} }

16
ng-seed/src/app/appoinment/user/add-user/add-user.component.html
View File

@ -58,12 +58,24 @@
<mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error> <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
<mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error> <mat-error *ngIf="myError('contactNo', 'maxlength')">Limit exceed</mat-error>
</mat-form-field> </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">
<mat-label>Password</mat-label> <mat-label>Password</mat-label>
<input placeholder="Password" matInput formControlName="password"> <input placeholder="Password" matInput formControlName="password">
<mat-error *ngIf="myError('password', 'required')">Password is required</mat-error> <mat-error *ngIf="myError('password', 'required')">Password is required</mat-error>
<mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error> <mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
</mat-form-field> </mat-form-field> -->
<mat-form-field appearance="outline" class="mat-pane user-mate">
<mat-label>Password</mat-label>
<input matInput type="password" placeholder="Password" formControlName="password" [type]="hide ? 'password' : 'text'" name="password">
<mat-error *ngIf="!form.get('password')?.errors?.required">
Password length must be greater than or equal to 8 and password must contain one or more uppercase ,
lowercase , numeric and special characters
</mat-error>
<mat-error *ngIf="form.get('password')?.invalid && (form.get('password')?.dirty || form.get('password')?.touched) && form.get('password')?.errors?.required">
Password is required
</mat-error>
</mat-form-field>
<img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/> <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
<img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/> <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>

8
ng-seed/src/app/appoinment/user/add-user/add-user.component.scss
View File

@ -59,4 +59,12 @@ input[type=file]::file-selector-button {
.imgSizeValidation{ .imgSizeValidation{
color: red; color: red;
font-family: ui-serif; font-family: ui-serif;
}
.user-mate{
::ng-deep .mat-form-field-subscript-wrapper {
position: inherit!important;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
} }

5
ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
View File

@ -58,7 +58,10 @@ export class AddUserComponent implements OnInit {
email: new FormControl('', [Validators.required, Validators.email,Validators.pattern( email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$', '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
),]), ),]),
password: new FormControl('', [Validators.required, Validators.minLength(6)]), // password: new FormControl('', [Validators.required, Validators.minLength(6)]),
password: new FormControl('', [Validators.required,Validators.pattern(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$'
)]),
logo: new FormControl('', null), logo: new FormControl('', null),
// confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]), // confirmPassword: new FormControl('', [Validators.required, Validators.minLength(6)]),
createdBy:new FormControl(userrole,null), createdBy:new FormControl(userrole,null),