Fix the number per page

This commit is contained in:
2025-10-15 17:04:56 -07:00
parent 0f557a5bc7
commit 9ee4a83759
3 changed files with 58 additions and 49 deletions
@@ -124,6 +124,9 @@ button {
} }
.jobs-per-page { .jobs-per-page {
position: absolute;
bottom: 100px;
right: 0;
display: flex; display: flex;
justify-content: end; justify-content: end;
padding: 20px; padding: 20px;
@@ -1,65 +1,70 @@
<!-- Filter Bar --> <div class="tile-frame">
<div class="top-bar">
<div class="top-bar-sub"> <!-- Filter -->
<div> <div class="tile">
<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="top-bar-sub"> <div class="top-bar-sub">
<div> <div>
<h1>Distance</h1> <h1>Country</h1>
</div> </div>
<select name="Distance" [(ngModel)]="currentFilter.Distance" type="number"> <select name="CountryCode" [(ngModel)]="currentFilter.CountryCode" type="text">
@for(cur of distanceOptions; track cur){ @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> <option [value]="cur">{{cur}}</option>
} }
</select> </select>
</div> </div>
} <div class="top-bar-sub">
<div class="top-bar-sub"> <div>
<div> <h1>Minimum Salary</h1>
<h1>Job Type</h1> </div>
<input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" />
</div> </div>
<input name="CountryCode" [(ngModel)]="currentFilter.JobType" type="text" /> <div class="top-bar-sub">
</div> <div>
<div class="top-bar-sub"> <h1>Maximum Salary</h1>
<div> </div>
<h1>Minimum Salary</h1> <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" type="number" />
</div> </div>
<input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" /> <div class="top-bar-sub">
</div> <div>
<div class="top-bar-sub"> <h1>Remote</h1>
<div> </div>
<h1>Maximum Salary</h1> <input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
</div> </div>
<input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" type="number" /> <div class="top-bar-sub">
</div> <h1></h1>
<div class="top-bar-sub"> <input name="ApplyButton" style="height: 25px;" value="APPLY" type="button" (click)="reloadFilters()" />
<div>
<h1>Remote</h1>
</div> </div>
<input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
</div> </div>
<div class="top-bar-sub">
<h1></h1>
<input name="ApplyButton" style="height: 25px;" value="APPLY" type="button" (click)="reloadFilters()" />
</div>
</div>
<!-- Avaliable Jobs --> <!-- Avaliable Jobs -->
<div class="tile-frame">
@for (cur of JobListingPage; track cur.id){ @for (cur of JobListingPage; track cur.id){
<div class="tile"> <div class="tile">
<div class="tile-title"> <div class="tile-title">
@@ -19,6 +19,7 @@ export class JobsComponent {
public distanceOptions = [10, 25, 50, 100]; public distanceOptions = [10, 25, 50, 100];
public itemsPerPageOptions = [10, 25, 50, 100]; public itemsPerPageOptions = [10, 25, 50, 100];
public countryOptions: string[] = []; public countryOptions: string[] = [];
public jobTypeOptions: string[] = ["", "Full-time", "Part-time", "Contract", "Temporary", "Internship"];
public currentFilter: JobFilter; public currentFilter: JobFilter;
public JobListingPage: JobListing[] = []; public JobListingPage: JobListing[] = [];