Merge in UI updates #19

Merged
derek merged 12 commits from working into main 2025-08-05 21:05:24 -07:00
2 changed files with 62 additions and 47 deletions
Showing only changes of commit b4b85ec238 - Show all commits
@@ -1,33 +1,14 @@
<div class="title-text"> <div class="title-text">
<h1>POST A NEW JOB</h1> <h1>POST A NEW JOB</h1>
</div> </div>
<form (ngSubmit)="PostJobListing(newListing)"> <form (ngSubmit)="SubmitForm(Listing)">
<!-- Attach To Company -->
<div #step class="sub-frame">
<div class="center">
<div class="content-frame">
<label>For What Company</label>
<select name="company" [(ngModel)]="selectedCompany">
<option *ngFor="let cur of employeeOfList" [ngValue]="cur.company">{{ cur.company.name }}</option>
</select>
<button type="button" (click)="nextStep()">Next</button>
</div>
<div class="footer-frame">
<span>
Choose the company you want the listing to be created under.
</span>
<button [routerLink]="['/company/connect']">CONNECT A NEW COMPANY</button>
</div>
</div>
</div>
<!-- Title --> <!-- Title -->
<div #step class="sub-frame"> <div #step class="sub-frame">
<div class="center"> <div class="center">
<div class="content-frame"> <div class="content-frame">
<label>Job Title</label> <label>Job Title</label>
<input name="title" [(ngModel)]="newListing.title" type="text" /> <input name="title" [(ngModel)]="Listing.title" type="text" />
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
@@ -40,7 +21,7 @@
<div class="content-frame split"> <div class="content-frame split">
<div class="half-frame"> <div class="half-frame">
<label>Job Type</label> <label>Job Type</label>
<select name="jobType" [(ngModel)]="newListing.jobType"> <select name="jobType" [(ngModel)]="Listing.jobType">
<option value="Full-time">Full-time</option> <option value="Full-time">Full-time</option>
<option value="Part-time">Part-time</option> <option value="Part-time">Part-time</option>
<option value="Contract">Contract</option> <option value="Contract">Contract</option>
@@ -50,7 +31,7 @@
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>Remote Position</label> <label>Remote Position</label>
<input name="remote" [(ngModel)]="newListing.remote" type="checkbox" /> <input name="remote" [(ngModel)]="Listing.remote" type="checkbox" />
</div> </div>
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
@@ -59,28 +40,28 @@
</div> </div>
<!-- Location --> <!-- Location -->
<div #step *ngIf="!newListing.remote" class="sub-frame"> <div #step *ngIf="!Listing.remote" class="sub-frame">
<div class="center"> <div class="center">
<h2>Job Location</h2> <h2>Job Location</h2>
<div> <div>
<div class="content-frame split" style="border-radius: 10px 10px 0 0;"> <div class="content-frame split" style="border-radius: 10px 10px 0 0;">
<div class="half-frame"> <div class="half-frame">
<label>City</label> <label>City</label>
<input name="city" [(ngModel)]="newListing.city" type="text" /> <input name="city" [(ngModel)]="Listing.city" type="text" />
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>2 Letter State/Region</label> <label>2 Letter State/Region</label>
<input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" /> <input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="Listing.stateOrRegion" type="text" />
</div> </div>
</div> </div>
<div class="content-frame split" style="border-radius: 0 0 10px 10px;"> <div class="content-frame split" style="border-radius: 0 0 10px 10px;">
<div class="half-frame"> <div class="half-frame">
<label>2 Letter Country</label> <label>2 Letter Country</label>
<input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" /> <input name="country" maxlength="2" minlength="2" [(ngModel)]="Listing.country" type="text" />
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>Postal Code</label> <label>Postal Code</label>
<input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" /> <input name="postalCode" [(ngModel)]="Listing.postalCode" type="text" />
</div> </div>
</div> </div>
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
@@ -96,11 +77,11 @@
<div class="content-frame split"> <div class="content-frame split">
<div class="half-frame"> <div class="half-frame">
<label>Minimum Salary</label> <label>Minimum Salary</label>
<input name="salaryMin" [(ngModel)]="newListing.salaryMin" type="number" /> <input name="salaryMin" [(ngModel)]="Listing.salaryMin" type="number" />
</div> </div>
<div class="half-frame"> <div class="half-frame">
<label>Maximum Salary</label> <label>Maximum Salary</label>
<input name="salaryMax" [(ngModel)]="newListing.salaryMax" type="number" /> <input name="salaryMax" [(ngModel)]="Listing.salaryMax" type="number" />
</div> </div>
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
@@ -113,7 +94,7 @@
<div class="center"> <div class="center">
<div class="content-frame"> <div class="content-frame">
<label>Description</label> <label>Description</label>
<textarea name="description" [(ngModel)]="newListing.description" type="text"></textarea> <textarea name="description" [(ngModel)]="Listing.description" type="text"></textarea>
<button type="button" (click)="prevStep()">Back</button> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
@@ -15,31 +15,46 @@ import { Company, Employee } from 'app/models/Company';
imports: [ FormsModule, CommonModule, RouterModule ] imports: [ FormsModule, CommonModule, RouterModule ]
}) })
export class JobEditorComponent { export class JobEditorComponent {
public ErrorMsg: string = "";
@ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>; @ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>;
currentStep: number = 0; currentStep: number = 0;
public employeeOfList: Employee[] = []; public Listing: JobListing = new JobListing();
public selectedCompany: Company = new Company;
public newListing: JobListing = new JobListing(); public mode: string = "";
public ErrorMsg: string = ""; public modeID: number = 0;
constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) { constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
this.title.setTitle("Jobs - Editor | BoredCareers"); this.title.setTitle("Jobs - Editor | BoredCareers");
this.http.get<Employee[]>("api/employee").subscribe({ this.route.queryParams.subscribe(params => {
next: empOf => { const CompanyID = params['CompanyID'] ? +params['CompanyID'] : null;
if (empOf.length === 0){ const JobID = params['JobID'] ? +params['JobID'] : null;
router.navigate(["company/connect"]); if (CompanyID !== null && JobID !== null){
} this.router.navigate([""]);
this.employeeOfList = empOf; }else if (CompanyID !== null ){
}, this.mode = "new";
error: err => { this.modeID = CompanyID;
this.ErrorMsg = err.error; }else if(JobID !== null){
this.mode = "edit";
this.modeID = JobID;
}else if (CompanyID === null && JobID === null){
this.router.navigate([""]);
}
if (this.mode === "edit") {
this.http.get<JobListing>("api/joblisting/" + JobID).subscribe({
next: data => {
this.Listing = data;
},
error: err => {
this.ErrorMsg = err.error;
}
});
} }
}); });
}; }
ngAfterViewInit(){ ngAfterViewInit(){
this.formSteps.changes.subscribe(() => { this.formSteps.changes.subscribe(() => {
@@ -70,8 +85,8 @@ export class JobEditorComponent {
this.updateUI(); this.updateUI();
} }
PostJobListing(jobListing: JobListing){ PostNewJob(jobListing: JobListing){
jobListing.companyID = this.selectedCompany.id!; jobListing.companyID = this.modeID;
this.http.post("api/joblisting", jobListing).subscribe({ this.http.post("api/joblisting", jobListing).subscribe({
next: data => { next: data => {
this.router.navigate([""]); this.router.navigate([""]);
@@ -82,4 +97,23 @@ export class JobEditorComponent {
}); });
} }
PostEditJob(jobListing: JobListing){
this.http.post("api/joblisting", jobListing).subscribe({
next: data => {
this.router.navigate([""]);
},
error: err => {
this.ErrorMsg = err.error;
}
});
}
SubmitForm(job: JobListing){
if (this.mode === "new"){
this.PostNewJob(job);
}else if (this.mode === "edit"){
this.PostEditJob(job);
}
}
} }