Merge branch 'dev' into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "1.02",
+  "version": "1.03",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -11,45 +11,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.3",
-    "@angular/common": "^16.0.3",
-    "@angular/compiler": "^16.0.3",
-    "@angular/core": "^16.0.3",
-    "@angular/forms": "^16.0.3",
-    "@angular/platform-browser": "^16.0.3",
-    "@angular/platform-browser-dynamic": "^16.0.3",
-    "@angular/router": "^16.0.3",
+    "@angular/animations": "^16.1.2",
+    "@angular/common": "^16.1.2",
+    "@angular/compiler": "^16.1.2",
+    "@angular/core": "^16.1.2",
+    "@angular/forms": "^16.1.2",
+    "@angular/platform-browser": "^16.1.2",
+    "@angular/platform-browser-dynamic": "^16.1.2",
+    "@angular/router": "^16.1.2",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@ngx-matomo/router": "^4.1.0",
     "@ngx-matomo/tracker": "^4.1.0",
     "json-to-graphql-query": "^2.2.5",
-    "npm-check-updates": "^16.10.12",
+    "moment": "^2.29.4",
     "primeicons": "^6.0.1",
-    "primeng": "^16.0.0-rc.2",
+    "primeng": "^16.0.2",
     "rxjs": "~7.8.1",
-    "tslib": "^2.5.2",
-    "zone.js": "~0.13.0"
+    "tslib": "^2.6.0",
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.3",
-    "@angular-eslint/builder": "16.0.2",
-    "@angular-eslint/eslint-plugin": "16.0.2",
-    "@angular-eslint/eslint-plugin-template": "16.0.2",
-    "@angular-eslint/schematics": "16.0.2",
-    "@angular-eslint/template-parser": "16.0.2",
-    "@angular/cli": "~16.0.3",
-    "@angular/compiler-cli": "^16.0.3",
-    "@types/jasmine": "~4.3.2",
-    "@typescript-eslint/eslint-plugin": "5.59.7",
-    "@typescript-eslint/parser": "5.59.7",
-    "eslint": "^8.41.0",
+    "@angular-devkit/build-angular": "^16.1.1",
+    "@angular-eslint/builder": "16.0.3",
+    "@angular-eslint/eslint-plugin": "16.0.3",
+    "@angular-eslint/eslint-plugin-template": "16.0.3",
+    "@angular-eslint/schematics": "16.0.3",
+    "@angular-eslint/template-parser": "16.0.3",
+    "@angular/cli": "~16.1.1",
+    "@angular/compiler-cli": "^16.1.2",
+    "@types/jasmine": "~4.3.4",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
+    "eslint": "^8.43.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "jasmine-core": "~5.0.0",
+    "jasmine-core": "~5.0.1",
     "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "typescript": "~5.0.4"
+    "typescript": "~5.1.3"
   }
 }

src/app/classes/Job.ts

@@ -1,4 +1,3 @@
-import { Duration } from './Duration';
 import { Employer } from './Employer';
 import { Skill } from './Skill';
 
