Skip to content

Commit

Permalink
Redesigned the Resource list view
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnveshNalimela
AnveshNalimela committed Nov 12, 2024
1 parent c0ffd4a commit f7c0b57
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 18 deletions.
1 change: 1 addition & 0 deletions public/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1091,6 +1091,7 @@
"resource_approving_facility": "Resource approving facility",
"resource_origin_facility": "Origin Facility",
"resource_request": "Resource Request",
"resource_status": "Resource Status",
"result": "Result",
"result_date": "Result Date",
"result_details": "Result details",
Expand Down
161 changes: 143 additions & 18 deletions src/components/Resource/ResourceList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { navigate } from "raviger";
import { Link, navigate } from "raviger";
import { useTranslation } from "react-i18next";

import CareIcon from "@/CAREUI/icons/CareIcon";
Expand All @@ -11,7 +11,6 @@ import Page from "@/components/Common/Page";
import { ResourceModel } from "@/components/Facility/models";
import SearchInput from "@/components/Form/SearchInput";
import BadgesList from "@/components/Resource/ResourceBadges";
import ResourceBlock from "@/components/Resource/ResourceBlock";
import { formatFilter } from "@/components/Resource/ResourceCommons";
import ListFilter from "@/components/Resource/ResourceFilter";

Expand All @@ -20,6 +19,7 @@ import useFilters from "@/hooks/useFilters";
import routes from "@/Utils/request/api";
import request from "@/Utils/request/request";
import useQuery from "@/Utils/request/useQuery";
import { formatDateTime } from "@/Utils/utils";

export default function ListView() {
const {
Expand All @@ -46,17 +46,130 @@ export default function ListView() {
});

const showResourceCardList = (data: ResourceModel[]) => {
if (loading) {
return <Loading />;
}
if (data && !data.length) {
return (
<div className="mt-64 flex flex-1 justify-center text-secondary-600">
<div className="w-full mt-64 flex flex-1 justify-center text-secondary-600">
{t("no_results_found")}
</div>
);
}

return data.map((resource, i) => (
<div key={i} className="rounded-lg border border-secondary-300 bg-white">
<ResourceBlock resource={resource} />
return data.map((resource: ResourceModel, i) => (
<div key={i} className="w-full border-b-2 border-gray-100 col-span-6">
<div className="border-3 flex grid w-full gap-1 overflow-hidden bg-white p-4 shadow sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
<div className="col-span-1 px-3 text-left">
<div className="text-sm font-bold capitalize">{resource.title}</div>
</div>

<div className="col-span-1 flex flex-col px-2 text-left">
<div className="category">
<dt
title={t("LOG_UPDATE_FIELD_LABEL__patient_category")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-box" className="text-lg mr-1" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{resource.category || ""}
</dd>
</dt>
</div>
<div className="address mt-1">
<dd className="text-xs font-medium leading-5">
{resource.sub_category || "--"}
</dd>
</div>
</div>

<div className="col-span-1 flex flex-col px-3 text-left">
<div className="3xl:flex-row mb-2 flex gap-2 sm:flex-row md:flex-row lg:flex-col xl:flex-row 2xl:flex-row ">
{resource.status == "TRANSPORTATION TO BE ARRANGED" ? (
<dt
title={t("resource_status")}
className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4 overflow-hidden whitespace-nowrap text-ellipsis truncate bg-gray-200"
>
<CareIcon icon="l-truck" className="mr-2" />
<dd className="text-sky-600 truncate">{resource.status}</dd>
</dt>
) : (
<dt
title={t("resource_status")}
className={`w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4 ${
resource.status === "APPROVED"
? "bg-sky-200"
: "bg-yellow-200 text-yellow-500"
}`}
>
<CareIcon icon="l-truck" className="mr-2" />
<dd className="text-sky-600">{resource.status}</dd>
</dt>
)}

<div>
{resource.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="text-center">
<dt
title={t("last_modified")}
className={"flex items-center text-sm font-medium leading-5"}
>
<CareIcon icon="l-stopwatch" className="mr-1" />
<dd className="text-xs font-medium leading-5">
{formatDateTime(resource.modified_date) || "--"}
</dd>
</dt>
</div>
</div>

<div className="col-span-1 text-left">
<dt
title={t("origin_facility")}
className="flex items-center text-left 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">
{resource.origin_facility_object?.name}
</dd>
</dt>

<dt
title={t("resource_approving_facility")}
className="flex items-center text-left 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">
{resource.approving_facility_object?.name}
</dd>
</dt>

<dt
title={t("assigned_facility")}
className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-arrival" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{resource.assigned_facility_object?.name ||
t("yet_to_be_decided")}
</dd>
</dt>
</div>
<div className="col-span-1 mt-2 flex flex-col text-left">
<Link
href={`/resource/${resource.id}`}
className="flex w-full items-center justify-center gap-2 rounded-lg border border-secondary-300 bg-secondary-200 p-2 text-sm font-semibold text-inherit transition-all hover:bg-secondary-300"
>
<CareIcon icon="l-eye" className="text-lg" /> {t("all_details")}
</Link>
</div>
</div>
</div>
));
};
Expand All @@ -79,26 +192,24 @@ export default function ListView() {
breadcrumbs={false}
options={
<>
<div className="md:px-4">
<div className="md:px-4"></div>
<div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
<SearchInput
name="title"
value={qParams.title}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder={t("search_resource")}
/>
</div>
<div className="w-32">
{/* dummy div to align space as per board view */}
</div>
<div className="flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
<ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}>
<CareIcon icon="l-list-ul" className="rotate-90" />
{t("board_view")}
</ButtonV2>

<div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
<ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}>
<CareIcon icon="l-list-ul" className="rotate-90" />
{t("board_view")}
</ButtonV2>
</div>
</>
}
Expand All @@ -123,10 +234,24 @@ export default function ListView() {
{t("refresh_list")}
</button>
</div>

<div className="mb-5 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{data?.results && showResourceCardList(data?.results)}
<div className="mx-5 mt-5 grid w-full gap-2 border-b-2 border-gray-100 p-4 text-sm font-medium sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
<div className="col-span-1 uppercase sm:text-center md:text-center lg:block lg:text-left">
{t("resource")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("LOG_UPDATE_FIELD_LABEL__patient_category")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("consent__status")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("facilities")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("LOG_UPDATE_FIELD_LABEL__action")}
</div>
</div>
<div>{showResourceCardList(data?.results || [])}</div>
<div>
<Pagination totalCount={data?.count || 0} />
</div>
Expand Down

0 comments on commit f7c0b57

Please sign in to comment.