From aeabbf3793676838bb35bbc8f7a33dc4c13cb986 Mon Sep 17 00:00:00 2001
From: Derek Holloway <derek@mistox.com>
Date: Mon, 11 Aug 2025 21:27:53 -0700
Subject: [PATCH] start work on resume editor

---
 ToDo.yaml                                     |   6 +-
 src/Client/src/app/app.routes.ts              |   2 +
 .../pages/resumes/editor/editor.component.css |  10 ++
 .../resumes/editor/editor.component.html      | 145 ++++++++++++++++
 .../pages/resumes/editor/editor.component.ts  | 162 ++++++++++++++++++
 5 files changed, 322 insertions(+), 3 deletions(-)
 create mode 100644 src/Client/src/app/pages/resumes/editor/editor.component.css
 create mode 100644 src/Client/src/app/pages/resumes/editor/editor.component.html
 create mode 100644 src/Client/src/app/pages/resumes/editor/editor.component.ts

diff --git a/ToDo.yaml b/ToDo.yaml
index 6aa8ec0..855e616 100755
--- a/ToDo.yaml
+++ b/ToDo.yaml
@@ -48,14 +48,14 @@ Client:
         Setup QueryParam's for Edit and New
         Edit employees not implimented yet
 
+    resume/editor:
+        Not fully tested yet
+
     Company:
         Need to impliment Add employee
         Need to impliment Remove employee
         Edit Company -> Dont allow edit of company email due to it being verified
 
-    All:
-        Make sure im using the new NG format for for and if
-
 
 database:
     Add Applied Jobs Table
\ No newline at end of file
diff --git a/src/Client/src/app/app.routes.ts b/src/Client/src/app/app.routes.ts
index df088d1..b221d22 100644
--- a/src/Client/src/app/app.routes.ts
+++ b/src/Client/src/app/app.routes.ts
@@ -7,6 +7,7 @@ import { JobEditorComponent } from './pages/jobs/editor/jobeditor.component';
 import { CompanyEditorComponent } from './pages/company/editor/editor.component';
 import { JobViewerComponent } from './pages/jobs/viewer/jobviewer.component';
 import { CompanyComponent } from './pages/company/company.component';
