RO-3199: Flytt bildesøk til egen tab#990
Conversation
jorgkv
force-pushed
the
feature/RO-3199-images-tab
branch
from
54f53bf to
f22162b
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-water-056410803-990.westeurope.azurestaticapps.net |
1 similar comment
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-water-056410803-990.westeurope.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
This PR implements RO-3199 by separating the observation image view into its own tab/route, aiming to improve Ionic/Angular view-state retention when navigating between observation list, detail view, and back.
Changes:
- Added a dedicated
imagestab (UI + routing) and new i18n label for it. - Refactored observation list and image list views to each include their own split-pane header/menu layout (removing the previous wrapper page).
- Removed the list/image “view type” selector from list controls, since navigation is now tab-based.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/assets/i18n/nb.json | Adds TABS.IMAGES translation (Norwegian). |
| src/assets/i18n/en.json | Adds TABS.IMAGES translation (English). |
| src/app/pages/tabs/tabs.service.ts | Updates tab IDs and tab-detection logic; adds IMAGES tab. |
| src/app/pages/tabs/tabs.routes.ts | Reworks routing to separate list vs images into distinct routes; adds redirects for legacy routes. |
| src/app/pages/tabs/tabs.page.ts | Registers the imagesOutline icon for the new tab icon. |
| src/app/pages/tabs/tabs.page.html | Adds the “Images” tab button and updates list tab from search → list. |
| src/app/pages/observation-list/observation-list/observation-list.component.ts | Adds split-pane/menu/header imports to make the list view self-contained. |
| src/app/pages/observation-list/observation-list/observation-list.component.html | Refactors the list view into a split-pane layout with header + filter menu + add menu. |
| src/app/pages/observation-list/observation-list/observation-list.component.css | Uses display: contents for host to avoid extra wrapper layout effects. |
| src/app/pages/observation-list/list.page.ts | Removes the old wrapper page that hosted split-pane + router-outlet. |
| src/app/pages/observation-list/list-controls/list-controls.component.ts | Removes router-based view switching and the pageType input. |
| src/app/pages/observation-list/list-controls/list-controls.component.html | Removes the list/images view selector UI. |
| src/app/pages/observation-list/image-list/image-list.component.ts | Adds split-pane/menu/header imports to make the image view self-contained. |
| src/app/pages/observation-list/image-list/image-list.component.html | Refactors the image view into a split-pane layout with header + filter menu + add menu. |
| src/app/pages/observation-list/image-list/image-list.component.css | Uses display: contents for host to avoid extra wrapper layout effects. |
| src/app/components/observation/observation-image-carousel/observation-image-carousel.component.ts | Updates URL detection for “image list view” to the new /images route. |
| private parseTabFromPath(path: string): TABS | null { | ||
| const cleanPath = path.includes('?') ? path.slice(0, path.indexOf('?')) : path; | ||
| if (cleanPath.indexOf(TABS.OBSERVATION_LIST) > -1) { | ||
| return TABS.OBSERVATION_LIST; | ||
| } else if (cleanPath.indexOf(TABS.IMAGES) > -1) { | ||
| return TABS.IMAGES; | ||
| } else if (cleanPath.indexOf(TABS.WARNING_LIST) > -1) { | ||
| return TABS.WARNING_LIST; |
| <ion-split-pane contentId="main-content-list-page"> | ||
| <ion-menu side="start" menuId="list-filter" contentId="main-content-list-page" max-edge-start="0"> | ||
| @defer { |
| <ion-split-pane contentId="main-content-image-list"> | ||
| <ion-menu side="start" menuId="list-filter" contentId="main-content-image-list" max-edge-start="0"> | ||
| @defer { |
|
|
||
| <div class="list-header"> | ||
| <p>{{ "OBSERVATION_LIST.IMAGES_DESCRIPTION" | translate }}</p> | ||
| <app-list-controls pageType="images"></app-list-controls> |
There was a problem hiding this comment.
Dette var en enkel og elegant løsning på problemet.
Hvorfor har vi ikke tenkt på dette før?
Er enig i at bildevisning funka dårlig på små skjermer, så sikkert lurt å skjule dette på mobil.
Så ut som copiloten hadde funnet noen ting vi bør se på. Vet ikke hvor lett det er å ha felles instans av menyen, men det ser jo ut som menyene er "i synk" uansett.
Hadde vært fint med felles kode for layout for de tre fanene kart, liste og bilder, så vi ikke må kopiere splitpane og header, men jeg vet ikke hvor enkelt dette er å få til? Det er uansett ikke noe du har funnet på i denne PR, det er jo et mønster vi arver fra tidligere.
| @@ -1 +1 @@ | |||
| <!-- Gjør det mulig å bytte fra liste- til bildevisning + endre sortering --> | |||
There was a problem hiding this comment.
Husk å oppdatere denne kommentaren, siden denne komponenten har fått mindre ansvar
jorgkv
force-pushed
the
feature/RO-3199-images-tab
branch
from
f22162b to
ef5ac4b
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-water-056410803-990.westeurope.azurestaticapps.net |
Dette løser RO-3199 fordi Ionic/Angular nå husker tilstanden til listevisningen bedre.
Du kan nå gå inn på en observasjon, gå tilbake, hoppe mellom liste og bildevisning, og applikasjonen husker tilstanden din bedre.
Dette kan påvirke minnebruken, så vi burde kanskje teste det litt.
TODO