chore(files): api

src/app/app.routes.ts

@@ -2,6 +2,8 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
+import { ProjectFilesState } from '@osf/features/project/files/store/project-files.state';
+
 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';
@@ -117,9 +119,10 @@ export const routes: Routes = [
             path: 'files',
             loadComponent: () =>
               import('@osf/features/project/files/project-files.component').then((mod) => mod.ProjectFilesComponent),
+            providers: [provideStates([ProjectFilesState])],
           },
           {
-            path: 'files/:fileId',
+            path: 'files/:fileGuid',
             loadComponent: () =>
               import('@osf/features/project/files/components/file-detail/file-detail.component').then(
                 (mod) => mod.FileDetailComponent

src/app/core/models/json-api.model.ts

@@ -12,10 +12,11 @@ export interface JsonApiResponseWithPaging<Data, Included> extends JsonApiRespon
   };
 }
 
-export interface ApiData<Attributes, Embeds, Relationships> {
+export interface ApiData<Attributes, Embeds, Relationships, Links> {
   id: string;
   attributes: Attributes;
   embeds: Embeds;
   type: string;
   relationships: Relationships;
+  links: Links;
 }

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

@@ -1,6 +1,6 @@
 import { map, Observable } from 'rxjs';
 
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpEvent, HttpParams } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
 import { JsonApiResponse } from '@osf/core/models';
@@ -49,8 +49,23 @@ export class JsonApiService {
     return this.http.patch<JsonApiResponse<T, null>>(url, body).pipe(map((response) => response.data));
   }
 
