> Java Fullstack Developer - Angular 9 Hands-on Solutions - TECH UPDATE

Java Fullstack Developer - Angular 9 Hands-on Solutions

 Java Fullstack Developer - Angular 9

The Course Id is 63428



1. all-patients-list.component.html


<app-header></app-header>

<div class="table-div">

  <table class="table-class">

    <thead>

      <tr class="table-head">

        <th>Patient ID</th>

        <th>FirstName</th>

        <th>LastName</th>

        <th>Gender</th>

        <th>DOB(yyyy-MM-dd)</th>

        <th>Mobile</th>

        <th>Email</th>

        <th>Registered on</th>

        <th>Update</th>

      </tr>

    </thead>

    <tbody>

      <!-- display all patients list -->

      <tr *ngFor="let item of allPatients" id="table-row">

        <td id="table-id">{{item.id}}</td>

        <td id="table-firstname" class="td-column">{{item.firstName}}</td>

        <td id="table-lastname">{{item.lastName}}</td>

        <td id="table-gender">{{item.gender}}</td>

        <td id="table-dob">{{item.dob}}</td>

        <td id="table-mobile">{{item.mobile}}</td>

        <td id="table-email">{{item.email}}</td>

        <td id="table-registeredOn">{{item.registeredTime| date: 'dd/MM/yyyy hh:mm:ss'}}</td>

        <td class="column-btn">

          <!--call view method with selected id when clicking this button-->

          <a id="view" class="view-details" (click)="view(item.id)">View Details</a>

        </td>

      </tr>

    </tbody>

  </table>

</div>



2.all-patients-list.component.ts


import { Component, OnInit } from '@angular/core';

import { Router } from '@angular/router';

import { Patient } from '../../models/patient';

import { DataService } from '../../services/data.service';

import { ActivatedRoute, RouterLinkActive } from '@angular/router';


@Component({

  selector: 'app-all-patients-list',

  templateUrl: './all-patients-list.component.html',

  styleUrls: ['./all-patients-list.component.css']

})

export class AllPatientsListComponent implements OnInit {


  allPatients: Patient[] = [];

  patient: Patient = null;

  constructor(private route: Router, private dataService: DataService) { }


  ngOnInit() {


    // get all patients list from service

    this.dataService.getAllPatientsList()

      .subscribe(data => {

        this.allPatients = data;

      });

  }


  view(patientId: number) {


    // should navigate to 'patientList' page with selected patientId

    this.route.navigate(['patientList', patientId]);

  }

}


3. all-requested-appointments.component.html


<app-header></app-header>

<div class="table-container">

  <table *ngIf="allAppointments" class="table-class">

    <thead>

      <tr class="table-head">

        <th>Appointment id</th>

        <th>Patient id</th>

        <th>Patient name</th>

        <th>Disease</th>

        <th>Priority</th>

        <th>Tentative date</th>

        <th>Requested on</th>

        <th>Update</th>

      </tr>

    </thead>

    <tbody>

      <!--display all appointments -->

      <tr *ngFor="let item of allAppointments" id="table-row">

        <td id="app-id">{{item.id}}</td>

        <td id="patient-id">{{item.patientId}}</td>

        <td id="patient-name">{{item.patientFirstName}} {{item.patientLastName}}</td>

        <td id="table-disease" class="td-column">{{item.disease}}</td>

        <td id="table-priority">{{item.priority}}</td>

        <td id="table-tentativedate">{{item.tentativedate| date: 'dd/MM/yyyy'}}</td>

        <td id="table-requestedOn">{{item.registeredTime| date: 'dd/MM/yyyy hh:mm:ss'}}</td>

        <td>

          <!--call view method with selected patient id when clicking this tag-->

          <a id="view" class="view-details" (click)="view(item.patientId)">View Details</a>

          <!-- call cancelAppointment method with selected appointment id when clicking on this button-->

          <button id="reject" class="btn btn-danger btn-value" (click)="cancelAppointment(item.id)">Cancel

            Appointment

          </button>

        </td>

      </tr>

    </tbody>

  </table>

</div>


4. all-requested-appointments.component.ts


import { Component, OnInit } from '@angular/core';

import { DataService } from '../../services/data.service';

import { Router } from '@angular/router';

import { Appointment } from '../../models/appointment';


@Component({

  selector: 'app-all-requested-appointments',

  templateUrl: './all-requested-appointments.component.html',

  styleUrls: ['./all-requested-appointments.component.css']

})

export class AllRequestedAppointmentsComponent implements OnInit {


  allAppointments: Appointment[] = [];


  constructor(private dataService: DataService, private route: Router) {

  }


  ngOnInit() {

    // call appointments method by default

    this.appointments();

  }


  appointments() {


    // get all requested appointments from service

    this.dataService.requestedAppointments().subscribe(data => {

      this.allAppointments = data;

    })

  }


  view(patientId) {


    // should navigate to 'patientList' page with selected patientId

    // this.route.navigate(['patientlist', patientId]);

    this.route.navigate(['patientList', patientId]);


  }


  cancelAppointment(id) {


    // delete selected appointment uing service

    this.dataService.deleteAppointment(id).subscribe(data => {

      console.log(data);

      this.appointments();

    });

    // After deleting the appointment, get all requested appointments



  }


}


5.form.component.html


<!-- Write necessary code-->

<app-header></app-header>


