Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,8 @@ <h1 class="collections-heading flex align-items-center">{{ collectionProvider()?
[stepperActiveValue]="stepperActiveValue()"
[targetStepValue]="AddToCollectionSteps.CollectionMetadata"
[isDisabled]="isCollectionMetadataDisabled()"
[primaryCollectionId]="primaryCollectionId()"
[isCedarMode]="isCedarMode()"
[cedarTemplate]="requiredMetadataTemplate()"
[existingCedarRecord]="existingCedarRecord()"
(metadataSaved)="handleCollectionMetadataSaved($event)"
(cedarDataSaved)="handleCedarDataSaved($event)"
(stepChange)="handleChangeStep($event)"
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { MockComponents, MockProvider } from 'ng-mocks';

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

import { UserSelectors } from '@core/store/user';
Expand Down Expand Up @@ -118,15 +117,6 @@ describe('AddToCollectionComponent', () => {
expect(component.projectContributorsSaved()).toBe(true);
});

it('should handle collection metadata saved', () => {
const mockForm = new FormGroup({});
component.handleCollectionMetadataSaved(mockForm);

expect(component.collectionMetadataForm).toBe(mockForm);
expect(component.collectionMetadataSaved()).toBe(true);
expect(component.stepperActiveValue()).toBe(AddToCollectionSteps.Complete);
});

it('should handle cedar data saved', () => {
const mockCedarData: CedarRecordDataBinding = {
data: {} as CedarRecordDataBinding['data'],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ import {
signal,
} from '@angular/core';
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';

import { ENVIRONMENT } from '@core/provider/environment.provider';
import { UserSelectors } from '@core/store/user';
import { CedarMetadataRecordData, CedarRecordDataBinding } from '@osf/features/metadata/models';
import {
Expand Down Expand Up @@ -52,7 +50,6 @@ import {
ClearAddToCollectionState,
GetCurrentCollectionSubmission,
RemoveCollectionSubmission,
UpdateCollectionSubmission,
} from '../../store/add-to-collection';

import { AddToCollectionConfirmationDialogComponent } from './add-to-collection-confirmation-dialog/add-to-collection-confirmation-dialog.component';
Expand Down Expand Up @@ -90,16 +87,13 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
private readonly headerStyleHelper = inject(HeaderStyleService);
private readonly platformId = inject(PLATFORM_ID);
private readonly isBrowser = isPlatformBrowser(this.platformId);
private readonly environment = inject(ENVIRONMENT);

readonly selectedProjectId = toSignal<string | null>(
this.route.params.pipe(map((params) => params['id'])) ?? of(null)
);

readonly AddToCollectionSteps = AddToCollectionSteps;

collectionMetadataForm = new FormGroup({});

isProviderLoading = select(CollectionsSelectors.getCollectionProviderLoading);
collectionProvider = select(CollectionsSelectors.getCollectionProvider);
requiredMetadataTemplate = select(CollectionsSelectors.getRequiredMetadataTemplate);
Expand All @@ -123,7 +117,6 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
isCollectionMetadataDisabled = computed(
() => !this.selectedProject() || !this.projectMetadataSaved() || !this.projectContributorsSaved()
);
isCedarMode = computed(() => this.environment.collectionSubmissionWithCedar && !!this.requiredMetadataTemplate());
existingCedarRecord = computed<CedarMetadataRecordData | null>(() => {
const records = this.cedarRecords();
const templateId = this.requiredMetadataTemplate()?.id;
Expand All @@ -134,7 +127,6 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
readonly actions = createDispatchMap({
getCollectionProvider: GetCollectionProvider,
clearAddToCollectionState: ClearAddToCollectionState,
updateCollectionSubmission: UpdateCollectionSubmission,
deleteCollectionSubmission: RemoveCollectionSubmission,
setSelectedProject: SetSelectedProject,
getCurrentCollectionSubmission: GetCurrentCollectionSubmission,
Expand Down Expand Up @@ -191,12 +183,6 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
this.projectContributorsSaved.set(true);
}

handleCollectionMetadataSaved(form: FormGroup): void {
this.collectionMetadataForm = form;
this.collectionMetadataSaved.set(true);
this.stepperActiveValue.set(AddToCollectionSteps.Complete);
}

handleCedarDataSaved(data: CedarRecordDataBinding): void {
this.pendingCedarData.set(data);
this.collectionMetadataSaved.set(true);
Expand All @@ -207,19 +193,14 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
const payload = {
collectionId: this.primaryCollectionId() || '',
projectId: this.selectedProject()?.id || '',
collectionMetadata: this.isCedarMode() ? {} : this.collectionMetadataForm.value || {},
userId: this.currentUser()?.id || '',
};

const isEditMode = this.isEditMode();

if (isEditMode) {
if (this.isEditMode()) {
this.loaderService.show();

this.actions
.updateCollectionSubmission(payload)
this.saveCedarRecordIfNeeded()
.pipe(
switchMap(() => this.saveCedarRecordIfNeeded()),
finalize(() => this.loaderService.hide()),
takeUntilDestroyed(this.destroyRef)
)
Expand All @@ -234,15 +215,17 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
},
});
} else {
this.customDialogService
.open(AddToCollectionConfirmationDialogComponent, {
header: 'collections.addToCollection.confirmationDialogHeader',
width: '500px',
data: { payload, project: this.selectedProject() },
})
.onClose.pipe(
filter((res) => !!res),
switchMap(() => this.saveCedarRecordIfNeeded()),
this.saveCedarRecordIfNeeded()
.pipe(
switchMap(() =>
this.customDialogService
.open(AddToCollectionConfirmationDialogComponent, {
header: 'collections.addToCollection.confirmationDialogHeader',
width: '500px',
data: { payload, project: this.selectedProject() },
})
.onClose.pipe(filter((res) => !!res))
),
takeUntilDestroyed(this.destroyRef)
)
.subscribe({
Expand Down Expand Up @@ -294,8 +277,6 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
}

private saveCedarRecordIfNeeded(): Observable<unknown> {
if (!this.isCedarMode()) return of(null);

const cedarData = this.pendingCedarData();
const projectId = this.selectedProject()?.id;
const templateId = this.requiredMetadataTemplate()?.id;
Expand Down Expand Up @@ -348,8 +329,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {

effect(() => {
const projectId = this.selectedProjectId();
const isCedar = this.isCedarMode();
if (isCedar && projectId) {
if (projectId) {
this.actions.getCedarRecords(projectId, ResourceType.Project);
}
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,13 @@
<h3>{{ 'collections.addToCollection.collectionMetadata' | translate }}</h3>

@if (!isDisabled() && stepperActiveValue() !== targetStepValue()) {
@if (collectionMetadataSaved()) {
@if (isCedarMode()) {
@if (cedarTemplate()) {
<cedar-artifact-viewer
#cedarViewer
[config]="cedarViewerConfig"
[templateObject]="cedarTemplate()!.attributes.template"
[instanceObject]="cedarFormData()"
></cedar-artifact-viewer>
}
} @else {
@for (filterEntry of availableFilterEntries(); track filterEntry.key) {
<div>
<p class="font-bold">{{ filterEntry.labelKey | translate }}</p>

<p class="mt-2">
{{ collectionMetadataForm().get(filterEntry.key)?.value }}
</p>
</div>
}
}
@if (collectionMetadataSaved() && cedarTemplate()) {
<cedar-artifact-viewer
#cedarViewer
[config]="cedarViewerConfig"
[templateObject]="cedarTemplate()!.attributes.template"
[instanceObject]="cedarFormData()"
></cedar-artifact-viewer>
}

<p-button
Expand All @@ -46,58 +32,28 @@ <h3>{{ 'collections.addToCollection.collectionMetadata' | translate }}</h3>

<p-step-panel [value]="targetStepValue()" class="p-0">
<ng-template class="m-0" #content let-activateCallback="activateCallback">
@if (isCedarMode()) {
@if (cedarTemplate()) {
<div class="cedar-editor-container mt-3">
<cedar-embeddable-editor
#cedarEditor
[config]="cedarConfig"
[templateObject]="cedarTemplate()!.attributes.template"
[metadata]="cedarFormData()"
(change)="onCedarChange($event)"
(keyup)="onCedarChange($event)"
></cedar-embeddable-editor>
</div>

<div class="flex justify-content-end gap-3 mt-4">
<p-button
severity="info"
[label]="'common.buttons.discardChanges' | translate"
(onClick)="handleDiscardChanges()"
/>
<p-button [label]="'common.buttons.saveAndContinue' | translate" (onClick)="handleSaveCedarMetadata()" />
</div>
} @else {
<p class="mt-3">{{ 'collections.addToCollection.cedarFormNotAvailable' | translate }}</p>
}
} @else {
<form [formGroup]="collectionMetadataForm()" class="grid row-gap-2 mt-3">
@for (filterEntry of availableFilterEntries(); track filterEntry.key) {
<div class="flex flex-column gap-1 col-12 md:col-6">
<label [for]="filterEntry.key">{{ filterEntry.labelKey | translate }}</label>
<p-select
[id]="filterEntry.key"
[options]="filterEntry.options"
[formControlName]="filterEntry.key"
[placeholder]="filterEntry.labelKey | translate"
appendTo="body"
></p-select>
</div>
}
</form>
@if (cedarTemplate()) {
<div class="cedar-editor-container mt-3">
<cedar-embeddable-editor
#cedarEditor
[config]="cedarConfig"
[templateObject]="cedarTemplate()!.attributes.template"
[metadata]="cedarFormData()"
(change)="onCedarChange($event)"
(keyup)="onCedarChange($event)"
></cedar-embeddable-editor>
</div>

<div class="flex justify-content-end gap-3 mt-4">
<p-button
severity="info"
[label]="'common.buttons.discardChanges' | translate"
(onClick)="handleDiscardChanges()"
/>
<p-button
[label]="'common.buttons.saveAndContinue' | translate"
[disabled]="!collectionMetadataForm().valid"
(onClick)="handleSaveMetadata()"
/>
<p-button [label]="'common.buttons.saveAndContinue' | translate" (onClick)="handleSaveCedarMetadata()" />
</div>
} @else {
<p class="mt-3">{{ 'collections.addToCollection.cedarFormNotAvailable' | translate }}</p>
}
</ng-template>
</p-step-panel>
Expand Down
Loading
Loading