feat(metadata): add metadata to file detail page

Author: nmykhalkevch-exoft

src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { provideStates } from '@ngxs/store';
 
 import { Routes } from '@angular/router';
 
+import { isFileGuard } from '@core/guards/is-file.guard';
 import { BookmarksState, ProjectsState } from '@shared/stores';
 
 import { authGuard, redirectIfLoggedInGuard } from './core/guards';
@@ -164,9 +165,9 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
       },
       {
-        path: 'files/:fileGuid',
-        loadComponent: () =>
-          import('@osf/features/files/pages/file-detail/file-detail.component').then((c) => c.FileDetailComponent),
+        path: ':id',
+        canMatch: [isFileGuard],
+        loadChildren: () => import('./features/files/files.routes').then((m) => m.filesRoutes),
       },
       {
         path: ':id',

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

@@ -2,7 +2,6 @@ import { ProviderState } from '@core/store/provider';
 import { UserState } from '@core/store/user';
 import { FilesState } from '@osf/features/files/store';
 import { MetadataState } from '@osf/features/metadata/store';
-import { ProjectMetadataState } from '@osf/features/project/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
 import { AddonsState, CurrentResourceState, WikiState } from '@osf/shared/stores';
@@ -20,7 +19,6 @@ export const STATES = [
   ProjectOverviewState,
   WikiState,
   RegistrationsState,
-  ProjectMetadataState,
   LicensesState,
   RegionsState,
   FilesState,

src/app/core/guards/is-file.guard.ts

@@ -0,0 +1,42 @@
+import { Store } from '@ngxs/store';
+
+import { map, switchMap } from 'rxjs/operators';
+
+import { inject } from '@angular/core';
+import { CanMatchFn, Route, UrlSegment } from '@angular/router';
+
+import { CurrentResourceType } from '../../shared/enums';
+import { CurrentResourceSelectors, GetResource } from '../../shared/stores';
+
+export const isFileGuard: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
+  const store = inject(Store);
+
+  const id = segments[0]?.path;
+  if (!id) {
+    return false;
+  }
+
+  const currentResource = store.selectSnapshot(CurrentResourceSelectors.getCurrentResource);
+
+  if (currentResource && currentResource.id === id) {
+    if (currentResource.type === CurrentResourceType.Files) {
+      return true;
+    }
+
+    return currentResource.type === CurrentResourceType.Files;
+  }
+
+  return store.dispatch(new GetResource(id)).pipe(
+    switchMap(() => store.select(CurrentResourceSelectors.getCurrentResource)),
+    map((resource) => {
+      if (!resource || resource.id !== id) {
+        return false;
+      }
+
+      if (resource.type === CurrentResourceType.Files) {
+        return true;
+      }
+      return resource.type === CurrentResourceType.Files;
+    })
+  );
+};

src/app/features/files/files.routes.ts

@@ -1,5 +1,7 @@
 import { Routes } from '@angular/router';
 
+import { ResourceType } from '@osf/shared/enums';
+
 import { FilesContainerComponent } from './pages/files-container/files-container.component';
 
 export const filesRoutes: Routes = [
@@ -11,17 +13,24 @@ export const filesRoutes: Routes = [
         path: '',
         loadComponent: () => import('@osf/features/files/pages/files/files.component').then((c) => c.FilesComponent),
       },
+      {
+        path: 'metadata',
+        loadChildren: () => import('@osf/features/metadata/metadata.routes').then((mod) => mod.metadataRoutes),
+        data: { resourceType: ResourceType.File },
+      },
       {
         path: ':fileGuid',
-        loadComponent: () =>
-          import('@osf/features/files/pages/file-detail/file-detail.component').then((c) => c.FileDetailComponent),
+        loadComponent: () => {
+          return import('@osf/features/files/pages/file-detail/file-detail.component').then(
+            (c) => c.FileDetailComponent
+          );
+        },
+
         children: [
           {
             path: 'metadata',
-            loadComponent: () =>
-              import('@osf/features/files/pages/community-metadata/community-metadata.component').then(
-                (c) => c.CommunityMetadataComponent
-              ),
+            loadChildren: () => import('@osf/features/metadata/metadata.routes').then((mod) => mod.metadataRoutes),
+            data: { resourceType: ResourceType.File },
           },
         ],
       },

src/app/features/files/pages/file-detail/file-detail.component.html

@@ -21,7 +21,7 @@
       <p-button
         severity="secondary"
         [label]="'files.detail.actions.addCommunityMetadata' | translate"
-        [routerLink]="['/metadata']"
+        [routerLink]="['/', fileGuid, 'metadata', 'add']"
       ></p-button>
 
       @if (file()?.links?.download) {
@@ -90,8 +90,25 @@
       } @else if (selectedTab === FileDetailTab.Keywords) {
         <osf-file-keywords class="metadata"></osf-file-keywords>
       } @else {
-        <osf-file-metadata class="metadata"></osf-file-metadata>
-        <osf-file-resource-metadata class="metadata" [resourceType]="resourceType"></osf-file-resource-metadata>
+        <div class="file-metadata-tabs">
+          <osf-metadata-tabs
+            [loading]="isLoading()"
+            [tabs]="tabs()"
+            [selectedTab]="selectedMetadataTab()"
+            [selectedCedarTemplate]="selectedCedarTemplate()!"
+            [selectedCedarRecord]="selectedCedarRecord()!"
+            [cedarFormReadonly]="cedarFormReadonly()"
+            (changeTab)="onMetadataTabChange($event)"
+            (formSubmit)="onCedarFormSubmit($event)"
+            (cedarFormChangeTemplate)="onCedarFormChangeTemplate()"
+            (cedarFormEdit)="onCedarFormEdit()"
+          >
+            <div class="w-full flex flex-column gap-4 flex-1 -mt-4">
+              <osf-file-metadata class="metadata"></osf-file-metadata>
+              <osf-file-resource-metadata class="metadata" [resourceType]="resourceType"></osf-file-resource-metadata>
+            </div>
+          </osf-metadata-tabs>
+        </div>
       }
     </div>
   </div>

src/app/features/files/pages/file-detail/file-detail.component.ts

@@ -4,18 +4,41 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Menu } from 'primeng/menu';
+import { TableModule } from 'primeng/table';
 import { Tab, TabList, Tabs } from 'primeng/tabs';
 
 import { switchMap } from 'rxjs';
 
-import { ChangeDetectionStrategy, Component, DestroyRef, HostBinding, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  HostBinding,
+  inject,
+  signal,
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
-import { LoadingSpinnerComponent, SubHeaderComponent } from '@osf/shared/components';
-import { OsfFile } from '@shared/models';
-import { CustomConfirmationService, ToastService } from '@shared/services';
+import {
+  CedarMetadataDataTemplateJsonApi,
+  CedarMetadataRecordData,
+  CedarRecordDataBinding,
+} from '@osf/features/metadata/models';
+import {
+  CreateCedarMetadataRecord,
+  GetCedarMetadataRecords,
+  GetCedarMetadataTemplates,
+  MetadataSelectors,
+  UpdateCedarMetadataRecord,
+} from '@osf/features/metadata/store';
+import { LoadingSpinnerComponent, MetadataTabsComponent, SubHeaderComponent } from '@osf/shared/components';
+import { MetadataResourceEnum, ResourceType } from '@osf/shared/enums';
+import { MetadataTabsModel, OsfFile } from '@osf/shared/models';
+import { CustomConfirmationService, ToastService } from '@osf/shared/services';
 
 import {
   FileKeywordsComponent,
@@ -51,6 +74,8 @@ import {
     FileRevisionsComponent,
     FileMetadataComponent,
     FileResourceMetadataComponent,
+    MetadataTabsComponent,
+    TableModule,
   ],
   templateUrl: './file-detail.component.html',
   styleUrl: './file-detail.component.scss',
@@ -74,19 +99,27 @@ export class FileDetailComponent {
     getFileResourceMetadata: GetFileResourceMetadata,
     getFileResourceContributors: GetFileResourceContributors,
     deleteEntry: DeleteEntry,
+
+    getCedarRecords: GetCedarMetadataRecords,
+    getCedarTemplates: GetCedarMetadataTemplates,
+    createCedarRecord: CreateCedarMetadataRecord,
+    updateCedarRecord: UpdateCedarMetadataRecord,
   });
 
   file = select(FilesSelectors.getOpenedFile);
   isFileLoading = select(FilesSelectors.isOpenedFileLoading);
+  cedarRecords = select(MetadataSelectors.getCedarRecords);
+  cedarTemplates = select(MetadataSelectors.getCedarTemplates);
+
   safeLink: SafeResourceUrl | null = null;
   resourceId = '';
   resourceType = '';
 
   isIframeLoading = true;
 
-  protected readonly FileDetailTab = FileDetailTab;
+  readonly FileDetailTab = FileDetailTab;
 
-  protected selectedTab: FileDetailTab = FileDetailTab.Details;
+  selectedTab: FileDetailTab = FileDetailTab.Details;
 
   fileGuid = '';
 
@@ -116,6 +149,18 @@ export class FileDetailComponent {
     },
   ];
 
+  tabs = signal<MetadataTabsModel[]>([]);
+
+  isLoading = computed(() => {
+    return this.isFileLoading();
+  });
+
+  selectedMetadataTab = signal('osf');
+
+  selectedCedarRecord = signal<CedarMetadataRecordData | null>(null);
+  selectedCedarTemplate = signal<CedarMetadataDataTemplateJsonApi | null>(null);
+  cedarFormReadonly = signal<boolean>(true);
+
   constructor() {
     this.route.params
       .pipe(
@@ -136,14 +181,31 @@ export class FileDetailComponent {
         if (this.resourceId && this.resourceType) {
           this.actions.getFileResourceMetadata(this.resourceId, this.resourceType);
           this.actions.getFileResourceContributors(this.resourceId, this.resourceType);
-
           if (fileId) {
             const fileProvider = this.file()?.provider || '';
             this.actions.getFileRevisions(this.resourceId, fileProvider, fileId);
+            this.actions.getCedarTemplates();
+            this.actions.getCedarRecords(fileId, ResourceType.File);
           }
         }
       });
 
+    effect(() => {
+      const records = this.cedarRecords();
+
+      const baseTabs = [{ id: 'osf', label: 'OSF', type: MetadataResourceEnum.PROJECT }];
+
+      const cedarTabs =
+        records?.map((record) => ({
+          id: record.id || '',
+          label: record.embeds?.template?.data?.attributes?.schema_name || `Record ${record.id}`,
+          type: MetadataResourceEnum.CEDAR,
+        })) || [];
+
+      this.tabs.set([...baseTabs, ...cedarTabs]);
+      // this.handleRouteBasedTabSelection();
+    });
+
     this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
       this.actions.getFileMetadata(params['fileGuid']);
     });