<div id="form-container">

  <div class="form">

    <div class="form-content">

      <div class="col-sm-12 ">

        <div class="col-sm-8 div-header">

          <h2 class="header">Enter Patient details</h2>

        </div>


      </div>


      <!-- call submitForm method with all form values if form is valid -->

      <form [formGroup]="complexForm" (ngSubmit)="submitForm()">


        <div class="form-group">

          <label class="label-name">

            First Name:<span class="required">*</span>

          </label>

          <input id="firstname" class="form-control text-box" type="text" placeholder="FIRSTNAME"

            formControlName="firstName">

          <ng-container *ngIf="

                            complexForm.get('firstName').invalid &&

                            (complexForm.get('firstName').dirty ||

                                complexForm.get('firstName').touched)

                        ">

            <div *ngIf="complexForm.get('firstName').errors?.required" id="error-no-firstname"

              class="alert alert-danger error-msg">

              {{emptyFirstname}}

            </div>

            <div *ngIf="complexForm.get('firstName').errors?.minlength" id="error-minlength-firstname"

              class="alert alert-danger error-msg">

              {{minlengthFirstname}}

            </div>

            <div *ngIf="complexForm.get('firstName').errors?.maxlength" id="error-maxlength-firstname"

              class="alert alert-danger error-msg">

              {{maxlengthFirstname}}

            </div>

          </ng-container>

        </div>


        <div class="form-group">

          <label class="label-name">Last Name:

            <span class="required">*</span>

          </label>

          <input id="lastname" class="form-control text-box" type="text" placeholder="LASTNAME"

            formControlName="lastName">

          <ng-container *ngIf="

                            complexForm.get('lastName').invalid &&

                            (complexForm.get('lastName').dirty ||

                                complexForm.get('lastName').touched)

                        ">

            <div *ngIf="complexForm.get('lastName').errors?.required" id="error-no-lastname"

              class="alert alert-danger error-msg">

              {{emptyLastname}}

            </div>

            <div *ngIf="complexForm.get('lastName').errors?.minlength" id="error-minlength-lastname"

              class="alert alert-danger error-msg">

              {{minlengthLastname}}

            </div>

            <div *ngIf="complexForm.get('lastName').errors?.maxlength" id="error-maxlength-lastname"

              class="alert alert-danger error-msg">

              {{maxlengthLastname}}

            </div>

          </ng-container>

        </div>


        <div class="form-group">

          <label class="label-name">Gender:

            <span class="required">*</span>

          </label>

          <div class="input-div">

            <input type="radio" id="male" class="input-content" value="Male" formControlName="gender">

            <label class="label-content" for="male">Male</label>

            <input type="radio" id="female" class="input-content" value="Female" formControlName="gender">

            <label class="label-content" for="female">Female</label>

          </div>

          <ng-container *ngIf=" complexForm.get('lastName').invalid &&

                                                                    (complexForm.get('lastName').dirty ||

                                                                        complexForm.get('lastName').touched)

                                                                ">

            <div *ngIf="complexForm.get('gender').errors?.required" id="error-no-gender"

              class="alert alert-danger error-msg">

              {{noGender}}

            </div>

          </ng-container>

        </div>


        <div class="form-group">

          <label class="label-name">

            Date of birth:<span class="required">*</span>

          </label>

          <div>

            <input id="date-input" class="form-control date-input glyphicon glyphicon-calendar" type="date"

              placeholder="Date of birth" min="1968-01-01" max="{{today}}" formControlName="dob">

          </div>

          <ng-container *ngIf="

                            complexForm.get('dob').invalid &&

                            (complexForm.get('dob').dirty ||

                                complexForm.get('dob').touched)

                        ">


            <div id="error-no-dob" class="alert alert-danger error-msg">

              {{noDob}}

            </div>

          </ng-container>

        </div>


        <div class="form-group">

          <label class="label-name">

            Contact number:<span class="required">*</span>

          </label>

          <input id="mobile" class="form-control text-box" type="text" placeholder="mobile number"

            formControlName="mobile">

          <ng-container *ngIf="

                            complexForm.get('mobile').invalid &&

                            (complexForm.get('mobile').dirty ||

                                complexForm.get('mobile').touched)

                        ">


            <div *ngIf="complexForm.get('mobile').errors?.required" id="error-no-mobile"

              class="alert alert-danger error-msg">

              {{noMobile}}

            </div>

            <div *ngIf="complexForm.get('mobile').errors?.pattern" id="error-number-mobile"

              class="alert alert-danger error-msg">

              {{numberMobile}}

            </div>

            <div *ngIf="complexForm.get('mobile').errors?.maxlength" id="error-maxlength-mobile"

              class="alert alert-danger error-msg">

              {{maxlengthMobile}}

            </div>

          </ng-container>

        </div>


        <div class="form-group">

          <label class="label-name" for="email">

            Email:<span class="required">*</span>

          </label>

          <input id="email" class="form-control text-box" type="email" placeholder="example:abc12@tcs.com"

            formControlName="email">

          <ng-container *ngIf="

                                                complexForm.get('email').invalid &&

                                                (complexForm.get('email').dirty ||

                                                    complexForm.get('email').touched)

                                            ">

            <div *ngIf="complexForm.get('email').errors?.required" id="error-no-email"

              class="alert alert-danger error-msg">

              {{noEmail}}

            </div>

            <div *ngIf="complexForm.get('email').errors?.pattern" id="error-pattern-email"

              class="alert alert-danger error-msg">

              {{patternEmail}}

            </div>

          </ng-container>


        </div>


        <div class="form-group">

          <label class="label-name" for="description">

            Description: <span class="xs-font">(Optional)</span>

          </label>

          <textarea id="description" class="form-control " placeholder="Briefly describe the issue"></textarea>

        </div>


        <div class="form-group">

          <!-- disable button if form not valid -->

          <button type="submit" id="submit-btn" class="btn btn-primary submit-btn"

            [disabled]="!complexForm.valid">Submit</button>

        </div>


      </form>

    </div>

  </div>

