RO-3008: legge til info tekster under lista

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);
   /**

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);

src/app/pages/observation-list/image-list/image-list.component.html

@@ -26,9 +26,13 @@
         <app-empty-state></app-empty-state>
       }
     }
+    <ion-infinite-scroll (ionInfinite)="loadNextPage()" [disabled]="disableInfiniteScroll()">
+      <ion-infinite-scroll-content> </ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+    <app-list-end-info
+      [maxItemsFetched]="maxItemsFetched()"
+      [registrationsLength]="registrations().length"
+      [registrationsCount]="count() || 0"
+    ></app-list-end-info>
   </div>
-
-  <ion-infinite-scroll (ionInfinite)="loadNextPage()" [disabled]="disableInfiniteScroll()">
-    <ion-infinite-scroll-content> </ion-infinite-scroll-content>
-  </ion-infinite-scroll>
 </ion-content>

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

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) {
+  <span class="list-end-info">
+    <ion-icon name="information-circle-outline"></ion-icon>
+    <span>{{ endText | translate }}</span>
+  </span>
+}

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;
+  }
+}

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 });
+  }
+}

src/app/pages/observation-list/observation-list/observation-list.component.css

@@ -12,10 +12,23 @@
 .list {
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   max-width: var(--desktop-max-width);
   margin: 0 auto;
 }
 
+.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;

src/app/pages/observation-list/observation-list/observation-list.component.html

@@ -27,5 +27,10 @@
     <ion-infinite-scroll (ionInfinite)="loadNextPage()" [disabled]="disableInfiniteScroll()">
       <ion-infinite-scroll-content> </ion-infinite-scroll-content>
     </ion-infinite-scroll>
+    <app-list-end-info
+      [maxItemsFetched]="maxItemsFetched()"
+      [registrationsLength]="registrations().length"
+      [registrationsCount]="count() || 0"
+    ></app-list-end-info>
   </div>
 </ion-content>

src/app/pages/observation-list/observation-list/observation-list.component.ts

@@ -18,6 +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 { ListEndInfoComponent } from '../list-end-info/list-end-info.component';
 
 @Component({
   selector: 'app-observation-list',
@@ -32,6 +33,7 @@ import { UpdateObservationsService } from 'src/app/modules/side-menu/components/
     EmptyStateComponent,
     ListControlsComponent,
     TranslatePipe,
+    ListEndInfoComponent,
   ],
   templateUrl: './observation-list.component.html',
   styleUrl: './observation-list.component.css',

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",

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",