src/Client/src/app/pages/resumes/viewer/viewer.component.css

@@ -0,0 +1,105 @@
+input, textarea {
+    border: 1px solid #444;
+    background-color: transparent;
+}
+
+textarea {
+  resize: vertical;
+}
+
+h1 {
+    margin: 0;
+    font-size: 15px;
+}
+
+.paper {
+    width: 800px;
+    aspect-ratio: 17 / 22;
+    background: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    margin: auto;
+    margin-top: 50px;
+    border: 1px solid #ddd;
+}
+
+.spacer {
+    margin: 0 10px;
+}
+
+.spacer-title {
+    display: flex;
+    margin: 10px 0;
+}
+
+.columns {
+    columns: 2;
+    column-gap: 10px;
+}
+
+.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 {
+    margin-bottom: 10px;
+}
+
+.resume-sub-section {
+    border: 1px solid #666666;
+    break-inside: avoid;
+    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/viewer/viewer.component.html

@@ -0,0 +1,301 @@
+
+<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" [checked]="resume.military !== null" />
+</div>
+
+<div class="paper">
+    <div class="spacer">
+        <!-- Resume Header -->
+        <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" />
+                <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">
+                <h1 class="title-text">Experience</h1>
+                @for(experience of resume.experiences; track experience.trackUUID ){
+                    <div class="resume-sub-section">
+                        <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" />
+                        <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" />
+                        <input [name]="'experiencedateStarted' + experience.trackUUID" [(ngModel)]="experience.dateStarted" type="date" />
+                        @if(!experience.stillEmployed){
+                            <input [name]="'experiencedateEnded' + experience.trackUUID" [(ngModel)]="experience.dateEnded" type="date" />
+                        }
+                        @for(bullet of experience.experienceBullets; track bullet.trackUUID){
+                            <div>
+                                <textarea [name]="'bulletjobFunction' + bullet.trackUUID" [(ngModel)]="bullet.jobFunction" placeholder="Job Task / Function" ></textarea>
+                            </div>
+                        }
+                    </div>
+                }
+            </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" />
+                    <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" />
+                    }
+                    @for(military of resume.military.militaryBullets; track military.trackUUID ){
+                        <div class="resume-sub-section">
+                            <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>
+            }
+            
+            <!-- Education -->
+            <div class="resume-section">
+                <h1 class="title-text">Education</h1>
+                @for(education of resume.educations; track education.trackUUID){
+                    <div class="resume-sub-section">
+                        <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" />
+                        <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" />
+                        <input [name]="'educationdateStarted' + education.trackUUID" [(ngModel)]="education.dateStarted" type="date" />
+                        @if (!education.stillStudying){
+                            <input [name]="'educationdateEnded' + education.trackUUID" [(ngModel)]="education.dateEnded" type="date" />
+                        }
+                    </div>
+                }
+            </div>
+            
+<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" [checked]="resume.military !== null" />
+</div>
+
+<div class="paper">
+    <div class="spacer">
+        <!-- Resume Header -->
+        <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" />
+                <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">
+                <h1 class="title-text">Experience</h1>
+                @for(experience of resume.experiences; track experience.trackUUID ){
+                    <div class="resume-sub-section">
+                        <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" />
+                        <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" />
+                        <input [name]="'experiencedateStarted' + experience.trackUUID" [(ngModel)]="experience.dateStarted" type="date" />
+                        @if(!experience.stillEmployed){
+                            <input [name]="'experiencedateEnded' + experience.trackUUID" [(ngModel)]="experience.dateEnded" type="date" />
+                        }
+                        @for(bullet of experience.experienceBullets; track bullet.trackUUID){
+                            <div>
+                                <textarea [name]="'bulletjobFunction' + bullet.trackUUID" [(ngModel)]="bullet.jobFunction" placeholder="Job Task / Function" ></textarea>
+                            </div>
+                        }
+                    </div>
+                }
+            </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" />
+                    <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" />
+                    }
+                    @for(military of resume.military.militaryBullets; track military.trackUUID ){
+                        <div class="resume-sub-section">
+                            <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>
+            }
+            
+            <!-- Education -->
+            <div class="resume-section">
+                <h1 class="title-text">Education</h1>
+                @for(education of resume.educations; track education.trackUUID){
+                    <div class="resume-sub-section">
+                        <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" />
+                        <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" />
+                        <input [name]="'educationdateStarted' + education.trackUUID" [(ngModel)]="education.dateStarted" type="date" />
+                        @if (!education.stillStudying){
+                            <input [name]="'educationdateEnded' + education.trackUUID" [(ngModel)]="education.dateEnded" type="date" />
+                        }
+                    </div>
+                }
+            </div>
+            
+            <!-- Skill -->
+            <div class="resume-section">
+                <h1 class="title-text">Skills</h1>
+                @for(skill of resume.skills; track skill.trackUUID){
+                    <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>
+                }
+            </div>
+
+            <!-- Language -->
+            <div class="resume-section">
+                <h1 class="title-text">Languages</h1>
+                @for(language of resume.languages; track language.trackUUID){
+                    <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>
+                }
+            </div>
+            
+
+            <!-- Certification -->
+            <div class="resume-section">
+                <h1 class="title-text">Certifications</h1>
+                @for(cert of resume.certifications; track cert.trackUUID){
+                    <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>
+                }
+            </div>
+            
+            <!-- Project -->
+            <div class="resume-section">
+                <h1 class="title-text">Projects</h1>
+                @for(proj of resume.projects; track proj.trackUUID){
+                    <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>
+                }
+            </div>
+        </div>
+    </div>
+</div>
+            <!-- Skill -->
+            <div class="resume-section">
+                <h1 class="title-text">Skills</h1>
+                @for(skill of resume.skills; track skill.trackUUID){
+                    <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>
+                }
+            </div>
+
+            <!-- Language -->
+            <div class="resume-section">
+                <h1 class="title-text">Languages</h1>
+                @for(language of resume.languages; track language.trackUUID){
+                    <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>
+                }
+            </div>
+            
+
+            <!-- Certification -->
+            <div class="resume-section">
+                <h1 class="title-text">Certifications</h1>
+                @for(cert of resume.certifications; track cert.trackUUID){
+                    <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>
+                }
+            </div>
+            
+            <!-- Project -->
+            <div class="resume-section">
+                <h1 class="title-text">Projects</h1>
+                @for(proj of resume.projects; track proj.trackUUID){
+                    <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>
+                }
+            </div>
+        </div>
+    </div>
+</div>

