feat(alert-service): enhance pagination logic in service page#5935
feat(alert-service): enhance pagination logic in service page#5935seungyeoneeee merged 3 commits intodevelopfrom
Conversation
Signed-off-by: 이승연 <sylee1274@mz.co.kr>
* feat: enhance pagination logic in service page Signed-off-by: 이승연 <sylee1274@mz.co.kr> * feat: apply debounced resize and move window logic out of store Signed-off-by: 이승연 <sylee1274@mz.co.kr> --------- Signed-off-by: 이승연 <sylee1274@mz.co.kr>
Signed-off-by: 이승연 <sylee1274@mz.co.kr>
seungyeoneeee
added
the
self_approved/review
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the pagination logic on the service page by updating page size values and adding responsive behavior for healthy service listings. Key changes include updating the unhealthy page size, introducing a new setHealthyPageSize method in the store, modifying the grid layout in ServiceListContent.vue, and adding a debounced window resize listener in ServiceList.vue to adjust healthy page size.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts | Updated unhealthy page size and added a new setter for healthy page size |
| apps/web/src/services/alert-manager/v2/components/ServiceListContent.vue | Adjusted layout classes and card sizing to support grid layout |
| apps/web/src/services/alert-manager/v2/components/ServiceList.vue | Added a resize listener to dynamically adjust healthy pagination based on window width |
Comments suppressed due to low confidence (3)
apps/web/src/services/alert-manager/v2/stores/service-list-page-store.ts:8
- Confirm that the update of unhealthyPageSize from 10 to 12 is intentional and that all downstream pagination logic is adjusted accordingly.
unhealthyPageSize: 12,
apps/web/src/services/alert-manager/v2/components/ServiceListContent.vue:124
- The removal of flex and gap classes in favor of a grid layout should be verified to ensure the new layout meets design expectations across all breakpoints.
<div class="collapsible-contents">
apps/web/src/services/alert-manager/v2/components/ServiceListContent.vue:300
- Changing to min-width instead of a fixed width may lead to size inconsistencies; verify that this new sizing approach integrates well with the overall responsive design.
min-width: 25rem;
| }); | ||
|
|
||
| watch(async () => route.query.serviceName, async (newServiceName) => { | ||
| watch(async () => route.query.serviceName, async (newServiceName: any) => { |
There was a problem hiding this comment.
Consider replacing 'any' with a more explicit type to improve type safety in the watch callback.
| watch(async () => route.query.serviceName, async (newServiceName: any) => { | |
| watch(async () => route.query.serviceName, async (newServiceName: string | null | undefined) => { |
Skip Review (optional)
style,chore,ci,test,docs)Description (optional)
Things to Talk About (optional)