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

Work more on resume editor

Browse Source
This commit is contained in:
Derek Holloway
2025-08-18 20:34:36 -07:00
parent 50aafc17ee
commit 5fa8b37d50
3 changed files with 220 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Client/src/app/pages/resumes/editor/editor.component.css
+67 -5
View File
@@ -1,16 +1,20 @@
input, textarea {
border: none;
border: 1px solid #444;
background-color: transparent;
}
textarea {
resize: vertical;
}
h1 {
margin: 0;
font-size: 15px;
}
.paper {
width: 70vw;
aspect-ratio: 1 / 1.294;
width: 800px;
aspect-ratio: 17 / 22;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin: auto;
@@ -18,8 +22,18 @@ h1 {
border: 1px solid #ddd;
}
.spacer {
margin: 0 10px;
}
.spacer-title {
display: flex;
margin: 10px 0;
}
.columns {
columns: 2;
column-gap: 10px;
}
.resume-header {
@@ -34,11 +48,59 @@ h1 {
.resume-section {
break-inside: avoid;
background-color: #DDDDDD;
margin: 10px;
margin-bottom: 10px;
}
.resume-sub-section {
border: 1px solid #666666;
margin: 5px;
padding: 10px;
}
.title-text {
margin: 0;
height: 20px;
}
.header-left {
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.header-right {
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
.header-location input{
width: 80px;
}
.Add {
position: relative;
float: right;
width: 20px;
height: 20px;
background-color: #0F0;
border: none;
bottom: 20px;
}
.Del {
position: relative;
float: right;
width: 20px;
height: 20px;
background-color: #F00;
border: none;
}
.flex-two-row {
display: flex;
flex: 1;
}
src/Client/src/app/pages/resumes/editor/editor.component.html
+44 -23
View File
@@ -9,29 +9,36 @@
</div>
<div class="paper">
<div class="spacer">
<!-- Resume Header -->
<div class="resume-section">
<div class="resume-section spacer-title">
<div class="header-left">
<input [name]="'resumename' + resume.trackUUID" [(ngModel)]="resume.name" type="text" placeholder="Full Name" />
<input [name]="'resumefield' + resume.trackUUID" [(ngModel)]="resume.field" type="text" placeholder="Career Field" />
<input [name]="'resumecity' + resume.trackUUID" [(ngModel)]="resume.city" type="text" placeholder="City / Locality" />
<input [name]="'resumestateOrRegion' + resume.trackUUID" [(ngModel)]="resume.stateOrRegion" type="text" placeholder="State / Region" />
<div class="header-location">
<input [name]="'resumecity' + resume.trackUUID" [(ngModel)]="resume.city" type="text" placeholder="City" />
<input [name]="'resumestateOrRegion' + resume.trackUUID" [(ngModel)]="resume.stateOrRegion" type="text" placeholder="State" />
<input [name]="'resumecountry' + resume.trackUUID" [(ngModel)]="resume.country" type="text" placeholder="Country" />
<input [name]="'resumepostalCode' + resume.trackUUID" [(ngModel)]="resume.postalCode" type="text" placeholder="Postal Code" />
</div>
</div>
<div class="header-right">
<input [name]="'resumeemail' + resume.trackUUID" [(ngModel)]="resume.email" type="email" placeholder="Email Address" />
<input [name]="'resumephoneNumber' + resume.trackUUID" [(ngModel)]="resume.phoneNumber" type="tel" placeholder="Phone number" />
</div>
</div>
<div class="columns">
<!-- Experience -->
<div class="resume-section">
<button type="button" (click)="addExperience()">ADD Experience</button>
<h1 class="title-text">Experience</h1>
@for(experience of resume.experiences; track experience.trackUUID ){
<button class="Del" type="button" (click)="delExperience(experience)">X</button>
<div class="resume-sub-section">
<button type="button" (click)="delExperience(experience)">DEL Experience</button>
<input [name]="'experiencejobTitle' + experience.trackUUID" [(ngModel)]="experience.jobTitle" type="text" placeholder="Job Title" />
<input [name]="'experiencecompany' + experience.trackUUID" [(ngModel)]="experience.company" type="text" placeholder="Company" />
<input [name]="'experiencecity' + experience.trackUUID" [(ngModel)]="experience.city" type="text" placeholder="City / Locality" />
<input [name]="'experiencestateOrRegion' + experience.trackUUID" [(ngModel)]="experience.stateOrRegion" type="text" placeholder="State / Region" />
<input [name]="'experiencecity' + experience.trackUUID" [(ngModel)]="experience.city" type="text" placeholder="City" />
<input [name]="'experiencestateOrRegion' + experience.trackUUID" [(ngModel)]="experience.stateOrRegion" type="text" placeholder="State" />
<input [name]="'experiencecountry' + experience.trackUUID" [(ngModel)]="experience.country" type="text" placeholder="Country" />
<input [name]="'experiencepostalCode' + experience.trackUUID" [(ngModel)]="experience.postalCode" type="text" placeholder="Postal Code" />
<input [name]="'experiencestillEmployed' + experience.trackUUID" [(ngModel)]="experience.stillEmployed" type="checkbox" />
@@ -48,11 +55,13 @@
}
</div>
}
<button class="Add" type="button" (click)="addExperience()">+</button>
</div>
<!-- Military -->
@if(resume.military !== null){
<div class="resume-section">
<h1 class="title-text">Military</h1>
<input [name]="'militarycountry' + resume.military.trackUUID" [(ngModel)]="resume.military.country" type="text" placeholder="Country" />
<input [name]="'militaryrank' + resume.military.trackUUID" [(ngModel)]="resume.military.rank" type="text" placeholder="Rank" />
<h1>Still Serving: </h1><input [name]="'stillServing' + resume.military.trackUUID" [(ngModel)]="resume.military.stillServing" type="checkbox" />
@@ -73,15 +82,15 @@
<!-- Education -->
<div class="resume-section">
<button type="button" (click)="addEducation()">ADD Education</button>
<h1 class="title-text">Education</h1>
@for(education of resume.educations; track education.trackUUID){
<button class="Del" type="button" (click)="delEducation(education)">X</button>
<div class="resume-sub-section">
<button type="button" (click)="delEducation(education)">DEL Education</button>
<input [name]="'educationschool' + education.trackUUID" [(ngModel)]="education.school" type="text" placeholder="School" />
<input [name]="'educationdegreeType' + education.trackUUID" [(ngModel)]="education.degreeType" type="text" placeholder="Type" />
<input [name]="'educationdegreeField' + education.trackUUID" [(ngModel)]="education.degreeField" type="text" placeholder="Field" />
<input [name]="'educationcity' + education.trackUUID" [(ngModel)]="education.city" type="text" placeholder="City / Locality" />
<input [name]="'educationstateOrRegion' + education.trackUUID" [(ngModel)]="education.stateOrRegion" type="text" placeholder="State / Region" />
<input [name]="'educationcity' + education.trackUUID" [(ngModel)]="education.city" type="text" placeholder="City" />
<input [name]="'educationstateOrRegion' + education.trackUUID" [(ngModel)]="education.stateOrRegion" type="text" placeholder="State" />
<input [name]="'educationcountry' + education.trackUUID" [(ngModel)]="education.country" type="text" placeholder="Country" />
<input [name]="'educationpostalCode' + education.trackUUID" [(ngModel)]="education.postalCode" type="text" placeholder="Postal Code" />
<input [name]="'educationstillStudying' + education.trackUUID" [(ngModel)]="education.stillStudying" type="checkbox" />
@@ -91,57 +100,69 @@
}
</div>
}
<button class="Add" type="button" (click)="addEducation()">+</button>
</div>
<!-- Skill -->
<div class="resume-section">
<button type="button" (click)="addSkill()">ADD Skill</button>
<h1 class="title-text">Skills</h1>
@for(skill of resume.skills; track skill.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delSkill(skill)">DEL Skill</button>
<button class="Del" type="button" (click)="delSkill(skill)">X</button>
<div class="resume-sub-section flex-two-row">
<div>
<input [name]="'skillname' + skill.trackUUID" [(ngModel)]="skill.name" type="text" placeholder="Skill" />
</div>
<textarea [name]="'skilldescription' + skill.trackUUID" [(ngModel)]="skill.description" placeholder="Description"></textarea>
</div>
}
<button class="Add" type="button" (click)="addSkill()">+</button>
</div>
<!-- Language -->
<div class="resume-section">
<button type="button" (click)="addLanguage()">ADD Language</button>
<h1 class="title-text">Languages</h1>
@for(language of resume.languages; track language.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delLanguage(language)">DEL Language</button>
<button class="Del" type="button" (click)="delLanguage(language)">X</button>
<div class="resume-sub-section flex-two-row">
<input [name]="'languagelanguage' + language.trackUUID" [(ngModel)]="language.language" type="text" placeholder="Language" />
<input [name]="'languageproficiency' + language.trackUUID" [(ngModel)]="language.proficiency" type="text" placeholder="Proficiency" />
</div>
}
<button class="Add" type="button" (click)="addLanguage()">+</button>
</div>
<!-- Certification -->
<div class="resume-section">
<button type="button" (click)="addCert()">ADD Certification</button>
<h1 class="title-text">Certifications</h1>
@for(cert of resume.certifications; track cert.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delCert(cert)">DEL Certification</button>
<button class="Del" type="button" (click)="delCert(cert)">X</button>
<div class="resume-sub-section flex-two-row">
<div>
<input [name]="'certname' + cert.trackUUID" [(ngModel)]="cert.name" type="text" placeholder="Certification Name" />
<input [name]="'certverificationURL' + cert.trackUUID" [(ngModel)]="cert.verificationURL" type="text" placeholder="Verification URL" />
</div>
<textarea [name]="'certdescription' + cert.trackUUID" [(ngModel)]="cert.description" placeholder="Description"></textarea>
</div>
}
<button class="Add" type="button" (click)="addCert()">+</button>
</div>
<!-- Project -->
<div class="resume-section">
<button type="button" (click)="addProject()">ADD Project</button>
<h1 class="title-text">Projects</h1>
@for(proj of resume.projects; track proj.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delProject(proj)">DEL Project</button>
<button class="Del" type="button" (click)="delProject(proj)">X</button>
<div class="resume-sub-section flex-two-row">
<div>
<input [name]="'projname' + proj.trackUUID" [(ngModel)]="proj.name" type="text" placeholder="Project Name" />
<input [name]="'projurl' + proj.trackUUID" [(ngModel)]="proj.url" type="text" placeholder="Reference URL" />
</div>
<textarea [name]="'projdescription' + proj.trackUUID" [(ngModel)]="proj.description" placeholder="Description"></textarea>
</div>
}
<button class="Add" type="button" (click)="addProject()">+</button>
</div>
</div>
</div>
</div>
src/Client/src/app/pages/resumes/editor/editor.component.ts
+11 -5
View File
@@ -6,7 +6,6 @@ import { Title } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { Resume, ResumeCertification, ResumeEducation, ResumeExperience, ResumeExperienceBullet, ResumeLanguage, ResumeMilitary, ResumeMilitaryBullet, ResumeProject, ResumeSkill } from 'app/models/Resume';
import { Authentication } from 'app/services/Authentication';
import { HomeComponent } from "app/pages/home/home.component";
@Component({
selector: 'main-resume-editor',
@@ -23,11 +22,7 @@ export class ResumesEditorComponent {
constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
this.title.setTitle("Resume - Editor | BoredCareers");
if (!auth.isLoggedIn){
router.navigate(["/"]);
}
this.route.queryParams.subscribe(params => {
const ResumeID = params['ResumeID'] ? +params['ResumeID'] : null;
if (ResumeID !== null){
this.http.get<Resume>("api/resume?ResumeID=" + ResumeID).subscribe({
@@ -44,6 +39,17 @@ export class ResumesEditorComponent {
});
};
async ngOnInit(){
if (!this.auth.isLoggedIn){
this.router.navigate(["/"]);
}
}
// Pagnation //
////////////////////////////////
////////////////////////////////
SubmitForm(resume: Resume){
resume.accountID = this.auth.loggedInUser.id;
this.http.post("api/resume", resume).subscribe({