src/Client/src/app/pages/resumes/viewer/viewer.component.ts

@@ -0,0 +1,92 @@
+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 } from 'app/models/Resume';
+import { Authentication } from 'app/services/Authentication';
+import { Validation } from 'app/services/Validation';
+
+@Component({
+  selector: 'main-resume-viewer',
+  templateUrl: './viewer.component.html',
+  styleUrls: [ './viewer.component.css' ],
+  imports: [FormsModule, CommonModule, RouterModule]
+})
+export class ResumesViewerComponent {
+
+  public resume: Resume = new Resume;
+
+  public ErrorMsg: string = "";
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication, public validator: Validation ) {
+    this.title.setTitle("Resume - Viewer | BoredCareers");
+    if (!this.auth.isLoggedIn){
+      this.router.navigate(["/"]);
+    }
+  };
+
+  ngOnInit(){
+    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 => {
+
+            data.trackUUID = crypto.randomUUID();
+            data.certifications.forEach(element => {
+              element.trackUUID = crypto.randomUUID();
+            });
+            data.educations.forEach(element => {
+              element.trackUUID = crypto.randomUUID();
+            });
+            data.experiences.forEach(element => {
+              element.trackUUID = crypto.randomUUID();
+              element.experienceBullets.forEach(subelement => {
+                subelement.trackUUID = crypto.randomUUID();
+              });
+            });
+            data.languages.forEach(element => {
+              element.trackUUID = crypto.randomUUID();
+            });
+            if (data.military){
+              data.military.trackUUID = crypto.randomUUID();
+              data.military.militaryBullets.forEach(element => {
+                element.trackUUID = crypto.randomUUID();
+              });
+            }
+            data.projects.forEach(element => {
+              element.trackUUID = crypto.randomUUID();
+            });
+            data.skills.forEach(element => {
+              element.trackUUID = crypto.randomUUID();
+            });
+
+            this.resume = data;
+          },
+          error: err => {
+            this.ErrorMsg = err.error;
+          }
+        });
+      }
+    });
+  }
+
+  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;
+  }
+
+}