Feat(design-collections-page): Collections landing page layout

src/app/app.routes.ts

@@ -64,6 +64,10 @@ export const routes: Routes = [
         loadComponent: () =>
           import('./features/static/privacy-policy/privacy-policy.component').then((mod) => mod.PrivacyPolicyComponent),
       },
+      {
+        path: 'collections',
+        loadChildren: () => import('./features/collections/collections.routes').then((mod) => mod.collectionsRoutes),
+      },
       {
         path: 'meetings',
         loadComponent: () => import('./features/meetings/meetings.component').then((mod) => mod.MeetingsComponent),

src/app/core/constants/nav-items.constant.ts

@@ -40,6 +40,12 @@ export const NAV_ITEMS: NavItem[] = [
     icon: 'profile',
     useExactMatch: true,
   },
+  {
+    path: '/collections',
+    label: 'navigation.collections',
+    icon: 'collections',
+    useExactMatch: true,
+  },
   {
     path: '/meetings',
     label: 'navigation.meetings',

src/app/core/interceptors/auth.interceptor.ts

@@ -7,8 +7,9 @@ export const authInterceptor: HttpInterceptorFn = (
   next: HttpHandlerFn
 ): Observable<HttpEvent<unknown>> => {
   const authToken = 'UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm';
-  // '2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
-  // 'OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv';
+  // OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv
+  // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm kyrylo
+  // 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt roman nastyuk
 
   if (authToken) {
     const authReq = req.clone({

src/app/features/collections/collections.component.html

@@ -0,0 +1,29 @@
+<section class="collections flex flex-column flex-1 mt-0 sm:mt-5 xl:mt-7">
+  <div class="collections-sub-header flex justify-content-between flex-column gap-4 mb-4 sm:mb-6 sm:gap-0 sm:flex-row">
+    <div class="flex gap-3">
+      <i class="collections-icon text-white osf-icon-collections"></i>
+      <h1 class="flex align-items-center text-white">Collection Title</h1>
+    </div>
+
+    <p-button class="collections-heading-btn" [label]="'collections.buttons.addToCollection' | translate" />
+  </div>
+
+  <div class="search-input-container">
+    <img
+      ngSrc="assets/icons/colored/question-mark.svg"
+      alt="better-research"
+      tabindex="0"
+      role="button"
+      height="36"
+      width="36"
+      class="cursor-pointer"
+      (click)="openHelpDialog()"
+      (keydown.enter)="openHelpDialog()"
+    />
+    <osf-search-input [control]="searchControl" [placeholder]="'collections.searchInput.placeholder' | translate" />
+  </div>
+
+  <div class="content-container flex-1">
+    <osf-collections-main-content />
+  </div>
+</section>

src/app/features/collections/collections.component.scss

@@ -0,0 +1,40 @@
+@use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+:host {
+  --collection-bg-color: #013b5c;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .collections {
+    background: var(--collection-bg-color);
+    border: 2px solid var.$white;
+    border-top: none;
+
+    .collections-sub-header {
+      margin: mix.rem(48px) mix.rem(28px);
+
+      .collections-icon {
+        font-size: mix.rem(42px);
+      }
+    }
+
+    .search-input-container {
+      margin: 0 mix.rem(28px) mix.rem(48px) mix.rem(28px);
+      position: relative;
+
+      img {
+        position: absolute;
+        right: mix.rem(4px);
+        top: mix.rem(4px);
+        z-index: 1;
+      }
+    }
+
+    .content-container {
+      background: var.$white;
+      padding: mix.rem(28px);
+    }
+  }
+}

src/app/features/collections/collections.component.spec.ts

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

src/app/features/collections/collections.component.ts

@@ -0,0 +1,35 @@
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DialogService } from 'primeng/dynamicdialog';
+
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { CollectionsHelpDialogComponent, CollectionsMainContentComponent } from '@osf/features/collections/components';
+import { SearchInputComponent } from '@shared/components';
+
+@Component({
+  selector: 'osf-collections',
+  imports: [NgOptimizedImage, SearchInputComponent, TranslatePipe, Button, CollectionsMainContentComponent],
+  templateUrl: './collections.component.html',
+  styleUrl: './collections.component.scss',
+  providers: [DialogService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CollectionsComponent {
+  protected dialogService = inject(DialogService);
+  protected translateService = inject(TranslateService);
+  protected searchControl = new FormControl('');
+
+  openHelpDialog() {
+    this.dialogService.open(CollectionsHelpDialogComponent, {
+      focusOnShow: false,
+      header: this.translateService.instant('collections.helpDialog.header'),
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+  }
+}

src/app/features/collections/collections.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { CollectionsComponent } from '@osf/features/collections/collections.component';
+
+export const collectionsRoutes: Routes = [
+  {
+    path: '',
+    component: CollectionsComponent,
+  },
+];

src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.html

@@ -0,0 +1,21 @@
+<div class="mb-4 mt-4 flex gap-3 flex-wrap">
+  @if (activeFilters().programArea.length) {
+    @for (filter of activeFilters().programArea; track filter) {
+      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveProgramAreaFilter(filter)">
+        <ng-template pTemplate="removeicon">
+          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
+        </ng-template>
+      </p-chip>
+    }
+  }
+
+  @if (activeFilters().collectedType.length) {
+    @for (filter of activeFilters().collectedType; track filter) {
+      <p-chip [label]="filter" [removable]="true" (onRemove)="onRemoveCollectedTypeFilter(filter)">
+        <ng-template pTemplate="removeicon">
+          <i class="osf-icon-close text-xs font-bold text-align-center" tabindex="0" role="button"></i>
+        </ng-template>
+      </p-chip>
+    }
+  }
+</div>

src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.spec.ts

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

src/app/features/collections/components/collections-filter-chips/collections-filter-chips.component.ts

@@ -0,0 +1,33 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { PrimeTemplate } from 'primeng/api';
+import { Chip } from 'primeng/chip';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters } from '@osf/features/collections/store';
+
+@Component({
+  selector: 'osf-collections-filter-chips',
+  imports: [Chip, PrimeTemplate],
+  templateUrl: './collections-filter-chips.component.html',
+  styleUrl: './collections-filter-chips.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CollectionsFilterChipsComponent {
+  protected activeFilters = select(CollectionsSelectors.getAllFilters);
+  protected actions = createDispatchMap({
+    setProgramAreaFilters: SetProgramAreaFilters,
+    setCollectedTypeFilters: SetCollectedTypeFilters,
+  });
+
+  protected onRemoveProgramAreaFilter(removedFilter: string): void {
+    const currentFilters = this.activeFilters().programArea.filter((filter) => filter !== removedFilter);
+    this.actions.setProgramAreaFilters(currentFilters);
+  }
+
+  protected onRemoveCollectedTypeFilter(removedFilter: string): void {
+    const currentFilters = this.activeFilters().collectedType.filter((filter) => filter !== removedFilter);
+    this.actions.setCollectedTypeFilters(currentFilters);
+  }
+}

src/app/features/collections/components/collections-filters/collections-filters.component.html

@@ -0,0 +1,43 @@
+<div class="filters">
+  <p-accordion>
+    <p-accordion-panel value="0">
+      <p-accordion-header>{{ 'collections.filters.programArea.label' | translate }}</p-accordion-header>
+      <p-accordion-content>
+        <div class="content-body filter dropdown-filter">
+          <p>{{ 'collections.filters.programArea.description' | translate }}</p>
+          <p-multi-select
+            id="program-area"
+            [options]="programAreaFilterOptions"
+            [ngModel]="selectedProgramAreaFilters()"
+            [placeholder]="'collections.filters.programArea.placeholder' | translate"
+            appendTo="body"
+            (onChange)="setProgramAreaFilters($event)"
+            (onClear)="clearProgramAreaFilters()"
+            [maxSelectedLabels]="1"
+            [showClear]="selectedProgramAreaFilters().length"
+          ></p-multi-select>
+        </div>
+      </p-accordion-content>
+    </p-accordion-panel>
+
+    <p-accordion-panel value="1">
+      <p-accordion-header>{{ 'collections.filters.collectedType.label' | translate }}</p-accordion-header>
+      <p-accordion-content>
+        <div class="content-body filter dropdown-filter">
+          <p>{{ 'collections.filters.collectedType.description' | translate }}</p>
+          <p-multi-select
+            id="collected-type"
+            [options]="collectedTypeFilterOptions"
+            [ngModel]="selectedCollectedTypeFilters()"
+            [placeholder]="'collections.filters.collectedType.placeholder' | translate"
+            appendTo="body"
+            [maxSelectedLabels]="1"
+            (onChange)="setCollectedTypeFilters($event)"
+            (onClear)="clearCollectedTypeFilters()"
+            [showClear]="selectedCollectedTypeFilters().length"
+          ></p-multi-select>
+        </div>
+      </p-accordion-content>
+    </p-accordion-panel>
+  </p-accordion>
+</div>

src/app/features/collections/components/collections-filters/collections-filters.component.scss

@@ -0,0 +1,16 @@
+@use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+:host {
+  width: 35%;
+
+  .filters {
+    border: 1px solid var.$grey-2;
+    border-radius: mix.rem(12px);
+    padding: 0 mix.rem(20px);
+    display: flex;
+    flex-direction: column;
+    gap: mix.rem(12px);
+    height: fit-content;
+  }
+}

src/app/features/collections/components/collections-filters/collections-filters.component.spec.ts

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

src/app/features/collections/components/collections-filters/collections-filters.component.ts

@@ -0,0 +1,50 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
+import { MultiSelect, MultiSelectChangeEvent } from 'primeng/multiselect';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { CollectionsSelectors, SetCollectedTypeFilters, SetProgramAreaFilters } from '@osf/features/collections/store';
+import { COLLECTED_TYPE_FILTERS_OPTIONS, PROGRAM_AREA_FILTERS_OPTIONS } from '@osf/features/collections/utils';
+
+@Component({
+  selector: 'osf-collections-filters',
+  imports: [FormsModule, MultiSelect, Accordion, AccordionContent, AccordionHeader, AccordionPanel, TranslatePipe],
+  templateUrl: './collections-filters.component.html',
+  styleUrl: './collections-filters.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CollectionsFiltersComponent {
+  protected selectedProgramAreaFilters = select(CollectionsSelectors.getProgramAreaFilters);
+  protected selectedCollectedTypeFilters = select(CollectionsSelectors.getCollectedTypeFilters);
+  protected actions = createDispatchMap({
+    setProgramAreaFilters: SetProgramAreaFilters,
+    setCollectedTypeFilters: SetCollectedTypeFilters,
+  });
+
+  // Mocked filter options data
+  protected readonly programAreaFilterOptions = PROGRAM_AREA_FILTERS_OPTIONS;
+  protected readonly collectedTypeFilterOptions = COLLECTED_TYPE_FILTERS_OPTIONS;
+
+  setProgramAreaFilters($event: MultiSelectChangeEvent): void {
+    const filters = $event.value;
+    this.actions.setProgramAreaFilters(filters);
+  }
+
+  setCollectedTypeFilters($event: MultiSelectChangeEvent): void {
+    const filters = $event.value;
+    this.actions.setCollectedTypeFilters(filters);
+  }
+
+  clearProgramAreaFilters(): void {
+    this.actions.setProgramAreaFilters([]);
+  }
+
+  clearCollectedTypeFilters(): void {
+    this.actions.setCollectedTypeFilters([]);
+  }
+}

src/app/features/collections/components/collections-help-dialog/collections-help-dialog.component.html

@@ -0,0 +1,8 @@
+<div class="dialog-content">
+  <p class="py-3">
+    {{ 'collections.helpDialog.message' | translate }}
+    <a href="https://help.osf.io/article/398-osf-collections" target="_blank"
+      >{{ 'collections.helpDialog.linkText' | translate }}.</a
+    >
+  </p>
+</div>