templates carousel ui issues, job create view

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

@@ -95,7 +95,7 @@
         .template-img-wrapper {
             .template-img {
                 height: auto !important;
-                min-height: 300px;
+                min-height: 56vh;
             }
         }
     }

frontend/angular/src/app/my-career-web/jobs/job/job.component.html

-<p>
-  job works!
-</p>
+<div class="mc-page">
+
+    <div class="mc-page-header">
+        <div class="mc-page-header-logo">
+            <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
+        </div>
+    </div>
+
+    <div class="mc-page-body container">
+        <div class="mc-card">
+            <app-overlay [isActive]="isLoading"></app-overlay>
+
+            <div class="mc-page-body-heading">{{isEditMode ? 'Update' : 'Enter'}} Job Details </div>
+
+            <div class="row">
+                <div class="col-md-6 form-group">
+                    <label>Job Title</label>
+                    <app-form-control>
+                        <input type="text" class="form-control" placeholder="Enter job title" required name="JobTitle"
+                               [(ngModel)]="applicantJob.JobTitle">
+                    </app-form-control>
+                </div>
+
+                <div class="col-md-6 form-group">
+                    <label>Employer</label>
+                    <app-form-control>
+                        <input type="text" class="form-control" placeholder="Enter Employer" required name="Employer"
+                               [(ngModel)]="applicantJob.Employer">
+                    </app-form-control>
+                </div>
+
+                <div class="col-md-6 form-group">
+                    <label>Contact Name</label>
+                    <app-form-control>
+                        <input type="text" class="form-control" placeholder="Enter contact name" required name="ContactName"
+                               [(ngModel)]="applicantJob.ContactName">
+                    </app-form-control>
+                </div>
+
+                <div class="col-md-6 form-group">
+                    <label>Where was Job Posted?</label>
+                    <app-form-control>
+                        <p-dropdown placeholder="Select job post location" [options]="jobPostLocations"
+                                    [dropdownIcon]="isLoadingJobLocations ? 'pi pi-spin pi-spinner' : 'pi pi-chevron-down'"
+                                    optionLabel="Description" name="JobPostedLocation" dataKey="Value"
+                                    [(ngModel)]="applicantJob.JobPostedLocation">
+                        </p-dropdown>
+                    </app-form-control>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>

frontend/angular/src/app/my-career-web/jobs/job/job.component.ts

 import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../../base/base.component';
+import { ApplicantJobModel } from '../../models/applicant-job.model';
+import { JobService } from '../../services/job.service';
+import { takeUntil } from 'rxjs/operators';
+import { UtilsService } from '../../../oneit/services/utils.service';
 
 @Component({
     selector: 'app-job',
     templateUrl: './job.component.html',
     styleUrls: ['./job.component.scss']
 })
-export class JobComponent implements OnInit {
+export class JobComponent extends BaseComponent implements OnInit {
 
-  constructor() { }
+    applicantJob: ApplicantJobModel = new ApplicantJobModel();
+
+    isLoadingJobLocations = false;
+    jobPostLocations = [];
+
+    constructor(
+        private jobService: JobService,
+        private utilsService: UtilsService
+    ) {
+        super();
+    }
 
     ngOnInit() {
+        this.getJobPostLocations();
+    }
+
+    getJobPostLocations(): void {
+        this.isLoadingJobLocations = true;
+        this.jobService.getJobPostedLocation()
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.isLoadingJobLocations = false;
+                this.jobPostLocations = response;
+            }, err => {
+                this.isLoadingJobLocations = false;
+                this.utilsService.handleError(err);
+            })
     }
 
 }

frontend/angular/src/app/my-career-web/models/applicant-job.model.ts

@@ -5,6 +5,8 @@ export class ApplicantJobModel extends BaseModel {
     ObjectClass = CLASSES.Job;
     JobTitle: string;
     Employer: string;
+    ContactName: string;
     ApplicantJobStatus: string;
+    JobPostedLocation: any;
     JobStatus: any;
 }

frontend/angular/src/app/my-career-web/services/job.service.ts

@@ -29,4 +29,9 @@ export class JobService {
     }
 
 
+    getJobPostedLocation(): Observable<any> {
+        return this.enumService.getEnums('JobPostedLocations', true);
+    }
+
+
 }

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

@@ -21,6 +21,7 @@
         .ui-carousel-viewport {
             width: 75%;
             max-height: 90vh;
+            overflow: auto !important;
         }
 
         .ui-carousel-item {
@@ -87,3 +88,12 @@
         }
     }
 }
+
+
+.pi-arrow-circle-right:before {
+    content: 'chevron_right' !important;
+}
+
+.pi-arrow-circle-left:before {
+    content: 'chevron_right' !important;
+}