Fix/overview

src/app/core/constants/index.ts

@@ -2,4 +2,3 @@ export * from './error-messages';
 export * from './nav-items.constant';
 export * from './ngxs-states.constant';
 export * from './social-icons.constant';
-export * from './storage-locations.constant';

src/app/features/files/components/move-file-dialog/move-file-dialog.component.html

@@ -37,16 +37,14 @@ <h2 class="font-normal">{{ storageName }}</h2>
                 {{ file?.name ?? '' }}
               </div>
             } @else {
-              <osf-icon iconClass="fas fa-folder"></osf-icon>
-
-              <div
-                class="filename-link overflow-ellipsis"
-                tabindex="0"
+              <p-button
+                class="filename-link link-btn-no-padding overflow-ellipsis font-normal"
+                icon="fas fa-folder"
+                severity="secondary"
+                [link]="true"
+                [label]="file?.name ?? ''"
                 (click)="openFolder(file)"
-                (keydown.enter)="openFolder(file)"
-              >
-                {{ file?.name ?? '' }}
-              </div>
+              />
             }
           </div>
         </div>
@@ -69,11 +67,11 @@ <h3 class="font-normal text-no-transform">{{ 'files.emptyState' | translate }}</
 }
 
 <div class="flex justify-content-end gap-2 mt-4">
-  <p-button (click)="dialogRef.close()" severity="info" [label]="'common.buttons.cancel' | translate"></p-button>
+  <p-button severity="info" [label]="'common.buttons.cancel' | translate" (onClick)="dialogRef.close()"></p-button>
 
   <p-button
     [disabled]="isFolderSame() || isLoading() || isFilesUpdating()"
     [label]="(config.data.action === 'move' ? 'common.buttons.move' : 'common.buttons.copy') | translate"
-    (click)="moveFile()"
+    (onClick)="moveFile()"
   ></p-button>
 </div>

src/app/features/files/components/move-file-dialog/move-file-dialog.component.scss

@@ -1,4 +1,3 @@
-@use "styles/variables" as var;
 @use "styles/mixins" as mix;
 
 :host {
@@ -7,12 +6,12 @@
 }
 
 .files-table {
-  border: 1px solid var.$grey-2;
+  border: 1px solid var(--grey-2);
   border-radius: mix.rem(8px);
 
   &-row {
-    border-bottom: 1px solid var.$grey-2;
-    color: var.$dark-blue-1;
+    border-bottom: 1px solid var(--grey-2);
+    color: var(--dark-blue-1);
   }
 
   &-row:last-child {
@@ -26,7 +25,7 @@
   cursor: pointer;
 
   &.disabled {
-    color: var.$grey-1;
+    color: var(--grey-1);
     cursor: not-allowed;
   }
 
@@ -35,6 +34,12 @@
   }
 }
 
+.link-btn-no-padding {
+  --p-button-label-font-weight: 400;
+  --p-button-link-hover-color: var(--dark-blue-1);
+  --p-button-link-color: var(--dark-blue-1);
+}
+
 .disabled-icon {
-  color: var.$grey-1;
+  color: var(--grey-1);
 }

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

@@ -7,45 +7,16 @@
   </div>
 
   @if (currentProject()?.affiliatedInstitutions?.length) {
-    <div class="flex flex-column gap-2">
-      <div class="relative">
-        <h3 class="font-normal affiliation-label mb-2">
-          {{ 'project.overview.dialog.addComponent.affiliation.title' | translate }}
-        </h3>
-        <div class="flex gap-4 absolute top-0 right-0">
-          <p-button
-            class="secondary-transparent"
-            severity="secondary"
-            [label]="'project.overview.dialog.addComponent.affiliation.selectAll' | translate"
-            (click)="selectAllAffiliations()"
-            (keydown.enter)="selectAllAffiliations()"
-          >
-          </p-button>
-          <p-button
-            class="secondary-transparent"
-            severity="secondary"
-            [label]="'project.overview.dialog.addComponent.affiliation.removeAll' | translate"
-            (click)="removeAllAffiliations()"
-            (keydown.enter)="removeAllAffiliations()"
-          >
-          </p-button>
-        </div>
-      </div>
+    <div>
+      <h3 class="font-normal mb-2">
+        {{ 'myProjects.createProject.affiliation.title' | translate }}
+      </h3>
 
-      <div class="flex gap-2" role="group" aria-label="Affiliations">
-        @for (affiliation of currentProject()?.affiliatedInstitutions; track affiliation.id) {
-          <div class="flex align-items-center relative gap-2">
-            <p-checkbox
-              class="absolute top-0 affiliation-checkbox"
-              [value]="affiliation.id"
-              [formControlName]="ComponentFormControls.Affiliations"
-              [inputId]="affiliation.id"
-              [name]="'affiliations'"
-            />
-            <img class="fit-contain" [ngSrc]="affiliation.assets.logo" alt="Institution Logo" height="44" width="44" />
-          </div>
-        }
-      </div>
+      <osf-affiliated-institution-select
+        [institutions]="currentProject()?.affiliatedInstitutions || []"
+        [selectedInstitutions]="currentProject()?.affiliatedInstitutions || []"
+        (selectedInstitutionsChange)="setSelectedInstitutions($event)"
+      />
     </div>
   }
 
