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

Start work on Resume Editor UI

Browse Source
This commit is contained in:
Derek Holloway
2025-08-15 16:14:55 -07:00
parent efcafa81b2
commit 3e1752fda0
4 changed files with 178 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ToDo.yaml
-3
View File
@@ -24,9 +24,6 @@ Server:
Server.csproj:
Find a way to keep all the libraries up to date
DbDriver:
Make getConnection() -> Based on a connection pool so that more than a specific number of connections cannot be made [ 30 connections max -> else wait for connection to open ]
Client:
jobs/editor:
Job Listing Skills exists but isn't implimented in the UI
src/Client/src/app/pages/resumes/editor/editor.component.css
+34
View File
@@ -1,4 +1,38 @@
input, textarea {
border: none;
background-color: transparent;
}
h1 {
margin: 0;
font-size: 15px;
}
.paper {
width: 70vw;
aspect-ratio: 1 / 1.294;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin: auto;
margin-top: 50px;
border: 1px solid #ddd;
}
.columns {
columns: 2;
}
.resume-header {
width: 70vw;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin: auto;
margin-top: 50px;
border: 1px solid #ddd;
}
.resume-section {
break-inside: avoid;
background-color: #DDDDDD;
margin: 10px;
}
src/Client/src/app/pages/resumes/editor/editor.component.html
+128 -119
View File
@@ -1,140 +1,149 @@
<form (ngSubmit)="SubmitForm(resume)">
<!-- Resume Header -->
<div class="resume-section">
<input [name]="'resumetitle' + resume.trackUUID" [(ngModel)]="resume.title" type="text" placeholder="Resume 1" />
<input [name]="'resumename' + resume.trackUUID" [(ngModel)]="resume.name" type="text" placeholder="John Doe" />
<input [name]="'resumefield' + resume.trackUUID" [(ngModel)]="resume.field" type="text" placeholder="Data Scientist" />
<input [name]="'resumeemail' + resume.trackUUID" [(ngModel)]="resume.email" type="email" placeholder="no-reply@mistox.com" />
<input [name]="'resumephoneNumber' + resume.trackUUID" [(ngModel)]="resume.phoneNumber" type="tel" placeholder="+1 800-000-0000" />
<input [name]="'resumepostalCode' + resume.trackUUID" [(ngModel)]="resume.postalCode" type="text" placeholder="92020" />
<input [name]="'resumecountry' + resume.trackUUID" [(ngModel)]="resume.country" type="text" placeholder="US" />
<input [name]="'resumestateOrRegion' + resume.trackUUID" [(ngModel)]="resume.stateOrRegion" type="text" placeholder="CA" />
<input [name]="'resumecity' + resume.trackUUID" [(ngModel)]="resume.city" type="text" placeholder="San Diego" />
<div class="resume-header">
<div>
<input [name]="'resumetitle' + resume.trackUUID" [(ngModel)]="resume.title" type="text" placeholder="Resume Name" />
</div>
<h1>Public: </h1><input [name]="'active' + resume.trackUUID" [(ngModel)]="resume.isActive" type="checkbox" />
<h1>Is Veteran: </h1><input [name]="'veteran' + resume.military?.trackUUID" type="checkbox" (change)="onVeteranChange($event)" />
<button type="button" (click)="PrintResume()">Print</button>
</div>
<!-- Experience -->
<div class="resume-section">
<button type="button" (click)="addExperience()">ADD Experience</button>
@for(experience of resume.experiences; track experience.trackUUID ){
<div class="resume-sub-section">
<input [name]="'experiencejobTitle' + experience.trackUUID" [(ngModel)]="experience.jobTitle" type="text" placeholder="Data Entry Clerk" />
<input [name]="'experiencecompany' + experience.trackUUID" [(ngModel)]="experience.company" type="text" placeholder="San Diego Gas Electric" />
<input [name]="'experiencepostalCode' + experience.trackUUID" [(ngModel)]="experience.postalCode" type="text" placeholder="92020" />
<input [name]="'experiencecountry' + experience.trackUUID" [(ngModel)]="experience.country" type="text" placeholder="US" />
<input [name]="'experiencestateOrRegion' + experience.trackUUID" [(ngModel)]="experience.stateOrRegion" type="text" placeholder="CA" />
<input [name]="'experiencecity' + experience.trackUUID" [(ngModel)]="experience.city" type="text" placeholder="San Diego" />
<input [name]="'experiencedateStarted' + experience.trackUUID" [(ngModel)]="experience.dateStarted" type="date" />
<input [name]="'experiencestillEmployed' + experience.trackUUID" [(ngModel)]="experience.stillEmployed" type="checkbox" />
@if(!experience.stillEmployed){
<input [name]="'experiencedateEnded' + experience.trackUUID" [(ngModel)]="experience.dateEnded" type="date" />
}
<button type="button" (click)="addJobFunction(experience)">Add jobFunction</button>
@for(bullet of experience.experienceBullets; track bullet.trackUUID){
<div>
<textarea [name]="'bulletjobFunction' + bullet.trackUUID" [(ngModel)]="bullet.jobFunction" placeholder="Processed database transactions" ></textarea>
<button type="button" (click)="delJobFunction(experience, bullet)">DEL jobFunction</button>
<div class="paper">
<!-- Resume Header -->
<div class="resume-section">
<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" />
<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" />
<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 class="columns">
<!-- Experience -->
<div class="resume-section">
<button type="button" (click)="addExperience()">ADD Experience</button>
@for(experience of resume.experiences; track experience.trackUUID ){
<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]="'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" />
<input [name]="'experiencedateStarted' + experience.trackUUID" [(ngModel)]="experience.dateStarted" type="date" />
@if(!experience.stillEmployed){
<input [name]="'experiencedateEnded' + experience.trackUUID" [(ngModel)]="experience.dateEnded" type="date" />
}
<button type="button" (click)="addJobFunction(experience)">Add jobFunction</button>
@for(bullet of experience.experienceBullets; track bullet.trackUUID){
<div>
<button type="button" (click)="delJobFunction(experience, bullet)">DEL jobFunction</button>
<textarea [name]="'bulletjobFunction' + bullet.trackUUID" [(ngModel)]="bullet.jobFunction" placeholder="Job Task / Function" ></textarea>
</div>
}
</div>
}
<button type="button" (click)="delExperience(experience)">DEL Experience</button>
</div>
}
</div>
<!-- Military -->
<div class="resume-section">
<h1>Is Veteran: </h1><input [name]="'veteran' + resume.military?.trackUUID" type="checkbox" (change)="onVeteranChange($event)" />
@if(resume.military !== null){
<input [name]="'militarycountry' + resume.military.trackUUID" [(ngModel)]="resume.military.country" type="text" placeholder="US" />
<input [name]="'militaryrank' + resume.military.trackUUID" [(ngModel)]="resume.military.rank" type="text" placeholder="PVT" />
<input [name]="'militarydateStarted' + resume.military.trackUUID" [(ngModel)]="resume.military.dateStarted" type="date" />
<h1>Still Serving: </h1><input [name]="'stillServing' + resume.military.trackUUID" [(ngModel)]="resume.military.stillServing" type="checkbox" />
@if (!resume.military.stillServing){
<input [name]="'dateEnded' + resume.military.trackUUID" [(ngModel)]="resume.military.dateEnded" type="date" />
}
<button type="button" (click)="addMillitaryBullet()">Add Millitary Task</button>
@for(military of resume.military.militaryBullets; track military.trackUUID ){
<div>
<input [name]="'militaryachievement' + military.trackUUID" [(ngModel)]="military.achievement" type="text" placeholder="Deployed Kuwait" />
<textarea [name]="'militarydescription' + military.trackUUID" [(ngModel)]="military.description" placeholder="Delivered goods line-hall" ></textarea>
<button type="button" (click)="delMillitaryBullet(military)">DEL Military Task</button>
<!-- Military -->
@if(resume.military !== null){
<div class="resume-section">
<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" />
<input [name]="'militarydateStarted' + resume.military.trackUUID" [(ngModel)]="resume.military.dateStarted" type="date" />
@if (!resume.military.stillServing){
<input [name]="'dateEnded' + resume.military.trackUUID" [(ngModel)]="resume.military.dateEnded" type="date" />
}
<button type="button" (click)="addMillitaryBullet()">Add Millitary Task</button>
@for(military of resume.military.militaryBullets; track military.trackUUID ){
<div class="resume-sub-section">
<button type="button" (click)="delMillitaryBullet(military)">DEL Military Task</button>
<input [name]="'militaryachievement' + military.trackUUID" [(ngModel)]="military.achievement" type="text" placeholder="Achievement" />
<textarea [name]="'militarydescription' + military.trackUUID" [(ngModel)]="military.description" placeholder="Description" ></textarea>
</div>
}
</div>
}
}
</div>
<!-- Education -->
<div class="resume-section">
<button type="button" (click)="addEducation()">ADD Education</button>
@for(education of resume.educations; track education.trackUUID){
<div>
<input [name]="'educationdegreeType' + education.trackUUID" [(ngModel)]="education.degreeType" type="text" placeholder="Masters" />
<input [name]="'educationdegreeField' + education.trackUUID" [(ngModel)]="education.degreeField" type="text" placeholder="Computer Science" />
<input [name]="'educationschool' + education.trackUUID" [(ngModel)]="education.school" type="text" placeholder="WGU" />
<input [name]="'educationpostalCode' + education.trackUUID" [(ngModel)]="education.postalCode" type="text" placeholder="84107" />
<input [name]="'educationcountry' + education.trackUUID" [(ngModel)]="education.country" type="text" placeholder="US" />
<input [name]="'educationstateOrRegion' + education.trackUUID" [(ngModel)]="education.stateOrRegion" type="text" placeholder="UT" />
<input [name]="'educationcity' + education.trackUUID" [(ngModel)]="education.city" type="text" placeholder="Salt Lake City" />
<input [name]="'educationdateStarted' + education.trackUUID" [(ngModel)]="education.dateStarted" type="date" />
<input [name]="'educationstillStudying' + education.trackUUID" [(ngModel)]="education.stillStudying" type="checkbox" />
@if (!education.stillStudying){
<input [name]="'educationdateEnded' + education.trackUUID" [(ngModel)]="education.dateEnded" type="date" />
<!-- Education -->
<div class="resume-section">
<button type="button" (click)="addEducation()">ADD Education</button>
@for(education of resume.educations; track education.trackUUID){
<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]="'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" />
<input [name]="'educationdateStarted' + education.trackUUID" [(ngModel)]="education.dateStarted" type="date" />
@if (!education.stillStudying){
<input [name]="'educationdateEnded' + education.trackUUID" [(ngModel)]="education.dateEnded" type="date" />
}
</div>
}
<button type="button" (click)="delEducation(education)">DEL Education</button>
</div>
}
</div>
<!-- Skill -->
<div class="resume-section">
<button type="button" (click)="addSkill()">ADD Skill</button>
@for(skill of resume.skills; track skill.trackUUID){
<div>
<input [name]="'skillname' + skill.trackUUID" [(ngModel)]="skill.name" type="text" placeholder="Angular JS" />
<textarea [name]="'skilldescription' + skill.trackUUID" [(ngModel)]="skill.description" placeholder="Built this entire website using Angular JS"></textarea>
<button type="button" (click)="delSkill(skill)">DEL Skill</button>
<!-- Skill -->
<div class="resume-section">
<button type="button" (click)="addSkill()">ADD Skill</button>
@for(skill of resume.skills; track skill.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delSkill(skill)">DEL Skill</button>
<input [name]="'skillname' + skill.trackUUID" [(ngModel)]="skill.name" type="text" placeholder="Skill" />
<textarea [name]="'skilldescription' + skill.trackUUID" [(ngModel)]="skill.description" placeholder="Description"></textarea>
</div>
}
</div>
}
</div>
<!-- Language -->
<div class="resume-section">
<button type="button" (click)="addLanguage()">ADD Language</button>
@for(language of resume.languages; track language.trackUUID){
<div>
<input [name]="'languagelanguage' + language.trackUUID" [(ngModel)]="language.language" type="text" placeholder="Spanish" />
<input [name]="'languageproficiency' + language.trackUUID" [(ngModel)]="language.proficiency" type="text" placeholder="casual speaking" />
<button type="button" (click)="delLanguage(language)">DEL Language</button>
<!-- Language -->
<div class="resume-section">
<button type="button" (click)="addLanguage()">ADD Language</button>
@for(language of resume.languages; track language.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delLanguage(language)">DEL Language</button>
<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>
}
</div>
}
</div>
<!-- Certification -->
<div class="resume-section">
<button type="button" (click)="addCert()">ADD Certification</button>
@for(cert of resume.certifications; track cert.trackUUID){
<div>
<input [name]="'certname' + cert.trackUUID" [(ngModel)]="cert.name" type="text" placeholder="Comptia A+" />
<input [name]="'certverificationURL' + cert.trackUUID" [(ngModel)]="cert.verificationURL" type="text" placeholder="https://certmaster.com/certid" />
<textarea [name]="'certdescription' + cert.trackUUID" [(ngModel)]="cert.description" placeholder="Into to information technology"></textarea>
<button type="button" (click)="delCert(cert)">DEL Certification</button>
<!-- Certification -->
<div class="resume-section">
<button type="button" (click)="addCert()">ADD Certification</button>
@for(cert of resume.certifications; track cert.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delCert(cert)">DEL Certification</button>
<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" />
<textarea [name]="'certdescription' + cert.trackUUID" [(ngModel)]="cert.description" placeholder="Description"></textarea>
</div>
}
</div>
}
</div>
<!-- Project -->
<div class="resume-section">
<button type="button" (click)="addProject()">ADD Project</button>
@for(proj of resume.projects; track proj.trackUUID){
<div>
<input [name]="'projname' + proj.trackUUID" [(ngModel)]="proj.name" type="text" placeholder="boredcareers" />
<input [name]="'projurl' + proj.trackUUID" [(ngModel)]="proj.url" type="text" placeholder="mistox.com" />
<textarea [name]="'projdescription' + proj.trackUUID" [(ngModel)]="proj.description" placeholder="the project that your currently viewing"></textarea>
<button type="button" (click)="delProject(proj)">DEL Project</button>
<!-- Project -->
<div class="resume-section">
<button type="button" (click)="addProject()">ADD Project</button>
@for(proj of resume.projects; track proj.trackUUID){
<div class="resume-sub-section">
<button type="button" (click)="delProject(proj)">DEL Project</button>
<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" />
<textarea [name]="'projdescription' + proj.trackUUID" [(ngModel)]="proj.description" placeholder="Description"></textarea>
</div>
}
</div>
}
</div>
</div>
@if (isNewResume){
src/Client/src/app/pages/resumes/editor/editor.component.ts
+16
View File
@@ -56,6 +56,22 @@ export class ResumesEditorComponent {
});
}
PrintResume(){
const divToPrint = document.getElementsByClassName("paper")[0];
const printContents = divToPrint.innerHTML;
const originalContents = document.body.innerHTML; // Store original body content
// Temporarily replace the body content with the div's content
document.body.innerHTML = printContents;
// Trigger the print dialog
window.print();
// Restore the original body content
document.body.innerHTML = originalContents;
}
addExperience(){
this.resume.experiences.push( new ResumeExperience );
}