From 92f94c39b2374b83ef7f1243f66401c5162c6fb2 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Tue, 29 Nov 2022 18:02:13 +0100 Subject: [PATCH 01/73] 97075: Edit metadata redesign --- .../dso-edit-metadata-form.ts | 133 ++++++++++++++++++ .../dso-edit-metadata.component.html | 126 +++++++++++++++++ .../dso-edit-metadata.component.scss | 73 ++++++++++ .../dso-edit-metadata.component.ts | 99 +++++++++++++ .../metadata-field-selector.component.html | 18 +++ .../metadata-field-selector.component.scss | 0 .../metadata-field-selector.component.ts | 68 +++++++++ src/app/dso-shared/dso-shared.module.ts | 20 +++ .../edit-item-page/edit-item-page.module.ts | 4 +- .../edit-item-page.routing.module.ts | 3 +- src/styles/_bootstrap_variables_mapping.scss | 6 + 11 files changed, 548 insertions(+), 2 deletions(-) create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts create mode 100644 src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html create mode 100644 src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.scss create mode 100644 src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts create mode 100644 src/app/dso-shared/dso-shared.module.ts diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts new file mode 100644 index 0000000000..c059f5064f --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -0,0 +1,133 @@ +import { MetadataMap, MetadataValue } from '../../core/shared/metadata.models'; +import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../shared/empty.util'; + +export enum DsoEditMetadataChangeType { + UPDATE = 1, + ADD = 2, + REMOVE = 3 +} + +export class DsoEditMetadataValue { + originalValue: MetadataValue; + newValue: MetadataValue; + reinstatableValue: MetadataValue; + + editing = false; + change: DsoEditMetadataChangeType; + reinstatableChange: DsoEditMetadataChangeType; + + constructor(value: MetadataValue, added = false) { + this.originalValue = value; + this.newValue = Object.assign(new MetadataValue(), value); + if (added) { + this.change = DsoEditMetadataChangeType.ADD; + this.editing = true; + } + } + + confirmChanges() { + if (hasNoValue(this.change) || this.change === DsoEditMetadataChangeType.UPDATE) { + if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language)) { + this.change = DsoEditMetadataChangeType.UPDATE; + } else { + this.change = undefined; + } + } + this.editing = false; + } + + hasChanges(): boolean { + return hasValue(this.change); + } + + discardAndMarkReinstatable(): void { + if (this.change === DsoEditMetadataChangeType.UPDATE) { + this.reinstatableValue = this.newValue; + } + this.reinstatableChange = this.change; + this.discard(); + } + + discard(): void { + this.change = undefined; + this.newValue = Object.assign(new MetadataValue(), this.originalValue); + this.editing = false; + } + + reinstate(): void { + this.newValue = this.reinstatableValue; + this.reinstatableValue = undefined; + this.change = this.reinstatableChange; + this.reinstatableChange = undefined; + } + + isReinstatable(): boolean { + return hasValue(this.reinstatableValue) || hasValue(this.reinstatableChange); + } +} + +export class DsoEditMetadataForm { + fieldKeys: string[]; + fields: { + [mdField: string]: DsoEditMetadataValue[], + }; + newValue: DsoEditMetadataValue; + + constructor(metadata: MetadataMap) { + this.fieldKeys = []; + this.fields = {}; + Object.entries(metadata).forEach(([mdField, values]: [string, MetadataValue[]]) => { + this.fieldKeys.push(mdField); + this.fields[mdField] = values.map((value) => new DsoEditMetadataValue(value)); + }); + } + + add(): void { + if (hasNoValue(this.newValue)) { + this.newValue = new DsoEditMetadataValue(new MetadataValue(), true); + } + } + + setMetadataField(mdField: string) { + if (isEmpty(this.fields[mdField])) { + this.fieldKeys.push(mdField); + this.fields[mdField] = []; + } + this.fields[mdField].push(this.newValue); + this.newValue = undefined; + } + + remove(mdField: string, index: number) { + if (isNotEmpty(this.fields[mdField])) { + this.fields[mdField].splice(index, 1); + if (this.fields[mdField].length === 0) { + this.fieldKeys.splice(this.fieldKeys.indexOf(mdField), 1); + delete this.fields[mdField]; + } + } + } + + hasChanges(): boolean { + return Object.values(this.fields).some((values) => values.some((value) => value.hasChanges())); + } + + discard(): void { + Object.values(this.fields).forEach((values) => { + values.forEach((value) => { + value.discard(); + }); + }); + } + + reinstate(): void { + Object.values(this.fields).forEach((values) => { + values.forEach((value) => { + value.reinstate(); + }); + }); + } + + isReinstatable(): boolean { + return Object.values(this.fields).some((values) => values.some((value) => value.isReinstatable())); + } +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html new file mode 100644 index 0000000000..abe671e6f3 --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -0,0 +1,126 @@ +
+
+ + + + +
+ +
+
Field
+
+
+
Value
+
Lang
+
Edit
+
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+ + + + +
+
+
+
+
+
+
+ {{ mdField }} +
+
+
+
+
{{ mdValue.newValue.value }}
+ +
+
+
{{ mdValue.newValue.language }}
+ +
+
+
+ + + + + + +
+
+
+
+
+ +
+ +
+
+
+ + + +
+
+
+ diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss new file mode 100644 index 0000000000..a13afaf07e --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss @@ -0,0 +1,73 @@ +.lbl-cell { + min-width: 210px; + background-color: var(--bs-gray-100); + font-weight: bold; + + &.ds-success { + background-color: var(--bs-success-bg); + border: 1px solid var(--bs-success); + } +} + +.lbl-cell, +.ds-flex-cell { + padding: 1rem; + border: 1px solid var(--bs-gray-200); +} + +.ds-lang-cell { + min-width: 72px; +} + +.ds-edit-cell { + min-width: 173px; +} + +.ds-value-row { + background-color: white; + + &:active { + cursor: grabbing; + } + + &.ds-warning { + background-color: var(--bs-warning-bg); + + .ds-flex-cell { + border: 1px solid var(--bs-warning); + } + } + + &.ds-danger { + background-color: var(--bs-danger-bg); + + .ds-flex-cell { + border: 1px solid var(--bs-danger); + } + } + + &.ds-success { + background-color: var(--bs-success-bg); + + .ds-flex-cell { + border: 1px solid var(--bs-success); + } + } +} + +.ds-drop-list { + background-color: var(--bs-gray-500); +} + +.ds-field-row { + border: 1px solid var(--bs-gray-400); +} + + +.ds-header-row { + background-color: var(--bs-gray-100); +} + +.ds-drag-handle { + cursor: grab; +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts new file mode 100644 index 0000000000..d961d9dce9 --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -0,0 +1,99 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { AlertType } from '../../shared/alert/aletr-type'; +import { DSpaceObject } from '../../core/shared/dspace-object.model'; +import { DsoEditMetadataChangeType, DsoEditMetadataForm } from './dso-edit-metadata-form'; +import { map, switchMap } from 'rxjs/operators'; +import { ActivatedRoute, Data } from '@angular/router'; +import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest'; +import { Subscription } from 'rxjs/internal/Subscription'; +import { RemoteData } from '../../core/data/remote-data'; +import { hasNoValue, hasValue } from '../../shared/empty.util'; +import { RegistryService } from '../../core/registry/registry.service'; +import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; +import { Observable } from 'rxjs/internal/Observable'; +import { followLink } from '../../shared/utils/follow-link-config.model'; +import { getFirstSucceededRemoteData, metadataFieldsToString } from '../../core/shared/operators'; + +@Component({ + selector: 'ds-dso-edit-metadata', + styleUrls: ['./dso-edit-metadata.component.scss'], + templateUrl: './dso-edit-metadata.component.html', +}) +export class DsoEditMetadataComponent implements OnInit, OnDestroy { + @Input() dso: DSpaceObject; + dsoType: string; + + form: DsoEditMetadataForm; + newMdField: string; + + isReinstatable: boolean; + hasChanges: boolean; + isEmpty: boolean; + + /** + * The AlertType enumeration for access in the component's template + * @type {AlertType} + */ + public AlertTypeEnum = AlertType; + + /** + * The DsoEditMetadataChangeType enumeration for access in the component's template + * @type {DsoEditMetadataChangeType} + */ + public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType; + + dsoUpdateSubscription: Subscription; + + constructor(protected route: ActivatedRoute) { + } + + ngOnInit(): void { + if (hasNoValue(this.dso)) { + this.dsoUpdateSubscription = observableCombineLatest([this.route.data, this.route.parent.data]).pipe( + map(([data, parentData]: [Data, Data]) => Object.assign({}, data, parentData)), + map((data: any) => data.dso) + ).subscribe((rd: RemoteData) => { + this.dso = rd.payload; + this.initForm(); + }); + } else { + this.initForm(); + } + } + + initForm(): void { + this.dsoType = typeof this.dso.type === 'string' ? this.dso.type as any : this.dso.type.value; + this.form = new DsoEditMetadataForm(this.dso.metadata); + this.onDebounce(); + } + + onDebounce(): void { + this.hasChanges = this.form.hasChanges(); + this.isReinstatable = this.form.isReinstatable(); + this.isEmpty = Object.keys(this.form.fields).length === 0; + } + + submit(): void { + + } + + add(): void { + this.newMdField = undefined; + this.form.add(); + } + + discard(): void { + this.form.discard(); + } + + reinstate(): void { + this.form.reinstate(); + } + + ngOnDestroy() { + if (hasValue(this.dsoUpdateSubscription)) { + this.dsoUpdateSubscription.unsubscribe(); + } + } + +} diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html new file mode 100644 index 0000000000..d2761e52a6 --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html @@ -0,0 +1,18 @@ +
+ +
+
+
+ + + +
+
+
+
diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.scss b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts new file mode 100644 index 0000000000..63c27ef062 --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts @@ -0,0 +1,68 @@ +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; +import { startWith, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { followLink } from '../../../shared/utils/follow-link-config.model'; +import { + getAllSucceededRemoteData, + getFirstSucceededRemoteData, + metadataFieldsToString +} from '../../../core/shared/operators'; +import { Observable } from 'rxjs/internal/Observable'; +import { RegistryService } from '../../../core/registry/registry.service'; +import { FormControl } from '@angular/forms'; +import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; +import { hasValue } from '../../../shared/empty.util'; +import { Subscription } from 'rxjs/internal/Subscription'; + +@Component({ + selector: 'ds-metadata-field-selector', + styleUrls: ['./metadata-field-selector.component.scss'], + templateUrl: './metadata-field-selector.component.html' +}) +export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { + @Input() mdField: string; + @Output() mdFieldChange = new EventEmitter(); + mdFieldOptions$: Observable; + + public input: FormControl = new FormControl(); + + query$: BehaviorSubject = new BehaviorSubject(null); + debounceTime = 500; + + subs: Subscription[] = []; + + constructor(protected registryService: RegistryService) { + } + + ngOnInit(): void { + this.subs.push( + this.input.valueChanges.pipe( + debounceTime(this.debounceTime), + ).subscribe((valueChange) => { + this.query$.next(valueChange); + this.mdField = valueChange; + this.mdFieldChange.emit(this.mdField); + }), + ); + this.mdFieldOptions$ = this.query$.pipe( + distinctUntilChanged(), + switchMap((query) => { + if (query !== null) { + return this.registryService.queryMetadataFields(query, null, true, false, followLink('schema')).pipe( + getAllSucceededRemoteData(), + metadataFieldsToString(), + ); + } else { + return [[]]; + } + }), + ); + } + + select(mdFieldOption: string) { + this.mdField = mdFieldOption; + } + + ngOnDestroy(): void { + this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe()); + } +} diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts new file mode 100644 index 0000000000..263d394906 --- /dev/null +++ b/src/app/dso-shared/dso-shared.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../shared/shared.module'; +import { DsoEditMetadataComponent } from './dso-edit-metadata/dso-edit-metadata.component'; +import { MetadataFieldSelectorComponent } from './dso-edit-metadata/metadata-field-selector/metadata-field-selector.component'; + +@NgModule({ + imports: [ + SharedModule, + ], + declarations: [ + DsoEditMetadataComponent, + MetadataFieldSelectorComponent, + ], + exports: [ + DsoEditMetadataComponent, + ], +}) +export class DsoSharedModule { + +} diff --git a/src/app/item-page/edit-item-page/edit-item-page.module.ts b/src/app/item-page/edit-item-page/edit-item-page.module.ts index 97901bd7c8..71ab64fa33 100644 --- a/src/app/item-page/edit-item-page/edit-item-page.module.ts +++ b/src/app/item-page/edit-item-page/edit-item-page.module.ts @@ -35,6 +35,7 @@ import { ItemVersionHistoryComponent } from './item-version-history/item-version import { ItemAuthorizationsComponent } from './item-authorizations/item-authorizations.component'; import { ObjectValuesPipe } from '../../shared/utils/object-values-pipe'; import { ResourcePoliciesModule } from '../../shared/resource-policies/resource-policies.module'; +import { DsoSharedModule } from '../../dso-shared/dso-shared.module'; /** @@ -48,7 +49,8 @@ import { ResourcePoliciesModule } from '../../shared/resource-policies/resource- EditItemPageRoutingModule, SearchPageModule, DragDropModule, - ResourcePoliciesModule + ResourcePoliciesModule, + DsoSharedModule, ], declarations: [ EditItemPageComponent, diff --git a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts index 2535e42216..bd8af3742e 100644 --- a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts +++ b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts @@ -38,6 +38,7 @@ import { ItemPageBitstreamsGuard } from './item-page-bitstreams.guard'; import { ItemPageRelationshipsGuard } from './item-page-relationships.guard'; import { ItemPageVersionHistoryGuard } from './item-page-version-history.guard'; import { ItemPageCollectionMapperGuard } from './item-page-collection-mapper.guard'; +import { DsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/dso-edit-metadata.component'; /** * Routing module that handles the routing for the Edit Item page administrator functionality @@ -75,7 +76,7 @@ import { ItemPageCollectionMapperGuard } from './item-page-collection-mapper.gua }, { path: 'metadata', - component: ItemMetadataComponent, + component: DsoEditMetadataComponent, data: { title: 'item.edit.tabs.metadata.title', showBreadcrumbs: true }, canActivate: [ItemPageMetadataGuard] }, diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss index 5a64be7e2a..d352b24d38 100644 --- a/src/styles/_bootstrap_variables_mapping.scss +++ b/src/styles/_bootstrap_variables_mapping.scss @@ -29,11 +29,17 @@ --bs-teal: #{$teal}; --bs-cyan: #{$cyan}; --bs-primary: #{$primary}; + --bs-primary-bg: #{lighten($primary, 30%)}; --bs-secondary: #{$secondary}; + --bs-secondary-bg: #{lighten($secondary, 30%)}; --bs-success: #{$success}; + --bs-success-bg: #{lighten($success, 30%)}; --bs-info: #{$info}; + --bs-info-bg: #{lighten($info, 30%)}; --bs-warning: #{$warning}; + --bs-warning-bg: #{lighten($warning, 30%)}; --bs-danger: #{$danger}; + --bs-danger-bg: #{lighten($danger, 30%)}; --bs-light: #{$light}; --bs-dark: #{$dark}; From 627da93e23ab242425fe0dfaefe7e7159a687d2c Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Wed, 30 Nov 2022 15:25:36 +0100 Subject: [PATCH 02/73] 97183 Workaround: reorder admin sidebar sections The issue described at https://github.com/DSpace/dspace-angular/issues/1643 was no longer reproducible: The menu component ultimately retrieves menu section information from the store, but in the `MenuComponent#ngOnInit` method, this information is piped through `distinctUntilChanged(compareArraysUsingIds())`, which discards an update that sets these menu elements to be visible. The behavior of this pipe is probably incorrect, but a proper fix is out of scope for the current task. For now, we work around the problem by adding top-level menu sections _after_ their children while initializing the menu section store, which side-steps this issue. --- src/app/menu.resolver.ts | 44 ++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/app/menu.resolver.ts b/src/app/menu.resolver.ts index 8630150c58..60f2d1cca2 100644 --- a/src/app/menu.resolver.ts +++ b/src/app/menu.resolver.ts @@ -171,17 +171,6 @@ export class MenuResolver implements Resolve { ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin]) => { const menuList = [ /* News */ - { - id: 'new', - active: false, - visible: true, - model: { - type: MenuItemType.TEXT, - text: 'menu.section.new' - } as TextMenuItemModel, - icon: 'plus', - index: 0 - }, { id: 'new_community', parentID: 'new', @@ -232,6 +221,17 @@ export class MenuResolver implements Resolve { link: '/processes/new' } as LinkMenuItemModel, }, + { + id: 'new', + active: false, + visible: true, + model: { + type: MenuItemType.TEXT, + text: 'menu.section.new' + } as TextMenuItemModel, + icon: 'plus', + index: 0 + }, // TODO: enable this menu item once the feature has been implemented // { // id: 'new_item_version', @@ -246,17 +246,6 @@ export class MenuResolver implements Resolve { // }, /* Edit */ - { - id: 'edit', - active: false, - visible: true, - model: { - type: MenuItemType.TEXT, - text: 'menu.section.edit' - } as TextMenuItemModel, - icon: 'pencil-alt', - index: 1 - }, { id: 'edit_community', parentID: 'edit', @@ -296,6 +285,17 @@ export class MenuResolver implements Resolve { } } as OnClickMenuItemModel, }, + { + id: 'edit', + active: false, + visible: true, + model: { + type: MenuItemType.TEXT, + text: 'menu.section.edit' + } as TextMenuItemModel, + icon: 'pencil-alt', + index: 1 + }, /* Statistics */ // TODO: enable this menu item once the feature has been implemented From 105f6cb9542926259c67aed08763b0330782ba8e Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Wed, 30 Nov 2022 17:49:19 +0100 Subject: [PATCH 03/73] 97075: Edit metadata redesign pt2 --- src/app/core/shared/operators.ts | 2 +- .../dso-edit-metadata-form.ts | 100 ++++++++++++++++-- .../dso-edit-metadata.component.html | 43 ++++---- .../dso-edit-metadata.component.scss | 6 +- .../dso-edit-metadata.component.ts | 63 +++++++++-- .../metadata-field-selector.component.ts | 14 ++- 6 files changed, 180 insertions(+), 48 deletions(-) diff --git a/src/app/core/shared/operators.ts b/src/app/core/shared/operators.ts index ea2a0283eb..2a68e44af8 100644 --- a/src/app/core/shared/operators.ts +++ b/src/app/core/shared/operators.ts @@ -349,7 +349,7 @@ export const metadataFieldsToString = () => map((schema: MetadataSchema) => ({ field, schema })) ); }); - return observableCombineLatest(fieldSchemaArray); + return isNotEmpty(fieldSchemaArray) ? observableCombineLatest(fieldSchemaArray) : [[]]; }), map((fieldSchemaArray: { field: MetadataField, schema: MetadataSchema }[]): string[] => { return fieldSchemaArray.map((fieldSchema: { field: MetadataField, schema: MetadataSchema }) => fieldSchema.schema.prefix + '.' + fieldSchema.field.toString()); diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts index c059f5064f..220a4561f6 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -1,5 +1,10 @@ import { MetadataMap, MetadataValue } from '../../core/shared/metadata.models'; import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../shared/empty.util'; +import { Operation } from 'fast-json-patch'; +import { MetadataPatchReplaceOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-replace-operation.model'; +import { MetadataPatchRemoveOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-remove-operation.model'; +import { MetadataPatchAddOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-add-operation.model'; +import { MetadataPatchOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-operation.model'; export enum DsoEditMetadataChangeType { UPDATE = 1, @@ -55,10 +60,14 @@ export class DsoEditMetadataValue { } reinstate(): void { - this.newValue = this.reinstatableValue; - this.reinstatableValue = undefined; - this.change = this.reinstatableChange; - this.reinstatableChange = undefined; + if (hasValue(this.reinstatableValue)) { + this.newValue = this.reinstatableValue; + this.reinstatableValue = undefined; + } + if (hasValue(this.reinstatableChange)) { + this.change = this.reinstatableChange; + this.reinstatableChange = undefined; + } } isReinstatable(): boolean { @@ -67,16 +76,23 @@ export class DsoEditMetadataValue { } export class DsoEditMetadataForm { + originalFieldKeys: string[]; fieldKeys: string[]; fields: { [mdField: string]: DsoEditMetadataValue[], }; + reinstatableNewValues: { + [mdField: string]: DsoEditMetadataValue[], + }; newValue: DsoEditMetadataValue; constructor(metadata: MetadataMap) { + this.originalFieldKeys = []; this.fieldKeys = []; this.fields = {}; + this.reinstatableNewValues = {}; Object.entries(metadata).forEach(([mdField, values]: [string, MetadataValue[]]) => { + this.originalFieldKeys.push(mdField); this.fieldKeys.push(mdField); this.fields[mdField] = values.map((value) => new DsoEditMetadataValue(value)); }); @@ -89,12 +105,17 @@ export class DsoEditMetadataForm { } setMetadataField(mdField: string) { + this.newValue.editing = false; + this.addValueToField(this.newValue, mdField); + this.newValue = undefined; + } + + private addValueToField(value: DsoEditMetadataValue, mdField: string) { if (isEmpty(this.fields[mdField])) { this.fieldKeys.push(mdField); this.fields[mdField] = []; } - this.fields[mdField].push(this.newValue); - this.newValue = undefined; + this.fields[mdField].push(value); } remove(mdField: string, index: number) { @@ -112,11 +133,31 @@ export class DsoEditMetadataForm { } discard(): void { - Object.values(this.fields).forEach((values) => { - values.forEach((value) => { - value.discard(); + Object.entries(this.fields).forEach(([field, values]) => { + let removeFromIndex = -1; + values.forEach((value, index) => { + if (value.change === DsoEditMetadataChangeType.ADD) { + if (isEmpty(this.reinstatableNewValues[field])) { + this.reinstatableNewValues[field] = []; + } + this.reinstatableNewValues[field].push(value); + if (removeFromIndex === -1) { + removeFromIndex = index; + } + } else { + value.discardAndMarkReinstatable(); + } }); + if (removeFromIndex > -1) { + this.fields[field].splice(removeFromIndex, this.fields[field].length - removeFromIndex); + } }); + this.fieldKeys.forEach((field) => { + if (this.originalFieldKeys.indexOf(field) < 0) { + delete this.fields[field]; + } + }); + this.fieldKeys = [...this.originalFieldKeys]; } reinstate(): void { @@ -125,9 +166,48 @@ export class DsoEditMetadataForm { value.reinstate(); }); }); + Object.entries(this.reinstatableNewValues).forEach(([field, values]) => { + values.forEach((value) => { + this.addValueToField(value, field); + }); + }); + this.reinstatableNewValues = {}; } isReinstatable(): boolean { - return Object.values(this.fields).some((values) => values.some((value) => value.isReinstatable())); + return isNotEmpty(this.reinstatableNewValues) || + Object.values(this.fields) + .some((values) => values + .some((value) => value.isReinstatable())); + } + + getOperations(): Operation[] { + const operations: Operation[] = []; + Object.entries(this.fields).forEach(([field, values]) => { + values.forEach((value, place) => { + if (value.hasChanges()) { + let operation: MetadataPatchOperation; + if (value.change === DsoEditMetadataChangeType.UPDATE) { + operation = new MetadataPatchReplaceOperation(field, place, { + value: value.newValue.value, + language: value.newValue.language, + }); + } else if (value.change === DsoEditMetadataChangeType.REMOVE) { + operation = new MetadataPatchRemoveOperation(field, place); + } else if (value.change === DsoEditMetadataChangeType.ADD) { + operation = new MetadataPatchAddOperation(field, { + value: value.newValue.value, + language: value.newValue.language, + }); + } else { + console.warn('Illegal metadata change state detected for', value); + } + if (hasValue(operation)) { + operations.push(operation.toOperation()); + } + } + }); + }); + return operations; } } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index abe671e6f3..27cf706a1a 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -1,19 +1,19 @@
- - - - @@ -36,7 +36,7 @@
- +
@@ -44,16 +44,16 @@
- -
@@ -63,15 +63,15 @@
- {{ mdField }} + {{ mdField }}
{{ mdValue.newValue.value }}
- +
{{ mdValue.newValue.language }}
@@ -80,23 +80,24 @@
-
@@ -110,14 +111,14 @@
- - -
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss index a13afaf07e..8e038d7ef8 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss @@ -1,5 +1,6 @@ .lbl-cell { min-width: 210px; + max-width: 210px; background-color: var(--bs-gray-100); font-weight: bold; @@ -16,7 +17,8 @@ } .ds-lang-cell { - min-width: 72px; + min-width: 90px; + max-width: 90px; } .ds-edit-cell { @@ -68,6 +70,6 @@ background-color: var(--bs-gray-100); } -.ds-drag-handle { +.ds-drag-handle:not(.disabled) { cursor: grab; } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index d961d9dce9..5f837e1b80 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, Injector, Input, OnDestroy, OnInit } from '@angular/core'; import { AlertType } from '../../shared/alert/aletr-type'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; import { DsoEditMetadataChangeType, DsoEditMetadataForm } from './dso-edit-metadata-form'; @@ -12,7 +12,17 @@ import { RegistryService } from '../../core/registry/registry.service'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; import { Observable } from 'rxjs/internal/Observable'; import { followLink } from '../../shared/utils/follow-link-config.model'; -import { getFirstSucceededRemoteData, metadataFieldsToString } from '../../core/shared/operators'; +import { + getFirstCompletedRemoteData, + getFirstSucceededRemoteData, + metadataFieldsToString +} from '../../core/shared/operators'; +import { UpdateDataService } from '../../core/data/update-data.service'; +import { getDataServiceFor } from '../../core/cache/builders/build-decorators'; +import { ResourceType } from '../../core/shared/resource-type'; +import { NotificationsService } from '../../shared/notifications/notifications.service'; +import { TranslateService } from '@ngx-translate/core'; +import { DataService } from '../../core/data/data.service'; @Component({ selector: 'ds-dso-edit-metadata', @@ -21,6 +31,7 @@ import { getFirstSucceededRemoteData, metadataFieldsToString } from '../../core/ }) export class DsoEditMetadataComponent implements OnInit, OnDestroy { @Input() dso: DSpaceObject; + updateDataService: UpdateDataService; dsoType: string; form: DsoEditMetadataForm; @@ -29,6 +40,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { isReinstatable: boolean; hasChanges: boolean; isEmpty: boolean; + saving$: BehaviorSubject = new BehaviorSubject(false); /** * The AlertType enumeration for access in the component's template @@ -44,7 +56,10 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { dsoUpdateSubscription: Subscription; - constructor(protected route: ActivatedRoute) { + constructor(protected route: ActivatedRoute, + protected notificationsService: NotificationsService, + protected translateService: TranslateService, + protected parentInjector: Injector) { } ngOnInit(): void { @@ -54,27 +69,55 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { map((data: any) => data.dso) ).subscribe((rd: RemoteData) => { this.dso = rd.payload; + this.initDataService(); this.initForm(); }); } else { + this.initDataService(); this.initForm(); } } - initForm(): void { - this.dsoType = typeof this.dso.type === 'string' ? this.dso.type as any : this.dso.type.value; - this.form = new DsoEditMetadataForm(this.dso.metadata); - this.onDebounce(); + initDataService(): void { + let type: ResourceType; + if (typeof this.dso.type === 'string') { + type = new ResourceType(this.dso.type); + } else { + type = this.dso.type; + } + const provider = getDataServiceFor(type); + this.updateDataService = Injector.create({ + providers: [], + parent: this.parentInjector + }).get(provider); + this.dsoType = type.value; } - onDebounce(): void { + initForm(): void { + this.form = new DsoEditMetadataForm(this.dso.metadata); + this.onValueSaved(); + } + + onValueSaved(): void { this.hasChanges = this.form.hasChanges(); this.isReinstatable = this.form.isReinstatable(); this.isEmpty = Object.keys(this.form.fields).length === 0; } submit(): void { - + this.saving$.next(true); + this.updateDataService.patch(this.dso, this.form.getOperations()).pipe( + getFirstCompletedRemoteData() + ).subscribe((rd: RemoteData) => { + this.saving$.next(false); + if (rd.hasFailed) { + this.notificationsService.error('error', rd.errorMessage); + } else { + this.notificationsService.success('saved', 'saved'); + this.dso = rd.payload; + this.initForm(); + } + }); } add(): void { @@ -84,10 +127,12 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { discard(): void { this.form.discard(); + this.onValueSaved(); } reinstate(): void { this.form.reinstate(); + this.onValueSaved(); } ngOnDestroy() { diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts index 63c27ef062..17050a76ba 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts @@ -1,9 +1,8 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { startWith, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { followLink } from '../../../shared/utils/follow-link-config.model'; import { getAllSucceededRemoteData, - getFirstSucceededRemoteData, metadataFieldsToString } from '../../../core/shared/operators'; import { Observable } from 'rxjs/internal/Observable'; @@ -26,7 +25,8 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { public input: FormControl = new FormControl(); query$: BehaviorSubject = new BehaviorSubject(null); - debounceTime = 500; + debounceTime = 300; + selectedValueLoading = false; subs: Subscription[] = []; @@ -38,7 +38,10 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { this.input.valueChanges.pipe( debounceTime(this.debounceTime), ).subscribe((valueChange) => { - this.query$.next(valueChange); + if (!this.selectedValueLoading) { + this.query$.next(valueChange); + } + this.selectedValueLoading = false; this.mdField = valueChange; this.mdFieldChange.emit(this.mdField); }), @@ -59,7 +62,8 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { } select(mdFieldOption: string) { - this.mdField = mdFieldOption; + this.selectedValueLoading = true; + this.input.setValue(mdFieldOption); } ngOnDestroy(): void { From 6be343cccfa43a841e931ff32d2014ed14e09870 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 1 Dec 2022 13:07:19 +0100 Subject: [PATCH 04/73] 97075: Margin fixes + metadata field autofocus and validation --- .../dso-edit-metadata.component.html | 31 ++++++++------- .../dso-edit-metadata.component.ts | 18 ++++++++- .../metadata-field-selector.component.html | 5 ++- .../metadata-field-selector.component.ts | 38 ++++++++++++++++--- 4 files changed, 69 insertions(+), 23 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index 27cf706a1a..4154a9ce56 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -1,18 +1,18 @@
-
+
- - -
- +
-
+
@@ -44,16 +44,19 @@
- - -
@@ -109,15 +112,15 @@
-
+
- - - diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index 5f837e1b80..97f34ba2a3 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -1,7 +1,7 @@ -import { Component, Injector, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { AlertType } from '../../shared/alert/aletr-type'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; -import { DsoEditMetadataChangeType, DsoEditMetadataForm } from './dso-edit-metadata-form'; +import { DsoEditMetadataChangeType, DsoEditMetadataForm, DsoEditMetadataValue } from './dso-edit-metadata-form'; import { map, switchMap } from 'rxjs/operators'; import { ActivatedRoute, Data } from '@angular/router'; import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest'; @@ -23,6 +23,7 @@ import { ResourceType } from '../../core/shared/resource-type'; import { NotificationsService } from '../../shared/notifications/notifications.service'; import { TranslateService } from '@ngx-translate/core'; import { DataService } from '../../core/data/data.service'; +import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component'; @Component({ selector: 'ds-dso-edit-metadata', @@ -31,6 +32,7 @@ import { DataService } from '../../core/data/data.service'; }) export class DsoEditMetadataComponent implements OnInit, OnDestroy { @Input() dso: DSpaceObject; + @ViewChild(MetadataFieldSelectorComponent) metadataFieldSelectorComponent: MetadataFieldSelectorComponent; updateDataService: UpdateDataService; dsoType: string; @@ -41,6 +43,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { hasChanges: boolean; isEmpty: boolean; saving$: BehaviorSubject = new BehaviorSubject(false); + loadingFieldValidation$: BehaviorSubject = new BehaviorSubject(false); /** * The AlertType enumeration for access in the component's template @@ -120,6 +123,17 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { }); } + setMetadataField() { + this.loadingFieldValidation$.next(true); + this.metadataFieldSelectorComponent.validate().subscribe((valid) => { + this.loadingFieldValidation$.next(false); + if (valid) { + this.form.setMetadataField(this.newMdField); + this.onValueSaved(); + } + }); + } + add(): void { this.newMdField = undefined; this.form.add(); diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html index d2761e52a6..2a69c21188 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html @@ -1,11 +1,12 @@
- +
Invalid metadata field, please pick an existing one from the suggestions when searching
diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts index 17050a76ba..cde41dee96 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts @@ -1,15 +1,25 @@ -import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; -import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { + AfterViewInit, + Component, + ElementRef, + EventEmitter, + Input, + OnDestroy, + OnInit, + Output, + ViewChild +} from '@angular/core'; +import { switchMap, debounceTime, distinctUntilChanged, map, tap, take } from 'rxjs/operators'; import { followLink } from '../../../shared/utils/follow-link-config.model'; import { - getAllSucceededRemoteData, + getAllSucceededRemoteData, getFirstCompletedRemoteData, getFirstSucceededRemoteData, metadataFieldsToString } from '../../../core/shared/operators'; import { Observable } from 'rxjs/internal/Observable'; import { RegistryService } from '../../../core/registry/registry.service'; import { FormControl } from '@angular/forms'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; -import { hasValue } from '../../../shared/empty.util'; +import { hasValue, isNotEmpty } from '../../../shared/empty.util'; import { Subscription } from 'rxjs/internal/Subscription'; @Component({ @@ -17,9 +27,11 @@ import { Subscription } from 'rxjs/internal/Subscription'; styleUrls: ['./metadata-field-selector.component.scss'], templateUrl: './metadata-field-selector.component.html' }) -export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { +export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterViewInit { @Input() mdField: string; + @Input() autofocus = false; @Output() mdFieldChange = new EventEmitter(); + @ViewChild('mdFieldInput', { static: true }) mdFieldInput: ElementRef; mdFieldOptions$: Observable; public input: FormControl = new FormControl(); @@ -27,6 +39,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { query$: BehaviorSubject = new BehaviorSubject(null); debounceTime = 300; selectedValueLoading = false; + showInvalid = false; subs: Subscription[] = []; @@ -49,6 +62,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { this.mdFieldOptions$ = this.query$.pipe( distinctUntilChanged(), switchMap((query) => { + this.showInvalid = false; if (query !== null) { return this.registryService.queryMetadataFields(query, null, true, false, followLink('schema')).pipe( getAllSucceededRemoteData(), @@ -61,6 +75,20 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy { ); } + ngAfterViewInit(): void { + this.mdFieldInput.nativeElement.focus(); + } + + validate(): Observable { + return this.registryService.queryMetadataFields(this.mdField, null, true, false, followLink('schema')).pipe( + getFirstSucceededRemoteData(), + metadataFieldsToString(), + take(1), + map((fields: string[]) => fields.indexOf(this.mdField) > -1), + tap((exists) => this.showInvalid = !exists), + ); + } + select(mdFieldOption: string) { this.selectedValueLoading = true; this.input.setValue(mdFieldOption); From 532a59006fa10b0dc78f5b522f92518ecfca404e Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 1 Dec 2022 14:33:23 +0100 Subject: [PATCH 05/73] 97075: Edit-metadata redesign messages + JSDocs --- .../dso-edit-metadata-form.ts | 116 ++++++++++++++++++ .../dso-edit-metadata.component.html | 26 ++-- .../dso-edit-metadata.component.ts | 94 ++++++++++++-- .../metadata-field-selector.component.html | 2 +- .../metadata-field-selector.component.ts | 80 +++++++++++- .../edit-item-page.routing.module.ts | 1 - src/assets/i18n/en.json5 | 4 + 7 files changed, 295 insertions(+), 28 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts index 220a4561f6..984bec575e 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -6,19 +6,50 @@ import { MetadataPatchRemoveOperation } from '../../core/data/object-updates/pat import { MetadataPatchAddOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-add-operation.model'; import { MetadataPatchOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-operation.model'; +/* tslint:disable:max-classes-per-file */ + +/** + * Enumeration for the type of change occurring on a metadata value + */ export enum DsoEditMetadataChangeType { UPDATE = 1, ADD = 2, REMOVE = 3 } +/** + * Class holding information about a metadata value and its changes within an edit form + */ export class DsoEditMetadataValue { + /** + * The original metadata value (should stay the same!) used to compare changes with + */ originalValue: MetadataValue; + + /** + * The new value, dynamically changing + */ newValue: MetadataValue; + + /** + * A value that can be used to undo any discarding that took place + */ reinstatableValue: MetadataValue; + /** + * Whether or not this value is currently being edited or not + */ editing = false; + + /** + * The type of change that's taking place on this metadata value + * Empty if no changes are made + */ change: DsoEditMetadataChangeType; + + /** + * A type or change that can be used to undo any discarding that took place + */ reinstatableChange: DsoEditMetadataChangeType; constructor(value: MetadataValue, added = false) { @@ -30,6 +61,12 @@ export class DsoEditMetadataValue { } } + /** + * Save the current changes made to the metadata value + * This will set the type of change to UPDATE if the new metadata value's value and/or language are different from + * the original value + * It will also set the editing flag to false + */ confirmChanges() { if (hasNoValue(this.change) || this.change === DsoEditMetadataChangeType.UPDATE) { if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language)) { @@ -41,10 +78,19 @@ export class DsoEditMetadataValue { this.editing = false; } + /** + * Returns if the current value contains changes or not + * If the metadata value contains changes, but they haven't been confirmed yet through confirmChanges(), this might + * return false (which is desired) + */ hasChanges(): boolean { return hasValue(this.change); } + /** + * Discard the current changes and mark the value and change type re-instatable by storing them in their relevant + * properties + */ discardAndMarkReinstatable(): void { if (this.change === DsoEditMetadataChangeType.UPDATE) { this.reinstatableValue = this.newValue; @@ -53,12 +99,19 @@ export class DsoEditMetadataValue { this.discard(); } + /** + * Discard the current changes + * Call discardAndMarkReinstatable() instead, if the discard should be re-instatable + */ discard(): void { this.change = undefined; this.newValue = Object.assign(new MetadataValue(), this.originalValue); this.editing = false; } + /** + * Re-instate (undo) the last discard by replacing the value and change type with their reinstate properties (if present) + */ reinstate(): void { if (hasValue(this.reinstatableValue)) { this.newValue = this.reinstatableValue; @@ -70,20 +123,50 @@ export class DsoEditMetadataValue { } } + /** + * Returns if either the value or change type have a re-instatable property + * This will be the case if a discard has taken place that undid changes to the value or type + */ isReinstatable(): boolean { return hasValue(this.reinstatableValue) || hasValue(this.reinstatableChange); } } +/** + * Class holding information about the metadata of a DSpaceObject and its changes within an edit form + */ export class DsoEditMetadataForm { + /** + * List of original metadata field keys (before any changes took place) + */ originalFieldKeys: string[]; + + /** + * List of current metadata field keys (includes new fields for values added by the user) + */ fieldKeys: string[]; + + /** + * Current state of the form + * Key: Metadata field + * Value: List of {@link DsoEditMetadataValue}s for the metadata field + */ fields: { [mdField: string]: DsoEditMetadataValue[], }; + + /** + * A map of previously added metadata values before a discard of the form took place + * This can be used to re-instate the entire form to before the discard taking place + */ reinstatableNewValues: { [mdField: string]: DsoEditMetadataValue[], }; + + /** + * A (temporary) new metadata value added by the user, not belonging to a metadata field yet + * This value will be finalised and added to a field using setMetadataField() + */ newValue: DsoEditMetadataValue; constructor(metadata: MetadataMap) { @@ -98,18 +181,32 @@ export class DsoEditMetadataForm { }); } + /** + * Add a new temporary value for the user to edit + */ add(): void { if (hasNoValue(this.newValue)) { this.newValue = new DsoEditMetadataValue(new MetadataValue(), true); } } + /** + * Add the temporary value to a metadata field + * Clear the temporary value afterwards + * @param mdField + */ setMetadataField(mdField: string) { this.newValue.editing = false; this.addValueToField(this.newValue, mdField); this.newValue = undefined; } + /** + * Add a value to a metadata field within the map + * @param value + * @param mdField + * @private + */ private addValueToField(value: DsoEditMetadataValue, mdField: string) { if (isEmpty(this.fields[mdField])) { this.fieldKeys.push(mdField); @@ -118,6 +215,11 @@ export class DsoEditMetadataForm { this.fields[mdField].push(value); } + /** + * Remove a value from a metadata field on a given index (this actually removes the value, not just marking it deleted) + * @param mdField + * @param index + */ remove(mdField: string, index: number) { if (isNotEmpty(this.fields[mdField])) { this.fields[mdField].splice(index, 1); @@ -128,10 +230,17 @@ export class DsoEditMetadataForm { } } + /** + * Returns if at least one value within the form contains a change + */ hasChanges(): boolean { return Object.values(this.fields).some((values) => values.some((value) => value.hasChanges())); } + /** + * Discard all changes within the form and store their current values within re-instatable properties so they can be + * undone afterwards + */ discard(): void { Object.entries(this.fields).forEach(([field, values]) => { let removeFromIndex = -1; @@ -174,6 +283,9 @@ export class DsoEditMetadataForm { this.reinstatableNewValues = {}; } + /** + * Returns if at least one value contains a re-instatable property, meaning a discard can be reversed + */ isReinstatable(): boolean { return isNotEmpty(this.reinstatableNewValues) || Object.values(this.fields) @@ -181,6 +293,9 @@ export class DsoEditMetadataForm { .some((value) => value.isReinstatable())); } + /** + * Get the json PATCH operations for the current changes within this form + */ getOperations(): Operation[] { const operations: Operation[] = []; Object.entries(this.fields).forEach(([field, values]) => { @@ -211,3 +326,4 @@ export class DsoEditMetadataForm { return operations; } } +/* tslint:enable:max-classes-per-file */ diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index 4154a9ce56..7578f2ec99 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -20,12 +20,12 @@
-
Field
+
{{ dsoType + '.edit.metadata.headers.field' | translate }}
-
Value
-
Lang
-
Edit
+
{{ dsoType + '.edit.metadata.headers.value' | translate }}
+
{{ dsoType + '.edit.metadata.headers.language' | translate }}
+
{{ dsoType + '.edit.metadata.headers.edit' | translate }}
@@ -43,19 +43,19 @@
- - - - @@ -82,25 +82,25 @@
- - - -
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index 97f34ba2a3..eee2bc963c 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -1,28 +1,22 @@ import { Component, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { AlertType } from '../../shared/alert/aletr-type'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; -import { DsoEditMetadataChangeType, DsoEditMetadataForm, DsoEditMetadataValue } from './dso-edit-metadata-form'; -import { map, switchMap } from 'rxjs/operators'; +import { DsoEditMetadataChangeType, DsoEditMetadataForm } from './dso-edit-metadata-form'; +import { map } from 'rxjs/operators'; import { ActivatedRoute, Data } from '@angular/router'; import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest'; import { Subscription } from 'rxjs/internal/Subscription'; import { RemoteData } from '../../core/data/remote-data'; import { hasNoValue, hasValue } from '../../shared/empty.util'; -import { RegistryService } from '../../core/registry/registry.service'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; -import { Observable } from 'rxjs/internal/Observable'; -import { followLink } from '../../shared/utils/follow-link-config.model'; import { getFirstCompletedRemoteData, - getFirstSucceededRemoteData, - metadataFieldsToString } from '../../core/shared/operators'; import { UpdateDataService } from '../../core/data/update-data.service'; import { getDataServiceFor } from '../../core/cache/builders/build-decorators'; import { ResourceType } from '../../core/shared/resource-type'; import { NotificationsService } from '../../shared/notifications/notifications.service'; import { TranslateService } from '@ngx-translate/core'; -import { DataService } from '../../core/data/data.service'; import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component'; @Component({ @@ -30,19 +24,56 @@ import { MetadataFieldSelectorComponent } from './metadata-field-selector/metada styleUrls: ['./dso-edit-metadata.component.scss'], templateUrl: './dso-edit-metadata.component.html', }) +/** + * Component showing a table of all metadata on a DSpaceObject and options to modify them + */ export class DsoEditMetadataComponent implements OnInit, OnDestroy { + /** + * DSpaceObject to edit metadata for + */ @Input() dso: DSpaceObject; + + /** + * Reference to the component responsible for showing a metadata-field selector + * Used to validate its contents (existing metadata field) before adding a new metadata value + */ @ViewChild(MetadataFieldSelectorComponent) metadataFieldSelectorComponent: MetadataFieldSelectorComponent; + + /** + * Resolved update data-service for the given DSpaceObject (depending on its type, e.g. ItemDataService for an Item) + * Used to send the PATCH request + */ updateDataService: UpdateDataService; + + /** + * Type of the DSpaceObject in String + * Used to resolve i18n messages + */ dsoType: string; + /** + * A dynamic form object containing all information about the metadata and the changes made to them, see {@link DsoEditMetadataForm} + */ form: DsoEditMetadataForm; + + /** + * The metadata field entered by the user for a new metadata value + */ newMdField: string; + // Properties determined by the state of the dynamic form, updated by onValueSaved() isReinstatable: boolean; hasChanges: boolean; isEmpty: boolean; + + /** + * Whether or not the form is currently being submitted + */ saving$: BehaviorSubject = new BehaviorSubject(false); + + /** + * Whether or not the metadata field is currently being validated + */ loadingFieldValidation$: BehaviorSubject = new BehaviorSubject(false); /** @@ -57,6 +88,10 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { */ public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType; + /** + * Subscription for updating the current DSpaceObject + * Unsubscribed from in ngOnDestroy() + */ dsoUpdateSubscription: Subscription; constructor(protected route: ActivatedRoute, @@ -65,6 +100,10 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { protected parentInjector: Injector) { } + /** + * Read the route (or parent route)'s data to retrieve the current DSpaceObject + * After it's retrieved, initialise the data-service and form + */ ngOnInit(): void { if (hasNoValue(this.dso)) { this.dsoUpdateSubscription = observableCombineLatest([this.route.data, this.route.parent.data]).pipe( @@ -81,6 +120,9 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { } } + /** + * Initialise (resolve) the data-service for the current DSpaceObject + */ initDataService(): void { let type: ResourceType; if (typeof this.dso.type === 'string') { @@ -96,17 +138,29 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { this.dsoType = type.value; } + /** + * Initialise the dynamic form object by passing the DSpaceObject's metadata + * Call onValueSaved() to update the form's state properties + */ initForm(): void { this.form = new DsoEditMetadataForm(this.dso.metadata); this.onValueSaved(); } + /** + * Update the form's state properties + */ onValueSaved(): void { this.hasChanges = this.form.hasChanges(); this.isReinstatable = this.form.isReinstatable(); this.isEmpty = Object.keys(this.form.fields).length === 0; } + /** + * Submit the current changes to the form by retrieving json PATCH operations from the form and sending it to the + * DSpaceObject's data-service + * Display notificiations and reset the form afterwards if successful + */ submit(): void { this.saving$.next(true); this.updateDataService.patch(this.dso, this.form.getOperations()).pipe( @@ -114,15 +168,23 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { ).subscribe((rd: RemoteData) => { this.saving$.next(false); if (rd.hasFailed) { - this.notificationsService.error('error', rd.errorMessage); + this.notificationsService.error(this.translateService.instant(`${this.dsoType}.edit.metadata.notifications.error.title`), rd.errorMessage); } else { - this.notificationsService.success('saved', 'saved'); + this.notificationsService.success( + this.translateService.instant(`${this.dsoType}.edit.metadata.notifications.saved.title`), + this.translateService.instant(`${this.dsoType}.edit.metadata.notifications.saved.content`) + ); this.dso = rd.payload; this.initForm(); } }); } + /** + * Set the metadata field of the temporary added new metadata value + * This will move the new value to its respective parent metadata field + * Validate the metadata field first + */ setMetadataField() { this.loadingFieldValidation$.next(true); this.metadataFieldSelectorComponent.validate().subscribe((valid) => { @@ -134,21 +196,33 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { }); } + /** + * Add a new temporary metadata value + */ add(): void { this.newMdField = undefined; this.form.add(); } + /** + * Discard all changes within the current form + */ discard(): void { this.form.discard(); this.onValueSaved(); } + /** + * Restore any changes previously discarded from the form + */ reinstate(): void { this.form.reinstate(); this.onValueSaved(); } + /** + * Unsubscribe from any open subscriptions + */ ngOnDestroy() { if (hasValue(this.dsoUpdateSubscription)) { this.dsoUpdateSubscription.unsubscribe(); diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html index 2a69c21188..4c310bd81b 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html @@ -6,7 +6,7 @@ (focusin)="query$.next(mdField)" (dsClickOutside)="query$.next(null)" (click)="$event.stopPropagation();" /> -
Invalid metadata field, please pick an existing one from the suggestions when searching
+
{{ dsoType + '.edit.metadata.metadatafield.invalid' | translate }}
diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts index cde41dee96..7fc56f8dc2 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts @@ -12,14 +12,14 @@ import { import { switchMap, debounceTime, distinctUntilChanged, map, tap, take } from 'rxjs/operators'; import { followLink } from '../../../shared/utils/follow-link-config.model'; import { - getAllSucceededRemoteData, getFirstCompletedRemoteData, getFirstSucceededRemoteData, + getAllSucceededRemoteData, getFirstSucceededRemoteData, metadataFieldsToString } from '../../../core/shared/operators'; import { Observable } from 'rxjs/internal/Observable'; import { RegistryService } from '../../../core/registry/registry.service'; import { FormControl } from '@angular/forms'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; -import { hasValue, isNotEmpty } from '../../../shared/empty.util'; +import { hasValue } from '../../../shared/empty.util'; import { Subscription } from 'rxjs/internal/Subscription'; @Component({ @@ -27,25 +27,83 @@ import { Subscription } from 'rxjs/internal/Subscription'; styleUrls: ['./metadata-field-selector.component.scss'], templateUrl: './metadata-field-selector.component.html' }) +/** + * Component displaying a searchable input for metadata-fields + */ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterViewInit { + /** + * Type of the DSpaceObject + * Used to resolve i18n messages + */ + @Input() dsoType: string; + + /** + * The currently entered metadata field + */ @Input() mdField: string; + + /** + * If true, the input will be automatically focussed upon when the component is first loaded + */ @Input() autofocus = false; + + /** + * Emit any changes made to the metadata field + * This will only emit after a debounce takes place to avoid constant emits when the user is typing + */ @Output() mdFieldChange = new EventEmitter(); + + /** + * Reference to the metadata-field's input + */ @ViewChild('mdFieldInput', { static: true }) mdFieldInput: ElementRef; + + /** + * List of available metadata field options to choose from, dependent on the current query the user entered + * Shows up in a dropdown below the input + */ mdFieldOptions$: Observable; + /** + * FormControl for the input + */ public input: FormControl = new FormControl(); + /** + * The current query to update mdFieldOptions$ for + * This is controlled by a debounce, to avoid too many requests + */ query$: BehaviorSubject = new BehaviorSubject(null); + + /** + * The amount of time to debounce the query for (in ms) + */ debounceTime = 300; + + /** + * Whether or not the the user just selected a value + * This flag avoids the metadata field from updating twice, which would result in the dropdown opening again right after selecting a value + */ selectedValueLoading = false; + + /** + * Whether or not to show the invalid feedback + * True when validate() is called and the mdField isn't present in the available metadata fields retrieved from the server + */ showInvalid = false; + /** + * Subscriptions to unsubscribe from on destroy + */ subs: Subscription[] = []; constructor(protected registryService: RegistryService) { } + /** + * Subscribe to any changes made to the input, with a debounce and fire a query, as well as emit the change from this component + * Update the mdFieldOptions$ depending on the query$ fired by querying the server + */ ngOnInit(): void { this.subs.push( this.input.valueChanges.pipe( @@ -75,10 +133,19 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV ); } + /** + * Focus the input if autofocus is enabled + */ ngAfterViewInit(): void { - this.mdFieldInput.nativeElement.focus(); + if (this.autofocus) { + this.mdFieldInput.nativeElement.focus(); + } } + /** + * Validate the metadata field to check if it exists on the server and return an observable boolean for success/error + * Upon subscribing to the returned observable, the showInvalid flag is updated accordingly to show the feedback under the input + */ validate(): Observable { return this.registryService.queryMetadataFields(this.mdField, null, true, false, followLink('schema')).pipe( getFirstSucceededRemoteData(), @@ -89,11 +156,18 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV ); } + /** + * Select a metadata field from the dropdown optipons + * @param mdFieldOption + */ select(mdFieldOption: string) { this.selectedValueLoading = true; this.input.setValue(mdFieldOption); } + /** + * Unsubscribe from any open subscriptions + */ ngOnDestroy(): void { this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe()); } diff --git a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts index bd8af3742e..7ccf1fec37 100644 --- a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts +++ b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts @@ -7,7 +7,6 @@ import { ItemPrivateComponent } from './item-private/item-private.component'; import { ItemPublicComponent } from './item-public/item-public.component'; import { ItemDeleteComponent } from './item-delete/item-delete.component'; import { ItemStatusComponent } from './item-status/item-status.component'; -import { ItemMetadataComponent } from './item-metadata/item-metadata.component'; import { ItemBitstreamsComponent } from './item-bitstreams/item-bitstreams.component'; import { ItemCollectionMapperComponent } from './item-collection-mapper/item-collection-mapper.component'; import { ItemMoveComponent } from './item-move/item-move.component'; diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index f742273edb..93ee1427af 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -1791,6 +1791,10 @@ "item.edit.metadata.discard-button": "Discard", + "item.edit.metadata.edit.buttons.confirm": "Confirm", + + "item.edit.metadata.edit.buttons.drag": "Drag to reorder", + "item.edit.metadata.edit.buttons.edit": "Edit", "item.edit.metadata.edit.buttons.remove": "Remove", From 68bac1f400154b4909486eacb77fa3aa181f4371 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Tue, 6 Dec 2022 11:30:46 +0100 Subject: [PATCH 06/73] 97183 Hide sidebar items w/o appropriate permissions. See https://github.com/DSpace/dspace-angular/issues/1643 Sidebar now omits "New" and/or "Edit" options in the sidebar if the user does not have permissions to respectively create new Items or edit Items. If this results in an empty sidebar, the sidebar is hidden in its entirety. --- .../admin-sidebar/admin-sidebar.component.ts | 1 + .../data/feature-authorization/feature-id.ts | 4 +- src/app/menu.resolver.ts | 91 ++++++++++--------- src/app/root/root.component.ts | 2 +- src/app/shared/menu/menu.service.ts | 25 +++++ 5 files changed, 80 insertions(+), 43 deletions(-) diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index 8eb288daa2..36f9250504 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -100,6 +100,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { } } }); + this.menuVisible = this.menuService.isMenuVisibleWithVisibleSections(this.menuID); } @HostListener('focusin') diff --git a/src/app/core/data/feature-authorization/feature-id.ts b/src/app/core/data/feature-authorization/feature-id.ts index 3cb18bf515..9e73ca9a2b 100644 --- a/src/app/core/data/feature-authorization/feature-id.ts +++ b/src/app/core/data/feature-authorization/feature-id.ts @@ -29,5 +29,7 @@ export enum FeatureID { CanViewUsageStatistics = 'canViewUsageStatistics', CanSendFeedback = 'canSendFeedback', CanClaimItem = 'canClaimItem', - CanSynchronizeWithORCID = 'canSynchronizeWithORCID' + CanSynchronizeWithORCID = 'canSynchronizeWithORCID', + CanSubmit = 'canSubmit', + CanEditItem = 'canEditItem', } diff --git a/src/app/menu.resolver.ts b/src/app/menu.resolver.ts index 60f2d1cca2..19413ab4be 100644 --- a/src/app/menu.resolver.ts +++ b/src/app/menu.resolver.ts @@ -167,10 +167,11 @@ export class MenuResolver implements Resolve { combineLatest([ this.authorizationService.isAuthorized(FeatureID.IsCollectionAdmin), this.authorizationService.isAuthorized(FeatureID.IsCommunityAdmin), - this.authorizationService.isAuthorized(FeatureID.AdministratorOf) - ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin]) => { - const menuList = [ - /* News */ + this.authorizationService.isAuthorized(FeatureID.AdministratorOf), + this.authorizationService.isAuthorized(FeatureID.CanSubmit), + this.authorizationService.isAuthorized(FeatureID.CanEditItem), + ]).subscribe(([isCollectionAdmin, isCommunityAdmin, isSiteAdmin, canSubmit, canEditItem]) => { + const newSubMenuList = [ { id: 'new_community', parentID: 'new', @@ -201,7 +202,7 @@ export class MenuResolver implements Resolve { id: 'new_item', parentID: 'new', active: false, - visible: true, + visible: canSubmit, model: { type: MenuItemType.ONCLICK, text: 'menu.section.new_item', @@ -221,30 +222,8 @@ export class MenuResolver implements Resolve { link: '/processes/new' } as LinkMenuItemModel, }, - { - id: 'new', - active: false, - visible: true, - model: { - type: MenuItemType.TEXT, - text: 'menu.section.new' - } as TextMenuItemModel, - icon: 'plus', - index: 0 - }, - // TODO: enable this menu item once the feature has been implemented - // { - // id: 'new_item_version', - // parentID: 'new', - // active: false, - // visible: true, - // model: { - // type: MenuItemType.LINK, - // text: 'menu.section.new_item_version', - // link: '' - // } as LinkMenuItemModel, - // }, - + ]; + const editSubMenuList = [ /* Edit */ { id: 'edit_community', @@ -276,7 +255,7 @@ export class MenuResolver implements Resolve { id: 'edit_item', parentID: 'edit', active: false, - visible: true, + visible: canEditItem, model: { type: MenuItemType.ONCLICK, text: 'menu.section.edit_item', @@ -285,17 +264,47 @@ export class MenuResolver implements Resolve { } } as OnClickMenuItemModel, }, - { - id: 'edit', - active: false, - visible: true, - model: { - type: MenuItemType.TEXT, - text: 'menu.section.edit' - } as TextMenuItemModel, - icon: 'pencil-alt', - index: 1 - }, + ]; + const newSubMenu = { + id: 'new', + active: false, + visible: newSubMenuList.map(subMenu => subMenu.visible).reduce((x,y) => x || y), + model: { + type: MenuItemType.TEXT, + text: 'menu.section.new' + } as TextMenuItemModel, + icon: 'plus', + index: 0 + } + const editSubMenu = { + id: 'edit', + active: false, + visible: editSubMenuList.map(subMenu => subMenu.visible).reduce((x,y) => x || y), + model: { + type: MenuItemType.TEXT, + text: 'menu.section.edit' + } as TextMenuItemModel, + icon: 'pencil-alt', + index: 1 + } + + const menuList = [ + ...newSubMenuList, + newSubMenu, + ...editSubMenuList, + editSubMenu, + // TODO: enable this menu item once the feature has been implemented + // { + // id: 'new_item_version', + // parentID: 'new', + // active: false, + // visible: true, + // model: { + // type: MenuItemType.LINK, + // text: 'menu.section.new_item_version', + // link: '' + // } as LinkMenuItemModel, + // }, /* Statistics */ // TODO: enable this menu item once the feature has been implemented diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts index 472ba440c9..c265cec034 100644 --- a/src/app/root/root.component.ts +++ b/src/app/root/root.component.ts @@ -61,7 +61,7 @@ export class RootComponent implements OnInit { } ngOnInit() { - this.sidebarVisible = this.menuService.isMenuVisible(MenuID.ADMIN); + this.sidebarVisible = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN); this.collapsedSidebarWidth = this.cssService.getVariable('collapsedSidebarWidth'); this.totalSidebarWidth = this.cssService.getVariable('totalSidebarWidth'); diff --git a/src/app/shared/menu/menu.service.ts b/src/app/shared/menu/menu.service.ts index f44ddea649..ab513fbbdf 100644 --- a/src/app/shared/menu/menu.service.ts +++ b/src/app/shared/menu/menu.service.ts @@ -181,6 +181,18 @@ export class MenuService { ); } + /** + * Check if a given menu is visible and has visible sections + * @param {MenuID} menuID The ID of the menu that is to be checked + * @returns {Observable} Emits true if the given menu is + * visible and has visible sections, emits false when it's hidden + */ + isMenuVisibleWithVisibleSections(menuID: MenuID): Observable { + return observableCombineLatest([this.isMenuVisible(menuID), this.menuHasVisibleSections(menuID)]).pipe( + map(([menuVisible, visibleSections]) => menuVisible && visibleSections) + ); + } + /** * Check if a given menu is visible * @param {MenuID} menuID The ID of the menu that is to be checked @@ -192,6 +204,19 @@ export class MenuService { ); } + /** + * Check if a menu has at least one section that is visible. + * @param {MenuID} menuID The ID of the menu that is to be checked + * @returns {Observable} Emits true if the given menu has visible sections, emits false otherwise + */ + menuHasVisibleSections(menuID: MenuID): Observable { + return this.getMenu(menuID).pipe( + map((state: MenuState) => hasValue(state) + ? Object.values(state.sections).map(section => section.visible).reduce((x,y) => x || y, false) + : undefined) + ); + } + /** * Expands a given menu * @param {MenuID} menuID The ID of the menu From fa87b1d94e053082af61feddf225c267e00d94f4 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Tue, 6 Dec 2022 14:33:04 +0100 Subject: [PATCH 07/73] 97183 MenuResolver tests for regular user --- src/app/menu.resolver.spec.ts | 154 +++++++++++++++----- src/app/shared/testing/menu-service.stub.ts | 4 + 2 files changed, 122 insertions(+), 36 deletions(-) diff --git a/src/app/menu.resolver.spec.ts b/src/app/menu.resolver.spec.ts index 4fd44efe66..afe053d1d4 100644 --- a/src/app/menu.resolver.spec.ts +++ b/src/app/menu.resolver.spec.ts @@ -19,6 +19,7 @@ import { cold } from 'jasmine-marbles'; import createSpy = jasmine.createSpy; import { createSuccessfulRemoteDataObject$ } from './shared/remote-data.utils'; import { createPaginatedList } from './shared/testing/utils.test'; +import { Feature } from './core/shared/feature.model'; const BOOLEAN = { t: true, f: false }; const MENU_STATE = { @@ -142,29 +143,7 @@ describe('MenuResolver', () => { }); describe('createAdminMenu$', () => { - it('should retrieve the menu by ID return an Observable that emits true as soon as it is created', () => { - (menuService as any).getMenu.and.returnValue(cold('--u--m', { - u: undefined, - m: MENU_STATE, - })); - - expect(resolver.createAdminMenu$()).toBeObservable(cold('-----(t|)', BOOLEAN)); - expect(menuService.getMenu).toHaveBeenCalledOnceWith(MenuID.ADMIN); - }); - - describe('for regular user', () => { - beforeEach(() => { - authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake(() => { - return observableOf(false); - }); - }); - - beforeEach((done) => { - resolver.createAdminMenu$().subscribe((_) => { - done(); - }); - }); - + const dontShowAdminSections = () => { it('should not show site admin section', () => { expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ id: 'admin_search', visible: false, @@ -183,19 +162,6 @@ describe('MenuResolver', () => { })); }); - it('should not show edit_community', () => { - expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ - id: 'edit_community', visible: false, - })); - - }); - - it('should not show edit_collection', () => { - expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ - id: 'edit_collection', visible: false, - })); - }); - it('should not show access control section', () => { expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ id: 'access_control', visible: false, @@ -222,6 +188,122 @@ describe('MenuResolver', () => { id: 'export', visible: true, })); }); + }; + + const dontShowNewSection = () => { + it('should not show the "New" section', () => { + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'new_community', visible: false, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'new_collection', visible: false, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'new_item', visible: false, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'new', visible: false, + })); + }); + }; + + const dontShowEditSection = () => { + it('should not show the "Edit" section', () => { + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'edit_community', visible: false, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'edit_collection', visible: false, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'edit_item', visible: false, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'edit', visible: false, + })); + }); + }; + + it('should retrieve the menu by ID return an Observable that emits true as soon as it is created', () => { + (menuService as any).getMenu.and.returnValue(cold('--u--m', { + u: undefined, + m: MENU_STATE, + })); + + expect(resolver.createAdminMenu$()).toBeObservable(cold('-----(t|)', BOOLEAN)); + expect(menuService.getMenu).toHaveBeenCalledOnceWith(MenuID.ADMIN); + }); + + describe('for regular user', () => { + beforeEach(() => { + authorizationService.isAuthorized = createSpy('isAuthorized').and.callFake((featureID) => { + return observableOf(false); + }); + }); + + beforeEach((done) => { + resolver.createAdminMenu$().subscribe((_) => { + done(); + }); + }); + + dontShowAdminSections(); + dontShowNewSection(); + dontShowEditSection(); + }); + + describe('regular user who can submit', () => { + beforeEach(() => { + authorizationService.isAuthorized = createSpy('isAuthorized') + .and.callFake((featureID: FeatureID) => { + return observableOf(featureID === FeatureID.CanSubmit); + }); + }); + + beforeEach((done) => { + resolver.createAdminMenu$().subscribe((_) => { + done(); + }); + }); + + it('should show "New Item" section', () => { + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'new_item', visible: true, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'new', visible: true, + })); + }); + + dontShowAdminSections(); + dontShowEditSection(); + }); + + describe('regular user who can edit items', () => { + beforeEach(() => { + authorizationService.isAuthorized = createSpy('isAuthorized') + .and.callFake((featureID: FeatureID) => { + return observableOf(featureID === FeatureID.CanEditItem); + }); + }); + + beforeEach((done) => { + resolver.createAdminMenu$().subscribe((_) => { + done(); + }); + }); + + it('should show "Edit Item" section', () => { + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'edit_item', visible: true, + })); + expect(menuService.addSection).toHaveBeenCalledWith(MenuID.ADMIN, jasmine.objectContaining({ + id: 'edit', visible: true, + })); + }); + + dontShowAdminSections(); + dontShowNewSection(); }); describe('for site admin', () => { diff --git a/src/app/shared/testing/menu-service.stub.ts b/src/app/shared/testing/menu-service.stub.ts index 926232bad0..71ee777157 100644 --- a/src/app/shared/testing/menu-service.stub.ts +++ b/src/app/shared/testing/menu-service.stub.ts @@ -66,6 +66,10 @@ export class MenuServiceStub { return observableOf(true); } + isMenuVisibleWithVisibleSections(id: MenuID): Observable { + return observableOf(true); + } + isMenuCollapsed(id: MenuID): Observable { return observableOf(false); } From 4f20d200cac0c117ef3f975adf7daee43c922227 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Tue, 6 Dec 2022 15:45:46 +0100 Subject: [PATCH 08/73] 97183 Tests for MenuService.isMenuVisibleWithVisibleSections --- src/app/shared/menu/menu.service.spec.ts | 78 ++++++++++++++++++++++++ src/app/shared/menu/menu.service.ts | 8 ++- 2 files changed, 83 insertions(+), 3 deletions(-) diff --git a/src/app/shared/menu/menu.service.spec.ts b/src/app/shared/menu/menu.service.spec.ts index 7a6b304ec1..26f32b64ef 100644 --- a/src/app/shared/menu/menu.service.spec.ts +++ b/src/app/shared/menu/menu.service.spec.ts @@ -243,6 +243,84 @@ describe('MenuService', () => { }); }); + describe('isMenuVisibleWithVisibleSections', () => { + it('should return false when the menu is empty', () => { + const fakeMenu = { + id: MenuID.ADMIN, + collapsed: false, + visible: true, + sections: {}, + previewCollapsed: false, + sectionToSubsectionIndex: {} + } as any; + spyOn(service, 'getMenu').and.returnValue(observableOf(fakeMenu)); + + const result = service.isMenuVisibleWithVisibleSections(MenuID.ADMIN); + const expected = cold('(b|)', { + b: false + }); + + expect(result).toBeObservable(expected); + }); + it('should return false when no top-level sections are visible', () => { + const noTopLevelVisibleSections = { + section: {id: 's1', visible: false}, + section_2: {id: 's2', visible: false}, + section_3: {id: 's3', visible: false}, + section_4: {id: 's1_1', visible: true, parentID: 's1'}, + section_5: {id: 's2_1', visible: true, parentID: 's2'}, + } + const fakeMenu = { + id: MenuID.ADMIN, + collapsed: false, + visible: true, + sections: noTopLevelVisibleSections, + previewCollapsed: false, + sectionToSubsectionIndex: { + 'section': ['section_4'], + 'section_2': ['section_5'], + } + } as any; + spyOn(service, 'getMenu').and.returnValue(observableOf(fakeMenu)); + + const result = service.isMenuVisibleWithVisibleSections(MenuID.ADMIN); + const expected = cold('(b|)', { + b: false + }); + + expect(result).toBeObservable(expected); + }); + + it('should return true when any top-level section is visible', () => { + const noTopLevelVisibleSections = { + section: {id: 's1', visible: false}, + section_2: {id: 's2', visible: true}, + section_3: {id: 's3', visible: false}, + section_4: {id: 's1_1', visible: true, parentID: 's1'}, + section_5: {id: 's2_1', visible: true, parentID: 's2'}, + } + const fakeMenu = { + id: MenuID.ADMIN, + collapsed: false, + visible: true, + sections: noTopLevelVisibleSections, + previewCollapsed: false, + sectionToSubsectionIndex: { + 'section': ['section_4'], + 'section_2': ['section_5'], + } + } as any; + spyOn(service, 'getMenu').and.returnValue(observableOf(fakeMenu)); + + const result = service.isMenuVisibleWithVisibleSections(MenuID.ADMIN); + const expected = cold('(b|)', { + b: true + }); + + expect(result).toBeObservable(expected); + }); + }); + describe('isMenuVisible', () => { beforeEach(() => { spyOn(service, 'getMenu').and.returnValue(observableOf(fakeMenu)); diff --git a/src/app/shared/menu/menu.service.ts b/src/app/shared/menu/menu.service.ts index ab513fbbdf..8e2cb8a894 100644 --- a/src/app/shared/menu/menu.service.ts +++ b/src/app/shared/menu/menu.service.ts @@ -182,7 +182,7 @@ export class MenuService { } /** - * Check if a given menu is visible and has visible sections + * Check if a given menu is visible and has visible top-level (!) sections * @param {MenuID} menuID The ID of the menu that is to be checked * @returns {Observable} Emits true if the given menu is * visible and has visible sections, emits false when it's hidden @@ -205,14 +205,16 @@ export class MenuService { } /** - * Check if a menu has at least one section that is visible. + * Check if a menu has at least one top-level (!) section that is visible. * @param {MenuID} menuID The ID of the menu that is to be checked * @returns {Observable} Emits true if the given menu has visible sections, emits false otherwise */ menuHasVisibleSections(menuID: MenuID): Observable { return this.getMenu(menuID).pipe( map((state: MenuState) => hasValue(state) - ? Object.values(state.sections).map(section => section.visible).reduce((x,y) => x || y, false) + ? Object.values(state.sections) + .map(section => section.visible && section.parentID === undefined) + .reduce((x,y) => x || y, false) : undefined) ); } From 92c7922fbea17a5656f1a31240340223d81ffaed Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Tue, 6 Dec 2022 15:59:01 +0100 Subject: [PATCH 09/73] 97183 Fixed linting issues --- src/app/menu.resolver.ts | 4 ++-- src/app/shared/menu/menu.service.spec.ts | 16 ++++++++-------- src/app/shared/menu/menu.service.ts | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/app/menu.resolver.ts b/src/app/menu.resolver.ts index 19413ab4be..933014c93a 100644 --- a/src/app/menu.resolver.ts +++ b/src/app/menu.resolver.ts @@ -275,7 +275,7 @@ export class MenuResolver implements Resolve { } as TextMenuItemModel, icon: 'plus', index: 0 - } + }; const editSubMenu = { id: 'edit', active: false, @@ -286,7 +286,7 @@ export class MenuResolver implements Resolve { } as TextMenuItemModel, icon: 'pencil-alt', index: 1 - } + }; const menuList = [ ...newSubMenuList, diff --git a/src/app/shared/menu/menu.service.spec.ts b/src/app/shared/menu/menu.service.spec.ts index 26f32b64ef..589b5ebf6b 100644 --- a/src/app/shared/menu/menu.service.spec.ts +++ b/src/app/shared/menu/menu.service.spec.ts @@ -245,7 +245,7 @@ describe('MenuService', () => { describe('isMenuVisibleWithVisibleSections', () => { it('should return false when the menu is empty', () => { - const fakeMenu = { + const testMenu = { id: MenuID.ADMIN, collapsed: false, visible: true, @@ -253,7 +253,7 @@ describe('MenuService', () => { previewCollapsed: false, sectionToSubsectionIndex: {} } as any; - spyOn(service, 'getMenu').and.returnValue(observableOf(fakeMenu)); + spyOn(service, 'getMenu').and.returnValue(observableOf(testMenu)); const result = service.isMenuVisibleWithVisibleSections(MenuID.ADMIN); const expected = cold('(b|)', { @@ -269,8 +269,8 @@ describe('MenuService', () => { section_3: {id: 's3', visible: false}, section_4: {id: 's1_1', visible: true, parentID: 's1'}, section_5: {id: 's2_1', visible: true, parentID: 's2'}, - } - const fakeMenu = { + }; + const testMenu = { id: MenuID.ADMIN, collapsed: false, visible: true, @@ -281,7 +281,7 @@ describe('MenuService', () => { 'section_2': ['section_5'], } } as any; - spyOn(service, 'getMenu').and.returnValue(observableOf(fakeMenu)); + spyOn(service, 'getMenu').and.returnValue(observableOf(testMenu)); const result = service.isMenuVisibleWithVisibleSections(MenuID.ADMIN); const expected = cold('(b|)', { @@ -298,8 +298,8 @@ describe('MenuService', () => { section_3: {id: 's3', visible: false}, section_4: {id: 's1_1', visible: true, parentID: 's1'}, section_5: {id: 's2_1', visible: true, parentID: 's2'}, - } - const fakeMenu = { + }; + const testMenu = { id: MenuID.ADMIN, collapsed: false, visible: true, @@ -310,7 +310,7 @@ describe('MenuService', () => { 'section_2': ['section_5'], } } as any; - spyOn(service, 'getMenu').and.returnValue(observableOf(fakeMenu)); + spyOn(service, 'getMenu').and.returnValue(observableOf(testMenu)); const result = service.isMenuVisibleWithVisibleSections(MenuID.ADMIN); const expected = cold('(b|)', { diff --git a/src/app/shared/menu/menu.service.ts b/src/app/shared/menu/menu.service.ts index 8e2cb8a894..eeb6c0f2c2 100644 --- a/src/app/shared/menu/menu.service.ts +++ b/src/app/shared/menu/menu.service.ts @@ -208,7 +208,7 @@ export class MenuService { * Check if a menu has at least one top-level (!) section that is visible. * @param {MenuID} menuID The ID of the menu that is to be checked * @returns {Observable} Emits true if the given menu has visible sections, emits false otherwise - */ + */ menuHasVisibleSections(menuID: MenuID): Observable { return this.getMenu(menuID).pipe( map((state: MenuState) => hasValue(state) From 86164f743e07f9c6ffa915132f20e261c5b8c45c Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 8 Dec 2022 11:05:11 +0100 Subject: [PATCH 10/73] 97075: Edit metadata - Reset reinstatable on change --- .../dso-edit-metadata-form.ts | 21 +++++++++++++++++++ .../dso-edit-metadata.component.html | 20 +++++++++--------- .../dso-edit-metadata.component.ts | 1 + 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts index 984bec575e..9e5f2c22e1 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -130,6 +130,14 @@ export class DsoEditMetadataValue { isReinstatable(): boolean { return hasValue(this.reinstatableValue) || hasValue(this.reinstatableChange); } + + /** + * Reset the state of the re-instatable properties + */ + resetReinstatable() { + this.reinstatableValue = undefined; + this.reinstatableChange = undefined; + } } /** @@ -242,6 +250,7 @@ export class DsoEditMetadataForm { * undone afterwards */ discard(): void { + this.resetReinstatable(); Object.entries(this.fields).forEach(([field, values]) => { let removeFromIndex = -1; values.forEach((value, index) => { @@ -293,6 +302,18 @@ export class DsoEditMetadataForm { .some((value) => value.isReinstatable())); } + /** + * Reset the state of the re-instatable properties and values + */ + resetReinstatable() { + this.reinstatableNewValues = {}; + Object.values(this.fields).forEach((values) => { + values.forEach((value) => { + value.resetReinstatable(); + }); + }); + } + /** * Get the json PATCH operations for the current changes within this form */ diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index 7578f2ec99..9664fd4d93 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -43,19 +43,19 @@
- - - - @@ -82,25 +82,25 @@
- - - -
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index eee2bc963c..2f6f32c1c1 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -186,6 +186,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { * Validate the metadata field first */ setMetadataField() { + this.form.resetReinstatable(); this.loadingFieldValidation$.next(true); this.metadataFieldSelectorComponent.validate().subscribe((valid) => { this.loadingFieldValidation$.next(false); From c24e904c660bd63db83718064508dd697e4046ae Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 8 Dec 2022 11:08:15 +0100 Subject: [PATCH 11/73] 97075: Edit metadata - reset reinstatable on value delete --- .../dso-edit-metadata/dso-edit-metadata.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index 9664fd4d93..d3d1ee1596 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -91,7 +91,7 @@
- +
@@ -74,7 +74,8 @@ *ngFor="let mdValue of form.fields[mdField]; let idx = index">
{{ mdValue.newValue.value }}
- +
{{ mdValue.newValue.language }}
@@ -87,7 +88,7 @@ + + + + + +
+
+
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss new file mode 100644 index 0000000000..926dc6f471 --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss @@ -0,0 +1,8 @@ +.ds-success { + background-color: var(--bs-success-bg); + border: 1px solid var(--bs-success); +} + +.ds-drag-handle:not(.disabled) { + cursor: grab; +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts new file mode 100644 index 0000000000..767bcf70bc --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts @@ -0,0 +1,62 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { DsoEditMetadataChangeType, DsoEditMetadataValue } from '../dso-edit-metadata-form'; +import { Observable } from 'rxjs/internal/Observable'; + +@Component({ + selector: 'ds-dso-edit-metadata-value', + styleUrls: ['./dso-edit-metadata-value.component.scss', '../dso-edit-metadata-shared/dso-edit-metadata-cells.scss'], + templateUrl: './dso-edit-metadata-value.component.html', +}) +/** + * Component displaying a single editable row for a metadata value + */ +export class DsoEditMetadataValueComponent { + /** + * Editable metadata value to show + */ + @Input() mdValue: DsoEditMetadataValue; + + /** + * Type of DSO we're displaying values for + * Determines i18n messages + */ + @Input() dsoType: string; + + /** + * Observable to check if the form is being saved or not + * Will disable certain functionality while saving + */ + @Input() saving$: Observable; + + /** + * Is this value the only one within its list? + * Will disable certain functionality like dragging (because dragging within a list of 1 is pointless) + */ + @Input() isOnlyValue = false; + + /** + * Emits when the user clicked edit + */ + @Output() edit: EventEmitter = new EventEmitter(); + + /** + * Emits when the user clicked confirm + */ + @Output() confirm: EventEmitter = new EventEmitter(); + + /** + * Emits when the user clicked remove + */ + @Output() remove: EventEmitter = new EventEmitter(); + + /** + * Emits when the user clicked undo + */ + @Output() undo: EventEmitter = new EventEmitter(); + + /** + * The DsoEditMetadataChangeType enumeration for access in the component's template + * @type {DsoEditMetadataChangeType} + */ + public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType; +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index b9ad2b7162..026490da7c 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -19,95 +19,36 @@
-
-
{{ dsoType + '.edit.metadata.headers.field' | translate }}
-
-
-
{{ dsoType + '.edit.metadata.headers.value' | translate }}
-
{{ dsoType + '.edit.metadata.headers.language' | translate }}
-
{{ dsoType + '.edit.metadata.headers.edit' | translate }}
-
-
-
+
- + +
-
-
- -
-
- -
-
-
- - - - -
-
-
+ +
{{ mdField }}
-
-
-
-
{{ mdValue.newValue.value }}
- -
-
-
{{ mdValue.newValue.language }}
- -
-
-
- - - - - - -
-
-
-
+ +
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss index 954d15d10d..caf84010f3 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss @@ -3,6 +3,8 @@ max-width: var(--ds-dso-edit-field-width); background-color: var(--bs-gray-100); font-weight: bold; + padding: 1rem; + border: 1px solid var(--bs-gray-200); &.ds-success { background-color: var(--bs-success-bg); @@ -10,66 +12,6 @@ } } -.lbl-cell, -.ds-flex-cell { - padding: 1rem; - border: 1px solid var(--bs-gray-200); -} - -.ds-lang-cell { - min-width: var(--ds-dso-edit-lang-width); - max-width: var(--ds-dso-edit-lang-width); -} - -.ds-edit-cell { - min-width: var(--ds-dso-edit-actions-width); -} - -.ds-value-row { - background-color: white; - - &:active { - cursor: grabbing; - } - - &.ds-warning { - background-color: var(--bs-warning-bg); - - .ds-flex-cell { - border: 1px solid var(--bs-warning); - } - } - - &.ds-danger { - background-color: var(--bs-danger-bg); - - .ds-flex-cell { - border: 1px solid var(--bs-danger); - } - } - - &.ds-success { - background-color: var(--bs-success-bg); - - .ds-flex-cell { - border: 1px solid var(--bs-success); - } - } -} - -.ds-drop-list { - background-color: var(--bs-gray-500); -} - .ds-field-row { border: 1px solid var(--bs-gray-400); } - - -.ds-header-row { - background-color: var(--bs-gray-100); -} - -.ds-drag-handle:not(.disabled) { - cursor: grab; -} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index 2f6f32c1c1..bc7bfd9593 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -1,7 +1,7 @@ import { Component, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { AlertType } from '../../shared/alert/aletr-type'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; -import { DsoEditMetadataChangeType, DsoEditMetadataForm } from './dso-edit-metadata-form'; +import { DsoEditMetadataForm } from './dso-edit-metadata-form'; import { map } from 'rxjs/operators'; import { ActivatedRoute, Data } from '@angular/router'; import { combineLatest as observableCombineLatest } from 'rxjs/internal/observable/combineLatest'; @@ -18,6 +18,7 @@ import { ResourceType } from '../../core/shared/resource-type'; import { NotificationsService } from '../../shared/notifications/notifications.service'; import { TranslateService } from '@ngx-translate/core'; import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component'; +import { Observable } from 'rxjs/internal/Observable'; @Component({ selector: 'ds-dso-edit-metadata', @@ -76,18 +77,18 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { */ loadingFieldValidation$: BehaviorSubject = new BehaviorSubject(false); + /** + * Combination of saving$ and loadingFieldValidation$ + * Emits true when any of the two emit true + */ + savingOrLoadingFieldValidation$: Observable; + /** * The AlertType enumeration for access in the component's template * @type {AlertType} */ public AlertTypeEnum = AlertType; - /** - * The DsoEditMetadataChangeType enumeration for access in the component's template - * @type {DsoEditMetadataChangeType} - */ - public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType; - /** * Subscription for updating the current DSpaceObject * Unsubscribed from in ngOnDestroy() @@ -118,6 +119,9 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { this.initDataService(); this.initForm(); } + this.savingOrLoadingFieldValidation$ = observableCombineLatest([this.saving$, this.loadingFieldValidation$]).pipe( + map(([saving, loading]) => saving || loading), + ); } /** @@ -180,6 +184,16 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { }); } + /** + * Confirm the newly added value + * @param saved Whether or not the value was manually saved (only then, add the value to its metadata field) + */ + confirmNewValue(saved: boolean) { + if (saved) { + this.setMetadataField(); + } + } + /** * Set the metadata field of the temporary added new metadata value * This will move the new value to its respective parent metadata field diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts index 263d394906..0a9294105b 100644 --- a/src/app/dso-shared/dso-shared.module.ts +++ b/src/app/dso-shared/dso-shared.module.ts @@ -2,6 +2,9 @@ import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { DsoEditMetadataComponent } from './dso-edit-metadata/dso-edit-metadata.component'; import { MetadataFieldSelectorComponent } from './dso-edit-metadata/metadata-field-selector/metadata-field-selector.component'; +import { DsoEditMetadataFieldValuesComponent } from './dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component'; +import { DsoEditMetadataValueComponent } from './dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component'; +import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component'; @NgModule({ imports: [ @@ -10,6 +13,9 @@ import { MetadataFieldSelectorComponent } from './dso-edit-metadata/metadata-fie declarations: [ DsoEditMetadataComponent, MetadataFieldSelectorComponent, + DsoEditMetadataFieldValuesComponent, + DsoEditMetadataValueComponent, + DsoEditMetadataHeadersComponent, ], exports: [ DsoEditMetadataComponent, From 454bfd2f9fb3488e67cc0728e4583a8a8e4b484f Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Mon, 12 Dec 2022 16:32:13 +0100 Subject: [PATCH 17/73] 97075: Feedback 2022-12-09 - debounce on language input --- .../dso-edit-metadata-value.component.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html index b9da828bd4..458b9d9e82 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html @@ -7,7 +7,8 @@
{{ mdValue.newValue.language }}
- +
From 50f7211947193e41abe4504590270fe0a0220c4d Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Tue, 13 Dec 2022 14:38:53 +0100 Subject: [PATCH 18/73] 93746: Edit metadata redesign - Virtual metadata --- src/app/core/data/relationship.service.ts | 37 +++++++++++- ...-edit-metadata-field-values.component.html | 3 +- ...so-edit-metadata-field-values.component.ts | 6 ++ .../dso-edit-metadata-value.component.html | 46 ++++++++------- .../dso-edit-metadata-value.component.ts | 56 ++++++++++++++++++- .../dso-edit-metadata.component.html | 4 +- .../metadata-representation-list.component.ts | 33 +---------- src/assets/i18n/en.json5 | 2 + 8 files changed, 130 insertions(+), 57 deletions(-) diff --git a/src/app/core/data/relationship.service.ts b/src/app/core/data/relationship.service.ts index b99541f3c5..50a4888343 100644 --- a/src/app/core/data/relationship.service.ts +++ b/src/app/core/data/relationship.service.ts @@ -1,7 +1,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Inject, Injectable } from '@angular/core'; import { MemoizedSelector, select, Store } from '@ngrx/store'; -import { combineLatest as observableCombineLatest, Observable } from 'rxjs'; +import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs'; import { distinctUntilChanged, filter, map, mergeMap, startWith, switchMap, take, tap } from 'rxjs/operators'; import { compareArraysUsingIds, PAGINATED_RELATIONS_TO_ITEMS_OPERATOR, @@ -44,6 +44,11 @@ import { DeleteRequest, FindListOptions, PostRequest, RestRequest } from './requ import { RequestService } from './request.service'; import { RequestEntryState } from './request.reducer'; import { NoContent } from '../shared/NoContent.model'; +import { MetadataValue } from '../shared/metadata.models'; +import { MetadataRepresentation } from '../shared/metadata-representation/metadata-representation.model'; +import { MetadatumRepresentation } from '../shared/metadata-representation/metadatum/metadatum-representation.model'; +import { ItemMetadataRepresentation } from '../shared/metadata-representation/item/item-metadata-representation.model'; +import { DSpaceObject } from '../shared/dspace-object.model'; const relationshipListsStateSelector = (state: AppState) => state.relationshipLists; @@ -523,4 +528,34 @@ export class RelationshipService extends DataService { }) as Observable>>; } + + /** + * Resolve a {@link MetadataValue} into a {@link MetadataRepresentation} of the correct type + * @param metadatum {@link MetadataValue} to resolve + * @param parentItem Parent dspace object the metadata value belongs to + * @param itemType The type of item this metadata value represents (will only be used when no related item can be found, as a fallback) + */ + resolveMetadataRepresentation(metadatum: MetadataValue, parentItem: DSpaceObject, itemType: string): Observable { + if (metadatum.isVirtual) { + return this.findById(metadatum.virtualValue, true, false, followLink('leftItem'), followLink('rightItem')).pipe( + getFirstSucceededRemoteData(), + switchMap((relRD: RemoteData) => + observableCombineLatest(relRD.payload.leftItem, relRD.payload.rightItem).pipe( + filter(([leftItem, rightItem]) => leftItem.hasCompleted && rightItem.hasCompleted), + map(([leftItem, rightItem]) => { + if (!leftItem.hasSucceeded || !rightItem.hasSucceeded) { + return observableOf(Object.assign(new MetadatumRepresentation(itemType), metadatum)); + } else if (rightItem.hasSucceeded && leftItem.payload.id === parentItem.id) { + return rightItem.payload; + } else if (rightItem.payload.id === parentItem.id) { + return leftItem.payload; + } + }), + map((item: Item) => Object.assign(new ItemMetadataRepresentation(metadatum), item)) + ) + )); + } else { + return observableOf(Object.assign(new MetadatumRepresentation(itemType), metadatum)); + } + } } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html index b600e6a228..6a0386da8e 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html @@ -1,5 +1,6 @@ -
+
-
-
{{ mdValue.newValue.value }}
- +
+ {{ mdRepresentationName$ | async }} + +
{{ mdValue.newValue.language }}
@@ -12,22 +16,24 @@
- - - - +
+ + + + +
- {{ mdField }}
Object.assign(new MetadataValue(), metadatum)) - .map((metadatum: MetadataValue) => { - if (metadatum.isVirtual) { - return this.relationshipService.findById(metadatum.virtualValue, true, false, followLink('leftItem'), followLink('rightItem')).pipe( - getFirstSucceededRemoteData(), - switchMap((relRD: RemoteData) => - observableCombineLatest(relRD.payload.leftItem, relRD.payload.rightItem).pipe( - filter(([leftItem, rightItem]) => leftItem.hasCompleted && rightItem.hasCompleted), - map(([leftItem, rightItem]) => { - if (!leftItem.hasSucceeded || !rightItem.hasSucceeded) { - return observableOf(Object.assign(new MetadatumRepresentation(this.itemType), metadatum)); - } else if (rightItem.hasSucceeded && leftItem.payload.id === this.parentItem.id) { - return rightItem.payload; - } else if (rightItem.payload.id === this.parentItem.id) { - return leftItem.payload; - } - }), - map((item: Item) => Object.assign(new ItemMetadataRepresentation(metadatum), item)) - ) - )); - } else { - return observableOf(Object.assign(new MetadatumRepresentation(this.itemType), metadatum)); - } - }) + .map((metadatum: MetadataValue) => this.relationshipService.resolveMetadataRepresentation(metadatum, this.parentItem, this.itemType)), ); } } diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 93ee1427af..6e9bae138e 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -1803,6 +1803,8 @@ "item.edit.metadata.edit.buttons.unedit": "Stop editing", + "item.edit.metadata.edit.buttons.virtual": "This is a virtual metadata value, i.e. a value inherited from a related entity. It can’t be modified directly. Add or remove the corresponding relationship in the \"Relationships\" tab", + "item.edit.metadata.empty": "The item currently doesn't contain any metadata. Click Add to start adding a metadata value.", "item.edit.metadata.headers.edit": "Edit", From 43d9e3f958804745ebcc24a372f80db26aa1c234 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Wed, 14 Dec 2022 16:00:10 +0100 Subject: [PATCH 19/73] 93746: Feedback 2022-12-14 - missing types & tooltip width --- .../dso-edit-metadata-form.ts | 38 +++++++++---------- .../dso-edit-metadata-value.component.scss | 4 ++ .../dso-edit-metadata-value.component.ts | 19 +++++++--- .../dso-edit-metadata.component.ts | 10 ++--- .../metadata-field-selector.component.ts | 8 ++-- src/styles/_custom_variables.scss | 1 + 6 files changed, 46 insertions(+), 34 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts index 2bbc923187..fde0ecf9d4 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -187,7 +187,7 @@ export class DsoEditMetadataForm { Object.entries(metadata).forEach(([mdField, values]: [string, MetadataValue[]]) => { this.originalFieldKeys.push(mdField); this.fieldKeys.push(mdField); - this.fields[mdField] = values.map((value) => new DsoEditMetadataValue(value)); + this.fields[mdField] = values.map((value: MetadataValue) => new DsoEditMetadataValue(value)); }); } @@ -205,7 +205,7 @@ export class DsoEditMetadataForm { * Clear the temporary value afterwards * @param mdField */ - setMetadataField(mdField: string) { + setMetadataField(mdField: string): void { this.newValue.editing = false; this.addValueToField(this.newValue, mdField); this.newValue = undefined; @@ -217,7 +217,7 @@ export class DsoEditMetadataForm { * @param mdField * @private */ - private addValueToField(value: DsoEditMetadataValue, mdField: string) { + private addValueToField(value: DsoEditMetadataValue, mdField: string): void { if (isEmpty(this.fields[mdField])) { this.fieldKeys.push(mdField); this.fields[mdField] = []; @@ -230,7 +230,7 @@ export class DsoEditMetadataForm { * @param mdField * @param index */ - remove(mdField: string, index: number) { + remove(mdField: string, index: number): void { if (isNotEmpty(this.fields[mdField])) { this.fields[mdField].splice(index, 1); if (this.fields[mdField].length === 0) { @@ -244,7 +244,7 @@ export class DsoEditMetadataForm { * Returns if at least one value within the form contains a change */ hasChanges(): boolean { - return Object.values(this.fields).some((values) => values.some((value) => value.hasChanges())); + return Object.values(this.fields).some((values: DsoEditMetadataValue[]) => values.some((value: DsoEditMetadataValue) => value.hasChanges())); } /** @@ -253,9 +253,9 @@ export class DsoEditMetadataForm { */ discard(): void { this.resetReinstatable(); - Object.entries(this.fields).forEach(([field, values]) => { + Object.entries(this.fields).forEach(([field, values]: [string, DsoEditMetadataValue[]]) => { let removeFromIndex = -1; - values.forEach((value, index) => { + values.forEach((value: DsoEditMetadataValue, index: number) => { if (value.change === DsoEditMetadataChangeType.ADD) { if (isEmpty(this.reinstatableNewValues[field])) { this.reinstatableNewValues[field] = []; @@ -272,7 +272,7 @@ export class DsoEditMetadataForm { this.fields[field].splice(removeFromIndex, this.fields[field].length - removeFromIndex); } }); - this.fieldKeys.forEach((field) => { + this.fieldKeys.forEach((field: string) => { if (this.originalFieldKeys.indexOf(field) < 0) { delete this.fields[field]; } @@ -281,13 +281,13 @@ export class DsoEditMetadataForm { } reinstate(): void { - Object.values(this.fields).forEach((values) => { - values.forEach((value) => { + Object.values(this.fields).forEach((values: DsoEditMetadataValue[]) => { + values.forEach((value: DsoEditMetadataValue) => { value.reinstate(); }); }); - Object.entries(this.reinstatableNewValues).forEach(([field, values]) => { - values.forEach((value) => { + Object.entries(this.reinstatableNewValues).forEach(([field, values]: [string, DsoEditMetadataValue[]]) => { + values.forEach((value: DsoEditMetadataValue) => { this.addValueToField(value, field); }); }); @@ -300,17 +300,17 @@ export class DsoEditMetadataForm { isReinstatable(): boolean { return isNotEmpty(this.reinstatableNewValues) || Object.values(this.fields) - .some((values) => values - .some((value) => value.isReinstatable())); + .some((values: DsoEditMetadataValue[]) => values + .some((value: DsoEditMetadataValue) => value.isReinstatable())); } /** * Reset the state of the re-instatable properties and values */ - resetReinstatable() { + resetReinstatable(): void { this.reinstatableNewValues = {}; - Object.values(this.fields).forEach((values) => { - values.forEach((value) => { + Object.values(this.fields).forEach((values: DsoEditMetadataValue[]) => { + values.forEach((value: DsoEditMetadataValue) => { value.resetReinstatable(); }); }); @@ -321,8 +321,8 @@ export class DsoEditMetadataForm { */ getOperations(): Operation[] { const operations: Operation[] = []; - Object.entries(this.fields).forEach(([field, values]) => { - values.forEach((value, place) => { + Object.entries(this.fields).forEach(([field, values]: [string, DsoEditMetadataValue[]]) => { + values.forEach((value: DsoEditMetadataValue, place: number) => { if (value.hasChanges()) { let operation: MetadataPatchOperation; if (value.change === DsoEditMetadataChangeType.UPDATE) { diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss index 926dc6f471..1196aa1940 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss @@ -6,3 +6,7 @@ .ds-drag-handle:not(.disabled) { cursor: grab; } + +::ng-deep .tooltip-inner { + min-width: var(--ds-dso-edit-virtual-tooltip-min-width); +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts index 64024ef302..b61255e4fe 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts @@ -1,14 +1,17 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { DsoEditMetadataChangeType, DsoEditMetadataValue } from '../dso-edit-metadata-form'; import { Observable } from 'rxjs/internal/Observable'; -import { MetadataRepresentationType } from '../../../core/shared/metadata-representation/metadata-representation.model'; +import { + MetadataRepresentation, + MetadataRepresentationType +} from '../../../core/shared/metadata-representation/metadata-representation.model'; import { RelationshipService } from '../../../core/data/relationship.service'; import { DSpaceObject } from '../../../core/shared/dspace-object.model'; -import { of } from 'rxjs/internal/observable/of'; import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model'; import { map } from 'rxjs/operators'; import { getItemPageRoute } from '../../../item-page/item-page-routing-paths'; import { DSONameService } from '../../../core/breadcrumbs/dso-name.service'; +import { EMPTY } from 'rxjs/internal/observable/empty'; @Component({ selector: 'ds-dso-edit-metadata-value', @@ -100,15 +103,19 @@ export class DsoEditMetadataValueComponent implements OnInit { /** * Initialise potential properties of a virtual metadata value */ - initVirtualProperties() { + initVirtualProperties(): void { this.mdRepresentation$ = this.mdValue.newValue.isVirtual ? this.relationshipService.resolveMetadataRepresentation(this.mdValue.newValue, this.dso, 'Item') - .pipe(map((mdRepresentation) => mdRepresentation.representationType === MetadataRepresentationType.Item ? mdRepresentation : null)) : of(null); + .pipe( + map((mdRepresentation: MetadataRepresentation) => + mdRepresentation.representationType === MetadataRepresentationType.Item ? mdRepresentation as ItemMetadataRepresentation : null + ) + ) : EMPTY; this.mdRepresentationItemRoute$ = this.mdRepresentation$.pipe( - map((mdRepresentation) => mdRepresentation ? getItemPageRoute(mdRepresentation) : null), + map((mdRepresentation: ItemMetadataRepresentation) => mdRepresentation ? getItemPageRoute(mdRepresentation) : null), ); this.mdRepresentationName$ = this.mdRepresentation$.pipe( - map((mdRepresentation) => mdRepresentation ? this.dsoNameService.getName(mdRepresentation) : null), + map((mdRepresentation: ItemMetadataRepresentation) => mdRepresentation ? this.dsoNameService.getName(mdRepresentation) : null), ); } } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index bc7bfd9593..e98cc3663d 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -120,7 +120,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { this.initForm(); } this.savingOrLoadingFieldValidation$ = observableCombineLatest([this.saving$, this.loadingFieldValidation$]).pipe( - map(([saving, loading]) => saving || loading), + map(([saving, loading]: [boolean, boolean]) => saving || loading), ); } @@ -188,7 +188,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { * Confirm the newly added value * @param saved Whether or not the value was manually saved (only then, add the value to its metadata field) */ - confirmNewValue(saved: boolean) { + confirmNewValue(saved: boolean): void { if (saved) { this.setMetadataField(); } @@ -199,10 +199,10 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { * This will move the new value to its respective parent metadata field * Validate the metadata field first */ - setMetadataField() { + setMetadataField(): void { this.form.resetReinstatable(); this.loadingFieldValidation$.next(true); - this.metadataFieldSelectorComponent.validate().subscribe((valid) => { + this.metadataFieldSelectorComponent.validate().subscribe((valid: boolean) => { this.loadingFieldValidation$.next(false); if (valid) { this.form.setMetadataField(this.newMdField); @@ -238,7 +238,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { /** * Unsubscribe from any open subscriptions */ - ngOnDestroy() { + ngOnDestroy(): void { if (hasValue(this.dsoUpdateSubscription)) { this.dsoUpdateSubscription.unsubscribe(); } diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts index 7fc56f8dc2..f3f6f15914 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts @@ -119,7 +119,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV ); this.mdFieldOptions$ = this.query$.pipe( distinctUntilChanged(), - switchMap((query) => { + switchMap((query: string) => { this.showInvalid = false; if (query !== null) { return this.registryService.queryMetadataFields(query, null, true, false, followLink('schema')).pipe( @@ -152,7 +152,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV metadataFieldsToString(), take(1), map((fields: string[]) => fields.indexOf(this.mdField) > -1), - tap((exists) => this.showInvalid = !exists), + tap((exists: boolean) => this.showInvalid = !exists), ); } @@ -160,7 +160,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV * Select a metadata field from the dropdown optipons * @param mdFieldOption */ - select(mdFieldOption: string) { + select(mdFieldOption: string): void { this.selectedValueLoading = true; this.input.setValue(mdFieldOption); } @@ -169,6 +169,6 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV * Unsubscribe from any open subscriptions */ ngOnDestroy(): void { - this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe()); + this.subs.filter((sub: Subscription) => hasValue(sub)).forEach((sub: Subscription) => sub.unsubscribe()); } } diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index e01018c044..3498deea7d 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -89,4 +89,5 @@ --ds-dso-edit-field-width: 210px; --ds-dso-edit-lang-width: 90px; --ds-dso-edit-actions-width: 173px; + --ds-dso-edit-virtual-tooltip-min-width: 300px; } From 64d96453c3b81e6e8b0bdafdac271df3a425b53e Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 15 Dec 2022 17:25:23 +0100 Subject: [PATCH 20/73] 93747: Edit metadata redesign - drag to reorder pt1 --- .../metadata-patch-move-operation.model.ts | 33 +++++ ...-edit-metadata-field-values.component.html | 5 +- ...-edit-metadata-field-values.component.scss | 4 + ...so-edit-metadata-field-values.component.ts | 32 ++++- .../dso-edit-metadata-form.ts | 115 +++++++++++++----- .../dso-edit-metadata-value.component.html | 4 +- .../dso-edit-metadata-value.component.scss | 4 + .../dso-edit-metadata-value.component.ts | 5 + .../dso-edit-metadata.component.html | 1 + .../dso-edit-metadata.component.ts | 13 +- 10 files changed, 181 insertions(+), 35 deletions(-) create mode 100644 src/app/core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-move-operation.model.ts diff --git a/src/app/core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-move-operation.model.ts b/src/app/core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-move-operation.model.ts new file mode 100644 index 0000000000..962d53dfee --- /dev/null +++ b/src/app/core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-move-operation.model.ts @@ -0,0 +1,33 @@ +import { MetadataPatchOperation } from './metadata-patch-operation.model'; +import { Operation } from 'fast-json-patch'; + +/** + * Wrapper object for a metadata patch move Operation + */ +export class MetadataPatchMoveOperation extends MetadataPatchOperation { + static operationType = 'move'; + + /** + * The original place of the metadata value to move + */ + from: number; + + /** + * The new place to move the metadata value to + */ + to: number; + + constructor(field: string, from: number, to: number) { + super(MetadataPatchMoveOperation.operationType, field); + this.from = from; + this.to = to; + } + + /** + * Transform the MetadataPatchOperation into a fast-json-patch Operation by constructing its path and other properties + * using the information provided. + */ + toOperation(): Operation { + return { op: this.op as any, from: `/metadata/${this.field}/${this.from}`, path: `/metadata/${this.field}/${this.to}` }; + } +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html index 6a0386da8e..190d5a7e31 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html @@ -1,4 +1,4 @@ -
+
+ (undo)="mdValue.change === DsoEditMetadataChangeTypeEnum.ADD ? form.remove(mdField, idx) : mdValue.discard(); valueSaved.emit()" + (dragging)="$event ? draggingMdField$.next(mdField) : draggingMdField$.next(null)">
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.scss index afe5084bc2..6b52c4f4b3 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.scss @@ -1,3 +1,7 @@ .ds-drop-list { background-color: var(--bs-gray-500); + + &.disabled { + opacity: 0.3; + } } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.ts index 0db427c218..2702e0ba1f 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.ts @@ -1,7 +1,9 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { DsoEditMetadataChangeType, DsoEditMetadataForm } from '../dso-edit-metadata-form'; +import { DsoEditMetadataChangeType, DsoEditMetadataForm, DsoEditMetadataValue } from '../dso-edit-metadata-form'; import { Observable } from 'rxjs/internal/Observable'; import { DSpaceObject } from '../../../core/shared/dspace-object.model'; +import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; @Component({ selector: 'ds-dso-edit-metadata-field-values', @@ -38,6 +40,12 @@ export class DsoEditMetadataFieldValuesComponent { */ @Input() saving$: Observable; + /** + * Tracks for which metadata-field a drag operation is taking place + * Null when no drag is currently happening for any field + */ + @Input() draggingMdField$: BehaviorSubject; + /** * Emit when the value has been saved within the form */ @@ -48,4 +56,26 @@ export class DsoEditMetadataFieldValuesComponent { * @type {DsoEditMetadataChangeType} */ public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType; + + /** + * Drop a value into a new position + * Update the form's value array for the current field to match the dropped position + * Update the values their place property to match the new order + * Send an update to the parent + * @param event + */ + drop(event: CdkDragDrop) { + const dragIndex = event.previousIndex; + const dropIndex = event.currentIndex; + // Move the value within its field + moveItemInArray(this.form.fields[this.mdField], dragIndex, dropIndex); + // Update all the values in this field their place property + this.form.fields[this.mdField].forEach((value: DsoEditMetadataValue, index: number) => { + value.newValue.place = index; + value.confirmChanges(); + }); + // Update the form statuses + this.form.resetReinstatable(); + this.valueSaved.emit(); + } } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts index fde0ecf9d4..cc1f55838b 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -1,10 +1,11 @@ import { MetadataMap, MetadataValue } from '../../core/shared/metadata.models'; import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../shared/empty.util'; -import { Operation } from 'fast-json-patch'; +import { MoveOperation, Operation } from 'fast-json-patch'; import { MetadataPatchReplaceOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-replace-operation.model'; import { MetadataPatchRemoveOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-remove-operation.model'; import { MetadataPatchAddOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-add-operation.model'; -import { MetadataPatchOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-operation.model'; +import { ArrayMoveChangeAnalyzer } from '../../core/data/array-move-change-analyzer.service'; +import { MetadataPatchMoveOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-move-operation.model'; /* tslint:disable:max-classes-per-file */ @@ -69,7 +70,7 @@ export class DsoEditMetadataValue { */ confirmChanges(finishEditing = false) { if (hasNoValue(this.change) || this.change === DsoEditMetadataChangeType.UPDATE) { - if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language)) { + if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language || this.originalValue.place !== this.newValue.place)) { this.change = DsoEditMetadataChangeType.UPDATE; } else { this.change = undefined; @@ -187,7 +188,7 @@ export class DsoEditMetadataForm { Object.entries(metadata).forEach(([mdField, values]: [string, MetadataValue[]]) => { this.originalFieldKeys.push(mdField); this.fieldKeys.push(mdField); - this.fields[mdField] = values.map((value: MetadataValue) => new DsoEditMetadataValue(value)); + this.setValuesForFieldSorted(mdField, values.map((value: MetadataValue) => new DsoEditMetadataValue(value))); }); } @@ -208,6 +209,10 @@ export class DsoEditMetadataForm { setMetadataField(mdField: string): void { this.newValue.editing = false; this.addValueToField(this.newValue, mdField); + // Set the place property to match the new value's position within its field + const place = this.fields[mdField].length - 1; + this.fields[mdField][place].originalValue.place = place; + this.fields[mdField][place].newValue.place = place; this.newValue = undefined; } @@ -253,6 +258,7 @@ export class DsoEditMetadataForm { */ discard(): void { this.resetReinstatable(); + // Discard changes from each value from each field Object.entries(this.fields).forEach(([field, values]: [string, DsoEditMetadataValue[]]) => { let removeFromIndex = -1; values.forEach((value: DsoEditMetadataValue, index: number) => { @@ -272,25 +278,39 @@ export class DsoEditMetadataForm { this.fields[field].splice(removeFromIndex, this.fields[field].length - removeFromIndex); } }); + // Delete new metadata fields this.fieldKeys.forEach((field: string) => { if (this.originalFieldKeys.indexOf(field) < 0) { delete this.fields[field]; } }); this.fieldKeys = [...this.originalFieldKeys]; + // Reset the order of values within their fields to match their place property + this.fieldKeys.forEach((field: string) => { + this.setValuesForFieldSorted(field, this.fields[field]); + }); } + /** + * Undo any previously discarded changes + */ reinstate(): void { + // Reinstate each value Object.values(this.fields).forEach((values: DsoEditMetadataValue[]) => { values.forEach((value: DsoEditMetadataValue) => { value.reinstate(); }); }); + // Re-add new values Object.entries(this.reinstatableNewValues).forEach(([field, values]: [string, DsoEditMetadataValue[]]) => { values.forEach((value: DsoEditMetadataValue) => { this.addValueToField(value, field); }); }); + // Reset the order of values within their fields to match their place property + this.fieldKeys.forEach((field: string) => { + this.setValuesForFieldSorted(field, this.fields[field]); + }); this.reinstatableNewValues = {}; } @@ -317,34 +337,73 @@ export class DsoEditMetadataForm { } /** - * Get the json PATCH operations for the current changes within this form + * Set the values of a metadata field and sort them by their newValue's place property + * @param mdField + * @param values */ - getOperations(): Operation[] { + private setValuesForFieldSorted(mdField: string, values: DsoEditMetadataValue[]) { + this.fields[mdField] = values.sort((a: DsoEditMetadataValue, b: DsoEditMetadataValue) => a.newValue.place - b.newValue.place); + } + + /** + * Get the json PATCH operations for the current changes within this form + * For each metadata field, it'll return operations in the following order: replace, remove (from last to first place), add and move + * This order is important, as each operation is executed in succession of the previous one + */ + getOperations(moveAnalyser: ArrayMoveChangeAnalyzer): Operation[] { const operations: Operation[] = []; Object.entries(this.fields).forEach(([field, values]: [string, DsoEditMetadataValue[]]) => { - values.forEach((value: DsoEditMetadataValue, place: number) => { - if (value.hasChanges()) { - let operation: MetadataPatchOperation; - if (value.change === DsoEditMetadataChangeType.UPDATE) { - operation = new MetadataPatchReplaceOperation(field, place, { - value: value.newValue.value, - language: value.newValue.language, - }); - } else if (value.change === DsoEditMetadataChangeType.REMOVE) { - operation = new MetadataPatchRemoveOperation(field, place); - } else if (value.change === DsoEditMetadataChangeType.ADD) { - operation = new MetadataPatchAddOperation(field, { - value: value.newValue.value, - language: value.newValue.language, - }); - } else { - console.warn('Illegal metadata change state detected for', value); + const replaceOperations: MetadataPatchReplaceOperation[] = []; + const removeOperations: MetadataPatchRemoveOperation[] = []; + const addOperations: MetadataPatchAddOperation[] = []; + values + .sort((a: DsoEditMetadataValue, b: DsoEditMetadataValue) => a.originalValue.place - b.originalValue.place) + .forEach((value: DsoEditMetadataValue) => { + if (value.hasChanges()) { + if (value.change === DsoEditMetadataChangeType.UPDATE) { + // Only changes to value or language are considered "replace" operations. Changes to place are considered "move", which is processed below. + if (value.originalValue.value !== value.newValue.value || value.originalValue.language !== value.newValue.language) { + replaceOperations.push(new MetadataPatchReplaceOperation(field, value.originalValue.place, { + value: value.newValue.value, + language: value.newValue.language, + })); + } + } else if (value.change === DsoEditMetadataChangeType.REMOVE) { + removeOperations.push(new MetadataPatchRemoveOperation(field, value.originalValue.place)); + } else if (value.change === DsoEditMetadataChangeType.ADD) { + addOperations.push(new MetadataPatchAddOperation(field, { + value: value.newValue.value, + language: value.newValue.language, + })); + } else { + console.warn('Illegal metadata change state detected for', value); + } } - if (hasValue(operation)) { - operations.push(operation.toOperation()); - } - } - }); + }); + + operations.push(...replaceOperations + .map((operation: MetadataPatchReplaceOperation) => operation.toOperation())); + operations.push(...removeOperations + // Sort remove operations backwards first, because they get executed in order. This avoids one removal affecting the next. + .sort((a: MetadataPatchRemoveOperation, b: MetadataPatchRemoveOperation) => b.place - a.place) + .map((operation: MetadataPatchRemoveOperation) => operation.toOperation())); + operations.push(...addOperations + .map((operation: MetadataPatchAddOperation) => operation.toOperation())); + }); + // Calculate and add the move operations that need to happen in order to move value from their old place to their new within the field + // This uses an ArrayMoveChangeAnalyzer + Object.entries(this.fields).forEach(([field, values]: [string, DsoEditMetadataValue[]]) => { + // Exclude values marked for removal, because operations are executed in order (remove first, then move) + const valuesWithoutRemoved = values.filter((value: DsoEditMetadataValue) => value.change !== DsoEditMetadataChangeType.REMOVE); + const moveOperations = moveAnalyser + .diff( + valuesWithoutRemoved + .map((value: DsoEditMetadataValue) => value.originalValue.place), + valuesWithoutRemoved + .sort((a: DsoEditMetadataValue, b: DsoEditMetadataValue) => a.newValue.place - b.newValue.place) + .map((value: DsoEditMetadataValue) => value.originalValue.place)) + .map((operation: MoveOperation) => new MetadataPatchMoveOperation(field, +operation.from.substr(1), +operation.path.substr(1)).toOperation()); + operations.push(...moveOperations); }); return operations; } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html index e72a9e8444..9941d03308 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html @@ -1,4 +1,5 @@
{{ mdValue.newValue.value }}
@@ -34,8 +35,7 @@
- - diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss index 1196aa1940..bcf491b9ce 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss @@ -10,3 +10,7 @@ ::ng-deep .tooltip-inner { min-width: var(--ds-dso-edit-virtual-tooltip-min-width); } + +.cdk-drag-placeholder { + opacity: 0; +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts index b61255e4fe..dce0ec68b0 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts @@ -71,6 +71,11 @@ export class DsoEditMetadataValueComponent implements OnInit { */ @Output() undo: EventEmitter = new EventEmitter(); + /** + * Emits true when the user starts dragging a value, false when the user stops dragging + */ + @Output() dragging: EventEmitter = new EventEmitter(); + /** * The DsoEditMetadataChangeType enumeration for access in the component's template * @type {DsoEditMetadataChangeType} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index 0ca62ff1b6..e498dc373e 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -48,6 +48,7 @@ [form]="form" [dsoType]="dsoType" [saving$]="saving$" + [draggingMdField$]="draggingMdField$" [mdField]="mdField" (valueSaved)="onValueSaved()"> diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index e98cc3663d..7f98720b2c 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -19,6 +19,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s import { TranslateService } from '@ngx-translate/core'; import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component'; import { Observable } from 'rxjs/internal/Observable'; +import { ArrayMoveChangeAnalyzer } from '../../core/data/array-move-change-analyzer.service'; @Component({ selector: 'ds-dso-edit-metadata', @@ -72,6 +73,13 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { */ saving$: BehaviorSubject = new BehaviorSubject(false); + /** + * Tracks for which metadata-field a drag operation is taking place + * Null when no drag is currently happening for any field + * This is a BehaviorSubject that is passed down to child components, to give them the power to alter the state + */ + draggingMdField$: BehaviorSubject = new BehaviorSubject(null); + /** * Whether or not the metadata field is currently being validated */ @@ -98,7 +106,8 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { constructor(protected route: ActivatedRoute, protected notificationsService: NotificationsService, protected translateService: TranslateService, - protected parentInjector: Injector) { + protected parentInjector: Injector, + protected arrayMoveChangeAnalyser: ArrayMoveChangeAnalyzer) { } /** @@ -167,7 +176,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { */ submit(): void { this.saving$.next(true); - this.updateDataService.patch(this.dso, this.form.getOperations()).pipe( + this.updateDataService.patch(this.dso, this.form.getOperations(this.arrayMoveChangeAnalyser)).pipe( getFirstCompletedRemoteData() ).subscribe((rd: RemoteData) => { this.saving$.next(false); From a40d93a9411890502a3fe56826f4ee9c5efdb14c Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Fri, 16 Dec 2022 11:41:09 +0100 Subject: [PATCH 21/73] 97399 Implemented basic working tooltip on top level community list --- .../top-level-community-list.component.html | 6 +++- .../context-help-wrapper.component.html | 26 +++++++++++++++++ .../context-help-wrapper.component.scss | 25 ++++++++++++++++ .../context-help-wrapper.component.spec.ts | 25 ++++++++++++++++ .../context-help-wrapper.component.ts | 23 +++++++++++++++ src/app/shared/context-help.directive.spec.ts | 8 +++++ src/app/shared/context-help.directive.ts | 29 +++++++++++++++++++ src/app/shared/shared.module.ts | 7 ++++- src/assets/i18n/en.json5 | 5 +++- src/styles/_custom_variables.scss | 3 ++ 10 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.html create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.scss create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts create mode 100644 src/app/shared/context-help-wrapper/context-help-wrapper.component.ts create mode 100644 src/app/shared/context-help.directive.spec.ts create mode 100644 src/app/shared/context-help.directive.ts diff --git a/src/app/home-page/top-level-community-list/top-level-community-list.component.html b/src/app/home-page/top-level-community-list/top-level-community-list.component.html index dbea87a175..064b308ed5 100644 --- a/src/app/home-page/top-level-community-list/top-level-community-list.component.html +++ b/src/app/home-page/top-level-community-list/top-level-community-list.component.html @@ -1,6 +1,10 @@
-

{{'home.top-level-communities.head' | translate}}

+

+ + {{'home.top-level-communities.head' | translate}} +

{{'home.top-level-communities.help' | translate}}

+ +
{{ content | translate }}
+ + + + + + + + + + + + + + + + + + diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss new file mode 100644 index 0000000000..30bbac02ff --- /dev/null +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss @@ -0,0 +1,25 @@ +:host { + position: relative; +} + +.ds-context-help-icon { + position: absolute; + top: 0; +} + +.ds-context-help-icon-left { + left: var(--ds-context-x-offset); + color: var(--bs-info); + background-color: var(--bs-white); + font-size: (--dscontext-help-icon-size); + line-height: 1; + border-radius: 50%; +} + +.ds-context-help-icon-right { + right: var(--ds-context-icon-width); +} + +::ng-deep .tooltip-inner { + max-width: 300px; +} diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts b/src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts new file mode 100644 index 0000000000..aee7a0c696 --- /dev/null +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContextHelpWrapperComponent } from './context-help-wrapper.component'; + +describe('ContextHelpWrapperComponent', () => { + let component: ContextHelpWrapperComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ContextHelpWrapperComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ContextHelpWrapperComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts new file mode 100644 index 0000000000..b39c2b2f06 --- /dev/null +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts @@ -0,0 +1,23 @@ +import { Component, Input, OnInit, TemplateRef } from '@angular/core'; +import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; + +export type PlacementDir = 'left' | 'right'; + +@Component({ + selector: 'ds-context-help-wrapper', + templateUrl: './context-help-wrapper.component.html', + styleUrls: ['./context-help-wrapper.component.scss'] +}) +export class ContextHelpWrapperComponent implements OnInit { + @Input() templateRef: TemplateRef; + @Input() content: string; + @Input() tooltipPlacement: PlacementArray; // TODO: type + // @Input('iconPlacement') iconPlacement: string; + + constructor() { } + + ngOnInit(): void { + // console.log("In ContextHelpWrapperComponent.ngOnInit:", this.content); // XXX + } + +} diff --git a/src/app/shared/context-help.directive.spec.ts b/src/app/shared/context-help.directive.spec.ts new file mode 100644 index 0000000000..f00fb9d355 --- /dev/null +++ b/src/app/shared/context-help.directive.spec.ts @@ -0,0 +1,8 @@ +import { ContextHelpDirective } from './context-help.directive'; + +describe('ContextHelpDirective', () => { + it('should create an instance', () => { + const directive = new ContextHelpDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts new file mode 100644 index 0000000000..712950a6f1 --- /dev/null +++ b/src/app/shared/context-help.directive.ts @@ -0,0 +1,29 @@ +import { ComponentFactoryResolver, ComponentRef, Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core'; +import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; +import { ContextHelpWrapperComponent, PlacementDir } from './context-help-wrapper/context-help-wrapper.component'; + +@Directive({ + selector: '[dsContextHelp]' +}) +export class ContextHelpDirective implements OnInit { + @Input('dsContextHelp') content: string; + @Input('dsTooltipPlacement') tooltipPlacement: PlacementArray; + // @Input('iconPlacement') iconPlacement: PlacementDir; + + protected wrapper: ComponentRef; + + constructor( + private templateRef: TemplateRef, + private viewContainerRef: ViewContainerRef, + private componentFactoryResolver: ComponentFactoryResolver + ){} + + ngOnInit() { + const factory + = this.componentFactoryResolver.resolveComponentFactory(ContextHelpWrapperComponent); + this.wrapper = this.viewContainerRef.createComponent(factory); + this.wrapper.instance.templateRef = this.templateRef; + this.wrapper.instance.content = this.content; + this.wrapper.instance.tooltipPlacement = this.tooltipPlacement; + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 715ee66a99..0b51ba131c 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -177,6 +177,8 @@ import { ScopeSelectorModalComponent } from './search-form/scope-selector-modal/ import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component'; import { DsSelectComponent } from './ds-select/ds-select.component'; import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component'; +import { ContextHelpDirective } from './context-help.directive'; +import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -454,6 +456,8 @@ const DIRECTIVES = [ ...SHARED_ITEM_PAGE_COMPONENTS, ItemVersionsSummaryModalComponent, ItemVersionsDeleteModalComponent, + ContextHelpDirective, + ContextHelpWrapperComponent, ], providers: [ ...PROVIDERS @@ -464,7 +468,8 @@ const DIRECTIVES = [ ...COMPONENTS, ...SHARED_ITEM_PAGE_COMPONENTS, ...DIRECTIVES, - TranslateModule + TranslateModule, + ContextHelpDirective ] }) diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index f742273edb..c9d9a32699 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -4162,5 +4162,8 @@ "idle-modal.log-out": "Log out", - "idle-modal.extend-session": "Extend session" + "idle-modal.extend-session": "Extend session", + + "context-help.multi-para.test": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis ac metus ut tristique. Integer eros risus, efficitur non urna eu, ultrices mollis felis. Nullam mi sapien, mattis eu nunc in, rhoncus vulputate risus. \n\nDuis pharetra et nibh aliquam sodales. Integer ut rutrum dolor, ut maximus quam. Nunc sit amet maximus urna. In nec erat vulputate, facilisis nulla a, scelerisque orci. Ut pellentesque sapien et eros euismod scelerisque finibus at sem. Duis egestas convallis ligula nec laoreet. \n\nProin ut magna sit amet libero consequat ultrices et sed mi. Nam congue sed risus ac fringilla. Suspendisse potenti. Cras mattis, est non laoreet elementum, erat enim interdum tortor, eu placerat enim metus sit amet enim.", + } diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 66e0e87f93..15c595a564 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -85,4 +85,7 @@ --ds-slider-handle-width: 18px; --ds-search-form-scope-max-width: 150px; + + --ds-context-x-offset: -16px; + --dscontext-help-icon-size: 16px; } From bf9612e9674edb76cfba59194dc480fdde0d9c52 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Fri, 16 Dec 2022 15:08:32 +0100 Subject: [PATCH 22/73] 93747: Edit metadata redesign - drag to reorder pt2 --- ...-edit-metadata-field-values.component.html | 2 +- .../dso-edit-metadata-form.ts | 67 +++++++++++++++---- .../dso-edit-metadata-value.component.html | 6 +- .../dso-edit-metadata.component.html | 4 ++ .../dso-edit-metadata.component.scss | 4 ++ src/assets/i18n/en.json5 | 2 + 6 files changed, 69 insertions(+), 16 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html index 190d5a7e31..cfa457580f 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html @@ -7,7 +7,7 @@ [isOnlyValue]="form.fields[mdField].length === 1" (edit)="mdValue.editing = true" (confirm)="mdValue.confirmChanges($event); form.resetReinstatable(); valueSaved.emit()" - (remove)="mdValue.change = DsoEditMetadataChangeTypeEnum.REMOVE; form.resetReinstatable(); valueSaved.emit()" + (remove)="mdValue.change === DsoEditMetadataChangeTypeEnum.ADD ? form.remove(mdField, idx) : mdValue.change = DsoEditMetadataChangeTypeEnum.REMOVE; form.resetReinstatable(); valueSaved.emit()" (undo)="mdValue.change === DsoEditMetadataChangeTypeEnum.ADD ? form.remove(mdField, idx) : mdValue.discard(); valueSaved.emit()" (dragging)="$event ? draggingMdField$.next(mdField) : draggingMdField$.next(null)"> diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts index cc1f55838b..b97c838ffb 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -48,6 +48,11 @@ export class DsoEditMetadataValue { */ change: DsoEditMetadataChangeType; + /** + * A flag to keep track if the value has been reordered (place has changed) + */ + reordered = false; + /** * A type or change that can be used to undo any discarding that took place */ @@ -69,8 +74,9 @@ export class DsoEditMetadataValue { * It will also set the editing flag to false */ confirmChanges(finishEditing = false) { + this.reordered = this.originalValue.place !== this.newValue.place; if (hasNoValue(this.change) || this.change === DsoEditMetadataChangeType.UPDATE) { - if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language || this.originalValue.place !== this.newValue.place)) { + if ((this.originalValue.value !== this.newValue.value || this.originalValue.language !== this.newValue.language)) { this.change = DsoEditMetadataChangeType.UPDATE; } else { this.change = undefined; @@ -87,7 +93,7 @@ export class DsoEditMetadataValue { * return false (which is desired) */ hasChanges(): boolean { - return hasValue(this.change); + return hasValue(this.change) || this.reordered; } /** @@ -95,21 +101,25 @@ export class DsoEditMetadataValue { * properties */ discardAndMarkReinstatable(): void { - if (this.change === DsoEditMetadataChangeType.UPDATE) { + if (this.change === DsoEditMetadataChangeType.UPDATE || this.reordered) { this.reinstatableValue = this.newValue; } this.reinstatableChange = this.change; - this.discard(); + this.discard(false); } /** * Discard the current changes * Call discardAndMarkReinstatable() instead, if the discard should be re-instatable */ - discard(): void { + discard(keepPlace = true): void { this.change = undefined; + const place = this.newValue.place; this.newValue = Object.assign(new MetadataValue(), this.originalValue); - this.editing = false; + if (keepPlace) { + this.newValue.place = place; + } + this.confirmChanges(true); } /** @@ -124,6 +134,7 @@ export class DsoEditMetadataValue { this.change = this.reinstatableChange; this.reinstatableChange = undefined; } + this.confirmChanges(); } /** @@ -190,6 +201,7 @@ export class DsoEditMetadataForm { this.fieldKeys.push(mdField); this.setValuesForFieldSorted(mdField, values.map((value: MetadataValue) => new DsoEditMetadataValue(value))); }); + this.sortFieldKeys(); } /** @@ -225,6 +237,7 @@ export class DsoEditMetadataForm { private addValueToField(value: DsoEditMetadataValue, mdField: string): void { if (isEmpty(this.fields[mdField])) { this.fieldKeys.push(mdField); + this.sortFieldKeys(); this.fields[mdField] = []; } this.fields[mdField].push(value); @@ -252,6 +265,14 @@ export class DsoEditMetadataForm { return Object.values(this.fields).some((values: DsoEditMetadataValue[]) => values.some((value: DsoEditMetadataValue) => value.hasChanges())); } + /** + * Check if a metadata field contains changes within its order (place property of values) + * @param mdField + */ + hasOrderChanges(mdField: string): boolean { + return this.fields[mdField].some((value: DsoEditMetadataValue) => value.originalValue.place !== value.newValue.place); + } + /** * Discard all changes within the form and store their current values within re-instatable properties so they can be * undone afterwards @@ -285,12 +306,34 @@ export class DsoEditMetadataForm { } }); this.fieldKeys = [...this.originalFieldKeys]; + this.sortFieldKeys(); // Reset the order of values within their fields to match their place property this.fieldKeys.forEach((field: string) => { this.setValuesForFieldSorted(field, this.fields[field]); }); } + /** + * Reset the order of values within a metadata field to their original places + * Update the actual array to match the place properties + * @param mdField + */ + resetOrder(mdField: string) { + this.fields[mdField].forEach((value: DsoEditMetadataValue) => { + value.newValue.place = value.originalValue.place; + value.confirmChanges(); + }); + this.setValuesForFieldSorted(mdField, this.fields[mdField]); + } + + /** + * Sort fieldKeys alphabetically + * Should be called whenever a field is added to ensure the alphabetical order is kept + */ + sortFieldKeys() { + this.fieldKeys.sort((a: string, b: string) => a.localeCompare(b)); + } + /** * Undo any previously discarded changes */ @@ -356,10 +399,10 @@ export class DsoEditMetadataForm { const replaceOperations: MetadataPatchReplaceOperation[] = []; const removeOperations: MetadataPatchRemoveOperation[] = []; const addOperations: MetadataPatchAddOperation[] = []; - values + [...values] .sort((a: DsoEditMetadataValue, b: DsoEditMetadataValue) => a.originalValue.place - b.originalValue.place) .forEach((value: DsoEditMetadataValue) => { - if (value.hasChanges()) { + if (hasValue(value.change)) { if (value.change === DsoEditMetadataChangeType.UPDATE) { // Only changes to value or language are considered "replace" operations. Changes to place are considered "move", which is processed below. if (value.originalValue.value !== value.newValue.value || value.originalValue.language !== value.newValue.language) { @@ -398,10 +441,10 @@ export class DsoEditMetadataForm { const moveOperations = moveAnalyser .diff( valuesWithoutRemoved - .map((value: DsoEditMetadataValue) => value.originalValue.place), - valuesWithoutRemoved - .sort((a: DsoEditMetadataValue, b: DsoEditMetadataValue) => a.newValue.place - b.newValue.place) - .map((value: DsoEditMetadataValue) => value.originalValue.place)) + .map((value: DsoEditMetadataValue) => value.newValue.place), + [...valuesWithoutRemoved] + .sort((a: DsoEditMetadataValue, b: DsoEditMetadataValue) => a.originalValue.place - b.originalValue.place) + .map((value: DsoEditMetadataValue) => value.newValue.place)) .map((operation: MoveOperation) => new MetadataPatchMoveOperation(field, +operation.from.substr(1), +operation.path.substr(1)).toOperation()); operations.push(...moveOperations); }); diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html index 9941d03308..4e5890ae7d 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html @@ -1,6 +1,6 @@
+ [ngClass]="{ 'ds-warning': mdValue.reordered || mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': isOnlyValue }">
{{ mdValue.newValue.value }}
-
-
- - -
-
- {{metadata?.language}} -
-
- -
-
- - -
- - - - -
- diff --git a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss b/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss deleted file mode 100644 index a2a6786b36..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -.btn[disabled] { - color: var(--bs-gray-600); - border-color: var(--bs-gray-600); - z-index: 0; // prevent border colors jumping on hover -} - -.metadata-field { - width: var(--ds-edit-item-metadata-field-width); -} - -.language-field { - width: var(--ds-edit-item-language-field-width); -} diff --git a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.spec.ts b/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.spec.ts deleted file mode 100644 index 03e8e5d720..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.spec.ts +++ /dev/null @@ -1,505 +0,0 @@ -import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; -import { By } from '@angular/platform-browser'; -import { TranslateModule } from '@ngx-translate/core'; -import { getTestScheduler } from 'jasmine-marbles'; -import { of as observableOf } from 'rxjs'; -import { TestScheduler } from 'rxjs/testing'; -import { MetadataFieldDataService } from '../../../../core/data/metadata-field-data.service'; -import { FieldChangeType } from '../../../../core/data/object-updates/object-updates.actions'; -import { ObjectUpdatesService } from '../../../../core/data/object-updates/object-updates.service'; -import { buildPaginatedList } from '../../../../core/data/paginated-list.model'; -import { MetadataField } from '../../../../core/metadata/metadata-field.model'; -import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model'; -import { RegistryService } from '../../../../core/registry/registry.service'; -import { MetadatumViewModel } from '../../../../core/shared/metadata.models'; -import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model'; -import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils'; -import { followLink } from '../../../../shared/utils/follow-link-config.model'; -import { EditInPlaceFieldComponent } from './edit-in-place-field.component'; -import { MockComponent, MockDirective } from 'ng-mocks'; -import { DebounceDirective } from '../../../../shared/utils/debounce.directive'; -import { ValidationSuggestionsComponent } from '../../../../shared/input-suggestions/validation-suggestions/validation-suggestions.component'; - -let comp: EditInPlaceFieldComponent; -let fixture: ComponentFixture; -let de: DebugElement; -let el: HTMLElement; -let metadataFieldService; -let objectUpdatesService; -let paginatedMetadataFields; -const mdSchema = Object.assign(new MetadataSchema(), { prefix: 'dc' }); -const mdSchemaRD$ = createSuccessfulRemoteDataObject$(mdSchema); -const mdField1 = Object.assign(new MetadataField(), { - schema: mdSchemaRD$, - element: 'contributor', - qualifier: 'author' -}); -const mdField2 = Object.assign(new MetadataField(), { - schema: mdSchemaRD$, - element: 'title' -}); -const mdField3 = Object.assign(new MetadataField(), { - schema: mdSchemaRD$, - element: 'description', - qualifier: 'abstract', -}); - -const metadatum = Object.assign(new MetadatumViewModel(), { - key: 'dc.description.abstract', - value: 'Example abstract', - language: 'en' -}); - -const url = 'http://test-url.com/test-url'; -const fieldUpdate = { - field: metadatum, - changeType: undefined -}; -let scheduler: TestScheduler; - -describe('EditInPlaceFieldComponent', () => { - - beforeEach(waitForAsync(() => { - scheduler = getTestScheduler(); - - paginatedMetadataFields = buildPaginatedList(undefined, [mdField1, mdField2, mdField3]); - - metadataFieldService = jasmine.createSpyObj({ - queryMetadataFields: createSuccessfulRemoteDataObject$(paginatedMetadataFields), - }); - objectUpdatesService = jasmine.createSpyObj('objectUpdatesService', - { - saveChangeFieldUpdate: {}, - saveRemoveFieldUpdate: {}, - setEditableFieldUpdate: {}, - setValidFieldUpdate: {}, - removeSingleFieldUpdate: {}, - isEditable: observableOf(false), // should always return something --> its in ngOnInit - isValid: observableOf(true) // should always return something --> its in ngOnInit - } - ); - - TestBed.configureTestingModule({ - imports: [FormsModule, TranslateModule.forRoot()], - declarations: [ - EditInPlaceFieldComponent, - MockDirective(DebounceDirective), - MockComponent(ValidationSuggestionsComponent) - ], - providers: [ - { provide: RegistryService, useValue: metadataFieldService }, - { provide: ObjectUpdatesService, useValue: objectUpdatesService }, - { provide: MetadataFieldDataService, useValue: {} } - ], schemas: [ - CUSTOM_ELEMENTS_SCHEMA - ] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(EditInPlaceFieldComponent); - comp = fixture.componentInstance; // EditInPlaceFieldComponent test instance - de = fixture.debugElement; - el = de.nativeElement; - - comp.url = url; - comp.fieldUpdate = fieldUpdate; - comp.metadata = metadatum; - }); - - describe('update', () => { - beforeEach(() => { - comp.update(); - fixture.detectChanges(); - }); - - it('it should call saveChangeFieldUpdate on the objectUpdatesService with the correct url and metadata', () => { - expect(objectUpdatesService.saveChangeFieldUpdate).toHaveBeenCalledWith(url, metadatum); - }); - }); - - describe('setEditable', () => { - const editable = false; - beforeEach(() => { - comp.setEditable(editable); - fixture.detectChanges(); - }); - - it('it should call setEditableFieldUpdate on the objectUpdatesService with the correct url and uuid and false', () => { - expect(objectUpdatesService.setEditableFieldUpdate).toHaveBeenCalledWith(url, metadatum.uuid, editable); - }); - }); - - describe('editable is true', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - it('the div should contain input fields or textareas', () => { - const inputField = de.queryAll(By.css('input')); - const textAreas = de.queryAll(By.css('textarea')); - expect(inputField.length + textAreas.length).toBeGreaterThan(0); - }); - }); - - describe('editable is false', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - it('the div should contain no input fields or textareas', () => { - const inputField = de.queryAll(By.css('input')); - const textAreas = de.queryAll(By.css('textarea')); - expect(inputField.length + textAreas.length).toBe(0); - }); - }); - - describe('isValid is true', () => { - beforeEach(() => { - objectUpdatesService.isValid.and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - it('the div should not contain an error message', () => { - const errorMessages = de.queryAll(By.css('small.text-danger')); - expect(errorMessages.length).toBe(0); - - }); - }); - - describe('isValid is false', () => { - beforeEach(() => { - objectUpdatesService.isValid.and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - it('there should be an error message', () => { - const errorMessages = de.queryAll(By.css('small.text-danger')); - expect(errorMessages.length).toBeGreaterThan(0); - - }); - }); - - describe('remove', () => { - beforeEach(() => { - comp.remove(); - fixture.detectChanges(); - }); - - it('it should call saveRemoveFieldUpdate on the objectUpdatesService with the correct url and metadata', () => { - expect(objectUpdatesService.saveRemoveFieldUpdate).toHaveBeenCalledWith(url, metadatum); - }); - }); - - describe('removeChangesFromField', () => { - beforeEach(() => { - comp.removeChangesFromField(); - fixture.detectChanges(); - }); - - it('it should call removeChangesFromField on the objectUpdatesService with the correct url and uuid', () => { - expect(objectUpdatesService.removeSingleFieldUpdate).toHaveBeenCalledWith(url, metadatum.uuid); - }); - }); - - describe('findMetadataFieldSuggestions', () => { - const query = 'query string'; - - const metadataFieldSuggestions: InputSuggestion[] = - [ - { - displayValue: ('dc.' + mdField1.toString()).split('.').join('.​'), - value: ('dc.' + mdField1.toString()) - }, - { - displayValue: ('dc.' + mdField2.toString()).split('.').join('.​'), - value: ('dc.' + mdField2.toString()) - }, - { - displayValue: ('dc.' + mdField3.toString()).split('.').join('.​'), - value: ('dc.' + mdField3.toString()) - } - ]; - - beforeEach(fakeAsync(() => { - comp.findMetadataFieldSuggestions(query); - tick(); - fixture.detectChanges(); - })); - - it('it should call queryMetadataFields on the metadataFieldService with the correct query', () => { - expect(metadataFieldService.queryMetadataFields).toHaveBeenCalledWith(query, null, true, false, followLink('schema')); - }); - - it('it should set metadataFieldSuggestions to the right value', () => { - const expected = 'a'; - scheduler.expectObservable(comp.metadataFieldSuggestions).toBe(expected, { a: metadataFieldSuggestions }); - }); - }); - - describe('canSetEditable', () => { - describe('when editable is currently true', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - - it('canSetEditable should return an observable emitting false', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canSetEditable()).toBe(expected, { a: false }); - }); - }); - - describe('when editable is currently false', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - - describe('when the fieldUpdate\'s changeType is currently not REMOVE', () => { - beforeEach(() => { - comp.fieldUpdate.changeType = FieldChangeType.ADD; - fixture.detectChanges(); - }); - it('canSetEditable should return an observable emitting true', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canSetEditable()).toBe(expected, { a: true }); - }); - }); - - describe('when the fieldUpdate\'s changeType is currently REMOVE', () => { - beforeEach(() => { - comp.fieldUpdate.changeType = FieldChangeType.REMOVE; - fixture.detectChanges(); - }); - it('canSetEditable should return an observable emitting false', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canSetEditable()).toBe(expected, { a: false }); - }); - }); - }); - }); - - describe('canSetUneditable', () => { - describe('when editable is currently true', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - - it('canSetUneditable should return an observable emitting true', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canSetUneditable()).toBe(expected, { a: true }); - }); - }); - - describe('when editable is currently false', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - - it('canSetUneditable should return an observable emitting false', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canSetUneditable()).toBe(expected, { a: false }); - }); - }); - }); - - describe('when canSetEditable emits true', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(false)); - spyOn(comp, 'canSetEditable').and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - it('the div should have an enabled button with an edit icon', () => { - const editIcon = de.query(By.css('i.fa-edit')).parent.nativeElement.disabled; - expect(editIcon).toBe(false); - }); - }); - - describe('when canSetEditable emits false', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(false)); - spyOn(comp, 'canSetEditable').and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - it('the div should have a disabled button with an edit icon', () => { - const editIcon = de.query(By.css('i.fa-edit')).parent.nativeElement.disabled; - expect(editIcon).toBe(true); - }); - }); - - describe('when canSetUneditable emits true', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - spyOn(comp, 'canSetUneditable').and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - it('the div should have an enabled button with a check icon', () => { - const checkButtonAttrs = de.query(By.css('i.fa-check')).parent.nativeElement.disabled; - expect(checkButtonAttrs).toBe(false); - }); - }); - - describe('when canSetUneditable emits false', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - spyOn(comp, 'canSetUneditable').and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - it('the div should have a disabled button with a check icon', () => { - const checkButtonAttrs = de.query(By.css('i.fa-check')).parent.nativeElement.disabled; - expect(checkButtonAttrs).toBe(true); - }); - }); - - describe('when canRemove emits true', () => { - beforeEach(() => { - spyOn(comp, 'canRemove').and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - it('the div should have an enabled button with a trash icon', () => { - const trashButtonAttrs = de.query(By.css('i.fa-trash-alt')).parent.nativeElement.disabled; - expect(trashButtonAttrs).toBe(false); - }); - }); - - describe('when canRemove emits false', () => { - beforeEach(() => { - spyOn(comp, 'canRemove').and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - it('the div should have a disabled button with a trash icon', () => { - const trashButtonAttrs = de.query(By.css('i.fa-trash-alt')).parent.nativeElement.disabled; - expect(trashButtonAttrs).toBe(true); - }); - }); - - describe('when canUndo emits true', () => { - beforeEach(() => { - spyOn(comp, 'canUndo').and.returnValue(observableOf(true)); - fixture.detectChanges(); - }); - it('the div should have an enabled button with an undo icon', () => { - const undoIcon = de.query(By.css('i.fa-undo-alt')).parent.nativeElement.disabled; - expect(undoIcon).toBe(false); - }); - }); - - describe('when canUndo emits false', () => { - beforeEach(() => { - spyOn(comp, 'canUndo').and.returnValue(observableOf(false)); - fixture.detectChanges(); - }); - it('the div should have a disabled button with an undo icon', () => { - const undoIcon = de.query(By.css('i.fa-undo-alt')).parent.nativeElement.disabled; - expect(undoIcon).toBe(true); - }); - }); - - describe('canRemove', () => { - describe('when the fieldUpdate\'s changeType is currently not REMOVE or ADD', () => { - beforeEach(() => { - comp.fieldUpdate.changeType = FieldChangeType.UPDATE; - fixture.detectChanges(); - }); - it('canRemove should return an observable emitting true', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canRemove()).toBe(expected, { a: true }); - }); - }); - - describe('when the fieldUpdate\'s changeType is currently ADD', () => { - beforeEach(() => { - comp.fieldUpdate.changeType = FieldChangeType.ADD; - fixture.detectChanges(); - }); - it('canRemove should return an observable emitting false', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canRemove()).toBe(expected, { a: false }); - }); - }); - }); - - describe('canUndo', () => { - - describe('when editable is currently true', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - comp.fieldUpdate.changeType = undefined; - fixture.detectChanges(); - }); - it('canUndo should return an observable emitting true', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canUndo()).toBe(expected, { a: true }); - }); - }); - - describe('when editable is currently false', () => { - describe('when the fieldUpdate\'s changeType is currently ADD, UPDATE or REMOVE', () => { - beforeEach(() => { - comp.fieldUpdate.changeType = FieldChangeType.ADD; - fixture.detectChanges(); - }); - - it('canUndo should return an observable emitting true', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canUndo()).toBe(expected, { a: true }); - }); - }); - - describe('when the fieldUpdate\'s changeType is currently undefined', () => { - beforeEach(() => { - comp.fieldUpdate.changeType = undefined; - fixture.detectChanges(); - }); - - it('canUndo should return an observable emitting false', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.canUndo()).toBe(expected, { a: false }); - }); - }); - }); - - }); - - describe('canEditMetadataField', () => { - describe('when the fieldUpdate\'s changeType is currently ADD', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - comp.fieldUpdate.changeType = FieldChangeType.ADD; - fixture.detectChanges(); - }); - it('can edit metadata field', () => { - const disabledMetadataField = fixture.debugElement.query(By.css('ds-validation-suggestions')) - .componentInstance.disable; - expect(disabledMetadataField).toBe(false); - }); - }); - describe('when the fieldUpdate\'s changeType is currently REMOVE', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - comp.fieldUpdate.changeType = FieldChangeType.REMOVE; - fixture.detectChanges(); - }); - it('can edit metadata field', () => { - const disabledMetadataField = fixture.debugElement.query(By.css('ds-validation-suggestions')) - .componentInstance.disable; - expect(disabledMetadataField).toBe(true); - }); - }); - describe('when the fieldUpdate\'s changeType is currently UPDATE', () => { - beforeEach(() => { - objectUpdatesService.isEditable.and.returnValue(observableOf(true)); - comp.fieldUpdate.changeType = FieldChangeType.UPDATE; - fixture.detectChanges(); - }); - it('can edit metadata field', () => { - const disabledMetadataField = fixture.debugElement.query(By.css('ds-validation-suggestions')) - .componentInstance.disable; - expect(disabledMetadataField).toBe(true); - }); - }); - }); -}); diff --git a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts b/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts deleted file mode 100644 index 2782747916..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts +++ /dev/null @@ -1,201 +0,0 @@ -import { Component, Input, OnChanges, OnInit } from '@angular/core'; -import { - metadataFieldsToString, - getFirstSucceededRemoteData -} from '../../../../core/shared/operators'; -import { hasValue, isNotEmpty } from '../../../../shared/empty.util'; -import { RegistryService } from '../../../../core/registry/registry.service'; -import { cloneDeep } from 'lodash'; -import { BehaviorSubject, Observable, of as observableOf } from 'rxjs'; -import { map } from 'rxjs/operators'; -import { FieldChangeType } from '../../../../core/data/object-updates/object-updates.actions'; -import { FieldUpdate } from '../../../../core/data/object-updates/object-updates.reducer'; -import { ObjectUpdatesService } from '../../../../core/data/object-updates/object-updates.service'; -import { NgModel } from '@angular/forms'; -import { MetadatumViewModel } from '../../../../core/shared/metadata.models'; -import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model'; -import { followLink } from '../../../../shared/utils/follow-link-config.model'; - -@Component({ - // tslint:disable-next-line:component-selector - selector: '[ds-edit-in-place-field]', - styleUrls: ['./edit-in-place-field.component.scss'], - templateUrl: './edit-in-place-field.component.html', -}) -/** - * Component that displays a single metadatum of an item on the edit page - */ -export class EditInPlaceFieldComponent implements OnInit, OnChanges { - /** - * The current field, value and state of the metadatum - */ - @Input() fieldUpdate: FieldUpdate; - - /** - * The current url of this page - */ - @Input() url: string; - - /** - * The metadatum of this field - */ - @Input() metadata: MetadatumViewModel; - - /** - * Emits whether or not this field is currently editable - */ - editable: Observable; - - /** - * Emits whether or not this field is currently valid - */ - valid: Observable; - - /** - * The current suggestions for the metadatafield when editing - */ - metadataFieldSuggestions: BehaviorSubject = new BehaviorSubject([]); - - constructor( - private registryService: RegistryService, - private objectUpdatesService: ObjectUpdatesService, - ) { - } - - /** - * Sets up an observable that keeps track of the current editable and valid state of this field - */ - ngOnInit(): void { - this.editable = this.objectUpdatesService.isEditable(this.url, this.metadata.uuid); - this.valid = this.objectUpdatesService.isValid(this.url, this.metadata.uuid); - } - - /** - * Sends a new change update for this field to the object updates service - */ - update(ngModel?: NgModel) { - this.objectUpdatesService.saveChangeFieldUpdate(this.url, cloneDeep(this.metadata)); - if (hasValue(ngModel)) { - this.checkValidity(ngModel); - } - } - - /** - * Method to check the validity of a form control - * @param ngModel - */ - public checkValidity(ngModel: NgModel) { - ngModel.control.setValue(ngModel.viewModel); - ngModel.control.updateValueAndValidity(); - this.objectUpdatesService.setValidFieldUpdate(this.url, this.metadata.uuid, ngModel.control.valid); - } - - /** - * Sends a new editable state for this field to the service to change it - * @param editable The new editable state for this field - */ - setEditable(editable: boolean) { - this.objectUpdatesService.setEditableFieldUpdate(this.url, this.metadata.uuid, editable); - } - - /** - * Sends a new remove update for this field to the object updates service - */ - remove() { - this.objectUpdatesService.saveRemoveFieldUpdate(this.url, cloneDeep(this.metadata)); - } - - /** - * Notifies the object updates service that the updates for the current field can be removed - */ - removeChangesFromField() { - this.objectUpdatesService.removeSingleFieldUpdate(this.url, this.metadata.uuid); - } - - /** - * Sets the current metadatafield based on the fieldUpdate input field - */ - ngOnChanges(): void { - this.metadata = cloneDeep(this.fieldUpdate.field) as MetadatumViewModel; - } - - /** - * Requests all metadata fields that contain the query string in their key - * Then sets all found metadata fields as metadataFieldSuggestions - * Ignores fields from metadata schemas "relation" and "relationship" - * @param query The query to look for - */ - findMetadataFieldSuggestions(query: string) { - if (isNotEmpty(query)) { - return this.registryService.queryMetadataFields(query, null, true, false, followLink('schema')).pipe( - getFirstSucceededRemoteData(), - metadataFieldsToString(), - ).subscribe((fieldNames: string[]) => { - this.setInputSuggestions(fieldNames); - }); - } else { - this.metadataFieldSuggestions.next([]); - } - } - - /** - * Set the list of input suggestion with the given Metadata fields, which all require a resolved MetadataSchema - * @param fields list of Metadata fields, which all require a resolved MetadataSchema - */ - setInputSuggestions(fields: string[]) { - this.metadataFieldSuggestions.next( - fields.map((fieldName: string) => { - return { - displayValue: fieldName.split('.').join('.​'), - value: fieldName - }; - }) - ); - } - - /** - * Check if a user should be allowed to edit this field - * @return an observable that emits true when the user should be able to edit this field and false when they should not - */ - canSetEditable(): Observable { - return this.editable.pipe( - map((editable: boolean) => { - if (editable) { - return false; - } else { - return this.fieldUpdate.changeType !== FieldChangeType.REMOVE; - } - }) - ); - } - - /** - * Check if a user should be allowed to disabled editing this field - * @return an observable that emits true when the user should be able to disable editing this field and false when they should not - */ - canSetUneditable(): Observable { - return this.editable; - } - - /** - * Check if a user should be allowed to remove this field - * @return an observable that emits true when the user should be able to remove this field and false when they should not - */ - canRemove(): Observable { - return observableOf(this.fieldUpdate.changeType !== FieldChangeType.REMOVE && this.fieldUpdate.changeType !== FieldChangeType.ADD); - } - - /** - * Check if a user should be allowed to undo changes to this field - * @return an observable that emits true when the user should be able to undo changes to this field and false when they should not - */ - canUndo(): Observable { - return this.editable.pipe( - map((editable: boolean) => this.fieldUpdate.changeType >= 0 || editable) - ); - } - - protected isNotEmpty(value): boolean { - return isNotEmpty(value); - } -} diff --git a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html deleted file mode 100644 index 70cd2aaa39..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.html +++ /dev/null @@ -1,69 +0,0 @@ -
-
- - - - -
- - - - - - - - - - - - - - -
{{'item.edit.metadata.headers.field' | translate}}{{'item.edit.metadata.headers.value' | translate}}{{'item.edit.metadata.headers.language' | translate}}{{'item.edit.metadata.headers.edit' | translate}}
-
- -
-
-
- - - -
-
-
diff --git a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss deleted file mode 100644 index 46ce1a6f4b..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -.button-row { - .btn { - margin-right: calc(0.5 * var(--bs-spacer)); - - &:last-child { - margin-right: 0; - } - - @media screen and (min-width: map-get($grid-breakpoints, sm)) { - min-width: var(--ds-edit-item-button-min-width); - } - } - - &.top .btn { - margin-top: calc(var(--bs-spacer) / 2); - margin-bottom: calc(var(--bs-spacer) / 2); - } - - -} diff --git a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts deleted file mode 100644 index 0f01efcc55..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts +++ /dev/null @@ -1,290 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; -import { of as observableOf } from 'rxjs'; -import { getTestScheduler } from 'jasmine-marbles'; -import { ItemMetadataComponent } from './item-metadata.component'; -import { TestScheduler } from 'rxjs/testing'; -import { SharedModule } from '../../../shared/shared.module'; -import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service'; -import { ActivatedRoute, Router } from '@angular/router'; -import { NotificationsService } from '../../../shared/notifications/notifications.service'; -import { TranslateModule } from '@ngx-translate/core'; -import { ItemDataService } from '../../../core/data/item-data.service'; -import { By } from '@angular/platform-browser'; -import { INotification, Notification } from '../../../shared/notifications/models/notification.model'; -import { NotificationType } from '../../../shared/notifications/models/notification-type'; -import { RouterStub } from '../../../shared/testing/router.stub'; -import { Item } from '../../../core/shared/item.model'; -import { FieldChangeType } from '../../../core/data/object-updates/object-updates.actions'; -import { MetadatumViewModel } from '../../../core/shared/metadata.models'; -import { RegistryService } from '../../../core/registry/registry.service'; -import { MetadataSchema } from '../../../core/metadata/metadata-schema.model'; -import { MetadataField } from '../../../core/metadata/metadata-field.model'; -import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; -import { ObjectCacheService } from '../../../core/cache/object-cache.service'; -import { DSOSuccessResponse } from '../../../core/cache/response.models'; -import { createPaginatedList } from '../../../shared/testing/utils.test'; - -let comp: any; -let fixture: ComponentFixture; -let de: DebugElement; -let el: HTMLElement; -let objectUpdatesService; -const infoNotification: INotification = new Notification('id', NotificationType.Info, 'info'); -const warningNotification: INotification = new Notification('id', NotificationType.Warning, 'warning'); -const successNotification: INotification = new Notification('id', NotificationType.Success, 'success'); -const date = new Date(); -const router = new RouterStub(); -let metadataFieldService; -let paginatedMetadataFields; -let routeStub; -let objectCacheService; - -const mdSchema = Object.assign(new MetadataSchema(), { prefix: 'dc' }); -const mdField1 = Object.assign(new MetadataField(), { - schema: mdSchema, - element: 'contributor', - qualifier: 'author' -}); -const mdField2 = Object.assign(new MetadataField(), { schema: mdSchema, element: 'title' }); -const mdField3 = Object.assign(new MetadataField(), { - schema: mdSchema, - element: 'description', - qualifier: 'abstract' -}); - -let itemService; -const notificationsService = jasmine.createSpyObj('notificationsService', - { - info: infoNotification, - warning: warningNotification, - success: successNotification - } -); -const metadatum1 = Object.assign(new MetadatumViewModel(), { - key: 'dc.description.abstract', - value: 'Example abstract', - language: 'en' -}); - -const metadatum2 = Object.assign(new MetadatumViewModel(), { - key: 'dc.title', - value: 'Title test', - language: 'de' -}); - -const metadatum3 = Object.assign(new MetadatumViewModel(), { - key: 'dc.contributor.author', - value: 'Shakespeare, William', -}); - -const url = 'http://test-url.com/test-url'; - -router.url = url; - -const fieldUpdate1 = { - field: metadatum1, - changeType: undefined -}; - -const fieldUpdate2 = { - field: metadatum2, - changeType: FieldChangeType.REMOVE -}; - -const fieldUpdate3 = { - field: metadatum3, - changeType: undefined -}; - -const operation1 = { op: 'remove', path: '/metadata/dc.title/1' }; - -let scheduler: TestScheduler; -let item; -describe('ItemMetadataComponent', () => { - beforeEach(waitForAsync(() => { - item = Object.assign(new Item(), { - metadata: { - [metadatum1.key]: [metadatum1], - [metadatum2.key]: [metadatum2], - [metadatum3.key]: [metadatum3] - }, - _links: { - self: { - href: 'https://rest.api/core/items/a36d8bd2-8e8c-4969-9b1f-a574c2064983' - } - } - }, - { - lastModified: date - } - ) - ; - itemService = jasmine.createSpyObj('itemService', { - update: createSuccessfulRemoteDataObject$(item), - commitUpdates: {}, - patch: observableOf(new DSOSuccessResponse(['item-selflink'], 200, 'OK')), - findByHref: createSuccessfulRemoteDataObject$(item) - }); - routeStub = { - data: observableOf({}), - parent: { - data: observableOf({ dso: createSuccessfulRemoteDataObject(item) }) - } - }; - paginatedMetadataFields = createPaginatedList([mdField1, mdField2, mdField3]); - - metadataFieldService = jasmine.createSpyObj({ - getAllMetadataFields: createSuccessfulRemoteDataObject$(paginatedMetadataFields) - }); - scheduler = getTestScheduler(); - objectUpdatesService = jasmine.createSpyObj('objectUpdatesService', - { - getFieldUpdates: observableOf({ - [metadatum1.uuid]: fieldUpdate1, - [metadatum2.uuid]: fieldUpdate2, - [metadatum3.uuid]: fieldUpdate3 - }), - saveAddFieldUpdate: {}, - discardFieldUpdates: {}, - reinstateFieldUpdates: observableOf(true), - initialize: {}, - getUpdatedFields: observableOf([metadatum1, metadatum2, metadatum3]), - getLastModified: observableOf(date), - hasUpdates: observableOf(true), - isReinstatable: observableOf(false), // should always return something --> its in ngOnInit - isValidPage: observableOf(true), - createPatch: observableOf([ - operation1 - ]) - } - ); - objectCacheService = jasmine.createSpyObj('objectCacheService', ['addPatch']); - - TestBed.configureTestingModule({ - imports: [SharedModule, TranslateModule.forRoot()], - declarations: [ItemMetadataComponent], - providers: [ - { provide: ItemDataService, useValue: itemService }, - { provide: ObjectUpdatesService, useValue: objectUpdatesService }, - { provide: Router, useValue: router }, - { provide: ActivatedRoute, useValue: routeStub }, - { provide: NotificationsService, useValue: notificationsService }, - { provide: RegistryService, useValue: metadataFieldService }, - { provide: ObjectCacheService, useValue: objectCacheService }, - ], schemas: [ - NO_ERRORS_SCHEMA - ] - }).compileComponents(); - }) - ); - - beforeEach(() => { - fixture = TestBed.createComponent(ItemMetadataComponent); - comp = fixture.componentInstance; // EditInPlaceFieldComponent test instance - de = fixture.debugElement; - el = de.nativeElement; - comp.url = url; - fixture.detectChanges(); - }); - - describe('add', () => { - const md = new MetadatumViewModel(); - beforeEach(() => { - comp.add(md); - }); - - it('it should call saveAddFieldUpdate on the objectUpdatesService with the correct url and metadata', () => { - expect(objectUpdatesService.saveAddFieldUpdate).toHaveBeenCalledWith(url, md); - }); - }); - - describe('discard', () => { - beforeEach(() => { - comp.discard(); - }); - - it('it should call discardFieldUpdates on the objectUpdatesService with the correct url and notification', () => { - expect(objectUpdatesService.discardFieldUpdates).toHaveBeenCalledWith(url, infoNotification); - }); - }); - - describe('reinstate', () => { - beforeEach(() => { - comp.reinstate(); - }); - - it('it should call reinstateFieldUpdates on the objectUpdatesService with the correct url', () => { - expect(objectUpdatesService.reinstateFieldUpdates).toHaveBeenCalledWith(url); - }); - }); - - describe('submit', () => { - beforeEach(() => { - comp.submit(); - }); - - it('it should call reinstateFieldUpdates on the objectUpdatesService with the correct url and metadata', () => { - expect(objectUpdatesService.createPatch).toHaveBeenCalledWith(url); - expect(itemService.patch).toHaveBeenCalledWith(comp.item, [operation1]); - expect(objectUpdatesService.getFieldUpdates).toHaveBeenCalledWith(url, comp.item.metadataAsList); - }); - }); - - describe('hasChanges', () => { - describe('when the objectUpdatesService\'s hasUpdated method returns true', () => { - beforeEach(() => { - objectUpdatesService.hasUpdates.and.returnValue(observableOf(true)); - }); - - it('should return an observable that emits true', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.hasChanges()).toBe(expected, { a: true }); - }); - }); - - describe('when the objectUpdatesService\'s hasUpdated method returns false', () => { - beforeEach(() => { - objectUpdatesService.hasUpdates.and.returnValue(observableOf(false)); - }); - - it('should return an observable that emits false', () => { - const expected = '(a|)'; - scheduler.expectObservable(comp.hasChanges()).toBe(expected, { a: false }); - }); - }); - }); - - describe('changeType is UPDATE', () => { - beforeEach(() => { - fieldUpdate1.changeType = FieldChangeType.UPDATE; - fixture.detectChanges(); - }); - it('the div should have class table-warning', () => { - const element = de.queryAll(By.css('tr'))[1].nativeElement; - expect(element.classList).toContain('table-warning'); - }); - }); - - describe('changeType is ADD', () => { - beforeEach(() => { - fieldUpdate1.changeType = FieldChangeType.ADD; - fixture.detectChanges(); - }); - it('the div should have class table-success', () => { - const element = de.queryAll(By.css('tr'))[1].nativeElement; - expect(element.classList).toContain('table-success'); - }); - }); - - describe('changeType is REMOVE', () => { - beforeEach(() => { - fieldUpdate1.changeType = FieldChangeType.REMOVE; - fixture.detectChanges(); - }); - it('the div should have class table-danger', () => { - const element = de.queryAll(By.css('tr'))[1].nativeElement; - expect(element.classList).toContain('table-danger'); - }); - }); -}); diff --git a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts deleted file mode 100644 index 5030ef3bb3..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Item } from '../../../core/shared/item.model'; -import { ItemDataService } from '../../../core/data/item-data.service'; -import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service'; -import { ActivatedRoute, Router } from '@angular/router'; -import { cloneDeep } from 'lodash'; -import { first, switchMap } from 'rxjs/operators'; -import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; -import { RemoteData } from '../../../core/data/remote-data'; -import { NotificationsService } from '../../../shared/notifications/notifications.service'; -import { TranslateService } from '@ngx-translate/core'; -import { MetadataValue, MetadatumViewModel } from '../../../core/shared/metadata.models'; -import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component'; -import { UpdateDataService } from '../../../core/data/update-data.service'; -import { hasNoValue, hasValue } from '../../../shared/empty.util'; -import { AlertType } from '../../../shared/alert/aletr-type'; -import { Operation } from 'fast-json-patch'; -import { MetadataPatchOperationService } from '../../../core/data/object-updates/patch-operation-service/metadata-patch-operation.service'; - -@Component({ - selector: 'ds-item-metadata', - styleUrls: ['./item-metadata.component.scss'], - templateUrl: './item-metadata.component.html', -}) -/** - * Component for displaying an item's metadata edit page - */ -export class ItemMetadataComponent extends AbstractItemUpdateComponent { - - /** - * The AlertType enumeration - * @type {AlertType} - */ - public AlertTypeEnum = AlertType; - - /** - * A custom update service to use for adding and committing patches - * This will default to the ItemDataService - */ - @Input() updateService: UpdateDataService; - - constructor( - public itemService: ItemDataService, - public objectUpdatesService: ObjectUpdatesService, - public router: Router, - public notificationsService: NotificationsService, - public translateService: TranslateService, - public route: ActivatedRoute, - ) { - super(itemService, objectUpdatesService, router, notificationsService, translateService, route); - } - - /** - * Set up and initialize all fields - */ - ngOnInit(): void { - super.ngOnInit(); - if (hasNoValue(this.updateService)) { - this.updateService = this.itemService; - } - } - - /** - * Initialize the values and updates of the current item's metadata fields - */ - public initializeUpdates(): void { - this.updates$ = this.objectUpdatesService.getFieldUpdates(this.url, this.item.metadataAsList); - } - - /** - * Initialize the prefix for notification messages - */ - public initializeNotificationsPrefix(): void { - this.notificationsPrefix = 'item.edit.metadata.notifications.'; - } - - /** - * Sends a new add update for a field to the object updates service - * @param metadata The metadata to add, if no parameter is supplied, create a new Metadatum - */ - add(metadata: MetadatumViewModel = new MetadatumViewModel()) { - this.objectUpdatesService.saveAddFieldUpdate(this.url, metadata); - } - - /** - * Sends all initial values of this item to the object updates service - */ - public initializeOriginalFields() { - this.objectUpdatesService.initialize(this.url, this.item.metadataAsList, this.item.lastModified, MetadataPatchOperationService); - } - - /** - * Requests all current metadata for this item and requests the item service to update the item - * Makes sure the new version of the item is rendered on the page - */ - public submit() { - this.isValid().pipe(first()).subscribe((isValid) => { - if (isValid) { - this.objectUpdatesService.createPatch(this.url).pipe( - first(), - switchMap((patch: Operation[]) => { - return this.updateService.patch(this.item, patch).pipe( - getFirstCompletedRemoteData() - ); - }) - ).subscribe( - (rd: RemoteData) => { - if (rd.hasFailed) { - this.notificationsService.error(this.getNotificationTitle('error'), rd.errorMessage); - } else { - this.item = rd.payload; - this.checkAndFixMetadataUUIDs(); - this.initializeOriginalFields(); - this.updates$ = this.objectUpdatesService.getFieldUpdates(this.url, this.item.metadataAsList); - this.notificationsService.success(this.getNotificationTitle('saved'), this.getNotificationContent('saved')); - } - } - ); - } else { - this.notificationsService.error(this.getNotificationTitle('invalid'), this.getNotificationContent('invalid')); - } - }); - } - - /** - * Check for empty metadata UUIDs and fix them (empty UUIDs would break the object-update service) - */ - checkAndFixMetadataUUIDs() { - const metadata = cloneDeep(this.item.metadata); - Object.keys(this.item.metadata).forEach((key: string) => { - metadata[key] = this.item.metadata[key].map((value) => hasValue(value.uuid) ? value : Object.assign(new MetadataValue(), value)); - }); - this.item.metadata = metadata; - } -} diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 0140bad6dd..fd2b049d54 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -1815,6 +1815,8 @@ "item.edit.metadata.headers.value": "Value", + "item.edit.metadata.metadatafield.error": "An error occurred validating the metadata field", + "item.edit.metadata.metadatafield.invalid": "Please choose a valid metadata field", "item.edit.metadata.notifications.discarded.content": "Your changes were discarded. To reinstate your changes click the 'Undo' button", @@ -2270,6 +2272,64 @@ + "itemtemplate.edit.metadata.add-button": "Add", + + "itemtemplate.edit.metadata.discard-button": "Discard", + + "itemtemplate.edit.metadata.edit.buttons.confirm": "Confirm", + + "itemtemplate.edit.metadata.edit.buttons.drag": "Drag to reorder", + + "itemtemplate.edit.metadata.edit.buttons.edit": "Edit", + + "itemtemplate.edit.metadata.edit.buttons.remove": "Remove", + + "itemtemplate.edit.metadata.edit.buttons.undo": "Undo changes", + + "itemtemplate.edit.metadata.edit.buttons.unedit": "Stop editing", + + "itemtemplate.edit.metadata.edit.buttons.virtual": "This is a virtual metadata value, i.e. a value inherited from a related entity. It can’t be modified directly. Add or remove the corresponding relationship in the \"Relationships\" tab", + + "itemtemplate.edit.metadata.empty": "The item template currently doesn't contain any metadata. Click Add to start adding a metadata value.", + + "itemtemplate.edit.metadata.headers.edit": "Edit", + + "itemtemplate.edit.metadata.headers.field": "Field", + + "itemtemplate.edit.metadata.headers.language": "Lang", + + "itemtemplate.edit.metadata.headers.value": "Value", + + "itemtemplate.edit.metadata.metadatafield.error": "An error occurred validating the metadata field", + + "itemtemplate.edit.metadata.metadatafield.invalid": "Please choose a valid metadata field", + + "itemtemplate.edit.metadata.notifications.discarded.content": "Your changes were discarded. To reinstate your changes click the 'Undo' button", + + "itemtemplate.edit.metadata.notifications.discarded.title": "Changed discarded", + + "itemtemplate.edit.metadata.notifications.error.title": "An error occurred", + + "itemtemplate.edit.metadata.notifications.invalid.content": "Your changes were not saved. Please make sure all fields are valid before you save.", + + "itemtemplate.edit.metadata.notifications.invalid.title": "Metadata invalid", + + "itemtemplate.edit.metadata.notifications.outdated.content": "The item template you're currently working on has been changed by another user. Your current changes are discarded to prevent conflicts", + + "itemtemplate.edit.metadata.notifications.outdated.title": "Changed outdated", + + "itemtemplate.edit.metadata.notifications.saved.content": "Your changes to this item template's metadata were saved.", + + "itemtemplate.edit.metadata.notifications.saved.title": "Metadata saved", + + "itemtemplate.edit.metadata.reinstate-button": "Undo", + + "itemtemplate.edit.metadata.reset-order-button": "Undo reorder", + + "itemtemplate.edit.metadata.save-button": "Save", + + + "journal.listelement.badge": "Journal", "journal.page.description": "Description", From ceb6ea3672961f7bba0ffba7959a8b94e870b48d Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Wed, 4 Jan 2023 14:29:48 +0100 Subject: [PATCH 31/73] 93747: Fixed and improved ArrayMoveChangeAnalyzer --- ...array-move-change-analyzer.service.spec.ts | 13 ++++-- .../array-move-change-analyzer.service.ts | 41 +++++++++++-------- 2 files changed, 35 insertions(+), 19 deletions(-) diff --git a/src/app/core/data/array-move-change-analyzer.service.spec.ts b/src/app/core/data/array-move-change-analyzer.service.spec.ts index 5f5388d935..025791d6dc 100644 --- a/src/app/core/data/array-move-change-analyzer.service.spec.ts +++ b/src/app/core/data/array-move-change-analyzer.service.spec.ts @@ -41,21 +41,28 @@ describe('ArrayMoveChangeAnalyzer', () => { ], new MoveTest(0, 3)); testMove([ + { op: 'move', from: '/2', path: '/3' }, { op: 'move', from: '/0', path: '/3' }, - { op: 'move', from: '/2', path: '/1' } ], new MoveTest(0, 3), new MoveTest(1, 2)); testMove([ + { op: 'move', from: '/3', path: '/4' }, { op: 'move', from: '/0', path: '/1' }, - { op: 'move', from: '/3', path: '/4' } ], new MoveTest(0, 1), new MoveTest(3, 4)); testMove([], new MoveTest(0, 4), new MoveTest(4, 0)); testMove([ + { op: 'move', from: '/2', path: '/3' }, { op: 'move', from: '/0', path: '/3' }, - { op: 'move', from: '/2', path: '/1' } ], new MoveTest(0, 4), new MoveTest(1, 3), new MoveTest(2, 4)); + + testMove([ + { op: 'move', from: '/3', path: '/4' }, + { op: 'move', from: '/2', path: '/4' }, + { op: 'move', from: '/1', path: '/3' }, + { op: 'move', from: '/0', path: '/3' }, + ], new MoveTest(4, 1), new MoveTest(4, 2), new MoveTest(0, 3)); }); describe('when some values are undefined (index 2 and 3)', () => { diff --git a/src/app/core/data/array-move-change-analyzer.service.ts b/src/app/core/data/array-move-change-analyzer.service.ts index f6e07608f6..36744e9f96 100644 --- a/src/app/core/data/array-move-change-analyzer.service.ts +++ b/src/app/core/data/array-move-change-analyzer.service.ts @@ -16,22 +16,31 @@ export class ArrayMoveChangeAnalyzer { * @param array2 The custom array to compare with the original */ diff(array1: T[], array2: T[]): MoveOperation[] { - const result = []; - const moved = [...array1]; - array1.forEach((value: T, index: number) => { - if (hasValue(value)) { - const otherIndex = array2.indexOf(value); - const movedIndex = moved.indexOf(value); - if (index !== otherIndex && movedIndex !== otherIndex) { - moveItemInArray(moved, movedIndex, otherIndex); - result.push(Object.assign({ - op: 'move', - from: '/' + movedIndex, - path: '/' + otherIndex - }) as MoveOperation); - } + return this.getMoves(array1, array2).map((move) => Object.assign({ + op: 'move', + from: '/' + move[0], + path: '/' + move[1], + }) as MoveOperation); + } + + /** + * Determine a set of moves required to transform array1 into array2 + * The moves are returned as an array of pairs of numbers where the first number is the original index and the second + * is the new index + * It is assumed the operations are executed in the order they're returned (and not simultaneously) + * @param array1 + * @param array2 + */ + private getMoves(array1: any[], array2: any[]): number[][] { + const moved = [...array2]; + + return array1.reduce((moves, item, index) => { + if (hasValue(item) && item !== moved[index]) { + const last = moved.lastIndexOf(item); + moveItemInArray(moved, last, index); + moves.unshift([index, last]); } - }); - return result; + return moves; + }, []); } } From 124469209a1bbeedd46d8f12c3ca852728bbe40c Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Wed, 4 Jan 2023 17:51:34 +0100 Subject: [PATCH 32/73] 97742: Post merge test & build fixes --- .../dso-edit-metadata-value.component.spec.ts | 6 ++-- .../dso-edit-metadata-value.component.ts | 4 +-- .../dso-edit-metadata.component.spec.ts | 24 +++++++------ .../dso-edit-metadata.component.ts | 11 +++--- .../themed-item-metadata.component.ts | 34 ------------------- .../item-metadata.component.html | 0 .../item-metadata.component.scss | 0 .../item-metadata/item-metadata.component.ts | 17 ---------- src/themes/custom/lazy-theme.module.ts | 2 -- 9 files changed, 26 insertions(+), 72 deletions(-) delete mode 100644 src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts delete mode 100644 src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.html delete mode 100644 src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss delete mode 100644 src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts index 08f041c4cd..10b3016a52 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts @@ -4,7 +4,7 @@ import { VarDirective } from '../../../shared/utils/var.directive'; import { TranslateModule } from '@ngx-translate/core'; import { RouterTestingModule } from '@angular/router/testing'; import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; -import { RelationshipService } from '../../../core/data/relationship.service'; +import { RelationshipDataService } from '../../../core/data/relationship-data.service'; import { DSONameService } from '../../../core/breadcrumbs/dso-name.service'; import { of } from 'rxjs/internal/observable/of'; import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model'; @@ -22,7 +22,7 @@ describe('DsoEditMetadataValueComponent', () => { let component: DsoEditMetadataValueComponent; let fixture: ComponentFixture; - let relationshipService: RelationshipService; + let relationshipService: RelationshipDataService; let dsoNameService: DSONameService; let editMetadataValue: DsoEditMetadataValue; @@ -52,7 +52,7 @@ describe('DsoEditMetadataValueComponent', () => { declarations: [DsoEditMetadataValueComponent, VarDirective], imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])], providers: [ - { provide: RelationshipService, useValue: relationshipService }, + { provide: RelationshipDataService, useValue: relationshipService }, { provide: DSONameService, useValue: dsoNameService }, ], schemas: [NO_ERRORS_SCHEMA] diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts index dce0ec68b0..3fdcd381ab 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts @@ -5,7 +5,7 @@ import { MetadataRepresentation, MetadataRepresentationType } from '../../../core/shared/metadata-representation/metadata-representation.model'; -import { RelationshipService } from '../../../core/data/relationship.service'; +import { RelationshipDataService } from '../../../core/data/relationship-data.service'; import { DSpaceObject } from '../../../core/shared/dspace-object.model'; import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model'; import { map } from 'rxjs/operators'; @@ -97,7 +97,7 @@ export class DsoEditMetadataValueComponent implements OnInit { */ mdRepresentationName$: Observable; - constructor(protected relationshipService: RelationshipService, + constructor(protected relationshipService: RelationshipDataService, protected dsoNameService: DSONameService) { } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts index b3650114c9..7067c44fbb 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts @@ -3,22 +3,32 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { VarDirective } from '../../shared/utils/var.directive'; import { TranslateModule } from '@ngx-translate/core'; import { RouterTestingModule } from '@angular/router/testing'; -import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; +import { DebugElement, Injectable, NO_ERRORS_SCHEMA } from '@angular/core'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; import { Item } from '../../core/shared/item.model'; -import { ItemDataService } from '../../core/data/item-data.service'; import { MetadataValue } from '../../core/shared/metadata.models'; import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; import { By } from '@angular/platform-browser'; import { NotificationsService } from '../../shared/notifications/notifications.service'; import { ArrayMoveChangeAnalyzer } from '../../core/data/array-move-change-analyzer.service'; import { ITEM } from '../../core/shared/item.resource-type'; +import { DATA_SERVICE_FACTORY } from '../../core/data/base/data-service.decorator'; +import { Operation } from 'fast-json-patch'; +import { RemoteData } from '../../core/data/remote-data'; +import { Observable } from 'rxjs/internal/Observable'; const ADD_BTN = 'add'; const REINSTATE_BTN = 'reinstate'; const SAVE_BTN = 'save'; const DISCARD_BTN = 'discard'; +@Injectable() +class TestDataService { + patch(object: Item, operations: Operation[]): Observable> { + return createSuccessfulRemoteDataObject$(object); + } +} + describe('DsoEditMetadataComponent', () => { let component: DsoEditMetadataComponent; let fixture: ComponentFixture; @@ -26,8 +36,6 @@ describe('DsoEditMetadataComponent', () => { let notificationsService: NotificationsService; let dso: DSpaceObject; - let updatedDso: DSpaceObject; - let dataService: ItemDataService; beforeEach(waitForAsync(() => { dso = Object.assign(new Item(), { @@ -59,11 +67,6 @@ describe('DsoEditMetadataComponent', () => { ], }, }); - updatedDso = Object.assign(new Item(), dso); - updatedDso.metadata['dc.title'][0].value = 'Updated Title'; - dataService = jasmine.createSpyObj('itemDataService', { - patch: createSuccessfulRemoteDataObject$(updatedDso), - }); notificationsService = jasmine.createSpyObj('notificationsService', ['error', 'success']); @@ -71,7 +74,8 @@ describe('DsoEditMetadataComponent', () => { declarations: [DsoEditMetadataComponent, VarDirective], imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])], providers: [ - { provide: ItemDataService, useValue: dataService }, + TestDataService, + { provide: DATA_SERVICE_FACTORY, useValue: jasmine.createSpy('getDataServiceFor').and.returnValue(TestDataService) }, { provide: NotificationsService, useValue: notificationsService }, ArrayMoveChangeAnalyzer, ], diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts index a2ceaa21d6..d67a7ea738 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -1,4 +1,4 @@ -import { Component, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, Inject, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { AlertType } from '../../shared/alert/aletr-type'; import { DSpaceObject } from '../../core/shared/dspace-object.model'; import { DsoEditMetadataForm } from './dso-edit-metadata-form'; @@ -13,13 +13,15 @@ import { getFirstCompletedRemoteData, } from '../../core/shared/operators'; import { UpdateDataService } from '../../core/data/update-data.service'; -import { getDataServiceFor } from '../../core/cache/builders/build-decorators'; import { ResourceType } from '../../core/shared/resource-type'; import { NotificationsService } from '../../shared/notifications/notifications.service'; import { TranslateService } from '@ngx-translate/core'; import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component'; import { Observable } from 'rxjs/internal/Observable'; import { ArrayMoveChangeAnalyzer } from '../../core/data/array-move-change-analyzer.service'; +import { DATA_SERVICE_FACTORY } from '../../core/data/base/data-service.decorator'; +import { GenericConstructor } from '../../core/shared/generic-constructor'; +import { HALDataService } from '../../core/data/base/hal-data-service.interface'; @Component({ selector: 'ds-dso-edit-metadata', @@ -107,7 +109,8 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { protected notificationsService: NotificationsService, protected translateService: TranslateService, protected parentInjector: Injector, - protected arrayMoveChangeAnalyser: ArrayMoveChangeAnalyzer) { + protected arrayMoveChangeAnalyser: ArrayMoveChangeAnalyzer, + @Inject(DATA_SERVICE_FACTORY) protected getDataServiceFor: (resourceType: ResourceType) => GenericConstructor>) { } /** @@ -144,7 +147,7 @@ export class DsoEditMetadataComponent implements OnInit, OnDestroy { type = this.dso.type; } if (hasNoValue(this.updateDataService)) { - const provider = getDataServiceFor(type); + const provider = this.getDataServiceFor(type); this.updateDataService = Injector.create({ providers: [], parent: this.parentInjector diff --git a/src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts b/src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts deleted file mode 100644 index 53f0120015..0000000000 --- a/src/app/item-page/edit-item-page/item-metadata/themed-item-metadata.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Item } from '../../../core/shared/item.model'; -import { UpdateDataService } from '../../../core/data/update-data.service'; -import { ItemMetadataComponent } from './item-metadata.component'; -import { ThemedComponent } from '../../../shared/theme-support/themed.component'; - -@Component({ - selector: 'ds-themed-item-metadata', - styleUrls: [], - templateUrl: './../../../shared/theme-support/themed.component.html', -}) -/** - * Component for displaying an item's metadata edit page - */ -export class ThemedItemMetadataComponent extends ThemedComponent { - - @Input() item: Item; - - @Input() updateService: UpdateDataService; - - protected inAndOutputNames: (keyof ItemMetadataComponent & keyof this)[] = ['item', 'updateService']; - - protected getComponentName(): string { - return 'ItemMetadataComponent'; - } - - protected importThemedComponent(themeName: string): Promise { - return import(`../../../../themes/${themeName}/app/item-page/edit-item-page/item-metadata/item-metadata.component`); - } - - protected importUnthemedComponent(): Promise { - return import(`./item-metadata.component`); - } -} diff --git a/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss b/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts deleted file mode 100644 index d6d7c4b8fb..0000000000 --- a/src/themes/custom/app/item-page/edit-item-page/item-metadata/item-metadata.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; -import { - ItemMetadataComponent as BaseComponent -} from '../../../../../../app/item-page/edit-item-page/item-metadata/item-metadata.component'; - -@Component({ - selector: 'ds-item-metadata', - // styleUrls: ['./item-metadata.component.scss'], - styleUrls: ['../../../../../../app/item-page/edit-item-page/item-metadata/item-metadata.component.scss'], - // templateUrl: './item-metadata.component.html', - templateUrl: '../../../../../../app/item-page/edit-item-page/item-metadata/item-metadata.component.html', -}) -/** - * Component for displaying an item's metadata edit page - */ -export class ItemMetadataComponent extends BaseComponent { -} diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts index d2ac0ae787..a57c4178a7 100644 --- a/src/themes/custom/lazy-theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -94,7 +94,6 @@ import { AuthNavMenuComponent } from './app/shared/auth-nav-menu/auth-nav-menu.c import { ExpandableNavbarSectionComponent } from './app/navbar/expandable-navbar-section/expandable-navbar-section.component'; -import { ItemMetadataComponent } from './app/item-page/edit-item-page/item-metadata/item-metadata.component'; import { EditItemTemplatePageComponent } from './app/collection-page/edit-item-template-page/edit-item-template-page.component'; @@ -157,7 +156,6 @@ const DECLARATIONS = [ ComcolPageHandleComponent, AuthNavMenuComponent, ExpandableNavbarSectionComponent, - ItemMetadataComponent, EditItemTemplatePageComponent, LoadingComponent, SearchResultsComponent, From 30eba0bdefd58ab8aea067b3ae839aee30904bb0 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 5 Jan 2023 11:37:46 +0100 Subject: [PATCH 33/73] 97742: Themed DsoEditMetadataComponent --- .../edit-item-template-page.component.html | 2 +- .../themed-dso-edit-metadata.component.ts | 33 +++++++++++++++++++ src/app/dso-shared/dso-shared.module.ts | 7 ++++ .../edit-item-page.routing.module.ts | 3 +- .../dso-edit-metadata.component.html | 0 .../dso-edit-metadata.component.scss | 0 .../dso-edit-metadata.component.ts | 12 +++++++ src/themes/custom/lazy-theme.module.ts | 6 ++-- 8 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 src/app/dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component.ts create mode 100644 src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html create mode 100644 src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss create mode 100644 src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts diff --git a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html index ba18fa69b9..4d630659e8 100644 --- a/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html +++ b/src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html @@ -3,7 +3,7 @@

{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}

- + diff --git a/src/app/dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component.ts new file mode 100644 index 0000000000..ba21907c99 --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component.ts @@ -0,0 +1,33 @@ +import { ThemedComponent } from '../../shared/theme-support/themed.component'; +import { DsoEditMetadataComponent } from './dso-edit-metadata.component'; +import { Component, Input } from '@angular/core'; +import { DSpaceObject } from '../../core/shared/dspace-object.model'; +import { UpdateDataService } from '../../core/data/update-data.service'; + +@Component({ + selector: 'ds-themed-dso-edit-metadata', + styleUrls: [], + templateUrl: './../../shared/theme-support/themed.component.html', +}) +export class ThemedDsoEditMetadataComponent extends ThemedComponent { + + @Input() dso: DSpaceObject; + + @Input() updateDataService: UpdateDataService; + + protected inAndOutputNames: (keyof DsoEditMetadataComponent & keyof this)[] = ['dso', 'updateDataService']; + + protected getComponentName(): string { + return 'DsoEditMetadataComponent'; + } + + protected importThemedComponent(themeName: string): Promise { + return import(`../../../themes/${themeName}/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component`); + } + + protected importUnthemedComponent(): Promise { + return import(`./dso-edit-metadata.component`); + } + + +} diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts index 0a9294105b..e09cbac915 100644 --- a/src/app/dso-shared/dso-shared.module.ts +++ b/src/app/dso-shared/dso-shared.module.ts @@ -5,6 +5,7 @@ import { MetadataFieldSelectorComponent } from './dso-edit-metadata/metadata-fie import { DsoEditMetadataFieldValuesComponent } from './dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component'; import { DsoEditMetadataValueComponent } from './dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component'; import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component'; +import { ThemedDsoEditMetadataComponent } from './dso-edit-metadata/themed-dso-edit-metadata.component'; @NgModule({ imports: [ @@ -12,6 +13,7 @@ import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-me ], declarations: [ DsoEditMetadataComponent, + ThemedDsoEditMetadataComponent, MetadataFieldSelectorComponent, DsoEditMetadataFieldValuesComponent, DsoEditMetadataValueComponent, @@ -19,6 +21,11 @@ import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-me ], exports: [ DsoEditMetadataComponent, + ThemedDsoEditMetadataComponent, + MetadataFieldSelectorComponent, + DsoEditMetadataFieldValuesComponent, + DsoEditMetadataValueComponent, + DsoEditMetadataHeadersComponent, ], }) export class DsoSharedModule { diff --git a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts index 7ccf1fec37..47bf41335f 100644 --- a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts +++ b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts @@ -38,6 +38,7 @@ import { ItemPageRelationshipsGuard } from './item-page-relationships.guard'; import { ItemPageVersionHistoryGuard } from './item-page-version-history.guard'; import { ItemPageCollectionMapperGuard } from './item-page-collection-mapper.guard'; import { DsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/dso-edit-metadata.component'; +import { ThemedDsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component'; /** * Routing module that handles the routing for the Edit Item page administrator functionality @@ -75,7 +76,7 @@ import { DsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/dso }, { path: 'metadata', - component: DsoEditMetadataComponent, + component: ThemedDsoEditMetadataComponent, data: { title: 'item.edit.tabs.metadata.title', showBreadcrumbs: true }, canActivate: [ItemPageMetadataGuard] }, diff --git a/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss b/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts new file mode 100644 index 0000000000..b1cd6d2b39 --- /dev/null +++ b/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts @@ -0,0 +1,12 @@ +import { DsoEditMetadataComponent as BaseComponent } from '../../../../../app/dso-shared/dso-edit-metadata/dso-edit-metadata.component'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'ds-dso-edit-metadata', + // styleUrls: ['./dso-edit-metadata.component.scss'], + styleUrls: ['../../../../../app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss'], + // templateUrl: './dso-edit-metadata.component.html', + templateUrl: '../../../../../app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html', +}) +export class DsoEditMetadataComponent extends BaseComponent { +} diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts index a57c4178a7..3c618a5746 100644 --- a/src/themes/custom/lazy-theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -113,6 +113,8 @@ import { ObjectListComponent } from './app/shared/object-list/object-list.compon import { BrowseByMetadataPageComponent } from './app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component'; import { BrowseByDatePageComponent } from './app/browse-by/browse-by-date-page/browse-by-date-page.component'; import { BrowseByTitlePageComponent } from './app/browse-by/browse-by-title-page/browse-by-title-page.component'; +import { DsoEditMetadataComponent } from './app/dso-shared/dso-edit-metadata/dso-edit-metadata.component'; +import { DsoSharedModule } from '../../app/dso-shared/dso-shared.module'; const DECLARATIONS = [ FileSectionComponent, @@ -166,8 +168,7 @@ const DECLARATIONS = [ BrowseByMetadataPageComponent, BrowseByDatePageComponent, BrowseByTitlePageComponent, - - + DsoEditMetadataComponent, ]; @NgModule({ @@ -218,6 +219,7 @@ const DECLARATIONS = [ FormsModule, ResourcePoliciesModule, ComcolModule, + DsoSharedModule, ], declarations: DECLARATIONS, exports: [ From 57f10fa9eb3d93fef491a67e66b355f24fe27255 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 5 Jan 2023 11:47:53 +0100 Subject: [PATCH 34/73] v1.22.19 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 52b089be37..0f41cec0c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dspace-angular", - "version": "7.5.0-next", + "version": "1.22.19", "scripts": { "ng": "ng", "config:watch": "nodemon", From 9f61109e8373edfb6b45b7d3511b211102faebdb Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 5 Jan 2023 13:07:31 +0100 Subject: [PATCH 35/73] 97742: Lint fix --- .../dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts index 2c584fb534..8206ec9135 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-form.ts @@ -1,3 +1,4 @@ +/* eslint-disable max-classes-per-file */ import { MetadataMap, MetadataValue } from '../../core/shared/metadata.models'; import { hasNoValue, hasValue, isEmpty, isNotEmpty } from '../../shared/empty.util'; import { MoveOperation, Operation } from 'fast-json-patch'; @@ -7,8 +8,6 @@ import { MetadataPatchAddOperation } from '../../core/data/object-updates/patch- import { ArrayMoveChangeAnalyzer } from '../../core/data/array-move-change-analyzer.service'; import { MetadataPatchMoveOperation } from '../../core/data/object-updates/patch-operation-service/operations/metadata/metadata-patch-move-operation.model'; -/* tslint:disable:max-classes-per-file */ - /** * Enumeration for the type of change occurring on a metadata value */ @@ -452,4 +451,3 @@ export class DsoEditMetadataForm { return operations; } } -/* tslint:enable:max-classes-per-file */ From 8cbf3511bb902ff0737ece47fa03dd15a3539b05 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 5 Jan 2023 13:13:40 +0100 Subject: [PATCH 36/73] 97742: Lint fixes --- .../metadata-field-selector.component.ts | 2 +- .../item-page/edit-item-page/edit-item-page.routing.module.ts | 1 - .../metadata-representation-list.component.spec.ts | 2 -- 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts index 066f671301..5053a4b83d 100644 --- a/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts +++ b/src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts @@ -12,7 +12,7 @@ import { import { switchMap, debounceTime, distinctUntilChanged, map, tap, take } from 'rxjs/operators'; import { followLink } from '../../../shared/utils/follow-link-config.model'; import { - getAllSucceededRemoteData, getFirstCompletedRemoteData, getFirstSucceededRemoteData, + getAllSucceededRemoteData, getFirstCompletedRemoteData, metadataFieldsToString } from '../../../core/shared/operators'; import { Observable } from 'rxjs/internal/Observable'; diff --git a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts index 47bf41335f..e6fa53f3f3 100644 --- a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts +++ b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts @@ -37,7 +37,6 @@ import { ItemPageBitstreamsGuard } from './item-page-bitstreams.guard'; import { ItemPageRelationshipsGuard } from './item-page-relationships.guard'; import { ItemPageVersionHistoryGuard } from './item-page-version-history.guard'; import { ItemPageCollectionMapperGuard } from './item-page-collection-mapper.guard'; -import { DsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/dso-edit-metadata.component'; import { ThemedDsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component'; /** diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts index 7321e57b9f..54420721b8 100644 --- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts +++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.spec.ts @@ -4,8 +4,6 @@ import { By } from '@angular/platform-browser'; import { MetadataRepresentationListComponent } from './metadata-representation-list.component'; import { RelationshipDataService } from '../../../core/data/relationship-data.service'; import { Item } from '../../../core/shared/item.model'; -import { Relationship } from '../../../core/shared/item-relationships/relationship.model'; -import { createSuccessfulRemoteDataObject$, createFailedRemoteDataObject$ } from '../../../shared/remote-data.utils'; import { TranslateModule } from '@ngx-translate/core'; import { VarDirective } from '../../../shared/utils/var.directive'; import { of as observableOf } from 'rxjs'; From 5da65b3c791e573d4d43046080c5a23c49ac2530 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 5 Jan 2023 13:42:25 +0100 Subject: [PATCH 37/73] 97742: Revert accidental dspace-angular version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0f41cec0c8..52b089be37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dspace-angular", - "version": "1.22.19", + "version": "7.5.0-next", "scripts": { "ng": "ng", "config:watch": "nodemon", From 10bf18fe29c0dedb7bdaa52bdbb16ddef35e967e Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Mon, 2 Jan 2023 15:33:25 +0100 Subject: [PATCH 38/73] 97399 WIP: Tests for ContextHelpDirective --- .../page-internal-server-error.component.html | 2 +- .../context-help-wrapper.component.ts | 6 +- src/app/shared/context-help.directive.spec.ts | 65 +++++++++++++++++-- src/app/shared/context-help.directive.ts | 8 +-- 4 files changed, 69 insertions(+), 12 deletions(-) diff --git a/src/app/page-internal-server-error/page-internal-server-error.component.html b/src/app/page-internal-server-error/page-internal-server-error.component.html index 4995afc80b..595fd9961b 100644 --- a/src/app/page-internal-server-error/page-internal-server-error.component.html +++ b/src/app/page-internal-server-error/page-internal-server-error.component.html @@ -1,6 +1,6 @@

500

-

{{"500.page-internal-server-error" | translate}}

+

{{"500.page-internal-server-error" | translate}}


{{"500.help" | translate}}


diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts index 1792425798..0ef535bf95 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts @@ -53,7 +53,7 @@ export class ContextHelpWrapperComponent { * into link-free pieces of text and objects of the form * {href: string, text: string} (which represent links). * This function makes no effort to check whether the href is a - * correct URL. Currently this function does not support escape + * correct URL. Currently, this function does not support escape * characters: its behavior when given a string containing square * brackets that do not deliminate a link is undefined. * Regular parentheses outside of links do work, however. @@ -66,7 +66,7 @@ export class ContextHelpWrapperComponent { * " is a link, and ", * {href: "https://youtube.com", text: "so is this"} * ] - */ + */ private parseLinks(content: string): (string | {href: string, text: string})[] { // Implementation note: due to unavailability of `matchAll` method on strings, // separate "split" and "parse" steps are needed. @@ -93,4 +93,4 @@ export class ContextHelpWrapperComponent { } - + diff --git a/src/app/shared/context-help.directive.spec.ts b/src/app/shared/context-help.directive.spec.ts index f00fb9d355..35770b6038 100644 --- a/src/app/shared/context-help.directive.spec.ts +++ b/src/app/shared/context-help.directive.spec.ts @@ -1,8 +1,65 @@ -import { ContextHelpDirective } from './context-help.directive'; +import { Component, DebugElement, Input } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { of as observableOf, Observable } from 'rxjs'; +import { ContextHelpDirective, ContextHelpDirectiveInput } from './context-help.directive'; +import { TranslateService } from '@ngx-translate/core'; +import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component'; +import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + template: `
some text
` +}) +class TestComponent { + @Input() content = ''; + contextHelpParams(): ContextHelpDirectiveInput { + return { + content: this.content + }; + } +} + +// tslint:disable-next-line:max-classes-per-file +class MockTranslateService { + messages: {[index: string]: string} = { + lorem: 'lorem ipsum dolor sit amet', + linkTest: 'This is text, [this](https://dspace.lyrasis.org) is a link, and [so is this](https://google.com)' + }; + + get(key: string): Observable { + return observableOf(this.messages[key]); + } +} describe('ContextHelpDirective', () => { - it('should create an instance', () => { - const directive = new ContextHelpDirective(); - expect(directive).toBeTruthy(); + let component: TestComponent; + let fixture: ComponentFixture; + // let el: DebugElement; + // let translateService: TranslateService; + + beforeEach(() => { + console.log('Anyone hear that?'); + fixture = TestBed.configureTestingModule({ + imports: [NgbTooltipModule], + providers: [ + { provide: TranslateService, useClass: MockTranslateService } + ], + declarations: [TestComponent, ContextHelpWrapperComponent, ContextHelpDirective] + }).createComponent(TestComponent); + component = fixture.componentInstance; + }); + + it('should add the tooltip icon', () => { + component.content = 'lorem'; + fixture.detectChanges(); + + expect(component).toBeDefined(); + const [wrapper] = fixture.nativeElement.children; + const [i, div] = wrapper.children; + expect(wrapper.tagName).toBe('DS-CONTEXT-HELP-WRAPPER'); + expect(i.tagName).toBe('I'); + expect(div.tagName).toBe('DIV'); + expect(div.innerHTML).toBe('some text'); + i.click(); // TODO: triggers a type error }); }); diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts index 4ffa4d24d6..1d8bcccfa7 100644 --- a/src/app/shared/context-help.directive.ts +++ b/src/app/shared/context-help.directive.ts @@ -3,10 +3,10 @@ import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component'; import { PlacementDir } from './context-help-wrapper/placement-dir.model'; -export type ContextHelpDirectiveInput = { - content: string, - tooltipPlacement?: PlacementArray, - iconPlacement?: PlacementDir +export interface ContextHelpDirectiveInput { + content: string; + tooltipPlacement?: PlacementArray; + iconPlacement?: PlacementDir; } /* From c156e1ca6f57c9c914a772e349ea8182ff54ad73 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Wed, 4 Jan 2023 11:43:15 +0100 Subject: [PATCH 39/73] 97732 Context help model, actions and reducer --- src/app/shared/context-help.actions.ts | 81 +++++++++++++++++++++ src/app/shared/context-help.model.ts | 4 + src/app/shared/context-help.reducer.ts | 47 ++++++++++++ src/app/shared/context-help.service.spec.ts | 16 ++++ src/app/shared/context-help.service.ts | 33 +++++++++ 5 files changed, 181 insertions(+) create mode 100644 src/app/shared/context-help.actions.ts create mode 100644 src/app/shared/context-help.model.ts create mode 100644 src/app/shared/context-help.reducer.ts create mode 100644 src/app/shared/context-help.service.spec.ts create mode 100644 src/app/shared/context-help.service.ts diff --git a/src/app/shared/context-help.actions.ts b/src/app/shared/context-help.actions.ts new file mode 100644 index 0000000000..2bd8b6a163 --- /dev/null +++ b/src/app/shared/context-help.actions.ts @@ -0,0 +1,81 @@ +import { Action } from '@ngrx/store'; +import { type } from './ngrx/type'; +import { ContextHelpModel } from './context-help.model'; + +export const ContextHelpActionTypes = { + 'CONTEXT_HELP_TOGGLE_ICONS': type('dspace/context-help/CONTEXT_HELP_TOGGLE_ICONS'), + 'CONTEXT_HELP_ADD': type('dspace/context-help/CONTEXT_HELP_ADD'), + 'CONTEXT_HELP_REMOVE': type('dspace/context-help/CONTEXT_HELP_REMOVE'), + 'CONTEXT_HELP_TOGGLE_TOOLTIP': type('dspace/context-help/CONTEXT_HELP_TOGGLE_TOOLTIP'), + 'CONTEXT_HELP_SHOW_TOOLTIP': type('dspace/context-help/CONTEXT_HELP_SHOW_TOOLTIP'), + 'CONTEXT_HELP_HIDE_TOOLTIP' : type('dspace/context-help/CONTEXT_HELP_HIDE_TOOLTIP'), +}; + +/** + * Toggles the visibility of all context help icons. + */ +export class ContextHelpToggleIconsAction implements Action { + type = ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_ICONS; +} + +/** + * Registers a new context help icon to the store. + */ +export class ContextHelpAddAction implements Action { + type = ContextHelpActionTypes.CONTEXT_HELP_ADD; + model: ContextHelpModel; + + constructor (model: ContextHelpModel) { + this.model = model; + } +} + +/** + * Removes a context help icon from the store. + */ +export class ContextHelpRemoveAction implements Action { + type = ContextHelpActionTypes.CONTEXT_HELP_REMOVE; + id: string; + + constructor(id: string) { + this.id = id; + } +} + +export abstract class ContextHelpTooltipAction implements Action { + type; + id: string; + + constructor(id: string) { + this.id = id; + } +} + +/** + * Toggles the tooltip of a single context help icon. + */ +export class ContextHelpToggleTooltipAction extends ContextHelpTooltipAction { + type = ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_TOOLTIP; +} + +/** + * Shows the tooltip of a single context help icon. + */ +export class ContextHelpShowTooltipAction extends ContextHelpTooltipAction { + type = ContextHelpActionTypes.CONTEXT_HELP_SHOW_TOOLTIP; +} + +/** + * Hides the tooltip of a single context help icon. + */ +export class ContextHelpHideTooltipAction extends ContextHelpTooltipAction { + type = ContextHelpActionTypes.CONTEXT_HELP_HIDE_TOOLTIP; +} + +export type ContextHelpAction + = ContextHelpToggleIconsAction + | ContextHelpAddAction + | ContextHelpRemoveAction + | ContextHelpToggleTooltipAction + | ContextHelpShowTooltipAction + | ContextHelpHideTooltipAction; diff --git a/src/app/shared/context-help.model.ts b/src/app/shared/context-help.model.ts new file mode 100644 index 0000000000..4b2b344f60 --- /dev/null +++ b/src/app/shared/context-help.model.ts @@ -0,0 +1,4 @@ +export class ContextHelpModel { + id: string; + tooltipVisible?: boolean = false; +} diff --git a/src/app/shared/context-help.reducer.ts b/src/app/shared/context-help.reducer.ts new file mode 100644 index 0000000000..b5f683956f --- /dev/null +++ b/src/app/shared/context-help.reducer.ts @@ -0,0 +1,47 @@ +import { ContextHelpModel } from './context-help.model'; +import { ContextHelpAction, ContextHelpActionTypes } from './context-help.actions'; + +export type ContextHelpModels = { + [id: string]: ContextHelpModel; +}; + +export interface ContextHelpState { + allIconsVisible: boolean; + models: ContextHelpModels; +} + +export function contextHelpReducer(state: ContextHelpState, action: ContextHelpAction): ContextHelpState { + switch (action.type) { + case ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_ICONS: { + return {...state, allIconsVisible: true}; + } + case ContextHelpActionTypes.CONTEXT_HELP_ADD: { + const newModels = {...state.models, [action.model.id]: action.model}; + return {...state, models: newModels}; + } + case ContextHelpActionTypes.CONTEXT_HELP_REMOVE: { + const {[action.id]: _, ...remainingModels} = state.models; + return {...state, models: remainingModels}; + } + case ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_TOOLTIP: { + return modifyTooltipVisibility(state, action.id, v => !v); + } + case ContextHelpActionTypes.CONTEXT_HELP_SHOW_TOOLTIP: { + return modifyTooltipVisibility(state, action.id, _ => true); + } + case ContextHelpActionTypes.CONTEXT_HELP_HIDE_TOOLTIP: { + return modifyTooltipVisibility(state, action.id, _ => false); + } + default: { + return state; + } + } +} + +function modifyTooltipVisibility(state: ContextHelpState, id: string, modify: (vis: boolean) => boolean) + : ContextHelpState { + const {[id]: matchingModel, ...otherModels} = state.models; + const modifiedModel = {...matchingModel, tooltipVisible: modify(matchingModel.tooltipVisible)}; + const newModels = {...otherModels, [id]: modifiedModel}; + return {...state, models: newModels}; +} diff --git a/src/app/shared/context-help.service.spec.ts b/src/app/shared/context-help.service.spec.ts new file mode 100644 index 0000000000..d2d29121b0 --- /dev/null +++ b/src/app/shared/context-help.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ContextHelpService } from './context-help.service'; + +describe('ContextHelpService', () => { + let service: ContextHelpService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ContextHelpService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts new file mode 100644 index 0000000000..071308c713 --- /dev/null +++ b/src/app/shared/context-help.service.ts @@ -0,0 +1,33 @@ +import { Injectable } from '@angular/core'; +import { ContextHelpModel } from './context-help.model'; + +@Injectable({ + providedIn: 'root' +}) +export class ContextHelpService { + constructor() { } + + toggleIcons() { + + } + + add(contextHelp: ContextHelpModel) { + + } + + remove(id: string) { + + } + + showTooltip(id: string) { + + } + + hideTooltip(id: string) { + + } + + toggleTooltip(id: string) { + + } +} From 5ba45cb0fac564bfd701a92da6824b831ada0976 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Wed, 4 Jan 2023 15:54:09 +0100 Subject: [PATCH 40/73] 97732 Context help service, changes to directive and component --- src/app/app.reducer.ts | 5 +- .../page-internal-server-error.component.html | 2 +- .../context-help-wrapper.component.html | 8 +- .../context-help-wrapper.component.ts | 75 +++++++++++++-- src/app/shared/context-help.actions.ts | 6 +- src/app/shared/context-help.directive.ts | 48 +++++++--- src/app/shared/context-help.model.ts | 4 +- src/app/shared/context-help.reducer.ts | 11 ++- src/app/shared/context-help.service.ts | 95 ++++++++++++++++--- 9 files changed, 206 insertions(+), 48 deletions(-) diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts index 5bd4f745d9..e842c0efd3 100644 --- a/src/app/app.reducer.ts +++ b/src/app/app.reducer.ts @@ -50,6 +50,7 @@ import { sidebarReducer, SidebarState } from './shared/sidebar/sidebar.reducer'; import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer'; import { ThemeState, themeReducer } from './shared/theme-support/theme.reducer'; import { correlationIdReducer } from './correlation-id/correlation-id.reducer'; +import { contextHelpReducer, ContextHelpState } from './shared/context-help.reducer'; export interface AppState { router: fromRouter.RouterReducerState; @@ -71,6 +72,7 @@ export interface AppState { epeopleRegistry: EPeopleRegistryState; groupRegistry: GroupRegistryState; correlationId: string; + contextHelp: ContextHelpState; } export const appReducers: ActionReducerMap = { @@ -92,7 +94,8 @@ export const appReducers: ActionReducerMap = { communityList: CommunityListReducer, epeopleRegistry: ePeopleRegistryReducer, groupRegistry: groupRegistryReducer, - correlationId: correlationIdReducer + correlationId: correlationIdReducer, + contextHelp: contextHelpReducer, }; export const routerStateSelector = (state: AppState) => state.router; diff --git a/src/app/page-internal-server-error/page-internal-server-error.component.html b/src/app/page-internal-server-error/page-internal-server-error.component.html index 595fd9961b..bb43cdc678 100644 --- a/src/app/page-internal-server-error/page-internal-server-error.component.html +++ b/src/app/page-internal-server-error/page-internal-server-error.component.html @@ -1,6 +1,6 @@

500

-

{{"500.page-internal-server-error" | translate}}

+

{{"500.page-internal-server-error" | translate}}


{{"500.help" | translate}}


diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html index 939ad8323c..03fc46c172 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html @@ -10,12 +10,16 @@
- + #tooltip="ngbTooltip" + (click)="onClick()"> diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts index 0ef535bf95..e4e22d7ebc 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.ts @@ -1,11 +1,16 @@ -import { Component, Input, OnInit, TemplateRef } from '@angular/core'; +import { Component, Input, OnInit, TemplateRef, OnDestroy, AfterViewInit, ViewChild } from '@angular/core'; import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; import { TranslateService } from '@ngx-translate/core'; -import { Observable, of as observableOf } from 'rxjs'; +import { Observable, of as observableOf, Subscription } from 'rxjs'; import { map } from 'rxjs/operators'; import { PlacementDir } from './placement-dir.model'; +import content from '*.scss'; +import { ContextHelpService } from '../context-help.service'; +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; +import { hasValueOperator } from '../empty.util'; +import { ContextHelp } from '../context-help.model'; -/* +/** * This component renders an info icon next to the wrapped element which * produces a tooltip when clicked. */ @@ -14,28 +19,39 @@ import { PlacementDir } from './placement-dir.model'; templateUrl: './context-help-wrapper.component.html', styleUrls: ['./context-help-wrapper.component.scss'], }) -export class ContextHelpWrapperComponent { - /* +export class ContextHelpWrapperComponent implements OnInit, AfterViewInit, OnDestroy { + /** * Template reference for the wrapped element. */ @Input() templateRef: TemplateRef; - /* + /** + * Identifier for the context help tooltip. + */ + @Input() id: string; + + /** * Indicate where the tooltip should show up, relative to the info icon. */ @Input() tooltipPlacement?: PlacementArray; - /* + /** * Indicate whether the info icon should appear to the left or to * the right of the wrapped element. */ @Input() iconPlacement?: PlacementDir; - /* + /** * If true, don't process text to render links. */ @Input() dontParseLinks?: boolean; + @ViewChild('tooltip', { static: false }) tooltip: NgbTooltip; + + shouldShowIcon$: Observable; + + private subs: Subscription[] = []; + // TODO: dependent on evaluation order of input setters? parsedContent$: Observable<(string | {href: string, text: string})[]> = observableOf([]); @Input() set content(content : string) { @@ -46,9 +62,48 @@ export class ContextHelpWrapperComponent { ); } - constructor(private translateService: TranslateService) { } + constructor( + private translateService: TranslateService, + private contextHelpService: ContextHelpService + ) { } - /* + ngOnInit() { + this.shouldShowIcon$ = this.contextHelpService.shouldShowIcons$(); + } + + ngAfterViewInit() { + this.subs = [ + this.contextHelpService.getContextHelp$(this.id) + .pipe(hasValueOperator()) + .subscribe((ch: ContextHelp) => { + if (ch.isTooltipVisible && !this.tooltip.isOpen()) { + this.tooltip.open(); + } else if (!ch.isTooltipVisible && this.tooltip.isOpen()) { + this.tooltip.close() + } + }), + + this.tooltip.shown.subscribe(() => { + this.contextHelpService.showTooltip(this.id); + }), + + this.tooltip.hidden.subscribe(() => { + this.contextHelpService.hideTooltip(this.id); + }) + ]; + } + + ngOnDestroy() { + for (let sub of this.subs) { + sub.unsubscribe(); + } + } + + onClick() { + this.contextHelpService.toggleTooltip(this.id); + } + + /** * Parses Markdown-style links, splitting up a given text * into link-free pieces of text and objects of the form * {href: string, text: string} (which represent links). diff --git a/src/app/shared/context-help.actions.ts b/src/app/shared/context-help.actions.ts index 2bd8b6a163..5f985c2f73 100644 --- a/src/app/shared/context-help.actions.ts +++ b/src/app/shared/context-help.actions.ts @@ -1,6 +1,6 @@ import { Action } from '@ngrx/store'; import { type } from './ngrx/type'; -import { ContextHelpModel } from './context-help.model'; +import { ContextHelp } from './context-help.model'; export const ContextHelpActionTypes = { 'CONTEXT_HELP_TOGGLE_ICONS': type('dspace/context-help/CONTEXT_HELP_TOGGLE_ICONS'), @@ -23,9 +23,9 @@ export class ContextHelpToggleIconsAction implements Action { */ export class ContextHelpAddAction implements Action { type = ContextHelpActionTypes.CONTEXT_HELP_ADD; - model: ContextHelpModel; + model: ContextHelp; - constructor (model: ContextHelpModel) { + constructor (model: ContextHelp) { this.model = model; } } diff --git a/src/app/shared/context-help.directive.ts b/src/app/shared/context-help.directive.ts index 1d8bcccfa7..89e283715a 100644 --- a/src/app/shared/context-help.directive.ts +++ b/src/app/shared/context-help.directive.ts @@ -1,15 +1,28 @@ -import { ComponentFactoryResolver, ComponentRef, Directive, ElementRef, Input, OnChanges, OnInit, TemplateRef, ViewContainerRef } from '@angular/core'; +import { + ComponentFactoryResolver, + ComponentRef, + Directive, + ElementRef, + Input, + OnChanges, + OnInit, + TemplateRef, + ViewContainerRef, + OnDestroy +} from '@angular/core'; import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning'; import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component'; import { PlacementDir } from './context-help-wrapper/placement-dir.model'; +import { ContextHelpService } from './context-help.service'; export interface ContextHelpDirectiveInput { content: string; + id: string; tooltipPlacement?: PlacementArray; iconPlacement?: PlacementDir; } -/* +/** * Directive to add a clickable tooltip icon to an element. * The tooltip icon's position is configurable ('left' or 'right') * and so is the position of the tooltip itself (PlacementArray). @@ -17,14 +30,15 @@ export interface ContextHelpDirectiveInput { @Directive({ selector: '[dsContextHelp]', }) -export class ContextHelpDirective implements OnChanges { - /* +export class ContextHelpDirective implements OnChanges, OnDestroy { + /** * Expects an object with the following fields: * - content: a string referring to an entry in the i18n files * - tooltipPlacement: a PlacementArray describing where the tooltip should expand, relative to the tooltip icon * - iconPlacement: a string 'left' or 'right', describing where the tooltip icon should be placed, relative to the element */ - @Input() dsContextHelp: string | ContextHelpDirectiveInput; + @Input() dsContextHelp: ContextHelpDirectiveInput; + mostRecentId: string | undefined = undefined; protected wrapper: ComponentRef; @@ -32,19 +46,31 @@ export class ContextHelpDirective implements OnChanges { private templateRef: TemplateRef, private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver, + private contextHelpService: ContextHelpService ){} ngOnChanges() { - const input: ContextHelpDirectiveInput = typeof(this.dsContextHelp) === 'string' - ? {content: this.dsContextHelp} - : this.dsContextHelp; + this.clearMostRecentId(); + this.mostRecentId = this.dsContextHelp.id; + this.contextHelpService.add({id: this.dsContextHelp.id}); // TODO: tooltipVisible field const factory = this.componentFactoryResolver.resolveComponentFactory(ContextHelpWrapperComponent); this.wrapper = this.viewContainerRef.createComponent(factory); this.wrapper.instance.templateRef = this.templateRef; - this.wrapper.instance.content = input.content; - this.wrapper.instance.tooltipPlacement = input.tooltipPlacement; - this.wrapper.instance.iconPlacement = input.iconPlacement; + this.wrapper.instance.content = this.dsContextHelp.content; + this.wrapper.instance.id = this.dsContextHelp.id; + this.wrapper.instance.tooltipPlacement = this.dsContextHelp.tooltipPlacement; + this.wrapper.instance.iconPlacement = this.dsContextHelp.iconPlacement; + } + + ngOnDestroy() { + this.clearMostRecentId(); + } + + private clearMostRecentId(): void { + if (this.mostRecentId !== undefined) { + this.contextHelpService.remove(this.mostRecentId); + } } } diff --git a/src/app/shared/context-help.model.ts b/src/app/shared/context-help.model.ts index 4b2b344f60..9c024dbf1f 100644 --- a/src/app/shared/context-help.model.ts +++ b/src/app/shared/context-help.model.ts @@ -1,4 +1,4 @@ -export class ContextHelpModel { +export class ContextHelp { id: string; - tooltipVisible?: boolean = false; + isTooltipVisible?: boolean = false; } diff --git a/src/app/shared/context-help.reducer.ts b/src/app/shared/context-help.reducer.ts index b5f683956f..b705c797ac 100644 --- a/src/app/shared/context-help.reducer.ts +++ b/src/app/shared/context-help.reducer.ts @@ -1,8 +1,8 @@ -import { ContextHelpModel } from './context-help.model'; +import { ContextHelp } from './context-help.model'; import { ContextHelpAction, ContextHelpActionTypes } from './context-help.actions'; export type ContextHelpModels = { - [id: string]: ContextHelpModel; + [id: string]: ContextHelp; }; export interface ContextHelpState { @@ -10,7 +10,10 @@ export interface ContextHelpState { models: ContextHelpModels; } -export function contextHelpReducer(state: ContextHelpState, action: ContextHelpAction): ContextHelpState { +// TODO +const initialState: ContextHelpState = {allIconsVisible: true, models: {}}; + +export function contextHelpReducer(state: ContextHelpState = initialState, action: ContextHelpAction): ContextHelpState { switch (action.type) { case ContextHelpActionTypes.CONTEXT_HELP_TOGGLE_ICONS: { return {...state, allIconsVisible: true}; @@ -41,7 +44,7 @@ export function contextHelpReducer(state: ContextHelpState, action: ContextHelpA function modifyTooltipVisibility(state: ContextHelpState, id: string, modify: (vis: boolean) => boolean) : ContextHelpState { const {[id]: matchingModel, ...otherModels} = state.models; - const modifiedModel = {...matchingModel, tooltipVisible: modify(matchingModel.tooltipVisible)}; + const modifiedModel = {...matchingModel, isTooltipVisible: modify(matchingModel.isTooltipVisible)}; const newModels = {...otherModels, [id]: modifiedModel}; return {...state, models: newModels}; } diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts index 071308c713..7bbd1216e1 100644 --- a/src/app/shared/context-help.service.ts +++ b/src/app/shared/context-help.service.ts @@ -1,33 +1,100 @@ import { Injectable } from '@angular/core'; -import { ContextHelpModel } from './context-help.model'; +import { ContextHelp } from './context-help.model'; +import { Store, createFeatureSelector, createSelector, select, MemoizedSelector } from '@ngrx/store'; +import { ContextHelpState } from './context-help.reducer'; +import { + ContextHelpToggleIconsAction, + ContextHelpAddAction, + ContextHelpRemoveAction, + ContextHelpShowTooltipAction, + ContextHelpHideTooltipAction, + ContextHelpToggleTooltipAction +} from './context-help.actions'; +import { Observable } from 'rxjs'; + +const contextHelpStateSelector = + createFeatureSelector('contextHelp'); +const allIconsVisibleSelector = createSelector( + contextHelpStateSelector, + (state: ContextHelpState): boolean => state.allIconsVisible +); +const contextHelpSelector = + (id: string): MemoizedSelector => createSelector( + contextHelpStateSelector, + (state: ContextHelpState) => state.models[id] + ); @Injectable({ providedIn: 'root' }) export class ContextHelpService { - constructor() { } + constructor(private store: Store) { } + /** + * Observable keeping track of whether context help icons should be visible globally. + */ + shouldShowIcons$(): Observable { + return this.store.pipe(select(allIconsVisibleSelector)); + } + + /** + * Observable that tracks the state for a specific context help icon. + * + * @param id: id of the context help icon. + */ + getContextHelp$(id: string): Observable { + return this.store.pipe(select(contextHelpSelector(id))); + } + + /** + * Toggles the visibility of all context help icons. + */ toggleIcons() { - + this.store.dispatch(new ContextHelpToggleIconsAction()); } - add(contextHelp: ContextHelpModel) { - + /** + * Registers a new context help icon to the store. + * + * @param contextHelp: the initial state of the new help icon. + */ + add(contextHelp: ContextHelp) { + this.store.dispatch(new ContextHelpAddAction(contextHelp)); } + /** + * Removes a context help icon from the store. + * + * @id: the id of the help icon to be removed. + */ remove(id: string) { - - } - - showTooltip(id: string) { - - } - - hideTooltip(id: string) { - + this.store.dispatch(new ContextHelpRemoveAction(id)); } + /** + * Toggles the tooltip of a single context help icon. + * + * @id: the id of the help icon for which the visibility will be toggled. + */ toggleTooltip(id: string) { + this.store.dispatch(new ContextHelpToggleTooltipAction(id)); + } + /** + * Shows the tooltip of a single context help icon. + * + * @id: the id of the help icon that will be made visible. + */ + showTooltip(id: string) { + this.store.dispatch(new ContextHelpShowTooltipAction(id)); + } + + /** + * Hides the tooltip of a single context help icon. + * + * @id: the id of the help icon that will be made invisible. + */ + hideTooltip(id: string) { + this.store.dispatch(new ContextHelpHideTooltipAction(id)); } } From e16a3edf785ec23dd77ab3e4dde579239e3bbdfd Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Wed, 4 Jan 2023 17:02:39 +0100 Subject: [PATCH 41/73] 97732 ContextHelpToggleComponent added --- src/app/app.module.ts | 2 ++ .../context-help-toggle.component.html | 8 ++++++ .../context-help-toggle.component.scss | 8 ++++++ .../context-help-toggle.component.spec.ts | 25 +++++++++++++++++++ .../context-help-toggle.component.ts | 22 ++++++++++++++++ src/app/header/header.component.html | 1 + .../page-internal-server-error.component.html | 1 + .../context-help-wrapper.component.ts | 5 ++-- src/app/shared/context-help.reducer.ts | 2 +- 9 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.html create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.scss create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.spec.ts create mode 100644 src/app/header/context-help-toggle/context-help-toggle.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 67bccd9105..189d203256 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -58,6 +58,7 @@ import { ThemedPageInternalServerErrorComponent } from './page-internal-server-e import { PageInternalServerErrorComponent } from './page-internal-server-error/page-internal-server-error.component'; import { APP_CONFIG, AppConfig } from '../config/app-config.interface'; +import { ContextHelpToggleComponent } from './header/context-help-toggle/context-help-toggle.component'; export function getConfig() { return environment; @@ -167,6 +168,7 @@ const DECLARATIONS = [ RootComponent, ThemedRootComponent, HeaderComponent, + ContextHelpToggleComponent, ThemedHeaderComponent, HeaderNavbarWrapperComponent, ThemedHeaderNavbarWrapperComponent, diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.html b/src/app/header/context-help-toggle/context-help-toggle.component.html new file mode 100644 index 0000000000..caf1bf5daf --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.html @@ -0,0 +1,8 @@ + diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.scss b/src/app/header/context-help-toggle/context-help-toggle.component.scss new file mode 100644 index 0000000000..ba34ba8b89 --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.scss @@ -0,0 +1,8 @@ +.ds-context-help-toggle { + color: var(--ds-header-icon-color); + background-color: var(--ds-header-bg); +} + +.ds-context-help-toggle:hover { + color: var(--ds-header-icon-color-hover); +} diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts new file mode 100644 index 0000000000..16d82f1a0a --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContextHelpToggleComponent } from './context-help-toggle.component'; + +describe('ContextHelpToggleComponent', () => { + let component: ContextHelpToggleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ContextHelpToggleComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ContextHelpToggleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.ts b/src/app/header/context-help-toggle/context-help-toggle.component.ts new file mode 100644 index 0000000000..cc5e779d6e --- /dev/null +++ b/src/app/header/context-help-toggle/context-help-toggle.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { ContextHelpService } from '../../shared/context-help.service'; + +@Component({ + selector: 'ds-context-help-toggle', + templateUrl: './context-help-toggle.component.html', + styleUrls: ['./context-help-toggle.component.scss'] +}) +export class ContextHelpToggleComponent implements OnInit { + + constructor( + private contextHelpService: ContextHelpService + ) { } + + ngOnInit(): void { + } + + onClick() { + console.log('toggling icons'); + this.contextHelpService.toggleIcons(); + } +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index c7b979d266..d04f095156 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -8,6 +8,7 @@ \ No newline at end of file + From 5a1e57408fd546df71d500981c3fb2bd3274be22 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Thu, 5 Jan 2023 13:21:50 +0100 Subject: [PATCH 43/73] 97732 Fixed some display issues --- .../page-internal-server-error.component.html | 7 ++++++- .../context-help-wrapper.component.html | 2 +- .../context-help-wrapper.component.scss | 19 ++++++++++--------- src/styles/_custom_variables.scss | 1 + 4 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/app/page-internal-server-error/page-internal-server-error.component.html b/src/app/page-internal-server-error/page-internal-server-error.component.html index bb43cdc678..a60624dbd5 100644 --- a/src/app/page-internal-server-error/page-internal-server-error.component.html +++ b/src/app/page-internal-server-error/page-internal-server-error.component.html @@ -1,6 +1,11 @@

500

-

{{"500.page-internal-server-error" | translate}}

+

+ {{"500.page-internal-server-error" | translate}} +


{{"500.help" | translate}}


diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html index 03fc46c172..b031d0f42d 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.html +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.html @@ -18,7 +18,7 @@ [placement]="tooltipPlacement" autoClose="outside" triggers="manual" - container="'body'" + container="body" #tooltip="ngbTooltip" (click)="onClick()"> diff --git a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss index 3bf9c7bba8..d28883cae3 100644 --- a/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss +++ b/src/app/shared/context-help-wrapper/context-help-wrapper.component.scss @@ -3,14 +3,14 @@ } .ds-context-help-icon { - position: absolute; - top: 0; - cursor: pointer; - color: var(--bs-info); - background-color: var(--bs-white); - font-size: 16px; // not relative, because we don't want the icon to resize based on the container - line-height: 1; - border-radius: 50%; + position: absolute; + top: 0; + cursor: pointer; + color: var(--bs-info); + background-color: var(--bs-white); + font-size: 16px; // not relative, because we don't want the icon to resize based on the container + line-height: 1; + border-radius: 50%; } .ds-context-help-icon-left { @@ -22,5 +22,6 @@ } ::ng-deep .tooltip-inner { - width: 300px; + width: var(--ds-context-help-tooltip-width); + max-width: var(--ds-context-help-tooltip-width); } diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 2013562dec..4098bb6417 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -88,4 +88,5 @@ --ds-context-x-offset: -16px; --ds-context-help-icon-size: 16px; + --ds-context-help-tooltip-width: 300px; } From 84c053575f0a9c2eb019a9cab0332f861d94cec5 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Thu, 5 Jan 2023 14:50:25 +0100 Subject: [PATCH 44/73] 97732 Some example tooltips for the edit group page --- .../group-form/group-form.component.html | 11 ++++++++++- .../members-list/members-list.component.html | 12 ++++++++++-- .../subgroup-list/subgroups-list.component.html | 11 +++++++++-- src/app/footer/footer.component.html | 7 +------ .../top-level-community-list.component.html | 5 +---- .../page-internal-server-error.component.html | 5 +---- src/assets/i18n/en.json5 | 6 ++++-- 7 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/app/access-control/group-registry/group-form/group-form.component.html b/src/app/access-control/group-registry/group-form/group-form.component.html index 0fc5a574b7..c0bcc854e7 100644 --- a/src/app/access-control/group-registry/group-form/group-form.component.html +++ b/src/app/access-control/group-registry/group-form/group-form.component.html @@ -9,7 +9,16 @@ -

{{messagePrefix + '.head.edit' | translate}}

+

+ {{messagePrefix + '.head.edit' | translate}} +

{{messagePrefix + '.head' | translate}}

- +
{{ mdRepresentationName$ | async }} @@ -35,8 +35,8 @@
-
From e717e610f963d10b464a0166d6cbc8d0c331e61c Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Fri, 27 Jan 2023 11:03:18 +0100 Subject: [PATCH 66/73] 97732 Header buttons now behave consistently on hover --- .../context-help-toggle.component.scss | 2 +- src/app/header/header.component.scss | 2 +- src/app/search-navbar/search-navbar.component.scss | 3 --- .../shared/auth-nav-menu/auth-nav-menu.component.scss | 4 ++-- src/app/shared/lang-switch/lang-switch.component.scss | 10 ++++------ .../search-authority-filter.component.scss | 2 +- .../search-facet-option.component.scss | 2 +- .../search-facet-selected-option.component.scss | 2 +- 8 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.scss b/src/app/header/context-help-toggle/context-help-toggle.component.scss index af233dd7b5..a8c6100fae 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.scss +++ b/src/app/header/context-help-toggle/context-help-toggle.component.scss @@ -2,7 +2,7 @@ color: var(--ds-header-icon-color); background-color: var(--ds-header-bg); - &:hover, &focus { + &:hover, &:focus { color: var(--ds-header-icon-color-hover); } } diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 922b2d02e1..546f6a06fa 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -15,7 +15,7 @@ a { color: var(--ds-header-icon-color); - &:hover, &focus { + &:hover, &:focus { color: var(--ds-header-icon-color-hover); } } diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss index c1ccd289b2..125aa82f1f 100644 --- a/src/app/search-navbar/search-navbar.component.scss +++ b/src/app/search-navbar/search-navbar.component.scss @@ -22,8 +22,5 @@ a.submit-icon { width: 40vw !important; } - a.submit-icon { - color: var(--bs-link-color); - } } diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss index ac51af27bf..36161ff3da 100644 --- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss +++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss @@ -13,9 +13,9 @@ } .dropdown-toggle { - color: var(--ds-header-icon-color) !important; + color: var(--ds-header-icon-color); - &:hover, &focus { + &:hover, &:focus { color: var(--ds-header-icon-color-hover); } } diff --git a/src/app/shared/lang-switch/lang-switch.component.scss b/src/app/shared/lang-switch/lang-switch.component.scss index 6d79e6ab25..7b593a9bb5 100644 --- a/src/app/shared/lang-switch/lang-switch.component.scss +++ b/src/app/shared/lang-switch/lang-switch.component.scss @@ -2,12 +2,10 @@ display:none; } -@media screen and (min-width: map-get($grid-breakpoints, md)) { - .dropdown-toggle { - color: var(--ds-header-icon-color); +.dropdown-toggle { + color: var(--ds-header-icon-color); - &:hover, &focus { - color: var(--ds-header-icon-color-hover); - } + &:hover, &:focus { + color: var(--ds-header-icon-color-hover); } } diff --git a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss index 8f61f5ebf1..9e01e19d02 100644 --- a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.scss @@ -1,7 +1,7 @@ .filters { a { color: var(--bs-body-color); - &:hover, &focus { + &:hover, &:focus { text-decoration: none; } span.badge { diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss index 74cede54a8..1211d2d478 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss @@ -1,6 +1,6 @@ a { color: var(--bs-body-color); - &:hover, &focus { + &:hover, &:focus { text-decoration: none; } span.badge { diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss index 74cede54a8..1211d2d478 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss @@ -1,6 +1,6 @@ a { color: var(--bs-body-color); - &:hover, &focus { + &:hover, &:focus { text-decoration: none; } span.badge { From bceca43580e2e10896e281079ecc3abf6ad43e6a Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Fri, 27 Jan 2023 11:59:24 +0100 Subject: [PATCH 67/73] 97732 Context help toggle button only appears when there is at least one element with a tooltip on the page --- .../context-help-toggle.component.html | 10 ++++------ .../context-help-toggle.component.scss | 7 +------ .../context-help-toggle.component.spec.ts | 12 +++++------- .../context-help-toggle.component.ts | 15 +++++---------- src/app/shared/context-help.service.ts | 4 ++-- src/assets/i18n/en.json5 | 2 -- 6 files changed, 17 insertions(+), 33 deletions(-) diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.html b/src/app/header/context-help-toggle/context-help-toggle.component.html index 523874d461..1ec2050497 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.html +++ b/src/app/header/context-help-toggle/context-help-toggle.component.html @@ -1,12 +1,10 @@ -
+ diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.scss b/src/app/header/context-help-toggle/context-help-toggle.component.scss index a8c6100fae..f3e5e01880 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.scss +++ b/src/app/header/context-help-toggle/context-help-toggle.component.scss @@ -1,4 +1,4 @@ -.ds-context-help-toggle-enabled { +.ds-context-help-toggle { color: var(--ds-header-icon-color); background-color: var(--ds-header-bg); @@ -6,8 +6,3 @@ color: var(--ds-header-icon-color-hover); } } - -.ds-context-help-toggle-disabled { - color: grey; - background-color: var(--ds-header-bg); -} diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts index 93421b58eb..2d1b5bad20 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts +++ b/src/app/header/context-help-toggle/context-help-toggle.component.spec.ts @@ -13,9 +13,9 @@ describe('ContextHelpToggleComponent', () => { beforeEach(async () => { contextHelpService = jasmine.createSpyObj('contextHelpService', [ - 'contextHelpEmpty$', 'toggleIcons' + 'tooltipCount$', 'toggleIcons' ]); - contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(true)); + contextHelpService.tooltipCount$.and.returnValue(observableOf(0)); await TestBed.configureTestingModule({ declarations: [ ContextHelpToggleComponent ], providers: [ @@ -37,19 +37,17 @@ describe('ContextHelpToggleComponent', () => { }); describe('if there are no elements on the page with a tooltip', () => { - it('clicking the button does not toggle context help icon visibility', fakeAsync(() => { + it('the toggle should not be visible', fakeAsync(() => { fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.debugElement.query(By.css('a')).nativeElement.click(); - tick(); - expect(contextHelpService.toggleIcons).toHaveBeenCalledTimes(0); + expect(fixture.debugElement.query(By.css('div'))).toBeNull(); }); })); }); describe('if there are elements on the page with a tooltip', () => { beforeEach(() => { - contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(false)); + contextHelpService.tooltipCount$.and.returnValue(observableOf(1)); fixture.detectChanges(); }); diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.ts b/src/app/header/context-help-toggle/context-help-toggle.component.ts index 7adaffa1c0..1bd6eb4b17 100644 --- a/src/app/header/context-help-toggle/context-help-toggle.component.ts +++ b/src/app/header/context-help-toggle/context-help-toggle.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { ContextHelpService } from '../../shared/context-help.service'; import { Observable, Subscription, BehaviorSubject } from 'rxjs'; import { combineLatest } from 'rxjs'; +import { map } from 'rxjs/operators'; /** * Renders a "context help toggle" button that toggles the visibility of tooltip buttons on the page. @@ -13,23 +14,17 @@ import { combineLatest } from 'rxjs'; styleUrls: ['./context-help-toggle.component.scss'] }) export class ContextHelpToggleComponent implements OnInit, OnDestroy { - buttonDisabled$: Observable; + buttonVisible$: Observable; constructor( private contextHelpService: ContextHelpService, ) { } - private clickEvents: BehaviorSubject = new BehaviorSubject(null); private subs: Subscription[]; ngOnInit(): void { - this.buttonDisabled$ = this.contextHelpService.contextHelpEmpty$(); - this.subs = [ - this.buttonDisabled$.subscribe(), - combineLatest([this.clickEvents, this.buttonDisabled$]) - .subscribe(([_, disabled]) => - disabled ? null : this.contextHelpService.toggleIcons()) - ]; + this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0)); + this.subs = [this.buttonVisible$.subscribe()]; } ngOnDestroy() { @@ -37,6 +32,6 @@ export class ContextHelpToggleComponent implements OnInit, OnDestroy { } onClick() { - this.clickEvents.next(null); + this.contextHelpService.toggleIcons(); } } diff --git a/src/app/shared/context-help.service.ts b/src/app/shared/context-help.service.ts index 68f6cfd92c..f10f258be9 100644 --- a/src/app/shared/context-help.service.ts +++ b/src/app/shared/context-help.service.ts @@ -54,9 +54,9 @@ export class ContextHelpService { /** * Observable that yields true iff there are currently no context help entries in the store. */ - contextHelpEmpty$(): Observable { + tooltipCount$(): Observable { return this.store.pipe(select(allContextHelpSelector)) - .pipe(map((models: ContextHelpModels) => Object.keys(models).length === 0)); + .pipe(map((models: ContextHelpModels) => Object.keys(models).length)); } /** diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 5a8c27da0d..03596f2292 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2680,8 +2680,6 @@ "nav.context-help-toggle": "Toggle context help", - "nav.context-help-toggle-disabled": "No context help available on this page", - "nav.language": "Language switch", "nav.login": "Log In", From 1e85e1d88b2380751c9d420e2d835019fc1a3695 Mon Sep 17 00:00:00 2001 From: Koen Pauwels Date: Fri, 27 Jan 2023 12:30:42 +0100 Subject: [PATCH 68/73] 97732 Fix header search icon hover color --- src/app/search-navbar/search-navbar.component.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss index 125aa82f1f..40433fc619 100644 --- a/src/app/search-navbar/search-navbar.component.scss +++ b/src/app/search-navbar/search-navbar.component.scss @@ -14,6 +14,11 @@ a.submit-icon { cursor: pointer; position: sticky; top: 0; + + color: var(--ds-header-icon-color); + &:hover, &:focus { + color: var(--ds-header-icon-color-hover); + } } @media screen and (max-width: map-get($grid-breakpoints, md)) { From 7574f828bad696246efbb5474295b80322e1f978 Mon Sep 17 00:00:00 2001 From: cris Date: Sat, 28 Jan 2023 18:23:33 +0000 Subject: [PATCH 69/73] adding space in es.json5 for pagination.showing.detail --- src/assets/i18n/es.json5 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5 index 02169514c4..671be41835 100644 --- a/src/assets/i18n/es.json5 +++ b/src/assets/i18n/es.json5 @@ -4238,7 +4238,7 @@ "pagination.showing.detail": "{{ range }} de {{ total }}", // "pagination.showing.label": "Now showing ", - "pagination.showing.label": "Mostrando", + "pagination.showing.label": "Mostrando ", // "pagination.sort-direction": "Sort Options", "pagination.sort-direction": "Opciones de clasificación", From 53dfca0056e0c2ea5e5d0a6ab56355ac8bd773c6 Mon Sep 17 00:00:00 2001 From: cris Date: Mon, 30 Jan 2023 19:31:54 +0000 Subject: [PATCH 70/73] fixed issue #1190 with id 470077 --- .../item-operation/item-operation.component.html | 4 ++-- src/assets/i18n/ar.json5 | 8 ++++---- src/assets/i18n/bn.json5 | 6 +++--- src/assets/i18n/cs.json5 | 8 ++++---- src/assets/i18n/de.json5 | 8 ++++---- src/assets/i18n/en.json5 | 4 ++-- src/assets/i18n/es.json5 | 8 ++++---- src/assets/i18n/fi.json5 | 8 ++++---- src/assets/i18n/fr.json5 | 8 ++++---- src/assets/i18n/gd.json5 | 8 ++++---- src/assets/i18n/hu.json5 | 6 +++--- src/assets/i18n/ja.json5 | 8 ++++---- src/assets/i18n/kk.json5 | 8 ++++---- src/assets/i18n/lv.json5 | 6 +++--- src/assets/i18n/nl.json5 | 6 +++--- src/assets/i18n/pt-BR.json5 | 8 ++++---- src/assets/i18n/pt-PT.json5 | 8 ++++---- src/assets/i18n/sv.json5 | 8 ++++---- src/assets/i18n/sw.json5 | 8 ++++---- src/assets/i18n/tr.json5 | 6 +++--- src/assets/i18n/uk.json5 | 8 ++++---- 21 files changed, 75 insertions(+), 75 deletions(-) diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html index ecbc19aea8..85c6a2cca1 100644 --- a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html +++ b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html @@ -5,12 +5,12 @@
- - diff --git a/src/assets/i18n/ar.json5 b/src/assets/i18n/ar.json5 index 58c8c61eb5..24e6e14603 100644 --- a/src/assets/i18n/ar.json5 +++ b/src/assets/i18n/ar.json5 @@ -3246,9 +3246,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.move.button": "Move...", + "item.edit.tabs.status.buttons.move.button": "Mover éste ítem a una colección distinta", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", // TODO New key - Add a translation @@ -3278,9 +3278,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + "item.edit.tabs.status.buttons.withdraw.button": "Retirar éste ítem", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", // TODO New key - Add a translation diff --git a/src/assets/i18n/bn.json5 b/src/assets/i18n/bn.json5 index 8020ee7a96..55ec1820dd 100644 --- a/src/assets/i18n/bn.json5 +++ b/src/assets/i18n/bn.json5 @@ -2908,7 +2908,7 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "ম্যাপড সংগ্রহ পরিচালনা করুন", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", "item.edit.tabs.status.buttons.move.button": "সরানো ...", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", @@ -2935,8 +2935,8 @@ // "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", "item.edit.tabs.status.buttons.unauthorized": "আপনি এই অ্যাকশন সঞ্চালন করার জন্য অনুমোদিত না", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "প্রত্যাহার ...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "এই আইটেম প্রত্যাহার করুন", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "সংগ্রহস্থল থেকে আইটেম প্রত্যাহার", diff --git a/src/assets/i18n/cs.json5 b/src/assets/i18n/cs.json5 index 12b67e54e2..a04e89b2c3 100644 --- a/src/assets/i18n/cs.json5 +++ b/src/assets/i18n/cs.json5 @@ -3186,9 +3186,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.move.button": "Move...", + "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", // TODO New key - Add a translation @@ -3218,9 +3218,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", // TODO New key - Add a translation diff --git a/src/assets/i18n/de.json5 b/src/assets/i18n/de.json5 index 80a6b5605a..c1979be6b6 100644 --- a/src/assets/i18n/de.json5 +++ b/src/assets/i18n/de.json5 @@ -2698,8 +2698,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Gespiegelte Sammlungen bearbeiten", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Verschieben...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Verschieben Sie diesen Artikel in eine andere Sammlung", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Item in eine andere Sammlung verschieben", @@ -2722,8 +2722,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Item im Repositorium wiederherstellen", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Zurückziehen...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "Ziehen Sie diesen Artikel zurück", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Item aus dem Repositorium zurückziehen", diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index c66669a51f..f968ae2399 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2140,7 +2140,7 @@ "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", - "item.edit.tabs.status.buttons.move.button": "Move...", + "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", "item.edit.tabs.status.buttons.move.label": "Move item to another collection", @@ -2158,7 +2158,7 @@ "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", - "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5 index 02169514c4..054f66febc 100644 --- a/src/assets/i18n/es.json5 +++ b/src/assets/i18n/es.json5 @@ -3077,8 +3077,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Administrar colecciones mapeadas", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Mover...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Mover éste ítem a una colección diferente", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Mover ítem a otra colección", @@ -3104,8 +3104,8 @@ // "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", "item.edit.tabs.status.buttons.unauthorized": "No estás autorizado para realizar esta acción.", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Retirar...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "Retirar éste ítem", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Retirar ítem del repositorio", diff --git a/src/assets/i18n/fi.json5 b/src/assets/i18n/fi.json5 index 1ef67e2a48..2a077006cc 100644 --- a/src/assets/i18n/fi.json5 +++ b/src/assets/i18n/fi.json5 @@ -2470,8 +2470,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Hallinnoi liitettyjä kokoelmia", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Siirrä...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Siirrä tämä kohde toiseen kokoelmaan", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Siirrä tietue toiseen kokoelmaan", @@ -2494,8 +2494,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Palauta tietue arkistoon", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Poista käytöstä...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "poista tämä kohde", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Poista tietue käytöstä", diff --git a/src/assets/i18n/fr.json5 b/src/assets/i18n/fr.json5 index fcfd70be70..381e13a743 100644 --- a/src/assets/i18n/fr.json5 +++ b/src/assets/i18n/fr.json5 @@ -2811,8 +2811,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Gérer les collections associées", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Déplacer...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Déplacer cet élément vers une autre collection", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Déplacer l'Item dans une autre collection", @@ -2838,8 +2838,8 @@ // "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", "item.edit.tabs.status.buttons.unauthorized": "Vous n'êtes pas autorisé à effectuer cette action", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Retirer...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "Retirer cet article", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Retirer l'Item du dépôt", diff --git a/src/assets/i18n/gd.json5 b/src/assets/i18n/gd.json5 index e42bb239f2..083de54781 100644 --- a/src/assets/i18n/gd.json5 +++ b/src/assets/i18n/gd.json5 @@ -2892,8 +2892,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Manaids cruinneachaidhean mapaichte", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Gluais...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Helyezze át ezt az elemet egy másik gyűjteménybe", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Gluais nì gu cruinneachadh eile", @@ -2919,8 +2919,8 @@ // "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", "item.edit.tabs.status.buttons.unauthorized": "Chan eil cead agad an gnìomh seo a dhèanamh", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Thoir air falbh...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "Thoir air falbh", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Thoir nì air falbh bhon ionad-tasgaidh", diff --git a/src/assets/i18n/hu.json5 b/src/assets/i18n/hu.json5 index 8231f79652..0e73e9dbae 100644 --- a/src/assets/i18n/hu.json5 +++ b/src/assets/i18n/hu.json5 @@ -2481,7 +2481,7 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Térképezett gyűjtemények szervezése", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", "item.edit.tabs.status.buttons.move.button": "Elmozdítás...", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", @@ -2505,8 +2505,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Tárgy visszaállítása az adattárba", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Visszavonás...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "Vedd vissza ezt az elemet", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Tárgy visszavonása az adattárból", diff --git a/src/assets/i18n/ja.json5 b/src/assets/i18n/ja.json5 index 58c8c61eb5..71b32cf70b 100644 --- a/src/assets/i18n/ja.json5 +++ b/src/assets/i18n/ja.json5 @@ -3246,9 +3246,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.move.button": "Move...", + "item.edit.tabs.status.buttons.move.button": "Verplaats dit item naar een andere collectie", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", // TODO New key - Add a translation @@ -3278,9 +3278,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", // TODO New key - Add a translation diff --git a/src/assets/i18n/kk.json5 b/src/assets/i18n/kk.json5 index 8e46ee73ce..b661ce21d3 100644 --- a/src/assets/i18n/kk.json5 +++ b/src/assets/i18n/kk.json5 @@ -3094,7 +3094,7 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Салыстырмалы коллекцияларды басқару", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", "item.edit.tabs.status.buttons.move.button": "Ысыру...", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", @@ -3121,11 +3121,11 @@ // "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", "item.edit.tabs.status.buttons.unauthorized": "Сіз бұл әрекетті орындауға құқығыңыз жоқ", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Шегінуге...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "бұл тармақты алып тастаңыз", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", - "item.edit.tabs.status.buttons.withdraw.label": "Қоймадан тауарды алып қою", + "item.edit.tabs.status.buttons.withdraw.label": "Бұл элементті алып тастаңыз", // "item.edit.tabs.status.description": "Welcome to the item management page. From here you can withdraw, reinstate, move or delete the item. You may also update or add new metadata / bitstreams on the other tabs.", "item.edit.tabs.status.description": "Тауарларды басқару бетіне қош келдіңіз. Осы жерден элементті алып тастауға, қалпына келтіруге, жылжытуға немесе жоюға болады. Басқа қойындыларда жаңа метадеректерді / бит ағындарын жаңартуға немесе қосуға болады.", diff --git a/src/assets/i18n/lv.json5 b/src/assets/i18n/lv.json5 index 995d8175af..e00ad3517b 100644 --- a/src/assets/i18n/lv.json5 +++ b/src/assets/i18n/lv.json5 @@ -2672,7 +2672,7 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Pārvaldīt piesaistītās kolekcijas", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", "item.edit.tabs.status.buttons.move.button": "Pārvieto...", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", @@ -2696,8 +2696,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Atjaunot materiālu repozitorijā", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Atsaukt...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "Izņemiet šo vienumu", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Izņemiet materiālu no repozitorijas", diff --git a/src/assets/i18n/nl.json5 b/src/assets/i18n/nl.json5 index fb66f769ae..b02e3a5276 100644 --- a/src/assets/i18n/nl.json5 +++ b/src/assets/i18n/nl.json5 @@ -2915,7 +2915,7 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Beheer gemapte collecties", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", "item.edit.tabs.status.buttons.move.button": "Verplaats ..", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", @@ -2939,8 +2939,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Zet het item terug in het repository", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Trek terug ...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "onttrek hierdie item", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Trek het item terug uit het repository", diff --git a/src/assets/i18n/pt-BR.json5 b/src/assets/i18n/pt-BR.json5 index 77b06a6566..f68436d00b 100644 --- a/src/assets/i18n/pt-BR.json5 +++ b/src/assets/i18n/pt-BR.json5 @@ -2994,8 +2994,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Gerenciar coleções mapeadas", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Mover...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Mova este item para uma coleção diferente", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Mover item para outra coleção", @@ -3021,8 +3021,8 @@ // "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", "item.edit.tabs.status.buttons.unauthorized": "Você não está autorizado a realizar esta ação", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Retirar...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "retirar este item", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Retirar item do repositório", diff --git a/src/assets/i18n/pt-PT.json5 b/src/assets/i18n/pt-PT.json5 index c0327c4b54..b277e866c0 100644 --- a/src/assets/i18n/pt-PT.json5 +++ b/src/assets/i18n/pt-PT.json5 @@ -2676,8 +2676,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Gerenciar coleções mapeadas", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Mover...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Mova este item para uma coleção diferente", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Mover item para outra coleção", @@ -2700,8 +2700,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Restabelecer item no repositório", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Retirar...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "retirar este item", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Retirar item do repositório", diff --git a/src/assets/i18n/sv.json5 b/src/assets/i18n/sv.json5 index 86a6b045cc..d04b95e144 100644 --- a/src/assets/i18n/sv.json5 +++ b/src/assets/i18n/sv.json5 @@ -2936,8 +2936,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Hantera mappade samlingar", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Flytta...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Flytta detta föremål till en annan samling", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Flytta post till en annan samling", @@ -2963,8 +2963,8 @@ // "item.edit.tabs.status.buttons.unauthorized": "You're not authorized to perform this action", "item.edit.tabs.status.buttons.unauthorized": "Du saknar behörighet att utföra detta", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Återkalla...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "dra tillbaka den här artikeln", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Återkalla post från arkivet", diff --git a/src/assets/i18n/sw.json5 b/src/assets/i18n/sw.json5 index 58c8c61eb5..5e00b54599 100644 --- a/src/assets/i18n/sw.json5 +++ b/src/assets/i18n/sw.json5 @@ -3246,9 +3246,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.move.button": "Move...", + "item.edit.tabs.status.buttons.move.button": "Bu Öğeyi farklı bir Koleksiyona taşıyın", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", // TODO New key - Add a translation @@ -3278,9 +3278,9 @@ // TODO New key - Add a translation "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", // TODO New key - Add a translation - "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", + "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", // TODO New key - Add a translation diff --git a/src/assets/i18n/tr.json5 b/src/assets/i18n/tr.json5 index 8eb0ce7e19..fff02c5967 100644 --- a/src/assets/i18n/tr.json5 +++ b/src/assets/i18n/tr.json5 @@ -2472,7 +2472,7 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Eşlenen koleksiyonları yönetin", - // "item.edit.tabs.status.buttons.move.button": "Move...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", "item.edit.tabs.status.buttons.move.button": "Taşınıyor...", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", @@ -2496,8 +2496,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Öğeyi depoya geri yükle", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Çıkar...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "bu öğeyi geri çek", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Depodan öğeyi çıkar", diff --git a/src/assets/i18n/uk.json5 b/src/assets/i18n/uk.json5 index b0413d9353..0ba5b0109a 100644 --- a/src/assets/i18n/uk.json5 +++ b/src/assets/i18n/uk.json5 @@ -2590,8 +2590,8 @@ // "item.edit.tabs.status.buttons.mappedCollections.label": "Manage mapped collections", "item.edit.tabs.status.buttons.mappedCollections.label": "Керувати прив'язаними зібраннями", - // "item.edit.tabs.status.buttons.move.button": "Move...", - "item.edit.tabs.status.buttons.move.button": "Перемістити...", + // "item.edit.tabs.status.buttons.move.button": "Move this Item to a different Collection", + "item.edit.tabs.status.buttons.move.button": "Перемістити цей елемент до іншої колекції", // "item.edit.tabs.status.buttons.move.label": "Move item to another collection", "item.edit.tabs.status.buttons.move.label": "Перемістити документ до іншого зібрання", @@ -2614,8 +2614,8 @@ // "item.edit.tabs.status.buttons.reinstate.label": "Reinstate item into the repository", "item.edit.tabs.status.buttons.reinstate.label": "Відновити документ в репозиторій", - // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw...", - "item.edit.tabs.status.buttons.withdraw.button": "Вилучити...", + // "item.edit.tabs.status.buttons.withdraw.button": "Withdraw this item", + "item.edit.tabs.status.buttons.withdraw.button": "вилучити цей предмет", // "item.edit.tabs.status.buttons.withdraw.label": "Withdraw item from the repository", "item.edit.tabs.status.buttons.withdraw.label": "Вилучити документ з репозиторію", From 47f05bf11db435229b513daf3af0f57b376925b7 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Tue, 31 Jan 2023 13:33:29 +0100 Subject: [PATCH 71/73] 97742: Feedback 2023-01-27 - Table roles and aria attributes + additional feedback changes --- ...-edit-metadata-field-values.component.html | 5 +- ...edit-metadata-value-headers.component.html | 5 ++ ...edit-metadata-value-headers.component.scss | 0 ...o-edit-metadata-value-headers.component.ts | 17 ++++ .../dso-edit-metadata-value.component.html | 60 ++++++++------ .../dso-edit-metadata-value.component.scss | 2 +- .../dso-edit-metadata.component.html | 82 +++++++++++-------- src/app/dso-shared/dso-shared.module.ts | 2 + src/assets/i18n/en.json5 | 2 - src/styles/_global-styles.scss | 12 +++ 10 files changed, 123 insertions(+), 64 deletions(-) create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.html create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.scss create mode 100644 src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html index cfa457580f..9f74216d54 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html @@ -1,5 +1,6 @@ -
- + +
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts new file mode 100644 index 0000000000..dfda2a50d1 --- /dev/null +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component.ts @@ -0,0 +1,17 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'ds-dso-edit-metadata-value-headers', + styleUrls: ['./dso-edit-metadata-value-headers.component.scss', '../dso-edit-metadata-shared/dso-edit-metadata-cells.scss'], + templateUrl: './dso-edit-metadata-value-headers.component.html', +}) +/** + * Component displaying invisible headers for a list of metadata values using table roles for accessibility + */ +export class DsoEditMetadataValueHeadersComponent { + /** + * Type of DSO we're displaying values for + * Determines i18n messages + */ + @Input() dsoType: string; +} diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html index aa3c242511..f54dde4971 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html @@ -1,7 +1,7 @@ -
-
+
{{ mdValue.newValue.value }}
@@ -10,33 +10,45 @@
-
+
{{ mdValue.newValue.language }}
-
-
-
- - - - +
+
+
+
+ + + + +
-
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss index bcf491b9ce..4a207ee1a4 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss @@ -7,7 +7,7 @@ cursor: grab; } -::ng-deep .tooltip-inner { +::ng-deep .edit-field>ngb-tooltip-window .tooltip-inner { min-width: var(--ds-dso-edit-virtual-tooltip-min-width); } diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html index 51f347e163..24c3dc5cd7 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html @@ -1,61 +1,70 @@
- -
-
- - -
-
- - -
-
-
-
- {{ mdField }} -
- {{ dsoType + '.edit.metadata.reset-order-button' | translate }} +
+ +
+
+ + +
+
+
+ + + +
- - +
+
+ {{ mdField }} +
+ {{ dsoType + '.edit.metadata.reset-order-button' | translate }} +
+
+ + +
@@ -64,12 +73,15 @@
diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts index 0a9294105b..019a7f6b9e 100644 --- a/src/app/dso-shared/dso-shared.module.ts +++ b/src/app/dso-shared/dso-shared.module.ts @@ -5,6 +5,7 @@ import { MetadataFieldSelectorComponent } from './dso-edit-metadata/metadata-fie import { DsoEditMetadataFieldValuesComponent } from './dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component'; import { DsoEditMetadataValueComponent } from './dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component'; import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component'; +import { DsoEditMetadataValueHeadersComponent } from './dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component'; @NgModule({ imports: [ @@ -16,6 +17,7 @@ import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata/dso-edit-me DsoEditMetadataFieldValuesComponent, DsoEditMetadataValueComponent, DsoEditMetadataHeadersComponent, + DsoEditMetadataValueHeadersComponent, ], exports: [ DsoEditMetadataComponent, diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index fd2b049d54..cb141691fb 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2288,8 +2288,6 @@ "itemtemplate.edit.metadata.edit.buttons.unedit": "Stop editing", - "itemtemplate.edit.metadata.edit.buttons.virtual": "This is a virtual metadata value, i.e. a value inherited from a related entity. It can’t be modified directly. Add or remove the corresponding relationship in the \"Relationships\" tab", - "itemtemplate.edit.metadata.empty": "The item template currently doesn't contain any metadata. Click Add to start adding a metadata value.", "itemtemplate.edit.metadata.headers.edit": "Edit", diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index e337539c15..d9c01e85ae 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -92,3 +92,15 @@ ngb-modal-backdrop { hyphens: auto; } + +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} From 4eb00d67c5823d037739e172e629d7d264fc4578 Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Tue, 31 Jan 2023 18:36:20 +0100 Subject: [PATCH 72/73] only check the first page of bitstreams when generating the citation_pdf_url meta tag --- .../core/metadata/metadata.service.spec.ts | 92 +++++++++++--- src/app/core/metadata/metadata.service.ts | 112 +++++++++--------- 2 files changed, 127 insertions(+), 77 deletions(-) diff --git a/src/app/core/metadata/metadata.service.spec.ts b/src/app/core/metadata/metadata.service.spec.ts index 66d9b9921c..553b437d71 100644 --- a/src/app/core/metadata/metadata.service.spec.ts +++ b/src/app/core/metadata/metadata.service.spec.ts @@ -8,7 +8,12 @@ import { Observable, of as observableOf, of } from 'rxjs'; import { RemoteData } from '../data/remote-data'; import { Item } from '../shared/item.model'; -import { ItemMock, MockBitstream1, MockBitstream3 } from '../../shared/mocks/item.mock'; +import { + ItemMock, + MockBitstream1, + MockBitstream3, + MockBitstream2 +} from '../../shared/mocks/item.mock'; import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils'; import { PaginatedList } from '../data/paginated-list.model'; import { Bitstream } from '../shared/bitstream.model'; @@ -24,6 +29,7 @@ import { HardRedirectService } from '../services/hard-redirect.service'; import { getMockStore } from '@ngrx/store/testing'; import { AddMetaTagAction, ClearMetaTagAction } from './meta-tag.actions'; import { AuthorizationDataService } from '../data/feature-authorization/authorization-data.service'; +import { AppConfig } from '../../../config/app-config.interface'; describe('MetadataService', () => { let metadataService: MetadataService; @@ -44,6 +50,8 @@ describe('MetadataService', () => { let router: Router; let store; + let appConfig: AppConfig; + const initialState = { 'core': { metaTag: { tagsInUse: ['title', 'description'] }}}; @@ -86,6 +94,14 @@ describe('MetadataService', () => { store = getMockStore({ initialState }); spyOn(store, 'dispatch'); + appConfig = { + item: { + bitstream: { + pageSize: 5 + } + } + } as any; + metadataService = new MetadataService( router, translateService, @@ -98,6 +114,7 @@ describe('MetadataService', () => { rootService, store, hardRedirectService, + appConfig, authorizationService ); }); @@ -358,29 +375,66 @@ describe('MetadataService', () => { }); })); - it('should link to first Bitstream with allowed format', fakeAsync(() => { - const bitstreams = [MockBitstream3, MockBitstream3, MockBitstream1]; - (bundleDataService.findByItemAndName as jasmine.Spy).and.returnValue(mockBundleRD$(bitstreams)); - (bitstreamDataService.findListByHref as jasmine.Spy).and.returnValues( - ...mockBitstreamPages$(bitstreams).map(bp => createSuccessfulRemoteDataObject$(bp)), - ); + describe(`when there's a bitstream with an allowed format on the first page`, () => { + let bitstreams; - (metadataService as any).processRouteChange({ - data: { - value: { - dso: createSuccessfulRemoteDataObject(ItemMock), + beforeEach(() => { + bitstreams = [MockBitstream2, MockBitstream3, MockBitstream1]; + (bundleDataService.findByItemAndName as jasmine.Spy).and.returnValue(mockBundleRD$(bitstreams)); + (bitstreamDataService.findListByHref as jasmine.Spy).and.returnValues( + ...mockBitstreamPages$(bitstreams).map(bp => createSuccessfulRemoteDataObject$(bp)), + ); + }); + + it('should link to first Bitstream with allowed format', fakeAsync(() => { + (metadataService as any).processRouteChange({ + data: { + value: { + dso: createSuccessfulRemoteDataObject(ItemMock), + } } - } - }); - tick(); - expect(meta.addTag).toHaveBeenCalledWith({ - name: 'citation_pdf_url', - content: 'https://request.org/bitstreams/cf9b0c8e-a1eb-4b65-afd0-567366448713/download' - }); - })); + }); + tick(); + expect(meta.addTag).toHaveBeenCalledWith({ + name: 'citation_pdf_url', + content: 'https://request.org/bitstreams/99b00f3c-1cc6-4689-8158-91965bee6b28/download' + }); + })); + + }); + }); }); + describe(`when there's no bitstream with an allowed format on the first page`, () => { + let bitstreams; + + beforeEach(() => { + bitstreams = [MockBitstream1, MockBitstream3, MockBitstream2]; + (bundleDataService.findByItemAndName as jasmine.Spy).and.returnValue(mockBundleRD$(bitstreams)); + (bitstreamDataService.findListByHref as jasmine.Spy).and.returnValues( + ...mockBitstreamPages$(bitstreams).map(bp => createSuccessfulRemoteDataObject$(bp)), + ); + }); + + it(`shouldn't add a citation_pdf_url meta tag`, fakeAsync(() => { + (metadataService as any).processRouteChange({ + data: { + value: { + dso: createSuccessfulRemoteDataObject(ItemMock), + } + } + }); + tick(); + expect(meta.addTag).not.toHaveBeenCalledWith({ + name: 'citation_pdf_url', + content: 'https://request.org/bitstreams/99b00f3c-1cc6-4689-8158-91965bee6b28/download' + }); + })); + + }); + + describe('tagstore', () => { beforeEach(fakeAsync(() => { (metadataService as any).processRouteChange({ diff --git a/src/app/core/metadata/metadata.service.ts b/src/app/core/metadata/metadata.service.ts index 9d5ee80bba..204c925e6b 100644 --- a/src/app/core/metadata/metadata.service.ts +++ b/src/app/core/metadata/metadata.service.ts @@ -1,14 +1,21 @@ -import { Injectable } from '@angular/core'; +import { Injectable, Inject } from '@angular/core'; import { Meta, MetaDefinition, Title } from '@angular/platform-browser'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; -import { BehaviorSubject, combineLatest, EMPTY, Observable, of as observableOf } from 'rxjs'; -import { expand, filter, map, switchMap, take } from 'rxjs/operators'; +import { + BehaviorSubject, + combineLatest, + Observable, + of as observableOf, + concat as observableConcat, + EMPTY +} from 'rxjs'; +import { filter, map, switchMap, take, mergeMap } from 'rxjs/operators'; -import { hasNoValue, hasValue } from '../../shared/empty.util'; +import { hasNoValue, hasValue, isNotEmpty } from '../../shared/empty.util'; import { DSONameService } from '../breadcrumbs/dso-name.service'; import { BitstreamDataService } from '../data/bitstream-data.service'; import { BitstreamFormatDataService } from '../data/bitstream-format-data.service'; @@ -37,6 +44,7 @@ import { coreSelector } from '../core.selectors'; import { CoreState } from '../core-state.model'; import { AuthorizationDataService } from '../data/feature-authorization/authorization-data.service'; import { getDownloadableBitstream } from '../shared/bitstream.operators'; +import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface'; /** * The base selector function to select the metaTag section in the store @@ -87,6 +95,7 @@ export class MetadataService { private rootService: RootDataService, private store: Store, private hardRedirectService: HardRedirectService, + @Inject(APP_CONFIG) private appConfig: AppConfig, private authorizationService: AuthorizationDataService ) { } @@ -298,7 +307,13 @@ export class MetadataService { true, true, followLink('primaryBitstream'), - followLink('bitstreams', {}, followLink('format')), + followLink('bitstreams', { + findListOptions: { + // limit the number of bitstreams used to find the citation pdf url to the number + // shown by default on an item page + elementsPerPage: this.appConfig.item.bitstream.pageSize + } + }, followLink('format')), ).pipe( getFirstSucceededRemoteDataPayload(), switchMap((bundle: Bundle) => @@ -363,64 +378,45 @@ export class MetadataService { } /** - * For Items with more than one Bitstream (and no primary Bitstream), link to the first Bitstream with a MIME type + * For Items with more than one Bitstream (and no primary Bitstream), link to the first Bitstream + * with a MIME type. + * + * Note this will only check the current page (page size determined item.bitstream.pageSize in the + * config) of bitstreams for performance reasons. + * See https://github.com/DSpace/DSpace/issues/8648 for more info + * * included in {@linkcode CITATION_PDF_URL_MIMETYPES} * @param bitstreamRd * @private */ private getFirstAllowedFormatBitstreamLink(bitstreamRd: RemoteData>): Observable { - return observableOf(bitstreamRd.payload).pipe( - // Because there can be more than one page of bitstreams, this expand operator - // will retrieve them in turn. Due to the take(1) at the bottom, it will only - // retrieve pages until a match is found - expand((paginatedList: PaginatedList) => { - if (hasNoValue(paginatedList.next)) { - // If there's no next page, stop. - return EMPTY; - } else { - // Otherwise retrieve the next page - return this.bitstreamDataService.findListByHref( - paginatedList.next, - undefined, - true, - true, - followLink('format') - ).pipe( - getFirstCompletedRemoteData(), - map((next: RemoteData>) => { - if (hasValue(next.payload)) { - return next.payload; - } else { - return EMPTY; - } - }) - ); - } - }), - // Return the array of bitstreams inside each paginated list - map((paginatedList: PaginatedList) => paginatedList.page), - // Emit the bitstreams in the list one at a time - switchMap((bitstreams: Bitstream[]) => bitstreams), - // Retrieve the format for each bitstream - switchMap((bitstream: Bitstream) => bitstream.format.pipe( - getFirstSucceededRemoteDataPayload(), - // Keep the original bitstream, because it, not the format, is what we'll need - // for the link at the end - map((format: BitstreamFormat) => [bitstream, format]) - )), - // Check if bitstream downloadable - switchMap(([bitstream, format]: [Bitstream, BitstreamFormat]) => observableOf(bitstream).pipe( - getDownloadableBitstream(this.authorizationService), - map((bit: Bitstream) => [bit, format]) - )), - // Filter out only pairs with whitelisted formats and non-null bitstreams, null from download check - filter(([bitstream, format]: [Bitstream, BitstreamFormat]) => - hasValue(format) && hasValue(bitstream) && this.CITATION_PDF_URL_MIMETYPES.includes(format.mimetype)), - // We only need 1 - take(1), - // Emit the link of the match - map(([bitstream, ]: [Bitstream, BitstreamFormat]) => getBitstreamDownloadRoute(bitstream)) - ); + if (hasValue(bitstreamRd.payload) && isNotEmpty(bitstreamRd.payload.page)) { + // Retrieve the formats of all bitstreams in the page sequentially + return observableConcat( + ...bitstreamRd.payload.page.map((bitstream: Bitstream) => bitstream.format.pipe( + getFirstSucceededRemoteDataPayload(), + // Keep the original bitstream, because it, not the format, is what we'll need + // for the link at the end + map((format: BitstreamFormat) => [bitstream, format]) + )) + ).pipe( + // Verify that the bitstream is downloadable + mergeMap(([bitstream, format]: [Bitstream, BitstreamFormat]) => observableOf(bitstream).pipe( + getDownloadableBitstream(this.authorizationService), + map((bit: Bitstream) => [bit, format]) + )), + // Filter out only pairs with whitelisted formats and non-null bitstreams, null from download check + filter(([bitstream, format]: [Bitstream, BitstreamFormat]) => + hasValue(format) && hasValue(bitstream) && this.CITATION_PDF_URL_MIMETYPES.includes(format.mimetype)), + // We only need 1 + take(1), + // Emit the link of the match + // tap((v) => console.log('result', v)), + map(([bitstream, ]: [Bitstream, BitstreamFormat]) => getBitstreamDownloadRoute(bitstream)) + ); + } else { + return EMPTY; + } } /** From e880062cfd0c8593904a2b2a41a6fcfb0349e247 Mon Sep 17 00:00:00 2001 From: Kristof De Langhe Date: Thu, 2 Feb 2023 11:44:55 +0100 Subject: [PATCH 73/73] 97742: Add missing export --- src/app/dso-shared/dso-shared.module.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/dso-shared/dso-shared.module.ts b/src/app/dso-shared/dso-shared.module.ts index 1614da1cfe..7d44d6a920 100644 --- a/src/app/dso-shared/dso-shared.module.ts +++ b/src/app/dso-shared/dso-shared.module.ts @@ -28,6 +28,7 @@ import { ThemedDsoEditMetadataComponent } from './dso-edit-metadata/themed-dso-e DsoEditMetadataFieldValuesComponent, DsoEditMetadataValueComponent, DsoEditMetadataHeadersComponent, + DsoEditMetadataValueHeadersComponent, ], }) export class DsoSharedModule {