Fix/201 - Add to Collection

src/app/app.routes.ts

@@ -2,8 +2,7 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
-import { CollectionsState } from '@osf/features/collections/store/collections';
-import { ProjectsState } from '@shared/stores';
+import { BookmarksState, 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';
@@ -74,7 +73,7 @@ export const routes: Routes = [
         path: 'my-projects',
         loadComponent: () =>
           import('./features/my-projects/my-projects.component').then((mod) => mod.MyProjectsComponent),
-        providers: [provideStates([CollectionsState])],
+        providers: [provideStates([BookmarksState])],
       },
       {
         path: 'my-projects/:id',

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

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

src/app/features/collections/components/add-to-collection/add-to-collection.component.scss

@@ -1,4 +1,3 @@
-@use "assets/styles/variables" as var;
 @use "assets/styles/mixins" as mix;
 
 :host {

src/app/features/collections/components/add-to-collection/collection-metadata-step/collection-metadata-step.component.spec.ts

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

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.html

@@ -35,20 +35,20 @@ <h3>{{ 'collections.addToCollection.projectContributors' | translate }}</h3>
           class="w-full"
           [contributors]="projectContributors()"
           [isLoading]="isContributorsLoading()"
-          [showCuratorColumn]="true"
+          [showCuratorColumn]="false"
           (remove)="handleRemoveContributor($event)"
         ></osf-contributors-list>
 
         <div class="flex justify-content-end gap-3 mt-4 w-full">
           <p-button
             [label]="'registries.metadata.addContributors' | translate"
             severity="secondary"
+            [disabled]="isContributorsLoading()"
             (click)="handleAddContributor()"
           />
           <p-button
-            [loading]="isContributorsSubmitting()"
+            [disabled]="isContributorsLoading() || !projectContributors().length"
             (click)="handleSaveContributors()"
-            [disabled]="!projectContributors().length"
             [label]="'common.buttons.saveAndContinue' | translate"
           />
         </div>

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.spec.ts

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

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.ts

@@ -42,7 +42,6 @@ export class ProjectContributorsStepComponent {
 
   protected readonly projectContributors = select(ContributorsSelectors.getContributors);
   protected readonly isContributorsLoading = select(ContributorsSelectors.isContributorsLoading);
-  protected readonly isContributorsSubmitting = select(ContributorsSelectors.isContributorsSubmitting);
   protected readonly selectedProject = select(ProjectsSelectors.getSelectedProject);
 
   private initialContributors = signal<ContributorModel[]>([]);

src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.html

@@ -52,18 +52,10 @@ <h3>{{ 'collections.addToCollection.projectMetadata' | translate }}</h3>
     <ng-template class="m-0" #content>
       <p class="pt-3">{{ 'collections.addToCollection.projectMetadataMessage' | translate }}</p>
       <form [formGroup]="projectMetadataForm" class="flex flex-column gap-4 mt-4">
-        <div class="flex flex-column gap-1">
-          <label for="title">
-            {{ 'collections.addToCollection.form.title' | translate }}
-          </label>
-          <input pInputText id="title" type="text" [formControlName]="ProjectMetadataFormControls.Title" />
-          @let titleControl = projectMetadataForm.controls[ProjectMetadataFormControls.Title];
-          @if (titleControl.errors?.['required'] && (titleControl.touched || titleControl.dirty)) {
-            <p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
-              {{ 'collections.addToCollection.form.fieldRequired' | translate }}
-            </p-message>
-          }
-        </div>
+        <osf-text-input
+          label="collections.addToCollection.form.title"
+          [control]="projectMetadataForm.controls[ProjectMetadataFormControls.Title]"
+        />
 
         <div class="flex flex-column gap-1">
           <label for="description">

src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.spec.ts

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

src/app/features/collections/components/add-to-collection/project-metadata-step/project-metadata-step.component.ts

@@ -7,7 +7,6 @@ import { Card } from 'primeng/card';
 import { Chip } from 'primeng/chip';
 import { DatePicker } from 'primeng/datepicker';
 import { Divider } from 'primeng/divider';
-import { InputText } from 'primeng/inputtext';
 import { Message } from 'primeng/message';
 import { Select, SelectChangeEvent } from 'primeng/select';
 import { Step, StepItem, StepPanel } from 'primeng/stepper';
@@ -49,7 +48,6 @@ import { ProjectsSelectors } from '@shared/stores/projects/projects.selectors';
   imports: [
     Button,
     TranslatePipe,
-    InputText,
     ReactiveFormsModule,
     Textarea,
     FormsModule,

src/app/features/collections/components/add-to-collection/select-project-step/select-project-step.component.html

@@ -21,7 +21,7 @@ <h3>{{ 'collections.addToCollection.selectProject' | translate }}</h3>
 
   <p-step-panel [value]="targetStepValue()" class="p-0">
     <ng-template class="m-0" #content>
-      <div class="mt-4 w-full md:w-6">
+      <div class="mt-4 w-full lg:w-6">
         <p-select
           class="w-full"
           [loading]="isProjectsLoading()"

src/app/features/collections/components/add-to-collection/select-project-step/select-project-step.component.spec.ts

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

src/app/features/collections/components/add-to-collection/select-project-step/select-project-step.component.ts

@@ -25,6 +25,7 @@ import { UserSelectors } from '@core/store/user';
 import { AddToCollectionSteps } from '@osf/features/collections/enums';
 import { CollectionsSelectors, GetUserCollectionSubmissions } from '@osf/features/collections/store/collections';
 import { GetProjects, SetSelectedProject } from '@osf/shared/stores';
+import { CustomOption } from '@shared/models';
 import { Project } from '@shared/models/projects';
 import { ProjectsSelectors } from '@shared/stores/projects/projects.selectors';
 
@@ -55,7 +56,7 @@ export class SelectProjectStepComponent {
   stepChange = output<number>();
   projectSelected = output<void>();
 
-  protected projectsOptions = signal<{ label: string; value: Project }[]>([]);
+  protected projectsOptions = signal<CustomOption<Project>[]>([]);
 
   protected filterMessage = computed(() => {
     const isLoading = this.isProjectsLoading() || this.isSubmissionsLoading();

src/app/features/collections/components/collections-discover/collections-discover.component.scss

@@ -1,4 +1,3 @@
-@use "assets/styles/variables" as var;
 @use "assets/styles/mixins" as mix;
 
 :host {

src/app/features/collections/mappers/collections.mapper.ts

@@ -7,7 +7,10 @@ import {
   CollectionProviderResponseJsonApi,
   CollectionSubmission,
   CollectionSubmissionJsonApi,
+  CollectionSubmissionPayload,
 } from '@osf/features/collections/models';
+import { CollectionSubmissionPayloadJsonApi } from '@osf/features/collections/models/collection-submission-payload-json-api.model';
+import { convertToSnakeCase } from '@shared/utils';
 
 export class CollectionsMapper {
   static fromGetCollectionContributorsResponse(response: CollectionContributorJsonApi[]): CollectionContributor[] {
@@ -127,4 +130,33 @@ export class CollectionsMapper {
       contributors: [] as CollectionContributor[],
     }));
   }
+
+  static toCollectionSubmissionRequest(payload: CollectionSubmissionPayload): CollectionSubmissionPayloadJsonApi {
+    const collectionId = payload.collectionId;
+    const collectionsMetadata = convertToSnakeCase(payload.collectionMetadata);
+
+    return {
+      data: {
+        type: 'collection-submissions',
+        attributes: {
+          guid: payload.projectId,
+          ...collectionsMetadata,
+        },
+        relationships: {
+          collection: {
+            data: {
+              id: collectionId,
+              type: 'collections',
+            },
+          },
+          creator: {
+            data: {
+              type: 'users',
+              id: payload.userId,
+            },
+          },
+        },
+      },
+    };
+  }
 }

src/app/features/collections/services/add-to-collection.service.ts

@@ -3,11 +3,10 @@ import { map, Observable } from 'rxjs';
 import { inject, Injectable } from '@angular/core';
 
 import { JsonApiService } from '@core/services';
+import { CollectionsMapper } from '@osf/features/collections/mappers';
 import { CollectionSubmissionPayload } from '@osf/features/collections/models';
-import { CollectionSubmissionPayloadJsonApi } from '@osf/features/collections/models/collection-submission-payload-json-api.model';
 import { LicensesMapper } from '@shared/mappers';
 import { License, LicensesResponseJsonApi } from '@shared/models';
-import { convertToSnakeCase } from '@shared/utils';
 
 import { environment } from 'src/environments/environment';
 
@@ -29,32 +28,7 @@ export class AddToCollectionService {
 
   createCollectionSubmission(payload: CollectionSubmissionPayload): Observable<void> {
     const collectionId = payload.collectionId;
-
-    const collectionsMetadata = convertToSnakeCase(payload.collectionMetadata);
-
-    const metadata: CollectionSubmissionPayloadJsonApi = {
-      data: {
-        type: 'collection-submissions',
-        attributes: {
-          guid: payload.projectId,
-          ...collectionsMetadata,
-        },
-        relationships: {
-          collection: {
-            data: {
-              id: collectionId,
-              type: 'collections',
-            },
-          },
-          creator: {
-            data: {
-              type: 'users',
-              id: payload.userId,
-            },
-          },
-        },
-      },
-    };
+    const metadata = CollectionsMapper.toCollectionSubmissionRequest(payload);
 
     return this.jsonApiService.post(`${this.apiUrl}/collections/${collectionId}/collection_submissions/`, metadata);
   }