Make filter a top bar

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

@@ -14,6 +14,34 @@ button {
         background-color: var(--mistox-button-primary-click);
     }
 
+.top-bar {
+    display: flex;
+    break-inside: avoid;
+    padding: 20px;
+    border-radius: 20px;
+    margin: 20px;
+    background-color: var(--mistox-bg-medium);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
+}
+
+.top-bar-sub {
+    display: flex;
+    height: 20px;
+}
+
+.top-bar-sub :nth-child(1) {
+    margin: 0;
+    font-size: 20px;
+}
+
+.top-bar-sub :nth-child(2) {
+    margin-right: 50px;
+    margin-left: 5px;
+    height: 15px;
+}
+
 .full-width {
     display: block;
     width: 100%;

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

@@ -1,30 +1,32 @@
 <!-- Filter Bar -->
-<div>
+<div class="top-bar">
-    <div>
+    <div class="top-bar-sub">
         <h1>Country</h1>
         <input name="CountryCode" [(ngModel)]="currentFilter.CountryCode" (ngModelChange)="reloadFilters()" type="text" />
     </div>
-    <div>
+    <div class="top-bar-sub">
         <h1>Postal Code</h1>
         <input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" (ngModelChange)="reloadFilters()" type="text" />
     </div>
-    <div>
+    @if (currentFilter.CountryCode != null && currentFilter.CountryCode !== "" && currentFilter.PostalCode != null && currentFilter.PostalCode !== ""){
+        <div class="top-bar-sub">
             <h1>Distance</h1>
             <input name="Distance" [(ngModel)]="currentFilter.Distance" (ngModelChange)="reloadFilters()" type="number" />
         </div>
-    <div>
+    }
+    <div class="top-bar-sub">
         <h1>Job Type</h1>
         <input name="CountryCode" [(ngModel)]="currentFilter.JobType" (ngModelChange)="reloadFilters()" type="text" />
     </div>
-    <div>
+    <div class="top-bar-sub">
         <h1>Remote</h1>
         <input name="Remote" [(ngModel)]="currentFilter.Remote" (ngModelChange)="reloadFilters()" type="checkbox" />
     </div>
-    <div>
+    <div class="top-bar-sub">
         <h1>Minimum Salary</h1>
         <input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" (ngModelChange)="reloadFilters()" type="number" />
     </div>
-    <div>
+    <div class="top-bar-sub">
         <h1>Maximum Salary</h1>
         <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" (ngModelChange)="reloadFilters()" type="number" />
     </div>

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

@@ -41,6 +41,10 @@ export class JobsComponent {
   reloadFilters(){
     var queryBuilder = "api/joblisting?PageQuantity=" + this.currentFilter.JobsPerPage + "&Page=" + this.currentFilter.CurrentPage;
 
+    if ( this.currentFilter.PostalCode === "" || this.currentFilter.CountryCode === "" ){
+      this.currentFilter.Distance = null;
+    }
+
     if (this.currentFilter.PostalCode != null){
       queryBuilder += "&PC=" + this.currentFilter.PostalCode;
     }