Start work for dropdown filtering

src/Client/package-lock.json

@@ -247,6 +247,7 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.0.3.tgz",
       "integrity": "sha512-HqqVqaj+xzByWJOIrONVRkpvM6mRuGmC+m9wKixhc9f+xXsymVTBR6xg+G/RwyYP2NuC5chxIZbaJTz2Hj+6+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -263,6 +264,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.0.3.tgz",
       "integrity": "sha512-CShPNvqqV5Cleyho8CKtcFlt7l2thHPUdXZPtKHH3Zf43KojvJbJksZLBz6ZbyoQdgxNMYSfbh4h0UbSGtPOzQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -276,6 +278,7 @@
       "integrity": "sha512-u+fYnx1sRrwL0fd8kaAD2LqJjfe/Zj7zyOv0A3Ue7r8jzdNsPU8MWr/QyBaWlqSpPEpR+kD3xmDvRT9ra9RTBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.27.4",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -417,6 +420,7 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.0.3.tgz",
       "integrity": "sha512-kB6w1bQgClfmkTbWJeD3vSLqX0e3uSaJD6KJ7XXT1IEaqUs4J+mKRKHQyxpJlpdUb7R+jDaHSM/vrVF15/L2rA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -460,6 +464,7 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.0.3.tgz",
       "integrity": "sha512-cba0bibw9dJ8b+a2a8mwkiq5/HPiakY9P5OiJEVefN+2V/K9CND/pW+KIbW0/P6KhSSDQ29xgcGRseVtkjYLmg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -526,6 +531,7 @@
       "integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1417,6 +1423,7 @@
       "integrity": "sha512-5AOrZPf2/GxZ+SDRZ5WFplCA2TAQgK3OYrXCYmJL5NaTu4ECcoWFlfUZuw7Es++6Njv7iu/8vpYJhuzxUH76Vg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.1.6",
         "@inquirer/confirm": "^5.1.10",
@@ -3286,6 +3293,7 @@
       "integrity": "sha512-MX4Zioh39chHlDJbKmEgydJDS3tspMP/lnQC67G3SWsTnb9NeYVWOjkxpOSy4oMfPs4StcWHwBrvUb4ybfnuaw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.8.0"
       }
@@ -3601,6 +3609,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001718",
         "electron-to-chromium": "^1.5.160",
@@ -5542,7 +5551,8 @@
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.7.1.tgz",
       "integrity": "sha512-QnurrtpKsPoixxG2R3d1xP0St/2kcX5oTZyDyQJMY+Vzi/HUlu1kGm+2V8Tz+9lV991leB1l0xcsyz40s9xOOw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -5634,6 +5644,7 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -7483,6 +7494,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -7518,6 +7530,7 @@
       "integrity": "sha512-sF6TWQqjFvr4JILXzG4ucGOLELkESHL+I5QJhh7CNaE+Yge0SI+ehCatsXhJ7ymU1hAFcIS3/PBpjdIbXoyVbg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -8272,7 +8285,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "3.0.1",
@@ -8322,6 +8336,7 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8488,6 +8503,7 @@
       "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -8925,7 +8941,8 @@
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
       "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     }
   }
 }

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

@@ -15,11 +15,10 @@ button {
     }
 
 .top-bar {
-    display: flex;
-    flex-wrap: wrap;
     break-inside: avoid;
     padding: 20px;
     border-radius: 20px;
+    width: 400px;
     margin: 20px;
     background-color: var(--mistox-bg-medium);
     border: 1px solid var(--mistox-border);
@@ -31,11 +30,15 @@ button {
     display: flex;
     height: 40px;
     align-items: center;
+    width: 100%;
+}
+
+.top-bar-sub h1 {
+    font-size: 20px;
 }
 
 .top-bar-sub :nth-child(1) {
-    margin: 0;
+    width: 100%;
-    font-size: 20px;
 }
 
 .top-bar-sub :nth-child(2) {
@@ -44,6 +47,7 @@ button {
     margin-top: 0;
     padding: initial;
     height: 20px;
+    width: 100%;
 }
 
 .full-width {
@@ -132,6 +136,10 @@ button {
     font-size: 20px;
 }
 
+.jobs-per-page select {
+    width: 100px;
+}
+
 @media (max-width: 1920px) {
     .tile-frame{
         grid-template-columns: repeat(3, 1fr);

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

@@ -1,35 +1,57 @@
 <!-- Filter Bar -->
 <div class="top-bar">
     <div class="top-bar-sub">
+        <div>
             <h1>Country</h1>
-        <input name="CountryCode" [(ngModel)]="currentFilter.CountryCode" (ngModelChange)="checkUpdate()" type="text" />
+        </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>
-        <input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" (ngModelChange)="checkUpdate()" type="text" />
+        </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>
-            <input name="Distance" [(ngModel)]="currentFilter.Distance" type="number" />
+            </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>
         <input name="CountryCode" [(ngModel)]="currentFilter.JobType" type="text" />
     </div>
     <div class="top-bar-sub">
-        <h1>Remote</h1>
+        <div>
-        <input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
-    </div>
-    <div class="top-bar-sub">
             <h1>Minimum Salary</h1>
+        </div>
         <input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" />
     </div>
     <div class="top-bar-sub">
+        <div>
             <h1>Maximum Salary</h1>
+        </div>
         <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" type="number" />
     </div>
+    <div class="top-bar-sub">
+        <div>
+            <h1>Remote</h1>
+        </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()" />
@@ -65,5 +87,10 @@
 
 <div class="jobs-per-page">
     <h1>Jobs Per Page</h1>
-    <input name="JobsPerPage" [(ngModel)]="currentFilter.JobsPerPage" (ngModelChange)="reloadFilters()" type="number" />
+    <select name="JobsPerPage" [(ngModel)]="currentFilter.JobsPerPage" (ngModelChange)="reloadFilters()" type="number">
+        @for(cur of itemsPerPageOptions; track cur){
+            <option [value]="cur">{{cur}}</option>
+        }
+    </select>
+
 </div>

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

@@ -16,6 +16,10 @@ import { JobFilter } from 'app/models/JobFilter';
 })
 export class JobsComponent {
 
+  public distanceOptions = [10, 25, 50, 100];
+  public itemsPerPageOptions = [10, 25, 50, 100];
+  public countryOptions: string[] = [];
+
   public currentFilter: JobFilter;
   public JobListingPage: JobListing[] = [];
   public ErrorMsg: string = "";
@@ -36,12 +40,17 @@ export class JobsComponent {
         this.ErrorMsg = err.error;
       }
     });
+    this.http.get<string[]>("/api/location/distinct").subscribe({
+      next: data => {
+        this.countryOptions = data;
+        this.currentFilter.CountryCode = "US";
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
       }
-
+    });
-  checkUpdate(){
+    this.currentFilter.JobsPerPage = this.itemsPerPageOptions[0];
-    if ( this.currentFilter.PostalCode === "" || this.currentFilter.CountryCode === "" ){
+    this.currentFilter.Distance = this.distanceOptions[0];
-      this.currentFilter.Distance = null;
-    }
   }
 
   reloadFilters(){
@@ -57,7 +66,7 @@ export class JobsComponent {
     if (this.currentFilter.CountryCode != null){
       queryBuilder += "&CC=" + this.currentFilter.CountryCode;
     }
-    if (this.currentFilter.Distance != null){
+    if (this.currentFilter.PostalCode != null && this.currentFilter.CountryCode != null){
       queryBuilder += "&D=" + this.currentFilter.Distance;
     }
     if (this.currentFilter.JobType != null){