Feat/175 - Project Overview Linked Projects (#196)

* feat(project-overview-link-project): added link node functionality

* feat(project-overview-link-project): changed action menu to trash icon button

* feat(project-overview-link-project): fixed comments

Author: rnastyuk

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

@@ -1,7 +1,6 @@
 import { AuthState } from '@core/store/auth';
 import { UserState } from '@core/store/user';
 import { MeetingsState } from '@osf/features/meetings/store';
-import { MyProjectsState } from '@osf/features/my-projects/store';
 import { ProjectMetadataState } from '@osf/features/project/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
@@ -13,11 +12,13 @@ import { AddonsState, InstitutionsState } from '@shared/stores';
 import { LicensesState } from '@shared/stores/licenses';
 import { RegionsState } from '@shared/stores/regions';
 
+import { MyResourcesState } from 'src/app/shared/stores/my-resources';
+
 export const STATES = [
   AuthState,
   AddonsState,
   UserState,
-  MyProjectsState,
+  MyResourcesState,
   InstitutionsState,
   DeveloperAppsState,
   AccountSettingsState,

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

@@ -7,7 +7,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 
-import { MyProjectsState } from '@osf/features/my-projects/store/my-projects.state';
+import { MyResourcesState } from '@shared/stores/my-resources/my-resources.state';
 
 import { HomeComponent } from './home.component';
 
@@ -22,7 +22,7 @@ describe('HomeComponent', () => {
         provideRouter([]),
         provideHttpClient(withFetch()),
         provideHttpClientTesting(),
-        provideStore([MyProjectsState]),
+        provideStore([MyResourcesState]),
       ],
     }).compileComponents();
 

src/app/features/home/home.component.ts

@@ -15,20 +15,19 @@ import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 import { MY_PROJECTS_TABLE_PARAMS } from '@osf/core/constants';
-import { MyProjectsItem } from '@osf/features/my-projects/models';
 import { MyProjectsTableComponent, SubHeaderComponent } from '@osf/shared/components';
 import { SortOrder } from '@osf/shared/enums';
-import { TableParameters } from '@osf/shared/models';
+import { MyResourcesItem, MyResourcesSearchFilters, TableParameters } from '@osf/shared/models';
 import { IS_MEDIUM } from '@osf/shared/utils';
 import { FetchUserInstitutions } from '@shared/stores';
 
 import { CreateProjectDialogComponent } from '../my-projects/components';
-import { MyProjectsSearchFilters } from '../my-projects/models';
-import { ClearMyProjects, GetMyProjects, MyProjectsSelectors } from '../my-projects/store';
 import { AccountSettingsService } from '../settings/account-settings/services';
 
 import { ConfirmEmailComponent } from './components';
 
+import { ClearMyResources, GetMyProjects, MyResourcesSelectors } from 'src/app/shared/stores/my-resources';
+
 @Component({
   selector: 'osf-home',
   imports: [RouterLink, Button, SubHeaderComponent, MyProjectsTableComponent, TranslatePipe],
@@ -51,15 +50,15 @@ export class HomeComponent implements OnInit {
   protected readonly isMedium = toSignal(inject(IS_MEDIUM));
 
   protected readonly searchControl = new FormControl<string>('');
-  protected readonly activeProject = signal<MyProjectsItem | null>(null);
+  protected readonly activeProject = signal<MyResourcesItem | null>(null);
   protected readonly sortColumn = signal<string | undefined>(undefined);
   protected readonly sortOrder = signal<SortOrder>(SortOrder.Asc);
   protected readonly tableParams = signal<TableParameters>({
     ...MY_PROJECTS_TABLE_PARAMS,
   });
 
-  protected readonly projects = select(MyProjectsSelectors.getProjects);
-  protected readonly totalProjectsCount = select(MyProjectsSelectors.getTotalProjects);
+  protected readonly projects = select(MyResourcesSelectors.getProjects);
+  protected readonly totalProjectsCount = select(MyResourcesSelectors.getTotalProjects);
 
   protected readonly filteredProjects = computed(() => {
     const search = this.searchControl.value?.toLowerCase() ?? '';
@@ -159,7 +158,7 @@ export class HomeComponent implements OnInit {
 
   setupCleanup(): void {
     this.destroyRef.onDestroy(() => {
-      this.store.dispatch(new ClearMyProjects());
+      this.store.dispatch(new ClearMyResources());
     });
   }
 
@@ -180,7 +179,7 @@ export class HomeComponent implements OnInit {
       });
   }
 
-  createFilters(): MyProjectsSearchFilters {
+  createFilters(): MyResourcesSearchFilters {
     return {
       searchValue: this.searchControl.value ?? '',
       searchFields: ['title'],
@@ -224,7 +223,7 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  protected navigateToProject(project: MyProjectsItem): void {
+  protected navigateToProject(project: MyResourcesItem): void {
     this.activeProject.set(project);
     this.router.navigate(['/my-projects', project.id]);
   }

src/app/features/my-projects/components/create-project-dialog/create-project-dialog.component.ts

@@ -9,12 +9,13 @@ import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@a
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 import { MY_PROJECTS_TABLE_PARAMS } from '@core/constants';
-import { CreateProject, GetMyProjects, MyProjectsSelectors } from '@osf/features/my-projects/store';
 import { AddProjectFormComponent } from '@shared/components';
 import { ProjectFormControls } from '@shared/enums';
 import { IdName, ProjectForm } from '@shared/models';
 import { CustomValidators } from '@shared/utils';
 
+import { CreateProject, GetMyProjects, MyResourcesSelectors } from 'src/app/shared/stores/my-resources';
+
 @Component({
   selector: 'osf-create-project-dialog',
   imports: [AddProjectFormComponent, Button, TranslatePipe],
@@ -30,7 +31,7 @@ export class CreateProjectDialogComponent implements OnInit {
     createProject: CreateProject,
   });
 
-  private projects = select(MyProjectsSelectors.getProjects);
+  private projects = select(MyResourcesSelectors.getProjects);
 
   readonly templates = computed(() => {
     return this.projects().map(
@@ -41,7 +42,7 @@ export class CreateProjectDialogComponent implements OnInit {
         }) as IdName
     );
   });
-  readonly isProjectSubmitting = select(MyProjectsSelectors.isProjectSubmitting);
+  readonly isProjectSubmitting = select(MyResourcesSelectors.isProjectSubmitting);
 
   readonly projectForm = new FormGroup<ProjectForm>({
     [ProjectFormControls.Title]: new FormControl('', {

src/app/features/my-projects/mappers/index.ts

@@ -1 +1 @@
-export { MyProjectsMapper } from './my-projects.mapper';
+export { MyResourcesMapper } from './my-resources.mapper';

src/app/features/my-projects/mappers/my-projects.mapper.ts renamed to src/app/features/my-projects/mappers/my-resources.mapper.ts

@@ -1,11 +1,12 @@
-import { MyProjectsItem, MyProjectsItemGetResponseJsonApi } from '../models';
+import { MyResourcesItem, MyResourcesItemGetResponseJsonApi } from 'src/app/shared/models/my-resources';
 
-export class MyProjectsMapper {
-  static fromResponse(response: MyProjectsItemGetResponseJsonApi): MyProjectsItem {
+export class MyResourcesMapper {
+  static fromResponse(response: MyResourcesItemGetResponseJsonApi): MyResourcesItem {
     return {
       id: response.id,
       type: response.type,
       title: response.attributes.title,
+      dateCreated: response.attributes.date_created,
       dateModified: response.attributes.date_modified,
       isPublic: response.attributes.public,
       contributors: response.embeds.bibliographic_contributors.data.map((contributor) => ({

src/app/features/my-projects/models/index.ts

@@ -12,11 +12,11 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
+import { MyResourcesState } from '@shared/stores/my-resources/my-resources.state';
 import { IS_MEDIUM } from '@shared/utils';
 
 import { InstitutionsState } from '../../shared/stores/institutions';
 
-import { MyProjectsState } from './store/my-projects.state';
 import { MyProjectsComponent } from './my-projects.component';
 
 describe('MyProjectsComponent', () => {
@@ -30,7 +30,7 @@ describe('MyProjectsComponent', () => {
     await TestBed.configureTestingModule({
       imports: [MyProjectsComponent, TranslateModule.forRoot()],
       providers: [
-        provideStore([MyProjectsState, InstitutionsState]),
+        provideStore([MyResourcesState, InstitutionsState]),
         provideHttpClient(),
         provideHttpClientTesting(),
         MockProvider(DialogService),

src/app/features/my-projects/models/my-projects-endpoint.type.ts

@@ -34,15 +34,16 @@ import { IS_MEDIUM } from '@osf/shared/utils';
 
 import { MY_PROJECTS_TABS } from './constants';
 import { MyProjectsTab } from './enums';
-import { MyProjectsItem, MyProjectsSearchFilters } from './models';
+
+import { MyResourcesItem, MyResourcesSearchFilters } from 'src/app/shared/models/my-resources';
 import {
-  ClearMyProjects,
+  ClearMyResources,
   GetMyBookmarks,
   GetMyPreprints,
   GetMyProjects,
   GetMyRegistrations,
-  MyProjectsSelectors,
-} from './store';
+  MyResourcesSelectors,
+} from 'src/app/shared/stores/my-resources';
 
 @Component({
   selector: 'osf-my-projects',
@@ -81,28 +82,28 @@ export class MyProjectsComponent implements OnInit {
   protected readonly currentPage = signal(1);
   protected readonly currentPageSize = signal(MY_PROJECTS_TABLE_PARAMS.rows);
   protected readonly selectedTab = signal(MyProjectsTab.Projects);
-  protected readonly activeProject = signal<MyProjectsItem | null>(null);
+  protected readonly activeProject = signal<MyResourcesItem | null>(null);
   protected readonly sortColumn = signal<string | undefined>(undefined);
   protected readonly sortOrder = signal<SortOrder>(SortOrder.Asc);
   protected readonly tableParams = signal<TableParameters>({
     ...MY_PROJECTS_TABLE_PARAMS,
     firstRowIndex: 0,
   });
 
-  protected readonly projects = select(MyProjectsSelectors.getProjects);
-  protected readonly registrations = select(MyProjectsSelectors.getRegistrations);
-  protected readonly preprints = select(MyProjectsSelectors.getPreprints);
-  protected readonly bookmarks = select(MyProjectsSelectors.getBookmarks);
-  protected readonly totalProjectsCount = select(MyProjectsSelectors.getTotalProjects);
-  protected readonly totalRegistrationsCount = select(MyProjectsSelectors.getTotalRegistrations);
-  protected readonly totalPreprintsCount = select(MyProjectsSelectors.getTotalPreprints);
-  protected readonly totalBookmarksCount = select(MyProjectsSelectors.getTotalBookmarks);
+  protected readonly projects = select(MyResourcesSelectors.getProjects);
+  protected readonly registrations = select(MyResourcesSelectors.getRegistrations);
+  protected readonly preprints = select(MyResourcesSelectors.getPreprints);
+  protected readonly bookmarks = select(MyResourcesSelectors.getBookmarks);
+  protected readonly totalProjectsCount = select(MyResourcesSelectors.getTotalProjects);
+  protected readonly totalRegistrationsCount = select(MyResourcesSelectors.getTotalRegistrations);
+  protected readonly totalPreprintsCount = select(MyResourcesSelectors.getTotalPreprints);
+  protected readonly totalBookmarksCount = select(MyResourcesSelectors.getTotalBookmarks);
 
   protected readonly bookmarksCollectionId = select(BookmarksSelectors.getBookmarksCollectionId);
 
   protected readonly actions = createDispatchMap({
     getBookmarksCollectionId: GetBookmarksCollectionId,
-    clearMyProjects: ClearMyProjects,
+    clearMyProjects: ClearMyResources,
     getMyProjects: GetMyProjects,
     getMyRegistrations: GetMyRegistrations,
     getMyPreprints: GetMyPreprints,
@@ -240,7 +241,7 @@ export class MyProjectsComponent implements OnInit {
     });
   }
 
-  createFilters(params: QueryParams): MyProjectsSearchFilters {
+  createFilters(params: QueryParams): MyResourcesSearchFilters {
     return {
       searchValue: params.search || '',
       searchFields: ['title', 'tags', 'description'],
@@ -341,12 +342,12 @@ export class MyProjectsComponent implements OnInit {
     });
   }
 
-  protected navigateToProject(project: MyProjectsItem): void {
+  protected navigateToProject(project: MyResourcesItem): void {
     this.activeProject.set(project);
     this.router.navigate(['/my-projects', project.id]);
   }
 
-  protected navigateToRegistry(registry: MyProjectsItem): void {
+  protected navigateToRegistry(registry: MyResourcesItem): void {
     this.activeProject.set(registry);
     this.router.navigate(['/registries', registry.id]);
   }