From 3080151921f9d6889b1ad556a26e5890bdbe6124 Mon Sep 17 00:00:00 2001 From: marcin Date: Wed, 29 Oct 2025 11:21:03 +0100 Subject: [PATCH 1/3] legge til info tekster under lista --- .../observation/observation.component.css | 1 - .../observation-list.component.css | 29 +++++++++++++++++++ .../observation-list.component.html | 13 +++++++++ .../observation-list.component.ts | 5 ++++ src/assets/i18n/en.json | 4 +-- src/assets/i18n/nb.json | 4 +-- 6 files changed, 51 insertions(+), 5 deletions(-) diff --git a/src/app/components/observation/observation/observation.component.css b/src/app/components/observation/observation/observation.component.css index 7af4cdfed..682c69e32 100644 --- a/src/app/components/observation/observation/observation.component.css +++ b/src/app/components/observation/observation/observation.component.css @@ -2,7 +2,6 @@ display: block; max-width: var(--desktop-max-width); margin: 0 auto; - margin-top: 16px; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /** diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.css b/src/app/pages/observation-list/observation-list/observation-list.component.css index cf13da887..64dd5c06b 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.css +++ b/src/app/pages/observation-list/observation-list/observation-list.component.css @@ -12,10 +12,39 @@ .list { height: 100%; width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; max-width: var(--desktop-max-width); margin: 0 auto; } +.list-end-text { + margin-top: 32px; + display: flex; + gap: 4px; + align-items: flex-start; + align-self: center; + justify-content: center; + color: var(--ion-background-color-step-850); + ion-icon { + font-size: 1.5rem; + } + p { + margin: 0; + } +} + +.list > :last-child { + padding-bottom: 32px; +} + +@media screen and (max-width: 600px) { + .list > :last-child { + padding-bottom: 64px; + } +} + ion-content { --padding-start: 8px; --padding-end: 8px; diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.html b/src/app/pages/observation-list/observation-list/observation-list.component.html index f61e0ee15..ff231478f 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.html +++ b/src/app/pages/observation-list/observation-list/observation-list.component.html @@ -27,5 +27,18 @@ + @let endText = + maxItemsFetched() + ? "OBSERVATION_LIST.MAX_COUNT_REACHED" + : registrations().length && registrations().length == count() + ? "OBSERVATION_LIST.NO_MORE_OBS_IN_VIEW" + : ""; + + @if (endText) { + + + {{ endText | translate }} + + } diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.ts b/src/app/pages/observation-list/observation-list/observation-list.component.ts index e0f3d81d2..f64aa41d5 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.ts +++ b/src/app/pages/observation-list/observation-list/observation-list.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, inject, viewChild } from '@angular/ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'; import { IonContent, + IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonRefresher, @@ -18,6 +19,8 @@ import { ListControlsComponent } from '../list-controls/list-controls.component' import { TranslatePipe } from '@ngx-translate/core'; import { BreakpointService } from 'src/app/core/services/breakpoint.service'; import { UpdateObservationsService } from 'src/app/modules/side-menu/components/update-observations/update-observations.service'; +import { addIcons } from 'ionicons'; +import { informationCircleOutline } from 'ionicons/icons'; @Component({ selector: 'app-observation-list', @@ -26,6 +29,7 @@ import { UpdateObservationsService } from 'src/app/modules/side-menu/components/ IonInfiniteScroll, IonInfiniteScrollContent, IonContent, + IonIcon, IonRefresher, IonRefresherContent, ErrorStateComponent, @@ -70,6 +74,7 @@ export class ObservationListComponent { error = toSignal(this.searchHandler.error$, { initialValue: { hasError: false } }); constructor() { + addIcons({ informationCircleOutline }); this.updateObservationsService.refreshRequested$?.pipe(takeUntilDestroyed()).subscribe(() => { this.refresh(); // oppfrisk sida når bruker trykker på oppfrisk-knappen i menyen }); diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index c2655a4c0..965186571 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -290,8 +290,8 @@ "FORMS": "Forms", "IMAGES_DESCRIPTION": "Shows all images from all filtered observations.", "LOADING": "Loading observations", - "MAX_COUNT_REACHED_HEADER": "No more observations", - "MAX_COUNT_REACHED_TEXT": "We show max {{ maxCount }} observations here. If you didn't find what you looked for you may try to zoom in or narrow the period you want to see observations from.", + "MAX_COUNT_REACHED": "The list can only show 100 observations, try changing the map area or filter to limit.", + "NO_MORE_OBS_IN_VIEW": "Try changing the map area or filter to see more observations.", "NO_IMAGES": "No images", "NO_IMAGES_TEXT": "There are no images found in the map section, try to change the view or expand the period you want to see observations from", "NO_OBSERVATIONS": "No observations", diff --git a/src/assets/i18n/nb.json b/src/assets/i18n/nb.json index 00bfa7aa8..576da053f 100644 --- a/src/assets/i18n/nb.json +++ b/src/assets/i18n/nb.json @@ -296,8 +296,8 @@ "FORMS": "Skjemaer", "IMAGES_DESCRIPTION": "Viser alle bilder fra alle filtrerte observasjoner.", "LOADING": "Laster observasjoner", - "MAX_COUNT_REACHED_HEADER": "Ingen flere observasjoner", - "MAX_COUNT_REACHED_TEXT": "Vi viser maks {{ maxCount }} observasjoner her. Hvis du ikke fant det du lette etter, prøv å zoome inn på kartet eller snevre inn perioden du vil se observasjoner fra.", + "MAX_COUNT_REACHED": "Lista kan kun vise 100 observasjoner, prøv å endre kartutsnitt eller filter for å begrense.", + "NO_MORE_OBS_IN_VIEW": "Prøv å endre kartutsnitt eller filter for å se flere observasjoner.", "NO_IMAGES": "Ingen bilder", "NO_IMAGES_TEXT": "Det er ingen observasjoner med bilder i kartutsnittet. Forsøk å endre utsnittet eller utvid perioden du vil se observasjoner fra.", "NO_OBSERVATIONS": "Ingen observasjoner", From 789c562db00a7ceecd9bb126b0cb1357d2e4c312 Mon Sep 17 00:00:00 2001 From: marcin Date: Wed, 29 Oct 2025 11:50:22 +0100 Subject: [PATCH 2/3] oppdatere bilder liste --- .../image-list/image-list.component.css | 5 ++++ .../image-list/image-list.component.html | 12 ++++++---- .../image-list/image-list.component.ts | 5 ++-- .../list-end-info.component.html | 13 ++++++++++ .../list-end-info.component.scss | 15 ++++++++++++ .../list-end-info.component.spec.ts | 24 +++++++++++++++++++ .../list-end-info/list-end-info.component.ts | 23 ++++++++++++++++++ .../observation-list.component.css | 16 ------------- .../observation-list.component.html | 18 ++++---------- .../observation-list.component.ts | 7 ++---- 10 files changed, 98 insertions(+), 40 deletions(-) create mode 100644 src/app/pages/observation-list/list-end-info/list-end-info.component.html create mode 100644 src/app/pages/observation-list/list-end-info/list-end-info.component.scss create mode 100644 src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts create mode 100644 src/app/pages/observation-list/list-end-info/list-end-info.component.ts diff --git a/src/app/pages/observation-list/image-list/image-list.component.css b/src/app/pages/observation-list/image-list/image-list.component.css index c522a678b..31bf4273e 100644 --- a/src/app/pages/observation-list/image-list/image-list.component.css +++ b/src/app/pages/observation-list/image-list/image-list.component.css @@ -26,6 +26,11 @@ ion-content::part(scroll) { padding-right: 8px; } +.grid > :last-child { + padding-bottom: 32px; + grid-column: 1 / -1; +} + app-grid-image { width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); diff --git a/src/app/pages/observation-list/image-list/image-list.component.html b/src/app/pages/observation-list/image-list/image-list.component.html index 6a46ad71c..a855e04e3 100644 --- a/src/app/pages/observation-list/image-list/image-list.component.html +++ b/src/app/pages/observation-list/image-list/image-list.component.html @@ -26,9 +26,13 @@ } } + + + + - - - - diff --git a/src/app/pages/observation-list/image-list/image-list.component.ts b/src/app/pages/observation-list/image-list/image-list.component.ts index 2ed362057..c48962b6e 100644 --- a/src/app/pages/observation-list/image-list/image-list.component.ts +++ b/src/app/pages/observation-list/image-list/image-list.component.ts @@ -21,7 +21,7 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core'; import { UpdateObservationsService } from 'src/app/modules/side-menu/components/update-observations/update-observations.service'; import { ObservationImageCarouselComponent } from 'src/app/components/observation/observation-image-carousel/observation-image-carousel.component'; import { AttachmentViewModel, SearchService } from 'src/app/modules/common-regobs-api'; - +import { ListEndInfoComponent } from '../list-end-info/list-end-info.component'; /** * Bildesøk */ @@ -38,6 +38,7 @@ import { AttachmentViewModel, SearchService } from 'src/app/modules/common-regob ListControlsComponent, GridImageComponent, TranslatePipe, + ListEndInfoComponent, ], templateUrl: './image-list.component.html', styleUrl: './image-list.component.css', @@ -76,7 +77,7 @@ export class ImageListComponent { isLoading = toSignal(this.searchHandler.isFetching$, { initialValue: false }); maxItemsFetched = toSignal(this.searchHandler.maxItemsFetched$, { initialValue: false }); error = toSignal(this.searchHandler.error$, { initialValue: { hasError: false } }); - + count = this.searchHandler.count.asReadonly(); constructor() { this.updateObservationsService.refreshRequested$?.pipe(takeUntilDestroyed()).subscribe(() => { this.refresh(); // oppfrisk sida når bruker trykker på oppfrisk-knappen i menyen diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.html b/src/app/pages/observation-list/list-end-info/list-end-info.component.html new file mode 100644 index 000000000..78586013b --- /dev/null +++ b/src/app/pages/observation-list/list-end-info/list-end-info.component.html @@ -0,0 +1,13 @@ +@let endText = + maxItemsFetched + ? "OBSERVATION_LIST.MAX_COUNT_REACHED" + : registrationsLength && registrationsLength <= registrationsCount + ? "OBSERVATION_LIST.NO_MORE_OBS_IN_VIEW" + : ""; + +@if (endText) { + + + {{ endText | translate }} + +} diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.scss b/src/app/pages/observation-list/list-end-info/list-end-info.component.scss new file mode 100644 index 000000000..b1e730360 --- /dev/null +++ b/src/app/pages/observation-list/list-end-info/list-end-info.component.scss @@ -0,0 +1,15 @@ +.list-end-info { + margin-top: 32px; + display: flex; + gap: 4px; + align-items: flex-start; + align-self: center; + justify-content: center; + color: var(--ion-background-color-step-850); + ion-icon { + font-size: 1.5rem; + } + p { + margin: 0; + } +} diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts b/src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts new file mode 100644 index 000000000..72a31a7e3 --- /dev/null +++ b/src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { ListEndInfoComponent } from './list-end-info.component'; + +describe('ListEndInfoComponent', () => { + let component: ListEndInfoComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ ListEndInfoComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(ListEndInfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.ts b/src/app/pages/observation-list/list-end-info/list-end-info.component.ts new file mode 100644 index 000000000..4f0c87cc7 --- /dev/null +++ b/src/app/pages/observation-list/list-end-info/list-end-info.component.ts @@ -0,0 +1,23 @@ +import { Component, Input } from '@angular/core'; +import { IonIcon } from '@ionic/angular/standalone'; +import { TranslatePipe } from '@ngx-translate/core'; +import { addIcons } from 'ionicons'; +import { informationCircleOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-list-end-info', + templateUrl: './list-end-info.component.html', + styleUrls: ['./list-end-info.component.scss'], + imports: [IonIcon, TranslatePipe], +}) +/** + * Viser informasjonstekster i bunnen av observasjonslister + */ +export class ListEndInfoComponent { + @Input() maxItemsFetched = false; + @Input() registrationsLength = 0; + @Input() registrationsCount = 0; + constructor() { + addIcons({ informationCircleOutline }); + } +} diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.css b/src/app/pages/observation-list/observation-list/observation-list.component.css index 64dd5c06b..66d312749 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.css +++ b/src/app/pages/observation-list/observation-list/observation-list.component.css @@ -19,22 +19,6 @@ margin: 0 auto; } -.list-end-text { - margin-top: 32px; - display: flex; - gap: 4px; - align-items: flex-start; - align-self: center; - justify-content: center; - color: var(--ion-background-color-step-850); - ion-icon { - font-size: 1.5rem; - } - p { - margin: 0; - } -} - .list > :last-child { padding-bottom: 32px; } diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.html b/src/app/pages/observation-list/observation-list/observation-list.component.html index ff231478f..c695ed2b7 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.html +++ b/src/app/pages/observation-list/observation-list/observation-list.component.html @@ -27,18 +27,10 @@ - @let endText = - maxItemsFetched() - ? "OBSERVATION_LIST.MAX_COUNT_REACHED" - : registrations().length && registrations().length == count() - ? "OBSERVATION_LIST.NO_MORE_OBS_IN_VIEW" - : ""; - - @if (endText) { - - - {{ endText | translate }} - - } + diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.ts b/src/app/pages/observation-list/observation-list/observation-list.component.ts index f64aa41d5..6f12e4798 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.ts +++ b/src/app/pages/observation-list/observation-list/observation-list.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, inject, viewChild } from '@angular/ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'; import { IonContent, - IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonRefresher, @@ -19,8 +18,7 @@ import { ListControlsComponent } from '../list-controls/list-controls.component' import { TranslatePipe } from '@ngx-translate/core'; import { BreakpointService } from 'src/app/core/services/breakpoint.service'; import { UpdateObservationsService } from 'src/app/modules/side-menu/components/update-observations/update-observations.service'; -import { addIcons } from 'ionicons'; -import { informationCircleOutline } from 'ionicons/icons'; +import { ListEndInfoComponent } from '../list-end-info/list-end-info.component'; @Component({ selector: 'app-observation-list', @@ -29,13 +27,13 @@ import { informationCircleOutline } from 'ionicons/icons'; IonInfiniteScroll, IonInfiniteScrollContent, IonContent, - IonIcon, IonRefresher, IonRefresherContent, ErrorStateComponent, EmptyStateComponent, ListControlsComponent, TranslatePipe, + ListEndInfoComponent, ], templateUrl: './observation-list.component.html', styleUrl: './observation-list.component.css', @@ -74,7 +72,6 @@ export class ObservationListComponent { error = toSignal(this.searchHandler.error$, { initialValue: { hasError: false } }); constructor() { - addIcons({ informationCircleOutline }); this.updateObservationsService.refreshRequested$?.pipe(takeUntilDestroyed()).subscribe(() => { this.refresh(); // oppfrisk sida når bruker trykker på oppfrisk-knappen i menyen }); From b5e10f287fec6d7311080316637973633c43a497 Mon Sep 17 00:00:00 2001 From: marcin Date: Wed, 29 Oct 2025 12:00:34 +0100 Subject: [PATCH 3/3] fjerne tester --- .../list-end-info.component.spec.ts | 24 ------------------- 1 file changed, 24 deletions(-) delete mode 100644 src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts b/src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts deleted file mode 100644 index 72a31a7e3..000000000 --- a/src/app/pages/observation-list/list-end-info/list-end-info.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { IonicModule } from '@ionic/angular'; - -import { ListEndInfoComponent } from './list-end-info.component'; - -describe('ListEndInfoComponent', () => { - let component: ListEndInfoComponent; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ ListEndInfoComponent ], - imports: [IonicModule.forRoot()] - }).compileComponents(); - - fixture = TestBed.createComponent(ListEndInfoComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - })); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -});