Feat - Submit Preprint (Supplements step, Subjects section)

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

@@ -13,6 +13,7 @@ import { NotificationSubscriptionState } from '@osf/features/settings/notificati
 import { ProfileSettingsState } from '@osf/features/settings/profile-settings/store/profile-settings.state';
 import { AddonsState, InstitutionsState } from '@shared/stores';
 import { LicensesState } from '@shared/stores/licenses';
+import { RegionsState } from '@shared/stores/regions';
 
 export const STATES = [
   AuthState,
@@ -31,4 +32,5 @@ export const STATES = [
   RegistrationsState,
   ProjectMetadataState,
   LicensesState,
+  RegionsState,
 ];

src/app/features/my-projects/components/create-project-dialog/create-project-dialog.component.html

@@ -0,0 +1,17 @@
+<osf-add-project-form [templates]="templates()" [projectForm]="projectForm" />
+<div class="flex justify-content-end gap-2 mt-4">
+  <p-button
+    class="w-12rem btn-full-width"
+    [label]="'myProjects.createProject.actions.cancel' | translate"
+    severity="info"
+    (click)="dialogRef.close()"
+    [disabled]="isProjectSubmitting()"
+  />
+  <p-button
+    class="w-12rem btn-full-width"
+    [label]="'myProjects.createProject.actions.create' | translate"
+    [disabled]="!projectForm.valid || isProjectSubmitting()"
+    [loading]="isProjectSubmitting()"
+    (click)="submitForm()"
+  />
+</div>

src/app/features/my-projects/components/create-project-dialog/create-project-dialog.component.spec.ts

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

src/app/features/my-projects/components/create-project-dialog/create-project-dialog.component.ts

@@ -0,0 +1,93 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { MY_PROJECTS_TABLE_PARAMS } from '@core/constants';
+import { CreateProject, GetMyProjects, MyProjectsSelectors } from '@osf/features/my-projects/store';
+import { AddProjectFormComponent } from '@shared/components';
+import { ProjectFormControls } from '@shared/enums';
+import { IdName, ProjectForm } from '@shared/models';
+import { CustomValidators } from '@shared/utils';
+
+@Component({
+  selector: 'osf-create-project-dialog',
+  imports: [AddProjectFormComponent, Button, TranslatePipe],
+  templateUrl: './create-project-dialog.component.html',
+  styleUrl: './create-project-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateProjectDialogComponent implements OnInit {
+  protected readonly dialogRef = inject(DynamicDialogRef);
+
+  private actions = createDispatchMap({
+    getMyProjects: GetMyProjects,
+    createProject: CreateProject,
+  });
+
+  private projects = select(MyProjectsSelectors.getProjects);
+
+  readonly templates = computed(() => {
+    return this.projects().map(
+      (project) =>
+        ({
+          id: project.id,
+          name: project.title,
+        }) as IdName
+    );
+  });
+  readonly isProjectSubmitting = select(MyProjectsSelectors.isProjectSubmitting);
+
+  readonly projectForm = new FormGroup<ProjectForm>({
+    [ProjectFormControls.Title]: new FormControl('', {
+      nonNullable: true,
+      validators: [CustomValidators.requiredTrimmed()],
+    }),
+    [ProjectFormControls.StorageLocation]: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required],
+    }),
+    [ProjectFormControls.Affiliations]: new FormControl<string[]>([], {
+      nonNullable: true,
+    }),
+    [ProjectFormControls.Description]: new FormControl('', {
+      nonNullable: true,
+    }),
+    [ProjectFormControls.Template]: new FormControl('', {
+      nonNullable: true,
+    }),
+  });
+
+  ngOnInit(): void {
+    this.actions.getMyProjects(1, MY_PROJECTS_TABLE_PARAMS.rows, {});
+  }
+
+  submitForm(): void {
+    if (this.projectForm.invalid) {
+      this.projectForm.markAllAsTouched();
+      return;
+    }
+
+    const formValue = this.projectForm.getRawValue();
+
+    this.actions
+      .createProject(
+        formValue.title,
+        formValue.description,
+        formValue.template,
+        formValue.storageLocation,
+        formValue.affiliations
+      )
+      .subscribe({
+        next: () => {
+          this.actions.getMyProjects(1, MY_PROJECTS_TABLE_PARAMS.rows, {});
+          this.dialogRef.close();
+        },
+      });
+  }
+}

src/app/features/my-projects/components/index.ts

@@ -0,0 +1 @@
+export { CreateProjectDialogComponent } from './create-project-dialog/create-project-dialog.component';

