Build company page out

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

@@ -39,6 +39,97 @@ button {
     justify-content: center;
 }
 
+.content-edit {
+    position: absolute;
+    right: 20px;
+}
+
 .center-item img {
     width: 300px;
 }
+
+.content-name {
+    width: 300px;
+    text-align: center;
+    font-size: 30px;
+}
+
+.content-name h1 {
+    margin: 0;
+}
+
+.content-link {
+    display: flex;
+    width: 300px;
+    justify-content: center;
+}
+
+.content-link a {
+    text-decoration: none;
+    color: var(--Mistox-White);
+    margin-top: auto;
+}
+
+.content-desc {
+    border: solid 1px red;
+    border-radius: 5px;
+    padding: 20px;
+    margin: 0 100px;
+    margin-bottom: 0px;
+    margin-bottom: 50px;
+}
+
+.content-desc h1 {
+    margin: 0;
+    font-size: 20px;
+    color: #ddd;
+}
+
+.content-button {
+    display: flex;
+    justify-content: center;
+}
+
+.content-button span {
+    align-content: center;
+}
+
+.split-frame {
+    display: flex;
+    width: 100%;
+}
+
+.half-frame {
+    width: 50%;
+    border-right: solid 1px var(--Mistox-Black);
+    border-left: solid 1px var(--Mistox-Black);
+}
+
+.half-frame h2 {
+    text-align: center;
+}
+
+.job-tile {
+    display: flex;
+    background-color: var(--Mistox-Black);
+    justify-content: end;
+    align-items: center;
+    border-radius: 10px;
+    margin: 0 5px;
+    margin-bottom: 10px;
+}
+
+.center-text {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+}
+
+.job-tile h1 {
+    margin: 0;
+}
+
+.job-tile button {
+    color: white;
+    border-color: white;
+}

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

@@ -1,25 +1,50 @@
 <div class="top-bar">
     <button *ngFor="let company of Employers" (click)="changeSelectedCompany(company.company.id!)">{{ company.company.name.toUpperCase() }}</button>
-    <button routerLink="/company/connect" >CONNECT A COMPANY</button>
+    <button routerLink="/company/editor" >CONNECT A COMPANY</button>
 </div>
 <div class="content-frame">
     <div *ngIf="Comp != null">
+        <button class="content-edit" style="color: #fff; border-color: #fff;" routerLink="/company/editor" [queryParams]="{ CompanyID: Comp.id }" >EDIT COMPANY</button>
         <div class="center-item">
-            <div><a [href]="'mailto:' + Comp.email" >{{ Comp.email }}</a></div>
+            <a [href]="Comp.websiteURL">
-            <div><h1>{{ Comp.name }}</h1></div>
+                <img [src]="Comp.logo" />
-            <div><a [href]="Comp.websiteURL">{{ Comp.websiteURL }}</a></div>
+            </a>
         </div>
         <div class="center-item">
-            <img [src]="Comp.logo" />
+            <div class="content-link"><a [href]="'mailto:' + Comp.email" >{{ Comp.email }}</a></div>
+            <div class="content-name"><h1>{{ Comp.name }}</h1></div>
+            <div class="content-link"><a [href]="'tel:' + Comp.phone">{{ Comp.phone }}</a></div>
         </div>
-        <h1>{{ Comp.emailVerified }}</h1>
+        <div class="center-item">
+            <h1>{{ Comp.city }}, {{ Comp.stateOrRegion }} {{ Comp.postalCode }}</h1>
+        </div>
+        <div class="content-desc">
+            <h1 *ngFor="let line of Desc">{{ line }}</h1>
+        </div>
+        <div class="content-button" *ngIf="Comp.emailVerified">
+            <button style="color: #fff; border-color: #fff;" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >POST JOB</button>
+        </div>
+        <div class="content-button" *ngIf="!Comp.emailVerified">
+            <button style="color: #fff; border-color: #fff;" routerLink="/" [queryParams]="{ CompanyID: Comp.id }" >VERIFY EMAIL</button>
+            <span>You must verify your company email before you can post job listings.</span>
+        </div>
+        <hr />
+        <div class="split-frame">
+            <div class="half-frame">
+                <h2>Active Job Listings</h2>
+                <div class="job-tile" *ngFor="let listing of List">
+                    <div class="center-text">
+                        <h1>{{ listing.title }}</h1>
+                    </div>
+                    <button [routerLink]="['/jobs/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW LISTING</button>
+                    <button [routerLink]="['/jobs/editor']" [queryParams]="{ JobID: listing.id }" >EDIT LISTING</button>
+                    <button (click)="RemoveJobListing(listing.id!)">DELETE LISTING</button>
+                </div>
+            </div>
+            <div class="half-frame">
+                <h2>Employees</h2>
                 
-        <h1>{{ Comp.phone }}</h1>
+            </div>
-        <h1>{{ Comp.postalCode }}</h1>
+        </div>
-        <h1>{{ Comp.country }}</h1>
-        <h1>{{ Comp.stateOrRegion }}</h1>
-        <h1>{{ Comp.city }}</h1>
-        <h1>{{ Comp.description }}</h1>
-        <button routerLink="/company/jobs" [queryParams]="{ CompanyID: Comp.id }" >ACTIVE JOB LISTINGS</button>
     </div>
 </div>

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

@@ -6,6 +6,7 @@ import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Authentication } from 'app/services/Authentication';
 import { Company, Employee } from 'app/models/Company';
+import { JobListing } from 'app/models/JobListing';
 
 @Component({
   selector: 'main-company',
@@ -17,13 +18,22 @@ export class CompanyComponent {
   public ErrorMsg: string = "";
 
   public Employers: Employee[] = [];
+
   public Comp: Company | null = null;
+  public Desc: string[] = [];
+
+  public List: JobListing[] = [];
 
   constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication  ) {
     this.title.setTitle("Companies | BoredCareers");
     http.get<Employee[]>("api/employee/").subscribe({
       next: data => {
         this.Employers = data;
+        if (data[0] != null){
+          if (data[0].company.id !== null){
+            this.changeSelectedCompany(data[0].company.id);
+          }
+        }
       },
       error: err => {
         this.ErrorMsg = err.error;
@@ -36,6 +46,27 @@ export class CompanyComponent {
     this.http.get<Company>("api/company?CompanyID=" + companyID).subscribe({
       next: data => {
         this.Comp = data;
+        this.Desc = data.description.split("\n");
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
+      }
+    });
+
+    this.http.get<JobListing[]>("api/joblisting/company?CompanyID=" + companyID).subscribe({
+      next: data => {
+        this.List = 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;