CodeReview : VQODE : Sprint 1 : Code is well managed for different modules but…

CodeReview : VQODE : Sprint 1 : Code is well managed for different modules but still code can be reused and imports to be arranged properly

frontend/angular/src/app/app.routing.ts

@@ -166,6 +166,7 @@ export const routes: Routes = [
             redirectPage: 'editor/index.jsp'
         },
         children: [
+            // @CodeReview : G000 : accessible for MC_Admin only
             {
                 path: 'my-career-users',
                 component: MyCareerUsersComponent

frontend/angular/src/app/components/my-career-web/auth/forgot-password/forgot-password.component.scss

 @import "~styles/my-career-styles/variables";
 
+/* @CodeReview : G002 : Rather than creating same css again, please reuse it, (duplicate css classes in here and login.component.scss & register.component.scss, reset-password.component.scss)
+ */
 .bck-link {
     position: absolute;
     color: #12A8DE;

frontend/angular/src/app/components/my-career-web/auth/forgot-password/forgot-password.component.ts

@@ -2,10 +2,10 @@ import { Component, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 import { BaseComponent } from '../../base/base.component';
+import { EXTERNAL_LINKS } from '../../config/constants';
 import { AuthService } from '../../services/auth.service';
 import { HelperService } from '../../services/helper.service';
 import { ToasterService } from '../../services/toaster.service';
-import { EXTERNAL_LINKS } from '../../config/constants';
 
 @Component({
   selector: 'app-forgot-password',

frontend/angular/src/app/components/my-career-web/auth/login/login.component.ts

@@ -5,9 +5,9 @@ import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../../../environments/environment';
 import { AppService } from '../../../../app.service';
 import { BaseComponent } from '../../base/base.component';
+import { EXTERNAL_LINKS } from '../../config/constants';
 import { AuthService } from '../../services/auth.service';
 import { HelperService } from '../../services/helper.service';
-import { EXTERNAL_LINKS } from '../../config/constants';
 
 @Component({
     selector: 'app-login',
@@ -61,6 +61,8 @@ export class LoginComponent extends BaseComponent {
             environment: environment.envName,
             nextPage: window.location.href.split('/#/')[0] + '/#/my-career-web/dashboard/home'
         };
+        /* @CodeReview :  : As all API names defined in constatns.ts, better to have these API names also to be defined there
+         */
         const svc = type === 'linkedIn' ? 'LoginWithLinkedIn' : 'LoginWithGoogle';
         this.isLoading = true;
         this.aps.socicalMediaLogin(svc, params)

frontend/angular/src/app/components/my-career-web/auth/register/register.component.html

@@ -22,7 +22,6 @@
                     <i class="fa" [ngClass]="showPassword ? 'fa-eye' : 'fa-eye-slash'" (click)="showPassword = !showPassword"></i>
                 </app-form-control>
             </div>
-
             <div class="was-referred form-group">
                 <span>Were you referred by another member?</span>
                 <div class="mt-sm-top" style="white-space: nowrap;">

frontend/angular/src/app/components/my-career-web/auth/register/register.component.ts

@@ -48,6 +48,8 @@ export class RegisterComponent extends BaseComponent implements OnInit {
         if (this.form.invalid) {
             return this.hs.validateAllFormFields(this.form);
         }
+
+//   @CodeReview : G002 : Have to grab firstname & lastname from email (part before '@') 
         this.registerForm.firstname = 'AA';
         this.registerForm.lastname = 'BB';
         this.registerForm.email = this.registerForm.username;

frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.html

@@ -22,14 +22,16 @@
         <div class="col-md-6 form-group">
             <label>Email</label>
             <app-form-control>
-                <input type="email" email=""  class="form-control" placeholder="Email Address" required name="Email" [(ngModel)]="careerProfile.Candidate.User.Email">
+                <input type="email" email=""  class="form-control" placeholder="Email Address" required name="Email" 
+                       [(ngModel)]="careerProfile.Candidate.User.Email">
             </app-form-control>
         </div>
 
         <div class="col-md-6 form-group">
             <label>Mobile</label>
             <app-form-control>
-                <p-inputMask (focusout)="checkMobilePattern()" slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999" styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile" name="Mobile">
+                <p-inputMask (focusout)="checkMobilePattern()" slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999" 
+                             styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile" name="Mobile">
                 </p-inputMask>
             </app-form-control>
             <div class="mobile-no-msg" *ngIf="!careerProfile.Mobile || careerProfile.Mobile.length < 11">
@@ -40,7 +42,8 @@
         <div class="col-md-12 form-group">
             <label>Address</label>
             <app-form-control>
-                <input type="text" appGooglePlacesAutocomplete (change)="changedAddress()" (addressSelected)="updateAddress($event)"  class="form-control" placeholder="Address" required [(ngModel)]="careerProfile.GoogleAddress" name="Address">
+                <input type="text" appGooglePlacesAutocomplete (change)="changedAddress()" (addressSelected)="updateAddress($event)"  
+                       class="form-control" placeholder="Address" required [(ngModel)]="careerProfile.GoogleAddress" name="Address">
             </app-form-control>
         </div>
 
@@ -54,7 +57,8 @@
 
         <div class="col-md-6 form-group">
             <label>Occupation Preference</label>
-            <p-autoComplete placeholder="Occupation Preference" (completeMethod)="getJobTitles($event)" [forceSelection]="true" field="JobTitle" [suggestions]="jobTitles" name="OccupationPreference" [(ngModel)]="careerProfile.Candidate.OccupationPreference" dataKey="ObjectID">
+            <p-autoComplete placeholder="Occupation Preference" (completeMethod)="getJobTitles($event)" [forceSelection]="true" field="JobTitle" 
+                            [suggestions]="jobTitles" name="OccupationPreference" [(ngModel)]="careerProfile.Candidate.OccupationPreference" dataKey="ObjectID">
             </p-autoComplete>
         </div>
 
@@ -63,7 +67,8 @@
             <div class="row">
                 <div class="col-sm-12" *ngIf="isLoadingPreferences"><i class="pi pi-spin pi-spinner"></i></div>
                 <div class="col-sm-6" *ngFor="let preference of employmentPreferences; let i = index;">
-                    <p-checkbox [label]="preference.Description" [value]="preference.Value" [(ngModel)]="careerProfile.Candidate.EmploymentPreference" name="pref-{{i}}">
+                    <p-checkbox [label]="preference.Description" [value]="preference.Value" [(ngModel)]="careerProfile.Candidate.EmploymentPreference" 
+                                name="pref-{{i}}">
                     </p-checkbox>
                 </div>
             </div>
@@ -72,7 +77,9 @@
 
         <div class="col-md-6 form-group">
             <label>Employment Status</label>
-            <p-dropdown placeholder="Employment Status" [options]="employmentStatuses" [dropdownIcon]="isLoadingStatuses ? 'pi pi-spin pi-spinner' : 'pi pi-chevron-down'" optionLabel="Description" name="EmploymentStatus" [(ngModel)]="careerProfile.Candidate.EmploymentStatus" dataKey="Value">
+            <p-dropdown placeholder="Employment Status" [options]="employmentStatuses" 
+                        [dropdownIcon]="isLoadingStatuses ? 'pi pi-spin pi-spinner' : 'pi pi-chevron-down'" 
+                        optionLabel="Description" name="EmploymentStatus" [(ngModel)]="careerProfile.Candidate.EmploymentStatus" dataKey="Value">
             </p-dropdown>
         </div>
 
@@ -87,16 +94,19 @@
         </div>
 
         <div class="col-md-6 mt-4 d-flex justify-content-center">
-            <button type="button" pButton label="Connect With Google" class="ui-button-google" (click)="connectWithSocial('GOOGLE')" *ngIf="!careerProfile.IsGoogleConnected"></button>
+            <button type="button" pButton label="Connect With Google" class="ui-button-google" (click)="connectWithSocial('GOOGLE')" 
+                    *ngIf="!careerProfile.IsGoogleConnected"></button>
         </div>
 
         <div class="col-md-6 mt-4 d-flex justify-content-center">
-            <button type="button" pButton label="Connect With LinkedIn" class="ui-button-facebook" (click)="connectWithSocial('LINKEDIN')" *ngIf="!careerProfile.IsLinkedInConnected"></button>
+            <button type="button" pButton label="Connect With LinkedIn" class="ui-button-facebook" (click)="connectWithSocial('LINKEDIN')" 
+                    *ngIf="!careerProfile.IsLinkedInConnected"></button>
         </div>
 
 
         <div class="col-md-12 d-flex justify-content-end mt-5">
-            <button (click)="updateProfile()" pButton [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-save'" label="Update Information" class="ui-button-info update-info" [disabled]="isLoading || isSaving">
+            <button (click)="updateProfile()" pButton [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-save'" label="Update Information" 
+                    class="ui-button-info update-info" [disabled]="isLoading || isSaving">
             </button>
         </div>
     </form>

frontend/angular/src/app/components/my-career-web/dashboard/personal-details/personal-details.component.ts

 import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
-import { BaseComponent } from '../../base/base.component';
-import { PersonalDetailsService } from '../../services/personal-details.service';
-import { takeUntil } from 'rxjs/operators';
-import { HelperService } from '../../services/helper.service';
-import { CareerProfileModel } from '../../models/career-profile.model';
-import { UtilsService } from '../../../../oneit/services/utils.service';
 import { NgForm } from '@angular/forms';
-import { ToasterService } from '../../services/toaster.service';
+import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../../../environments/environment';
 import { AppService } from '../../../../app.service';
+import { UtilsService } from '../../../../oneit/services/utils.service';
+import { BaseComponent } from '../../base/base.component';
+import { CareerProfileModel } from '../../models/career-profile.model';
+import { HelperService } from '../../services/helper.service';
+import { PersonalDetailsService } from '../../services/personal-details.service';
+import { ToasterService } from '../../services/toaster.service';
 
 @Component({
     selector: 'app-personal-details',
@@ -30,10 +30,8 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
 
     constructor(
         private ps: PersonalDetailsService,
-        private us: UtilsService,
         private ts: ToasterService,
         private hs: HelperService,
-        private cdr: ChangeDetectorRef,
         private aps: AppService,
     ) {
         super();
@@ -135,6 +133,7 @@ export class PersonalDetailsComponent extends BaseComponent implements OnInit {
         this.careerProfile.GoogleAddress = $event.formatted;
     }
 
+    // @CodeReview : G002 : can reuse alreayd created method 
     connectWithSocial(type): void {
         const params = {
             environment: environment.envName,

frontend/angular/src/app/components/my-career-web/mc-shared/mc-shared.module.ts

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
+import { DialogModule } from 'primeng/dialog';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputMaskModule } from 'primeng/inputmask';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { ProgressBarModule } from 'primeng/progressbar';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { ToastModule } from 'primeng/toast';
+import { AssessmentService } from '../services/assessment.service';
 import { HelperService } from '../services/helper.service';
+import { PersonalDetailsService } from '../services/personal-details.service';
 import { ToasterService } from '../services/toaster.service';
 import { FormControlComponent } from './form-control/form-control.component';
-import { OverlayComponent } from './overlay/overlay.component';
-import { DropdownModule } from 'primeng/dropdown';
-import { AutoCompleteModule } from 'primeng/autocomplete';
-import { PersonalDetailsService } from '../services/personal-details.service';
-import { InputSwitchModule } from 'primeng/inputswitch';
-import { ButtonModule } from 'primeng/button';
 import { GooglePlacesAutocompleteDirective } from './google-places-autocomplete.directive';
-import { InputMaskModule } from 'primeng/inputmask';
-import { ProgressBarModule } from 'primeng/progressbar';
-import { AssessmentService } from '../services/assessment.service';
+import { OverlayComponent } from './overlay/overlay.component';
 import { TruncatePipe } from './truncate.pipe';
-import { DialogModule } from 'primeng/dialog';
 import { TabViewModule } from 'primeng/primeng';
 
 const MODULES = [

frontend/angular/src/app/components/my-career/view-career-user/view-career-user.component.html

@@ -9,7 +9,8 @@
                     <button pButton type="button" label="Save" icon="ui-icon-save" (click)="saveUser(false)"></button>
                 </div>
                 <div class="ui-toolbar-group-right">
-                    <button pButton type="button" icon="ui-icon-cancel" label="Cancel" [routerLink]="['/my-career/my-career-users']" class="secondary-btn"></button>
+                    <button pButton type="button" icon="ui-icon-cancel" label="Cancel" [routerLink]="['/my-career/my-career-users']" 
+                            class="secondary-btn"></button>
                 </div>
             </p-toolbar>
         </div>
@@ -48,7 +49,8 @@
         </div>
         <div class="ui-g-12 ui-md-3" *ngIf="careerUser.Candidate.ReferredBy">
             <p-button label="Remove Referred By" (onClick)="removeReferredBy()" icon="ui-icon-delete"></p-button>
-            <a [routerLink]="['/my-career/view-career-user', careerUser.Candidate.ReferredBy.ObjectID]" class="data-link" style="">{{user?.Candidate?.ReferredBy?.Name}}</a>
+            <a [routerLink]="['/my-career/view-career-user', careerUser.Candidate.ReferredBy.ObjectID]" class="data-link" style="">
+                {{user?.Candidate?.ReferredBy?.Name}}</a>
         </div>
     </div>
     <div class="ui-g">