+import { ResumesEditorComponent } from './pages/resumes/editor/editor.component';
 
 export const routes: Routes = [
 
@@ -15,6 +16,7 @@ export const routes: Routes = [
     
     // Resumes
     { path: "resumes", component: ResumesComponent },
+    { path: "resumes/editor", component: ResumesEditorComponent },
 
     // Jobs
     { path: "jobs", component: JobsComponent },
diff --git a/src/Client/src/app/pages/resumes/editor/editor.component.css b/src/Client/src/app/pages/resumes/editor/editor.component.css
new file mode 100644
index 0000000..0daf73e
--- /dev/null
+++ b/src/Client/src/app/pages/resumes/editor/editor.component.css
@@ -0,0 +1,10 @@
+.resume-section {
+    background-color: #DDDDDD;
+    margin: 10px;
+}
+
+.resume-sub-section {
+    border: 1px solid #666666;
+    margin: 5px;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/src/Client/src/app/pages/resumes/editor/editor.component.html b/src/Client/src/app/pages/resumes/editor/editor.component.html
new file mode 100644
index 0000000..9cc4cc0
--- /dev/null
+++ b/src/Client/src/app/pages/resumes/editor/editor.component.html
@@ -0,0 +1,145 @@
+<form (ngSubmit)="SubmitForm(resume)">
+
+    <!-- Resume Header -->
+    <div class="resume-section">
+        <input name="resumetitle" [(ngModel)]="resume.title" type="text" placeholder="Resume 1" />
+        <input name="resumename" [(ngModel)]="resume.name" type="text" placeholder="John Doe" />
+        <input name="resumefield" [(ngModel)]="resume.field" type="text" placeholder="Data Scientist" />
+        <input name="resumeemail" [(ngModel)]="resume.email" type="email" placeholder="no-reply@mistox.com" />
+        <input name="resumephoneNumber" [(ngModel)]="resume.phoneNumber" type="tel" placeholder="+1 800-000-0000" />
+        <input name="resumepostalCode" [(ngModel)]="resume.postalCode" type="text" placeholder="92020" />
+        <input name="resumestateOrRegion" [(ngModel)]="resume.stateOrRegion" type="text" placeholder="CA" />
+        <input name="resumecity" [(ngModel)]="resume.city" type="text" placeholder="San Diego" />
+        <h1>Public: </h1><input name="active" [(ngModel)]="resume.isActive" type="checkbox" />
+    </div>
+
+    <!-- Experience -->
+    <div class="resume-section">
+        <button type="button" (click)="addExperience()">ADD Experience</button>
+        @for(experience of resume.experience; track experience.trackUUID ){
+            <div class="resume-sub-section">
+                <input name="experiencejobTitle" [(ngModel)]="experience.jobTitle" type="text" placeholder="Data Entry Clerk" />
+                <input name="experiencecompany" [(ngModel)]="experience.company" type="text" placeholder="San Diego Gas Electric" />
+                <input name="experiencepostalCode" [(ngModel)]="experience.postalCode" type="text" placeholder="92020" />
+                <input name="experiencecountry" [(ngModel)]="experience.country" type="text" placeholder="US" />
+                <input name="experiencestateOrRegion" [(ngModel)]="experience.stateOrRegion" type="text" placeholder="CA" />
+                <input name="experiencecity" [(ngModel)]="experience.city" type="text" placeholder="San Diego" />
+                <input name="experiencedateStarted" [(ngModel)]="experience.dateStarted" type="date" />
+                <input name="experiencestillEmployed" [(ngModel)]="experience.stillEmployed" type="checkbox" />
+                @if(!experience.stillEmployed){
+                    <input name="experiencedateEnded" [(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" [(ngModel)]="bullet.jobFunction" placeholder="Processed database transactions" ></textarea>
+                        <button type="button" (click)="delJobFunction(experience, bullet)">DEL jobFunction</button>
+                    </div>
+                }
+                <button type="button" (click)="delExperience(experience)">DEL Experience</button>
+            </div>
+        }
+    </div>
+
+    <!-- Military -->
+    <div class="resume-section">
+        <h1>Is Veteran: </h1><input name="veteran" [(ngModel)]="resume.military.veteran" type="checkbox" />
+        @if(resume.military.veteran){
+            <input name="militarycountry" [(ngModel)]="resume.military.country" type="text" placeholder="US" />
+            <input name="militaryrank" [(ngModel)]="resume.military.rank" type="text" placeholder="PVT" />
+            <input name="militarydateStarted" [(ngModel)]="resume.military.dateStarted" type="date" />
+            <h1>Still Serving: </h1><input name="stillServing" [(ngModel)]="resume.military.stillServing" type="checkbox" />
+            @if (!resume.military.stillServing){
+                <input name="dateEnded" [(ngModel)]="resume.military.dateEnded" type="date" />
+            }
+            <button type="button" (click)="addMillitaryBullet()">Add Millitary Task</button>
+            @for(military of resume.military.millitaryBullets; track military.trackUUID ){
+                <div>
+                    <input name="militaryachievement" [(ngModel)]="military.achievement" type="text" placeholder="Deployed Kuwait" />
+                    <textarea name="militarydescription" [(ngModel)]="military.description" placeholder="Delivered goods line-hall" ></textarea>
+                    <button type="button" (click)="delMillitaryBullet(military)">DEL Military Task</button>
+                </div>
+            }
+        }
+    </div>
+    
+    <!-- Education -->
+    <div class="resume-section">
+        <button type="button" (click)="addEducation()">ADD Education</button>
+        @for(education of resume.education; track education.trackUUID){
+            <div>
+                <input name="educationdegreeType" [(ngModel)]="education.degreeType" type="text" placeholder="Masters" />
+                <input name="educationdegreeField" [(ngModel)]="education.degreeField" type="text" placeholder="Computer Science" />
+                <input name="educationschool" [(ngModel)]="education.school" type="text" placeholder="WGU" />
+                <input name="educationpostalCode" [(ngModel)]="education.postalCode" type="text" placeholder="84107" />
+                <input name="educationcountry" [(ngModel)]="education.country" type="text" placeholder="US" />
+                <input name="educationstateOrRegion" [(ngModel)]="education.stateOrRegion" type="text" placeholder="UT" />
+                <input name="educationcity" [(ngModel)]="education.city" type="text" placeholder="Salt Lake City" />
+                <input name="educationdateStarted" [(ngModel)]="education.dateStarted" type="date" />
+                <input name="educationstillStudying" [(ngModel)]="education.stillStudying" type="checkbox" />
+                @if (!education.stillStudying){
+                    <input name="educationdateEnded" [(ngModel)]="education.dateEnded" type="date" />
+                }
+                <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" [(ngModel)]="skill.name" type="text" placeholder="Angular JS" />
+                <textarea name="skilldescription" [(ngModel)]="skill.description" placeholder="Built this entire website using Angular JS"></textarea>
+                <button type="button" (click)="delSkill(skill)">DEL Skill</button>
+            </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" [(ngModel)]="language.language" type="text" placeholder="Spanish" />
+                <input name="languageproficiency" [(ngModel)]="language.proficiency" type="text" placeholder="casual speaking" />
+                <button type="button" (click)="delLanguage(language)">DEL Language</button>
+            </div>
+        }
+    </div>
+    
+
+    <!-- Certification -->
+    <div class="resume-section">
+        <button type="button" (click)="addCert()">ADD Certification</button>
+        @for(cert of resume.certification; track cert.trackUUID){
+            <div>
+                <input name="certname" [(ngModel)]="cert.name" type="text" placeholder="Comptia A+" />
+                <input name="certverificationURL" [(ngModel)]="cert.verificationURL" type="text" placeholder="https://certmaster.com/certid" />
+                <textarea name="certdescription" [(ngModel)]="cert.description" placeholder="Into to information technology"></textarea>
+                <button type="button" (click)="delCert(cert)">DEL Certification</button>
+            </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" [(ngModel)]="proj.name" type="text" placeholder="boredcareers" />
+                <input name="projurl" [(ngModel)]="proj.url" type="text" placeholder="mistox.com" />
+                <textarea name="projdescription" [(ngModel)]="proj.description" placeholder="the project that your currently viewing"></textarea>
+                <button type="button" (click)="delProject(proj)">DEL Project</button>
+            </div>
+        }
+    </div>
+
+    @if (isNewResume){
+        <button type="submit">CREATE NEW RESUME</button>
+    } @else {
+        <button type="submit">UPDATE RESUME</button>
+    }
+    
+</form>
\ No newline at end of file
diff --git a/src/Client/src/app/pages/resumes/editor/editor.component.ts b/src/Client/src/app/pages/resumes/editor/editor.component.ts
new file mode 100644
index 0000000..bbbbd10
--- /dev/null
+++ b/src/Client/src/app/pages/resumes/editor/editor.component.ts
@@ -0,0 +1,162 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { Resume, ResumeCertification, ResumeEducation, ResumeExperience, ResumeExperienceBullet, ResumeLanguage, 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',
+  templateUrl: './editor.component.html',
+  styleUrls: [ './editor.component.css' ],
+  imports: [FormsModule, CommonModule, RouterModule]
+})
+export class ResumesEditorComponent {
+
+  public resume: Resume = new Resume;
+  public isNewResume: boolean = true;
+
+  public ErrorMsg: string = "";
+
+  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({
+          next: data => {
+            this.resume = data;
+            this.isNewResume = false;
+          },
+          error: err => {
+            this.ErrorMsg = err.error;
+          }
+        });
+      }
+    });
+  };
+
+  SubmitForm(resume: Resume){
+    resume.accountID = this.auth.loggedInUser.id;
+    this.http.post("api/resume", resume).subscribe({
+      next: data => {
+        this.router.navigate(["/"]);
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
+      }
+    });
+  }
+
+  addExperience(){
+    this.resume.experience.push( new ResumeExperience );
+  }
+  delExperience(self: ResumeExperience){
+    for(let i=0; i<this.resume.experience.length; i++){
+      let cur = this.resume.experience[i];
+      if (cur.trackUUID === self.trackUUID){
+        this.resume.experience.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+  addJobFunction(self: ResumeExperience){
+    self.experienceBullets.push( new ResumeExperienceBullet );
+  }
+  delJobFunction(self: ResumeExperience, me: ResumeExperienceBullet){
+    for(let i=0; i<self.experienceBullets.length; i++){
+      let cur = self.experienceBullets[i];
+      if (cur.trackUUID === me.trackUUID){
+        self.experienceBullets.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+  addMillitaryBullet(){
+    this.resume.military.millitaryBullets.push( new ResumeMilitaryBullet );
+  }
+  delMillitaryBullet(self: ResumeMilitaryBullet){
+    for(let i=0; i<this.resume.military.millitaryBullets.length; i++){
+      let cur = this.resume.military.millitaryBullets[i];
+      if (cur.trackUUID === self.trackUUID){
+        this.resume.military.millitaryBullets.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+  addEducation(){
+    this.resume.education.push( new ResumeEducation );
+  }
+  delEducation(self: ResumeEducation){
+    for(let i=0; i<this.resume.education.length; i++){
+      let cur = this.resume.education[i];
+      if (cur.trackUUID === self.trackUUID){
+        this.resume.education.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+  addSkill(){
+    this.resume.skills.push( new ResumeSkill );
+  }
+  delSkill(self: ResumeSkill){
+    for(let i=0; i<this.resume.skills.length; i++){
+      let cur = this.resume.skills[i];
+      if (cur.trackUUID === self.trackUUID){
+        this.resume.skills.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+  addLanguage(){
+    this.resume.languages.push( new ResumeLanguage );
+  }
+  delLanguage(self: ResumeLanguage){
+    for(let i=0; i<this.resume.languages.length; i++){
+      let cur = this.resume.languages[i];
+      if (cur.trackUUID === self.trackUUID){
+        this.resume.languages.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+  addCert(){
+    this.resume.certification.push( new ResumeCertification );
+  }
+  delCert(self: ResumeCertification){
+    for(let i=0; i<this.resume.certification.length; i++){
+      let cur = this.resume.certification[i];
+      if (cur.trackUUID === self.trackUUID){
+        this.resume.certification.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+  addProject(){
+    this.resume.projects.push( new ResumeProject );
+  }
+  delProject(self: ResumeProject){
+    for(let i=0; i<this.resume.projects.length; i++){
+      let cur = this.resume.projects[i];
+      if (cur.trackUUID === self.trackUUID){
+        this.resume.projects.splice( i, 1 );
+        break;
+      }
+    }
+  }
+
+}
\ No newline at end of file