Feat/170 Meetings API integration

.husky/pre-commit

@@ -1 +1 @@
-bunx lint-staged
+npx lint-staged

src/app/core/constants/ngxs-states.constant.ts

@@ -2,6 +2,7 @@ import { AuthState } from '@core/store/auth';
 import { UserState } from '@core/store/user';
 import { CollectionsState } from '@osf/features/collections/store';
 import { InstitutionsState } from '@osf/features/institutions/store';
+import { MeetingsState } from '@osf/features/meetings/store';
 import { MyProjectsState } from '@osf/features/my-projects/store';
 import { AnalyticsState } from '@osf/features/project/analytics/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
@@ -28,4 +29,5 @@ export const STATES = [
   ProjectOverviewState,
   CollectionsState,
   WikiState,
+  MeetingsState,
 ];

src/app/core/helpers/http.helper.ts

@@ -1,20 +1,13 @@
 import { Params } from '@angular/router';
 
-import { SortOrder } from '@osf/shared/enums/sort-order.enum';
+import { SortOrder } from '@osf/shared/enums';
+import { QueryParams } from '@osf/shared/models';
 
-export const parseQueryFilterParams = (
-  params: Params
-): {
-  page: number;
-  size: number;
-  search: string;
-  sortColumn: string;
-  sortOrder: SortOrder;
-} => {
+export const parseQueryFilterParams = (params: Params): QueryParams => {
   const page = parseInt(params['page'], 10) || 1;
-  const size = parseInt(params['size'], 10);
-  const search = params['search'];
-  const sortColumn = params['sortColumn'];
+  const size = parseInt(params['size'], 10) || 10;
+  const search = params['search'] || '';
+  const sortColumn = params['sortColumn'] || '';
   const sortOrder = params['sortOrder'] === 'desc' ? SortOrder.Desc : SortOrder.Asc;
 
   return {

src/app/core/models/json-api.model.ts

@@ -3,6 +3,15 @@ export interface JsonApiResponse<Data, Included> {
   included?: Included;
 }
 
+export interface JsonApiResponseWithPaging<Data, Included> extends JsonApiResponse<Data, Included> {
+  links: {
+    meta: {
+      total: number;
+      per_page: number;
+    };
+  };
+}
+
 export interface ApiData<Attributes, Embeds, Relationships> {
   id: string;
   attributes: Attributes;

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

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

src/app/features/meetings/mappers/meetings.mapper.ts

@@ -0,0 +1,51 @@
+import { JsonApiResponseWithPaging } from '@core/models';
+import {
+  MeetingGetResponse,
+  MeetingSubmissionGetResponse,
+  MeetingSubmissionsWithPaging,
+  MeetingsWithPaging,
+} from '@osf/features/meetings/models';
+
+export class MeetingsMapper {
+  static fromMeetingsGetResponse(response: JsonApiResponseWithPaging<MeetingGetResponse[], null>): MeetingsWithPaging {
+    return {
+      data: response.data.map((item) => ({
+        id: item.id,
+        name: item.attributes.name,
+        location: item.attributes.location,
+        startDate: item.attributes.start_date,
+        endDate: item.attributes.end_date,
+        submissionsCount: item.attributes.submissions_count,
+      })),
+      totalCount: response.links.meta.total,
+    };
+  }
+
+  static fromMeetingSubmissionGetResponse(
+    response: JsonApiResponseWithPaging<MeetingSubmissionGetResponse[], null>
+  ): MeetingSubmissionsWithPaging {
+    return {
+      data: response.data.map((item) => ({
+        id: item.id,
+        title: item.attributes.title,
+        dateCreated: item.attributes.date_created,
+        authorName: item.attributes.author_name,
+        downloadCount: item.attributes.download_count,
+        meetingCategory: item.attributes.meeting_category,
+        downloadLink: item.links.download,
+      })),
+      totalCount: response.links.meta.total,
+    };
+  }
+
+  static fromMeetingGetResponse(response: MeetingGetResponse) {
+    return {
+      id: response.id,
+      name: response.attributes.name,
+      location: response.attributes.location,
+      startDate: response.attributes.start_date,
+      endDate: response.attributes.end_date,
+      submissionsCount: response.attributes.submissions_count,
+    };
+  }
+}

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

@@ -1,18 +1,59 @@
+// domain models
+import { NumberOrNull, StringOrNull } from '@core/helpers/types.helper';
+
 export interface Meeting {
   id: string;
-  title: string;
+  name: string;
   submissionsCount: number;
   location: string;
   startDate: Date;
   endDate: Date;
 }
 
+export interface MeetingsWithPaging {
+  data: Meeting[];
+  totalCount: number;
+}
+
 export interface MeetingSubmission {
   id: string;
   title: string;
   dateCreated: Date;
   authorName: string;
-  downloadCount: number;
+  downloadCount: NumberOrNull;
   meetingCategory: string;
-  downloadLink: string;
+  downloadLink: StringOrNull;
+}
+
+export interface MeetingSubmissionsWithPaging {
+  data: MeetingSubmission[];
+  totalCount: number;
+}
+
+//api models
+export interface MeetingGetResponse {
+  id: string;
+  type: 'meetings';
+  attributes: {
+    name: string;
+    location: string;
+    start_date: Date;
+    end_date: Date;
+    submissions_count: number;
+  };
+}
+
+export interface MeetingSubmissionGetResponse {
+  id: string;
+  type: 'meeting-submissions';
+  attributes: {
+    title: string;
+    date_created: Date;
+    author_name: string;
+    download_count: NumberOrNull;
+    meeting_category: string;
+  };
+  links: {
+    download: StringOrNull;
+  };
 }

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

@@ -1,16 +1,18 @@
-<osf-sub-header [title]="meeting().title" [description]="pageDescription()" />
+@if (meeting()) {
+  <osf-sub-header [title]="meeting()!.name" [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 || '')"
+    (searchValueChange)="onSearchChange($event || '')"
     [placeholder]="'meetings.details.searchPlaceholder' | translate"
   />
 
   <p-table
     class="mt-4"
-    [value]="meetingSubmissions()"
+    [value]="isMeetingSubmissionsLoading() ? skeletonData : meetingSubmissions()"
     [rows]="tableParams().rows"
     [first]="tableParams().firstRowIndex"
     [rowsPerPageOptions]="tableParams().rowsPerPageOptions"
@@ -26,7 +28,9 @@
     (onPage)="onPageChange($event)"
     (onSort)="onSort($event)"
     [sortField]="sortColumn()"
+    [sortOrder]="sortOrder() === 0 ? 1 : -1"
     [customSort]="true"
+    [resetPageOnSort]="false"
   >
     <ng-template #header>
       <tr>
@@ -53,23 +57,35 @@
       </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>
+      @if (item !== 1) {
+        <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>
+            @if (item.downloadCount) {
+              <p-button
+                [label]="'meetings.details.downloadButton' | translate"
+                icon="pi pi-download"
+                class="mr-1"
+                severity="secondary"
+                [raised]="true"
+                (click)="downloadSubmission($event, item)"
+              />
+              {{ item.downloadCount }}
+            } @else {
+              -
+            }
+          </td>
+        </tr>
+      } @else {
+        <tr class="loading-row">
+          <td colspan="5">
+            <p-skeleton width="100%" height="3.3rem" borderRadius="0" />
+          </td>
+        </tr>
+      }
     </ng-template>
   </p-table>
 </section>