Skip to content

Commit b005f30

Browse files
EikLoeEikLoe
committed
Created extended-file-section component.
1 parent b1c4aa4 commit b005f30

3 files changed

Lines changed: 178 additions & 0 deletions

File tree

‎src/app/item-page/simple/field-components/extended-file-section/extended-file-section.component.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<ng-container *ngVar="(bitstreamsRD$ | async) as bitstreamsRD">
2+
<div class="file-section my-3 justify-content-center">
3+
<div class="w-100 file-section-header mb-3">
4+
<h3 [innerText]="label | translate"></h3>
5+
</div>
6+
<div class="file-section-table">
7+
<div class="row heading mx-0">
8+
<div class="col-6">
9+
<h4 [innerText]="'file.section.name' | translate"></h4>
10+
</div>
11+
<div class="col-2">
12+
<h4 [innerText]="'file.section.type' | translate"></h4>
13+
</div>
14+
<div class="col-2">
15+
<h4 [innerText]="'file.section.size' | translate"></h4>
16+
</div>
17+
<div class="col-1">
18+
</div>
19+
</div>
20+
<div class="mx-1">
21+
@if (bitstreamsRD?.payload?.totalElements > 0) {
22+
<ds-pagination
23+
[paginationOptions]="pageConfig"
24+
[collectionSize]="bitstreamsRD?.payload?.totalElements"
25+
[hideGear]="true"
26+
[hidePagerWhenSinglePage]="true"
27+
[retainScrollPosition]="true">
28+
<div class="entries">
29+
@for (file of bitstreamsRD?.payload?.page; track file) {
30+
<div class="row file-section-entry mx-0">
31+
<div class="col-6">
32+
<span [innerHTML]="dsoNameService.getName(file)"></span>
33+
</div>
34+
<div class="col-3">
35+
<span>{{ (bitstreamFormatDataService.findByBitstream(file) | async).payload?.shortDescription }}</span>
36+
</div>
37+
<div class="col-2">
38+
<span> {{ (file?.sizeBytes) | dsFileSize }}</span>
39+
</div>
40+
<div class="col-1 text-center">
41+
<ds-file-download-link [bitstream]="file" [item]="item">
42+
<i class="fa fa-download"></i>
43+
</ds-file-download-link>
44+
</div>
45+
</div>
46+
}
47+
</div>
48+
</ds-pagination>
49+
}
50+
</div>
51+
</div>
52+
</div>
53+
</ng-container>

‎src/app/item-page/simple/field-components/extended-file-section/extended-file-section.component.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.file-section {
2+
padding: 1rem;
3+
background-color: var(--bs-gray-200);
4+
5+
.file-section-header {
6+
border-bottom: 4px solid var(--bs-primary);
7+
}
8+
9+
.file-section-table {
10+
.row {
11+
padding: 0.4em 0.75em;
12+
}
13+
.entries {
14+
.file-section-entry {
15+
background-color: var(--bs-300);
16+
&:nth-child(2n + 1) {
17+
background-color: var(--bs-gray-100);
18+
}
19+
}
20+
}
21+
.heading {
22+
border-bottom: 1px solid var(--bs-gray-900);
23+
background-color: var(--bs-gray-400);
24+
font-size: 1.25em;
25+
}
26+
}
27+
}

‎src/app/item-page/simple/field-components/extended-file-section/extended-file-section.component.ts‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { AsyncPipe } from '@angular/common';
2+
import {
3+
Component,
4+
Inject,
5+
Input,
6+
OnInit,
7+
} from '@angular/core';
8+
import {
9+
APP_CONFIG,
10+
AppConfig,
11+
} from '@dspace/config/app-config.interface';
12+
import { DSONameService } from '@dspace/core/breadcrumbs/dso-name.service';
13+
import { BitstreamDataService } from '@dspace/core/data/bitstream-data.service';
14+
import { BitstreamFormatDataService } from '@dspace/core/data/bitstream-format-data.service';
15+
import { PaginatedList } from '@dspace/core/data/paginated-list.model';
16+
import { RemoteData } from '@dspace/core/data/remote-data';
17+
import { PaginationService } from '@dspace/core/pagination/pagination.service';
18+
import { PaginationComponentOptions } from '@dspace/core/pagination/pagination-component-options.model';
19+
import { Bitstream } from '@dspace/core/shared/bitstream.model';
20+
import { followLink } from '@dspace/core/shared/follow-link-config.model';
21+
import { Item } from '@dspace/core/shared/item.model';
22+
import { TranslatePipe } from '@ngx-translate/core';
23+
import {
24+
from,
25+
Observable,
26+
} from 'rxjs';
27+
import { switchMap } from 'rxjs/operators';
28+
29+
import { ThemedFileDownloadLinkComponent } from '../../../../shared/file-download-link/themed-file-download-link.component';
30+
import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
31+
import { FileSizePipe } from '../../../../shared/utils/file-size-pipe';
32+
import { VarDirective } from '../../../../shared/utils/var.directive';
33+
34+
@Component({
35+
selector: 'ds-extended-file-section',
36+
imports: [
37+
AsyncPipe,
38+
FileSizePipe,
39+
PaginationComponent,
40+
ThemedFileDownloadLinkComponent,
41+
TranslatePipe,
42+
VarDirective,
43+
],
44+
templateUrl: './extended-file-section.component.html',
45+
styleUrl: './extended-file-section.component.scss',
46+
})
47+
export class ExtendedFileSectionComponent implements OnInit {
48+
49+
@Input() item: Item;
50+
51+
@Input() bundleName = 'ORIGINAL';
52+
53+
@Input() label = 'item.page.extended-file-section';
54+
55+
pageSize = 10;
56+
57+
bitstreamsRD$: Observable<RemoteData<PaginatedList<Bitstream>>>;
58+
59+
60+
/**
61+
* The current pagination configuration for the page
62+
*/
63+
pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
64+
id: 'afs',
65+
pageSize: this.pageSize,
66+
pageSizeOptions: [10, 20, 40, 60, 80, 100],
67+
});
68+
69+
70+
constructor(
71+
protected bitstreamDataService: BitstreamDataService,
72+
protected bitstreamFormatDataService: BitstreamFormatDataService,
73+
public dsoNameService: DSONameService,
74+
@Inject(APP_CONFIG) protected appConfig: AppConfig,
75+
private paginationService: PaginationService,
76+
) {
77+
this.pageSize = appConfig.item.bitstream.pageSize;
78+
this.bitstreamsRD$ = from([]);
79+
}
80+
81+
ngOnInit(): void {
82+
this.bitstreamsRD$ = this.paginationService.getCurrentPagination(this.pageConfig.id, this.pageConfig).pipe(
83+
switchMap((options: PaginationComponentOptions) => {
84+
return this.bitstreamDataService.findAllByItemAndBundleName(
85+
this.item,
86+
this.bundleName,
87+
{ elementsPerPage: options.pageSize, currentPage: options.currentPage },
88+
true,
89+
true,
90+
followLink('format'),
91+
followLink('accessStatus'),
92+
);
93+
}),
94+
);
95+
}
96+
97+
98+
}

0 commit comments

Comments
 (0)