[ANG-1100] Fix VOL for components (#669)

* fix(components): fixed vol for components

* fix(parent): fixed parent vol

Author: nsemets

src/app/features/project/overview/components/overview-components/overview-components.component.html

@@ -26,7 +26,7 @@ <h2 class="flex align-items-center gap-2">
                 </a>
               </h2>
 
-              @if (isCurrentUserContributor(component)) {
+              @if (component.currentUserIsContributor) {
                 <div>
                   <p-button
                     severity="contrast"
@@ -59,7 +59,7 @@ <h2 class="flex align-items-center gap-2">
 
               <osf-contributors-list
                 [contributors]="component.contributors"
-                [anonymous]="hasViewOnly() && anonymous()"
+                [anonymous]="anonymous()"
               ></osf-contributors-list>
             </div>
 

src/app/features/project/overview/components/overview-components/overview-components.component.ts

@@ -6,13 +6,11 @@ import { Button } from 'primeng/button';
 import { Menu } from 'primeng/menu';
 import { Skeleton } from 'primeng/skeleton';
 
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { UserSelectors } from '@core/store/user';
 import { ContributorsListComponent, IconComponent, TruncatedTextComponent } from '@osf/shared/components';
 import { ResourceType, UserPermissions } from '@osf/shared/enums';
-import { hasViewOnlyParam } from '@osf/shared/helpers';
 import { CustomDialogService, LoaderService } from '@osf/shared/services';
 import { GetResourceWithChildren } from '@osf/shared/stores';
 import { ComponentOverview } from '@shared/models';
@@ -36,16 +34,13 @@ export class OverviewComponentsComponent {
   canEdit = input.required<boolean>();
   anonymous = input<boolean>(false);
 
-  currentUser = select(UserSelectors.getCurrentUser);
-  currentUserId = computed(() => this.currentUser()?.id);
   components = select(ProjectOverviewSelectors.getComponents);
   isComponentsLoading = select(ProjectOverviewSelectors.getComponentsLoading);
   project = select(ProjectOverviewSelectors.getProject);
-  hasViewOnly = computed(() => hasViewOnlyParam(this.router));
 
-  actions = createDispatchMap({
-    getComponentsTree: GetResourceWithChildren,
-  });
+  actions = createDispatchMap({ getComponentsTree: GetResourceWithChildren });
+
+  readonly UserPermissions = UserPermissions;
 
   readonly componentActionItems = (component: ComponentOverview) => {
     const baseItems = [
@@ -71,14 +66,6 @@ export class OverviewComponentsComponent {
 
     return baseItems;
   };
-  readonly UserPermissions = UserPermissions;
-
-  get isCurrentUserContributor() {
-    return (component: ComponentOverview) => {
-      const userId = this.currentUserId();
-      return userId ? component.contributors.some((contributor) => contributor.userId === userId) : false;
-    };
-  }
 
   handleMenuAction(action: string, componentId: string): void {
     switch (action) {

src/app/features/project/overview/components/overview-parent-project/overview-parent-project.component.html

@@ -11,9 +11,10 @@ <h2>{{ 'project.overview.parentProject' | translate }}</h2>
         <div class="flex justify-content-between align-items-center">
           <h2 class="flex align-items-center gap-2">
             <osf-icon [iconClass]="project().isPublic ? 'fas fa-lock-open' : 'fas fa-lock'"></osf-icon>
-            <a class="node-title" [href]="project().id">{{ project().title }}</a>
+            <a class="node-title cursor-pointer" (click)="navigateToParent()">{{ project().title }}</a>
           </h2>
-          @if (isCurrentUserContributor()) {
+
+          @if (project().currentUserIsContributor) {
             <div>
               <p-button
                 severity="contrast"
@@ -42,10 +43,16 @@ <h2 class="flex align-items-center gap-2">
         </div>
 
         <div class="node-name flex flex-wrap gap-2">
-          <osf-contributors-list [contributors]="project().contributors"></osf-contributors-list>
+          <p class="font-bold">{{ 'common.labels.contributors' | translate }}:</p>
+
+          <osf-contributors-list
+            [contributors]="project().contributors"
+            [anonymous]="anonymous()"
+          ></osf-contributors-list>
         </div>
+
         @if (project().description) {
-          <osf-truncated-text [text]="project().description" />
+          <osf-truncated-text [text]="('resourceCard.labels.descriptionBold' | translate) + project().description" />
         }
       </div>
     }

src/app/features/project/overview/components/overview-parent-project/overview-parent-project.component.ts

@@ -22,10 +22,12 @@ import { ProjectOverview } from '../../models';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OverviewParentProjectComponent {
-  isLoading = input<boolean>(false);
   project = input.required<ProjectOverview>();
+  anonymous = input<boolean>(false);
+  isLoading = input<boolean>(false);
+
+  router = inject(Router);
 
-  private router = inject(Router);
   currentUser = select(UserSelectors.getCurrentUser);
 
   menuItems = [
@@ -39,18 +41,21 @@ export class OverviewParentProjectComponent {
     },
   ];
 
-  get isCurrentUserContributor() {
-    return () => {
-      const userId = this.currentUser()?.id;
-      return userId ? this.project()?.contributors.some((contributor) => contributor.userId === userId) : false;
-    };
+  navigateToParent(): void {
+    const url = this.router.serializeUrl(
+      this.router.createUrlTree(['/', this.project().id], { queryParamsHandling: 'preserve' })
+    );
+
+    window.open(url, '_self');
   }
 
   handleMenuAction(action: string): void {
     const projectId = this.project()?.id;
+
     if (!projectId) {
       return;
     }
+
     switch (action) {
       case 'manageContributors':
         this.router.navigate([projectId, 'contributors']);

src/app/features/project/overview/project-overview.component.html

@@ -21,7 +21,7 @@
     />
   </div>
 
-  <div class="flex flex-wrap gap-4 bg-white h-full p-3 flex-column-reverse sm:p-4 lg:flex-row">
+  <div class="flex flex-wrap gap-4 bg-white h-full p-3 flex-column sm:p-4 lg:flex-row">
     @if (isCollectionsRoute()) {
       <p-button
         link
@@ -46,7 +46,7 @@
       <osf-view-only-link-message />
     }
 
-    <div class="flex flex-column gap-4 left-section">
+    <div class="flex flex-column gap-4 left-section flex-order-2 lg:flex-order-1">
       @if (isWikiEnabled()) {
         <osf-overview-wiki [resourceId]="currentProject()!.id" />
       }
@@ -56,8 +56,13 @@
         [components]="components()"
         [areComponentsLoading]="areComponentsLoading()"
       />
+
       @if (parentProject()) {
-        <osf-overview-parent-project [project]="parentProject()!" [isLoading]="isParentProjectLoading()" />
+        <osf-overview-parent-project
+          [project]="parentProject()!"
+          [isLoading]="isParentProjectLoading()"
+          [anonymous]="isAnonymous()"
+        />
       }
 
       <osf-project-components [canEdit]="hasWriteAccess() && !isCollectionsRoute()" [anonymous]="isAnonymous()" />
@@ -75,7 +80,7 @@
       <osf-recent-activity-list [pageSize]="activityPageSize" />
     </div>
 
-    <div class="flex flex-column right-section p-4">
+    <div class="flex flex-column right-section p-4 flex-order-1 lg:flex-order-2">
       <osf-resource-metadata
         [currentResource]="resourceOverview()"
         (customCitationUpdated)="onCustomCitationUpdated($event)"

src/app/features/project/overview/project-overview.component.ts

@@ -404,7 +404,8 @@ export class ProjectOverviewComponent implements OnInit {
   private setupAddonsEffects(): void {
     effect(() => {
       const currentProject = this.currentProject();
-      if (currentProject && !this.addonsResourceReference().length) {
+
+      if (currentProject) {
         this.actions.getAddonsResourceReference(currentProject.id);
       }
     });

src/app/shared/mappers/components/components.mapper.ts

@@ -10,6 +10,7 @@ export class ComponentsMapper {
       title: response.attributes.title,
       description: response.attributes.description,
       public: response.attributes.public,
+      currentUserIsContributor: response.attributes.current_user_is_contributor,
       contributors: ContributorsMapper.getContributors(response?.embeds?.bibliographic_contributors?.data),
       currentUserPermissions: response.attributes?.current_user_permissions || [],
       parentId: response.relationships.parent?.data?.id,

src/app/shared/models/components/components.models.ts

@@ -9,6 +9,7 @@ export interface ComponentOverview {
   description: string;
   public: boolean;
   contributors: ContributorModel[];
+  currentUserIsContributor: boolean;
   currentUserPermissions: UserPermissions[];
   parentId?: string;
 }