career history - skills view completed

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

-<p>
-  skills works!
-</p>
+<h4 class="tab-heading">Tell us about your Skills</h4>
+
+<div class="row" style="margin-top: 24px;">
+    <div class="col-md-12">
+        <span>We have identified the following skills based on your Work experience, Educational qualifications or certification. How would you rate yourself? </span>
+    </div>
+</div>
+
+
+<div class="row skill-wrapper">
+
+    <div class="col-md-12">
+        <div class="skill-name">New Product Launch</div>
+    </div>
+
+    <div class="col-md-6">
+        <p-selectButton [options]="options"></p-selectButton>
+    </div>
+
+</div>
+
+
+<div class="row">
+    <div class="col-md-12">
+        <button pButton class="btn btn-info-outline add-more" label="Add Skill +"></button>
+    </div>
+</div>
+
+
+
+<div class="d-flex justify-content-center" style="margin-top: 48px;">
+    <button pButton label="Next Section" class="ui-button-info next-section"></button>
+</div>
+

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

+.skill-wrapper {
+    margin-top: 24px;
+}

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

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-skills',
-  templateUrl: './skills.component.html',
-  styleUrls: ['./skills.component.scss']
+    selector: 'app-skills',
+    templateUrl: './skills.component.html',
+    styleUrls: ['./skills.component.scss']
 })
 export class SkillsComponent implements OnInit {
 
-  constructor() { }
+    options = [
+        {label: 'New York', value: {id: 1, name: 'New York', code: 'NY'}},
+        {label: 'Rome', value: {id: 2, name: 'Rome', code: 'RM'}},
+        {label: 'London', value: {id: 3, name: 'London', code: 'LDN'}},
+        {label: 'Istanbul', value: {id: 4, name: 'Istanbul', code: 'IST'}},
+        {label: 'Paris', value: {id: 5, name: 'Paris', code: 'PRS'}}
+    ];
 
-  ngOnInit() {
-  }
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
 
 }

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

@@ -22,6 +22,7 @@ import { TruncatePipe } from './truncate.pipe';
 import { TabViewModule } from 'primeng/tabview';
 import { CalendarModule } from 'primeng/calendar';
 import { FileUploadModule } from 'primeng/fileupload';
+import { SelectButtonModule } from 'primeng/selectbutton';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -39,6 +40,7 @@ const MODULES = [
     TabViewModule,
     CalendarModule,
     FileUploadModule,
+    SelectButtonModule
 ];
 
 const COMPONENTS = [

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

@@ -73,6 +73,11 @@
             background: #127BAD;
         }
 
+        &:disabled {
+            background: #b1bcc1;
+            pointer-events: none;
+        }
+
         &.google-login {
             background-color: #de5246;
 

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

@@ -28,7 +28,7 @@
         white-space: nowrap;
     }
 
-    .experience-wrapper, .education-wrapper {
+    .experience-wrapper, .education-wrapper, .skill-wrapper {
         margin-bottom: 32px;
     }
 

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

@@ -22,5 +22,6 @@
     @import "primeng/tab-view";
     @import "primeng/calendar";
     @import "primeng/file-upload";
+    @import "primeng/select-button";
 
 }

frontend/angular/src/styles/my-career-styles/primeng/_select-button.scss

+.ui-selectbutton {
+    border-color: $primaryColor;
+
+    .ui-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        border-color: $primaryColor !important;
+
+        &:first-child {
+            border-left: 0;
+        }
+        &-text {
+            margin-top: 0;
+            color: $primaryColor !important;
+        }
+
+        &.ui-state-active {
+            color: $white;
+            background: $primaryColor !important;
+        }
+    }
+}