src/app/features/my-projects/models/index.ts

@@ -1,4 +1,3 @@
-export * from './create-project.model';
 export * from './my-projects.models';
 export * from './my-projects-endpoint.type';
 export * from './my-projects-search-filters.models';

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

@@ -26,12 +26,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { MY_PROJECTS_TABLE_PARAMS } from '@osf/core/constants';
 import { parseQueryFilterParams } from '@osf/core/helpers';
-import { AddProjectFormComponent, MyProjectsTableComponent, SubHeaderComponent } from '@osf/shared/components';
+import { CreateProjectDialogComponent } from '@osf/features/my-projects/components';
+import { MyProjectsTableComponent, SubHeaderComponent } from '@osf/shared/components';
 import { ResourceType, SortOrder } from '@osf/shared/enums';
 import { QueryParams, TableParameters, TabOption } from '@osf/shared/models';
-import { IS_MEDIUM, IS_WEB, IS_XSMALL } from '@osf/shared/utils';
+import { IS_XSMALL } from '@osf/shared/utils';
 
-import { FetchUserInstitutions } from '../../shared/stores/institutions';
 import { CollectionsSelectors, GetBookmarksCollectionId } from '../collections/store';
 
 import { MyProjectsItem, MyProjectsSearchFilters } from './models';
