Fix/201 - Add to Collection (#176)

* feat(add-to-collection-api): fixed comments

* feat(add-to-collection-api): added shared bookmarks service

* feat(add-to-collection-api): shorten import

Author: rnastyuk

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,