Qa

.gitignore

@@ -53,3 +53,6 @@ src/environments/environment.researchfi.ts
 src/environments/environment.researchfi.prod.ts
 src/assets/config/config.json
 src/assets/config/auth_config.json
+/test-results/
+/playwright-report/
+/playwright/.cache/

angular.json

@@ -92,11 +92,23 @@
             "en": {
               "localize": [
                 "en"
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/locale.ts",
+                  "with": "src/environments/locale.en.ts"
+                }
               ]
             },
             "sv": {
               "localize": [
                 "sv"
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/locale.ts",
+                  "with": "src/environments/locale.sv.ts"
+                }
               ]
             },
             "es5": {

package.json

@@ -70,6 +70,7 @@
     "mississippi": "^4.0.0",
     "ngx-bootstrap": "^9.0.0",
     "ngx-countup": "^13.0.0",
+    "ngx-pipes": "^3.2.2",
     "nodemailer": "^6.7.8",
     "popper.js": "^1.16.0",
     "referrer-policy": "^1.2.0",
@@ -81,6 +82,7 @@
     "through2": "^4.0.2",
     "timers": "^0.1.1",
     "tslib": "^2.1.0",
+    "valibot": "^0.17.0",
     "zone.js": "~0.11.8"
   },
   "devDependencies": {
@@ -98,6 +100,7 @@
     "@babel/preset-env": "^7.16.11",
     "@fortawesome/fontawesome-free": "^6.0.0",
     "@ngx-i18nsupport/ngx-i18nsupport": "^1.1.6",
+    "@playwright/test": "^1.39.0",
     "@types/d3": "^7.1.0",
     "@types/express": "^4.17.11",
     "@types/jasmine": "~3.6.6",

playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/app/portal/components/collapsible/collapsible.component.html

@@ -0,0 +1,37 @@
+<ng-template #tooltipElement>
+  <div>
+    <ng-content select="[tooltip]"></ng-content>
+  </div>
+</ng-template>
+
+<div class="collapsible-container">
+  <div class='collapsible-label' (click)="toggle()">
+    <div style='display: flex; flex-wrap: wrap'>
+      <ng-container *ngIf='decoration === "plus" && isOpen'>
+        <div style='margin-right: 10px'>-</div>
+      </ng-container>
+
+      <ng-container *ngIf='decoration === "plus" && !isOpen'>
+        <div style='margin-right: 10px'>+</div>
+      </ng-container>
+
+      <div>
+        {{label}}
+
+        <ng-container *ngIf='hasTooltip'>
+          <div style='display: inline-block; margin-left: 10px; color: rgb(69, 70, 185)'>
+            <i class="fa fa-info-circle" [tooltip]='tooltipElement'></i>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+
+    <span>
+      <i style='margin: 0 4px' class="fa fa-chevron-down" [ngClass]='{"icon-collapsed": !isOpen, "icon-expanded": isOpen}'></i>
+    </span>
+  </div>
+
+  <div [@expandCollapse]="isOpen ? 'expanded' : 'collapsed'">
+    <ng-content></ng-content>
+  </div>
+</div>

src/app/portal/components/collapsible/collapsible.component.scss

@@ -0,0 +1,39 @@
+.collapsible-container {
+  background-color: rgb(247, 247, 251);
+}
+
+.collapsible-label {
+  font-size: 1.1rem;
+  font-weight: bolder;
+
+  padding: 11px 16px;
+  border-radius: 4px;
+
+  user-select: none;
+  cursor: pointer;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+.icon-collapsed {
+  transition: transform 0.25s linear;
+  transform: rotate(0deg);
+}
+
+.icon-expanded {
+  transition: transform 0.25s ease-out;
+  transform: rotate(180deg);
+}
+
+.collapsible-content {
+  transition: max-height 0.4s ease-out;
+  overflow: hidden;
+
+  max-height: 1000px;
+}
+
+.collapsed {
+  // transition: 0.2s linear;
+  max-height: 0;
+}

src/app/portal/components/collapsible/collapsible.component.ts

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgClass, NgIf } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+
+@Component({
+  selector: 'app-collapsible',
+  templateUrl: './collapsible.component.html',
+  styleUrls: ['./collapsible.component.scss'],
+  imports: [
+    NgIf,
+    MatIconModule,
+    NgClass,
+    TooltipModule
+  ],
+  standalone: true,
+  animations: [
+    trigger('expandCollapse', [
+      state('collapsed', style({ height: '0px', overflow: 'hidden' })),
+      state('expanded', style({ height: '*', overflow: 'hidden' })),
+      transition('expanded <=> collapsed', animate('0.1s ease-out'))
+    ])
+  ]
+})
+export class CollapsibleComponent {
+  @Input() label = '';
+  @Input() decoration = "none";
+
+  @Input() isOpen = false;
+  @Output() isOpenChange = new EventEmitter<boolean>();
+
+  @Input() hasTooltip = false;
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+    this.isOpenChange.emit(this.isOpen);
+  }
+}

