Fix/file guid

src/app/app.routes.ts

@@ -172,6 +172,11 @@ export const routes: Routes = [
           import('./core/components/request-access/request-access.component').then((mod) => mod.RequestAccessComponent),
         data: { skipBreadcrumbs: true },
       },
+      {
+        path: 'files/:fileGuid',
+        loadComponent: () =>
+          import('@osf/features/files/pages/file-detail/file-detail.component').then((c) => c.FileDetailComponent),
+      },
       {
         path: '**',
         loadComponent: () =>

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

@@ -1,5 +1,6 @@
 import { ProviderState } from '@core/store/provider';
 import { UserState } from '@core/store/user';
+import { FilesState } from '@osf/features/files/store';
 import { MeetingsState } from '@osf/features/meetings/store';
 import { ProjectMetadataState } from '@osf/features/project/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
@@ -28,4 +29,5 @@ export const STATES = [
   ProjectMetadataState,
   LicensesState,
   RegionsState,
+  FilesState,
 ];

src/app/features/project/files/components/create-folder-dialog/create-folder-dialog.component.html → src/app/features/files/components/create-folder-dialog/create-folder-dialog.component.html

@@ -2,8 +2,8 @@
   <div class="flex flex-column gap-4">
     <osf-text-input
       [control]="folderForm.controls['name']"
-      [label]="'project.files.dialogs.createFolder.folderName'"
-      [placeholder]="'project.files.dialogs.createFolder.folderNamePlaceholder'"
+      [label]="'files.dialogs.createFolder.folderName'"
+      [placeholder]="'files.dialogs.createFolder.folderNamePlaceholder'"
       [maxLength]="nameLimit"
       [minLength]="nameMinLength"
     >

src/app/features/project/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html → src/app/features/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.html

@@ -1,16 +1,16 @@
 <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>
+    <p>{{ '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>
+    <p>{{ '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>{{ 'files.detail.fileMetadata.fields.resourceType' | translate }}</p>
     <p-select
       class="w-full"
       [options]="resourceTypes"
@@ -23,7 +23,7 @@
   </div>
 
   <div class="flex flex-column gap-1">
-    <p>{{ 'project.files.detail.fileMetadata.fields.resourceLanguage' | translate }}</p>
+    <p>{{ 'files.detail.fileMetadata.fields.resourceLanguage' | translate }}</p>
     <p-select
       class="w-full"
       [options]="languages"

src/app/features/project/files/components/file-keywords/file-keywords.component.html → src/app/features/files/components/file-keywords/file-keywords.component.html

@@ -1,5 +1,5 @@
 <div class="p-4 flex flex-column gap-2">
-  <h2>{{ 'project.files.detail.keywords.title' | translate }}</h2>
+  <h2>{{ 'files.detail.keywords.title' | translate }}</h2>
 
   <div class="flex align-items-center gap-2">
     <input pInputText class="flex-1" [formControl]="keywordControl" />

src/app/features/project/files/components/file-keywords/file-keywords.component.ts → src/app/features/files/components/file-keywords/file-keywords.component.ts

@@ -11,10 +11,11 @@ import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 
-import { ProjectFilesSelectors, UpdateTags } from '@osf/features/project/files/store';
 import { CustomValidators } from '@osf/shared/helpers';
 import { InputLimits } from '@shared/constants';
 
+import { FilesSelectors, UpdateTags } from '../../store';
+
 @Component({
   selector: 'osf-file-keywords',
   imports: [Button, Chip, Skeleton, InputText, ReactiveFormsModule, TranslatePipe],
@@ -26,9 +27,9 @@ export class FileKeywordsComponent {
   private readonly actions = createDispatchMap({ updateTags: UpdateTags });
   private readonly destroyRef = inject(DestroyRef);
 
-  readonly tags = select(ProjectFilesSelectors.getFileTags);
-  readonly isTagsLoading = select(ProjectFilesSelectors.isFileTagsLoading);
-  readonly file = select(ProjectFilesSelectors.getOpenedFile);
+  readonly tags = select(FilesSelectors.getFileTags);
+  readonly isTagsLoading = select(FilesSelectors.isFileTagsLoading);
+  readonly file = select(FilesSelectors.getOpenedFile);
 
   keywordControl = new FormControl('', {
     nonNullable: true,

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

@@ -1,6 +1,6 @@
 <div class="p-4 flex flex-column gap-3">
   <div class="flex justify-content-between">
-    <h2>{{ 'project.files.detail.fileMetadata.title' | translate }}</h2>
+    <h2>{{ 'files.detail.fileMetadata.title' | translate }}</h2>
 
     <div class="flex gap-2">
       <p-button severity="secondary" (click)="downloadFileMetadata()">
@@ -10,7 +10,7 @@ <h2>{{ 'project.files.detail.fileMetadata.title' | translate }}</h2>
       <p-button
         severity="secondary"
         (click)="openEditFileMetadataDialog()"
-        [label]="'project.files.detail.fileMetadata.edit' | translate"
+        [label]="'files.detail.fileMetadata.edit' | translate"
       ></p-button>
     </div>
   </div>

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

@@ -12,10 +12,9 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 
-import { ProjectFilesSelectors, SetFileMetadata } from '@osf/features/project/files/store';
-
 import { FileMetadataFields } from '../../constants';
 import { PatchFileMetadata } from '../../models';
+import { FilesSelectors, SetFileMetadata } from '../../store';
 import { EditFileMetadataDialogComponent } from '../edit-file-metadata-dialog/edit-file-metadata-dialog.component';
 
 import { environment } from 'src/environments/environment';
@@ -34,8 +33,8 @@ export class FileMetadataComponent {
   private readonly dialogService = inject(DialogService);
   private readonly translateService = inject(TranslateService);
 
-  fileMetadata = select(ProjectFilesSelectors.getFileCustomMetadata);
-  isLoading = select(ProjectFilesSelectors.isFileMetadataLoading);
+  fileMetadata = select(FilesSelectors.getFileCustomMetadata);
+  isLoading = select(FilesSelectors.isFileMetadataLoading);
 
   readonly fileGuid = toSignal(this.route.params.pipe(map((params) => params['fileGuid'])) ?? of(undefined));
 
@@ -60,7 +59,7 @@ export class FileMetadataComponent {
       .open(EditFileMetadataDialogComponent, {
         width: '448px',
         focusOnShow: false,
-        header: this.translateService.instant('project.files.detail.fileMetadata.edit'),
+        header: this.translateService.instant('files.detail.fileMetadata.edit'),
         closeOnEscape: true,
         modal: true,
         closable: true,

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

@@ -1,108 +1,110 @@
 <div class="p-4 flex flex-column gap-5">
-  <h2>{{ 'project.files.detail.projectMetadata.title' | translate }}</h2>
+  <h2>
+    {{ 'files.detail.resourceMetadata.title.' + resourceType() | translate }}
+  </h2>
 
-  @if (isProjectMetadataLoading()) {
+  @if (isResourceMetadataLoading()) {
     <p-skeleton width="100%" height="4rem" />
     <p-skeleton width="100%" height="4rem" />
     <p-skeleton width="100%" height="4rem" />
     <p-skeleton width="100%" height="4rem" />
   } @else {
-    @for (funder of projectMetadata()?.funders; track $index) {
+    @for (funder of resourceMetadata()?.funders; track $index) {
       <div class="flex flex-column gap-2">
         @if (funder.funderName) {
           <div class="flex flex-column gap-1">
-            <h4>{{ 'project.files.detail.projectMetadata.fields.funder' | translate }}</h4>
+            <h4>{{ 'files.detail.resourceMetadata.fields.funder' | translate }}</h4>
             <span>{{ funder.funderName }}</span>
           </div>
         }
         @if (funder.awardTitle) {
           <div class="flex flex-column gap-1">
-            <h4>{{ 'project.files.detail.projectMetadata.fields.awardTitle' | translate }}</h4>
+            <h4>{{ 'files.detail.resourceMetadata.fields.awardTitle' | translate }}</h4>
             <span>{{ funder.awardTitle }}</span>
           </div>
         }
         @if (funder.awardTitle) {
           <div class="flex flex-column gap-1">
-            <h4>{{ 'project.files.detail.projectMetadata.fields.awardNumber' | translate }}</h4>
+            <h4>{{ 'files.detail.resourceMetadata.fields.awardNumber' | translate }}</h4>
             <span>{{ funder.awardTitle }}</span>
           </div>
         }
         @if (funder.awardUri) {
           <div class="flex flex-column gap-1">
-            <h4>{{ 'project.files.detail.projectMetadata.fields.awardUri' | translate }}</h4>
+            <h4>{{ 'files.detail.resourceMetadata.fields.awardUri' | translate }}</h4>
             <span>{{ funder.awardUri }}</span>
           </div>
         }
       </div>
     }
 
     <div class="flex flex-column gap-2">
-      <h4>{{ 'project.files.detail.projectMetadata.fields.title' | translate }}</h4>
+      <h4>{{ 'files.detail.resourceMetadata.fields.title' | translate }}</h4>
 
-      <span>{{ projectMetadata()?.title }}</span>
+      <span>{{ resourceMetadata()?.title }}</span>
     </div>
 
-    @if (projectMetadata()?.description) {
+    @if (resourceMetadata()?.description) {
       <div class="flex flex-column gap-2">
-        <h4>{{ 'project.files.detail.projectMetadata.fields.description' | translate }}</h4>
+        <h4>{{ 'files.detail.resourceMetadata.fields.description' | translate }}</h4>
 
         <div>
-          {{ projectMetadata()?.description }}
+          {{ resourceMetadata()?.description }}
         </div>
       </div>
     }
 
-    @if (projectMetadata()?.resourceTypeGeneral) {
+    @if (resourceMetadata()?.resourceTypeGeneral) {
       <div class="flex flex-column gap-2">
-        <h4>{{ 'project.files.detail.projectMetadata.fields.resourceType' | translate }}</h4>
+        <h4>{{ 'files.detail.resourceMetadata.fields.resourceType' | translate }}</h4>
 
         <div>
-          {{ projectMetadata()?.resourceTypeGeneral }}
+          {{ resourceMetadata()?.resourceTypeGeneral }}
         </div>
       </div>
     }
 
-    @if (projectMetadata()?.language) {
+    @if (resourceMetadata()?.language) {
       <div class="flex flex-column gap-2">
-        <h4>{{ 'project.files.detail.projectMetadata.fields.resourceLanguage' | translate }}</h4>
+        <h4>{{ 'files.detail.resourceMetadata.fields.resourceLanguage' | translate }}</h4>
 
         <div>
-          {{ projectMetadata()?.language }}
+          {{ resourceMetadata()?.language }}
         </div>
       </div>
     }
 
-    @if (projectMetadata()?.dateCreated) {
+    @if (resourceMetadata()?.dateCreated) {
       <div class="flex flex-column gap-2">
-        <h4>{{ 'project.files.detail.projectMetadata.fields.dateCreated' | translate }}</h4>
+        <h4>{{ 'files.detail.resourceMetadata.fields.dateCreated' | translate }}</h4>
 
         <div>
-          {{ projectMetadata()?.dateCreated | date: 'MMMM d, y' }}
+          {{ resourceMetadata()?.dateCreated | date: 'MMMM d, y' }}
         </div>
       </div>
     }
 
-    @if (projectMetadata()?.dateModified) {
+    @if (resourceMetadata()?.dateModified) {
       <div class="flex flex-column gap-2">
-        <h4>{{ 'project.files.detail.projectMetadata.fields.dateModified' | translate }}</h4>
+        <h4>{{ 'files.detail.resourceMetadata.fields.dateModified' | translate }}</h4>
 
         <div>
-          {{ projectMetadata()?.dateModified | date: 'MMMM d, y' }}
+          {{ resourceMetadata()?.dateModified | date: 'MMMM d, y' }}
         </div>
       </div>
     }
   }
 
-  @if (isProjectContributorsLoading()) {
+  @if (isResourceContributorsLoading()) {
     <p-skeleton width="100%" height="4rem" />
   } @else {
     @if (contributors()?.length) {
       <div class="flex flex-column gap-2">
-        <h4>{{ 'project.files.detail.projectMetadata.fields.contributors' | translate }}</h4>
+        <h4>{{ 'files.detail.resourceMetadata.fields.contributors' | translate }}</h4>
 
         <div class="flex flex-wrap">
           @for (contributor of contributors(); track $index) {
-            <a [href]="contributor.id" class="font-bold">{{ contributor.name }}</a>
+            <a [href]="contributor.id" class="font-bold">{{ contributor.fullName }}</a>
             @if (!$last) {
               <span>,&nbsp;</span>
             }

src/app/features/files/components/file-resource-metadata/file-resource-metadata.component.spec.ts

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

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

@@ -0,0 +1,25 @@
+import { select } from '@ngxs/store';
+
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Skeleton } from 'primeng/skeleton';
+
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { FilesSelectors } from '../../store';
+
+@Component({
+  selector: 'osf-file-resource-metadata',
+  imports: [DatePipe, TranslatePipe, Skeleton],
+  templateUrl: './file-resource-metadata.component.html',
+  styleUrl: './file-resource-metadata.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileResourceMetadataComponent {
+  resourceType = input<string>('nodes');
+  resourceMetadata = select(FilesSelectors.getResourceMetadata);
+  contributors = select(FilesSelectors.getContributors);
+  isResourceMetadataLoading = select(FilesSelectors.isResourceMetadataLoading);
+  isResourceContributorsLoading = select(FilesSelectors.isResourceContributorsLoading);
+}

src/app/features/project/files/components/file-revisions/file-revisions.component.html → src/app/features/files/components/file-revisions/file-revisions.component.html

@@ -1,6 +1,6 @@
 <div class="p-4 flex flex-column gap-2">
   <div class="flex justify-content-between">
-    <h2>{{ 'project.files.detail.revisions.title' | translate }}</h2>
+    <h2>{{ 'files.detail.revisions.title' | translate }}</h2>
   </div>
 
   @if (isLoading()) {
@@ -18,25 +18,25 @@ <h2>{{ 'project.files.detail.revisions.title' | translate }}</h2>
               <li class="flex align-items-center justify-content-between">
                 <osf-copy-button
                   class="copy-button"
-                  [label]="'project.files.detail.revisions.actions.copyMd5' | translate"
+                  [label]="'files.detail.revisions.actions.copyMd5' | translate"
                   [copyItem]="item.hashes.md5"
                 ></osf-copy-button>
 
                 <osf-info-icon
-                  [tooltipText]="'project.files.detail.revisions.tooltips.md5' | translate"
+                  [tooltipText]="'files.detail.revisions.tooltips.md5' | translate"
                   tooltipPosition="left"
                 ></osf-info-icon>
               </li>
 
               <li class="flex align-items-center justify-content-between gap-2">
                 <osf-copy-button
                   class="copy-button"
-                  [label]="'project.files.detail.revisions.actions.copySha2' | translate"
+                  [label]="'files.detail.revisions.actions.copySha2' | translate"
                   [copyItem]="item.hashes.sha256"
                 ></osf-copy-button>
 
                 <osf-info-icon
-                  [tooltipText]="'project.files.detail.revisions.tooltips.sha2' | translate"
+                  [tooltipText]="'files.detail.revisions.tooltips.sha2' | translate"
                   tooltipPosition="left"
                 ></osf-info-icon>
               </li>
@@ -45,7 +45,7 @@ <h2>{{ 'project.files.detail.revisions.title' | translate }}</h2>
                 <p-button
                   icon="fas fa-download"
                   variant="text"
-                  [label]="'project.files.detail.revisions.actions.download' | translate"
+                  [label]="'files.detail.revisions.actions.download' | translate"
                   (click)="downloadRevision(item.version)"
                 ></p-button>