@@ -189,28 +251,100 @@ export class FileDetailComponent {
     this.selectedTab = index;
   }
 
-  protected handleEmailShare(): void {
+  handleEmailShare(): void {
     const link = `mailto:?subject=${this.file()?.name ?? ''}&body=${this.file()?.links?.html ?? ''}`;
     window.location.href = link;
   }
 
-  protected handleXShare(): void {
+  handleXShare(): void {
     const link = `https://x.com/intent/tweet?url=${this.file()?.links?.html ?? ''}&text=${this.file()?.name ?? ''}&via=OSFramework`;
     window.open(link, '_blank', 'noopener,noreferrer');
   }
 
-  protected handleFacebookShare(): void {
+  handleFacebookShare(): void {
     const link = `https://www.facebook.com/dialog/share?app_id=1022273774556662&display=popup&href=${this.file()?.links?.html ?? ''}&redirect_uri=${this.file()?.links?.html ?? ''}`;
     window.open(link, '_blank', 'noopener,noreferrer');
   }
 
-  protected handleCopyDynamicEmbed(): void {
+  handleCopyDynamicEmbed(): void {
     const data = embedDynamicJs.replace('ENCODED_URL', this.file()?.links?.render ?? '');
     this.copyToClipboard(data);
   }
 
-  protected handleCopyStaticEmbed(): void {
+  handleCopyStaticEmbed(): void {
     const data = embedStaticHtml.replace('ENCODED_URL', this.file()?.links?.render ?? '');
     this.copyToClipboard(data);
   }
+
+  onMetadataTabChange(tabId: string | number): void {
+    const tab = this.tabs().find((x) => x.id === tabId.toString());
+
+    if (!tab) {
+      return;
+    }
+
+    this.selectedMetadataTab.set(tab.id as MetadataResourceEnum);
+    if (tab.type === 'cedar') {
+      this.selectedCedarRecord.set(null);
+      this.selectedCedarTemplate.set(null);
+      if (tab.id) {
+        this.loadCedarRecord(tab.id);
+      }
+    } else {
+      this.selectedCedarRecord.set(null);
+      this.selectedCedarTemplate.set(null);
+    }
+  }
+
+  onCedarFormEdit(): void {
+    this.cedarFormReadonly.set(false);
+  }
+
+  onCedarFormSubmit(data: CedarRecordDataBinding): void {
+    // const selectedRecord = this.selectedCedarRecord();
+    // if (!this.resourceId || !selectedRecord) return;
+    // if (selectedRecord.id) {
+    //   this.actions
+    //     .updateCedarRecord(data, selectedRecord.id, this.resourceId, this.resourceType())
+    //     .pipe(takeUntilDestroyed(this.destroyRef))
+    //     .subscribe({
+    //       next: () => {
+    //         this.cedarFormReadonly.set(true);
+    //         this.toastService.showSuccess('CEDAR record updated successfully');
+    //         this.actions.getCedarRecords(this.resourceId, this.resourceType());
+    //       },
+    //     });
+    // }
+  }
+
+  onCedarFormChangeTemplate(): void {
+    // this.router.navigate(['add'], { relativeTo: this.activeRoute });
+  }
+
+  private loadCedarRecord(recordId: string): void {
+    const records = this.cedarRecords();
+    const templates = this.cedarTemplates();
+    if (!records) {
+      return;
+    }
+    const record = records.find((r) => r.id === recordId);
+    if (!record) {
+      return;
+    }
+    this.selectedCedarRecord.set(record);
+    this.cedarFormReadonly.set(true);
+    const templateId = record.relationships?.template?.data?.id;
+    if (templateId && templates?.data) {
+      const template = templates.data.find((t) => t.id === templateId);
+      if (template) {
+        this.selectedCedarTemplate.set(template);
+      } else {
+        this.selectedCedarTemplate.set(null);
+        this.actions.getCedarTemplates();
+      }
+    } else {
+      this.selectedCedarTemplate.set(null);
+      this.actions.getCedarTemplates();
+    }
+  }
 }