derek/boredcareers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start work for dropdown filtering

Browse Source
This commit is contained in:
Derek Holloway
2025-10-13 20:54:20 -07:00
parent 436ae6d543
commit 1de00480cc
4 changed files with 89 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Client/package-lock.json
Generated
+20 -3
View File
@@ -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
+12 -4
View File
@@ -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;
font-size: 20px;
width: 100%;
}
.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
+41 -14
View File
@@ -1,35 +1,57 @@
<!-- Filter Bar -->
<div class="top-bar">
<div class="top-bar-sub">
<h1>Country</h1>
<input name="CountryCode" [(ngModel)]="currentFilter.CountryCode" (ngModelChange)="checkUpdate()" type="text" />
<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">
<h1>Postal Code</h1>
<input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" (ngModelChange)="checkUpdate()" type="text" />
<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">
<h1>Distance</h1>
<input name="Distance" [(ngModel)]="currentFilter.Distance" type="number" />
<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">
<h1>Job Type</h1>
<div>
<h1>Job Type</h1>
</div>
<input name="CountryCode" [(ngModel)]="currentFilter.JobType" type="text" />
</div>
<div class="top-bar-sub">
<h1>Remote</h1>
<input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
</div>
<div class="top-bar-sub">
<h1>Minimum Salary</h1>
<div>
<h1>Minimum Salary</h1>
</div>
<input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" />
</div>
<div class="top-bar-sub">
<h1>Maximum Salary</h1>
<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 -7
View File
@@ -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;
}
});
}
checkUpdate(){
if ( this.currentFilter.PostalCode === "" || this.currentFilter.CountryCode === "" ){
this.currentFilter.Distance = null;
}
this.http.get<string[]>("/api/location/distinct").subscribe({
next: data => {
this.countryOptions = data;
this.currentFilter.CountryCode = "US";
},
error: err => {
this.ErrorMsg = err.error;
}
});
this.currentFilter.JobsPerPage = this.itemsPerPageOptions[0];
this.currentFilter.Distance = this.distanceOptions[0];
}
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){