Skip to content

Commit

Permalink
Fixed Misaligned text when there's no data (#8807)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nithish1018
nithish1018 authored Oct 22, 2024
1 parent 494a4b9 commit 2b8470c
Showing 1 changed file with 178 additions and 156 deletions.
334 changes: 178 additions & 156 deletions src/Components/Shifting/ListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@ import request from "../../Utils/request/request";
import routes from "../../Redux/api";
import useQuery from "../../Utils/request/useQuery";
import careConfig from "@careConfig";

import Loading from "@/Components/Common/Loading";
import { IShift } from "./models";

export default function ListView() {
const {
qParams,
Expand All @@ -31,14 +32,17 @@ export default function ListView() {
resultsPerPage,
} = useFilters({ cacheBlacklist: ["patient_name"] });

const [modalFor, setModalFor] = useState({
externalId: undefined,
const [modalFor, setModalFor] = useState<{
external_id: string | undefined;
loading: boolean;
}>({
external_id: undefined,
loading: false,
});
const authUser = useAuthUser();
const { t } = useTranslation();

const handleTransferComplete = async (shift: any) => {
const handleTransferComplete = async (shift: IShift) => {
setModalFor({ ...modalFor, loading: true });
await request(routes.completeTransfer, {
pathParams: { externalId: shift.external_id },
Expand All @@ -59,171 +63,190 @@ export default function ListView() {
}),
});

const showShiftingCardList = (data: any) => {
if (data && !data.length) {
const showShiftingCardList = (data: IShift[]) => {
if (loading) {
return <Loading />;
}

if (!data || data.length === 0) {
return (
<div className="mt-64 flex flex-1 justify-center text-secondary-600">
{t("no_patients_to_show")}
<div className="flex h-[calc(100vh-200px)] items-center justify-center">
<div className="text-2xl font-bold text-secondary-600">
{t("no_patients_to_show")}
</div>
</div>
);
}

return data.map((shift: any) => (
<div key={`shift_${shift.id}`} className="mt-6 w-full">
<div className="h-full overflow-hidden rounded-lg bg-white shadow">
<div className="flex h-full flex-col justify-between p-4">
<div>
<div className="flex justify-between">
<div className="mb-2 text-xl font-bold capitalize">
{shift.patient_object.name} - {shift.patient_object.age}
</div>
return (
<div className="mb-5 grid gap-x-6 md:grid-cols-2">
{data.map((shift: IShift) => (
<div key={`shift_${shift.id}`} className="mt-6 w-full">
<div className="h-full overflow-hidden rounded-lg bg-white shadow">
<div className="flex h-full flex-col justify-between p-4">
<div>
{shift.emergency && (
<span className="inline-block shrink-0 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium leading-4 text-red-800">
{t("emergency")}
</span>
)}
</div>
</div>
<dl className="grid grid-cols-1 gap-x-1 gap-y-2 sm:grid-cols-1">
<div className="sm:col-span-1">
<dt
title={t("shifting_status")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-truck" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.status}
</dd>
</dt>
</div>
<div className="sm:col-span-1">
<dt
title={t("phone_number")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-mobile-android" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.patient_object.phone_number || ""}
</dd>
</dt>
</div>
<div className="sm:col-span-1">
<dt
title={t("origin_facility")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-departure" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{(shift.origin_facility_object || {}).name}
</dd>
</dt>
</div>
{careConfig.wartimeShifting && (
<div className="sm:col-span-1">
<dt
title={t("shifting_approving_facility")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-user-check" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{(shift.shifting_approving_facility_object || {}).name}
</dd>
</dt>
<div className="flex justify-between">
<div className="mb-2 text-xl font-bold capitalize">
{shift.patient_object.name} - {shift.patient_object.age}
</div>
<div>
{shift.emergency && (
<span className="inline-block shrink-0 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium leading-4 text-red-800">
{t("emergency")}
</span>
)}
</div>
</div>
)}
<div className="sm:col-span-1">
<dt
title={t("assigned_facility")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-arrival" className="m-2" />
<dl className="grid grid-cols-1 gap-x-1 gap-y-2 sm:grid-cols-1">
<div className="sm:col-span-1">
<dt
title={t("shifting_status")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-truck" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.status}
</dd>
</dt>
</div>
<div className="sm:col-span-1">
<dt
title={t("phone_number")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-mobile-android" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.patient_object.phone_number || ""}
</dd>
</dt>
</div>
<div className="sm:col-span-1">
<dt
title={t("origin_facility")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-departure" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{(shift.origin_facility_object || {}).name}
</dd>
</dt>
</div>
{careConfig.wartimeShifting && (
<div className="sm:col-span-1">
<dt
title={t("shifting_approving_facility")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-user-check" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{
(shift.shifting_approving_facility_object || {})
.name
}
</dd>
</dt>
</div>
)}
<div className="sm:col-span-1">
<dt
title={t("assigned_facility")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-arrival" className="m-2" />

<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.assigned_facility_external ||
shift.assigned_facility_object?.name ||
t("yet_to_be_decided")}
</dd>
</dt>
</div>
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.assigned_facility_external ||
shift.assigned_facility_object?.name ||
t("yet_to_be_decided")}
</dd>
</dt>
</div>

<div className="sm:col-span-1">
<dt
title={t("last_modified")}
className={
"flex items-center text-sm font-medium leading-5 " +
(dayjs()
.subtract(2, "hours")
.isBefore(shift.modified_date)
? "text-secondary-900"
: "rounded bg-red-400 p-1 text-white")
}
>
<CareIcon icon="l-stopwatch" className="mr-2" />
<dd className="text-sm font-bold leading-5">
{formatDateTime(shift.modified_date) || "--"}
</dd>
</dt>
<div className="sm:col-span-1">
<dt
title={t("last_modified")}
className={
"flex items-center text-sm font-medium leading-5 " +
(dayjs()
.subtract(2, "hours")
.isBefore(shift.modified_date)
? "text-secondary-900"
: "rounded bg-red-400 p-1 text-white")
}
>
<CareIcon icon="l-stopwatch" className="mr-2" />
<dd className="text-sm font-bold leading-5">
{formatDateTime(shift.modified_date) || "--"}
</dd>
</dt>
</div>

<div className="sm:col-span-1">
<dt
title={t("patient_address")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-home" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.patient_object.address || "--"}
</dd>
</dt>
</div>
</dl>
</div>

<div className="sm:col-span-1">
<dt
title={t("patient_address")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
<div className="mt-2 flex">
<ButtonV2
onClick={(_) => navigate(`/shifting/${shift.external_id}`)}
variant="secondary"
border
className="w-full"
>
<CareIcon icon="l-home" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.patient_object.address || "--"}
</dd>
</dt>
<CareIcon icon="l-eye" className="mr-2" />{" "}
{t("all_details")}
</ButtonV2>
</div>
</dl>
</div>

<div className="mt-2 flex">
<ButtonV2
onClick={(_) => navigate(`/shifting/${shift.external_id}`)}
variant="secondary"
border
className="w-full"
>
<CareIcon icon="l-eye" className="mr-2" /> {t("all_details")}
</ButtonV2>
</div>
{shift.status === "COMPLETED" && shift.assigned_facility && (
<div className="mt-2">
<ButtonV2
className="w-full"
disabled={
!shift.patient_object.allow_transfer ||
!(
["DistrictAdmin", "StateAdmin"].includes(
authUser.user_type,
) ||
authUser.home_facility_object?.id ===
shift.assigned_facility
)
}
onClick={() => setModalFor(shift.external_id)}
>
{t("transfer_to_receiving_facility")}
</ButtonV2>
<ConfirmDialog
title={t("confirm_transfer_complete")}
description={t("mark_transfer_complete_confirmation")}
action="Confirm"
show={modalFor === shift.external_id}
onClose={() =>
setModalFor({ externalId: undefined, loading: false })
}
onConfirm={() => handleTransferComplete(shift)}
/>
{shift.status === "COMPLETED" && shift.assigned_facility && (
<div className="mt-2">
<ButtonV2
className="w-full"
disabled={
!shift.patient_object.allow_transfer ||
!(
["DistrictAdmin", "StateAdmin"].includes(
authUser.user_type,
) ||
authUser.home_facility_object?.id ===
shift.assigned_facility
)
}
onClick={() =>
setModalFor({
external_id: shift.external_id,
loading: false,
})
}
>
{t("transfer_to_receiving_facility")}
</ButtonV2>
<ConfirmDialog
title={t("confirm_transfer_complete")}
description={t("mark_transfer_complete_confirmation")}
action="Confirm"
show={modalFor.external_id === shift.external_id}
onClose={() =>
setModalFor({ external_id: undefined, loading: false })
}
onConfirm={() => handleTransferComplete(shift)}
/>
</div>
)}
</div>
)}
</div>
</div>
</div>
))}
</div>
));
);
};

return (
Expand Down Expand Up @@ -291,9 +314,8 @@ export default function ListView() {
</button>
</div>

<div className="mb-5 grid gap-x-6 md:grid-cols-2">
{showShiftingCardList(shiftData?.results || [])}
</div>
{showShiftingCardList(shiftData?.results || [])}

<div>
<Pagination totalCount={shiftData?.count || 0} />
</div>
Expand Down

0 comments on commit 2b8470c

Please sign in to comment.