Feat/502 add community metadata (#303)

* feat(metadata): refactoring metadata

* feat(metadata): refactoring metadata

* feat(metadata): remove duplicates constants

* feat(metadata): remove duplicates constants

* feat(metadata): resolve conflicts

* feat(metadata): fixed tests

* feat(metadata): refactoring metadata

* feat(metadata): bug fixing, refactoring

* feat(metadata): refactoring metadata

* feat(metadata): refactoring, doi section,institutions

* feat(metadata): add tooltip to resource section

* feat(metadata): cedar metadata

* feat(metadata): add metadata to file detail page

* feat(metadata): update metadata for file

* feat(metadata): update metadata for file

* Update src/app/shared/components/shared-metadata/dialogs/resource-tooltip-info/resource-tooltip-info.component.html

Co-authored-by: nsemets <nsemets@exoft.net>

* Update src/app/shared/components/shared-metadata/dialogs/resource-tooltip-info/resource-tooltip-info.component.html

Co-authored-by: nsemets <nsemets@exoft.net>

* feat(metadata): pr comments

* feat(metadata): fixed tests

---------

Co-authored-by: nsemets <nsemets@exoft.net>

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"
             ],

jest.config.js

@@ -101,9 +101,6 @@ module.exports = {
     '<rootDir>/src/app/shared/components/pie-chart/',
     '<rootDir>/src/app/shared/components/resource-citations/',
     '<rootDir>/src/app/shared/components/reusable-filter/',
-    '<rootDir>/src/app/shared/components/shared-metadata/dialogs/affiliated-institutions-dialog/',
-    '<rootDir>/src/app/shared/components/shared-metadata/dialogs/contributors-dialog/',
-    '<rootDir>/src/app/shared/components/shared-metadata/shared-metadata',
     '<rootDir>/src/app/shared/components/subjects/',
     '<rootDir>/src/app/shared/components/wiki/edit-section/',
     '<rootDir>/src/app/shared/components/wiki/wiki-list/',

package-lock.json

@@ -46,6 +46,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

@@ -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/app.routes.ts

@@ -2,7 +2,7 @@ import { ProviderState } from '@core/store/provider';
 import { UserState } from '@core/store/user';
 import { UserEmailsState } from '@core/store/user-emails';
 import { FilesState } from '@osf/features/files/store';
-import { ProjectMetadataState } from '@osf/features/project/metadata/store';
+import { MetadataState } from '@osf/features/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';
@@ -21,9 +21,9 @@ export const STATES = [
   ProjectOverviewState,
   WikiState,
   RegistrationsState,
-  ProjectMetadataState,
   LicensesState,
   RegionsState,
   FilesState,
+  MetadataState,
   CurrentResourceState,
 ];

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

@@ -0,0 +1,56 @@
+import { Store } from '@ngxs/store';
+
+import { map, switchMap } from 'rxjs/operators';
+
+import { inject } from '@angular/core';
+import { CanMatchFn, Route, Router, 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 router = inject(Router);
+
+  const id = segments[0]?.path;
+  const isMetadataPath = segments[1]?.path === 'metadata';
+  if (!id) {
+    return false;
+  }
+
+  const currentResource = store.selectSnapshot(CurrentResourceSelectors.getCurrentResource);
+
+  if (currentResource && currentResource.id === id) {
+    if (currentResource.type === CurrentResourceType.Files) {
+      if (isMetadataPath) {
+        return true;
+      }
+      if (currentResource.parentId) {
+        router.navigate(['/', currentResource.parentId, 'files', id]);
+        return false;
+      }
+    }
+
+    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) {
+        if (isMetadataPath) {
+          return true;
+        }
+        if (resource.parentId) {
+          router.navigate(['/', resource.parentId, 'files', id]);
+          return false;
+        }
+      }
+      return resource.type === CurrentResourceType.Files;
+    })
+  );
+};

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

@@ -8,7 +8,7 @@ import { Select } from 'primeng/select';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
-import { resourceLanguages, resourceTypes } from '@osf/shared/constants';
+import { languageCodes, resourceTypes } from '@osf/shared/constants';
 
 import { PatchFileMetadata } from '../../models';
 
@@ -21,7 +21,7 @@ import { PatchFileMetadata } from '../../models';
 })
 export class EditFileMetadataDialogComponent {
   protected readonly resourceTypes = resourceTypes;
-  protected readonly languages = resourceLanguages;
+  protected readonly languages = languageCodes;
 
   private readonly dialogRef = inject(DynamicDialogRef);
 

src/app/features/files/components/edit-file-metadata-dialog/edit-file-metadata-dialog.component.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/files.routes.ts

@@ -22,7 +22,7 @@
         <p-button
           severity="secondary"
           [label]="'files.detail.actions.addCommunityMetadata' | translate"
-          [routerLink]="['/metadata']"
+          [routerLink]="['/', fileGuid, 'metadata', 'add']"
         ></p-button>
       }
 
@@ -92,8 +92,24 @@
       } @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)"
+            (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>