feat(metadata): cedar metadata

Author: nmykhalkevch-exoft

angular.json

@@ -27,6 +27,7 @@
             "allowedCommonJsDependencies": [
               "qrcode",
               "cedar-embeddable-editor",
+              "cedar-artifact-viewer",
               "markdown-it-video",
               "ace-builds/src-noconflict/ext-language_tools"
             ],

package-lock.json

@@ -45,6 +45,7 @@
     "@ngxs/store": "^19.0.0",
     "@primeng/themes": "^19.0.9",
     "ace-builds": "^1.42.0",
+    "cedar-artifact-viewer": "^0.9.5",
     "cedar-embeddable-editor": "^1.5.0",
     "chart.js": "^4.4.9",
     "diff": "^8.0.2",

package.json

@@ -15,3 +15,13 @@ export const CEDAR_CONFIG = {
   strictValidation: false,
   autoInitializeFields: true,
 };
+
+export const CEDAR_VIEWER_CONFIG = {
+  showHeader: false,
+  showFooter: false,
+  expandedSampleTemplateLinks: false,
+  showSampleTemplateLinks: false,
+  defaultLanguage: 'en',
+  showTemplateData: false,
+  showInstanceData: false,
+};

src/app/features/metadata/constants/cedar-config.const.ts

@@ -0,0 +1,33 @@
+import { CedarMetadataRecord, CedarRecordDataBinding } from '../models';
+
+export class CedarRecordsMapper {
+  static toCedarRecordsPayload(
+    data: CedarRecordDataBinding,
+    resourceId: string,
+    resourceType: string
+  ): CedarMetadataRecord {
+    return {
+      data: {
+        type: 'cedar_metadata_records',
+        attributes: {
+          metadata: data.data,
+          is_published: data.isPublished,
+        },
+        relationships: {
+          template: {
+            data: {
+              type: 'cedar-metadata-templates',
+              id: data.id,
+            },
+          },
+          target: {
+            data: {
+              type: resourceType,
+              id: resourceId,
+            },
+          },
+        },
+      },
+    };
+  }
+}

src/app/features/metadata/mappers/cedar-records.mapper.ts

@@ -1 +1,2 @@
+export * from './cedar-records.mapper';
 export * from './metadata.mapper';

src/app/features/metadata/mappers/index.ts

@@ -16,7 +16,7 @@ import {
   OnInit,
   signal,
 } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { MetadataTabsComponent, SubHeaderComponent } from '@osf/shared/components';
@@ -49,16 +49,15 @@ import {
   UpdateResourceSubjects,
 } from '@osf/shared/stores';
 
