fix(view-only-links): update view only links for components

Author: nsemets

src/app/features/project/contributors/components/component-checkbox-item/component-checkbox-item.component.html

@@ -0,0 +1,22 @@
+<div class="flex gap-1" [class.disabled]="item().disabled">
+  <p-checkbox
+    variant="filled"
+    binary="true"
+    [(ngModel)]="item().checked"
+    [disabled]="item().disabled"
+    (onChange)="onCheckboxChange()"
+  ></p-checkbox>
+
+  <p class="item-title">
+    {{ item().title }}
+    @if (item().isCurrentResource) {
+      <span>
+        {{ 'myProjects.settings.viewOnlyLinkCurrentProject' | translate }}
+      </span>
+    }
+  </p>
+
+  @if (item().disabled && !item().isCurrentResource) {
+    <osf-info-icon [tooltipText]="'myProjects.settings.parentsNeedToBeChecked' | translate"></osf-info-icon>
+  }
+</div>

src/app/features/project/contributors/components/component-checkbox-item/component-checkbox-item.component.scss

@@ -0,0 +1,3 @@
+.disabled .item-title {
+  opacity: 0.5;
+}

src/app/features/project/contributors/components/component-checkbox-item/component-checkbox-item.component.spec.ts

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

src/app/features/project/contributors/components/component-checkbox-item/component-checkbox-item.component.ts