@@ -55,42 +26,35 @@ <h3 class="font-normal affiliation-label mb-2">
     </label>
     <p-select
       id="storage-location"
-      [options]="storageLocations"
+      optionLabel="name"
+      optionValue="id"
+      [options]="storageLocations()"
+      [loading]="areRegionsLoading()"
       [formControlName]="ComponentFormControls.StorageLocation"
     ></p-select>
   </div>
 
-  <div
-    class="cursor-pointer flex align-items-start gap-2"
-    (click)="toggleAddContributors()"
-    (keydown.enter)="toggleAddContributors()"
-    tabindex="0"
-    role="checkbox"
-    [attr.aria-checked]="componentForm.get(ComponentFormControls.AddContributors)?.value"
-  >
-    <p-checkbox [formControlName]="ComponentFormControls.AddContributors" [binary]="true"></p-checkbox>
+  <div class="flex align-items-start gap-2">
+    <p-checkbox
+      inputId="add-contributors"
+      [formControlName]="ComponentFormControls.AddContributors"
+      [binary]="true"
+    ></p-checkbox>
     <div>
-      <p>
+      <label for="add-contributors" class="cursor-pointer m-0">
         {{ ('project.overview.dialog.addComponent.addContributors' | translate) + ' ' + currentProject()?.title }}
-      </p>
-      <small>{{
-        currentProject()?.title + ' ' + ('project.overview.dialog.addComponent.contributorsMessage' | translate)
-      }}</small>
+      </label>
+      <small>
+        {{ currentProject()?.title + ' ' + ('project.overview.dialog.addComponent.contributorsMessage' | translate) }}
+      </small>
     </div>
   </div>
 
-  <div
-    class="cursor-pointer flex align-items-start gap-2"
-    (click)="toggleAddTags()"
-    (keydown.enter)="toggleAddTags()"
-    tabindex="0"
-    role="checkbox"
-    [attr.aria-checked]="componentForm.get(ComponentFormControls.AddTags)?.value"
-  >
-    <p-checkbox [formControlName]="ComponentFormControls.AddTags" [binary]="true"></p-checkbox>
-    <p>
+  <div class="flex align-items-center gap-2">
+    <p-checkbox inputId="add-tags" [formControlName]="ComponentFormControls.AddTags" [binary]="true"></p-checkbox>
+    <label for="add-tags" class="cursor-pointer m-0">
       {{ ('project.overview.dialog.addComponent.addTags' | translate) + ' ' + currentProject()?.title }}
-    </p>
+    </label>
   </div>
 
   <div class="flex flex-column">
@@ -117,7 +81,7 @@ <h3 class="font-normal affiliation-label mb-2">
       class="w-12rem btn-full-width"
       [label]="'project.overview.dialog.addComponent.cancelButton' | translate"
       severity="info"
-      (click)="dialogRef.close()"
+      (onClick)="dialogRef.close()"
       [disabled]="isSubmitting()"
     />
     <p-button

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

@@ -1,78 +1,69 @@
-import { select, Store } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { DropdownModule } from 'primeng/dropdown';
+import { Button } from 'primeng/button';
+import { Checkbox } from 'primeng/checkbox';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
-import { InputTextModule } from 'primeng/inputtext';
+import { InputText } from 'primeng/inputtext';
 import { Select } from 'primeng/select';
 import { Textarea } from 'primeng/textarea';
 
-import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit } from '@angular/core';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
-import { STORAGE_LOCATIONS } from '@core/constants';
+import { UserSelectors } from '@core/store/user';
+import { AffiliatedInstitutionSelectComponent } from '@osf/shared/components';
 import { ComponentFormControls } from '@osf/shared/enums';
-import { IS_XSMALL } from '@osf/shared/helpers';
-import { ComponentForm } from '@osf/shared/models';
+import { CustomValidators } from '@osf/shared/helpers';
+import { ComponentForm, Institution } from '@osf/shared/models';
 import { ToastService } from '@osf/shared/services';
