Feat/164 Meetings design

src/app/app.routes.ts

@@ -56,6 +56,27 @@ export const routes: Routes = [
         loadComponent: () =>
           import('./features/privacy-policy/privacy-policy.component').then((mod) => mod.PrivacyPolicyComponent),
       },
+      {
+        path: 'meetings',
+        loadComponent: () => import('./features/meetings/meetings.component').then((mod) => mod.MeetingsComponent),
+        children: [
+          {
+            path: '',
+            pathMatch: 'full',
+            loadComponent: () =>
+              import('@osf/features/meetings/pages/meetings-landing/meetings-landing.component').then(
+                (mod) => mod.MeetingsLandingComponent
+              ),
+          },
+          {
+            path: ':id',
+            loadComponent: () =>
+              import('@osf/features/meetings/pages/meeting-details/meeting-details.component').then(
+                (mod) => mod.MeetingDetailsComponent
+              ),
+          },
+        ],
+      },
       {
         path: 'my-projects',
         loadComponent: () =>

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

@@ -27,6 +27,12 @@ export const NAV_ITEMS: NavItem[] = [
     icon: 'my-projects',
     useExactMatch: true,
   },
+  {
+    path: '/meetings',
+    label: 'navigation.meetings',
+    icon: 'meetings',
+    useExactMatch: true,
+  },
   {
     path: '/settings',
     label: 'navigation.settings',

src/app/features/meetings/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './meeting-submissions-table.constants';
+export * from './meetings-table.constants';

src/app/features/meetings/constants/meeting-submissions-table.constants.ts

@@ -0,0 +1,12 @@
+import { TableParameters } from '@shared/entities/table-parameters.interface';
+
+export const MEETING_SUBMISSIONS_TABLE_PARAMS: TableParameters = {
+  rows: 10,
+  paginator: true,
+  scrollable: false,
+  rowsPerPageOptions: [5, 10, 25],
+  totalRecords: 3,
+  firstRowIndex: 0,
+  defaultSortColumn: null,
+  defaultSortOrder: null,
+};

src/app/features/meetings/constants/meetings-table.constants.ts

@@ -0,0 +1,12 @@
+import { TableParameters } from '@shared/entities/table-parameters.interface';
+
+export const MEETINGS_TABLE_PARAMS: TableParameters = {
+  rows: 10,
+  paginator: true,
+  scrollable: false,
+  rowsPerPageOptions: [5, 10, 25],
+  totalRecords: 3,
+  firstRowIndex: 0,
+  defaultSortColumn: null,
+  defaultSortOrder: null,
+};

src/app/features/meetings/meetings.component.html

@@ -0,0 +1,3 @@
+<div [class.desktop]="isDesktop()">
+  <router-outlet />
+</div>

src/app/features/meetings/meetings.component.scss

@@ -0,0 +1,7 @@
+@use "assets/styles/mixins" as mix;
+
+.desktop {
+  @include mix.flex-column;
+  flex: 1;
+  margin-top: 4.5rem;
+}

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

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

src/app/features/meetings/meetings.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, HostBinding, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { RouterOutlet } from '@angular/router';
+
+import { IS_WEB } from '@shared/utils/breakpoints.tokens';
+
+@Component({
+  selector: 'osf-meetings',
+  imports: [RouterOutlet],
+  templateUrl: './meetings.component.html',
+  styleUrl: './meetings.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MeetingsComponent {
+  protected readonly isDesktop = toSignal(inject(IS_WEB));
+  @HostBinding('class') classes = 'flex flex-1 flex-column w-full h-full';
+}

src/app/features/meetings/models/index.ts

@@ -0,0 +1 @@
+export * from './meetings.models';

src/app/features/meetings/models/meetings.models.ts

@@ -0,0 +1,18 @@
+export interface Meeting {
+  id: string;
+  title: string;
+  submissionsCount: number;
+  location: string;
+  startDate: Date;
+  endDate: Date;
+}
+
+export interface MeetingSubmission {
+  id: string;
+  title: string;
+  dateCreated: Date;
+  authorName: string;
+  downloadCount: number;
+  meetingCategory: string;
+  downloadLink: string;
+}

src/app/features/meetings/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './meetings-details';
+export * from './meetings-landing';

src/app/features/meetings/pages/meeting-details/meeting-details.component.html

@@ -0,0 +1,70 @@
+<osf-sub-header [title]="meeting().title"
+                [description]="pageDescription()"/>
+
+<section class="flex-1 flex flex-column bg-white p-4">
+    <osf-search-input class="w-full mt-4"
+                      [searchValue]="searchValue()"
+                      (searchValueChange)="searchValue.set($event || '')"
+                      [placeholder]="'meetings.details.searchPlaceholder' | translate"/>
+
+    <p-table [value]="meetingSubmissions()"
+             [rows]="tableParams().rows"
+             [first]="tableParams().firstRowIndex"
+             [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
+             [paginator]="true"
+             [totalRecords]="tableParams().totalRecords"
+             paginatorDropdownAppendTo="body"
+             [resizableColumns]="true"
+             [autoLayout]="true"
+             [scrollable]="true"
+             [sortMode]="'single'"
+             [lazy]="true"
+             [lazyLoadOnInit]="true"
+             (onPage)="onPageChange($event)"
+             (onSort)="onSort($event)"
+             [sortField]="sortColumn()"
+             [customSort]="true">
+        <ng-template #header>
+            <tr>
+                <th pSortableColumn="title">
+                    {{ 'meetings.details.table.columns.title' | translate }}
+                    <p-sortIcon field="title"/>
+                </th>
+                <th pSortableColumn="authorName">
+                    {{ 'meetings.details.table.columns.author' | translate }}
+                    <p-sortIcon field="authorName"/>
+                </th>
+                <th pSortableColumn="meetingCategory">
+                    {{ 'meetings.details.table.columns.category' | translate }}
+                    <p-sortIcon field="meetingCategory"/>
+                </th>
+                <th pSortableColumn="dateCreated">
+                    {{ 'meetings.details.table.columns.dateCreated' | translate }}
+                    <p-sortIcon field="dateCreated"/>
+                </th>
+                <th pSortableColumn="downloadCount">
+                    {{ 'meetings.details.table.columns.downloads' | translate }}
+                    <p-sortIcon field="downloadCount"/>
+                </th>
+            </tr>
+        </ng-template>
+        <ng-template #body let-item>
+            <tr class="cursor-pointer"
+                [routerLink]="['/my-projects', item.id, 'overview']">
+                <td>{{ item.title }}</td>
+                <td>{{ item.authorName }}</td>
+                <td>{{ item.meetingCategory }}</td>
+                <td>{{ item.dateCreated | date: 'MMM d, y, h:mm a' }}</td>
+                <td>
+                    <p-button [label]="'meetings.details.downloadButton' | translate"
+                              icon="pi pi-download"
+                              class="mr-1"
+                              severity="secondary"
+                              [raised]="true"
+                              (click)="downloadSubmission($event, item)"/>
+                    {{ item.downloadCount }}
+                </td>
+            </tr>
+        </ng-template>
+    </p-table>
+</section>

src/app/features/meetings/pages/meeting-details/meeting-details.component.spec.ts

@@ -0,0 +1,26 @@
+import { TranslateModule } from '@ngx-translate/core';
+import { MockModule } from 'ng-mocks';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { MeetingDetailsComponent } from './meeting-details.component';
+
+describe('MeetingDetailsComponent', () => {
+  let component: MeetingDetailsComponent;
+  let fixture: ComponentFixture<MeetingDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MeetingDetailsComponent, MockModule(TranslateModule), MockModule(RouterModule)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MeetingDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/meetings/pages/meeting-details/meeting-details.component.ts

@@ -0,0 +1,59 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { SortEvent } from 'primeng/api';
+import { Button } from 'primeng/button';
+import { TableModule, TablePageEvent } from 'primeng/table';
+
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, HostBinding, inject, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { MEETING_SUBMISSIONS_TABLE_PARAMS } from '@osf/features/meetings/constants';
+import { Meeting, MeetingSubmission } from '@osf/features/meetings/models';
+import { testMeeting, testSubmissions } from '@osf/features/meetings/test-data';
+import { SearchInputComponent } from '@shared/components/search-input/search-input.component';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { TableParameters } from '@shared/entities/table-parameters.interface';
+
+@Component({
+  selector: 'osf-meeting-details',
+  imports: [SubHeaderComponent, SearchInputComponent, DatePipe, TableModule, Button, RouterLink, TranslatePipe],
+  templateUrl: './meeting-details.component.html',
+  styleUrl: './meeting-details.component.scss',
+  providers: [DatePipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MeetingDetailsComponent {
+  @HostBinding('class') classes = 'flex-1 flex flex-column w-full h-full';
+  #datePipe = inject(DatePipe);
+  searchValue = signal('');
+  sortColumn = signal<string | undefined>(undefined);
+  tableParams = signal<TableParameters>({
+    ...MEETING_SUBMISSIONS_TABLE_PARAMS,
+    firstRowIndex: 0,
+  });
+  meeting = signal<Meeting>(testMeeting);
+  meetingSubmissions = signal<MeetingSubmission[]>(testSubmissions);
+
+  pageDescription = computed(() => {
+    if (!this.meeting) {
+      return '';
+    }
+
+    return `${this.meeting().location} | ${this.#datePipe.transform(this.meeting().startDate, 'MMM d, y')}
+    - ${this.#datePipe.transform(this.meeting().endDate, 'MMM d, y')}`;
+  });
+
+  onPageChange(tablePageEvent: TablePageEvent) {
+    // [RNi] TODO: implement paging logic and handle event while integrating API
+  }
+
+  onSort(sortEvent: SortEvent) {
+    // [RNi] TODO: implement sorting logic and handle event while integrating API
+  }
+
+  downloadSubmission(event: Event, item: MeetingSubmission) {
+    event.stopPropagation();
+    window.open(item.downloadLink, '_blank');
+  }
+}