</div>


6.form.component.ts


import { Component, OnInit, Input } from '@angular/core';

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { DatePipe } from '@angular/common';

import { Router } from '@angular/router';

import { Patient } from '../../models/patient';

import { DataService } from '../../services/data.service';


@Component({

  selector: 'app-form',

  templateUrl: './form.component.html',

  styleUrls: ['./form.component.css'],

  providers: [DatePipe]

})

export class FormComponent implements OnInit {


  complexForm: FormGroup;

  patientDetails = new Patient;

  today: string;

  result;


  noRecordsFound = 'No patient records found in the list. Click on Register New Patient to add Patient details.';


  emptyFirstname = 'You must include a first name.';

  minlengthFirstname = 'Your first name must be at least 3 characters long.';

  maxlengthFirstname = 'Your first name cannot exceed 20 characters.';

  emptyLastname = 'You must include a last name.';

  minlengthLastname = 'Your last name must be at least 3 characters long.';

  maxlengthLastname = 'Your last name cannot exceed 20 characters.';

  noGender = 'You must select a gender.';

  noDob = 'You must select a valid date of birth.';

  noMobile = 'You must include mobile number.';

  numberMobile = 'You must enter a valid 10 digit mobile number.';

  maxlengthMobile = 'Your mobile number should not exceed 10 digits.';

  noEmail = 'You must include a valid email.';

  patternEmail = 'Pattern does not match.';


  ngOnInit() {

    this.today = this.datePipe.transform(Date.now(), 'yyyy-MM-dd');

  }


  constructor(fb: FormBuilder, private datePipe: DatePipe, private route: Router, private dataService: DataService) {


    // add necessary validators


    this.complexForm = fb.group({

      firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(20)]],

      lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(20)]],

      gender: [null, Validators.required],

      dob: [null, Validators.required],

      mobile: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern(/^\d{10,}$/)]],

      email: ['', [Validators.required, Validators.email, Validators.pattern(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/)]],

      description: ''

    });

  }


  submitForm(value: any) {


    // assign new date object to reportedTime

    // should reister new patient using service

    // if added successfully should redirect to 'patientList' page


  }


}


7.header.component.html


<nav class="navbar navbar-default">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand">Health Care Service</a>

      <label class="navbar-brand">

        <span class="glyphicon glyphicon-user"></span> Welcome

        <span id="username" class="user">{{userDetails.username}}</span>

      </label>

    </div>

    <div class="nav-left">

      <ul class="nav navbar-nav">

        <li>

          <a routerLink="/profile" routerLinkActive="current-link">

            <span class="glyphicon glyphicon-cog"></span> Profile

          </a>

        </li>

        <li>

          <a routerLink="/form" routerLinkActive="current-link">

            <i class="fa fa-wpforms" aria-hidden="true"></i>

            Register patient

          </a>

        </li>

        <li>

          <a routerLink="/patientList" routerLinkActive="current-link">

            <span class="glyphicon glyphicon-th-list"></span> Viewall patients

          </a>

        </li>

        <li>

          <a routerLink="/requested_appointments" routerLinkActive="current-link">

            <span class="glyphicon glyphicon-list-alt"></span> Requested App

          </a>

        </li>

        <li>

          <a routerLink="/login">

            <span class="glyphicon glyphicon-log-out" routerLinkActive="current-link"></span> Logout

          </a>

        </li>

      </ul>

    </div>

  </div>

</nav>



8. header.component.ts


import { Component, OnInit } from '@angular/core';

import { DataService } from '../../services/data.service';

import { Users } from '../../models/users.model';

import { ActivatedRoute } from '@angular/router';


@Component({

  selector: 'app-header',

  templateUrl: './header.component.html',

  styleUrls: ['./header.component.css']

})

export class HeaderComponent implements OnInit {


  userId = -1;

  private userDetails = new Users;


  constructor(private dataService: DataService) {


  }


  ngOnInit() {


    // get userId from service and assign it to userId property

    this.userId = this.dataService.getUserId();

    // call getProfileDetails method to get user details

    this.getProfileDetails();

  }


  getProfileDetails() {


    // call getUserDetails method of dataService and assign response to userDetails property

    this.dataService.getUserDetails(this.userId)

      .subscribe(data => {

        this.userDetails = data;

      });


  }



}


9.login.component.html


<!-- Write necessary code-->

