Feat/232 registries moderation UI

src/app/core/constants/nav-items.constant.ts

@@ -154,14 +154,14 @@ export const PROJECT_MENU_ITEMS: MenuItem[] = [
       },
       { label: 'navigation.project.contributors', routerLink: 'contributors' },
       { label: 'navigation.project.analytics', routerLink: 'analytics' },
-      {
-        label: 'navigation.project.settings',
-        routerLink: 'settings',
-      },
       {
         label: 'navigation.project.addons',
         routerLink: 'addons',
       },
+      {
+        label: 'navigation.project.settings',
+        routerLink: 'settings',
+      },
     ],
   },
 ];

src/app/features/home/components/confirm-email/confirm-email.component.html

@@ -1,10 +1,11 @@
 <div class="flex flex-column gap-6">
   @if (!verifyingEmail()) {
-    <h3 class="font-normal description">
+    <h3 class="font-normal">
       {{ 'home.confirmEmail.description' | translate }}
       <p class="inline font-bold">{{ config.data.emailAddress }}</p>
       {{ 'home.confirmEmail.description2' | translate }}
     </h3>
+
     <div class="flex w-full justify-content-center gap-2">
       <p-button
         severity="info"
@@ -13,6 +14,7 @@ <h3 class="font-normal description">
         (click)="closeDialog()"
         [label]="'common.buttons.cancel' | translate"
       ></p-button>
+
       <p-button
         class="w-full"
         styleClass="w-full"

src/app/features/home/components/confirm-email/confirm-email.component.scss

@@ -1,5 +0,0 @@
-:host {
-  .description {
-    text-transform: none;
-  }
-}

src/app/features/home/home.component.ts

@@ -36,13 +36,13 @@ import { ConfirmEmailComponent } from './components';
   providers: [DialogService],
 })
 export class HomeComponent implements OnInit {
-  readonly #destroyRef = inject(DestroyRef);
-  readonly #store = inject(Store);
-  readonly #router = inject(Router);
-  readonly #route = inject(ActivatedRoute);
-  readonly #translateService = inject(TranslateService);
-  readonly #dialogService = inject(DialogService);
-  readonly #accountSettingsService = inject(AccountSettingsService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly store = inject(Store);
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+  private readonly translateService = inject(TranslateService);
+  private readonly dialogService = inject(DialogService);
+  private readonly accountSettingsService = inject(AccountSettingsService);
 
   protected readonly isLoading = signal(false);
   protected readonly isSubmitting = signal(false);
@@ -69,21 +69,21 @@ export class HomeComponent implements OnInit {
   emailAddress = '';
 
   constructor() {
-    this.#setupSearchSubscription();
-    this.#setupTotalRecordsEffect();
-    this.#setupCleanup();
+    this.setupSearchSubscription();
+    this.setupTotalRecordsEffect();
+    this.setupCleanup();
   }
 
   ngOnInit() {
-    this.#setupQueryParamsSubscription();
-    this.#store.dispatch(new GetUserInstitutions());
+    this.setupQueryParamsSubscription();
+    this.store.dispatch(new GetUserInstitutions());
 
-    this.#route.params.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((params) => {
+    this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
       const userId = params['userId'];
       const token = params['token'];
 
       if (userId && token) {
-        this.#accountSettingsService
+        this.accountSettingsService
           .getEmail(token, userId)
           .pipe(take(1))
           .subscribe((email) => {
@@ -95,8 +95,8 @@ export class HomeComponent implements OnInit {
   }
 
   addAlternateEmail(token: string) {
-    this.#translateService.get('home.confirmEmail.title').subscribe((title) => {
-      this.dialogRef = this.#dialogService.open(ConfirmEmailComponent, {
+    this.translateService.get('home.confirmEmail.title').subscribe((title) => {
+      this.dialogRef = this.dialogService.open(ConfirmEmailComponent, {
         width: '448px',
         focusOnShow: false,
         header: title,
@@ -105,16 +105,16 @@ export class HomeComponent implements OnInit {
         closable: true,
         data: {
           emailAddress: this.emailAddress,
-          userId: this.#route.snapshot.params['userId'],
-          emailId: this.#route.snapshot.params['emailId'],
+          userId: this.route.snapshot.params['userId'],
+          emailId: this.route.snapshot.params['emailId'],
           token: token,
         },
       });
     });
   }
 
-  #setupQueryParamsSubscription(): void {
-    this.#route.queryParams.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((params) => {
+  setupQueryParamsSubscription(): void {
+    this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
       const page = Number(params['page']) || 1;
       const rows = Number(params['rows']) || MY_PROJECTS_TABLE_PARAMS.rows;
       const sortField = params['sortField'];
@@ -136,19 +136,17 @@ export class HomeComponent implements OnInit {
         this.searchControl.setValue(search);
       }
 
-      this.#fetchProjects();
+      this.fetchProjects();
     });
   }
 
-  #setupSearchSubscription(): void {
+  setupSearchSubscription(): void {
     this.searchControl.valueChanges
-      .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef))
-      .subscribe(() => {
-        this.#updateQueryParams();
-      });
+      .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.updateQueryParams(true));
   }
 
-  #setupTotalRecordsEffect(): void {
+  setupTotalRecordsEffect(): void {
     effect(() => {
       const total = this.totalProjectsCount();
       this.tableParams.update((current) => ({
@@ -158,19 +156,19 @@ export class HomeComponent implements OnInit {
     });
   }
 
-  #setupCleanup(): void {
-    this.#destroyRef.onDestroy(() => {
-      this.#store.dispatch(new ClearMyProjects());
+  setupCleanup(): void {
+    this.destroyRef.onDestroy(() => {
+      this.store.dispatch(new ClearMyProjects());
     });
   }
 
-  #fetchProjects(): void {
+  fetchProjects(): void {
     this.isLoading.set(true);
-    const filters = this.#createFilters();
+    const filters = this.createFilters();
     const page = Math.floor(this.tableParams().firstRowIndex / this.tableParams().rows) + 1;
-    this.#store
+    this.store
       .dispatch(new GetMyProjects(page, this.tableParams().rows, filters))
-      .pipe(takeUntilDestroyed(this.#destroyRef))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         complete: () => {
           this.isLoading.set(false);
@@ -181,7 +179,7 @@ export class HomeComponent implements OnInit {
       });
   }
 
-  #createFilters(): MyProjectsSearchFilters {
+  createFilters(): MyProjectsSearchFilters {
     return {
       searchValue: this.searchControl.value ?? '',
       searchFields: ['title'],
@@ -190,8 +188,8 @@ export class HomeComponent implements OnInit {
     };
   }
 
-  #updateQueryParams(): void {
-    const page = Math.floor(this.tableParams().firstRowIndex / this.tableParams().rows) + 1;
+  updateQueryParams(isSearch = false): void {
+    const page = isSearch ? 1 : Math.floor(this.tableParams().firstRowIndex / this.tableParams().rows) + 1;
     const queryParams = {
       page,
       rows: this.tableParams().rows,
@@ -200,8 +198,8 @@ export class HomeComponent implements OnInit {
       sortOrder: this.sortOrder() || undefined,
     };
 
-    this.#router.navigate([], {
-      relativeTo: this.#route,
+    this.router.navigate([], {
+      relativeTo: this.route,
       queryParams,
       queryParamsHandling: 'merge',
     });
@@ -214,37 +212,37 @@ export class HomeComponent implements OnInit {
       firstRowIndex: event.first,
     }));
 
-    this.#updateQueryParams();
+    this.updateQueryParams();
   }
 
   protected onSort(event: SortEvent): void {
     if (event.field) {
       this.sortColumn.set(event.field);
       this.sortOrder.set(event.order === -1 ? SortOrder.Desc : SortOrder.Asc);
-      this.#updateQueryParams();
+      this.updateQueryParams();
     }
   }
 
   protected navigateToProject(project: MyProjectsItem): void {
     this.activeProject.set(project);
-    this.#router.navigate(['/my-projects', project.id]);
+    this.router.navigate(['/my-projects', project.id]);
   }
 
   protected createProject(): void {
     const dialogWidth = this.isMedium() ? '850px' : '95vw';
     this.isSubmitting.set(true);
 
-    const dialogRef = this.#dialogService.open(AddProjectFormComponent, {
-      width: dialogWidth,
-      focusOnShow: false,
-      header: this.#translateService.instant('myProjects.header.createProject'),
-      closeOnEscape: true,
-      modal: true,
-      closable: true,
-    });
-
-    dialogRef.onClose.subscribe(() => {
-      this.isSubmitting.set(false);
-    });
+    this.dialogService
+      .open(AddProjectFormComponent, {
+        width: dialogWidth,
+        focusOnShow: false,
+        header: this.translateService.instant('myProjects.header.createProject'),
+        closeOnEscape: true,
+        modal: true,
+        closable: true,
+      })
+      .onClose.subscribe(() => {
+        this.isSubmitting.set(false);
+      });
   }
 }

src/app/features/institutions/institutions.component.html

@@ -7,7 +7,7 @@
   />
 
   @if (institutionsLoading()) {
-    <div class="flex-1 mt-4 md:mt-8 lg:pt-5">
+    <div class="flex-1 bg-white">
       <osf-loading-spinner />
     </div>
   } @else {
@@ -17,18 +17,24 @@
       <div class="py-5 flex flex-column gap-3">
         @for (institution of institutions(); track $index) {
           <div class="border-1 border-round-xl grey-border-color px-5 py-4 flex align-items-center gap-4">
-            <img [ngSrc]="institution.assets.logo" [alt]="institution.name" width="60" height="60" />
+            <img class="image" [ngSrc]="institution.assets.logo" [alt]="institution.name" width="60" height="60" />
 
-            <h3 class="text-lg">{{ institution.name }}</h3>
+            <h2>{{ institution.name }}</h2>
           </div>
         }
+
+        @if (!institutions().length) {
+          <p class="text-center">{{ 'common.search.noResultsFound' | translate }}</p>
+        }
       </div>
 
-      <osf-custom-paginator
-        [first]="first()"
-        [totalCount]="totalInstitutionsCount()"
-        (pageChanged)="onPageChange($event)"
-      ></osf-custom-paginator>
+      @if (totalInstitutionsCount() > 10) {
+        <osf-custom-paginator
+          [first]="first()"
+          [totalCount]="totalInstitutionsCount()"
+          (pageChanged)="onPageChange($event)"
+        ></osf-custom-paginator>
+      }
     </div>
   }
 </section>

src/app/features/institutions/institutions.component.scss

@@ -0,0 +1,3 @@
+.image {
+  object-fit: contain;
+}

src/app/features/institutions/institutions.component.ts

@@ -47,7 +47,7 @@ import { FetchInstitutions, InstitutionsSelectors } from '@shared/stores';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InstitutionsComponent {
-  @HostBinding('class') classes = 'flex-1 flex flex-column w-full h-full';
+  @HostBinding('class') classes = 'flex-1 flex flex-column w-full';
 
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);

src/app/features/moderation/components/add-moderator-dialog/add-moderator-dialog.component.html

@@ -33,7 +33,7 @@
 
   <div class="flex justify-content-end mt-4">
     <p-button
-      class="secondary-add-btn"
+      class="btn-full-width md:w-auto"
       severity="secondary"
       [label]="'moderation.inviteModerator' | translate"
       (click)="inviteModerator()"

src/app/features/moderation/components/bulk-upload/bulk-upload.component.html

@@ -0,0 +1,27 @@
+<div class="card flex justify-center mt-3">
+  <p-fileupload class="w-full" styleClass="w-full" mode="advanced" [accept]="acceptTypes()" [maxFileSize]="maxSize()">
+    <ng-template
+      #header
+      let-files
+      let-chooseCallback="chooseCallback"
+      let-clearCallback="clearCallback"
+      let-uploadCallback="uploadCallback"
+    >
+      <div class="flex flex-column">
+        <h2>{{ 'moderation.bulkUpload' | translate }}</h2>
+
+        <p class="mt-3">{{ 'moderation.bulkUploadMessage' | translate }}</p>
+
+        <p-button
+          class="mt-3"
+          icon="fas fa-upload"
+          raised
+          variant="text"
+          severity="success"
+          [label]="'project.files.dialogs.uploadFile.title' | translate"
+          (click)="chooseCallback()"
+        />
+      </div>
+    </ng-template>
+  </p-fileupload>
+</div>

src/app/features/moderation/components/bulk-upload/bulk-upload.component.spec.ts

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

src/app/features/moderation/components/bulk-upload/bulk-upload.component.ts

@@ -0,0 +1,20 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Button } from 'primeng/button';
+import { FileUpload } from 'primeng/fileupload';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { BYTES_IN_MB, FILE_TYPES } from '../../constants';
+
+@Component({
+  selector: 'osf-bulk-upload',
+  imports: [Button, FileUpload, TranslatePipe],
+  templateUrl: './bulk-upload.component.html',
+  styleUrl: './bulk-upload.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BulkUploadComponent {
+  maxSize = input(1 * BYTES_IN_MB);
+  acceptTypes = input(FILE_TYPES.CSV);
+}