consultants

ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.html

@@ -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>
+

ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.scss

@@ -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;
+  }

ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.spec.ts

@@ -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();
+  });
+});

ng-seed/src/app/appoinment/consultants/consultants-details/consultants-details.component.ts

@@ -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);
+  }
+}

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

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

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

@@ -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 {
   }

ng-seed/src/app/appoinment/consultants/consultants.module.ts

@@ -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,

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

@@ -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;