Split job post to under company

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

@@ -0,0 +1,87 @@
+button {
+    width: 150px;
+    border-radius: 5px;
+    margin: 10px;
+    text-align: center;
+    padding: 15px 0;
+    transition: .5s;
+    background-color: #0000;
+    border: 1px solid var(--Mistox-White);
+    color: var(--Mistox-White);
+    text-decoration: none;
+}
+
+    button:hover {
+        background-color: #00000044;
+        color: var(--Mistox-Light);
+    }
+
+.full-width {
+    display: block;
+    width: 100%;
+    column-count: 2;
+}
+
+.tile-frame {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 20px;
+    padding: 20px;
+    width: calc(100% - 40px);
+}
+
+.tile{
+    background-color: var(--Mistox-Dark);
+    color: var(--Mistox-White);
+    break-inside: avoid;
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+}
+
+.jobs-frame {
+    width: 100%;
+    background-color: #8888;
+    border-top: 2px solid black;
+}
+
+.post-job-frame {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+}
+
+.tile-title {
+    text-align: center;
+    border-bottom: 1px solid;
+}
+
+.tile-title h1 {
+    font-size: 40px;
+    margin: 5px 0;
+}
+
+.tile-title h2 {
+    font-size: 14px;
+}
+
+.tile-split {
+    columns: 2;
+    text-align: center;
+    padding: 10px 0;
+}
+
+.tile-split h1 {
+    margin: 0;
+}
+
+.tile-button {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.post-job-frame button {
+    border-color: var(--Mistox-Black);
+    color: var(--Mistox-Black);
+}

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

@@ -0,0 +1,23 @@
+<div class="post-job-frame">
+    <button [routerLink]="['/jobs/editor']">POST JOB</button>
+</div>
+
+<div *ngIf="auth.isLoggedIn" class="jobs-frame">
+    <div class="posted-jobs-frame" *ngFor="let cur of MyJobListings">
+        <div class="tile">
+            <h1>{{ cur.title }}</h1>
+            <h1>{{ cur.jobType }}</h1>
+            <h1>Is Remote: {{ cur.remote }}</h1>
+            <h1>{{ cur.salaryMin }}</h1>
+            <h1>{{ cur.salaryMax }}</h1>
+            <h1>{{ cur.city }}</h1>
+            <h1>{{ cur.stateOrRegion }}</h1>
+            <h1>{{ cur.country }}</h1>
+            <h1>{{ cur.postalCode }}</h1>
+            <h1>Posted: {{ cur.createdTime }}</h1>
+            <h1>Modified: {{ cur.modifiedTime }}</h1>
+        </div>
+        <button [routerLink]="['/jobs/editor']" [queryParams]="{ JobID: cur.id }" >EDIT</button>
+        <button (click)="RemoveJobListing(cur.id)">DELETE</button>
+    </div>
+</div>

src/Client/src/app/pages/main/company/jobs/jobs.component.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { JobListing } from 'app/models/JobListing';
+import { Authentication } from 'app/services/Authentication';
+
+@Component({
+  selector: 'main-company-jobs',
+  templateUrl: './jobs.component.html',
+  styleUrls: [ './jobs.component.css' ],
+  imports: [ FormsModule, CommonModule, RouterModule ]
+})
+export class CompanyJobsComponent {
+
+  public MyJobListings: JobListing[] = [];
+  public JobListingPage: JobListing[] = [];
+  public ErrorMsg: string = "";
+
+  public Page: number = 1;
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication  ) {
+    this.title.setTitle("Company - Jobs | BoredCareers");
+
+    if (this.Page == 1){
+
+    }
+
+    http.get<JobListing[]>("api/joblisting?PageQuantity=" + 10 + "&Page=" + 1).subscribe({
+      next: data => {
+        this.JobListingPage = data;
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
+      }
+    });
+
+  };
+
+  RemoveJobListing( JobListingID: number ){
+    this.http.delete("api/joblisting?JobListingID=" + JobListingID).subscribe({
+      next: data => {
+        window.location.reload();
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
+      }
+    });
+  }
+
+}

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

@@ -1,27 +1,3 @@
-<!-- My Jobs -->
-<div *ngIf="auth.isLoggedIn" class="jobs-frame">
-    <div class="posted-jobs-frame" *ngFor="let cur of MyJobListings">
-        <div class="tile">
-            <h1>{{ cur.title }}</h1>
-            <h1>{{ cur.jobType }}</h1>
-            <h1>Is Remote: {{ cur.remote }}</h1>
-            <h1>{{ cur.salaryMin }}</h1>
-            <h1>{{ cur.salaryMax }}</h1>
-            <h1>{{ cur.city }}</h1>
-            <h1>{{ cur.stateOrRegion }}</h1>
-            <h1>{{ cur.country }}</h1>
-            <h1>{{ cur.postalCode }}</h1>
-            <h1>Posted: {{ cur.createdTime }}</h1>
-            <h1>Modified: {{ cur.modifiedTime }}</h1>
-        </div>
-        <button [routerLink]="['/jobs/edit']" [queryParams]="{ JobID: cur.id }" >EDIT</button>
-        <button (click)="RemoveJobListing(cur.id)">DELETE</button>
-    </div>
-    <div class="post-job-frame">
-        <button [routerLink]="['/jobs/new']">POST JOB</button>
-    </div>
-</div>
-
 <!-- Avaliable Jobs -->
 <div class="tile-frame" *ngFor="let cur of JobListingPage">
     <div class="tile">
@@ -38,7 +14,7 @@
             <h1>{{ cur.stateOrRegion }}</h1>
         </div>
         <div class="tile-button">
-            <button [routerLink]="['/jobs/new']">VIEW LISTING</button>
+            <button [routerLink]="['/jobs/viewer']"  [queryParams]="{ JobID: cur.id }" >VIEW LISTING</button>
         </div>
     </div>
 </div>