From 48c3fd24edb27a4c818e52a57001d64a5febebc2 Mon Sep 17 00:00:00 2001 From: Peter Wolfersberger Date: Wed, 6 Jul 2022 19:21:18 +0200 Subject: [PATCH] Themed object-list.component. --- .../object-collection.component.html | 5 +- .../themed-object-list.component.ts | 209 ++++++++++++++++++ src/app/shared/shared.module.ts | 2 + .../object-list/object-list.component.html | 0 .../object-list/object-list.component.scss | 0 .../object-list/object-list.component.ts | 16 ++ src/themes/custom/lazy-theme.module.ts | 2 + 7 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 src/app/shared/object-list/themed-object-list.component.ts create mode 100644 src/themes/custom/app/shared/object-list/object-list.component.html create mode 100644 src/themes/custom/app/shared/object-list/object-list.component.scss create mode 100644 src/themes/custom/app/shared/object-list/object-list.component.ts diff --git a/src/app/shared/object-collection/object-collection.component.html b/src/app/shared/object-collection/object-collection.component.html index eb72d07fe5..06d7cedb9e 100644 --- a/src/app/shared/object-collection/object-collection.component.html +++ b/src/app/shared/object-collection/object-collection.component.html @@ -1,4 +1,5 @@ - - + { + /** + * The view mode of the this component + */ + viewMode = ViewMode.ListElement; + + /** + * The current pagination configuration + */ + @Input() config: PaginationComponentOptions; + + /** + * The current sort configuration + */ + @Input() sortConfig: SortOptions; + + /** + * Whether or not the list elements have a border + */ + @Input() hasBorder = false; + + /** + * The whether or not the gear is hidden + */ + @Input() hideGear = false; + + /** + * Whether or not the pager is visible when there is only a single page of results + */ + @Input() hidePagerWhenSinglePage = true; + @Input() selectable = false; + @Input() selectionConfig: { repeatable: boolean, listId: string }; + + /** + * The link type of the listable elements + */ + @Input() linkType: CollectionElementLinkType; + + /** + * The context of the listable elements + */ + @Input() context: Context; + + /** + * Option for hiding the pagination detail + */ + @Input() hidePaginationDetail = false; + + /** + * Whether or not to add an import button to the object + */ + @Input() importable = false; + + /** + * Config used for the import button + */ + @Input() importConfig: { importLabel: string }; + + /** + * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination + */ + @Input() showPaginator = true; + + /** + * Emit when one of the listed object has changed. + */ + @Output() contentChange = new EventEmitter(); + + /** + * If showPaginator is set to true, emit when the previous button is clicked + */ + @Output() prev = new EventEmitter(); + + /** + * If showPaginator is set to true, emit when the next button is clicked + */ + @Output() next = new EventEmitter(); + + /** + * The current listable objects + */ + private _objects: RemoteData>; + + /** + * Setter for the objects + * @param objects The new objects + */ + @Input() set objects(objects: RemoteData>) { + this._objects = objects; + } + + /** + * Getter to return the current objects + */ + get objects() { + return this._objects; + } + + /** + * An event fired when the page is changed. + * Event's payload equals to the newly selected page. + */ + @Output() change: EventEmitter<{ + pagination: PaginationComponentOptions, + sort: SortOptions + }> = new EventEmitter<{ + pagination: PaginationComponentOptions, + sort: SortOptions + }>(); + + /** + * An event fired when the page is changed. + * Event's payload equals to the newly selected page. + */ + @Output() pageChange: EventEmitter = new EventEmitter(); + + /** + * An event fired when the page wsize is changed. + * Event's payload equals to the newly selected page size. + */ + @Output() pageSizeChange: EventEmitter = new EventEmitter(); + + /** + * An event fired when the sort direction is changed. + * Event's payload equals to the newly selected sort direction. + */ + @Output() sortDirectionChange: EventEmitter = new EventEmitter(); + + /** + * An event fired when on of the pagination parameters changes + */ + @Output() paginationChange: EventEmitter = new EventEmitter(); + + @Output() deselectObject: EventEmitter = new EventEmitter(); + + @Output() selectObject: EventEmitter = new EventEmitter(); + + /** + * Send an import event to the parent component + */ + @Output() importObject: EventEmitter = new EventEmitter(); + + /** + * An event fired when the sort field is changed. + * Event's payload equals to the newly selected sort field. + */ + @Output() sortFieldChange: EventEmitter = new EventEmitter(); + + inAndOutputNames: (keyof ObjectListComponent & keyof this)[] = [ + 'config', + 'sortConfig', + 'hasBorder', + 'hideGear', + 'hidePagerWhenSinglePage', + 'selectable', + 'selectionConfig', + 'linkType', + 'context', + 'hidePaginationDetail', + 'importable', + 'importConfig', + 'showPaginator', + 'contentChange', + 'prev', + 'next', + 'objects', + 'change', + 'pageChange', + 'pageSizeChange', + 'sortDirectionChange', + 'paginationChange', + 'deselectObject', + 'selectObject', + 'importObject', + 'sortFieldChange', + ]; + + protected getComponentName(): string { + return 'ObjectListComponent'; + } + + protected importThemedComponent(themeName: string): Promise { + return import(`../../../themes//${themeName}/app/shared/object-list/object-list.component`); + } + + protected importUnthemedComponent(): Promise { + return import('./object-list.component'); + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index e4231d8f21..a5333d1a7d 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -39,6 +39,7 @@ import { SearchResultListElementComponent } from './object-list/search-result-list-element/search-result-list-element.component'; import { ObjectListComponent } from './object-list/object-list.component'; +import { ThemedObjectListComponent } from './object-list/themed-object-list.component'; import { CollectionGridElementComponent } from './object-grid/collection-grid-element/collection-grid-element.component'; @@ -376,6 +377,7 @@ const COMPONENTS = [ LogOutComponent, NumberPickerComponent, ObjectListComponent, + ThemedObjectListComponent, ObjectDetailComponent, ObjectGridComponent, AbstractListableElementComponent, diff --git a/src/themes/custom/app/shared/object-list/object-list.component.html b/src/themes/custom/app/shared/object-list/object-list.component.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/shared/object-list/object-list.component.scss b/src/themes/custom/app/shared/object-list/object-list.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/themes/custom/app/shared/object-list/object-list.component.ts b/src/themes/custom/app/shared/object-list/object-list.component.ts new file mode 100644 index 0000000000..49f464610f --- /dev/null +++ b/src/themes/custom/app/shared/object-list/object-list.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { ObjectListComponent as BaseComponent} from '../../../../../app/shared/object-list/object-list.component'; + +/** + * A component to display the "Browse By" section of a Community or Collection page + * It expects the ID of the Community or Collection as input to be passed on as a scope + */ +@Component({ + selector: 'ds-object-list', + // styleUrls: ['./object-list.component.scss'], + styleUrls: ['../../../../../app/shared/object-list/object-list.component.scss'], + // templateUrl: 'object-list.component.html' + templateUrl: '../../../../../app/shared/object-list/object-list.component.html' +}) + +export class ObjectListComponent extends BaseComponent {} diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts index 5a3b898bb0..acb3b1fa4a 100644 --- a/src/themes/custom/lazy-theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -109,6 +109,7 @@ import { import { CommunityPageSubCollectionListComponent } from './app/community-page/sub-collection-list/community-page-sub-collection-list.component'; +import { ObjectListComponent } from './app/shared/object-list/object-list.component'; const DECLARATIONS = [ FileSectionComponent, @@ -159,6 +160,7 @@ const DECLARATIONS = [ AdminSidebarComponent, SearchSettingsComponent ComcolPageBrowseByComponent, + ObjectListComponent, ]; @NgModule({