Chore/151 files api

src/app/app.routes.ts

@@ -122,17 +122,10 @@ export const routes: Routes = [
           },
           {
             path: 'files',
-            loadComponent: () =>
-              import('@osf/features/project/files/project-files.component').then((mod) => mod.ProjectFilesComponent),
+            loadChildren: () =>
+              import('@osf/features/project/files/project-files.routes').then((mod) => mod.projectFilesRoutes),
             providers: [provideStates([ProjectFilesState])],
           },
-          {
-            path: 'files/:fileGuid',
-            loadComponent: () =>
-              import('@osf/features/project/files/components/file-detail/file-detail.component').then(
-                (mod) => mod.FileDetailComponent
-              ),
-          },
           {
             path: 'registrations',
             loadComponent: () =>

src/app/core/components/footer/footer.component.ts

@@ -1,4 +1,4 @@
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -10,7 +10,7 @@ import { IS_WEB } from '@shared/utils';
 
 @Component({
   selector: 'osf-footer',
-  imports: [RouterLink, TranslateModule, IconComponent],
+  imports: [RouterLink, TranslatePipe, IconComponent],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/core/components/root/root.component.html

@@ -5,7 +5,7 @@
     <div class="content-wrapper">
       <osf-header></osf-header>
 
-      <main class="flex flex-column min-h-full">
+      <main class="flex flex-1">
         <router-outlet />
       </main>
 
@@ -21,7 +21,9 @@
         <osf-breadcrumb></osf-breadcrumb>
       }
 
-      <router-outlet />
+      <main class="flex flex-1">
+        <router-outlet />
+      </main>
 
       <osf-footer></osf-footer>
     </div>

src/app/core/components/root/root.component.scss

@@ -17,6 +17,8 @@
       background-color: var.$bg-blue-3;
       border-radius: mix.rem(12px);
       margin: mix.rem(6px);
+      display: flex;
+      flex-direction: column;
       flex: 1;
       overflow-y: auto;
     }

src/app/core/components/root/root.component.ts

@@ -5,14 +5,13 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterOutlet } from '@angular/router';
 
+import { SidenavComponent } from '@core/components';
 import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
 import { FooterComponent } from '@core/components/footer/footer.component';
 import { HeaderComponent } from '@core/components/header/header.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
 import { IS_MEDIUM, IS_WEB } from '@shared/utils';
 
