chore(search): search page ui-ux

src/app/app.config.ts

@@ -10,13 +10,14 @@ import { provideHttpClient } from '@angular/common/http';
 import { ConfirmationService } from 'primeng/api';
 import { AuthState } from '@core/store/auth';
 import { HomeState } from '@core/store/home';
+import { ResourceFiltersState } from '@shared/components/resources/resource-filters/store/resource-filters.state';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideStore(
-      [AuthState, HomeState],
+      [AuthState, HomeState, ResourceFiltersState],
       withNgxsReduxDevtoolsPlugin({ disabled: false }),
     ),
     providePrimeNG({

src/app/app.routes.ts

@@ -1,4 +1,6 @@
 import { Routes } from '@angular/router';
+import { provideStates } from '@ngxs/store';
+import { ResourceFiltersState } from '@shared/components/resources/resource-filters/store/resource-filters.state';
 
 export const routes: Routes = [
   {
@@ -71,6 +73,14 @@ export const routes: Routes = [
             (mod) => mod.settingsRoutes,
           ),
       },
+      {
+        path: 'search',
+        loadComponent: () =>
+          import('./features/search/search.component').then(
+            (mod) => mod.SearchComponent,
+          ),
+        providers: [provideStates([ResourceFiltersState])],
+      },
     ],
   },
 ];

src/app/features/search/models/link-item.entity.ts

@@ -0,0 +1,4 @@
+export interface LinkItem {
+  id: string;
+  name: string;
+}

src/app/features/search/models/resource-tab.enum.ts

@@ -0,0 +1,8 @@
+export enum ResourceTab {
+  All,
+  Projects,
+  Registrations,
+  Preprints,
+  Files,
+  Users,
+}

src/app/features/search/models/resource-type.enum.ts

@@ -0,0 +1,9 @@
+export enum ResourceType {
+  Null,
+  File,
+  Project,
+  Registration,
+  Preprint,
+  ProjectComponent,
+  User,
+}

src/app/features/search/models/resource.entity.ts

@@ -0,0 +1,24 @@
+import { ResourceType } from '@osf/features/search/models/resource-type.enum';
+import { LinkItem } from '@osf/features/search/models/link-item.entity';
+
+export interface Resource {
+  id: string;
+  resourceType: ResourceType;
+  dateCreated?: Date;
+  dateModified?: Date;
+  creators?: LinkItem[];
+  fileName?: string;
+  title?: string;
+  description?: string;
+  from?: LinkItem;
+  license?: string;
+  publisher?: LinkItem;
+  registrationTemplate?: string;
+  doi?: string;
+  provider?: LinkItem;
+  conflictOfInterestResponse?: string;
+  publicProjects?: number;
+  publicRegistrations?: number;
+  publicPreprints?: number;
+  orcid?: string;
+}

src/app/features/search/search.component.html