@@ -73,8 +73,6 @@ export class MyProjectsComponent implements OnInit {
 
   protected readonly defaultTabValue = 0;
   protected readonly isLoading = signal(false);
-  protected readonly isDesktop = toSignal(inject(IS_WEB));
-  protected readonly isTablet = toSignal(inject(IS_MEDIUM));
   protected readonly isMobile = toSignal(inject(IS_XSMALL));
   protected readonly tabOptions: TabOption[] = [
     {
@@ -128,7 +126,6 @@ export class MyProjectsComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.#store.dispatch(new FetchUserInstitutions());
     this.#store.dispatch(new GetBookmarksCollectionId());
   }
 
@@ -339,7 +336,7 @@ export class MyProjectsComponent implements OnInit {
   protected createProject(): void {
     const dialogWidth = this.isMobile() ? '95vw' : '850px';
 
-    this.#dialogService.open(AddProjectFormComponent, {
+    this.#dialogService.open(CreateProjectDialogComponent, {
       width: dialogWidth,
       focusOnShow: false,
       header: this.#translateService.instant('myProjects.header.createProject'),

src/app/features/my-projects/services/my-projects.service.ts

@@ -7,11 +7,10 @@ import { JsonApiResponse } from '@core/models';
 import { JsonApiService } from '@osf/core/services';
 import { SparseCollectionsResponseJsonApi } from '@osf/features/collections/models';
 import { ResourceType, SortOrder } from '@osf/shared/enums';
-import { NodeResponseModel, UpdateNodeRequestModel } from '@shared/models';
+import { CreateProjectPayloadJsoApi, NodeResponseModel, UpdateNodeRequestModel } from '@shared/models';
 
 import { MyProjectsMapper } from '../mappers';
 import {
-  CreateProjectPayloadJsoApi,
   EndpointType,
   MyProjectsItem,
   MyProjectsItemGetResponseJsonApi,

src/app/features/my-projects/store/my-projects.selectors.ts

@@ -11,6 +11,11 @@ export class MyProjectsSelectors {
     return state.projects.data;
   }
 
+  @Selector([MyProjectsState])
+  static isProjectSubmitting(state: MyProjectsStateModel): boolean {
+    return state.projects.isSubmitting || false;
+  }
+
   @Selector([MyProjectsState])
   static getRegistrations(state: MyProjectsStateModel): MyProjectsItem[] {
     return state.registrations.data;

src/app/features/my-projects/store/my-projects.state.ts

@@ -234,7 +234,7 @@ export class MyProjectsState {
     ctx.patchState({
       projects: {
         ...state.projects,
-        isLoading: true,
+        isSubmitting: true,
       },
     });
 
@@ -246,6 +246,7 @@ export class MyProjectsState {
             projects: {
               data: [project, ...state.projects.data],
               isLoading: false,
+              isSubmitting: false,
               error: null,
             },
             totalProjects: state.totalProjects + 1,

src/app/features/preprints/components/index.ts

@@ -8,6 +8,8 @@ export { PreprintProviderFooterComponent } from './preprint-provider-footer/prep
 export { PreprintProviderHeroComponent } from './preprint-provider-hero/preprint-provider-hero.component';
 export { PreprintServicesComponent } from './preprint-services/preprint-services.component';
 export { PreprintsHelpDialogComponent } from './preprints-help-dialog/preprints-help-dialog.component';
+export { AuthorAssertionsStepComponent } from './stepper/author-assertion-step/author-assertions-step.component';
+export { SupplementsStepComponent } from './stepper/supplements-step/supplements-step.component';
 export { PreprintsFilterChipsComponent } from '@osf/features/preprints/components/filters/preprints-filter-chips/preprints-filter-chips.component';
 export { PreprintsResourcesComponent } from '@osf/features/preprints/components/filters/preprints-resources/preprints-resources.component';
 export { PreprintsResourcesFiltersComponent } from '@osf/features/preprints/components/filters/preprints-resources-filters/preprints-resources-filters.component';

src/app/features/preprints/components/stepper/metadata-step/metadata-step.component.html

@@ -41,6 +41,10 @@ <h2>Publication DOI</h2>
   </div>
 </p-card>
 
+<div class="m-t-24">
+  <osf-preprints-subjects />
+</div>
+
 <p-card styleClass="m-t-24" class="card">
   <div>
     <h2>Tags (optional)</h2>

src/app/features/preprints/components/stepper/metadata-step/metadata-step.component.ts

@@ -12,6 +12,7 @@ import { Tooltip } from 'primeng/tooltip';
 import { ChangeDetectionStrategy, Component, HostListener, OnInit, output } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
+import { PreprintsSubjectsComponent } from '@osf/features/preprints/components/stepper/metadata-step/preprints-subjects/preprints-subjects.component';
 import { formInputLimits } from '@osf/features/preprints/constants';
 import { MetadataForm, Preprint } from '@osf/features/preprints/models';
 import {
@@ -44,6 +45,7 @@ import { ContributorsComponent } from './contributors/contributors.component';
     Tooltip,
     LicenseComponent,
     TagsInputComponent,
+    PreprintsSubjectsComponent,
   ],
   templateUrl: './metadata-step.component.html',
   styleUrl: './metadata-step.component.scss',

src/app/features/preprints/components/stepper/metadata-step/preprints-subjects/preprints-subjects.component.html

@@ -0,0 +1,7 @@
+<osf-subjects
+  [areSubjectsUpdating]="isSubjectsUpdating()"
+  [selected]="selectedSubjects()"
+  (loadChildren)="getSubjectChildren($event)"
+  (searchChanged)="searchSubjects($event)"
+  (updateSelection)="updateSelectedSubjects($event)"
+/>

src/app/features/preprints/components/stepper/metadata-step/preprints-subjects/preprints-subjects.component.spec.ts

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

src/app/features/preprints/components/stepper/metadata-step/preprints-subjects/preprints-subjects.component.ts

@@ -0,0 +1,49 @@
+import { createDispatchMap, select } from '@ngxs/store';
+
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+import {
+  FetchPreprintsSubjects,
+  SubmitPreprintSelectors,
+  UpdatePreprintsSubjects,
+} from '@osf/features/preprints/store/submit-preprint';
+import { SubjectsComponent } from '@osf/shared/components';
+import { Subject } from '@osf/shared/models';
+import { FetchChildrenSubjects, FetchSubjects } from '@osf/shared/stores';
+
+@Component({
+  selector: 'osf-preprints-subjects',
+  imports: [SubjectsComponent],
+  templateUrl: './preprints-subjects.component.html',
+  styleUrl: './preprints-subjects.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PreprintsSubjectsComponent implements OnInit {
+  private readonly selectedProviderId = select(SubmitPreprintSelectors.getSelectedProviderId);
+  protected selectedSubjects = select(SubmitPreprintSelectors.getSelectedSubjects);
+  protected isSubjectsUpdating = select(SubmitPreprintSelectors.isSubjectsUpdating);
+
+  protected actions = createDispatchMap({
+    fetchSubjects: FetchSubjects,
+    fetchPreprintsSubjects: FetchPreprintsSubjects,
+    fetchChildrenSubjects: FetchChildrenSubjects,
+    updatePreprintsSubjects: UpdatePreprintsSubjects,
+  });
+
+  ngOnInit(): void {
+    this.actions.fetchSubjects(this.selectedProviderId()!);
+    this.actions.fetchPreprintsSubjects();
+  }
+
+  getSubjectChildren(parentId: string) {
+    this.actions.fetchChildrenSubjects(parentId);
+  }
+
+  searchSubjects(search: string) {
+    this.actions.fetchSubjects(search);
+  }
+
+  updateSelectedSubjects(subjects: Subject[]) {
+    this.actions.updatePreprintsSubjects(subjects);
+  }
+}