@@ -0,0 +1,26 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Checkbox } from 'primeng/checkbox';
+
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { InfoIconComponent } from '@osf/shared/components';
+
+import { ViewOnlyLinkComponentItem } from '../../models';
+
+@Component({
+  selector: 'osf-component-checkbox-item',
+  imports: [Checkbox, FormsModule, InfoIconComponent, TranslatePipe],
+  templateUrl: './component-checkbox-item.component.html',
+  styleUrl: './component-checkbox-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComponentCheckboxItemComponent {
+  item = input.required<ViewOnlyLinkComponentItem>();
+  checkboxChange = output<void>();
+
+  onCheckboxChange(): void {
+    this.checkboxChange.emit();
+  }
+}

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.html

@@ -33,42 +33,8 @@
     <osf-loading-spinner />
   } @else {
     <div class="flex flex-column gap-2">
-      @for (item of allComponents; track item.id) {
-        <div class="flex gap-1">
-          <p-checkbox
-            variant="filled"
-            binary="true"
-            [class.pl-4]="!item.isCurrentResource"
-            [ngModel]="selectedComponents()[item.id]"
-            (ngModelChange)="onCheckboxToggle(item.id, $event)"
-            [disabled]="item.isCurrentResource"
-          >
-          </p-checkbox>
-          <p>
-            {{ item.title }}
-            @if (item.isCurrentResource) {
-              <span>
-                {{ 'myProjects.settings.viewOnlyLinkCurrentProject' | translate }}
-              </span>
-            }
-          </p>
-        </div>
-      }
-      @if (allComponents.length > 1) {
-        <div class="flex gap-2 justify-content-end">
-          <p-button
-            severity="secondary"
-            size="small"
-            [label]="'myProjects.createProject.affiliation.selectAll' | translate"
-            (click)="selectAllComponents()"
-          />
-          <p-button
-            severity="secondary"
-            size="small"
-            [label]="'myProjects.createProject.affiliation.removeAll' | translate"
-            (click)="deselectAllComponents()"
-          />
-        </div>
+      @for (item of componentsList(); track item.id) {
+        <osf-component-checkbox-item [item]="item" (checkboxChange)="onCheckboxChange()" />
       }
     </div>
   }

src/app/features/project/contributors/components/create-view-link-dialog/create-view-link-dialog.component.ts

@@ -6,16 +6,16 @@ import { Button } from 'primeng/button';
 import { Checkbox } from 'primeng/checkbox';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
-import { ChangeDetectionStrategy, Component, effect, inject, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, OnInit, signal, WritableSignal } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { LoadingSpinnerComponent, TextInputComponent } from '@osf/shared/components';
 import { InputLimits } from '@osf/shared/constants';
 import { CustomValidators } from '@osf/shared/helpers';
-import { CurrentResourceSelectors, GetResourceChildren } from '@osf/shared/stores';
-import { ViewOnlyLinkChildren } from '@shared/models';
+import { CurrentResourceSelectors, GetResourceWithChildren } from '@osf/shared/stores';
 
-import { ResourceInfoModel } from '../../models';
+import { ResourceInfoModel, ViewOnlyLinkComponentItem } from '../../models';
+import { ComponentCheckboxItemComponent } from '../component-checkbox-item/component-checkbox-item.component';
 
 @Component({
   selector: 'osf-create-view-link-dialog',
@@ -27,6 +27,7 @@ import { ResourceInfoModel } from '../../models';
     Checkbox,
     TextInputComponent,
     LoadingSpinnerComponent,
+    ComponentCheckboxItemComponent,
   ],
   templateUrl: './create-view-link-dialog.component.html',
   styleUrl: './create-view-link-dialog.component.scss',
@@ -38,122 +39,103 @@ export class CreateViewLinkDialogComponent implements OnInit {
   readonly inputLimits = InputLimits;
 
   linkName = new FormControl('', { nonNullable: true, validators: [CustomValidators.requiredTrimmed()] });
-
   anonymous = signal(true);
-  selectedComponents = signal<Record<string, boolean>>({});
-  components = select(CurrentResourceSelectors.getResourceChildren);
-  isLoading = select(CurrentResourceSelectors.isResourceChildrenLoading);
-
-  actions = createDispatchMap({ getComponents: GetResourceChildren });
-
-  get currentResource() {
-    return this.config.data as ResourceInfoModel;
-  }
-
-  get allComponents(): ViewOnlyLinkChildren[] {
-    const currentResourceData = this.currentResource;
-    const components = this.components();
-
-    const result: ViewOnlyLinkChildren[] = [];
-
-    if (currentResourceData) {
-      result.push({
-        id: currentResourceData.id,
-        title: currentResourceData.title,
-        isCurrentResource: true,
-      });
-    }
 
-    components.forEach((comp) => {
-      result.push({
-        id: comp.id,
-        title: comp.title,
-        isCurrentResource: false,
-      });
-    });
+  readonly components = select(CurrentResourceSelectors.getResourceWithChildren);
+  readonly isLoading = select(CurrentResourceSelectors.isResourceWithChildrenLoading);
+  readonly actions = createDispatchMap({ getComponents: GetResourceWithChildren });
 
-    return result;
-  }
+  componentsList: WritableSignal<ViewOnlyLinkComponentItem[]> = signal([]);
 
   constructor() {
     effect(() => {
-      const components = this.allComponents;
-      if (components.length) {
-        this.initializeSelection();
-      }
+      const currentResource = this.config.data as ResourceInfoModel;
+      const components = this.components();
+
+      const items: ViewOnlyLinkComponentItem[] = components.map((item) => ({
+        id: item.id,
+        title: item.title,
+        isCurrentResource: currentResource.id === item.id,
+        parentId: item.parentId,
+        checked: currentResource.id === item.id,
+        disabled: currentResource.id === item.id,
+      }));
+
+      const updatedItems = items.map((item) => ({
+        ...item,
+        disabled: item.isCurrentResource ? item.disabled : !this.isParentChecked(item, items),
+      }));
+
+      this.componentsList.set(updatedItems);
     });
   }
 
   ngOnInit(): void {
-    const projectId = this.currentResource.id;
+    const currentResource = this.config.data as ResourceInfoModel;
+    const { id, type } = currentResource;
 
-    if (projectId) {
-      this.actions.getComponents(projectId, this.currentResource.type);
-    } else {
-      this.initializeSelection();
+    if (id) {
+      this.actions.getComponents(id, type);
     }
   }
 
-  private initializeSelection(): void {
-    const initialState: Record<string, boolean> = {};
-
-    this.allComponents.forEach((component) => {
-      initialState[component.id] = component.isCurrentResource;
-    });
-
-    this.selectedComponents.set(initialState);
+  onCheckboxChange(): void {
+    this.componentsList.update((items) =>
+      items.map((item) => ({
+        ...item,
+        disabled: item.isCurrentResource ? item.disabled : !this.isParentChecked(item, items),
+      }))
+    );
   }
 
   addLink(): void {
     if (this.linkName.invalid) return;
 
-    const selectedIds = Object.entries(this.selectedComponents())
-      .filter(([, checked]) => checked)
-      .map(([id]) => id);
+    const currentResource = this.config.data as ResourceInfoModel;
+    const selectedIds = this.componentsList()
+      .filter((x) => x.checked)
+      .map((x) => x.id);
 
-    const rootProjectId = this.currentResource.id;
-    const rootProject = selectedIds.includes(rootProjectId) ? [{ id: rootProjectId, type: 'nodes' }] : [];
+    const data = this.buildLinkData(selectedIds, currentResource.id, this.linkName.value, this.anonymous());
+
+    this.dialogRef.close(data);
+  }
+
+  private isParentChecked(item: ViewOnlyLinkComponentItem, items: ViewOnlyLinkComponentItem[]): boolean {
+    if (!item.parentId) {
+      return true;
+    }
+
+    const parent = items.find((x) => x.id === item.parentId);
 
+    return parent?.checked ?? true;
+  }
+
+  private buildLinkData(
+    selectedIds: string[],
+    rootProjectId: string,
+    linkName: string,
+    isAnonymous: boolean
+  ): Record<string, unknown> {
+    const rootProject = selectedIds.includes(rootProjectId) ? [{ id: rootProjectId, type: 'nodes' }] : [];
     const relationshipComponents = selectedIds
       .filter((id) => id !== rootProjectId)
       .map((id) => ({ id, type: 'nodes' }));
 
     const data: Record<string, unknown> = {
       attributes: {
-        name: this.linkName.value,
-        anonymous: this.anonymous(),
+        name: linkName,
+        anonymous: isAnonymous,
       },
       nodes: rootProject,
     };
 
     if (relationshipComponents.length) {
       data['relationships'] = {
-        nodes: {
-          data: relationshipComponents,
-        },
+        nodes: { data: relationshipComponents },
       };
     }
 
-    this.dialogRef.close(data);
-  }
-
-  onCheckboxToggle(id: string, checked: boolean): void {
-    this.selectedComponents.update((prev) => ({ ...prev, [id]: checked }));
-  }
-
-  selectAllComponents(): void {
-    const allIds: Record<string, boolean> = {};
-    this.allComponents.forEach((component) => {
-      allIds[component.id] = true;
-    });
-    this.selectedComponents.set(allIds);
-  }
-
-  deselectAllComponents(): void {
-    const allIds: Record<string, boolean> = {};
-    this.allComponents.forEach((component) => {
-      allIds[component.id] = component.isCurrentResource;
-    });
-    this.selectedComponents.set(allIds);
+    return data;
   }
 }

src/app/features/project/contributors/components/index.ts

@@ -1 +1,2 @@
+export { ComponentCheckboxItemComponent } from './component-checkbox-item/component-checkbox-item.component';
 export { CreateViewLinkDialogComponent } from './create-view-link-dialog/create-view-link-dialog.component';

src/app/features/project/contributors/models/index.ts

@@ -1 +1,2 @@
 export * from './resource-info.model';
+export * from './view-only-components.models';

src/app/features/project/contributors/models/view-only-components.models.ts

@@ -0,0 +1,8 @@
+export interface ViewOnlyLinkComponentItem {
+  id: string;
+  title: string;
+  isCurrentResource?: boolean;
+  disabled: boolean;
+  checked: boolean;
+  parentId?: string | null;
+}

src/app/shared/mappers/nodes/base-node.mapper.ts

@@ -1,10 +1,18 @@
-import { BaseNodeDataJsonApi, BaseNodeModel } from '@osf/shared/models';
+import { BaseNodeDataJsonApi, BaseNodeModel, NodeShortInfoModel } from '@osf/shared/models';
 
 export class BaseNodeMapper {
   static getNodesData(data: BaseNodeDataJsonApi[]): BaseNodeModel[] {
     return data.map((item) => this.getNodeData(item));
   }
 
+  static getNodesWithChildren(data: BaseNodeDataJsonApi[]): NodeShortInfoModel[] {
+    return data.map((item) => ({
+      id: item.id,
+      title: item.attributes.title,
+      parentId: item.relationships.parent?.data?.id,
+    }));
+  }
+
   static getNodeData(data: BaseNodeDataJsonApi): BaseNodeModel {
     return {
       id: data.id,