Skip to content

Archipelago bird census named place selection [Closes #433] #885

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
Blodir merged 16 commits into from
Jan 14, 2026
Merged

Archipelago bird census named place selection [Closes #433] #885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a991ec2
Added columns to archipelago named place table.
rpulkka Dec 8, 2025
1628790
Fix filter iteration for nested objects.
rpulkka Dec 10, 2025
b4dbf52
Added filter and tab -params to named place page.
rpulkka Dec 11, 2025
aa3a4e8
Apply filter to the np map view + fix scroll to active -logic on data…
rpulkka Dec 18, 2025
2a3f5ca
Use visible values on np-list to filter by enum visible names.
rpulkka Dec 18, 2025
cfde905
Fix index to id function.
rpulkka Dec 18, 2025
e9afdf0
Clear active np when it isn't included in filtered places.
rpulkka Dec 18, 2025
70e8f23
Transform selected place's index between all places list and filtered…
rpulkka Dec 22, 2025
ac0dc2a
Set active place after map has initialized.
rpulkka Dec 22, 2025
fc1b6bb
Do not clear active place if no filters are set.
rpulkka Dec 22, 2025
a9078b1
Merge branch 'development' into archipelago-census-np-selection-433
rpulkka Jan 5, 2026
5f518a1
Move filter input to np-choose to show it on both tabs (list and map).
rpulkka Jan 5, 2026
4eec65e
Use filtered index consistently on np-map.
rpulkka Jan 7, 2026
be73170
Clear active named place when it doesn't match the filter.
rpulkka Jan 7, 2026
74e2651
Increased np-choose map height.
rpulkka Jan 7, 2026
2e73969
Use tap instead of map for transforming visible values.
rpulkka Jan 13, 2026
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
12 changes: 12 additions & 0 deletions ...c/app/+project-form/form/named-place/named-place-wrapper/named-place-wrapper.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@ import { take } from 'rxjs/operators';
<ng-container *ngIf="data$ | async as data; else spinner">
<laji-named-places [documentForm]="data.documentForm"
[activeId]="data.activeNP!"
[filterBy]="data.filterBy!"
[tab]="data.tab!"
[municipality]="data.municipality!"
[birdAssociationArea]="data.birdAssociationArea!"
[tags]="data.tags!"
(municipalityChange)="onMunicipalityChange($event)"
(birdAssociationAreaChange)="onBirdAssociationAreaChange($event)"
(tagsChange)="onTagsChange($event)"
(activeIdChange)="onActiveIdChange($event!)"
(filterChange)="onFilterChange($event!)"
(tabChange)="onTabChange($event!)"
(use)="use($event!)"
(edit)="edit($event!)"
(create)="create()"
Expand Down Expand Up @@ -63,6 +67,14 @@ export class NamedPlaceWrapperComponent implements OnInit {
this.updateQuery({activeNP: id});
}

onFilterChange(filterBy: string) {
this.updateQuery({filterBy});
}

onTabChange(tab: string) {
this.updateQuery({tab});
}

use(id: string) {
this.router.navigate([`./${id}`], {relativeTo: this.route});
}
Expand Down
8 changes: 6 additions & 2 deletions projects/laji/src/app/+project-form/form/named-place/named-place/named-place.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,13 @@
[documentForm]="data.documentForm"
[placeForm]="data.placeForm"
[userID]="data.user?.id"
[activeNP]="data.activeNP?.id"
[formRights]="data.formRights"
(activePlaceChange)="onActivePlaceChange($event)"></laji-np-choose>
[activeNP]="data.activeNP?.id"
[filterBy]="data.filterBy"
[tab]="data.tab"
(activePlaceChange)="onActivePlaceChange($event)"
(filterChange)="onFilterChange($event)"
(tabChange)="onTabChange($event)"></laji-np-choose>
<ng-container *lajiLoggedIn="true">
<lu-button *ngIf="data.allowEdit"
lajiFormOption="options.namedPlaceOptions.createNewButtonLabel"
Expand Down
40 changes: 39 additions & 1 deletion projects/laji/src/app/+project-form/form/named-place/named-place/named-place.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ interface DerivedFromInput {
municipality?: string;
tags?: string[];
activeNP?: NamedPlace;
filterBy?: string;
tab?: string;
description?: string;
allowEdit: boolean;
mapOptionsData: any;
Expand All @@ -50,6 +52,14 @@ export class NamedPlaceComponent implements OnInit, OnDestroy {
this.activeNP$.next(activeID);
}

@Input() set filterBy(filterBy: string) {
this.filterBy$.next(filterBy);
}

@Input() set tab(tab: string) {
this.tab$.next(tab);
}

@Input() set municipality(municipality: string) {
this.municipality$.next(municipality);
}
Expand All @@ -72,6 +82,8 @@ export class NamedPlaceComponent implements OnInit, OnDestroy {
@Output() municipalityChange = new EventEmitter<string>();
@Output() tagsChange = new EventEmitter<string[]>();
@Output() activeIdChange = new EventEmitter<string | null>();
@Output() filterChange = new EventEmitter<string>();
@Output() tabChange = new EventEmitter<string>();
@Output() use = new EventEmitter<string | undefined | null>();
@Output() edit = new EventEmitter<string | undefined | null>();
@Output() create = new EventEmitter<null>();
Expand All @@ -89,6 +101,8 @@ export class NamedPlaceComponent implements OnInit, OnDestroy {
private updateFromInput!: Subscription;
private documentForm$ = new BehaviorSubject<Form.SchemaForm | undefined>(undefined);
private activeNP$ = new BehaviorSubject<string | undefined | null>(undefined);
private filterBy$ = new BehaviorSubject<string | undefined>(undefined);
private tab$ = new BehaviorSubject<string | undefined>(undefined);
private municipality$ = new BehaviorSubject<string | undefined>(undefined);
private birdAssociationArea$ = new BehaviorSubject<string | undefined>(undefined);
private tags$ = new BehaviorSubject<string[] | undefined>(undefined);
Expand Down Expand Up @@ -164,14 +178,28 @@ export class NamedPlaceComponent implements OnInit, OnDestroy {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const formRights$ = this.documentForm$.pipe(switchMap(documentForm => this.formPermissionService.getRights(documentForm!)));

this.vm$ = combineLatest(this.documentForm$, placeForm$, this.municipality$, this.birdAssociationArea$, this.tags$, activeNP$, namedPlaces$, user$, formRights$).pipe(
this.vm$ = combineLatest(
this.documentForm$,
placeForm$,
this.municipality$,
this.birdAssociationArea$,
this.tags$,
activeNP$,
this.filterBy$,
this.tab$,
namedPlaces$,
user$,
formRights$
).pipe(
map(([
documentForm,
placeForm,
municipality,
birdAssociationArea,
tags,
activeNP,
filterBy,
tab,
namedPlaces,
user,
formRights
Expand All @@ -186,6 +214,8 @@ export class NamedPlaceComponent implements OnInit, OnDestroy {
municipality,
tags,
activeNP,
filterBy,
tab,
description: documentForm.options?.namedPlaceOptions?.chooseDescription ?? 'np.defaultDescription',
allowEdit: (documentForm?.options?.namedPlaceOptions?.allowAddingPublic || formRights.admin) && !this.readonly,
mapOptionsData: NamedPlaceComponent.getMapOptions(documentForm),
Expand Down Expand Up @@ -271,6 +301,14 @@ export class NamedPlaceComponent implements OnInit, OnDestroy {
});
}

onFilterChange(filterBy: string) {
this.filterChange.emit(filterBy);
}

onTabChange(tab: string) {
this.tabChange.emit(tab);
}

onEdit() {
this.activeNP$.pipe(take(1)).subscribe(id => this.edit.emit(id));
}
Expand Down
4 changes: 4 additions & 0 deletions projects/laji/src/app/+project-form/form/named-place/np-choose/np-choose.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,7 @@
.nav a {
cursor: pointer;
}

.filterBy {
padding: 15px 0;
}
20 changes: 17 additions & 3 deletions projects/laji/src/app/+project-form/form/named-place/np-choose/np-choose.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
<div *ngIf="visible">
<div class="row">
<div class="col-sm-12">
<div class="filterBy">
<input class="form-control inline-block"
type='text'
placeholder="{{'haseka.submissions.filter' | translate}}"
[value]="_filterBy ? _filterBy : ''"
(keyup)="updateFilter($event)">
</div>
</div>
</div>
<lu-tabs *ngIf="!_documentForm.options?.namedPlaceOptions?.hideMapTab else listTemplate"
[tabsListClass]="formOptionToClassName('options.namedPlaceOptions.hideMapTab options.namedPlaceOptions.startWithMap')"
[selectedIndex]="activeIndex"
Expand All @@ -17,22 +28,25 @@
lajiFormOption="options.namedPlaceOptions.reservationUntil"
[placeForm]="placeForm"
[documentForm]="_documentForm"
[filterBy]="_filterBy"
[filteredIDs]="filteredIDs"
(activePlaceChange)="onActivePlaceChange($event)"></laji-np-map>
</ng-container>
</lu-tab>
</lu-tabs>
<ng-template #listTemplate>
<div id="list-container" *ngIf="loadedTabs.isLoaded('list')">
<div id="list-container">
<laji-np-list [height]="height"
[namedPlaces]="_namedPlaces"
[documentForm]="_documentForm"
[placeForm]="placeForm"
[listColumnNameMapping]="_documentForm.options?.namedPlaceOptions?.listColumnNameMapping"
[activeNP]="findNPIndexById(_activeNP)"
[filterBy]="_filterBy"
[formRights]="formRights"
[visible]="loadedTabs.getNameFromIdx(activeIndex) === 'list'"
(activePlaceChange)="onActivePlaceChange($event)">
></laji-np-list>
(activePlaceChange)="onActivePlaceChange($event)"
(filteredIDs)="onFilteredIDsChange($event)"></laji-np-list>
</div>
</ng-template>
</div>
41 changes: 39 additions & 2 deletions projects/laji/src/app/+project-form/form/named-place/np-choose/np-choose.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { formOptionToClassName } from '../../../../shared/directive/project-form
export class NpChooseComponent implements OnInit, OnChanges {
activeIndex = 0;
loadedTabs = new LoadedElementsStore(['list', 'map']);
filteredIDs: string[] = [];

height = '600px';
_namedPlaces: ExtendedNamedPlace[] = [];
Expand All @@ -37,14 +38,17 @@ export class NpChooseComponent implements OnInit, OnChanges {
@Input() formRights?: Rights;

@Output() activePlaceChange = new EventEmitter<string>();
@Output() filterChange = new EventEmitter<string>();
@Output() tabChange = new EventEmitter();

sent = this.isSent.bind(this);

private seasonStart?: Date;
private seasonEnd?: Date;
private queryParamTab?: string;

_activeNP?: string;
_filterBy?: string;

formOptionToClassName = formOptionToClassName;

Expand All @@ -59,6 +63,10 @@ export class NpChooseComponent implements OnInit, OnChanges {

ngOnChanges(changes: SimpleChanges) {
if (changes['documentForm']) {
if (this.queryParamTab !== undefined) {
return;
}
// use named place options if query params do not specify tab
if (this._documentForm?.options?.namedPlaceOptions?.startWithMap) {
this.activeIndex = this.loadedTabs.getIdxFromName('map');
this.loadedTabs.load(this.activeIndex);
Expand Down Expand Up @@ -97,7 +105,7 @@ export class NpChooseComponent implements OnInit, OnChanges {

updateHeight() {
if (this.platformService.isBrowser) {
this.height = Math.min(window.innerHeight - 70, 490) + 'px';
this.height = Math.min(window.innerHeight - 70, 600) + 'px';
}
}

Expand All @@ -111,8 +119,24 @@ export class NpChooseComponent implements OnInit, OnChanges {
this._activeNP = id;
}

@Input() set filterBy(id: string|undefined) {
this._filterBy = id;
}

@Input() set tab(tab: string|undefined) {
this.queryParamTab = tab;

if (tab) {
const idx = this.loadedTabs.getIdxFromName(tab);
if (idx !== -1) {
this.activeIndex = idx;
this.loadedTabs.load(idx);
}
}
}

private findNPIdByIndex(idx: number) {
return this._namedPlaces[idx].id;
return this._namedPlaces[idx]?.id;
}

findNPIndexById(id?: string) {
Expand All @@ -127,6 +151,19 @@ export class NpChooseComponent implements OnInit, OnChanges {
this.activePlaceChange.emit(this._activeNP);
}

updateFilter(event: any) {
this._filterBy = event.target.value;
this.filterChange.emit(this._filterBy);
}

onFilteredIDsChange(ids: string[]) {
this.filteredIDs = ids;
if (this._activeNP && !this.filteredIDs.includes(this._activeNP)) {
this._activeNP = undefined;
this.onActivePlaceChange(-1);
}
}

isSent(np: NamedPlace) {
if (this.seasonStart && this.seasonEnd && np?.prepopulatedDocument?.gatheringEvent?.dateBegin) {
const dateBegin = new Date(np.prepopulatedDocument.gatheringEvent.dateBegin);
Expand Down
4 changes: 0 additions & 4 deletions projects/laji/src/app/+project-form/form/named-place/np-choose/np-list/np-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,3 @@
padding: 0;
margin: 0;
}

.filterBy {
padding: 15px 0;
}
12 changes: 2 additions & 10 deletions ...ects/laji/src/app/+project-form/form/named-place/np-choose/np-list/np-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,11 @@
<div class="row">
<div class="col-sm-12">
<div class="filterBy">
<input class="form-control inline-block"
type='text'
placeholder="{{'haseka.submissions.filter' | translate}}"
(keyup)="updateFilter($event)">
</div>
</div>
</div>
<div class="table-responsive np-list"
lajiFormOption="options.namedPlaceOptions.listColumns options.namedPlaceOptions.listColumnsMultisort options.namedPlaceOptions.showLegendList
options.namedPlaceOptions.showLegendList options.namedPlaceOptions.reservationUntil options.namedPlaceOptions.listColumnNameMapping">
<laji-datatable
#dataTable
class="observation-table"
(rowSelect)="changeActivePlace($event)"
(filteredIDs)="changeFilteredIDs($event)"
[getRowClass]="getRowClass"
[virtualScrolling]="true"
[clientSideSorting]="true"
Expand All @@ -30,6 +21,7 @@
[columns]="columns!"
[selectionType]="selectionType.single"
[preselectedRowIndex]="activeNP!"
[visible]="_visible"
>
</laji-datatable>
<div class="test"></div>
Expand Down
Loading