@@ -19,7 +18,8 @@ export class Responsibility implements IResponsibilityOpts {
 
 export interface IJobOpts {
   title: string;
-  timespan: Duration;
+  started_at: Date;
+  ended_at?: Date;
   employer: Employer;
   skills: Skill[];
   responsibilities: Responsibility[];
@@ -28,7 +28,9 @@ export interface IJobOpts {
 export class Job implements IJobOpts {
   public title!: string;
 
-  public timespan!: Duration;
+  public started_at!: Date;
+
+  public ended_at?: Date;
 
   public employer!: Employer;
 

src/app/classes/NavItem.ts

@@ -24,7 +24,7 @@ export class NavigationItem {
 
   public styleClass: ConditionalClassList = new ConditionalClassList();
 
-  public style?: string;
+  public style = {};
 
   public tooltip?: string;
 

src/app/classes/Skill.ts

@@ -1,5 +1,4 @@
 import { IPicture } from '../interfaces/Picture';
-import { Duration } from './Duration';
 
 export interface ISkillOpts {
   id: number;
@@ -43,15 +42,12 @@ export class Skill implements ISkillOpts {
 
   public acquired_at!: Date;
 
-  public duration!: Duration;
-
   public highlighted?: boolean;
 
   public classification!: SkillClassification;
 
   constructor(opts: ISkillOpts) {
     Object.assign(this, opts);
     this.acquired_at = new Date(this.acquired_at);
-    this.duration = new Duration(this.acquired_at, new Date());
   }
 }

src/app/modules/shared/pipes/humanized-duration.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as moment from 'moment';
+
+@Pipe({ name: 'humanizedDuration' })
+export class HumanizedDurationPipe implements PipeTransform {
+  transform(startDate: Date, endDate?: Date): string {
+    endDate ||= new Date();
+    const datesToMoments = {
+      start: moment(startDate),
+      end: moment(endDate),
+    };
+    const timespan: number = datesToMoments.start.diff(datesToMoments.end);
+    const duration: moment.Duration = moment.duration(timespan);
+    const result: string = duration.humanize();
+    return result;
+  }
+}

src/app/modules/shared/shared.module.ts

@@ -20,6 +20,7 @@ import { SelectButtonModule } from 'primeng/selectbutton';
 import { AttributionComponent } from './components/attribution/attribution.component';
 import { TableModule } from 'primeng/table';
 import { MaintenanceMessageComponent } from './components/maintenance-message/maintenance-message.component';
+import { HumanizedDurationPipe } from './pipes/humanized-duration.pipe';
 @NgModule({
   declarations: [
     LoadingSpinnerComponent,
@@ -32,6 +33,7 @@ import { MaintenanceMessageComponent } from './components/maintenance-message/ma
     MatomoOptOutComponent,
     AttributionComponent,
     MaintenanceMessageComponent,
+    HumanizedDurationPipe,
   ],
   imports: [
     CommonModule,
@@ -62,6 +64,7 @@ import { MaintenanceMessageComponent } from './components/maintenance-message/ma
     HeaderComponent,
     MaintenanceMessageComponent,
     FooterComponent,
+    HumanizedDurationPipe,
   ],
 })
 export class SharedModule {}

src/app/modules/splash/resume/job-card/job-card.component.html

@@ -3,9 +3,9 @@
     <span class="job-title">{{ job.title }}</span>
     <span class="job-employer">{{ job.employer.name }}</span>
     <span class="job-time-period"
-      >{{ job.timespan.start | date : "MMM y" }} -
-      {{ (job.timespan.end | date : "MMM y") || "Present" }}
-      ({{ job.timespan.lastTimeStr }})</span
+      >{{ job.started_at | date : "MMM y" }} -
+      {{ (job.ended_at | date : "MMM y") || "Present" }}
+      ({{ job.started_at | humanizedDuration : job.ended_at }})</span
     >
     <ul *ngIf="job.responsibilities?.length">
       <ng-container

src/app/services/employer.service.ts

@@ -5,8 +5,6 @@ import { GraphQLService } from './graphql.service';
 import { EnumType, jsonToGraphQLQuery } from 'json-to-graphql-query';
 import { Job } from '../classes/Job';
 import { SkillsService } from './skills.service';
-import { Skill } from '../classes/Skill';
-import { Duration } from '../classes/Duration';
 
 @Injectable({ providedIn: 'root' })
 export class EmployerService extends GenericService {
@@ -48,11 +46,11 @@ export class EmployerService extends GenericService {
             },
           },
         },
-      })
+      }),
     );
 
     const employers: Employer[] = employerQueryReturn.employers.map(
-      (employerRecord: any) => new Employer(employerRecord)
+      (employerRecord: any) => new Employer(employerRecord),
     );
 
     return employers;
@@ -100,21 +98,14 @@ export class EmployerService extends GenericService {
             },
           },
         },
-      })
+      }),
     );
     const jobs: Job[] = jobsQueryReturn.jobs.map((jobRec: any) => {
       jobRec.employer = this.getEmployer(jobRec.employer_id_fk);
-      /*  jobRec.skills = jobRec.skills.map((jobSkillMapping: any) =>
-        this._sks.getSkill(jobSkillMapping.skill_id_fk)
-      ); */
-      jobRec.timespan = new Duration(jobRec.started_at, jobRec.ended_at);
       jobRec.responsibilities = jobRec.responsibilities.map(
-        (mapping: any) => mapping.Responsibility
+        (mapping: any) => mapping.Responsibility,
       );
-      //delete jobRec.job_leverages_skills;
       delete jobRec.employer_id_fk;
-      delete jobRec.started_at;
-      delete jobRec.ended_at;
       const job: Job = new Job(jobRec);
       job.employer.jobs.push(job);
       return job;