Feat/145 - Create project api integration

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

@@ -4,6 +4,7 @@ import { AddonsState } from '@core/store/settings/addons';
 import { UserState } from '@core/store/user';
 import { MyProjectsState } from '@core/store/my-projects';
 import { SearchState } from '@osf/features/search/store';
+import { InstitutionsState } from '@core/store/institutions';
 
 export const STATES = [
   AuthState,
@@ -12,4 +13,5 @@ export const STATES = [
   UserState,
   SearchState,
   MyProjectsState,
+  InstitutionsState,
 ];

src/app/core/constants/storage-locations.constant.ts

@@ -0,0 +1,8 @@
+import { StorageLocation } from '@osf/features/my-projects/entities/storage-location.interface';
+
+export const STORAGE_LOCATIONS: StorageLocation[] = [
+  { label: 'United States', value: 'us' },
+  { label: 'Canada - Montréal', value: 'ca-1' },
+  { label: 'Germany - Frankfurt', value: 'de-1' },
+  { label: 'Australia - Sydney', value: 'de-1' },
+];

src/app/core/services/json-api/json-api.service.ts

@@ -44,9 +44,16 @@ export class JsonApiService {
     return httpParams;
   }
 
-  post<T>(url: string, body: unknown): Observable<T> {
+  post<T>(
+    url: string,
+    body: unknown,
+    params?: Record<string, unknown>,
+  ): Observable<T> {
     return this.http
-      .post<JsonApiResponse<T, null>>(url, body, { headers: this.#headers })
+      .post<JsonApiResponse<T, null>>(url, body, {
+        headers: this.#headers,
+        params: this.buildHttpParams(params),
+      })
       .pipe(map((response) => response.data));
   }
 

src/app/core/store/institutions/index.ts

@@ -0,0 +1,4 @@
+export * from './institutions.state';
+export * from './institutions.selectors';
+export * from './institutions.model';
+export * from './institutions.actions';

src/app/core/store/institutions/institutions.actions.ts

@@ -0,0 +1,3 @@
+export class GetUserInstitutions {
+  static readonly type = '[Institutions] Get User Institutions';
+}

src/app/core/store/institutions/institutions.model.ts

@@ -0,0 +1,5 @@
+import { Institution } from '@osf/features/institutions/entities/institutions.models';
+
+export interface InstitutionsStateModel {
+  userInstitutions: Institution[];
+}

src/app/core/store/institutions/institutions.selectors.ts

@@ -0,0 +1,10 @@
+import { Selector } from '@ngxs/store';
+import { InstitutionsStateModel } from './institutions.model';
+import { InstitutionsState } from './institutions.state';
+
+export class InstitutionsSelectors {
+  @Selector([InstitutionsState])
+  static getUserInstitutions(state: InstitutionsStateModel) {
+    return state.userInstitutions;
+  }
+}

src/app/core/store/institutions/institutions.state.ts

@@ -0,0 +1,28 @@
+import { inject, Injectable } from '@angular/core';
+import { State, Action, StateContext } from '@ngxs/store';
+import { InstitutionsStateModel } from './institutions.model';
+import { GetUserInstitutions } from './institutions.actions';
+import { InstitutionsService } from '@osf/features/institutions/institutions.service';
+import { tap } from 'rxjs';
+
+@State<InstitutionsStateModel>({
+  name: 'institutions',
+  defaults: {
+    userInstitutions: [],
+  },
+})
+@Injectable()
+export class InstitutionsState {
+  #institutionsService = inject(InstitutionsService);
+
+  @Action(GetUserInstitutions)
+  getUserInstitutions(ctx: StateContext<InstitutionsStateModel>) {
+    return this.#institutionsService.getUserInstitutions().pipe(
+      tap((institutions) => {
+        ctx.patchState({
+          userInstitutions: institutions,
+        });
+      }),
+    );
+  }
+}

src/app/core/store/my-projects/my-projects.actions.ts

@@ -47,3 +47,15 @@ export class GetBookmarksCollectionId {
 export class ClearMyProjects {
   static readonly type = '[My Projects] Clear Projects';
 }
+
+export class CreateProject {
+  static readonly type = '[MyProjects] Create Project';
+
+  constructor(
+    public title: string,
+    public description: string,
+    public templateFrom: string,
+    public region: string,
+    public affiliations: string[],
+  ) {}
+}

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

@@ -8,6 +8,7 @@ import {
   GetMyBookmarks,
   GetBookmarksCollectionId,
   ClearMyProjects,
+  CreateProject,
 } from './my-projects.actions';
 import { MyProjectsService } from '@osf/features/my-projects/my-projects.service';
 import { tap } from 'rxjs';
@@ -124,4 +125,28 @@ export class MyProjectsState {
       totalBookmarks: 0,
     });
   }
+
+  @Action(CreateProject)
+  createProject(
+    ctx: StateContext<MyProjectsStateModel>,
+    action: CreateProject,
+  ) {
+    return this.myProjectsService
+      .createProject(
+        action.title,
+        action.description,
+        action.templateFrom,
+        action.region,
+        action.affiliations,
+      )
+      .pipe(
+        tap((project) => {
+          const state = ctx.getState();
+          ctx.patchState({
+            projects: [project, ...state.projects],
+            totalProjects: state.totalProjects + 1,
+          });
+        }),
+      );
+  }
 }

src/app/features/home/home.component.html

@@ -8,6 +8,7 @@
     [title]="'Dashboard'"
     [icon]="'home'"
     [buttonLabel]="'Create New Project'"
+    (buttonClick)="createProject()"
   />
 
   <div class="quick-search-container">

src/app/features/home/home.component.ts

@@ -27,25 +27,33 @@ import {
 import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
 import { MyProjectsSearchFilters } from '@osf/features/my-projects/entities/my-projects-search-filters.models';
 import { MyProjectsItem } from '@osf/features/my-projects/entities/my-projects.entities';
+import { GetUserInstitutions } from '@osf/core/store/institutions';
+import { DialogService } from 'primeng/dynamicdialog';
+import { AddProjectFormComponent } from '@shared/components/add-project-form/add-project-form.component';
 
 @Component({
   selector: 'osf-home',
   standalone: true,
   imports: [RouterLink, Button, SubHeaderComponent, MyProjectsTableComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
+  providers: [DialogService],
 })
 export class HomeComponent implements OnInit {
   readonly #destroyRef = inject(DestroyRef);
   readonly #store = inject(Store);
   readonly #router = inject(Router);
   readonly #route = inject(ActivatedRoute);
+  readonly #dialogService = inject(DialogService);
+  readonly #isXSmall$ = inject(IS_XSMALL);
+  readonly #isMedium$ = inject(IS_MEDIUM);
   readonly #searchSubject = new Subject<string>();
 
   protected readonly isLoading = signal(false);
+  protected readonly isSubmitting = signal(false);
 
-  protected readonly isMedium = toSignal(inject(IS_MEDIUM));
-  protected readonly isMobile = toSignal(inject(IS_XSMALL));
+  protected readonly isMedium = toSignal(this.#isMedium$);
+  protected readonly isMobile = toSignal(this.#isXSmall$);
 
   protected readonly activeProject = signal<MyProjectsItem | null>(null);
   protected readonly searchValue = signal('');
@@ -77,6 +85,7 @@ export class HomeComponent implements OnInit {
 
   ngOnInit() {
     this.#setupQueryParamsSubscription();
+    this.#store.dispatch(new GetUserInstitutions());
   }
 
   #setupQueryParamsSubscription(): void {
@@ -214,4 +223,22 @@ export class HomeComponent implements OnInit {
     this.activeProject.set(project);
     this.#router.navigate(['/my-projects', project.id]);
   }
+
+  protected createProject(): void {
+    const dialogWidth = this.isMobile() ? '95vw' : '850px';
+    this.isSubmitting.set(true);
+
+    const dialogRef = this.#dialogService.open(AddProjectFormComponent, {
+      width: dialogWidth,
+      focusOnShow: false,
+      header: 'Create Project',
+      closeOnEscape: true,
+      modal: true,
+      closable: true,
+    });
+
+    dialogRef.onClose.subscribe(() => {
+      this.isSubmitting.set(false);
+    });
+  }
 }

src/app/features/institutions/entities/institutions.models.ts

@@ -0,0 +1,35 @@
+export interface InstitutionAssets {
+  logo: string;
+  logo_rounded: string;
+  banner: string;
+}
+
+export interface InstitutionAttributes {
+  name: string;
+  description: string;
+  iri: string;
+  ror_iri: string | null;
+  iris: string[];
+  assets: InstitutionAssets;
+  institutional_request_access_enabled: boolean;
+  logo_path: string;
+}
+
+export interface UserInstitutionGetResponse {
+  id: string;
+  type: string;
+  attributes: InstitutionAttributes;
+}
+
+export interface Institution {
+  id: string;
+  type: string;
+  name: string;
+  description: string;
+  iri: string;
+  rorIri: string | null;
+  iris: string[];
+  assets: InstitutionAssets;
+  institutionalRequestAccessEnabled: boolean;
+  logoPath: string;
+}

src/app/features/institutions/institutions.service.ts

@@ -0,0 +1,29 @@
+import { inject, Injectable } from '@angular/core';
+import { JsonApiService } from '@core/services/json-api/json-api.service';
+import { Observable } from 'rxjs';
+import {
+  Institution,
+  UserInstitutionGetResponse,
+} from './entities/institutions.models';
+import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
+import { map } from 'rxjs/operators';
+import { InstitutionsMapper } from './mappers/institutions.mapper';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InstitutionsService {
+  #baseUrl = 'https://api.staging4.osf.io/v2/';
+  #jsonApiService = inject(JsonApiService);
+
+  getUserInstitutions(): Observable<Institution[]> {
+    const url = this.#baseUrl + 'users/me/institutions/';
+    return this.#jsonApiService
+      .get<JsonApiResponse<UserInstitutionGetResponse[], null>>(url)
+      .pipe(
+        map((response) =>
+          response.data.map((item) => InstitutionsMapper.fromResponse(item)),
+        ),
+      );
+  }
+}

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

@@ -0,0 +1,22 @@
+import {
+  Institution,
+  UserInstitutionGetResponse,
+} from '../entities/institutions.models';
+
+export class InstitutionsMapper {
+  static fromResponse(response: UserInstitutionGetResponse): Institution {
+    return {
+      id: response.id,
+      type: response.type,
+      name: response.attributes.name,
+      description: response.attributes.description,
+      iri: response.attributes.iri,
+      rorIri: response.attributes.ror_iri,
+      iris: response.attributes.iris,
+      assets: response.attributes.assets,
+      institutionalRequestAccessEnabled:
+        response.attributes.institutional_request_access_enabled,
+      logoPath: response.attributes.logo_path,
+    };
+  }
+}

src/app/features/my-projects/entities/create-project.entities.ts

@@ -0,0 +1,25 @@
+export interface CreateProjectPayload {
+  data: {
+    type: 'nodes';
+    attributes: {
+      title: string;
+      description?: string;
+      category: 'project';
+      template_from?: string;
+    };
+    relationships: {
+      region: {
+        data: {
+          type: 'regions';
+          id: string;
+        };
+      };
+      affiliated_institutions?: {
+        data: {
+          type: 'institutions';
+          id: string;
+        }[];
+      };
+    };
+  };
+}

src/app/features/my-projects/entities/my-projects.types.ts

@@ -2,4 +2,4 @@ export type EndpointType =
   | 'nodes'
   | 'registrations'
   | 'preprints'
-  | `collections/${string}/linked_nodes`;
+  | `collections/${string}/linked_nodes/`;

src/app/features/my-projects/entities/storage-location.interface.ts

@@ -0,0 +1,4 @@
+export interface StorageLocation {
+  label: string;
+  value: string;
+}