From 9ee4a83759eb410d66c7f4ec4e49affd425faf41 Mon Sep 17 00:00:00 2001
From: Derek Holloway <derek@mistox.com>
Date: Wed, 15 Oct 2025 17:04:56 -0700
Subject: [PATCH] Fix the number per page

---
 .../src/app/pages/jobs/jobs.component.css     |   3 +
 .../src/app/pages/jobs/jobs.component.html    | 103 +++++++++---------
 .../src/app/pages/jobs/jobs.component.ts      |   1 +
 3 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/src/Client/src/app/pages/jobs/jobs.component.css b/src/Client/src/app/pages/jobs/jobs.component.css
index d9f8b07..c574c24 100644
--- a/src/Client/src/app/pages/jobs/jobs.component.css
+++ b/src/Client/src/app/pages/jobs/jobs.component.css
@@ -124,6 +124,9 @@ button {
 }
 
 .jobs-per-page {
+    position: absolute;
+    bottom: 100px;
+    right: 0;
     display: flex;
     justify-content: end;
     padding: 20px;
diff --git a/src/Client/src/app/pages/jobs/jobs.component.html b/src/Client/src/app/pages/jobs/jobs.component.html
index 6ef06fa..8549a14 100644
--- a/src/Client/src/app/pages/jobs/jobs.component.html
+++ b/src/Client/src/app/pages/jobs/jobs.component.html
@@ -1,65 +1,70 @@
-<!-- Filter Bar -->
-<div class="top-bar">
-    <div class="top-bar-sub">
-        <div>
-            <h1>Country</h1>
-        </div>
-        <select name="CountryCode" [(ngModel)]="currentFilter.CountryCode" type="text">
-                @for(cur of countryOptions; track cur){
-                    <option [value]="cur">{{cur}}</option>
-                }
-            </select>
-    </div>
-    <div class="top-bar-sub">
-        <div>
-            <h1>Postal Code</h1>
-        </div>
-        <input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" type="text" />
-    </div>
-    @if (currentFilter.CountryCode != null && currentFilter.CountryCode !== "" && currentFilter.PostalCode != null && currentFilter.PostalCode !== ""){
+<div class="tile-frame">
+
+    <!-- Filter -->
+    <div class="tile">
         <div class="top-bar-sub">
             <div>
-                <h1>Distance</h1>
+                <h1>Country</h1>
             </div>
-            <select name="Distance" [(ngModel)]="currentFilter.Distance" type="number">
-                @for(cur of distanceOptions; track cur){
+            <select name="CountryCode" [(ngModel)]="currentFilter.CountryCode" type="text">
+                    @for(cur of countryOptions; track cur){
+                        <option [value]="cur">{{cur}}</option>
+                    }
+                </select>
+        </div>
+        <div class="top-bar-sub">
+            <div>
+                <h1>Postal Code</h1>
+            </div>
+            <input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" type="text" />
+        </div>
+        @if (currentFilter.CountryCode != null && currentFilter.CountryCode !== "" && currentFilter.PostalCode != null && currentFilter.PostalCode !== ""){
+            <div class="top-bar-sub">
+                <div>
+                    <h1>Distance</h1>
+                </div>
+                <select name="Distance" [(ngModel)]="currentFilter.Distance" type="number">
+                    @for(cur of distanceOptions; track cur){
+                        <option [value]="cur">{{cur}}</option>
+                    }
+                </select>
+            </div>
+        }
+        <div class="top-bar-sub">
+            <div>
+                <h1>Job Type</h1>
+            </div>
+            <select name="JobType" [(ngModel)]="currentFilter.JobType" type="text">
+                @for(cur of jobTypeOptions; track cur){
                     <option [value]="cur">{{cur}}</option>
                 }
             </select>
         </div>
-    }
-    <div class="top-bar-sub">
-        <div>
-            <h1>Job Type</h1>
+        <div class="top-bar-sub">
+            <div>
+                <h1>Minimum Salary</h1>
+            </div>
+            <input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" />
         </div>
-        <input name="CountryCode" [(ngModel)]="currentFilter.JobType" type="text" />
-    </div>
-    <div class="top-bar-sub">
-        <div>
-            <h1>Minimum Salary</h1>
+        <div class="top-bar-sub">
+            <div>
+                <h1>Maximum Salary</h1>
+            </div>
+            <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" type="number" />
         </div>
-        <input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" />
-    </div>
-    <div class="top-bar-sub">
-        <div>
-            <h1>Maximum Salary</h1>
+        <div class="top-bar-sub">
+            <div>
+                <h1>Remote</h1>
+            </div>
+            <input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
         </div>
-        <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" type="number" />
-    </div>
-    <div class="top-bar-sub">
-        <div>
-            <h1>Remote</h1>
+        <div class="top-bar-sub">
+            <h1></h1>
+            <input name="ApplyButton" style="height: 25px;" value="APPLY" type="button" (click)="reloadFilters()" />
         </div>
-        <input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
     </div>
-    <div class="top-bar-sub">
-        <h1></h1>
-        <input name="ApplyButton" style="height: 25px;" value="APPLY" type="button" (click)="reloadFilters()" />
-    </div>
-</div>
 
-<!-- Avaliable Jobs -->
-<div class="tile-frame">
+    <!-- Avaliable Jobs -->
     @for (cur of JobListingPage; track cur.id){
         <div class="tile">
             <div class="tile-title">
diff --git a/src/Client/src/app/pages/jobs/jobs.component.ts b/src/Client/src/app/pages/jobs/jobs.component.ts
index 53e0111..69b14f9 100644
--- a/src/Client/src/app/pages/jobs/jobs.component.ts
+++ b/src/Client/src/app/pages/jobs/jobs.component.ts
@@ -19,6 +19,7 @@ export class JobsComponent {
   public distanceOptions = [10, 25, 50, 100];
   public itemsPerPageOptions = [10, 25, 50, 100];
   public countryOptions: string[] = [];
+  public jobTypeOptions: string[] = ["", "Full-time", "Part-time", "Contract", "Temporary", "Internship"];
 
   public currentFilter: JobFilter;
   public JobListingPage: JobListing[] = [];