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

Create UI flow for New Job

Browse Source
This commit is contained in:
Derek Holloway
2025-07-18 15:11:12 -07:00
parent 2916fa977c
commit 935c3e9049
3 changed files with 211 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Client/src/app/pages/main/jobs/new/jobnew.component.css
+72
View File
@@ -1,3 +1,75 @@
.title-text {
width: 100%;
text-align: center;
}
form {
display: grid;
grid-template-areas: "stack";
position: relative;
width: 100%;
overflow: hidden;
transition: 0.5s;
}
.center {
width: 100%;
display: flex;
justify-content: center;
}
.sub-frame {
position: relative;
grid-area: stack;
transition: 0.5s;
width: 100%;
text-align: center;
}
.content-frame {
background-color: #00000088;
border-radius: 10px;
padding: 40px;
break-inside: avoid;
}
.split {
column-count: 2;
}
.half-frame {
width: 400px;
break-inside: avoid;
}
.content-frame label {
color: #FFF;
}
.content-frame textarea {
width: calc(100% - 40px);
margin: 0 20px;
height: 200px;
resize: none;
}
.content-frame input {
width: calc(50% - 24px);
margin: 0 calc(25% + 10px);
margin-bottom: 20px;
appearance: textfield;
}
.content-frame input:focus ~ label {
color: green;
}
.content-frame select {
width: calc(50% - 24px);
margin: 0 calc(25% + 10px);
margin-bottom: 20px;
}
.tile-frame { .tile-frame {
column-count: 4; column-count: 4;
column-gap: 20px; column-gap: 20px;
src/Client/src/app/pages/main/jobs/new/jobnew.component.html
+97 -47
View File
@@ -1,56 +1,106 @@
<div class="title-text">
<h1>POST A NEW JOB</h1>
</div>
<form (ngSubmit)="PostJobListing(newListing)"> <form (ngSubmit)="PostJobListing(newListing)">
<div> <!-- Title -->
<h1>Title</h1> <div #step class="sub-frame">
<input name="title" [(ngModel)]="newListing.title" type="text" /> <div class="center">
</div> <div class="content-frame">
<div> <label>Title</label>
<h1>Description</h1> <input name="title" [(ngModel)]="newListing.title" type="text" />
<input name="description" [(ngModel)]="newListing.description" type="text" /> <button type="button" (click)="nextStep()">Next</button>
</div> </div>
<div>
<div>
<h1>Postal Code</h1>
<input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" />
</div>
<div>
<h1>Country</h1>
<input name="country" [(ngModel)]="newListing.country" type="text" />
</div>
<div>
<h1>State/Region</h1>
<input name="stateOrRegion" [(ngModel)]="newListing.stateOrRegion" type="text" />
</div>
<div>
<h1>City</h1>
<input name="city" [(ngModel)]="newListing.city" type="text" />
</div> </div>
</div> </div>
<div>
<div> <!-- Description -->
<h1>Minimum Salary</h1> <div #step class="sub-frame">
<input name="salaryMin" [(ngModel)]="newListing.salaryMin" type="number" /> <div class="center">
</div> <div class="content-frame">
<div> <label>Description</label>
<h1>Maximum Salary</h1> <textarea name="description" [(ngModel)]="newListing.description" type="text"></textarea>
<input name="salaryMax" [(ngModel)]="newListing.salaryMax" type="number" /> <button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button>
</div>
</div> </div>
</div> </div>
<div>
<h1>Job Type</h1> <!-- Location -->
<select name="jobType" [(ngModel)]="newListing.jobType"> <div #step class="sub-frame">
<option value="">-- Select Job Type --</option> <div class="center">
<option value="Full-time">Full-time</option> <div class="content-frame split">
<option value="Part-time">Part-time</option> <div class="half-frame">
<option value="Contract">Contract</option> <label>City</label>
<option value="Temporary">Temporary</option> <input name="city" [(ngModel)]="newListing.city" type="text" />
<option value="Internship">Internship</option> </div>
</select> <div class="half-frame">
<label>2 Letter Country</label>
<input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" />
</div>
<div class="half-frame">
<label>2 Letter State/Region</label>
<input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" />
</div>
<div class="half-frame">
<label>Postal Code</label>
<input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" />
</div>
<button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button>
</div>
</div>
</div> </div>
<div>
<h1>Remote Position</h1> <!-- Salary Range -->
<input name="remote" [(ngModel)]="newListing.remote" type="checkbox" /> <div #step class="sub-frame">
<div class="center">
<div class="content-frame split">
<div class="half-frame">
<label>Minimum Salary</label>
<input name="salaryMin" [(ngModel)]="newListing.salaryMin" type="number" />
</div>
<div class="half-frame">
<label>Maximum Salary</label>
<input name="salaryMax" [(ngModel)]="newListing.salaryMax" type="number" />
</div>
<button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button>
</div>
</div>
</div> </div>
<div>
<button type="submit">CREATE JOB LISTING</button> <!-- Job Type -->
<div #step class="sub-frame">
<div class="center">
<div class="content-frame split">
<div class="half-frame">
<label>Job Type</label>
<select name="jobType" [(ngModel)]="newListing.jobType">
<option value="">-- Select Job Type --</option>
<option value="Full-time">Full-time</option>
<option value="Part-time">Part-time</option>
<option value="Contract">Contract</option>
<option value="Temporary">Temporary</option>
<option value="Internship">Internship</option>
</select>
</div>
<div class="half-frame">
<label>Remote Position</label>
<input name="remote" [(ngModel)]="newListing.remote" type="checkbox" />
</div>
<button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button>
</div>
</div>
</div>
<!-- Submit -->
<div #step class="sub-frame">
<div class="center">
<div class="content-frame">
<button type="button" (click)="prevStep()">Back</button>
<button type="submit">CREATE JOB LISTING</button>
</div>
</div>
</div> </div>
</form> </form>
src/Client/src/app/pages/main/jobs/new/jobnew.component.ts
+42 -1
View File
@@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { Router, ActivatedRoute, RouterModule } from '@angular/router'; import { Router, ActivatedRoute, RouterModule } from '@angular/router';
@@ -15,6 +15,9 @@ import { Authentication } from 'app/services/Authentication';
}) })
export class JobNewComponent { export class JobNewComponent {
@ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>;
currentStep: number = 0;
public newListing: JobListing = new JobListing(); public newListing: JobListing = new JobListing();
public ErrorMsg: string = ""; public ErrorMsg: string = "";
@@ -22,6 +25,44 @@ export class JobNewComponent {
this.title.setTitle("Jobs - new | BoredCareers"); this.title.setTitle("Jobs - new | BoredCareers");
}; };
ngAfterViewInit(){
this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
if (i === this.currentStep) {
step.nativeElement.style.left = '0%';
} else if (i < this.currentStep) {
step.nativeElement.style.left = '-100%';
} else {
step.nativeElement.style.left = '100%';
}
});
}
nextStep(){
this.currentStep += 1;
this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
if (i === this.currentStep) {
step.nativeElement.style.left = '0%';
} else if (i < this.currentStep) {
step.nativeElement.style.left = '-100%';
} else {
step.nativeElement.style.left = '100%';
}
});
}
prevStep(){
this.currentStep -= 1;
this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
if (i === this.currentStep) {
step.nativeElement.style.left = '0%';
} else if (i < this.currentStep) {
step.nativeElement.style.left = '-100%';
} else {
step.nativeElement.style.left = '100%';
}
});
}
PostJobListing(jobListing: JobListing){ PostJobListing(jobListing: JobListing){
this.http.post("api/joblisting", jobListing).subscribe({ this.http.post("api/joblisting", jobListing).subscribe({
next: data => { next: data => {