<div class="login-view-wrapper custom-container">

  <div class="login-view">

    <div class="logo-wrapper">

      <img src="./../assets/login.png" width="100" height="100" />

      <h2>LOGIN</h2>

    </div>

    <div class="login-form-wrapper">

      <form class="ro-form" [formGroup]="loginForm">

        <div class="form-group">

          <label class="labelHead" for="username">

            <b>Username</b>

          </label>

          <input type="text" id="username" placeholder="userName" formControlName="userName" />


          <ng-container *ngIf="

                            loginForm.get('userName').invalid &&

                            (loginForm.get('userName').dirty ||

                                loginForm.get('userName').touched)

                        ">

            <div *ngIf="loginForm.get('userName').errors?.required" class="form-error-messages" id="error-no-username">

              {{ emptyUserName }}

            </div>

            <div *ngIf="loginForm.get('userName').errors?.minlength" class="form-error-messages"

              id="error-minlength-username">

              {{ minlengthUserName }}

            </div>

            <div *ngIf="loginForm.get('userName').errors?.maxlength" class="form-error-messages"

              id="error-maxlength-username">

              {{ maxlengthUserName }}

            </div>

            <div *ngIf="loginForm.get('userName').errors?.pattern" class="form-error-messages"

              id="error-pattern-username">

              {{ userNamePattern }}

            </div>

          </ng-container>

        </div>

        <div class="form-group">

          <label class="labelHead" for="password">

            <b>Password</b>

          </label>

          <input type="password" id="password" placeholder="password" formControlName="password" />

          <ng-container *ngIf="

                            loginForm.get('password').invalid &&

                            (loginForm.get('password').dirty ||

                                loginForm.get('password').touched)

                        ">

            <div *ngIf="loginForm.get('password').errors?.required" class="form-error-messages" id="error-no-password">

              {{ emptyPassword }}

            </div>

            <div *ngIf="loginForm.get('password').errors?.minlength" class="form-error-messages"

              id="error-minlength-password">

              {{ minlengthPassword }}

            </div>

            <div *ngIf="loginForm.get('password').errors?.maxlength" class="form-error-messages"

              id="error-maxlength-password">

              {{ maxlengthPassword }}

            </div>

            <div *ngIf="loginForm.get('password').errors?.pattern" class="form-error-messages"

              id="error-pattern-password">

              {{ passwordPattern }}

            </div>

          </ng-container>

        </div>

        <div class="col-sm-12 clmn12">

          <!-- disable button if form not valid -->

          <!-- call doLogin method when clicking on this button-->

          <button id="loginBtn" class="login-btn" type="submit" (click)="doLogin()" [disabled]="!loginForm.valid">

            Login

          </button>

        </div>

      </form>

    </div>

  </div>

</div>


10. login.component.ts


import { Component, OnInit } from '@angular/core';

import { FormControl, FormGroup, Validators } from '@angular/forms';

import { Router } from '@angular/router';

import { DataService } from '../../services/data.service';