+import { CedarMetadataDataTemplateJsonApi, CedarMetadataRecordData, CedarRecordDataBinding } from './models';
 import {
-  CedarMetadataDataTemplateJsonApi,
-  CedarMetadataRecord,
-  CedarMetadataRecordData,
-  CedarRecordDataBinding,
-} from './models';
-import {
+  CreateCedarMetadataRecord,
+  GetCedarMetadataRecords,
+  GetCedarMetadataTemplates,
   GetCustomItemMetadata,
   GetResourceMetadata,
   MetadataSelectors,
+  UpdateCedarMetadataRecord,
   UpdateCustomItemMetadata,
   UpdateResourceDetails,
   UpdateResourceLicense,
@@ -131,11 +130,10 @@ export class MetadataComponent implements OnInit {
     updateResourceInstitutions: UpdateResourceInstitutions,
     fetchResourceInstitutions: FetchResourceInstitutions,
 
-    // getUserInstitutions: GetUserInstitutions,
-    // getCedarRecords: GetCedarMetadataRecords,
-    // getCedarTemplates: GetCedarMetadataTemplates,
-    // createCedarRecord: CreateCedarMetadataRecord,
-    // updateCedarRecord: UpdateCedarMetadataRecord,
+    getCedarRecords: GetCedarMetadataRecords,
+    getCedarTemplates: GetCedarMetadataTemplates,
+    createCedarRecord: CreateCedarMetadataRecord,
+    updateCedarRecord: UpdateCedarMetadataRecord,
 
     fetchSubjects: FetchSubjects,
     fetchSelectedSubjects: FetchSelectedSubjects,
@@ -214,13 +212,9 @@ export class MetadataComponent implements OnInit {
       this.actions.getCustomItemMetadata(this.resourceId);
       this.actions.getContributors(this.resourceId, this.resourceType());
       this.actions.fetchResourceInstitutions(this.resourceId, this.resourceType());
-      // this.actions.getCedarRecords(this.resourceId);
-      // this.actions.getCedarTemplates();
+      this.actions.getCedarRecords(this.resourceId, this.resourceType());
+      this.actions.getCedarTemplates();
       this.actions.fetchSelectedSubjects(this.resourceId, this.resourceType());
-      // const user = this.currentUser();
-      // if (user?.id) {
-      //   this.actions.getUserInstitutions(user.id);
-      // }
     }
   }
   onTabChange(tabId: string | number): void {
@@ -259,41 +253,17 @@ export class MetadataComponent implements OnInit {
 
     if (!this.resourceId || !selectedRecord) return;
 
-    const model = {
-      data: {
-        type: 'cedar_metadata_records' as const,
-        attributes: {
-          metadata: data.data,
-          is_published: false,
-        },
-        relationships: {
-          template: {
-            data: {
-              type: 'cedar-metadata-templates' as const,
-              id: data.id,
-            },
-          },
-          target: {
-            data: {
-              type: 'nodes' as const,
-              id: this.resourceId,
-            },
-          },
-        },
-      },
-    } as CedarMetadataRecord;
-
     if (selectedRecord.id) {
-      // this.actions
-      //   .updateCedarRecord(model, selectedRecord.id)
-      //   .pipe(takeUntilDestroyed(this.destroyRef))
-      //   .subscribe({
-      //     next: () => {
-      //       this.cedarFormReadonly.set(true);
-      //       this.toastService.showSuccess('CEDAR record updated successfully');
-      //       this.actions.getCedarRecords(projectId);
-      //     },
-      //   });
+      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());
+          },
+        });
     }
   }
 
@@ -302,7 +272,7 @@ export class MetadataComponent implements OnInit {
   }
 
   openAddRecord(): void {
-    this.router.navigate(['add'], { relativeTo: this.activeRoute });
+    this.router.navigate(['../add'], { relativeTo: this.activeRoute });
   }
 
   onTagsChanged(tags: string[]): void {
@@ -541,30 +511,31 @@ export class MetadataComponent implements OnInit {
   }
 
   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();
-    // }
+    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;
+    console.log('templateId:', templateId);
+    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();
+    }
   }
 
   private handleRouteBasedTabSelection(): void {

src/app/features/metadata/metadata.component.ts

@@ -189,6 +189,7 @@ export interface CedarMetadataRecord {
 export interface CedarRecordDataBinding {
   data: CedarMetadataAttributes;
   id: string;
+  isPublished: boolean;
 }
 
 export interface CedarMetadataRecordJsonApi {
@@ -221,7 +222,7 @@ export interface CedarMetadataRecordData {
     };
     target: {
       data: {
-        type: 'nodes' | 'registrations';
+        type: string;
         id: string;
       };
     };

src/app/features/metadata/models/cedar-metadata-template.model.ts

@@ -72,6 +72,8 @@ <h2>{{ meta.attributes.template.title }}</h2>
     </section>
   }
 } @else {
+  <p-button (click)="toggleEditMode()" class="cursor-pointer text-blue-600 underline mb-3">toggle</p-button>
+
   <osf-cedar-template-form
     (editMode)="toggleEditMode()"
     (emitData)="createRecordMetadata($event)"