-import { SidenavComponent } from '../sidenav/sidenav.component';
-
 @Component({
   selector: 'osf-root',
   imports: [

src/app/features/auth/pages/reset-password/reset-password.component.ts

@@ -1,4 +1,4 @@
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Password } from 'primeng/password';
@@ -16,7 +16,7 @@ import { ResetPasswordFormGroupType } from '../../models';
 
 @Component({
   selector: 'osf-reset-password',
-  imports: [Button, Password, ReactiveFormsModule, RouterLink, PasswordInputHintComponent, TranslateModule],
+  imports: [Button, Password, ReactiveFormsModule, RouterLink, PasswordInputHintComponent, TranslatePipe],
   templateUrl: './reset-password.component.html',
   styleUrl: './reset-password.component.scss',
 })

src/app/features/auth/pages/sign-up/sign-up.component.ts

@@ -1,4 +1,4 @@
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
@@ -30,7 +30,7 @@ import { PASSWORD_REGEX, passwordMatchValidator } from '../../helpers';
     NgOptimizedImage,
     RouterLink,
     PasswordInputHintComponent,
-    TranslateModule,
+    TranslatePipe,
   ],
   templateUrl: './sign-up.component.html',
   styleUrl: './sign-up.component.scss',

src/app/features/home/components/confirm-email/confirm-email.component.ts

@@ -1,4 +1,4 @@
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -15,7 +15,7 @@ import { LoadingSpinnerComponent } from '@shared/components';
 
 @Component({
   selector: 'osf-confirm-email',
-  imports: [Button, FormsModule, TranslateModule, LoadingSpinnerComponent],
+  imports: [Button, FormsModule, TranslatePipe, LoadingSpinnerComponent],
   templateUrl: './confirm-email.component.html',
   styleUrl: './confirm-email.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/home/home.component.scss

@@ -4,6 +4,7 @@
 :host {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .home-container {

src/app/features/my-profile/my-profile.component.scss

@@ -9,3 +9,7 @@
   border: 1px solid var.$grey-2;
   border-radius: mix.rem(12px);
 }
+
+:host {
+  flex: 1;
+}

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

@@ -1,6 +1,6 @@
 import { Store } from '@ngxs/store';
 
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import type { SortEvent } from 'primeng/api';
 import { DialogService } from 'primeng/dynamicdialog';
@@ -56,7 +56,7 @@ import {
     TabPanels,
     Tabs,
     MyProjectsTableComponent,
-    TranslateModule,
+    TranslatePipe,
   ],
   templateUrl: './my-projects.component.html',
   styleUrl: './my-projects.component.scss',

src/app/features/preprints/components/browse-by-subjects/browse-by-subjects.component.ts

@@ -1,4 +1,4 @@
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
@@ -13,7 +13,7 @@ import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'osf-browse-by-subjects',
-  imports: [RouterLink, Skeleton, TranslateModule, Button],
+  imports: [RouterLink, Skeleton, TranslatePipe, Button],
   templateUrl: './browse-by-subjects.component.html',
   styleUrl: './browse-by-subjects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/preprints/components/preprint-services/preprint-services.component.ts

@@ -1,4 +1,4 @@
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
@@ -7,7 +7,7 @@ import { PreprintProviderShortInfo } from '@osf/features/preprints/models';
 
 @Component({
   selector: 'osf-preprint-services',
-  imports: [TranslateModule, RouterLink],
+  imports: [TranslatePipe, RouterLink],
   templateUrl: './preprint-services.component.html',
   styleUrl: './preprint-services.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/preprints/pages/landing/preprints-landing.component.ts

@@ -1,6 +1,6 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
@@ -35,7 +35,7 @@ import { ResourceTab } from '@shared/enums';
     PreprintServicesComponent,
     BrowseBySubjectsComponent,
     Skeleton,
-    TranslateModule,
+    TranslatePipe,
     TitleCasePipe,
   ],
   templateUrl: './preprints-landing.component.html',

src/app/features/preprints/pages/select-preprint-service/select-preprint-service.component.ts

@@ -1,6 +1,6 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
@@ -18,7 +18,7 @@ import { DecodeHtmlPipe } from '@shared/pipes';
 
 @Component({
   selector: 'osf-select-preprint-service',
-  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton, TranslateModule],
+  imports: [SubHeaderComponent, Card, Button, NgClass, Tooltip, DecodeHtmlPipe, Skeleton, TranslatePipe],
   templateUrl: './select-preprint-service.component.html',
   styleUrl: './select-preprint-service.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -0,0 +1,22 @@
+<form [formGroup]="folderForm" (ngSubmit)="onSubmit()">
+  <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'"
+      [maxLength]="nameLimit"
+      [minLength]="nameMinLength"
+    >
+    </osf-text-input>
+
+    <div class="flex justify-content-end gap-2">
+      <p-button
+        type="button"
+        severity="secondary"
+        [label]="'common.buttons.cancel' | translate"
+        (click)="dialogRef.close()"
+      ></p-button>
+      <p-button type="submit" [label]="'common.buttons.create' | translate" [disabled]="!folderForm.valid"></p-button>
+    </div>
+  </div>
+</form>

src/app/features/project/files/components/create-folder-dialog/create-folder-dialog.component.spec.ts

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

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

@@ -0,0 +1,41 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { Component, inject } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+import { TextInputComponent } from '@osf/shared/components';
+import { InputLimits } from '@osf/shared/constants';
+import { CustomValidators } from '@osf/shared/utils';
+
+@Component({
+  selector: 'osf-create-folder-dialog',
+  imports: [Button, ReactiveFormsModule, TranslatePipe, TextInputComponent],
+  templateUrl: './create-folder-dialog.component.html',
+})
+export class CreateFolderDialogComponent {
+  readonly dialogRef = inject(DynamicDialogRef);
+  readonly nameLimit = InputLimits.name.maxLength;
+  readonly nameMinLength = InputLimits.name.minLength;
+
+  protected readonly folderForm = new FormGroup({
+    name: new FormControl('', {
+      nonNullable: true,
+      validators: [CustomValidators.requiredTrimmed()],
+    }),
+  });
+
+  onSubmit(): void {
+    if (this.folderForm.invalid) {
+      return;
+    }
+
+    const folderName = this.folderForm.getRawValue().name.trim();
+
+    if (folderName) {
+      this.dialogRef.close(folderName);
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+<form [formGroup]="fileMetadataForm" (ngSubmit)="setFileMetadata()" class="flex flex-column gap-3 select-option-wrap">
+  <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="code"
+      optionLabel="name"
+      [formControl]="resourceLanguageControl"
+      [filter]="true"
+      filterBy="name"
+      [showClear]="true"
+      [virtualScroll]="true"
+      [virtualScrollItemSize]="35"
+    ></p-select>
+  </div>
+
+  <div class="flex btn-full-width gap-2">
+    <p-button
+      [label]="'common.buttons.cancel' | translate"
+      severity="info"
+      class="w-full"
+      (click)="cancel()"
+      type="button"
+    />
+    <p-button
+      [label]="'common.buttons.save' | translate"
+      class="w-full"
+      type="submit"
+      [disabled]="!fileMetadataForm.valid"
+    />
+  </div>
+</form>

src/app/features/project/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.spec.ts

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