Fix/742 bug

src/app/features/collections/components/add-to-collection/add-to-collection-confirmation-dialog/add-to-collection-confirmation-dialog.component.ts

@@ -39,8 +39,9 @@ export class AddToCollectionConfirmationDialogComponent {
     if (!payload || !project) return;
 
     this.isSubmitting.set(true);
+    const projectPayload = [{ id: project.id as string, public: true }];
 
-    const updatePublicStatus$ = project.isPublic ? of(null) : this.actions.updateProjectPublicStatus(project.id, true);
+    const updatePublicStatus$ = project.isPublic ? of(null) : this.actions.updateProjectPublicStatus(projectPayload);
 
     const createSubmission$ = this.actions.createCollectionSubmission(payload);
 

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

@@ -34,7 +34,11 @@
   } @else {
     <div class="flex flex-column gap-2">
       @for (item of componentsList(); track item.id) {
-        <osf-component-checkbox-item [item]="item" (checkboxChange)="onCheckboxChange(item)" />
+        <osf-component-checkbox-item
+          [item]="item"
+          [tooltipText]="'myProjects.settings.parentsNeedToBeChecked'"
+          (checkboxChange)="onCheckboxChange(item)"
+        />
       }
     </div>
   }

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

@@ -74,7 +74,7 @@ describe('Component: Create View Link Dialog', () => {
     const currentResourceItem = component.componentsList().find((item) => item.id === 'project-123');
     expect(currentResourceItem?.checked).toBe(true);
     expect(currentResourceItem?.disabled).toBe(true);
-    expect(currentResourceItem?.isCurrentResource).toBe(true);
+    expect(currentResourceItem?.isCurrent).toBe(true);
   });
 
   it('should uncheck children when parent is unchecked', () => {

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

@@ -9,13 +9,13 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 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 { ComponentCheckboxItemComponent, LoadingSpinnerComponent, TextInputComponent } from '@osf/shared/components';
 import { InputLimits } from '@osf/shared/constants';
 import { CustomValidators } from '@osf/shared/helpers';
+import { ComponentCheckboxItemModel } from '@osf/shared/models';
 import { CurrentResourceSelectors, GetResourceWithChildren } from '@osf/shared/stores';
 
 import { ResourceInfoModel, ViewOnlyLinkComponentItem } from '../../models';
-import { ComponentCheckboxItemComponent } from '../component-checkbox-item/component-checkbox-item.component';
 
 @Component({
   selector: 'osf-create-view-link-dialog',
@@ -45,25 +45,25 @@ export class CreateViewLinkDialogComponent implements OnInit {
   readonly isLoading = select(CurrentResourceSelectors.isResourceWithChildrenLoading);
   readonly actions = createDispatchMap({ getComponents: GetResourceWithChildren });
 
-  componentsList: WritableSignal<ViewOnlyLinkComponentItem[]> = signal([]);
+  componentsList: WritableSignal<ComponentCheckboxItemModel[]> = signal([]);
 
   constructor() {
     effect(() => {
       const currentResource = this.config.data as ResourceInfoModel;
       const components = this.components();
 
-      const items: ViewOnlyLinkComponentItem[] = components.map((item) => ({
+      const items: ComponentCheckboxItemModel[] = components.map((item) => ({
         id: item.id,
         title: item.title,
-        isCurrentResource: currentResource.id === item.id,
+        isCurrent: 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),
+        disabled: item.isCurrent ? item.disabled : !this.isParentChecked(item, items),
       }));
 
       this.componentsList.set(updatedItems);
@@ -89,7 +89,7 @@ export class CreateViewLinkDialogComponent implements OnInit {
 
       return updatedItems.map((item) => ({
         ...item,
-        disabled: item.isCurrentResource ? item.disabled : !this.isParentChecked(item, updatedItems),
+        disabled: item.isCurrent ? item.disabled : !this.isParentChecked(item, updatedItems),
       }));
     });
   }

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

@@ -1,2 +1 @@
-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/overview/components/overview-toolbar/overview-toolbar.component.ts

@@ -148,7 +148,6 @@ export class OverviewToolbarComponent {
     if (!resource) return;
 
     const isCurrentlyPublic = resource.isPublic;
-    const newPublicStatus = !isCurrentlyPublic;
 
     timer(100)
       .pipe(takeUntilDestroyed(this.destroyRef))
@@ -162,7 +161,6 @@ export class OverviewToolbarComponent {
       data: {
         projectId: resource.id,
         isCurrentlyPublic,
-        newPublicStatus,
       },
     });
   }

src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.html

@@ -1,23 +1,36 @@
-<div class="dialog-container">
-  <div [innerHTML]="messageKey() | translate"></div>
+<div>
+  @if (isSubmitting()) {
+    <osf-loading-spinner></osf-loading-spinner>
+  } @else {
+    @if (isInformationStep()) {
+      <div [innerHTML]="messageKey() | translate"></div>
+    } @else {
+      <div>
+        <p>{{ 'project.overview.dialog.adjustPrivacySetting' | translate }}</p>
+        <p class="mt-4">{{ 'project.overview.dialog.checkedProjects' | translate }}</p>
+        <p class="mt-3">{{ 'project.overview.dialog.uncheckedComponents' | translate }}</p>
+
+        <osf-components-selection-list
+          [components]="componentsList()"
+          [disabledTooltip]="'project.overview.dialog.privacySettingsPermissionTooltip'"
+        ></osf-components-selection-list>
+      </div>
+    }
+  }
+
   <div class="flex mt-5 gap-3 justify-content-between md:justify-content-end">
     <p-button
-      [label]="'project.overview.dialog.makePublic.cancelButton' | translate"
+      [label]="'common.buttons.cancel' | translate"
       severity="info"
       (onClick)="dialogRef.close()"
       [disabled]="isSubmitting()"
       styleClass="w-full"
       class="w-full md:w-auto"
     />
     <p-button
-      [label]="
-        isCurrentlyPublic()
-          ? ('project.overview.dialog.makePrivate.confirmButton' | translate)
-          : ('project.overview.dialog.makePublic.confirmButton' | translate)
-      "
+      [label]="(isInformationStep() ? 'common.buttons.continue' : 'common.buttons.confirm') | translate"
       (onClick)="toggleProjectPublicity()"
       [disabled]="isSubmitting()"
-      [loading]="isSubmitting()"
       styleClass="w-full"
       class="w-full md:w-auto"
     />

src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.scss

@@ -1,5 +0,0 @@
-@use "styles/mixins" as mix;
-
-.dialog-container {
-  line-height: mix.rem(24px);
-}

src/app/features/project/overview/components/toggle-publicity-dialog/toggle-publicity-dialog.component.ts

@@ -1,54 +1,102 @@
-import { select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  signal,
+  WritableSignal,
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
+import { ComponentsSelectionListComponent, LoadingSpinnerComponent } from '@osf/shared/components';
+import { UserPermissions } from '@osf/shared/enums';
+import { ComponentCheckboxItemModel } from '@osf/shared/models';
 import { ToastService } from '@osf/shared/services';
+import { CurrentResourceSelectors } from '@osf/shared/stores';
 
+import { TogglePublicityStep } from '../../enums';
+import { PrivacyStatusModel } from '../../models';
 import { ProjectOverviewSelectors, UpdateProjectPublicStatus } from '../../store';
 
 @Component({
   selector: 'osf-toggle-publicity-dialog',
-  imports: [Button, TranslatePipe],
+  imports: [Button, TranslatePipe, ComponentsSelectionListComponent, LoadingSpinnerComponent],
   templateUrl: './toggle-publicity-dialog.component.html',
   styleUrl: './toggle-publicity-dialog.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TogglePublicityDialogComponent {
-  private store = inject(Store);
   private dialogConfig = inject(DynamicDialogConfig);
   private toastService = inject(ToastService);
+  private translateService = inject(TranslateService);
 
   dialogRef = inject(DynamicDialogRef);
   destroyRef = inject(DestroyRef);
   isSubmitting = select(ProjectOverviewSelectors.getUpdatePublicStatusSubmitting);
+  components = select(CurrentResourceSelectors.getResourceWithChildren);
 
-  private newPublicStatus = signal(this.dialogConfig.data.newPublicStatus);
-  private projectId = signal(this.dialogConfig.data.projectId);
+  actions = createDispatchMap({ updateProjectPublicStatus: UpdateProjectPublicStatus });
+
+  projectId = signal(this.dialogConfig.data.projectId);
   isCurrentlyPublic = signal(this.dialogConfig.data.isCurrentlyPublic);
-  messageKey = computed(() => {
-    return this.isCurrentlyPublic()
+
+  messageKey = computed(() =>
+    this.isCurrentlyPublic()
       ? 'project.overview.dialog.makePrivate.message'
-      : 'project.overview.dialog.makePublic.message';
-  });
+      : 'project.overview.dialog.makePublic.message'
+  );
+
+  step = signal(TogglePublicityStep.Information);
+  componentsList: WritableSignal<ComponentCheckboxItemModel[]> = signal([]);
+
+  isInformationStep = computed(() => this.step() === TogglePublicityStep.Information);
+
+  constructor() {
+    effect(() => {
+      const components = this.components();
+
+      const items: ComponentCheckboxItemModel[] = components.map((item) => ({
+        id: item.id,
+        title: item.title,
+        isCurrent: this.projectId() === item.id,
+        parentId: item.parentId,
+        checked: item.isPublic,
+        disabled: !item.permissions.includes(UserPermissions.Admin),
+      }));
+
+      this.componentsList.set(items);
+    });
+  }
 
   toggleProjectPublicity() {
-    this.store
-      .dispatch(new UpdateProjectPublicStatus(this.projectId(), this.newPublicStatus()))
+    if (this.isInformationStep() && this.components().length > 1) {
+      this.step.set(TogglePublicityStep.Selection);
+      this.dialogConfig.header = this.translateService.instant('project.overview.dialog.changePrivacySettings');
+      return;
+    }
+
+    const payload: PrivacyStatusModel[] = !this.isInformationStep()
+      ? this.componentsList()
+          .filter((item) => !item.disabled)
+          .map((item) => ({ id: item.id, public: item.checked }))
+      : [{ id: this.projectId(), public: !this.isCurrentlyPublic() }];
+
+    this.actions
+      .updateProjectPublicStatus(payload)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: () => {
           this.dialogRef.close();
-          this.toastService.showSuccess(
-            this.newPublicStatus()
-              ? 'project.overview.dialog.toast.makePublic.success'
-              : 'project.overview.dialog.toast.makePrivate.success'
-          );
+          this.toastService.showSuccess('project.overview.dialog.toast.changePrivacySettings.success');
         },
       });
   }

src/app/features/project/overview/enums/index.ts

@@ -0,0 +1 @@
+export * from './toggle-publicity-step.enum';

src/app/features/project/overview/enums/toggle-publicity-step.enum.ts

@@ -0,0 +1,4 @@
+export enum TogglePublicityStep {
+  Information = 1,
+  Selection = 2,
+}

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

@@ -1,2 +1,3 @@
+export * from './privacy-status.model';
 export * from './project-overview.models';
 export * from './socials-share-action-item.model';

src/app/features/project/overview/models/privacy-status.model.ts

@@ -0,0 +1,4 @@
+export interface PrivacyStatusModel {
+  id: string;
+  public: boolean;
+}