+import { FetchRegions, RegionsSelectors } from '@osf/shared/stores';
 
 import { CreateComponent, GetComponents, ProjectOverviewSelectors } from '../../store';
 
 @Component({
   selector: 'osf-add-component-dialog',
   imports: [
-    CommonModule,
     ReactiveFormsModule,
-    ButtonModule,
-    InputTextModule,
-    DropdownModule,
-    CheckboxModule,
+    Button,
+    InputText,
+    Checkbox,
     Select,
     Textarea,
-    NgOptimizedImage,
     TranslatePipe,
+    AffiliatedInstitutionSelectComponent,
   ],
   templateUrl: './add-component-dialog.component.html',
   styleUrl: './add-component-dialog.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddComponentDialogComponent implements OnInit {
-  private store = inject(Store);
   private readonly toastService = inject(ToastService);
 
-  isMobile = toSignal(inject(IS_XSMALL));
   dialogRef = inject(DynamicDialogRef);
   destroyRef = inject(DestroyRef);
   ComponentFormControls = ComponentFormControls;
-  storageLocations = STORAGE_LOCATIONS;
-  isSubmitting = select(ProjectOverviewSelectors.getComponentsSubmitting);
-  currentProject = this.store.selectSignal(ProjectOverviewSelectors.getProject);
 
-  toggleAddContributors(): void {
-    const control = this.componentForm.get(ComponentFormControls.AddContributors);
-    if (control) {
-      control.setValue(!control.value);
-    }
-  }
+  storageLocations = select(RegionsSelectors.getRegions);
+  currentUser = select(UserSelectors.getCurrentUser);
+  currentProject = select(ProjectOverviewSelectors.getProject);
+  areRegionsLoading = select(RegionsSelectors.areRegionsLoading);
+  isSubmitting = select(ProjectOverviewSelectors.getComponentsSubmitting);
 
-  toggleAddTags(): void {
-    const control = this.componentForm.get(ComponentFormControls.AddTags);
-    if (control) {
-      control.setValue(!control.value);
-    }
-  }
+  actions = createDispatchMap({
+    createComponent: CreateComponent,
+    getComponents: GetComponents,
+    getRegions: FetchRegions,
+  });
 
   componentForm = new FormGroup<ComponentForm>({
     [ComponentFormControls.Title]: new FormControl('', {
       nonNullable: true,
-      validators: [Validators.required],
+      validators: [CustomValidators.requiredTrimmed()],
     }),
-    [ComponentFormControls.StorageLocation]: new FormControl('us', {
+    [ComponentFormControls.StorageLocation]: new FormControl('', {
       nonNullable: true,
       validators: [Validators.required],
     }),
@@ -90,21 +81,27 @@ export class AddComponentDialogComponent implements OnInit {
     }),
   });
 
-  ngOnInit(): void {
-    this.selectAllAffiliations();
+  constructor() {
+    effect(() => {
+      const storageLocations = this.storageLocations();
+      if (!storageLocations) return;
+
+      const defaultRegion = this.currentUser()?.defaultRegionId || storageLocations[0].id;
+      this.componentForm.controls[ComponentFormControls.StorageLocation].setValue(defaultRegion);
+    });
   }
 
-  selectAllAffiliations(): void {
-    const allAffiliationValues = this.currentProject()?.affiliatedInstitutions?.map((aff) => aff.id) || [];
-    this.componentForm.get(ComponentFormControls.Affiliations)?.setValue(allAffiliationValues);
+  ngOnInit(): void {
+    this.actions.getRegions();
   }
 
-  removeAllAffiliations(): void {
-    this.componentForm.get(ComponentFormControls.Affiliations)?.setValue([]);
+  setSelectedInstitutions(institutions: Institution[]) {
+    const selectedValues = institutions.map((inst) => inst.id);
+    this.componentForm.get(ComponentFormControls.Affiliations)?.setValue(selectedValues);
   }
 
   submitForm(): void {
-    if (!this.componentForm.valid) {
+    if (this.componentForm.invalid) {
       this.componentForm.markAllAsTouched();
       return;
     }
@@ -118,23 +115,21 @@ export class AddComponentDialogComponent implements OnInit {
 
     const tags = formValue.addTags ? project.tags : [];
 
-    this.store
-      .dispatch(
-        new CreateComponent(
-          project.id,
-          formValue.title,
-          formValue.description,
-          tags,
-          formValue.storageLocation,
-          formValue.affiliations,
-          formValue.addContributors
-        )
+    this.actions
+      .createComponent(
+        project.id,
+        formValue.title,
+        formValue.description,
+        tags,
+        formValue.storageLocation,
+        formValue.affiliations,
+        formValue.addContributors
       )
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: () => {
           this.dialogRef.close();
-          this.store.dispatch(new GetComponents(project.id));
+          this.actions.getComponents(project.id);
           this.toastService.showSuccess('project.overview.dialog.toast.addComponent.success');
         },
       });