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

* feat(design-collections-page): added layout for the collections landing page

* feat(design-collections-page): added help dialog, fixed comments

* feat(design-collections-page): fixed circular dependency imports issue

Author: rnastyuk

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>