-  put<T>(url: string, body: unknown): Observable<T> {
-    return this.http.put<JsonApiResponse<T, null>>(url, body).pipe(map((response) => response.data));
+  put<T>(url: string, body: unknown, params?: Record<string, unknown>): Observable<T> {
+    return this.http
+      .put<JsonApiResponse<T, null>>(url, body, { params: this.buildHttpParams(params) })
+      .pipe(map((response) => response.data));
+  }
+
+  putFile<T>(
+    url: string,
+    file: File,
+    params?: Record<string, string>
+  ): Observable<HttpEvent<JsonApiResponse<T, null>>> {
+    return this.http.put<JsonApiResponse<T, null>>(url, file, {
+      params: params,
+      reportProgress: true,
+      observe: 'events',
+      responseType: 'json' as const,
+    });
   }
 
   delete(url: string, body?: unknown): Observable<void> {

src/app/features/project/contributors/models/contributor-response.model.ts

@@ -1,7 +1,7 @@
 import { ApiData } from '@osf/core/models';
 import { Education, Employment } from '@osf/shared/models';
 
-export type ContributorResponse = ApiData<ContributorAttributes, ContributorEmbeds, ContributorRelationships>;
+export type ContributorResponse = ApiData<ContributorAttributes, ContributorEmbeds, ContributorRelationships, null>;
 
 export interface ContributorAttributes {
   index: number;

src/app/features/project/files/components/file-detail/components/file-metadata/file-metadata.component.html

@@ -0,0 +1,122 @@
+<div class="metadata p-4 flex flex-column gap-3">
+  <div class="flex justify-content-between">
+    <h2>{{ 'project.files.detail.fileMetadata.title' | translate }}</h2>
+
+    <div class="flex gap-2">
+      <p-button severity="secondary"><i class="osf-icon-download p-1"></i></p-button>
+      <p-button severity="secondary" (click)="editFileMetadataVisible = true">{{
+        'project.files.detail.fileMetadata.edit' | translate
+      }}</p-button>
+    </div>
+  </div>
+
+  <div class="flex flex-column gap-2">
+    <h3>{{ 'project.files.detail.fileMetadata.fields.title' | translate }}</h3>
+
+    @if (fileMetadata().isLoading) {
+      <p-skeleton width="3rem" height="19px"></p-skeleton>
+    } @else {
+      <span>{{ fileMetadata().data?.title }}</span>
+    }
+  </div>
+
+  @if (fileMetadata().data?.description) {
+    <div class="flex flex-column gap-2">
+      <h3>{{ 'project.files.detail.fileMetadata.fields.description' | translate }}</h3>
+
+      @if (fileMetadata().isLoading) {
+        <p-skeleton width="6rem" height="19px"></p-skeleton>
+      } @else {
+        <div>
+          {{ fileMetadata().data?.description }}
+        </div>
+      }
+    </div>
+  }
+
+  @if (fileMetadata().data?.resourceTypeGeneral) {
+    <div class="flex flex-column gap-2">
+      <h3>{{ 'project.files.detail.fileMetadata.fields.resourceType' | translate }}</h3>
+
+      @if (fileMetadata().isLoading) {
+        <p-skeleton width="7.5rem" height="19px"></p-skeleton>
+      } @else {
+        <div>
+          <span>{{ fileMetadata().data?.resourceTypeGeneral }}</span>
+        </div>
+      }
+    </div>
+  }
+
+  @if (fileMetadata().data?.language) {
+    <div class="flex flex-column gap-2">
+      <h3>{{ 'project.files.detail.fileMetadata.fields.resourceLanguage' | translate }}</h3>
+
+      @if (fileMetadata().isLoading) {
+        <p-skeleton width="10rem" height="19px"></p-skeleton>
+      } @else {
+        <div>
+          <span>{{ fileMetadata().data?.language }}</span>
+        </div>
+      }
+    </div>
+  }
+</div>
+
+<p-dialog
+  [header]="'project.files.detail.fileMetadata.edit' | translate"
+  [modal]="true"
+  [(visible)]="editFileMetadataVisible"
+  [style]="{ width: '25rem' }"
+>
+  <form [formGroup]="fileMetadataForm" (ngSubmit)="setFileMetadata()" class="flex flex-column gap-3">
+    <div class="flex flex-column gap-1">
+      <p>{{ 'project.files.detail.fileMetadata.fields.title' | translate }}</p>
+      <input pInputText id="title" [formControl]="titleControl" />
+    </div>
+    <div class="flex flex-column gap-1">
+      <p>{{ 'project.files.detail.fileMetadata.fields.description' | translate }}</p>
+      <input pInputText id="description" [formControl]="descriptionControl" />
+    </div>
+    <div class="flex flex-column gap-1">
+      <p>{{ 'project.files.detail.fileMetadata.fields.resourceType' | translate }}</p>
+      <p-select
+        class="w-full"
+        [options]="resourceTypes"
+        optionValue="value"
+        optionLabel="value"
+        appendTo="body"
+        [formControl]="resourceTypeControl"
+        [showClear]="true"
+      ></p-select>
+    </div>
+    <div class="flex flex-column gap-1">
+      <p>{{ 'project.files.detail.fileMetadata.fields.resourceLanguage' | translate }}</p>
+      <p-select
+        class="w-full"
+        [options]="languages"
+        optionValue="value"
+        optionLabel="label"
+        appendTo="body"
+        [formControl]="resourceLanguageControl"
+        [showClear]="true"
+      ></p-select>
+    </div>
+
+    <div class="flex btn-full-width gap-2">
+      <p-button
+        [label]="'common.buttons.cancel' | translate"
+        severity="info"
+        class="w-full"
+        (click)="editFileMetadataVisible = false"
+        type="button"
+      />
+      <p-button
+        [label]="'common.buttons.save' | translate"
+        class="w-full"
+        type="submit"
+        [disabled]="!fileMetadataForm.valid"
+      />
+    </div>
+  </form>
+</p-dialog>

src/app/features/project/files/components/file-detail/components/file-metadata/file-metadata.component.scss

@@ -0,0 +1 @@
+@use "../../file-detail.component.scss";

src/app/features/project/files/components/file-detail/components/file-metadata/file-metadata.component.ts

@@ -0,0 +1,94 @@
+import { select, Store } from '@ngxs/store';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { Dialog } from 'primeng/dialog';
+import { InputText } from 'primeng/inputtext';
+import { Select } from 'primeng/select';
+import { Skeleton } from 'primeng/skeleton';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ProjectFilesSelectors, SetFileMetadata } from '@osf/features/project/files/store';
+
+import { LANGUAGES, RESOURCE_TYPES } from '../../constants/files-details.constants';
+
+@Component({
+  selector: 'osf-file-metadata',
+  standalone: true,
+  imports: [Button, Dialog, InputText, Select, FormsModule, ReactiveFormsModule, Skeleton, TranslateModule],
+  templateUrl: './file-metadata.component.html',
+  styleUrl: './file-metadata.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileMetadataComponent {
+  readonly store = inject(Store);
+  readonly destroyRef = inject(DestroyRef);
+  readonly fb = inject(FormBuilder);
+
+  fileMetadata = select(ProjectFilesSelectors.getFileCustomMetadata);
+  isIframeLoading = true;
+  editFileMetadataVisible = false;
+
+  fileMetadataForm = new FormGroup({
+    title: new FormControl<string | null>(null),
+    description: new FormControl<string | null>(null),
+    resourceType: new FormControl<string | null>(null),
+    resourceLanguage: new FormControl<string | null>(null),
+  });
+
+  protected readonly resourceTypes = RESOURCE_TYPES;
+  protected readonly languages = LANGUAGES;
+
+  get titleControl(): FormControl<string | null> {
+    return this.fileMetadataForm.get('title') as FormControl<string | null>;
+  }
+
+  get descriptionControl(): FormControl<string | null> {
+    return this.fileMetadataForm.get('description') as FormControl<string | null>;
+  }
+
+  get resourceTypeControl(): FormControl<string | null> {
+    return this.fileMetadataForm.get('resourceType') as FormControl<string | null>;
+  }
+
+  get resourceLanguageControl(): FormControl<string | null> {
+    return this.fileMetadataForm.get('resourceLanguage') as FormControl<string | null>;
+  }
+
+  constructor() {
+    toObservable(this.fileMetadata)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((metadata) => {
+        if (metadata.data) {
+          this.fileMetadataForm.patchValue({
+            title: metadata.data.title,
+            description: metadata.data.description,
+            resourceType: metadata.data.resourceTypeGeneral,
+            resourceLanguage: metadata.data.language,
+          });
+        }
+      });
+  }
+
+  setFileMetadata() {
+    if (this.fileMetadataForm.valid) {
+      const formValues = {
+        title: this.fileMetadataForm.get('title')?.value ?? null,
+        description: this.fileMetadataForm.get('description')?.value ?? null,
+        resource_type_general: this.fileMetadataForm.get('resourceType')?.value ?? null,
+        language: this.fileMetadataForm.get('resourceLanguage')?.value ?? null,
+      };
+
+      const fileId = this.fileMetadata().data?.id;
+      if (fileId) {
+        this.store.dispatch(new SetFileMetadata(formValues, fileId));
+      }
+
+      this.editFileMetadataVisible = false;
+    }
+  }
+}