Feat/201 - Add to Collection

src/app/app.routes.ts

@@ -2,6 +2,9 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
+import { CollectionsState } from '@osf/features/collections/store/collections';
+import { ProjectsState } from '@shared/stores';
+
 import { MyProfileResourceFiltersOptionsState } from './features/my-profile/components/filters/store';
 import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
 import { MyProfileState } from './features/my-profile/store';
@@ -71,10 +74,12 @@ export const routes: Routes = [
         path: 'my-projects',
         loadComponent: () =>
           import('./features/my-projects/my-projects.component').then((mod) => mod.MyProjectsComponent),
+        providers: [provideStates([CollectionsState])],
       },
       {
         path: 'my-projects/:id',
         loadChildren: () => import('./features/project/project.routes').then((mod) => mod.projectRoutes),
+        providers: [provideStates([ProjectsState])],
       },
       {
         path: 'settings',

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

@@ -1,6 +1,5 @@
 import { AuthState } from '@core/store/auth';
 import { UserState } from '@core/store/user';
-import { CollectionsState } from '@osf/features/collections/store';
 import { MeetingsState } from '@osf/features/meetings/store';
 import { MyProjectsState } from '@osf/features/my-projects/store';
 import { ProjectMetadataState } from '@osf/features/project/metadata/store';
@@ -26,7 +25,6 @@ export const STATES = [
   AccountSettingsState,
   NotificationSubscriptionState,
   ProjectOverviewState,
-  CollectionsState,
   WikiState,
   MeetingsState,
   RegistrationsState,

src/app/features/collections/collections.component.html

@@ -1,33 +1 @@
-@if (!isProviderLoading()) {
-  <section class="collections flex flex-column flex-1 pt-0 xl:pt-5">
-    <div
-      class="collections-sub-header flex justify-content-between flex-column gap-4 mb-4 sm:mb-6 sm:gap-0 sm:flex-row"
-    >
-      <div class="flex gap-3">
-        <i class="collections-icon text-white osf-icon-collections"></i>
-        <h1 class="flex align-items-center text-white">{{ collectionProvider()?.name }}</h1>
-      </div>
-
-      <p-button class="collections-heading-btn" [label]="'collections.buttons.addToCollection' | translate" />
-    </div>
-
-    <div class="search-input-container">
-      <osf-search-input
-        [control]="searchControl"
-        [showHelpIcon]="true"
-        [placeholder]="'collections.searchInput.placeholder' | translate"
-        (helpClicked)="openHelpDialog()"
-        (triggerSearch)="onSearchTriggered($event)"
-      />
-      @if (collectionProvider()?.description) {
-        <div class="mt-6 text-white" [innerHTML]="collectionProvider()?.description"></div>
-      }
-    </div>
-
-    <div class="content-container flex-1">
-      <osf-collections-main-content />
-    </div>
-  </section>
-} @else {
-  <osf-loading-spinner />
-}
+<router-outlet />

src/app/features/collections/collections.component.scss

@@ -1,38 +0,0 @@
-@use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
-
-:host {
-  --collection-bg-color: #013b5c;
-  @include mix.flex-column;
-  flex: 1;
-}
-
-.collections {
-  background: var(--collection-bg-color);
-  border-top: none;
-
-  .collections-sub-header {
-    margin: mix.rem(48px) mix.rem(28px);
-
-    .collections-icon {
-      font-size: mix.rem(42px);
-    }
-  }
-
-  .search-input-container {
-    margin: 0 mix.rem(28px) mix.rem(48px) mix.rem(28px);
-    position: relative;
-
-    img {
-      position: absolute;
-      right: mix.rem(4px);
-      top: mix.rem(4px);
-      z-index: 1;
-    }
-  }
-
-  .content-container {
-    background: var.$white;
-    padding: mix.rem(28px);
-  }
-}

src/app/features/collections/collections.component.ts

@@ -1,174 +1,11 @@
-import { createDispatchMap, select } from '@ngxs/store';
-
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-
-import { Button } from 'primeng/button';
-import { DialogService } from 'primeng/dynamicdialog';
-
-import { debounceTime } from 'rxjs';
-
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, signal } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormControl } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { CollectionsHelpDialogComponent, CollectionsMainContentComponent } from '@osf/features/collections/components';
-import { CollectionsFilters } from '@osf/features/collections/models';
-import { CollectionsQuerySyncService } from '@osf/features/collections/services';
-import {
-  ClearCollections,
-  ClearCollectionSubmissions,
-  CollectionsSelectors,
-  GetCollectionDetails,
-  GetCollectionProvider,
-  GetCollectionSubmissions,
-  SetPageNumber,
-  SetSearchValue,
-} from '@osf/features/collections/store';
-import { LoadingSpinnerComponent, SearchInputComponent } from '@shared/components';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'osf-collections',
-  imports: [SearchInputComponent, TranslatePipe, Button, CollectionsMainContentComponent, LoadingSpinnerComponent],
+  imports: [RouterOutlet],
   templateUrl: './collections.component.html',
   styleUrl: './collections.component.scss',
