src/Client/src/app/pages/main/jobs/jobs.component.css

@@ -1,3 +1,9 @@
+.full-width {
+    display: block;
+    width: 100%;
+    column-count: 2;
+}
+
 .tile-frame {
     column-count: 4;
     column-gap: 20px;

src/Client/src/app/pages/main/jobs/jobs.component.html

@@ -19,7 +19,7 @@
         <button (click)="RemoveJobListing(cur.id)">DELETE</button>
     </div>
     <div>
-        <button [routerLink]="['/jobs/new']">NEW</button>
+        <button [routerLink]="['/jobs/new']">POST JOB</button>
     </div>
 </div>
 

src/Client/src/app/pages/main/jobs/new/jobnew.component.html

@@ -2,12 +2,28 @@
     <h1>POST A NEW JOB</h1>
 </div>
 <form (ngSubmit)="PostJobListing(newListing)">
+
+    <!-- Attach To Company -->
+    <div #step class="sub-frame">
+        <div class="center">
+            <div class="content-frame">
+                <label>For What Company</label>
+                <select name="company" [(ngModel)]="selectedCompany">
+                    <option value="">-- Select Company --</option>
+                    <option *ngFor="let cur of employeeOfList" [ngValue]="cur.company">{{ cur.company.name }}</option>
+                </select>
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+        </div>
+    </div>
+
     <!-- Title -->
     <div #step class="sub-frame">
         <div class="center">
             <div class="content-frame">
                 <label>Job Title</label>
                 <input name="title" [(ngModel)]="newListing.title" type="text" />
+                <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
         </div>

src/Client/src/app/pages/main/jobs/new/jobnew.component.ts

@@ -6,6 +6,7 @@ import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { JobListing } from 'app/models/JobListing';
 import { Authentication } from 'app/services/Authentication';
+import { Company, Employee } from 'app/models/Company';
 
 @Component({
   selector: 'main-jobs-new',
@@ -18,11 +19,26 @@ export class JobNewComponent {
   @ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>;
   currentStep: number = 0;
 
+  public employeeOfList: Employee[] = [];
+  public selectedCompany: Company = new Company;
+
   public newListing: JobListing = new JobListing();
   public ErrorMsg: string = "";
 
   constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
     this.title.setTitle("Jobs - new | BoredCareers");
+
+    this.http.get<Employee[]>("api/employee").subscribe({
+      next: empOf => {
+        if (empOf.length === 0){
+          router.navigate(["company/connect"]);
+        }
+        this.employeeOfList = empOf;
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
+      }
+    });
   };
 
   ngAfterViewInit(){
@@ -64,12 +80,13 @@ export class JobNewComponent {
   }
 
   PostJobListing(jobListing: JobListing){
+    jobListing.companyID = this.selectedCompany.id;
     this.http.post("api/joblisting", jobListing).subscribe({
       next: data => {
-        
+        this.router.navigate([""]);
       },
       error: err => {
-        alert("Failed to create the job listing. Try again");
+        this.ErrorMsg = err.error;
       }
     });
   }