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

consultants

Browse Source
This commit is contained in:
Smart 2023-03-15 09:53:36 +05:30
parent 085a0ab6db
commit 4a23c57c0e
13 changed files with 266 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,7 +117,7 @@ export class DialogBoxComponent implements OnInit {
console.log(this.local_data, this.selects)
// this.form.controls['note'].setValue('Sample')
this.form.patchValue(this.local_data)
}
}
public myError = (controlName: string, errorName: string) =>{
return this.form.controls[controlName].hasError(errorName);
}

107
ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.html Normal file
View File

@ -0,0 +1,107 @@
<h4>
<button mat-icon-button type="button" matTooltip="Close" class="button" matTooltipPosition="above" (click)="close()"
>
<mat-icon>close</mat-icon>
</button>
</h4>
<h6 class="mb-1">Date & Time: </h6>
<p>{{selected | date:'mediumDate'}}</p>
<div class="d-flex calender-time">
<div class="calender">
<mat-card class="demo-inline-calendar-card">
<mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
</div>
<!-- <h5>Slot Availability</h5> -->
<div class="time">
<mat-tab-group class="">
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/morning.png" class="img">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">9:00AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">9:30AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">10:00AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">10:30AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">11:00AM</button><br>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">11:30AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">12:00AM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">12:30AM</button>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/sun.png" style="width: 33px;">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">01:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">01:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">02:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">02:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">03:00PM</button><br>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">03:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">04:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">04:30PM</button>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/sunset.png" style="width: 40px;">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">05:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">05:50PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">06:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">06:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary ">07:00PM</button><br>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">07:30PM</button>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<a class="toolbar-avatar">
<img src="assets/images/moon.png" style="width: 30px;">
</a>
</ng-template>
<mat-card-content>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 primary">08:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">08:30PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">09:00PM</button>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 primary">09:30PM</button>
</mat-card-content>
</mat-tab>
</mat-tab-group>
<div mat-dialog-content class="my-table">
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="field">
<mat-form-field class="mat-pane">
<mat-select placeholder="Select Workspace" formControlName="workspace" required>
<mat-option>--</mat-option>
<mat-option *ngFor="let business of selects" [value]="business.workspace">
{{business.workspace}}
</mat-option>
</mat-select>
<mat-error *ngIf="workspace.hasError('required')">Please choose an Workspace</mat-error>
<mat-error *ngIf="workspace.hasError('invalidValue')">Please choose any other</mat-error>
</mat-form-field>
</div>
</form>
</div>
</div>
</div>
<div class="success">
<p>I have read and un derstood the Terms & Conditions of usage of 24x7,
Privacy policy, Refund Policy and consent to the same.</p>
</div>
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" >PROCEED</button>

49
ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.scss Normal file
View File

@ -0,0 +1,49 @@
$color_red_orange_approx: #4caf50;
$white: #fff;
.button{
margin-bottom: 1rem;
background-color: #ffff !important;
margin-top: -3rem;
float: right;
}
.calender{
margin-left: -1rem;
padding-right: 6rem;
}
mat-card{
width: 140%;
}
::ng-deep .mat-tab-label {
margin-left: -3rem!important;
}
.img{
width: 50px;
}
.btn-red {
background-color: $color_red_orange_approx;
color: $white;
border: 1px solid $color_red_orange_approx;
float: right;
}
h6{
color: #0087ba;
font-weight: 600;
}
.primary{
background-color: #658F9B;
color: white;
}
::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #658F9B!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {
width: 250%;
}
.success {
background: #fff;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 5px;
color: #0087ba;
font-weight: 600;
border-radius: 10px;
}

25
ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ConsultantsDetailsComponent } from './consultants-details.component';
describe('ConsultantsDetailsComponent', () => {
let component: ConsultantsDetailsComponent;
let fixture: ComponentFixture<ConsultantsDetailsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ConsultantsDetailsComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ConsultantsDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

59
ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.ts Normal file
View File

@ -0,0 +1,59 @@
import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export interface DialogData {
animal: string;
name: string;
}
export interface UsersData {
workspace: string;
}
@Component({
selector: 'app-consultants-details',
templateUrl: './consultants-details.component.html',
styleUrls: ['./consultants-details.component.scss']
})
export class ConsultantsDetailsComponent implements OnInit {
form: FormGroup;
local_data:any;
selected: Date | null;
name = 'Angular';
date = new Date();
control = new FormControl(
{
from: this.date,
// to: new Date(this.date.getTime() + 1 * 24 * 60 * 60 * 1000),
},
Validators.required
);
workspace = new FormControl('', [Validators.required]);
selects = [
{workspace: 'test 1'},
{workspace: 'test 2'},
{workspace: 'test 3'},
];
constructor(
public dialogRef: MatDialogRef<ConsultantsDetailsComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
onNoClick(): void {
this.dialogRef.close();
}
close() {
// console.log(this.form.value);
this.dialogRef.close();
}
ngOnInit(): void {
this.form = new FormGroup({
workspace: new FormControl('', [Validators.required]),
});
console.log(this.local_data, this.selects)
// this.form.controls['note'].setValue('Sample')
this.form.patchValue(this.local_data)
}
submit(){
console.log(this.form.value);
}
}

4
ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.html
View File

@ -39,8 +39,8 @@
<!-- <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" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
<span class="button-text">Book Appoinment</span>
<button type="button" (click)="openDialog()" 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>
</div>

18
ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConsultantsDetailsComponent } from '../consultants-details/consultants-details.component';
@Component({
selector: 'app-consultants-list',
@ -6,8 +8,22 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
styleUrls: ['./consultants-list.component.scss']
})
export class ConsultantsListComponent implements OnInit {
animal: string;
name: string;
constructor() { }
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(ConsultantsDetailsComponent, {
width: '60%',
data: {name: this.name, animal: this.animal}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
}
ngOnInit(): void {
}

6
ng-seed/src/app/appoinment/consultants/consultants.module.ts
View File

@ -4,11 +4,13 @@ import { CommonModule } from '@angular/common';
import { ConsultantsRoutingModule } from './consultants-routing.module';
import { ConsultantsListComponent } from './consultants-list/consultants-list.component';
import { DemoMaterialModule } from 'app/shared/demo.module';
import { NgScrollbarModule } from 'ngx-scrollbar'
import { NgScrollbarModule } from 'ngx-scrollbar';
import { ConsultantsDetailsComponent } from './consultants-details/consultants-details.component';
@NgModule({
declarations: [
ConsultantsListComponent
ConsultantsListComponent,
ConsultantsDetailsComponent,
],
imports: [
DemoMaterialModule,

3
ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss
View File

@ -63,7 +63,8 @@ $black_30: rgba(0, 0, 0, 0.3);
width: 100%;
padding: 0 10px 0 0;
position: relative;
min-height: 80px;
// min-height: 60px;
height: 65px;
}
.mb{
margin-bottom: 0.60rem;

BIN
ng-seed/src/assets/images/moon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
ng-seed/src/assets/images/morning.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
ng-seed/src/assets/images/sun.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
ng-seed/src/assets/images/sunset.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB