feat(selector): add selectors to CV features

e2e/src/app.e2e-spec.ts

@@ -222,6 +222,14 @@ describe('workspace-project App', () => {
     expect(() => page.navigateToModule('toolbar')).toBeTruthy();
   });
 
+  it('should be able to navigate to the Selector module', () => {
+    expect(() => page.navigateToModule('selector')).toBeTruthy();
+  });
+
+  it('should be able to navigate to the SelectorHeader module', () => {
+    expect(() => page.navigateToModule('selector-header')).toBeTruthy();
+  });
+
   // [% e2e-test-placeholder %]
 
   // afterEach(waitForAsync() => {

src/app/components/accomplishments/accomplishments.component.ts

@@ -149,7 +149,7 @@ export class AccomplishmentsComponent implements AfterViewInit {
   /**
    * Update whether should collapse the projects accomplishments section mouse event handler.
    *
-   * @param event The click event initiating the save.
+   * @param event The initiating click event.
    */
   public updateShouldCollapseProjectsAccomplishmentHandler(event: MouseEvent) {
     const targetElement = event.currentTarget as HTMLElement;

src/app/components/course-index/course-index.component.html

@@ -1,7 +1,7 @@
 <span class='frequency'>
   <ng-container *ngIf='frequency'>
     <a [ngStyle]="getFrequencyStyle(frequency)" #clickable (keypress)="keypress($event)"
-      (click)='updateSearchToken(frequency[0]);' title="{{ frequency[1].Label + '\n\n' + ui['Search for this']?.text }}"
+      (click)='updateSearchToken($event);' title="{{ frequency[1].Label + '\n\n' + ui['Search for this']?.text }}"
       [attr.aria-label]="frequency[0]">{{ frequency[0] }}</a>
   </ng-container>
 </span>

src/app/components/course-index/course-index.component.spec.ts

@@ -1,6 +1,8 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TestingCommon } from '../../classes/testing-common/testing-common.spec';
 
+import { Accomplishment } from '../../classes/accomplishment/accomplishment';
+
 import { CourseIndexComponent } from './course-index.component';
 
 import { SorterService } from '../../services/sorter/sorter.service';
@@ -62,15 +64,31 @@ describe('CourseIndexComponent', () => {
     }).not.toThrowError();
   });
 
