Skip to content

Commit

Permalink
[DURACOM-304] add support for findAll method in dynamic-scrollable-dr…
Browse files Browse the repository at this point in the history 
…opdown.component.ts
  • Loading branch information
@FrancescoMolinaro
FrancescoMolinaro committed Jan 14, 2025
1 parent 134ecd6 commit 903daad
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 100 deletions.
6 changes: 3 additions & 3 deletions src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<ng-container *ngVar="(bitstreamRD$ | async) as bitstreamRD">
<div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
<div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
<div class="container">
<div class="row" *ngIf="bitstreamRD?.hasSucceeded">
<div class="col-md-2">
<ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
</div>
Expand All @@ -27,7 +27,7 @@ <h1 class="h2">{{dsoNameService.getName(bitstreamRD?.payload)}} <span class="tex
</div>
</div>
<ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
<ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
<ds-loading *ngIf="!bitstreamRD || bitstreamRD?.isLoading"
message="{{'loading.bitstream' | translate}}"></ds-loading>
</div>
</ng-container>
17 changes: 12 additions & 5 deletions src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ describe('EditBitstreamPageComponent', () => {
});

it('should select the correct format', () => {
expect(rawForm.formatContainer.selectedFormat).toEqual(selectedFormat.id);
expect(rawForm.formatContainer.selectedFormat).toEqual(selectedFormat.shortDescription);
});

