diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts index 227dc727e4f..fbc64816ac5 100644 --- a/src/app/item-page/item-page.module.ts +++ b/src/app/item-page/item-page.module.ts @@ -62,7 +62,10 @@ import { } from './full/field-components/file-section/themed-full-file-section.component'; import { ItemPageKalturaFieldComponent -} from "./simple/field-components/specific-field/kaltura/item-page-kaltura-field.component"; +} from './simple/field-components/specific-field/kaltura/item-page-kaltura-field.component'; +import { + ItemPageAccessibilityFieldComponent +} from './simple/field-components/specific-field/accessibility/item-page-accessibility-field.component'; const ENTRY_COMPONENTS = [ // put only entry components that use custom decorator @@ -106,7 +109,8 @@ const DECLARATIONS = [ ItemAlertsComponent, ThemedItemAlertsComponent, BitstreamRequestACopyPageComponent, - ItemPageKalturaFieldComponent + ItemPageKalturaFieldComponent, + ItemPageAccessibilityFieldComponent, ]; @NgModule({ diff --git a/src/app/item-page/item-shared.module.ts b/src/app/item-page/item-shared.module.ts index 9c2bbba6194..db8745cbaab 100644 --- a/src/app/item-page/item-shared.module.ts +++ b/src/app/item-page/item-shared.module.ts @@ -17,10 +17,12 @@ import { ThemedMetadataRepresentationListComponent } from './simple/metadata-representation-list/themed-metadata-representation-list.component'; +import {CamelCaseToLowerCaseWordsPipe} from '../pipes/camel-case-to-lower-case-words.pipe'; + const ENTRY_COMPONENTS = [ ItemVersionsDeleteModalComponent, ItemVersionsSummaryModalComponent, - + CamelCaseToLowerCaseWordsPipe, ]; const COMPONENTS = [ @@ -32,6 +34,7 @@ const COMPONENTS = [ MetadataRepresentationListComponent, ThemedMetadataRepresentationListComponent, RelatedItemsComponent, + CamelCaseToLowerCaseWordsPipe, ]; @NgModule({ @@ -42,7 +45,7 @@ const COMPONENTS = [ CommonModule, SearchModule, SharedModule, - TranslateModule + TranslateModule, ], exports: [ ...COMPONENTS diff --git a/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.html b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.html new file mode 100644 index 00000000000..3466b478818 --- /dev/null +++ b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.html @@ -0,0 +1,8 @@ +
+ + + {{value | camelCaseToLowerCaseWords }} + + + +
diff --git a/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.spec.ts new file mode 100644 index 00000000000..457a254328e --- /dev/null +++ b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.spec.ts @@ -0,0 +1,31 @@ +import {TranslateLoader, TranslateModule} from '@ngx-translate/core'; +import {ChangeDetectionStrategy, NO_ERRORS_SCHEMA} from '@angular/core'; +import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing'; +import {TranslateLoaderMock} from '../../../../../shared/testing/translate-loader.mock'; +import {MetadataValuesComponent} from '../../../../field-components/metadata-values/metadata-values.component'; +import {ItemPageAccessibilityFieldComponent} from './item-page-accessibility-field.component'; + +let fixture: ComponentFixture; + +const mockValue = 'test value'; + +describe('ItemPageAccessibilityFieldComponent', () => { + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateLoaderMock + } + })], + declarations: [ItemPageAccessibilityFieldComponent, MetadataValuesComponent], + schemas: [NO_ERRORS_SCHEMA] + }).overrideComponent(ItemPageAccessibilityFieldComponent, { + set: {changeDetection: ChangeDetectionStrategy.Default} + }).compileComponents(); + })); + + it('should display display the correct metadata value', () => { + expect(fixture.nativeElement.innerHTML).toContain(mockValue); + }); +}); diff --git a/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.ts b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.ts new file mode 100644 index 00000000000..0cd28e6d4ac --- /dev/null +++ b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.ts @@ -0,0 +1,37 @@ +import { Component, Input } from '@angular/core'; + +import { Item } from '../../../../../core/shared/item.model'; +import { ItemPageFieldComponent } from '../item-page-field.component'; + +@Component({ + selector: 'ds-item-page-accessibility-field', + templateUrl: './item-page-accessibility-field.component.html' +}) +/** + * This component can be used to represent accessibility metadata on a simple item page. + * It expects 4 parameters: The item, a separator, the metadata keys and an i18n key + */ +export class ItemPageAccessibilityFieldComponent extends ItemPageFieldComponent { + + /** + * The item to display metadata for + */ + @Input() item: Item; + + /** + * Separator string between multiple values of the metadata fields defined + * @type {string} + */ + @Input() separator: string; + + /** + * Fields (schema.element.qualifier) used to render their values. + */ + @Input() fields: string[]; + + /** + * Label i18n key for the rendered metadata + */ + @Input() label: string; + +} diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html index 542cbd7db43..f6b2f823322 100644 --- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html +++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html @@ -275,15 +275,16 @@
Permanent Link(s)
[fields]="['dc.type']" [label]="'Types'"> - - - - + + - + [label]="'Accessibility Hazard'" + [separator]="', '"> + diff --git a/src/app/pipes/camel-case-to-lower-case-words.pipe.ts b/src/app/pipes/camel-case-to-lower-case-words.pipe.ts new file mode 100644 index 00000000000..69eb8a27cb9 --- /dev/null +++ b/src/app/pipes/camel-case-to-lower-case-words.pipe.ts @@ -0,0 +1,20 @@ +import {Pipe, PipeTransform} from '@angular/core'; + +@Pipe({ + standalone: false, + // eslint-disable-next-line @angular-eslint/pipe-prefix + name: 'camelCaseToLowerCaseWords' +}) +export class CamelCaseToLowerCaseWordsPipe implements PipeTransform { + + // Define the list of values to ignore + private readonly ignoreValues = ['ChemML', 'MathML']; + transform(value: string): string { + if (!value) {return value;} + if (this.ignoreValues.includes(value)) {return value;} + let words = value.split(/(?