-  it('should check public interface', () => {
+  it('should check public interface properties', () => {
     expect(() => {
       let readAll;
       readAll = component.key;
+      const accomplishment = component.propertyName = new Accomplishment();
+      accomplishment.Language = 'some language';
+      readAll = component.key;
+
       readAll = component.frequency;
-      readAll = component.getFrequenciesCache(component.key);
+      accomplishment.Language = '';
+      ['Certification', 'Conference', 'Brigade', 'Ownership', 'Training', 'Language course'].forEach((_) => {
+        accomplishment.Type = _;
+        readAll = component.frequency;
+      });
+
       readAll = component.frequenciesDivider;
+    }).not.toThrowError();
+  });
 
+  it('should check public interface methods', () => {
+    expect(() => {
+      let readAll;
+      readAll = component.getFrequenciesCache(component.key);
       readAll = component.getFrequencyStyle(component.engine.filterService.emptyFrequency);
+      readAll = component.updateSearchToken(new MouseEvent('click'));
     }).not.toThrowError();
   });
 

src/app/components/course-index/course-index.component.ts

@@ -43,7 +43,7 @@ export class CourseIndexComponent extends PropertyComponent {
   public get frequenciesDivider() { return this.uiService.frequenciesDivider; }
 
   /** Update search token delegate. */
-  public updateSearchToken(newValue: string) { this.engine.searchService.updateSearchToken(newValue); }
+  public updateSearchToken(event: MouseEvent) { this.engine.searchService.updateSearchToken(event); }
 
   /**
    * Constructs the Course index component.

src/app/components/education/education.component.html

@@ -1,27 +1,28 @@
-<div class="container-fluid">
-  <div class="row">
-    <div class="col-md-3 cell-key">
-      <ng-container *ngComponentOutlet="PropertyComponent"></ng-container>
-    </div>
-    <div class="col-md-9 cell-value">
-      <ng-container *ngIf="propertyName['Link']; else elseBlock">
-        <a class="d-inline-block" href="{{ propertyName['Link'] }}" target="_blank" rel="noopener noreferrer"
-          [attr.aria-label]="linkLabel(ui['Education']?.text)">
-          <img src="{{ getBackgroundLogoImageUri(propertyName['Image']) }}" onerror="this.style.display='none'"
-            class="thumbnail" alt="" /> {{ propertyName['School'] }}
-        </a>
-      </ng-container>
-      <ng-template #elseBlock>{{ propertyName['School'] }}</ng-template>
-      <div *ngIf="schoolSubject.length > 0" class="{{ propertyName['Highlight'] }} half-line-trailing">
-        {{ schoolSubject }}
-      </div>
-      <div *ngIf="honors">
-        <span class="detailHanging"></span>{{ honors ? detailBullet : '' }} {{ honors }}
+<app-selector-header [key]="propertyName.School">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-3 cell-key">
+        <ng-container *ngComponentOutlet="PropertyComponent"></ng-container>
       </div>
-      <div *ngFor="let line of description; trackBy: trackByFn">
-        <span class="detailHanging">{{ line ? detailBullet : '' }} {{ line }}</span>
-        <br />
+      <div class="col-md-9 cell-value">
+        <ng-container *ngIf="propertyName['Link']; else elseBlock">
+          <a class="d-inline-block" href="{{ propertyName['Link'] }}" target="_blank" rel="noopener noreferrer"
+            [attr.aria-label]="linkLabel(ui['Education']?.text)">
+            <img src="{{ getBackgroundLogoImageUri(propertyName['Image']) }}" onerror="this.style.display='none'"
+              class="thumbnail" alt="" /> {{ propertyName['School'] }}
+          </a>
+        </ng-container>
+        <ng-template #elseBlock>{{ propertyName['School'] }}</ng-template>
+        <div *ngIf="schoolSubject.length > 0" class="{{ propertyName['Highlight'] }} half-line-trailing">
+          {{ schoolSubject }}
+        </div>
+        <div *ngIf="honors">
+          <app-selector [text]="[honors ? detailBullet : '', honors].join(' ')"></app-selector>
+        </div>
+        <div *ngFor="let line of description; trackBy: trackByFn">
+          <app-selector [text]="[line ? detailBullet : '', line].join(' ')"></app-selector>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</app-selector-header>

src/app/components/education/education.component.ts

@@ -45,12 +45,12 @@ export class EducationComponent extends PropertyComponent {
    * @param params The inherited injector params injected dependency.
    */
   constructor(
-    public portfolioService: PortfolioService,
-    public inputService: InputService,
-    public uiService: UiService,
-    public dataService: DataService,
-    public excelDateFormatterService: ExcelDateFormatterService,
-    public params?: Params) {
+    public readonly portfolioService: PortfolioService,
+    public readonly inputService: InputService,
+    public readonly uiService: UiService,
+    public readonly dataService: DataService,
+    public readonly excelDateFormatterService: ExcelDateFormatterService,
+    public readonly params?: Params) {
     super(portfolioService, inputService, uiService, dataService, excelDateFormatterService, params);
   }
 

src/app/components/personal-data/personal-data.component.html

@@ -1,12 +1,14 @@
-<div class="container-fluid">
-  <div class="row">
-    <div class="col-md-3 cell-key">
-      {{ propertyName['Caption'] }}
-    </div>
-    <div class="col-md-9 cell-value">
-      <div class="{{ propertyName['Highlight'] }}">
-        {{ propertyName['Personal data'] }}
+<app-selector-header [key]="propertyName.Caption">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-3 cell-key">
+        {{ propertyName['Caption'] }}
+      </div>
+      <div class="col-md-9 cell-value">
+        <div class="{{ propertyName['Highlight'] }}">
+          <app-selector [text]="propertyName['Personal data']"></app-selector>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</app-selector-header>

src/app/components/portfolio/portfolio.component.spec.ts

@@ -305,7 +305,7 @@ describe('PortfolioComponent', () => {
       const propertyName = 'Responsibilities';
       readAll = component.portfolioService.getFrequenciesCache(propertyName);
       readAll = component.portfolioService.checkToggleCollapsed(propertyName);
-      readAll = engine.searchService.updateSearchToken('kon');
+      readAll = engine.searchService.updateSearchToken(new MouseEvent('click'));
     }).not.toThrowError();
   });
 

src/app/components/professional-experience/professional-experience.component.html

@@ -1,10 +1,10 @@
-<div class="container-fluid">
-  <div class="row">
-    <div class="col-md-3 cell-key">
-      <ng-container *ngComponentOutlet="PropertyComponent"></ng-container>
-    </div>
-    <div class="col-md-9 cell-value">
-      <div>
+<app-selector-header [key]="propertyName.Experience">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-3 cell-key">
+        <ng-container *ngComponentOutlet="PropertyComponent"></ng-container>
+      </div>
+      <div class="col-md-9 cell-value">
         <ng-container *ngIf="propertyName['Link']; else elseBlockExperience">
           <a class="d-inline-block" href="{{ propertyName['Link'] }}" target="_blank" rel="noopener noreferrer"
             [attr.aria-label]="linkLabel(ui['Experience']?.text)">
@@ -13,14 +13,14 @@
           </a>
         </ng-container>
         <ng-template #elseBlockExperience>{{ propertyName['Experience'] }}</ng-template>
-      </div>
-      <div class="{{ propertyName['Highlight'] }} half-line-trailing">
-        {{ propertyName['Position'] }}
-      </div>
-      <div *ngFor="let line of description; trackBy: trackByFn">
-        <span class="detailHanging">{{ line ? detailBullet : '' }} {{ line }}</span>
-        <br />
+        <div class="{{ propertyName['Highlight'] }} half-line-trailing">
+          {{ propertyName['Position'] }}
+        </div>
+        <div *ngFor="let line of description; trackBy: trackByFn">
+          <app-selector [text]="[line ? detailBullet : '', line].join(' ')"></app-selector>
+          <br />
+        </div>
       </div>
     </div>
   </div>
-</div>
+</app-selector-header>

src/app/components/professional-experience/professional-experience.component.ts

@@ -35,12 +35,12 @@ export class ProfessionalExperienceComponent extends PropertyComponent {
    * @param params The inherited injector params injected dependency.
    */
   constructor(
-    public portfolioService: PortfolioService,
-    public inputService: InputService,
-    public uiService: UiService,
-    public dataService: DataService,
-    public excelDateFormatterService: ExcelDateFormatterService,
-    public params?: Params) {
+    public readonly portfolioService: PortfolioService,
+    public readonly inputService: InputService,
+    public readonly uiService: UiService,
+    public readonly dataService: DataService,
+    public readonly excelDateFormatterService: ExcelDateFormatterService,
+    public readonly params?: Params) {
     super(portfolioService, inputService, uiService, dataService, excelDateFormatterService, params);
   }
 

src/app/components/property/property.component.scss

@@ -1,5 +1,9 @@
 @import "../stylesheets/stylesheets.component.scss";
 
 .half-line-trailing {
-    margin-bottom: 0.0em;   // 0.5em;
+    margin-bottom: 0em; // 0.5em;
+}
+
+span {
+    cursor: pointer;
 }

src/app/components/publication-index/publication-index.component.html

@@ -1,5 +1,5 @@
 <span class='frequency'>
   <a [ngStyle]="getFrequencyStyle(frequency)" #clickable (keypress)="keypress($event)"
-    (click)='updateSearchToken(frequency[0]);' title="{{ frequency[1].Label + '\n\n' + ui['Search for this']?.text }}"
+    (click)='updateSearchToken($event);' title="{{ frequency[1].Label + '\n\n' + ui['Search for this']?.text }}"
     [attr.aria-label]="frequency[0]">{{ frequency[0] }}</a>
 </span>

src/app/components/publication-index/publication-index.component.spec.ts

@@ -62,14 +62,20 @@ describe('PublicationIndexComponent', () => {
     }).not.toThrowError();
   });
 