@@ -0,0 +1,97 @@
+<div class="search-container">
+  <img
+    ngSrc="assets/icons/system/question-mark.svg"
+    alt="better-research"
+    height="36"
+    width="36"
+  />
+  <osf-search-input
+    [searchValue]="searchValue()"
+    (searchValueChange)="searchValue.set($event)"
+    placeholder="Enter search term(s) here"
+  />
+</div>
+
+<div class="flex-column flex flex-1 w-full mt-6">
+  <p-tabs
+    [value]="selectedTab"
+    (valueChange)="onTabChange(+$event)"
+    class="flex-1"
+  >
+    @if (!isMobile()) {
+      <p-tablist class="pr-5 pl-5">
+        <p-tab [value]="ResourceTab.All">All</p-tab>
+        <p-tab [value]="ResourceTab.Projects">Projects</p-tab>
+        <p-tab [value]="ResourceTab.Registrations">Registrations</p-tab>
+        <p-tab [value]="ResourceTab.Preprints">Preprints</p-tab>
+        <p-tab [value]="ResourceTab.Files">Files</p-tab>
+        <p-tab [value]="ResourceTab.Users">Users</p-tab>
+      </p-tablist>
+    }
+
+    <p-tabpanels class="p-3 sm:p-5 flex-1">
+      <!--All-->
+      <p-tabpanel
+        [value]="ResourceTab.All"
+        class="flex flex-column gap-4 flex-1"
+      >
+        <osf-resources
+          [selectedTab]="ResourceTab.All"
+          [searchedResources]="searchedResources()"
+        >
+        </osf-resources>
+      </p-tabpanel>
+
+      <!--Projects-->
+      <p-tabpanel [value]="ResourceTab.Projects" class="flex flex-column gap-5">
+        <osf-resources
+          [selectedTab]="ResourceTab.Projects"
+          [searchedResources]="searchedResources()"
+        >
+        </osf-resources>
+      </p-tabpanel>
+
+      <!--Registrations-->
+      <p-tabpanel
+        [value]="ResourceTab.Registrations"
+        class="flex flex-column gap-5"
+      >
+        <osf-resources
+          [selectedTab]="ResourceTab.Registrations"
+          [searchedResources]="searchedResources()"
+        >
+        </osf-resources>
+      </p-tabpanel>
+
+      <!--Preprints-->
+      <p-tabpanel
+        [value]="ResourceTab.Preprints"
+        class="flex flex-column gap-5"
+      >
+        <osf-resources
+          [selectedTab]="ResourceTab.Preprints"
+          [searchedResources]="searchedResources()"
+        >
+        </osf-resources>
+      </p-tabpanel>
+
+      <!--Files-->
+      <p-tabpanel [value]="ResourceTab.Files" class="flex flex-column gap-5">
+        <osf-resources
+          [selectedTab]="ResourceTab.Files"
+          [searchedResources]="searchedResources()"
+        >
+        </osf-resources>
+      </p-tabpanel>
+
+      <!--Users-->
+      <p-tabpanel [value]="ResourceTab.Users" class="flex flex-column gap-5">
+        <osf-resources
+          [selectedTab]="ResourceTab.Users"
+          [searchedResources]="searchedResources()"
+        >
+        </osf-resources>
+      </p-tabpanel>
+    </p-tabpanels>
+  </p-tabs>
+</div>

src/app/features/search/search.component.scss

@@ -0,0 +1,15 @@
+@use "assets/styles/variables" as var;
+
+:host {
+  .search-container {
+    margin: 6.2rem 1.7rem 0.4rem 1.7rem;
+    position: relative;
+
+    img {
+      position: absolute;
+      right: 0.3rem;
+      top: 0.3rem;
+      z-index: 1;
+    }
+  }
+}

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

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

src/app/features/search/search.component.ts

@@ -0,0 +1,88 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { SearchInputComponent } from '@shared/components/search-input/search-input.component';
+import { DropdownModule } from 'primeng/dropdown';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
+import { NgOptimizedImage } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { AccordionModule } from 'primeng/accordion';
+import { TableModule } from 'primeng/table';
+import { DataViewModule } from 'primeng/dataview';
+import { ResourcesComponent } from '@shared/components/resources/resources.component';
+import { ResourceTab } from '@osf/features/search/models/resource-tab.enum';
+import { Resource } from '@osf/features/search/models/resource.entity';
+import { resources } from '@osf/features/search/data';
+
+@Component({
+  selector: 'osf-search',
+  imports: [
+    SearchInputComponent,
+    DropdownModule,
+    ReactiveFormsModule,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+    NgOptimizedImage,
+    AutoCompleteModule,
+    FormsModule,
+    AccordionModule,
+    TableModule,
+    DataViewModule,
+    ResourcesComponent,
+  ],
+  templateUrl: './search.component.html',
+  styleUrl: './search.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchComponent {
+  protected searchValue = signal('');
+  protected selectedTab = 0;
+  protected readonly isMobile = toSignal(inject(IS_XSMALL));
+
+  protected readonly resources = signal<Resource[]>(resources);
+  protected readonly searchedResources = computed(() => {
+    const search = this.searchValue().toLowerCase();
+    return this.resources().filter(
+      (resource: Resource) =>
+        resource.title?.toLowerCase().includes(search) ||
+        resource.fileName?.toLowerCase().includes(search) ||
+        resource.description?.toLowerCase().includes(search) ||
+        resource.creators
+          ?.map((p) => p.name.toLowerCase())
+          .some((name) => name.includes(search)) ||
+        resource.dateCreated
+          ?.toLocaleDateString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          })
+          .toLowerCase()
+          .includes(search) ||
+        resource.dateModified
+          ?.toLocaleDateString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+          })
+          .toLowerCase()
+          .includes(search) ||
+        resource.from?.name.toLowerCase(),
+    );
+  });
+
+  onTabChange(index: number): void {
+    this.selectedTab = index;
+  }
+
+  protected readonly ResourceTab = ResourceTab;
+}