Skip to content

470 export section people #498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 28, 2025
Merged

470 export section people #498

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2770439
WIP - to add export to section view
rmathew1011 Oct 17, 2025
ebc2fc2
WIP - added the export button to the front end
rmathew1011 Oct 17, 2025
2199ce2
WIP - export feature is cuurently downloading a people csv - but cont…
rmathew1011 Oct 21, 2025
238d870
Merge remote-tracking branch 'origin/sprint12-staging' into test-expo…
rmathew1011 Oct 22, 2025
8cf3e3f
Code clean up
rmathew1011 Oct 23, 2025
765294f
Removed unused input
rmathew1011 Oct 23, 2025
5acef2f
Incorporated PR suggestions:
rmathew1011 Oct 27, 2025
1edd38a
Update src/app/+display/section/section.component.ts
rmathew1011 Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/app/+display/section/section.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
<div class="card-header font-weight-bold text-primary text-capitalize">
<span>{{ section.name }}</span>
<div class="float-right" *ngIf="section.shared">
<div *ngIf="queryParams | async; let queryParams">
<div class="container mt-2" >
<div class="headers-row row flex-column-reverse flex-md-row">
<div class="col-md-8">
<span id="sidebar-title">{{ section.name }}</span>
</div>
<div class="col-md-4 text-right">
<span *ngIf="hasExport(section)" class="column-export">
<a [href]="getSectionExportUrl(queryParams, section)" download class="btn">
<span class="fa fa-share" [attr.aria-hidden]="true"></span>
<span>{{ 'DIRECTORY.EXPORT' | translate }}</span>
</a>
</span>
</div>
</div>
</div>
</div>
<div class="float-right" *ngIf="section.shared">
<div class="embed-dropdown d-inline-block" placement="bottom-right" ngbDropdown>
<i class="fa fa-lg fa-share-alt" ngbDropdownToggle ></i>
<div class="dropdown-menu" ngbDropdownMenu>
Expand Down
23 changes: 23 additions & 0 deletions src/app/+display/section/section.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,27 @@
:host {
width: 100%;
.headers-row {
.column-export {
.btn {
color: var(--sidebar-button-color);
background-color: var(--sidebar-button-background-color);
border: 1px solid var(--sidebar-button-border-color);
font-size: 0.9em;
padding: 5px 10px 4px;
.fa {
padding-right: 0.3em;
}
}
.btn:active,
.btn:hover {
color: var(--sidebar-button-hover-color);
background-color: var(--sidebar-button-hover-background-color);
}
.btn:focus {
box-shadow: 0 0 0 0.2rem var(--sidebar-button-focus-shadow-color);
}
}
}
.embed-dropdown {
.dropdown-menu {
min-width: 450px;
Expand Down
24 changes: 23 additions & 1 deletion src/app/+display/section/section.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ import { AfterViewInit, Component, Inject, Input, OnDestroy, OnInit, PLATFORM_ID
import { ActivatedRoute, NavigationStart, Params, Router } from '@angular/router';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { filter, map } from 'rxjs/operators';

import { APP_CONFIG, AppConfig } from '../../app.config';
import { Individual } from '../../core/model/discovery';
import { SdrPage } from '../../core/model/sdr';
import { DisplayTabSectionView, Sort } from '../../core/model/view';
import { getResourcesPage, getSubsectionResources, loadBadges } from '../../shared/utilities/view.utility';
import { AppState } from '../../core/store';
import { selectRouterQueryParams } from '../../core/store/router';
import { addExportToQueryParams, getResourcesPage, getSubsectionResources,hasExport, loadBadges } from '../../shared/utilities/view.utility';

@Component({
selector: 'scholars-section',
Expand All @@ -34,9 +37,12 @@ export class SectionComponent implements AfterViewInit, OnInit, OnDestroy {

private subscriptions: Subscription[];

public queryParams: Observable<Params>;

constructor(
@Inject(APP_CONFIG) private appConfig: AppConfig,
@Inject(PLATFORM_ID) private platformId: string,
private store: Store<AppState>,
private router: Router,
private route: ActivatedRoute
) {
Expand All @@ -51,11 +57,13 @@ export class SectionComponent implements AfterViewInit, OnInit, OnDestroy {
}

ngOnInit() {
this.queryParams = this.store.pipe(select(selectRouterQueryParams));
if (this.section.paginated) {
this.subscriptions.push(
this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => loadBadges(this.platformId))
);
const resources = getSubsectionResources(this.individual[this.section.field], this.section.filters);

this.page = this.route.queryParams.pipe(
map((params: Params) => {
const pageSize = params[`${this.section.name}.size`] ? Number(params[`${this.section.name}.size`]) : this.section.pageSize;
Expand Down Expand Up @@ -92,4 +100,18 @@ export class SectionComponent implements AfterViewInit, OnInit, OnDestroy {
setTimeout(() => tooltip.close(), 2000);
}

public hasExport(section: DisplayTabSectionView): boolean {
return hasExport(section);
}

public getSectionExportUrl(params: Params, section: DisplayTabSectionView): string {
const queryParams: Params = { ...params };
queryParams.facets = null;
queryParams.collection = null;
addExportToQueryParams(queryParams, section);
const tree = this.router.createUrlTree([''], { queryParams });
const query = tree.toString().substring(1);
return `${this.appConfig.serviceUrl}/individual/${this.individual?.id}/export${query}&view=${section.name}`;
Copy link

@kaladay kaladay Oct 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code:

return `${this.appConfig.serviceUrl}/individual/${this.individual?.id}/export${query}&view=${section.name}`;

I'm not sure about this line.

When ${this.individual?.id} is undefined, then the URL generated will have double slashes.

If there is no individual, will this URL be valid?

${this.appConfig.serviceUrl}/individual/export${query}&view=${section.name}

If so, then I suggest conditionally adding both the id AND the forward slash based on the same condition.

If not, then what URL should be used?

Copy link

@tamu-sad-iii tamu-sad-iii Oct 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component would not render without an individual. This does not require optional chaining.

https://github.com/TAMULib/scholars-angular/blob/470-export-section-people/src/app/%2Bdisplay/tab/tab.component.html#L1

Copy link
Author

@rmathew1011 rmathew1011 Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Edited the url building as per the above suggestions.

}

}
5 changes: 3 additions & 2 deletions src/app/core/model/view/display-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { View } from './';
import { CollectionView, View } from './';
import { ExportView } from './export-view';
import { FieldView } from './field-view';

Expand All @@ -13,7 +13,7 @@ export interface DisplaySubsectionView extends FieldView {
templateFunction?: (individual: any) => string;
}

export interface DisplayTabSectionView extends FieldView {
export interface DisplayTabSectionView extends FieldView, CollectionView {
Copy link

@tamu-sad-iii tamu-sad-iii Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please only add the required fields to the DisplayTabSectionView.

readonly export: Export[];

is the only required field.

Copy link

@tamu-sad-iii tamu-sad-iii Oct 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The methods argument types in the view utility should be improved to isolate the required data.

https://github.com/TAMULib/scholars-angular/blob/tamu-main/src/app/shared/utilities/view.utility.ts#L88

const addExportToQueryParams = (queryParams: Params, export: Export[])

Copy link
Author

@rmathew1011 rmathew1011 Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please allow me to create a note to address this issue.

readonly hidden: boolean;
readonly shared: boolean;
readonly paginated: boolean;
Expand All @@ -23,6 +23,7 @@ export interface DisplayTabSectionView extends FieldView {
readonly requiredFields: string[];
readonly lazyReferences: string[];
readonly subsections: DisplaySubsectionView[];
readonly exportViews: ExportView[];
}

export interface DisplayTabView extends View {
Expand Down