From a00ceb3da5fc224b7c878f41116cbb0456062f8a Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Fri, 13 Sep 2019 17:09:08 +0200 Subject: [PATCH] 64961: Edit bitstream - format inputs --- resources/i18n/en.json | 9 +- .../edit-bitstream-page.component.html | 3 +- .../edit-bitstream-page.component.ts | 145 +++++++++++++++++- 3 files changed, 147 insertions(+), 10 deletions(-) diff --git a/resources/i18n/en.json b/resources/i18n/en.json index 2be34223d9..b8fc64eee6 100644 --- a/resources/i18n/en.json +++ b/resources/i18n/en.json @@ -85,12 +85,17 @@ "bitstream.edit.title": "Edit bitstream", "bitstream.edit.bitstream": "Bitstream: ", "bitstream.edit.form.description.label": "Description", - "bitstream.edit.form.description.hint": "Optionally, provide a brief description of the file, for example \"Main article\" or \"Experiment data readings\".", + "bitstream.edit.form.description.hint": "Optionally, provide a brief description of the file, for example \"Main article\" or \"Experiment data readings\".", "bitstream.edit.form.embargo.label": "Embargo until specific date", - "bitstream.edit.form.embargo.hint": "The first day from which access is allowed. This date cannot be modified on this form. To set an embargo date for a bitstream, go to the Item Status tab, click Authorizations..., create or edit the bitstream's READ policy, and set the Start Date as desired.", + "bitstream.edit.form.embargo.hint": "The first day from which access is allowed. This date cannot be modified on this form. To set an embargo date for a bitstream, go to the Item Status tab, click Authorizations..., create or edit the bitstream's READ policy, and set the Start Date as desired.", "bitstream.edit.form.fileName.label": "Filename", "bitstream.edit.form.fileName.hint": "Change the filename for the bitstream. Note that this will change the display bitstream URL, but old links will still resolve as long as the sequence ID does not change.", "bitstream.edit.form.primaryBitstream.label": "Primary bitstream", + "bitstream.edit.form.selectedFormat.hint": "If the format is not in the above list, select \"format not in list\" above and describe it under \"Other Format\".", + "bitstream.edit.form.selectedFormat.label": "Selected Format", + "bitstream.edit.form.selectedFormat.unknown": "Format not in list", + "bitstream.edit.form.otherFormat.label": "Other Format", + "bitstream.edit.form.otherFormat.hint": "The application you used to create the file, and the version number (for example, \"ACMESoft SuperApp version 1.5\").", "bitstream.edit.notifications.saved.content": "Your changes to this bitstream were saved.", "bitstream.edit.notifications.saved.title": "Bitstream saved", "browse.comcol.by.author": "By Author", diff --git a/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html b/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html index 4b854cb584..6efbcb20ab 100644 --- a/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html +++ b/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html @@ -16,7 +16,8 @@ [formGroup]="formGroup" [formModel]="formModel" [formLayout]="formLayout" - (submitForm)="onSubmit()"> + (submitForm)="onSubmit()" + (dfChange)="onChange($event)"> diff --git a/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts index a1567a75a3..f502ffffb4 100644 --- a/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts +++ b/src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts @@ -1,11 +1,16 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; import { Bitstream } from '../../core/shared/bitstream.model'; import { ActivatedRoute } from '@angular/router'; -import { map, tap } from 'rxjs/operators'; +import { map, take, tap } from 'rxjs/operators'; +import { combineLatest as observableCombineLatest } from 'rxjs'; import { Subscription } from 'rxjs/internal/Subscription'; import { - DynamicFormControlModel, DynamicFormGroupModel, DynamicFormLayout, DynamicFormService, + DynamicFormControlModel, + DynamicFormGroupModel, + DynamicFormLayout, + DynamicFormService, DynamicInputModel, + DynamicSelectModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core'; import { FormGroup } from '@angular/forms'; @@ -13,9 +18,12 @@ import { TranslateService } from '@ngx-translate/core'; import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model'; import { cloneDeep } from 'lodash'; import { BitstreamDataService } from '../../core/data/bitstream-data.service'; -import { getSucceededRemoteData } from '../../core/shared/operators'; +import { getRemoteDataPayload, getSucceededRemoteData } from '../../core/shared/operators'; import { RemoteData } from '../../core/data/remote-data'; import { NotificationsService } from '../../shared/notifications/notifications.service'; +import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service'; +import { BitstreamFormat } from '../../core/shared/bitstream-format.model'; +import { BitstreamFormatSupportLevel } from '../../core/shared/bitstream-format-support-level'; @Component({ selector: 'ds-edit-bitstream-page', @@ -53,6 +61,16 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { */ NOTIFICATIONS_PREFIX = 'bitstream.edit.notifications.'; + /** + * Options for fetching all bitstream formats + */ + findAllOptions = { elementsPerPage: 9999 }; + + /** + * List of IDs of unknown formats + */ + unknownFormatIDs: string[] = []; + /** * The Dynamic Input Model for the file's name */ @@ -93,10 +111,26 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { disabled: true }); + /** + * The Dynamic Input Model for the selected format + */ + selectedFormatModel = new DynamicSelectModel({ + id: 'selectedFormat', + name: 'selectedFormat' + }); + + /** + * The Dynamic Input Model for supplying more format information + */ + otherFormatModel = new DynamicInputModel({ + id: 'otherFormat', + name: 'otherFormat' + }); + /** * All input models in a simple array for easier iterations */ - inputModels = [this.fileNameModel, this.primaryBitstreamModel, this.descriptionModel, this.embargoModel]; + inputModels = [this.fileNameModel, this.primaryBitstreamModel, this.descriptionModel, this.embargoModel, this.selectedFormatModel, this.otherFormatModel]; /** * The dynamic form fields used for editing the information of a bitstream @@ -121,9 +155,21 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { group: [ this.embargoModel ] + }), + new DynamicFormGroupModel({ + id: 'formatContainer', + group: [ + this.selectedFormatModel, + this.otherFormatModel + ] }) ]; + /** + * The base layout of the "Other Format" input + */ + otherFormatBaseLayout = 'col col-sm-6'; + /** * Layout used for structuring the form inputs */ @@ -148,6 +194,16 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { host: 'col-12 d-inline-block' } }, + selectedFormat: { + grid: { + host: 'col col-sm-6 d-inline-block' + } + }, + otherFormat: { + grid: { + host: this.otherFormatBaseLayout + ' d-none' + } + }, fileNamePrimaryContainer: { grid: { host: 'row position-relative' @@ -162,6 +218,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { grid: { host: 'row' } + }, + formatContainer: { + grid: { + host: 'row' + } } }; @@ -179,7 +240,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { private formService: DynamicFormService, private translate: TranslateService, private bitstreamService: BitstreamDataService, - private notificationsService: NotificationsService) { + private notificationsService: NotificationsService, + private bitstreamFormatService: BitstreamFormatDataService) { } /** @@ -190,8 +252,22 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { */ ngOnInit(): void { this.formGroup = this.formService.createFormGroup(this.formModel); - this.sub = this.route.data.pipe(map((data) => data.bitstream)).subscribe((bitstreamRD) => { - this.bitstream = bitstreamRD.payload; + + const bitstream$ = this.route.data.pipe(map((data) => data.bitstream)).pipe( + getSucceededRemoteData(), + getRemoteDataPayload() + ); + const allFormats$ = this.bitstreamFormatService.findAll(this.findAllOptions).pipe( + getSucceededRemoteData(), + getRemoteDataPayload() + ); + + this.sub = observableCombineLatest( + bitstream$, + allFormats$ + ).subscribe(([bitstream, allFormats]) => { + this.bitstream = bitstream as Bitstream; + this.updateFormatModel(allFormats.page); this.updateForm(this.bitstream); }); @@ -205,6 +281,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { /** * Update the current form values with bitstream properties * @param bitstream + * @param bitstreamFormat */ updateForm(bitstream: Bitstream) { this.formGroup.patchValue({ @@ -216,6 +293,53 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { description: bitstream.description } }); + this.bitstream.format.pipe( + getSucceededRemoteData(), + getRemoteDataPayload(), + take(1) + ).subscribe((format: BitstreamFormat) => { + this.formGroup.patchValue({ + formatContainer: { + selectedFormat: format.id + } + }); + this.updateOtherFormatLayout(format.id); + }); + } + + /** + * Create the list of unknown format IDs an add options to the selectedFormatModel + * @param formats + */ + updateFormatModel(formats: BitstreamFormat[]) { + this.unknownFormatIDs = formats + .filter((format: BitstreamFormat) => format.supportLevel === BitstreamFormatSupportLevel.Unknown) + .map((format: BitstreamFormat) => format.id); + this.selectedFormatModel.options = 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 + */ + updateOtherFormatLayout(selectedId: string) { + if (this.isUnknownFormat(selectedId)) { + this.formLayout.otherFormat.grid.host = this.otherFormatBaseLayout + ' d-inline-block'; + } else { + this.formLayout.otherFormat.grid.host = this.otherFormatBaseLayout + ' d-none'; + } + } + + /** + * Is the provided format (id) part of the list of unknown formats? + * @param id + */ + isUnknownFormat(id: string): boolean { + return this.unknownFormatIDs.indexOf(id) > -1; } /** @@ -240,6 +364,13 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy { } } + onChange(event) { + const model = event.model; + if (model.id === this.selectedFormatModel.id) { + this.updateOtherFormatLayout(model.value); + } + } + /** * Check for changes against the bitstream and send update requests to the REST API */