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

Design of List View layout in Resource Page #9096

Merged
merged 9 commits into from
Nov 18, 2024
Merged

Design of List View layout in Resource Page #9096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f7c0b57
Redesigned the Resource list view
AnveshNalimela Nov 12, 2024
4bb1ef0
Merge branch 'develop' into issue/#9090/listview-resources
AnveshNalimela Nov 12, 2024
cbeacc6
Merge branch 'ohcnetwork:develop' into issue/#9090/listview-resources
AnveshNalimela Nov 13, 2024
6d76dc2
made changes suggested by coderabbit
AnveshNalimela Nov 13, 2024
bb2e81f
Merge branch 'issue/#9090/listview-resources' of github.com:AnveshNal…
AnveshNalimela Nov 13, 2024
ea2942e
Merge branch 'develop' into issue/#9090/listview-resources
AnveshNalimela Nov 15, 2024
38eb8e6
added translations and used chip component
AnveshNalimela Nov 15, 2024
7f1d159
made few alignments and adjusted:
AnveshNalimela Nov 15, 2024
fab7498
Removed shadow and added proper borders
AnveshNalimela Nov 15, 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
4 changes: 4 additions & 0 deletions public/locale/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"APPETITE__NO_TASTE_FOR_FOOD": "No taste for food",
"APPETITE__REDUCED": "Reduced",
"APPETITE__SATISFACTORY": "Satisfactory",
"APPROVED": "Approved",
"AUTOMATED": "Automated",
"BED_WITH_OXYGEN_SUPPORT": "Bed with Oxygen Support",
"BLADDER_DRAINAGE__CONDOM_CATHETER": "Condom Catheter",
Expand Down Expand Up @@ -140,6 +141,7 @@
"OXYGEN_MODALITY__NON_REBREATHING_MASK_short": "NRM",
"OXYGEN_MODALITY__SIMPLE_FACE_MASK": "Simple Face Mask",
"OXYGEN_MODALITY__SIMPLE_FACE_MASK_short": "SFM",
"PENDING": "Pending",
"PRESCRIPTION_FREQUENCY_BD": "Twice daily",
"PRESCRIPTION_FREQUENCY_HS": "Night only",
"PRESCRIPTION_FREQUENCY_OD": "Once daily",
Expand Down Expand Up @@ -205,6 +207,7 @@
"SORT_OPTIONS__taken_at": "Oldest taken date first",
"Submit": "Submit",
"TELEMEDICINE": "Telemedicine",
"TRANSPORTATION TO BE ARRANGED": "Transportation",
"URINATION_FREQUENCY__DECREASED": "Decreased",
"URINATION_FREQUENCY__INCREASED": "Increased",
"URINATION_FREQUENCY__NORMAL": "Normal",
Expand Down Expand Up @@ -1099,6 +1102,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
174 changes: 156 additions & 18 deletions src/components/Resource/ResourceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { navigate } from "raviger";
import { Link, navigate } from "raviger";
import { useTranslation } from "react-i18next";

import Chip from "@/CAREUI/display/Chip";
import CareIcon from "@/CAREUI/icons/CareIcon";
import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";

Expand All @@ -11,7 +12,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 +20,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 Down Expand Up @@ -48,15 +49,140 @@ export default function ListView() {
const showResourceCardList = (data: ResourceModel[]) => {
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 border-b-2 border-gray-200 col-span-6"
>
<div className=" flex grid w-full gap-1 overflow-hidden bg-white p-4 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 overflow-hidden whitespace-nowrap text-ellipsis truncate"
>
<Chip
size="small"
variant="secondary"
startIcon="l-truck"
text={t(`${resource.status}`)}
className="text-lg font-bold text-sky-600 truncate bg-gray-300 rounded-full uppercase text-center"
/>
</dt>
) : (
<dt
title={t("resource_status")}
className="w-fit mt-1 h-fit flex h-5 shrink-0 items-center rounded-full leading-4"
>
<Chip
size="small"
variant={
resource.status === "APPROVED" ? "primary" : "secondary"
}
startIcon="l-truck"
text={t(`${resource.status}`)}
className={`text-lg font-bold rounded-full uppercase ${
resource.status === "APPROVED"
? "bg-sky-200"
: "bg-yellow-200 "
}`}
/>
</dt>
)}

<div>
{resource.emergency && (
<span className="mt-1.5 inline-block shrink-0 rounded-full bg-red-100 px-2 py-1 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 +205,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 +247,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>
AnveshNalimela marked this conversation as resolved.
Show resolved Hide resolved
<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
Loading