consultants

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

@@ -9,6 +9,7 @@ import { ServiceListComponent } from './service-list-details/service-list/servic
 import { AddUserListComponent } from './user/add-user-list/add-user-list.component';
 import { UserListComponent } from './user/user-list/user-list.component';
 import {  } from './service-list-details/service-list/service-list.component'
+import { ConsultantsListComponent } from './consultants/consultants-list/consultants-list.component';
 
 
 const routes: Routes = [{
@@ -46,6 +47,10 @@ const routes: Routes = [{
 {
   path: 'services-list',
   component: ServiceListComponent
+},
+{
+  path: 'consultants-list',
+  component: ConsultantsListComponent
 }
 
   

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

@@ -10,6 +10,7 @@ import { DemoMaterialModule } from 'app/shared/demo.module';
 import { MatCardModule } from '@angular/material/card';
 import { ServiceListComponent } from './service-list-details/service-list/service-list.component';
 import { ServiceListModule } from './service-list-details/service-list.module';
+import { ConsultantsModule } from './consultants/consultants.module';
 
 @NgModule({
   declarations: [
@@ -23,7 +24,8 @@ import { ServiceListModule } from './service-list-details/service-list.module';
     AppoinmentsModule,
     CustomersModule,
     CalendarsModule,
-    ServiceListModule
+    ServiceListModule,
+    ConsultantsModule
   ],
   
 })

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

@@ -0,0 +1,44 @@
+<div fxLayout="row wrap" >
+    <div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap" *ngFor="let consultant of consultants">
+        <div class="consultant-list-card">
+           
+            <div class="consultant-content">
+                <div class="pad-wrap d-flex  mb-1">
+                    <div class="consultant-card-cover">
+                        <div>
+                            <div class="text-center consultant-thumb">
+                                <img class="img-responsive img-circle" src="{{consultant.image}}" width="120" height="120" alt="user list image">
+                            </div>
+        
+                        </div>
+                    </div>
+                    <div class="consultant-profile">
+                        <h5 class="text-primary">{{consultant.name}}</h5>
+                        <span class="silk-block mb-1 consultant-span">{{consultant.specialist}}</span><br>
+                        <span class="silk-block mb-1 consultant-span">{{consultant.year}}</span><br>
+                        <span class="silk-block mb-1 consultant-span">{{consultant.qualification}}</span><br>
+                        <span class="silk-block mb-1 consultant-span">Starts at ₹{{consultant.payment}}</span><br>
+                    </div>
+                
+                </div>
+                <span class="d-flex mb-1">
+                    <mat-icon class="mt-1">transcribe</mat-icon>
+                    <span class="consultant-span mt-1 pl-1">{{consultant.language}}</span>
+                 </span>
+                <span class="d-flex mb-1">
+                    <mat-icon>location_on</mat-icon>
+                    <span class="consultant-span  pl-1">{{consultant.city}}</span>
+                 </span>
+                     <div class="align-self-center">
+                        <!-- <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">Booking Appoinment</span>
+            </button>
+                    </div>
+              
+            </div>
+        </div>
+    </div>
+    </div>

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

@@ -0,0 +1,62 @@
+//colors
+$white: #fff;
+$black_10: rgba(0, 0, 0, 0.1);
+$black_30: rgba(0, 0, 0, 0.3);
+// $color_red_orange_approx: #207b68f2;
+$color_red_orange_approx: #4caf50;
+$black_60: rgba(0, 0, 0, 0.6);
+.consultant-content {
+    padding: 1.5rem 1.5rem;
+    padding-bottom: 4rem;
+}
+.consultant-list-card {
+    background: $white;
+    box-shadow: 0 2px 6px $black_10;
+    transition: all 0.3s ease-in-out 0s;
+    &:hover {
+        box-shadow: 0 0 21px $black_30;
+    }
+}
+.consultant-span{
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.54);
+    font-weight: 600;
+    line-height: 23px;
+}
+.consultant-card-cover {
+    padding: 0rem 8rem;
+    position: relative;
+    background-size: cover;
+    margin-left: -8rem;
+}
+.consultant-thumb {
+    position: absolute;
+    margin-top: 20px;
+    img {
+        border: 5px solid $white;
+        border-radius: 100%;
+        height: 75px;
+        width: 75px;
+    }
+}
+.btn-red {
+    background-color: $color_red_orange_approx;
+    color: $white;
+    border: 1px solid $color_red_orange_approx;
+    float: right;
+}
+
+// .user-list-wrapper>.user-card-w {
+//     padding: 1rem;
+// }
+::ng-deep .body-container {
+    // overflow-x: hidden;
+    // overflow-y: hidden;
+    background-color: #ffff;
+}
+.consultant-profile{
+    margin-left: -2rem;
+}
+mat-icon{
+    color: #207b68f2;
+}

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

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

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

@@ -0,0 +1,72 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-consultants-list',
+  templateUrl: './consultants-list.component.html',
+  styleUrls: ['./consultants-list.component.scss']
+})
+export class ConsultantsListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  consultants: Object[] = [{
+    name: 'Dr. Suganya',
+    specialist: 'ENT',
+    year: '1 YRS EXP',
+    qualification: 'MBBS, MS',
+    payment: '800',
+    language: 'TAMIL, ENGILSH',
+    city: 'Apollo Hospital Chennai',
+    country: 'USA',
+    cover:'assets/images/night.jpg',
+    image:'assets/images/face1.jpg'
+  },{
+    name: 'Dr. Indhu Mathi',
+    specialist: 'ORTHOPAEDICS',
+    year: '2 YRS EXP',
+    qualification: 'MBBS, MS',
+    payment: '800',
+    language: 'TAMIL, ENGILSH',
+    city: 'Apollo Hospital Chennai',
+    image:'assets/images/face2.jpg'
+  },{
+    name: 'Dr. Gaurav Kumar',
+    specialist: 'BREAST SURGERY',
+    year: '3 YRS EXP',
+    qualification: 'MBBS, MS',
+    payment: '800',
+    language: 'TAMIL, ENGILSH',
+    city: 'Apollo Hospital Chennai',
+    image:'assets/images/face3.jpg'
+  },{
+    name: 'Dr. Saloni Sinha',
+    specialist: 'CARDIOLOGY',
+    year: '4 YRS EXP',
+    qualification: 'MBBS, MS',
+    payment: '800',
+    language: 'TAMIL, ENGILSH',
+    city: 'Apollo Hospital Chennai',
+    image:'assets/images/face4.jpg'
+  },{
+     name: 'Dr. Padmaja',
+     specialist: 'DIABETOLOGY',
+     year: '5 YRS EXP',
+     qualification: 'MBBS, MS',
+     payment: '800',
+     language: 'TAMIL, ENGILSH',
+     city: 'Apollo Hospital Chennai',
+    image:'assets/images/face5.jpg'
+  },{
+    name: 'Dr. Pradeep ',
+    specialist: 'ENDOCRINOLOGY',
+    year: '6 YRS EXP',
+    qualification: 'MBBS, MS',
+    payment: '800',
+    language: 'TAMIL, ENGILSH',
+    city: 'Apollo Hospital Chennai',
+    image:'assets/images/face6.jpg'
+  }
+];
+}

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ConsultantsRoutingModule { }

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+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';
+
+
+@NgModule({
+  declarations: [
+    ConsultantsListComponent
+  ],
+  imports: [
+    DemoMaterialModule,
+    CommonModule,
+    ConsultantsRoutingModule
+  ]
+})
+export class ConsultantsModule { }

ng-seed/src/app/shared/menu-items/menu-items.ts

@@ -64,6 +64,15 @@ const MENUITEMS : Menu[] = [
       {state: 'customers-list', name: 'Customers List'},
     ]
   },
+  {
+    state: 'appoinment',
+    name: 'Consultants',
+    type: 'sub',
+    icon: 'security',
+    children: [
+      {state: 'consultants-list', name: 'Consultants List'},
+    ]
+  },
   {
     state: 'appoinment',
     name: 'Users',