Skip to content
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

Fix Auto-Scroll Issue and Total Count Card in facility details page #9275

Closed
wants to merge 5 commits into from
Closed

Fix Auto-Scroll Issue and Total Count Card in facility details page #9275

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2812e9c
Fix Auto-Scroll Issue and Total Count Card in facility details page
shauryag2002 Dec 2, 2024
4d0a553
resolved coderabbitai comments
shauryag2002 Dec 2, 2024
4fb718c
Fix setTotalDoctors in FacilityStaffList
shauryag2002 Dec 7, 2024
48b365c
Refactor DoctorPaginatedResponse to use PaginatedResponse
shauryag2002 Dec 7, 2024
23d3b67
Merge branch 'develop' of https://github.com/shauryag2002/care_fe int…
shauryag2002 Dec 14, 2024
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
7 changes: 5 additions & 2 deletions src/Utils/request/api.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,10 @@ import {
UserModel,
} from "@/components/Users/models";

import { PaginatedResponse } from "@/Utils/request/types";
import {
DoctorPaginatedResponse,
PaginatedResponse,
} from "@/Utils/request/types";

/**
* A fake function that returns an empty object casted to type T
Expand Down Expand Up @@ -671,7 +674,7 @@ const routes = {

listDoctor: {
path: "/api/v1/facility/{facilityId}/hospital_doctor/",
TRes: Type<PaginatedResponse<DoctorModal>>(),
TRes: Type<DoctorPaginatedResponse<DoctorModal>>(),
},
getDoctor: {
path: "/api/v1/facility/{facilityId}/hospital_doctor/{id}/",
Expand Down
4 changes: 4 additions & 0 deletions src/Utils/request/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,7 @@ export interface PaginatedResponse<TItem> {
previous: string | null;
results: TItem[];
}

export interface DoctorPaginatedResponse<T> extends PaginatedResponse<T> {
total_doctors: number;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider moving domain-specific field to a separate interface

Adding total_doctors to the generic PaginatedResponse interface violates the Interface Segregation Principle, as not all paginated responses will need this field. Consider creating a specific interface for doctor-related responses:

interface DoctorPaginatedResponse<T> extends PaginatedResponse<T> {
  total_doctors: number;
}

}
14 changes: 9 additions & 5 deletions src/components/Common/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ interface PaginationProps {
defaultPerPage: number;
cPage: number;
className?: string;
scrollToTop?: boolean;
}
const Pagination = ({
className = "mx-auto my-4",
data,
onChange,
defaultPerPage,
cPage,
scrollToTop = true,
}: PaginationProps) => {
const [rowsPerPage, setRowsPerPage] = useState(3);
const [currentPage, setCurrentPage] = useState(1);
Expand Down Expand Up @@ -81,11 +83,13 @@ const Pagination = ({
setCurrentPage(page);
onChange(page, rowsPerPage);
const pageContainer = window.document.getElementById("pages");
pageContainer?.scroll({
top: 0,
left: 0,
behavior: "smooth",
});
if (scrollToTop) {
pageContainer?.scroll({
top: 0,
left: 0,
behavior: "smooth",
});
}
};

return (
Expand Down
24 changes: 14 additions & 10 deletions src/components/Facility/FacilityStaffList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,18 @@ export const FacilityStaffList = (props: any) => {
offset: (qParams.page - 1) * resultsPerPage,
},
onResponse: ({ res, data }) => {
if (res?.ok && data) {
let totalCount = 0;
data.results.map((doctor: DoctorModal) => {
if (doctor.count) {
totalCount += doctor.count;
}
});
setTotalDoctors(totalCount);
if (res?.ok && data?.results.length) {
setTotalDoctors(data.results[0]?.total_doctors ?? 0);
}
},
});

const handlePageChange = (page: number) => {
updatePage(page);
const staffCapacityElement = document.getElementById("staff_capacity");
staffCapacityElement?.scrollIntoView({ behavior: "smooth" });
};

let doctorList: any = null;
if (!doctorsList || !doctorsList.results.length) {
doctorList = (
Expand Down Expand Up @@ -89,7 +89,10 @@ export const FacilityStaffList = (props: any) => {

return (
<section id="facility-doctor-capacity-details">
<div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
<div
className="mt-5 rounded bg-white p-3 shadow-sm md:p-6"
id="staff_capacity"
>
<div className="justify-between md:flex md:pb-2">
<div className="mb-2 text-xl font-bold">Staff Capacity</div>
<ButtonV2
Expand Down Expand Up @@ -128,7 +131,8 @@ export const FacilityStaffList = (props: any) => {
cPage={qParams.page}
defaultPerPage={resultsPerPage}
data={{ totalCount: doctorsList?.count ?? 0 }}
onChange={(page) => updatePage(page)}
scrollToTop={false}
onChange={(page: number) => handlePageChange(page)}
/>
</section>
);
Expand Down
1 change: 1 addition & 0 deletions src/components/Facility/models.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export interface DoctorModal {
id?: number;
area?: number;
count?: number;
total_doctors?: number;
}

export interface OptionsType {
Expand Down
Loading