Feat(my-projects-api-integration): Integrated My Projects Page API

src/app/app.config.ts

@@ -8,7 +8,7 @@ import Aura from '@primeng/themes/aura';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 import { ConfirmationService } from 'primeng/api';
-import { STATES } from '@core/helpers/ngxs-states.constant';
+import { STATES } from '@core/constants/ngxs-states.constant';
 import { provideServiceWorker } from '@angular/service-worker';
 
 export const appConfig: ApplicationConfig = {

src/app/core/components/breadcrumb/breadcrumb.component.ts

@@ -13,7 +13,8 @@ export class BreadcrumbComponent {
   #destroyRef = inject(DestroyRef);
   protected readonly url = signal(this.#router.url);
   protected readonly parsedUrl = computed(() => {
-    return this.url().split('/').filter(Boolean);
+    const cleanUrl = this.url().split('?')[0].split('#')[0];
+    return cleanUrl.replace('-', ' ').split('/').filter(Boolean);
   });
 
   constructor() {

src/app/core/components/header/header.component.html

@@ -1,2 +1,2 @@
-<!--<osf-breadcrumb />-->
+<osf-breadcrumb />
 <a [routerLink]="authButtonLink()" class="p-button">{{ authButtonText() }}</a>

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
-import { NAV_ITEMS } from '@osf/core/helpers/nav-items.constant';
+import { NAV_ITEMS } from '@core/constants/nav-items.constant';
 import { PanelMenuModule } from 'primeng/panelmenu';
 import { MenuItem } from 'primeng/api';
 

src/app/core/constants/my-projects-table.constants.ts

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

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

@@ -1,4 +1,4 @@
-import { NavItem } from '@osf/shared/entities/nav-item.interface';
+import { NavItem } from '@shared/entities/nav-item.interface';
 
 export const NAV_ITEMS: NavItem[] = [
   { path: '/home', label: 'Home', icon: 'home', useExactMatch: true },

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

@@ -2,7 +2,8 @@ import { AuthState } from '@core/store/auth';
 import { TokensState } from '@core/store/settings';
 import { AddonsState } from '@core/store/settings/addons';
 import { UserState } from '@core/store/user';
-import { HomeState } from 'src/app/features/home/store';
+import { HomeState } from '@osf/features/home/store';
+import { MyProjectsState } from '@core/store/my-projects';
 import { SearchState } from '@osf/features/search/store';
 
 export const STATES = [
@@ -12,4 +13,5 @@ export const STATES = [
   UserState,
   HomeState,
   SearchState,
+  MyProjectsState,
 ];

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

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

src/app/core/services/json-api/json-api.service.ts

@@ -10,6 +10,7 @@ export class JsonApiService {
   http: HttpClient = inject(HttpClient);
   readonly #token =
     'Bearer 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
+  // OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv
   readonly #headers = new HttpHeaders({
     Authorization: this.#token,
     Accept: 'application/vnd.api+json',

src/app/core/store/my-projects/index.ts

@@ -0,0 +1,4 @@
+export * from './my-projects.state';
+export * from './my-projects.actions';
+export * from './my-projects.selectors';
+export * from './my-projects.model';

src/app/core/store/my-projects/my-projects.actions.ts

@@ -0,0 +1,49 @@
+import { MyProjectsSearchFilters } from '@osf/features/my-projects/entities/my-projects-search-filters.models';
+
+export class GetMyProjects {
+  static readonly type = '[My Projects] Get Projects';
+
+  constructor(
+    public pageNumber: number,
+    public pageSize: number,
+    public filters: MyProjectsSearchFilters,
+  ) {}
+}
+
+export class GetMyRegistrations {
+  static readonly type = '[My Projects] Get Registrations';
+
+  constructor(
+    public pageNumber: number,
+    public pageSize: number,
+    public filters: MyProjectsSearchFilters,
+  ) {}
+}
+
+export class GetMyPreprints {
+  static readonly type = '[My Projects] Get Preprints';
+
+  constructor(
+    public pageNumber: number,
+    public pageSize: number,
+    public filters: MyProjectsSearchFilters,
+  ) {}
+}
+
+export class GetMyBookmarks {
+  static readonly type = '[My Projects] Get Bookmarks';
+  constructor(
+    public bookmarksId: string,
+    public pageNumber: number,
+    public pageSize: number,
+    public filters: MyProjectsSearchFilters,
+  ) {}
+}
+
+export class GetBookmarksCollectionId {
+  static readonly type = '[My Projects] Get Bookmarks Collection Id';
+}
+
+export class ClearMyProjects {
+  static readonly type = '[My Projects] Clear Projects';
+}

src/app/core/store/my-projects/my-projects.model.ts

@@ -0,0 +1,13 @@
+import { MyProjectsItem } from '@osf/features/my-projects/entities/my-projects.entities';
+
+export interface MyProjectsStateModel {
+  projects: MyProjectsItem[];
+  registrations: MyProjectsItem[];
+  preprints: MyProjectsItem[];
+  bookmarks: MyProjectsItem[];
+  totalProjects: number;
+  totalRegistrations: number;
+  totalPreprints: number;
+  totalBookmarks: number;
+  bookmarksId: string;
+}

src/app/core/store/my-projects/my-projects.selectors.ts

@@ -0,0 +1,50 @@
+import { Selector } from '@ngxs/store';
+import { MyProjectsStateModel } from './my-projects.model';
+import { MyProjectsState } from '@core/store/my-projects/my-projects.state';
+
+export class MyProjectsSelectors {
+  @Selector([MyProjectsState])
+  static getProjects(state: MyProjectsStateModel) {
+    return state.projects;
+  }
+
+  @Selector([MyProjectsState])
+  static getRegistrations(state: MyProjectsStateModel) {
+    return state.registrations;
+  }
+
+  @Selector([MyProjectsState])
+  static getPreprints(state: MyProjectsStateModel) {
+    return state.preprints;
+  }
+
+  @Selector([MyProjectsState])
+  static getBookmarks(state: MyProjectsStateModel) {
+    return state.bookmarks;
+  }
+
+  @Selector([MyProjectsState])
+  static getTotalProjectsCount(state: MyProjectsStateModel) {
+    return state.totalProjects;
+  }
+
+  @Selector([MyProjectsState])
+  static getTotalRegistrationsCount(state: MyProjectsStateModel) {
+    return state.totalRegistrations;
+  }
+
+  @Selector([MyProjectsState])
+  static getTotalPreprintsCount(state: MyProjectsStateModel) {
+    return state.totalPreprints;
+  }
+
+  @Selector([MyProjectsState])
+  static getTotalBookmarksCount(state: MyProjectsStateModel) {
+    return state.totalBookmarks;
+  }
+
+  @Selector([MyProjectsState])
+  static getBookmarksCollectionId(state: MyProjectsStateModel) {
+    return state.bookmarksId;
+  }
+}

src/app/core/store/my-projects/my-projects.state.ts

@@ -0,0 +1,127 @@
+import { inject, Injectable } from '@angular/core';
+import { State, Action, StateContext } from '@ngxs/store';
+import { MyProjectsStateModel } from './my-projects.model';
+import {
+  GetMyProjects,
+  GetMyRegistrations,
+  GetMyPreprints,
+  GetMyBookmarks,
+  GetBookmarksCollectionId,
+  ClearMyProjects,
+} from './my-projects.actions';
+import { MyProjectsService } from '@osf/features/my-projects/my-projects.service';
+import { tap } from 'rxjs';
+
+@State<MyProjectsStateModel>({
+  name: 'myProjects',
+  defaults: {
+    projects: [],
+    registrations: [],
+    preprints: [],
+    bookmarks: [],
+    totalProjects: 0,
+    totalRegistrations: 0,
+    totalPreprints: 0,
+    totalBookmarks: 0,
+    bookmarksId: '',
+  },
+})
+@Injectable()
+export class MyProjectsState {
+  myProjectsService = inject(MyProjectsService);
+
+  @Action(GetMyProjects)
+  getProjects(ctx: StateContext<MyProjectsStateModel>, action: GetMyProjects) {
+    return this.myProjectsService
+      .getMyProjects(action.filters, action.pageNumber, action.pageSize)
+      .pipe(
+        tap((res) => {
+          ctx.patchState({
+            projects: res.data,
+            totalProjects: res.links.meta.total,
+          });
+        }),
+      );
+  }
+
+  @Action(GetMyRegistrations)
+  getRegistrations(
+    ctx: StateContext<MyProjectsStateModel>,
+    action: GetMyRegistrations,
+  ) {
+    return this.myProjectsService
+      .getMyRegistrations(action.filters, action.pageNumber, action.pageSize)
+      .pipe(
+        tap((res) => {
+          ctx.patchState({
+            registrations: res.data,
+            totalRegistrations: res.links.meta.total,
+          });
+        }),
+      );
+  }
+
+  @Action(GetMyPreprints)
+  getPreprints(
+    ctx: StateContext<MyProjectsStateModel>,
+    action: GetMyPreprints,
+  ) {
+    return this.myProjectsService
+      .getMyPreprints(action.filters, action.pageNumber, action.pageSize)
+      .pipe(
+        tap((res) => {
+          ctx.patchState({
+            preprints: res.data,
+            totalPreprints: res.links.meta.total,
+          });
+        }),
+      );
+  }
+
+  @Action(GetMyBookmarks)
+  getBookmarks(
+    ctx: StateContext<MyProjectsStateModel>,
+    action: GetMyBookmarks,
+  ) {
+    return this.myProjectsService
+      .getMyBookmarks(
+        action.bookmarksId,
+        action.filters,
+        action.pageNumber,
+        action.pageSize,
+      )
+      .pipe(
+        tap((res) => {
+          ctx.patchState({
+            bookmarks: res.data,
+            totalBookmarks: res.links.meta.total,
+          });
+        }),
+      );
+  }
+
+  @Action(GetBookmarksCollectionId)
+  getBookmarksCollectionId(ctx: StateContext<MyProjectsStateModel>) {
+    return this.myProjectsService.getBookmarksCollectionId().pipe(
+      tap((res) => {
+        ctx.patchState({
+          bookmarksId: res,
+        });
+      }),
+    );
+  }
+
+  @Action(ClearMyProjects)
+  clearMyProjects(ctx: StateContext<MyProjectsStateModel>) {
+    ctx.patchState({
+      projects: [],
+      registrations: [],
+      preprints: [],
+      bookmarks: [],
+      totalProjects: 0,
+      totalRegistrations: 0,
+      totalPreprints: 0,
+      totalBookmarks: 0,
+    });
+  }
+}