it('should put the \"New Format\" input on invisible', () => {
Expand Down Expand Up @@ -292,7 +292,13 @@ describe('EditBitstreamPageComponent', () => {

describe('when an unknown format is selected', () => {
beforeEach(() => {
comp.updateNewFormatLayout(allFormats[0].id);
comp.onChange({
model: {
id: 'selectedFormat',
value: allFormats[0],
},
});
comp.updateNewFormatLayout();
});

it('should remove the invisible class from the \"New Format\" input', () => {
Expand Down Expand Up @@ -394,9 +400,10 @@ describe('EditBitstreamPageComponent', () => {

describe('when selected format has changed', () => {
beforeEach(() => {
comp.formGroup.patchValue({
formatContainer: {
selectedFormat: allFormats[2].id,
comp.onChange({
model: {
id: 'selectedFormat',
value: allFormats[2],
},
});
fixture.detectChanges();
Expand Down
134 changes: 54 additions & 80 deletions src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
DynamicFormLayout,
DynamicFormService,
DynamicInputModel,
DynamicSelectModel,
} from '@ng-dynamic-forms/core';
import {
TranslateModule,
Expand All @@ -31,24 +30,22 @@ import cloneDeep from 'lodash/cloneDeep';
import {
combineLatest,
combineLatest as observableCombineLatest,
EMPTY,
Observable,
of as observableOf,
Subscription,
} from 'rxjs';
import {
expand,
filter,
map,
reduce,
switchMap,
take,
tap,
} from 'rxjs/operators';

import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
import { FindAllDataImpl } from '../../core/data/base/find-all-data';
import { BitstreamDataService } from '../../core/data/bitstream-data.service';
import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service';
import { PaginatedList } from '../../core/data/paginated-list.model';
import { PrimaryBitstreamService } from '../../core/data/primary-bitstream.service';
import { RemoteData } from '../../core/data/remote-data';
import { Bitstream } from '../../core/shared/bitstream.model';
Expand All @@ -58,7 +55,6 @@ import { Bundle } from '../../core/shared/bundle.model';
import { Item } from '../../core/shared/item.model';
import { Metadata } from '../../core/shared/metadata.utils';
import {
getAllSucceededRemoteDataPayload,
getFirstCompletedRemoteData,
getFirstSucceededRemoteData,
getFirstSucceededRemoteDataPayload,
Expand All @@ -75,6 +71,7 @@ import { ErrorComponent } from '../../shared/error/error.component';
import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
import { DsDynamicInputModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model';
import { DsDynamicTextAreaModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
import { DynamicScrollableDropdownModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
import { FormComponent } from '../../shared/form/form.component';
import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
import { NotificationsService } from '../../shared/notifications/notifications.service';
Expand Down Expand Up @@ -112,12 +109,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
*/
bitstreamRD$: Observable<RemoteData<Bitstream>>;

/**
* The formats their remote data observable
* Tracks changes and updates the view
*/
bitstreamFormatsRD$: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;

/**
* The UUID of the primary bitstream for this bundle
*/
Expand All @@ -133,11 +124,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
*/
originalFormat: BitstreamFormat;

/**
* A list of all available bitstream formats
*/
formats: BitstreamFormat[];

/**
* @type {string} Key prefix used to generate form messages
*/
Expand Down Expand Up @@ -224,9 +210,22 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
/**
* The Dynamic Input Model for the selected format
*/
selectedFormatModel = new DynamicSelectModel({
selectedFormatModel = new DynamicScrollableDropdownModel({
id: 'selectedFormat',
name: 'selectedFormat',
displayKey: 'shortDescription',
repeatable: false,
metadataFields: [],
submissionId: '',
hasSelectableMetadata: false,
findAllFactory: this.findAllFormatsServiceFactory(),
formatFunction: (format: BitstreamFormat | string) => {
if (format instanceof BitstreamFormat) {
return hasValue(format) && format.supportLevel === BitstreamFormatSupportLevel.Unknown ? this.translate.instant(this.KEY_PREFIX + 'selectedFormat.unknown') : format.shortDescription;
} else {
return format;
}
},
});

/**
Expand Down Expand Up @@ -444,6 +443,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
* @private
*/
private bundle: Bundle;
/**
* The currently selected format
* @private
*/
private selectedFormat: BitstreamFormat;

constructor(private route: ActivatedRoute,
private router: Router,
Expand All @@ -470,25 +474,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
this.entityType = this.route.snapshot.queryParams.entityType;
this.bitstreamRD$ = this.route.data.pipe(map((data: any) => data.bitstream));

this.bitstreamFormatsRD$ = this.bitstreamFormatService.findAll(this.findAllOptions).pipe(
getFirstSucceededRemoteData(),
expand((response: RemoteData<PaginatedList<BitstreamFormat>>) => {
const pageInfo = response.payload.pageInfo;
if (pageInfo.currentPage < pageInfo.totalPages) {
const nextPageOptions = { ...this.findAllOptions, currentPage: pageInfo.currentPage + 1 };
return this.bitstreamFormatService.findAll(nextPageOptions).pipe(getFirstSucceededRemoteData());
} else {
return EMPTY;
}
}),
);

const bitstreamFormats$ = this.bitstreamFormatsRD$.pipe(
reduce((acc: BitstreamFormat[], response: RemoteData<PaginatedList<BitstreamFormat>>) => {
return acc.concat(response.payload.page);
}, []),
);

const bitstream$ = this.bitstreamRD$.pipe(
getFirstSucceededRemoteData(),
getRemoteDataPayload(),
Expand All @@ -509,24 +494,31 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
switchMap((bundle: Bundle) => bundle.item),
getFirstSucceededRemoteDataPayload(),
);
const format$ = bitstream$.pipe(
switchMap(bitstream => bitstream.format),
getFirstSucceededRemoteDataPayload(),
);

this.subs.push(
observableCombineLatest(
bitstream$,
bitstreamFormats$,
bundle$,
primaryBitstream$,
item$,
).pipe()
.subscribe(([bitstream, allFormats, bundle, primaryBitstream, item]) => {
this.bitstream = bitstream as Bitstream;
this.formats = allFormats;
this.bundle = bundle;
// hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
// be a success response, but empty
this.primaryBitstreamUUID = hasValue(primaryBitstream) ? primaryBitstream.uuid : null;
this.itemId = item.uuid;
this.setIiifStatus(this.bitstream);
}),
format$,
).subscribe(([bitstream, bundle, primaryBitstream, item, format]) => {
this.bitstream = bitstream as Bitstream;
this.bundle = bundle;
this.selectedFormat = format;
// hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
// be a success response, but empty
this.primaryBitstreamUUID = hasValue(primaryBitstream) ? primaryBitstream.uuid : null;
this.itemId = item.uuid;
this.setIiifStatus(this.bitstream);
}),
format$.pipe(take(1)).subscribe(
(format) => this.originalFormat = format,
),
);

this.subs.push(
Expand All @@ -542,7 +534,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
*/
setForm() {
this.formGroup = this.formService.createFormGroup(this.formModel);
this.updateFormatModel();
this.updateForm(this.bitstream);
this.updateFieldTranslations();
}
Expand All @@ -561,6 +552,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
description: bitstream.firstMetadataValue('dc.description'),
},
formatContainer: {
selectedFormat: this.selectedFormat.shortDescription,
newFormat: hasValue(bitstream.firstMetadata('dc.format')) ? bitstream.firstMetadata('dc.format').value : undefined,
},
});
Expand All @@ -580,36 +572,16 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
},
});
}
this.bitstream.format.pipe(
getAllSucceededRemoteDataPayload(),
).subscribe((format: BitstreamFormat) => {
this.originalFormat = format;
this.formGroup.patchValue({
formatContainer: {
selectedFormat: format.id,
},
});
this.updateNewFormatLayout(format.id);
});
this.updateNewFormatLayout();
}

/**
* Create the list of unknown format IDs an add options to the selectedFormatModel
*/
updateFormatModel() {
this.selectedFormatModel.options = this.formats.map((format: BitstreamFormat) =>
Object.assign({
value: format.id,
label: this.isUnknownFormat(format.id) ? this.translate.instant(this.KEY_PREFIX + 'selectedFormat.unknown') : format.shortDescription,
}));
}

/**
* Update the layout of the "Other Format" input depending on the selected format
* @param selectedId
*/
updateNewFormatLayout(selectedId: string) {
if (this.isUnknownFormat(selectedId)) {
updateNewFormatLayout() {
if (this.isUnknownFormat()) {
this.formLayout.newFormat.grid.host = this.newFormatBaseLayout;
} else {
this.formLayout.newFormat.grid.host = this.newFormatBaseLayout + ' invisible';
Expand All @@ -620,9 +592,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
* Is the provided format (id) part of the list of unknown formats?
* @param id
*/
isUnknownFormat(id: string): boolean {
const format = this.formats.find((f: BitstreamFormat) => f.id === id);
return hasValue(format) && format.supportLevel === BitstreamFormatSupportLevel.Unknown;
isUnknownFormat(): boolean {
return hasValue(this.selectedFormat) && this.selectedFormat.supportLevel === BitstreamFormatSupportLevel.Unknown;
}

/**
Expand Down Expand Up @@ -654,7 +625,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
onChange(event) {
const model = event.model;
if (model.id === this.selectedFormatModel.id) {
this.updateNewFormatLayout(model.value);
this.selectedFormat = model.value;
this.updateNewFormatLayout();
}
}

Expand All @@ -664,8 +636,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
onSubmit() {
const updatedValues = this.formGroup.getRawValue();
const updatedBitstream = this.formToBitstream(updatedValues);
const selectedFormat = this.formats.find((f: BitstreamFormat) => f.id === updatedValues.formatContainer.selectedFormat);
const isNewFormat = selectedFormat.id !== this.originalFormat.id;
const isNewFormat = this.selectedFormat.id !== this.originalFormat.id;
const isPrimary = updatedValues.fileNamePrimaryContainer.primaryBitstream;
const wasPrimary = this.primaryBitstreamUUID === this.bitstream.uuid;

Expand Down Expand Up @@ -717,7 +688,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
bundle$ = observableOf(this.bundle);
}
if (isNewFormat) {
bitstream$ = this.bitstreamService.updateFormat(this.bitstream, selectedFormat).pipe(
bitstream$ = this.bitstreamService.updateFormat(this.bitstream, this.selectedFormat).pipe(
getFirstCompletedRemoteData(),
map((formatResponse: RemoteData<Bitstream>) => {
if (hasValue(formatResponse) && formatResponse.hasFailed) {
Expand Down Expand Up @@ -875,4 +846,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
.forEach((subscription) => subscription.unsubscribe());
}

findAllFormatsServiceFactory() {
return () => this.bitstreamFormatService as any as FindAllDataImpl<BitstreamFormat>;
}
}
4 changes: 2 additions & 2 deletions .../ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
<button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList; let i = index"
[class.active]="i === selectedIndex"
(keydown.enter)="onSelect(listEntry); sdRef.close()" (mousedown)="onSelect(listEntry); sdRef.close()"
title="{{ listEntry.display }}" role="option"
[attr.id]="listEntry.display === (currentValue|async) ? ('combobox_' + id + '_selected') : null">
title="{{ inputFormatter(listEntry) }}" role="option"
[attr.id]="inputFormatter(listEntry) === (currentValue|async) ? ('combobox_' + id + '_selected') : null">
{{inputFormatter(listEntry)}}
</button>
<div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
Expand Down
Loading

0 comments on commit 903daad

Please sign in to comment.