Fix/improvements (#319)

* fix(meetings): fixed meetings small issues * fix(tooltips): added tooltips * fix(table): updated sorting * fix(settings): fixed update project * fix(bookmarks): updated bookmarks * fix(my-registrations): fixed my registrations * fix(developer-apps): fixed developer apps * fix(settings): updated tokens and notifications * fix(translation): removed dot * fix(info-icon): updated info icon translate * fix(profile-settings): fixed profile settings * fix(test): updated tests * fix(settings): updated settings * fix(user-emails): updated adding emails to user account * fix(tests): updated tests * fix(clean-up): clean up * fix(models): updated models * fix(models): updated region and license models * fix(styles): moved styles from assets * fix(test): fixed institution loading and test for view only link * fix(analytics): added check if is public * fix(analytics): updated analytics feature * fix(analytics): show message when data loaded * fix(view-only-links): updated view only links * fix(view only links): added shared components * fix(tests): fixed tests * fix(unit-tests): updated jest config * fix(view-only-links): update view only links for components * fix(create-view-link): added logic for uncheck --------- Co-authored-by: Nazar Semets <nazar690@gmail.com>

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(item)" />
  }
  </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,126 @@ 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[] = [];
+ readonly components = select(CurrentResourceSelectors.getResourceWithChildren);
+ readonly isLoading = select(CurrentResourceSelectors.isResourceWithChildrenLoading);
+ readonly actions = createDispatchMap({ getComponents: GetResourceWithChildren });
 
- 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,
- });
- });
-
- 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> = {};
+ onCheckboxChange(changedItem: ViewOnlyLinkComponentItem): void {
+ this.componentsList.update((items) => {
+ let updatedItems = [...items];
 
- this.allComponents.forEach((component) => {
- initialState[component.id] = component.isCurrentResource;
- });
+  if (!changedItem.checked) {
+  updatedItems = this.uncheckChildren(changedItem.id, updatedItems);
+  }
 
- this.selectedComponents.set(initialState);
+ return updatedItems.map((item) => ({
+ ...item,
+ disabled: item.isCurrentResource ? item.disabled : !this.isParentChecked(item, updatedItems),
+ }));
+ });
  }
 
  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 uncheckChildren(parentId: string, items: ViewOnlyLinkComponentItem[]): ViewOnlyLinkComponentItem[] {
+ let updatedItems = items.map((item) => {
+ if (item.parentId === parentId) {
+ return { ...item, checked: false };
+ }
+ return item;
+ });
+
+ const directChildren = updatedItems.filter((item) => item.parentId === parentId);
+
+ for (const child of directChildren) {
+ updatedItems = this.uncheckChildren(child.id, updatedItems);
+ }
+
+ return updatedItems;
+ }
+
+ 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,