calendar view added

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

@@ -45,7 +45,7 @@ export class RegisterComponent extends BaseComponent {
             return this.hs.validateAllFormFields(this.form);
         }
 
-        this.registerForm.firstname = this.registerForm.username.split('@')[1];
+        this.registerForm.firstname = this.registerForm.username.split('@')[0];
         this.registerForm.lastname = this.registerForm.firstname;
         this.registerForm.email = this.registerForm.username;
         if (!this.registerForm.was_referred) {

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

@@ -27,12 +27,12 @@
             </div>
 
 
-            <div class="assessment-body-tabs mc-card">
+            <div class="assessment-body-tabs mc-card career-builder">
                 <p-tabView>
                     <p-tabPanel header="1. Personal Data">
                         <app-personal-data></app-personal-data>
                     </p-tabPanel>
-                    <p-tabPanel header="2. Work History">
+                    <p-tabPanel header="2. Work History" [selected]="true">
                         <app-work-history></app-work-history>
                     </p-tabPanel>
                     <p-tabPanel header="3. Education">

frontend/angular/src/app/components/my-career-web/career-history/career-history/personal-data/personal-data.component.html

@@ -53,4 +53,19 @@
             <input type="text"  class="form-control" placeholder="Skype" name="Skype">
 <!--        </app-form-control>-->
     </div>
+
+    <div class="col-md-12 form-group">
+        <label>Personal Statement</label>
+        <!--        <app-form-control>-->
+        <textarea class="form-control"></textarea>
+        <!--        </app-form-control>-->
+    </div>
+
+
+    <div class="col-md-12 form-group">
+        <label>Achievements</label>
+        <!--        <app-form-control>-->
+        <textarea class="form-control"></textarea>
+        <!--        </app-form-control>-->
+    </div>
 </div>

frontend/angular/src/app/components/my-career-web/career-history/career-history/personal-data/personal-data.component.scss

-@import "~styles/my-career-styles/variables";
-
-.tab-heading {
-    color: #58595B;
-    font-family: $bodyFont;
-    font-size: 18px;
-    margin: 12px 0 0;
-}
-
-.info-label {
-    padding: 8px;
-    font-size: 12px;
-    font-family: $bodyFont;
-    background: lightblue;
-    color: #12709a;
-    border-radius: 4px;
-    margin-top: 8px;
-    text-align: center;
-}
 

frontend/angular/src/app/components/my-career-web/career-history/career-history/work-history/work-history.component.html

-<p>
-  work-history works!
-</p>
+<h4 class="tab-heading">Tell us about your most recent job</h4>
+
+<div class="row" style="margin-top: 24px;">
+    <div class="col-md-12 form-group">
+        <p-checkbox label="I don't have any work experience"></p-checkbox>
+    </div>
+</div>
+
+
+<div class="row experience-wrapper">
+
+    <div class="col-md-9 form-group">
+        <div class="row">
+            <div class="col-md-6">
+                <label>Employer</label>
+                <input type="text" class="form-control" placeholder="Employeer name" name="Skype">
+            </div>
+            <div class="col-md-4">
+                <div class="row">
+                    <div class="col-md-6">
+                        <label>Start</label>
+                        <p-calendar></p-calendar>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label>End</label>
+                        <p-calendar></p-calendar>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-2 currently-work-checkbox">
+                <p-checkbox label="I currently work here"></p-checkbox>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-9">
+        <div class="row">
+            <div class="col-md-6 form-group">
+                <label>Actual job title</label>
+                <input type="text" class="form-control" placeholder="Actual Title" name="Skype">
+            </div>
+            <div class="col-md-6 form-group">
+                <label>ILO job title</label>
+                <input type="text" class="form-control" placeholder="ILO Title" name="Skype">
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-6 form-group">
+        <label>Reason for Leaving (OPTIONAL)</label>
+        <textarea class="form-control"></textarea>
+    </div>
+    <div class="col-md-6 form-group">
+        <label>Duties and Responsibilities</label>
+        <textarea class="form-control"></textarea>
+    </div>
+
+</div>
+
+
+<div class="row">
+    <div class="col-md-12">
+        <button pButton class="btn btn-info-outline add-more" label="Add Experience +"></button>
+    </div>
+</div>
+
+

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

@@ -19,7 +19,8 @@ import { FormControlComponent } from './form-control/form-control.component';
 import { GooglePlacesAutocompleteDirective } from './google-places-autocomplete.directive';
 import { OverlayComponent } from './overlay/overlay.component';
 import { TruncatePipe } from './truncate.pipe';
-import { TabViewModule } from 'primeng/primeng';
+import { TabViewModule } from 'primeng/tabview';
+import { CalendarModule } from 'primeng/calendar';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -34,7 +35,8 @@ const MODULES = [
     InputMaskModule,
     ProgressBarModule,
     DialogModule,
-    TabViewModule
+    TabViewModule,
+    CalendarModule
 ];
 
 const COMPONENTS = [

frontend/angular/src/styles/my-career-styles/_form.scss

@@ -38,3 +38,11 @@
 
     }
 }
+
+textarea {
+    resize: none;
+
+    &.form-control {
+        height: 84px !important;
+    }
+}

frontend/angular/src/styles/my-career-styles/_profile-builder.scss

+.career-builder {
+
+    .tab-heading {
+        color: #58595B;
+        font-family: $bodyFont;
+        font-size: 18px;
+        margin: 12px 0 0;
+    }
+
+    .info-label {
+        padding: 8px;
+        font-size: 12px;
+        font-family: $bodyFont;
+        background: lightblue;
+        color: #12709a;
+        border-radius: 4px;
+        margin-top: 8px;
+        text-align: center;
+    }
+
+    .form-group {
+        margin-bottom: 16px;
+    }
+
+
+    .currently-work-checkbox {
+        margin-top: 40px;
+        white-space: nowrap;
+    }
+
+    .experience-wrapper {
+        margin-bottom: 32px;
+    }
+
+    .add-more {
+        width: 200px;
+        height: 40px;
+        background: transparent;
+        color: $primaryColor;
+        border: 1px solid $primaryColor;
+        position: static;
+        transition: .3s;
+
+
+        &:hover {
+            background: $primaryColor;
+            color: $white;
+        }
+
+
+        &:after {
+            content: '';
+            position: absolute;
+            left: 230px;
+            right: 12px;
+            border-bottom: 1px solid #E0E0E0;
+            top: 20px;
+        }
+
+    }
+}

frontend/angular/src/styles/my-career-styles/_styles.scss

@@ -9,6 +9,7 @@
     @import "form";
     @import "misc";
     @import "auth";
+    @import "profile-builder";
     @import "primeng/radio";
     @import "primeng/checkbox";
     @import "primeng/toast";
@@ -19,5 +20,6 @@
     @import "primeng/mask";
     @import "primeng/progressbar";
     @import "primeng/tab-view";
+    @import "primeng/calendar";
 
 }

frontend/angular/src/styles/my-career-styles/primeng/_calendar.scss

+.ui-calendar {
+
+    .ui-inputtext {
+        padding: 6px 12px;
+        height: 46px;
+        background-image: none !important;
+        border: 2px solid #E0E0E0;
+        width: 100%;
+        border-radius: 4px;
+    }
+}

frontend/angular/src/styles/my-career-styles/primeng/_checkbox.scss

@@ -18,6 +18,7 @@ p-checkbox {
 
         &-label {
             margin-bottom: 0;
+            font-family: $bodyFont;
         }
     }
 }