@Component({

  selector: 'app-login',

  templateUrl: './login.component.html',

  styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {


  isLoggedIn: boolean = false;

  loginForm: FormGroup;

  isLoginFailed: boolean = false;



  emptyUserName = 'You must enter a username';

  minlengthUserName = 'User name must be at least 3 characters long';

  maxlengthUserName = 'Username cannot exceed 20 characters';

  userNamePattern = 'Username should be in alphanumeric only';

  emptyPassword = 'You must enter a password';

  minlengthPassword = 'Password must be at least 8 characters long';

  maxlengthPassword = 'Password cannot exceed 20 characters';

  passwordPattern = 'Pattern does not match';

  wrongCredentials = 'Incorrect Username or Password';


  constructor(private route: Router, private dataService: DataService) {

  }


  ngOnInit() {


    // add necessary validators


    this.loginForm = new FormGroup({

      userName: new FormControl('', [

        Validators.required,

        Validators.minLength(3),

        Validators.maxLength(20),

        Validators.pattern(/^[a-zA-Z0-9]*$/)

      ]),

      password: new FormControl('', [

        Validators.required,

        Validators.minLength(8),

        Validators.maxLength(20),

        Validators.pattern(/^[a-zA-Z0-9!$%@#*?&£€]*$/)

      ])

    });

  }


  doLogin() {

    // call authenticateUser method to perform login operation

    this.dataService.authenticateUser(this.loginForm.get('userName').value, this.loginForm.get('password').value)

      .subscribe(data => {

        if (data) {

          // if success, redirect to profile page

          this.route.navigate(['/profile']);

        } else {

          // else display appropriate error message

          this.isLoginFailed = true;

          // reset the form

          this.loginForm.reset();

        }

      }, err => {

        this.isLoginFailed = true;

        console.log(err);

      });

  }

}


11. profile.component.html


<!-- Write necessary code-->

<app-header></app-header>

<div class="main-view">

  <div class="home-content-wrapper">

    <div class="home-profile-wrapper">

      <div class="profile-details">

        <img [src]="userImg" width="120" height="100" class="profile-img">

      </div>

    </div>

    <div class="home-profile-wrapper border">


      <!-- hide profile details if editing the form-->

      <ul *ngIf="!editProfile" id="profileDetails" class="profile-details">

        <li class="list-items">

          <fa class="home-icons" name="user" size="2x"></fa>

          <span id="usernameVal">

            {{userDetails?.username}}

          </span>


        </li>

        <li class="list-items">

          <fa class="home-icons fa-icon " name="mobile" size="2x"></fa>

          <span id="mobileVal">

            {{userDetails?.mobile}}

          </span>

        </li>

        <li class="list-items">

          <fa class="home-icons fa-icon" name="envelope" size="2x"></fa>

          <span id="emailVal" class="list-items">

            {{userDetails?.email}}

          </span>

        </li>

        <li class="list-items">

          <fa class="home-icons" name="map-marker" size="2x"></fa>

          <span id="locationVal" class="list-items">

            {{userDetails?.location}}

          </span>

        </li>

      </ul>


      <!-- show edit profile form if edit profile button clicked-->

      <form *ngIf="editProfile" id="editProfileForm" class="ro-form profile-form" [formGroup]="editProfileForm">

        <h2>Edit your profile</h2>

        <div class="form-group">

          <label for="username">

            Name

          </label>

          <input type="text" id="consumerName" formControlName="userName" value="" placeholder="Name">


        </div>

        <div class="form-group">

          <label for="mobile">

            Contact number

          </label>

          <input type="text" value="" id="mobile" formControlName="mobile" placeholder="mobile number">

          <div *ngIf="editProfileForm.get('mobile').errors" class="form-error-messages">

            {{mobileErrMsg}}

          </div>

        </div>

        <div class="form-group">

          <label for="email">

            Email

          </label>

          <input type="email" value="" formControlName="email" id="email" placeholder="Email">

          <div *ngIf="editProfileForm.get('email').errors" class="form-error-messages">

            {{emailErrMsg}}

          </div>

        </div>


        <div class="form-group">

          <label for="location">

            Location

          </label>

          <input type="text" value="" id="location" formControlName="location" placeholder="Location">

          <div *ngIf="editProfileForm.get('location').errors" class="form-error-messages">

            {{locationErrMsg}}

          </div>

        </div>


        <!-- disable button if form not valid -->

        <!-- call changeMyProfile method when clicking on this button-->

        <button [disabled]="!editProfileForm.valid" (click)="changeMyProfile()" class="btn" type="submit"

          id="editSubmitBtn">Make changes</button>

      </form>

      <div class="profile-edit-choice">


        <!-- show button if not editing the form-->

        <!-- call editMyProfile method when clicking on this button-->

        <button *ngIf="!editProfile" (click)="editMyProfile()" id="editProfileBtn" class="prompt-btn btn">

          Edit profile</button>


        <!-- show button if editing the form-->

        <!-- call discardEdit method when clicking on this button-->

        <button *ngIf="editProfile" (click)="discardEdit()" id="editDiscardBtn" class="alert-btn btn">Discard</button>

      </div>

    </div>

  </div>

</div>


12. profile.component.ts


import { Component, OnInit } from '@angular/core';

import { FormControl, FormGroup, Validators } from '@angular/forms';


import { Users } from '../../models/users.model';

import { DataService } from '../../services/data.service';



@Component({

  selector: 'app-profile',

  templateUrl: './profile.component.html',

  styleUrls: ['./profile.component.css']

})


export class ProfileComponent implements OnInit {


  // used as a flag to display or hide form

  editProfile = false;

  userId = -1;

  userDetails = new Users;


  editProfileForm: FormGroup;

  userImg = './../../assets/user.jpg';

  mobileErrMsg = 'You must enter a valid mobile number';

  emailErrMsg = 'You must enter a valid Email ID';

  locationErrMsg = 'You must enter the location';


  constructor(private dataService: DataService) { }


  ngOnInit() {


    // add necessary validators

    // username should be disabled. it should not be edited


    this.editProfileForm = new FormGroup({

      userName: new FormControl({ value: '', disabled: true }, Validators.required),

      mobile: new FormControl('', [Validators.minLength(10), Validators.maxLength(10)]),

      email: new FormControl('', Validators.email),

      location: new FormControl('', Validators.required)

    });


    // get login status from service

    // get userId from service and assign it to userId property

    this.userId = this.dataService.getUserId();

    // get profile details and display it

    this.getProfileDetails();

  }


  changeMyProfile() {


    // if successfully changed the profile it should display new details hiding the form

    this.dataService.updateProfile({

      userId: this.userId,

      username: this.editProfileForm.get('userName').value,

      mobile: this.editProfileForm.get('mobile').value,

      email: this.editProfileForm.get('email').value,

      location: this.editProfileForm.get('location').value,

    }).subscribe(data => {

      if (data) {

        this.discardEdit();

        this.getProfileDetails();

      } else {


      }

    }, err => {


    });


  }


  editMyProfile() {

    // change editProfile property value appropriately

    this.editProfile = true;

    this.editProfileForm.setValue({

      userName: this.userDetails.username,

      email: this.userDetails.email,

      location: this.userDetails.location,

      mobile: this.userDetails.mobile

    });

  }


  discardEdit() {

    // change editProfile property value appropriately

    this.editProfile = false;

  }


  getProfileDetails() {


    // retrieve user details from service using userId

    this.dataService.getUserDetails(this.userId)

      .subscribe(data => {

        this.userDetails = data;


      }, err => {

        this.userDetails = new Users();

      });


  }


}


13.patient.component.html


<!-- Write necessary code-->

<app-header></app-header>


<div class="view-container" *ngIf="patient">


  <div class="details-container">

    <h2 class="view-header" style="font-weight: bold;">Patient Details</h2>

    <div class="div-name">

      ID:<span class="details">{{patient.id}}</span>

    </div>

    <div class="div-name">

      Name:<span class="name">{{patient.firstName}} {{patient.lastName}}</span>

    </div>

    <div class="div-name">

      Gender:<span class="details">{{patient.gender}}</span>

    </div>

    <div class="div-name">

      Date of birth:<span class="details">{{patient.dob}}</span>

    </div>

    <div class="div-name">

      Mobile:<span class="details">{{patient.mobile}}</span>

    </div>

    <div class="div-name">

      Email:<span class="details">{{patient.email}}</span>

    </div>

    <div class="div-name">

      Registered on:<span class="details">{{patient.registeredTime| date: 'dd/MM/yyyy hh:mm:ss'}}</span>

    </div>

    <div class="update">


      <!-- disable the same when clicking on this button -->

      <!-- call bookAppointment method when clicking on this button-->

      <button id="book-appointment" class="btn btn-success book-btn" (click)="bookAppointment()"

        [disabled]="!isBookAppointment">Book Appointment</button>




      <!-- disable the same when clicking on this button -->

      <!-- call scheduledAppointment method when clicking on this button-->

      <button id="Scheduled-appointment" class="btn btn-warning book-btn" (click)="scheduledAppointment()"

        [disabled]="!isScheduledAppointment">Scheduled Appointment</button>

    </div>

  </div>


  <!-- show book appointment form if "Book Appointment" button clicked-->

  <!-- call scheduleAppointment method if form is valid-->

  <form *ngIf="isFormEnabled" id="form-container" class="form-container" [formGroup]="appointmentForm"

    (click)="scheduleAppointment()">

    <h2 class="view-header" style="padding-left: 100px">Book Appointment</h2>

    <div class="form-content">


      <div class="form-content2">

        <div class="form-group ">

          <label class="label-name">

            Select Disease:<span class="required">*</span>

          </label>

          <div>

            <select id="select-selectDisease" class="text-box select" formControlName="selectDisease">

              <option class="label-content" value="null" disabled="true">Select disease</option>

              <!-- display diseases list-->

              <option *ngFor="let item of names" id="option-value" class="label-content">{{item.name}}

              </option>

            </select>

          </div>

          <div id="error-no-selectDisease" class="alert alert-danger error-msg">

            noselectDisease

          </div>

        </div>


        <div class="form-group ">

          <label class="label-name">

            Priority:<span class="required">*</span>

          </label>

          <div>

            <select id="priority" class="text-box select" formControlName="priority">

              <option class="label-content" value="null" disabled="true">Select priority</option>

              <option id="normal" class="label-content" value="Normal">Normal</option>

              <option id="urgent" class="label-content" value="Urgent">Urgent</option>

            </select>

          </div>

          <div id="error-no-priority" class="alert alert-danger error-msg">

            nopriority

          </div>

        </div>


        <div class="form-group">

          <label class="label-name">

            tentativeDate:<span class="required">*</span>

          </label>

          <div>

            <input id="date-input" class="form-control date-input glyphicon glyphicon-calendar" type="date"

              placeholder="tentativeDate" min="{{today}}" formControlName="tentativeDate">

          </div>

          <div id="error-no-tentativeDate" class="alert alert-danger error-msg">

            notentativeDate

          </div>

        </div>

      </div>

      <div class="form-group">

        <!-- disable button if form not valid -->

        <button type="submit" id="submit-btn" class="btn btn-primary submit-btn">Schedule</button>

      </div>

    </div>

  </form>



  <!-- show Scheduled Appointment table if "Scheduled Appointment" button clicked-->

  <div *ngIf="isTableEnabled" id="table-container" class="table-container">

    <h2 class="view-header">Scheduled Appointment</h2>

    <!-- display no records found message if there is no appointment -->

    <div *ngIf="!scheduledAppointments" class="no-records">No Records Found</div>

    <table *ngIf="scheduledAppointments" class="table-class">

      <thead>

        <tr class="table-head">

          <th>Appointment id</th>

          <th>Disease</th>

          <th>Priority</th>

          <th>Tentative date</th>

          <th>Requested on</th>

          <th>Update</th>

        </tr>

      </thead>

      <tbody>

        <!--display scheduled appointments-->

        <tr *ngFor="let item of scheduledAppointments" id="table-row">

          <td id="table-id">{{item.id}}</td>

          <td id="table-disease" class="td-column">{{item.disease}}</td>

          <td id="table-priority">{{item.priority}}</td>

          <td id="table-tentativedate">{{item.tentativedate| date: 'dd/MM/yyyy'}}</td>

          <td id="table-requestedOn">{{item.registeredTime| date: 'dd/MM/yyyy hh:mm:ss'}}</td>

          <td class="column-btn">


            <!-- call cancelAppointment method with selected id when clicking on this button-->

            <button id="user-cancel" class="btn btn-danger btn-spc" (click)="cancelAppointment(item.id)">

              <span class="btn-value">Cancel Appointment</span>

            </button>

          </td>

        </tr>

      </tbody>

    </table>

  </div>


</div>


14. view-patient.component.ts


import { Component, OnInit } from '@angular/core';

import { DataService } from '../../services/data.service';

import { FormGroup, FormBuilder } from '@angular/forms';

import { Router, ActivatedRoute } from '@angular/router';

import { DatePipe } from '@angular/common';

import { Appointment } from '../../models/appointment';


@Component({

  selector: 'app-view-patient',

  templateUrl: './view-patient.component.html',

  styleUrls: ['./view-patient.component.css'],

  providers: [DatePipe]

})

export class ViewPatientComponent implements OnInit {


  patient = null;

  names = [];

  today;

  isBookAppointment = true;

  isScheduledAppointment = true;


  isFormEnabled = false;

  isTableEnabled = false;

  appointmentForm: FormGroup;

  appointmentDetails = new Appointment;

  bookedAppointmentResponse;

  ScheduledAppointmentResponse;


  scheduledAppointments: Appointment[] = [];


  constructor(

    fb: FormBuilder,

    private route: Router,

    private datePipe: DatePipe,

    private activatedRoute: ActivatedRoute,

    private dataService: DataService) {

    this.today = this.datePipe.transform(Date.now(), 'yyyy-MM-dd');

    // add necessary validators

    this.appointmentForm = fb.group({

      selectDisease: [null],

      tentativeDate: [null],

      priority: [null]

    });


  }


  ngOnInit() {


    // get selected patient id

    this.activatedRoute.params.subscribe((params: { id: string }) => {

      // get Particular Patient from service using patient id and assign response to patient property

      this.dataService.getParticularPatient(parseInt(params.id, 10))

        .subscribe(data => {

          this.patient = data;

        });

    });


  }


  bookAppointment() {

    // get diseases list from service

    this.dataService.getDiseasesList().subscribe(data => {

      this.names = data;

    });

    // change isBookAppointment, isScheduledAppointment, isFormEnabled, isTableEnabled property values appropriately

    this.isBookAppointment = false;

    this.isFormEnabled = true;

    this.isScheduledAppointment = true;

    this.isTableEnabled = false;

  }


  scheduleAppointment() {


    // The below attributes to be added while booking appointment using service

    // patientId, patientFirstName, patientLastName, disease, priority, tentativedate, registeredTime


    const appointment = {

      patientFirstName: this.patient.firstName,

      patientLastName: this.patient.lastName,

      disease: this.appointmentForm.get('selectDisease').value,

      priority: this.appointmentForm.get('priority').value,

      tentativedate: this.appointmentForm.get('tentativeDate').value

    };


    // if booked successfully should redirect to 'requested_appointments' page

    this.dataService.bookAppointment(appointment)

      .subscribe(data => {

        if (data) {

          this.route.navigate(['/requested_appointments']);

        }

      }, err => {

        console.log(err);

      });

  }


  scheduledAppointment() {


    // change isBookAppointment, isScheduledAppointment, isFormEnabled, isTableEnabled property values appropriately

    this.isBookAppointment = true;

    this.isScheduledAppointment = false;

    this.isTableEnabled = true;

    this.isFormEnabled = false;


    // get particular patient appointments using getAppointments method of DataService

    this.dataService.getAppointments(this.patient.id).subscribe(data => {

      this.scheduledAppointments = data;

    });


  }


  cancelAppointment(id) {


    // delete selected appointment uing service

    this.dataService.deleteAppointment(id)

      .subscribe(data => {


      });

    // After deleting the appointment, get particular patient appointments


  }


}


15. api.service.ts


import { HttpClient } from '@angular/common/http';

import { Inject, Injectable } from '@angular/core';


import { Credentials } from '../models/credentials.model';

import { Users } from '../models/users.model';

import { Patient } from '../models/patient';

import { Appointment } from '../models/appointment';

import { Observable, throwError } from 'rxjs';

import { catchError } from 'rxjs/operators';


@Injectable()

export class ApiService {


  API_URL: string;

  AUTH_API_URL = '/auth/server/';

  allPatients: Patient[] = [];

  appointments: Appointment[] = [];

  users: Users[] = [];

  authUsers: {

    id: number;

    username: string;

    password: string;

  }[] = [];


  constructor(private http: HttpClient) {

    this.API_URL = 'api';

  }


  public checkLogin(username: string, password: string): Observable<Credentials> {

    return this.http.post<Credentials>(this.API_URL + this.AUTH_API_URL, { username, password });

  }


  public getUserDetails(userId: number): Observable<Users> {

    // should return user details retireved from server

    return this.http.get<Users>(this.API_URL + '/users/' + userId).pipe(catchError(this.handleError));

    // handle error

  }


  public updateDetails(userDetails: Users): Observable<Users> {

    // should return user details if successfully updated the details


    // handle error


    return this.http.put<Users>(this.API_URL + '/users/' + userDetails.userId, userDetails);

  }


  public registerPatient(patientDetails: any): Observable<any> {

    // should return response from server if patientDetails added successfully

    // handle error

    return this.http.post<Patient>(this.API_URL + '/allpatients', patientDetails).pipe(catchError(this.handleError));

  }


  public getAllPatientsList(): Observable<any> {

    // should return all patients from server

    // handle error

    return this.http.get<any>(this.API_URL + '/allpatients');

  }


  public getParticularPatient(id: number): Observable<any> {

    // should return particular patient details from server

    // handle error

    return this.http.get<any>(this.API_URL + '/allpatients/' + id);

  }


  public getDiseasesList(): Observable<any[]> {

    // should return diseases from server

    // handle error

    return this.http.get<any[]>(this.API_URL + '/diseases');

  }


  public bookAppointment(appointmentDetails): Observable<any> {


    // should return response from server if appointment booked successfully


    // handle error


    return this.http.post<Appointment>(this.API_URL + '/reqappointments', appointmentDetails);

  }


  public requestedAppointments(): Observable<any> {


    // should return all requested appointments from server


    // handle error


    return this.http.get<Appointment[]>(this.API_URL + '/reqappointments');

  }


  public getAppointments(userId): Observable<any> {


    // should return appointments of particular patient from server


    // handle error


    return this.http.get<Appointment[]>(this.API_URL + '/reqappointments?patientId=' + userId).pipe(catchError(this.handleError));

  }


  public deleteAppointment(appointmentId): Observable<any> {

    // should delete the appointment

    // handle error

    return this.http.delete<void>(this.API_URL + '/reqappointments/' + appointmentId).pipe(catchError(this.handleError));

  }


  private handleError(error: Response | any) {

    return throwError(error);

  }


}


16. data.service.ts



import { Injectable } from '@angular/core';

import { BehaviorSubject, Observable, throwError } from 'rxjs';

import { catchError, map } from 'rxjs/operators';

import { Users } from '../models/users.model';


import { ApiService } from './api.service';


@Injectable()

export class DataService {


  isLoggedIn = false;

  isLogIn: BehaviorSubject<boolean>;

  constructor(private api: ApiService) {

    this.isLogIn = new BehaviorSubject<boolean>(false);

    this.isLogIn.subscribe(data => {

      if (!data) {

        // localStorage.removeItem('userId');

      }

    });

  }


  authenticateUser(username: string, password: string): Observable<boolean> {

    return this.api.checkLogin(username, password)

      .pipe(map(data => {

        if (data && data.userId) {

          // store 'userId' from response as key name 'userId' to the localstorage

          localStorage.setItem('userId', data.userId + '');

          // return true if user authenticated

          this.isLogIn.next(true);

          return true;

        } else {

          // return false if user not authenticated

          return false;

        }

      }));

  }


  getAuthStatus(): Observable<boolean> {

    this.isLogIn.next(this.getUserId() > 0 ? true : false);

    return this.isLogIn.asObservable(); // passed

  }

  doLogOut() {

    // remove the key 'userId' if exists

    this.isLoggedIn = false;

    if (localStorage.getItem('userId')) {

      localStorage.removeItem('userId');

    }

    this.isLogIn.next(false);

    return this.isLoggedIn;

  }


  getUserDetails(userId: number): Observable<Users> {

    // should return user details retrieved from api service

    return this.api.getUserDetails(userId);

  }


  updateProfile(userDetails): Observable<boolean> {

    // should return the updated status according to the response from api service

    return this.api.updateDetails(userDetails)

      .pipe(map(data => data ? true : false), catchError(this.handleError));

  }


  registerPatient(patientDetails): Observable<any> {

    // should return response retrieved from ApiService

    // handle error

    return this.api.registerPatient(patientDetails);

  }


  getAllPatientsList(): Observable<any> {

    // should return all patients list retrieved from ApiService

    // handle error

    return this.api.getAllPatientsList();

  }


  getParticularPatient(id: number): Observable<any> {

    // should return particular patient details retrieved from ApiService

    // handle error

    return this.api.getParticularPatient(id);

  }


  getDiseasesList(): Observable<any> {

    // should return response retrieved from ApiService

    // handle error

    return this.api.getDiseasesList();

  }


  bookAppointment(appointmentDetails): Observable<any> {

    // should return response retrieved from ApiService

    // handle error

    return this.api.bookAppointment(appointmentDetails);

  }


  getAppointments(patientId): Observable<any> {

    // should return response retrieved from ApiService

    // handle error

    return this.api.getAppointments(patientId);

  }


  deleteAppointment(appointmentId): Observable<any> {

    // should return response retrieved from ApiService

    // handle error

    return this.api.deleteAppointment(appointmentId);

  }


  requestedAppointments(): Observable<any> {


    // should return response retrieved from ApiService

    // handle error

    return this.api.requestedAppointments();

  }


  getUserId(): number {

    // retrieve 'userId' from localstorage

    const userId = parseInt(localStorage.getItem('userId'), 10);

    if (!this.isLogIn.value)

      return -1;

    return userId ? userId : -1;

  }

  private handleError(error: Response | any) {

    return throwError(error);

  }


}


Java Fullstack Developer - Angular 9 Hands-on Solutions  Java Fullstack Developer - Angular 9 Hands-on Solutions Reviewed by TECH UPDATE on May 23, 2022 Rating: 5

17 comments:

  1. This code is not working. Initially failing for data.service.ts

    ReplyDelete
  2. One correction in form.component.html, everything else working fine.

    submitForm(complexForm)

    ReplyDelete
  3. One correction in form.component.html, everything else working fine.

    (ngSubmit)="submitForm(complexForm)"

    ReplyDelete
    Replies
    1. can you please share ur code?

      Delete
  4. Please provide solution for Course Id 64904

    ReplyDelete
  5. thanks code is working

    ReplyDelete
  6. i need hands-on football tournament registration app using angular fresco play course

    ReplyDelete
  7. Could you also do the Angular 13 CredLoans MiniProject Handson from FP?

    ReplyDelete
  8. After Which line to add this one

    ReplyDelete
  9. Please give code for course ID 64904

    ReplyDelete
  10. Please please provide 63424 Jenkins solutions

    ReplyDelete
  11. Please provide 63424 Jenkins solutions

    ReplyDelete
  12. Getting Error in api.service--> import { throwError } from "rxjs";
    module "rxjs/Rx" has no exported member as "throwError"
    Can someone help?

    ReplyDelete
  13. Getting error in api.service and data.service. Problem with import of throwError;
    Module '"../../../node_modules/rxjs/Rx"' has no exported member 'throwError'.ts(2305)

    ReplyDelete
  14. 90 test cases are passing & 30 failing. Please suggest if any other correction needed.

    ReplyDelete

Powered by Blogger.