[ANG-1074] fix(my-projects): added new filter for projects (#666)

* fix(my-projects): added new filter for projects

* fix(my-projects): updated styles

Author: nsemets

src/app/features/home/pages/dashboard/dashboard.component.html

@@ -25,14 +25,18 @@
             {{ 'home.loggedIn.dashboard.quickSearch.osf' | translate }}
           </p>
 
+          <osf-search-input
+            [placeholder]="'home.loggedIn.dashboard.quickSearch.searchPlaceholder' | translate"
+            [control]="searchControl"
+          />
+
           <osf-my-projects-table
+            class="block mt-4"
             [items]="filteredProjects()"
             [tableParams]="tableParams()"
-            [searchControl]="searchControl"
             [sortColumn]="sortColumn()"
             [sortOrder]="sortOrder()"
             [isLoading]="areProjectsLoading()"
-            [searchPlaceholder]="'home.loggedIn.dashboard.quickSearch.searchPlaceholder' | translate"
             (pageChange)="onPageChange($event)"
             (sort)="onSort($event)"
             (itemClick)="navigateToProject($event)"

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

@@ -1,20 +1,26 @@
 import { Store } from '@ngxs/store';
 
-import { MockComponents } from 'ng-mocks';
+import { MockComponents, MockProviders } from 'ng-mocks';
 
 import { signal, WritableSignal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { LoadingSpinnerComponent, MyProjectsTableComponent, SubHeaderComponent } from '@shared/components';
+import { CustomConfirmationService, CustomDialogService, ProjectRedirectDialogService } from '@osf/shared/services';
+import {
+  LoadingSpinnerComponent,
+  MyProjectsTableComponent,
+  SearchInputComponent,
+  SubHeaderComponent,
+} from '@shared/components';
 import { MyResourcesSelectors } from '@shared/stores';
 
 import { DashboardComponent } from './dashboard.component';
 
 import { getProjectsMockForComponent } from '@testing/data/dashboard/dasboard.data';
 import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 
-describe.skip('DashboardComponent', () => {
+describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
 
@@ -31,7 +37,7 @@ describe.skip('DashboardComponent', () => {
       imports: [
         DashboardComponent,
         OSFTestingStoreModule,
-        ...MockComponents(SubHeaderComponent, MyProjectsTableComponent, LoadingSpinnerComponent),
+        ...MockComponents(SubHeaderComponent, MyProjectsTableComponent, LoadingSpinnerComponent, SearchInputComponent),
       ],
       providers: [
         {
@@ -46,14 +52,15 @@ describe.skip('DashboardComponent', () => {
             dispatch: jest.fn(),
           },
         },
+        MockProviders(CustomDialogService, CustomConfirmationService, ProjectRedirectDialogService),
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;
   });
 
-  it('should show loading s pinner when projects are loading', () => {
+  it('should show loading spinner when projects are loading', () => {
     areProjectsLoadingSignal.set(true);
     fixture.detectChanges();
 

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

@@ -19,6 +19,7 @@ import {
   IconComponent,
   LoadingSpinnerComponent,
   MyProjectsTableComponent,
+  SearchInputComponent,
   SubHeaderComponent,
 } from '@osf/shared/components';
 import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
@@ -34,6 +35,7 @@ import { ClearMyResources, GetMyProjects, MyResourcesSelectors } from '@osf/shar
     Button,
     SubHeaderComponent,
     MyProjectsTableComponent,
+    SearchInputComponent,
     IconComponent,
     TranslatePipe,
     LoadingSpinnerComponent,
@@ -68,8 +70,6 @@ export class DashboardComponent implements OnInit {
 
   readonly existsProjects = computed(() => this.projects().length || !!this.searchControl.value?.length);
 
-  emailAddress = '';
-
   constructor() {
     this.setupSearchSubscription();
     this.setupTotalRecordsEffect();

src/app/features/my-projects/constants/project-filter-options.const.ts

@@ -0,0 +1,17 @@
+import { ResourceSearchMode } from '@osf/shared/enums';
+import { TabOption } from '@osf/shared/models';
+
+export const PROJECT_FILTER_OPTIONS: TabOption[] = [
+  {
+    value: ResourceSearchMode.User,
+    label: 'myProjects.tabOptions.all',
+  },
+  {
+    value: ResourceSearchMode.Root,
+    label: 'myProjects.tabOptions.root',
+  },
+  {
+    value: ResourceSearchMode.Component,
+    label: 'myProjects.tabOptions.component',
+  },
+];

src/app/features/my-projects/my-projects.component.html

@@ -28,10 +28,25 @@
         }
 
         <p-tabpanel [value]="tabOption.Projects" class="flex flex-column gap-4 flex-1">
+          <div class="flex flex-column gap-4 md:flex-row md:align-items-center">
+            <osf-search-input
+              class="flex-1"
+              [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+              [control]="searchControl"
+            />
+
+            <osf-select
+              class="flex-1"
+              [options]="projectFilterOption"
+              [(selectedValue)]="selectedProjectFilterOption"
+              [fullWidth]="true"
+              (changeValue)="onProjectFilterChange()"
+            ></osf-select>
+          </div>
+
           <osf-my-projects-table
             [items]="projects()"
             [tableParams]="tableParams()"
-            [searchControl]="searchControl"
             [sortColumn]="sortColumn()"
             [sortOrder]="sortOrder()"
             [isLoading]="isLoading()"
@@ -42,10 +57,14 @@
         </p-tabpanel>
 
         <p-tabpanel [value]="tabOption.Registrations" class="flex flex-column gap-4 flex-1">
+          <osf-search-input
+            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+            [control]="searchControl"
+          />
+
           <osf-my-projects-table
             [items]="registrations()"
             [tableParams]="tableParams()"
-            [searchControl]="searchControl"
             [sortColumn]="sortColumn()"
             [sortOrder]="sortOrder()"
             [isLoading]="isLoading()"
@@ -56,10 +75,14 @@
         </p-tabpanel>
 
         <p-tabpanel [value]="tabOption.Preprints" class="flex flex-column gap-4 flex-1">
+          <osf-search-input
+            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+            [control]="searchControl"
+          />
+
           <osf-my-projects-table
             [items]="preprints()"
             [tableParams]="tableParams()"
-            [searchControl]="searchControl"
             [sortColumn]="sortColumn()"
             [sortOrder]="sortOrder()"
             [isLoading]="isLoading()"
@@ -70,10 +93,14 @@
         </p-tabpanel>
 
         <p-tabpanel [value]="tabOption.Bookmarks" class="flex flex-column gap-4 flex-1">
+          <osf-search-input
+            [placeholder]="'myProjects.table.searchPlaceholder' | translate"
+            [control]="searchControl"
+          />
+
           <osf-my-projects-table
             [items]="bookmarks()"
             [tableParams]="tableParams()"
-            [searchControl]="searchControl"
             [sortColumn]="sortColumn()"
             [sortOrder]="sortOrder()"
             [isLoading]="isLoading()"