-  it('should check public interface', () => {
+  it('should check public interface properies', () => {
     expect(() => {
       let readAll: any;
       readAll = component.frequency;
-      readAll = component.getFrequenciesCache(component.key);
       readAll = component.frequenciesDivider;
+    }).not.toThrowError();
+  });
 
+  it('should check public interface methods', () => {
+    expect(() => {
+      let readAll: any;
+      readAll = component.getFrequenciesCache(component.key);
       readAll = component.getFrequencyStyle(component.engine.filterService.emptyFrequency);
+      readAll = component.updateSearchToken(new MouseEvent('click'));
     }).not.toThrowError();
   });
 

src/app/components/publication-index/publication-index.component.ts

@@ -43,7 +43,7 @@ export class PublicationIndexComponent extends PropertyComponent {
   public get frequenciesDivider() { return this.uiService.frequenciesDivider; }
 
   /** Update search token delegate. */
-  public updateSearchToken(newValue: string) { this.engine.searchService.updateSearchToken(newValue); }
+  public updateSearchToken(event: MouseEvent) { this.engine.searchService.updateSearchToken(event); }
 
   /**
    * Constructs the Publication component.

src/app/components/selector-header/selector-header.component.html

@@ -0,0 +1,6 @@
+<header *ngIf="toolbarService.editMode || !persistenceService.getToggleValue(key)" [id]="key" #clickable
+  [class.collapsed]="persistenceService.getToggleValue(key)" (keypress)="inputService.keypress($event)"
+  (click)="$event.stopPropagation(); persistenceService.saveToggle($event)"
+  [attr.aria-labelledby]="uiService.tabName(key)">
+  <ng-content></ng-content>
+</header>

src/app/components/selector-header/selector-header.component.scss

@@ -0,0 +1 @@
+@import "../stylesheets/stylesheets.component.scss";

src/app/components/selector-header/selector-header.component.spec.ts

@@ -0,0 +1,73 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestingCommon } from '../../classes/testing-common/testing-common.spec';
+
+import { SelectorHeaderComponent } from './selector-header.component';
+
+import { AppModule } from '../../app.module';
+import { FormsModule } from '@angular/forms';
+import { APP_BASE_HREF } from '@angular/common';
+
+// eslint-disable-next-line max-lines-per-function
+describe('SelectorHeaderComponent', () => {
+  let component: SelectorHeaderComponent;
+  let fixture: ComponentFixture<SelectorHeaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AppModule,
+        FormsModule
+      ],
+      providers: [
+        SelectorHeaderComponent,
+        { provide: APP_BASE_HREF, useValue: '/' }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectorHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should check lifecycle hooks', () => {
+    expect(() => {
+      TestingCommon.checkLifecycleHooks(component);
+    }).not.toThrowError();
+  });
+
+  it('should initialize', () => {
+    expect(() => { component.Initialize(); }).not.toThrowError();
+  });
+
+  it('should simulate mouse click', () => {
+    expect(() => {
+      TestingCommon.shouldSimulateMouseClick([component.clickable]);
+    }).not.toThrowError();
+  });
+
+  it('should simulate mouse click using keyboard', () => {
+    expect(() => {
+      TestingCommon.shouldSimulateMouseClickUsingKeyboard([component.clickable]);
+    }).not.toThrowError();
+  });
+
+  it('should check public interface properties', () => {
+    expect(() => {
+      // let readAll;
+      component.key = component.key;
+    }).not.toThrowError();
+  });
+
+  it('should check public interface methods', () => {
+    expect(() => {
+      // let readAll;
+    }).not.toThrowError();
+  });
+});