src/app/portal/components/filter-limit-button/filter-limit-button.component.html

@@ -0,0 +1,16 @@
+<ng-template #buttonContent>
+  <ng-content></ng-content>
+</ng-template>
+
+<ng-container *ngIf="step > 0">
+  <button class='limit-button' mat-button [disabled]='value >= max' (click)='valueChange.emit(clamp(value + step))'>
+    <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
+  </button>
+</ng-container>
+
+<ng-container *ngIf="step < 0">
+  <button class='limit-button' mat-button [disabled]='value <= min' (click)='valueChange.emit(clamp(value + step))'>
+    <ng-container *ngTemplateOutlet="buttonContent"></ng-container>
+  </button>
+</ng-container>
+

src/app/portal/components/filter-limit-button/filter-limit-button.component.scss

@@ -0,0 +1,7 @@
+.limit-button {
+  height: 3rem;
+}
+
+.limit-button:enabled {
+  color: #4546b9;
+}

src/app/portal/components/filter-limit-button/filter-limit-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterLimitButtonComponent } from './filter-limit-button.component';
+
+describe('FilterLimitButtonComponent', () => {
+  let component: FilterLimitButtonComponent;
+  let fixture: ComponentFixture<FilterLimitButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ FilterLimitButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FilterLimitButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/portal/components/filter-limit-button/filter-limit-button.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-filter-limit-button',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule],
+  templateUrl: './filter-limit-button.component.html',
+  styleUrls: ['./filter-limit-button.component.scss']
+})
+export class FilterLimitButtonComponent {
+  @Input() value = 0;
+  @Output() valueChange = new EventEmitter<number>();
+
+  @Input() step = 0;
+  @Input() min = 0;
+  @Input() max = 0;
+
+  clamp(value: number) {
+    return Math.min(Math.max(value, this.min), this.max);
+  }
+}

src/app/portal/components/filter-option/filter-option.component.html

@@ -0,0 +1,20 @@
+<div class='filter-option-layout focus-me' (click)='toggleValue()' matRipple tabindex='0'>
+  <div style='display: flex; justify-content: center; align-items: center'>
+
+    <!-- Position mat-checkbox to appear vertically and horizontally centered using pixels -->
+    <div style='width: 24px; height: 20px; margin: 5px 20px 5px 2px; position: relative'>
+      <mat-checkbox style='position: absolute; top: -5px; left: 2px; width: 10px; height: 10px' [ngModel]='value'></mat-checkbox>
+    </div>
+
+  </div>
+
+  <div style='display: flex; flex-grow: 1; justify-content: space-between'>
+    <div style='display: flex; justify-content: center; font-size: 1.1rem;'>
+      {{label}}
+    </div>
+
+    <div style='display: flex; justify-content: center; align-items: center; font-size: 14px; color: grey'>
+      {{count}}
+    </div>
+  </div>
+</div>

src/app/portal/components/filter-option/filter-option.component.scss

@@ -0,0 +1,20 @@
+.label-text {
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+}
+
+.filter-option-layout {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  // padding: 16px 12px;
+  padding: 8px;
+
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+}

src/app/portal/components/filter-option/filter-option.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatRippleModule } from '@angular/material/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+@Component({
+  selector: 'app-filter-option',
+  templateUrl: './filter-option.component.html',
+  styleUrls: ['./filter-option.component.scss'],
+  imports: [
+    FormsModule,
+    MatRippleModule,
+    MatCheckboxModule
+  ],
+  standalone: true
+})
+export class FilterOptionComponent {
+  @Input() label = "";
+  @Input() count = 0;
+
+  @Input() value: boolean = false;
+  @Output() valueChange = new EventEmitter<boolean>();
+
+  toggleValue() {
+    this.value = !this.value;
+    this.valueChange.emit(this.value);
+  }
+}