-  providers: [DialogService, CollectionsQuerySyncService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CollectionsComponent {
-  private router = inject(Router);
-  private route = inject(ActivatedRoute);
-  private dialogService = inject(DialogService);
-  private translateService = inject(TranslateService);
-  private querySyncService = inject(CollectionsQuerySyncService);
-  private destroyRef = inject(DestroyRef);
-
-  protected searchControl = new FormControl('');
-  protected providerId = signal<string>('');
-
-  protected collectionProvider = select(CollectionsSelectors.getCollectionProvider);
-  protected collectionDetails = select(CollectionsSelectors.getCollectionDetails);
-  protected selectedFilters = select(CollectionsSelectors.getAllSelectedFilters);
-  protected sortBy = select(CollectionsSelectors.getSortBy);
-  protected searchText = select(CollectionsSelectors.getSearchText);
-  protected pageNumber = select(CollectionsSelectors.getPageNumber);
-  protected isProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
-  protected primaryCollectionId = computed(() => this.collectionProvider()?.primaryCollection?.id);
-
-  protected actions = createDispatchMap({
-    getCollectionProvider: GetCollectionProvider,
-    getCollectionDetails: GetCollectionDetails,
-    setSearchValue: SetSearchValue,
-    getCollectionSubmissions: GetCollectionSubmissions,
-    setPageNumber: SetPageNumber,
-    clearCollections: ClearCollections,
-    clearCollectionsSubmissions: ClearCollectionSubmissions,
-  });
-
-  constructor() {
-    this.initializeProvider();
-    this.setupEffects();
-    this.setupSearchBinding();
-  }
-
-  protected openHelpDialog(): void {
-    this.dialogService.open(CollectionsHelpDialogComponent, {
-      focusOnShow: false,
-      header: this.translateService.instant('collections.helpDialog.header'),
-      closeOnEscape: true,
-      modal: true,
-      closable: true,
-    });
-  }
-
-  protected onSearchTriggered(searchValue: string): void {
-    this.actions.setSearchValue(searchValue);
-    this.actions.setPageNumber('1');
-  }
-
-  private initializeProvider(): void {
-    const id = this.route.snapshot.paramMap.get('id');
-    if (!id) {
-      this.router.navigate(['/not-found']);
-      return;
-    }
-
-    this.providerId.set(id);
-    this.actions.getCollectionProvider(id);
-  }
-
-  private setupEffects(): void {
-    this.querySyncService.initializeFromUrl();
-
-    effect(() => {
-      const collectionId = this.primaryCollectionId();
-      if (collectionId) {
-        this.actions.getCollectionDetails(collectionId);
-      }
-    });
-
-    effect(() => {
-      const searchText = this.searchText();
-      const sortBy = this.sortBy();
-      const selectedFilters = this.selectedFilters();
-      const pageNumber = this.pageNumber();
-
-      if (searchText !== undefined && sortBy !== undefined && selectedFilters && pageNumber) {
-        this.querySyncService.syncStoreToUrl(searchText, sortBy, selectedFilters, pageNumber);
-      }
-    });
-
-    effect(() => {
-      const searchText = this.searchText();
-      const sortBy = this.sortBy();
-      const selectedFilters = this.selectedFilters();
-      const pageNumber = this.pageNumber();
-      const providerId = this.providerId();
-      const collectionDetails = this.collectionDetails();
-
-      if (searchText !== undefined && selectedFilters && pageNumber && providerId && collectionDetails) {
-        const activeFilters = this.getActiveFilters(selectedFilters);
-        this.actions.clearCollectionsSubmissions();
-        this.actions.getCollectionSubmissions(providerId, searchText, activeFilters, pageNumber, sortBy);
-      }
-    });
-
-    effect(() => {
-      this.destroyRef.onDestroy(() => {
-        this.actions.clearCollections();
-      });
-    });
-  }
-
-  private getActiveFilters(filters: CollectionsFilters): Record<string, string[]> {
-    return Object.entries(filters)
-      .filter(([key, value]) => value.length)
-      .reduce(
-        (acc, [key, value]) => {
-          acc[key] = value;
-          return acc;
-        },
-        {} as Record<string, string[]>
-      );
-  }
-
-  private setupSearchBinding(): void {
-    effect(() => {
-      const storeSearchText = this.searchText();
-      const currentControlValue = this.searchControl.value;
-
-      if (storeSearchText !== currentControlValue) {
-        this.searchControl.setValue(storeSearchText, { emitEvent: false });
-      }
-    });
-
-    this.searchControl.valueChanges
-      .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
-      .subscribe((searchValue) => {
-        const trimmedValue = searchValue?.trim() || '';
-        if (trimmedValue !== this.searchText()) {
-          this.actions.setSearchValue(trimmedValue);
-        }
-      });
-  }
-}
+export class CollectionsComponent {}

src/app/features/collections/collections.routes.ts

@@ -2,6 +2,10 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
+import { AddToCollectionState } from '@osf/features/collections/store/add-to-collection';
+import { CollectionsState } from '@osf/features/collections/store/collections';
+import { ContributorsState, ProjectsState } from '@shared/stores';
+
 import { ModeratorsState } from '../moderation/store/moderation';
 
 export const collectionsRoutes: Routes = [
@@ -12,14 +16,30 @@ export const collectionsRoutes: Routes = [
         path: '',
         pathMatch: 'full',
         loadComponent: () =>
-          import('@core/components/page-not-found/page-not-found.component').then((mod) => mod.PageNotFoundComponent),
+          import('@core/components/page-not-found/page-not-found.component').then((m) => m.PageNotFoundComponent),
         data: { skipBreadcrumbs: true },
       },
       {
         path: ':id',
+        redirectTo: ':id/discover',
+      },
+      {
+        path: ':id/discover',
         pathMatch: 'full',
         loadComponent: () =>
-          import('@osf/features/collections/collections.component').then((mod) => mod.CollectionsComponent),
+          import('@osf/features/collections/components/collections-discover/collections-discover.component').then(
+            (mod) => mod.CollectionsDiscoverComponent
+          ),
+        providers: [provideStates([CollectionsState])],
+      },
+      {
+        path: ':id/add',
+        pathMatch: 'full',
+        loadComponent: () =>
+          import('@osf/features/collections/components/add-to-collection/add-to-collection.component').then(
+            (mod) => mod.AddToCollectionComponent
+          ),
+        providers: [provideStates([ProjectsState, CollectionsState, AddToCollectionState, ContributorsState])],
       },
       {
         path: ':id/moderation',

src/app/features/collections/components/add-to-collection/add-to-collection-confirmation-dialog/add-to-collection-confirmation-dialog.component.html

@@ -0,0 +1,21 @@
+<div class="dialog-container">
+  <p>
+    {{ 'collections.addToCollection.confirmationDialogMessage' | translate }}
+  </p>
+
+  <div class="flex pt-5 gap-3 justify-content-between">
+    <p-button
+      [label]="'common.buttons.cancel' | translate"
+      severity="info"
+      (click)="dialogRef.close(false)"
+      [disabled]="isSubmitting()"
+      class="btn-full-width"
+    />
+    <p-button
+      [label]="'common.buttons.addToCollection' | translate"
+      (click)="handleAddToCollectionConfirm()"
+      [loading]="isSubmitting()"
+      class="btn-full-width"
+    />
+  </div>
+</div>